@reactionary/source 0.0.27

package/examples/node/tsconfig.spec.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "moduleResolution": "node10",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+, "src/initialize-algolia.ts"  ]
+}

package/examples/trpc-node/eslint.config.mjs

@@ -0,0 +1,3 @@
+import baseConfig from '../../eslint.config.mjs';
+
+export default [...baseConfig];

package/examples/trpc-node/project.json

@@ -0,0 +1,61 @@
+{
+  "name": "trpc-node",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "examples/trpc-node/src",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/esbuild:esbuild",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "platform": "node",
+        "outputPath": "dist/examples/trpc-node",
+        "format": ["esm"],
+        "bundle": true,
+        "main": "examples/trpc-node/src/main.ts",
+        "tsConfig": "examples/trpc-node/tsconfig.app.json",
+        "assets": ["examples/trpc-node/src/assets"],
+        "generatePackageJson": true,
+        "esbuildOptions": {
+          "sourcemap": true,
+          "outExtension": {
+            ".js": ".js"
+          }
+        }
+      },
+      "configurations": {
+        "development": {},
+        "production": {
+          "esbuildOptions": {
+            "sourcemap": false,
+            "outExtension": {
+              ".js": ".js"
+            }
+          }
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/js:node",
+      "defaultConfiguration": "development",
+      "dependsOn": [
+        "build"
+      ],
+      "options": {
+        "buildTarget": "trpc-node:build",
+        "runBuildTargetDependencies": false
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "trpc-node:build:development"
+        },
+        "production": {
+          "buildTarget": "trpc-node:build:production"
+        }
+      },
+      "continuous": true
+    }
+  }
+}

package/examples/trpc-node/src/main.ts

@@ -0,0 +1,55 @@
+import express from 'express';
+import cors from 'cors';
+import * as trpcExpress from '@trpc/server/adapters/express';
+import { Client } from '@reactionary/core';
+import session from 'express-session';
+import { CreateExpressContextOptions } from '@trpc/server/adapters/express';
+import { Redis } from 'ioredis';
+import { RedisStore } from 'connect-redis';
+import { client, mergedRouter } from './router-instance';
+
+const app = express();
+
+export function createContext(client: Client) {
+  return async ({ req, res, info }: CreateExpressContextOptions) => {
+    const session = (req as any).session || {};
+
+    return {
+      session,
+      client,
+    };
+  };
+}
+
+app.use(
+  cors({
+    origin: 'http://localhost:4200',
+    credentials: true,
+  })
+);
+
+const redis = new Redis(process.env['SESSION_STORE_REDIS_CONNECTION']);
+
+const store = new RedisStore({
+  client: redis,
+});
+
+app.use(
+  session({
+    store: store,
+    secret: process.env['SESSION_STORE_SECRET'],
+    cookie: {},
+    resave: true,
+    saveUninitialized: true,
+  })
+);
+
+app.use(
+  '/trpc',
+  trpcExpress.createExpressMiddleware({
+    router: mergedRouter,
+    createContext: createContext(client),
+  })
+);
+
+app.listen(3000);

package/examples/trpc-node/src/router-instance.ts

@@ -0,0 +1,52 @@
+import { buildClient } from "@reactionary/core";
+import { withAlgoliaCapabilities } from "@reactionary/provider-algolia";
+import { withCommercetoolsCapabilities } from "@reactionary/provider-commercetools";
+import { withFakeCapabilities } from "@reactionary/provider-fake";
+import { withPosthogCapabilities } from "@reactionary/provider-posthog";
+import { createTRPCRouter } from "@reactionary/trpc";
+
+/**
+ * TODO: This would likely be cleaner with:
+ * - implicit processing of parameters from the environment
+ * - as a builder-pattern
+ */
+export const client = buildClient([
+  withAlgoliaCapabilities(
+    {
+      apiKey: process.env['ALGOLIA_API_KEY'] || '',
+      appId: process.env['ALGOLIA_APP_ID'] || '',
+      indexName: process.env['ALGOLIA_INDEX'] || '',
+    },
+    { search: true, analytics: true }
+  ),
+  withCommercetoolsCapabilities(
+    {
+      apiUrl: process.env['COMMERCETOOLS_API_URL'] || '',
+      authUrl: process.env['COMMERCETOOLS_AUTH_URL'] || '',
+      clientId: process.env['COMMERCETOOLS_CLIENT_ID'] || '',
+      clientSecret: process.env['COMMERCETOOLS_CLIENT_SECRET'] || '',
+      projectKey: process.env['COMMERCETOOLS_PROJECT_KEY'] || '',
+    },
+    { product: true, identity: true, cart: true, inventory: true, price: true }
+  ),
+  withFakeCapabilities(
+    {
+      jitter: {
+        mean: 300,
+        deviation: 100,
+      },
+    },
+    { search: false, product: false }
+  ),
+  withPosthogCapabilities(
+    {
+      apiKey: process.env['POSTHOG_API_KEY'] || '',
+      host: process.env['POSTHOG_HOST'] || '',
+    },
+    { analytics: true }
+  ),
+]);
+
+export const mergedRouter = createTRPCRouter(client);
+
+export type RouterType = typeof mergedRouter;

package/examples/trpc-node/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"]
+}

package/examples/trpc-node/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}

package/examples/vue/eslint.config.mjs

@@ -0,0 +1,24 @@
+import vue from 'eslint-plugin-vue';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...vue.configs['flat/recommended'],
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: await import('@typescript-eslint/parser'),
+      },
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.vue'],
+    rules: {
+      'vue/multi-word-component-names': 'off',
+      'vue/html-self-closing': 'off',
+      'vue/max-attributes-per-line': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+    },
+  },
+];

package/examples/vue/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>examples-vue</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/examples/vue/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "examples-vue",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "examples/vue/src",
+  "// targets": "to see all targets run: nx show project examples-vue --web",
+  "targets": {}
+}

package/examples/vue/src/app/App.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import {
+  buildClient,
+  FacetValueIdentifier,
+  SearchResult,
+} from '@reactionary/core';
+import { withAlgoliaCapabilities } from '@reactionary/provider-algolia';
+import { ref, watch, reactive, computed } from 'vue';
+
+const client = buildClient([
+  withAlgoliaCapabilities(
+    {
+      apiKey: 'd67221c03e6e4b3bd47e1a35bfa46f36',
+      appId: 'BPS0QU5YHD',
+      indexName: 'products',
+    },
+    { search: true, product: true }
+  ),
+]);
+
+const result = ref<SearchResult | undefined>(undefined);
+
+const query = reactive({
+  term: '',
+  facets: new Array<FacetValueIdentifier>(),
+  page: 0,
+  pageSize: 20,
+});
+
+watch(
+  query,
+  async (q) => {
+    result.value = await client.search.get({
+      term: q.term,
+      facets: q.facets,
+      page: q.page,
+      pageSize: q.pageSize,
+    });
+  },
+  { immediate: true }
+);
+
+const hasNextPage = computed(() => {
+  return query.page < (result.value?.pages || 0) - 1;
+});
+
+const hasPreviousPage = computed(() => {
+  return query.page > 0;
+});
+
+function toggleFacet(value: FacetValueIdentifier) {
+  const old = query.facets;
+  const existingIndex = old.findIndex(
+    (x) => JSON.stringify(x) === JSON.stringify(value)
+  );
+
+  if (existingIndex > -1) {
+    query.facets.splice(existingIndex, 1);
+  } else {
+    query.facets.push(value);
+  }
+}
+
+function updateTerm(e: Event) {
+  if (e.target && e.target instanceof HTMLInputElement) {
+    query.term = e.target.value;
+  }
+}
+</script>
+
+<template>
+  <div class="host">
+    <header>
+      <input @change="(event) => updateTerm(event)" />
+    </header>
+    <main>
+      <aside>
+        <details v-for="facet in result?.facets" :key="facet.identifier.key">
+          <summary>
+            {{ facet.name }}
+          </summary>
+          <div>
+            <label 
+              v-for="value of facet.values"
+              :key="value.identifier.key"
+            >
+              <span>{{ value.name }}</span>
+              <span>{{ value.count }}</span>
+              <input
+                type="checkbox"
+                :checked="value.active"
+                @click="() => toggleFacet(value.identifier)"
+              />
+            </label>
+          </div>
+        </details>
+      </aside>
+      <section>
+        <article
+          v-for="product in result?.products"
+          :key="product.identifier.key"
+        >
+          <img :src="product.image.replace('w_200', 'w_200,h_200')" />
+          <h3>{{ product.name }}</h3>
+        </article>
+      </section>
+    </main>
+    <footer>
+      <button :disabled="!hasPreviousPage" @click="() => query.page--">
+        &lt;
+      </button>
+      <button :disabled="!hasNextPage" @click="() => query.page++">&gt;</button>
+    </footer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.host {
+  input,
+  h3,
+  button,
+  a {
+    all: unset;
+    box-sizing: border-box;
+  }
+
+  header {
+    width: 100%;
+    padding: 0.5rem;
+
+    input {
+      padding-inline: 1rem;
+      color: rgb(205, 214, 244);
+      background: rgb(88, 91, 112);
+      width: 100%;
+      height: 3rem;
+      border-radius: 0.5rem;
+    }
+  }
+
+  main {
+    padding-inline: 0.5rem;
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: 300px 1fr;
+    color: rgb(205, 214, 244);
+  }
+
+  details[open] {
+    summary:after {
+      content: '-';
+    }
+  }
+
+  details {
+    position: relative;
+    background: rgb(49, 50, 68);
+    border-radius: 0.5rem;
+  }
+
+  summary {
+    font-weight: bold;
+    text-transform: capitalize;
+    list-style: none;
+    padding: 0.5rem;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::after {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      content: '+';
+      line-height: 1;
+    }
+  }
+
+  aside {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: min-content;
+    gap: 0.25rem;
+
+    div {
+      display: grid;
+      grid-template-columns: 1fr min-content min-content;
+      grid-auto-rows: min-content;
+      padding: 0.5rem;
+      gap: 0.5rem;
+
+      a {
+        display: contents;
+      }
+
+      label {
+        grid-column: span 3;
+        display: grid;
+        grid-template-columns: subgrid;
+        align-items: center;
+        gap: 0.5rem;
+
+        input {
+          width: 1.5rem;
+          height: 1.5rem;
+          background: rgb(147, 153, 178);
+          border-radius: 0.125rem;
+
+          &:checked {
+            background: rgb(137, 220, 235);
+          }
+        }
+      }
+    }
+  }
+
+  section {
+    justify-content: center;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-auto-rows: min-content;
+    gap: 0.5rem;
+  }
+
+  article {
+    background: rgb(49, 50, 68);
+    border-radius: 0.25rem;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr min-content;
+    gap: 1rem;
+
+    h3 {
+      line-height: 1.2;
+      font-size: 1rem;
+      text-align: center;
+      margin-bottom: 1rem;
+    }
+
+    img {
+      object-fit: contain;
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+
+  footer {
+    margin: 0.5rem;
+    gap: 0.25rem;
+    display: grid;
+    grid-template-columns: min-content min-content;
+    align-items: center;
+    justify-content: center;
+  }
+
+  button {
+    display: grid;
+    justify-content: center;
+    align-items: center;
+
+    height: 3rem;
+    background: rgb(49, 50, 68);
+    color: rgb(205, 214, 244);
+    aspect-ratio: 1 / 1;
+    border-radius: 0.25rem;
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+}
+</style>

package/examples/vue/src/main.ts

@@ -0,0 +1,6 @@
+import './styles.scss';
+import { createApp } from 'vue';
+import App from './app/App.vue';
+
+const app = createApp(App);
+app.mount('#root');

package/examples/vue/src/styles.scss

@@ -0,0 +1,9 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background: rgb(17, 17, 27);
+}

package/examples/vue/src/vue-shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
+}

package/examples/vue/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vite/client"]
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.vue",
+    "src/**/*.test.vue"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.vue"]
+}

package/examples/vue/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "moduleResolution": "node",
+    "resolveJsonModule": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/examples/vue/vite.config.ts

@@ -0,0 +1,31 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/examples/vue',
+  server: {
+    port: 4200,
+    host: 'localhost',
+  },
+  preview: {
+    port: 4300,
+    host: 'localhost',
+  },
+  plugins: [vue(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  build: {
+    outDir: '../../dist/examples/vue',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+  },
+}));

package/jest.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from 'jest';
+import { getJestProjectsAsync } from '@nx/jest';
+
+export default async (): Promise<Config> => ({
+  projects: await getJestProjectsAsync(),
+});

package/jest.preset.js

@@ -0,0 +1,3 @@
+const nxPreset = require('@nx/jest/preset').default;
+
+module.exports = { ...nxPreset };

package/migrations.json

@@ -0,0 +1,11 @@
+{
+  "migrations": [
+    {
+      "version": "21.1.0-beta.2",
+      "description": "Adds **/nx-rules.mdc and **/nx.instructions.md to .gitignore if not present",
+      "implementation": "./src/migrations/update-21-1-0/add-gitignore-entry",
+      "package": "nx",
+      "name": "21-1-0-add-ignore-entries-for-nx-rule-files"
+    }
+  ]
+}