create-moost 0.4.22 → 0.5.0

package/templates/wf/src/workflow/wf2html.interceptor.ts

@@ -0,0 +1,233 @@
+/**
+ * @file Workflow to HTML Page Interceptor for Moost Workflow Template
+ *
+ * This module defines the `Wf2HtmlPageInterceptor` class, which serves as an interceptor
+ * for MoostHttp handler. The interceptor is responsible for
+ * converting workflow outputs into HTML pages with forms, enabling workflows to execute,
+ * pause for user inputs, and maintain context in an encrypted state property.
+ *
+ * **Important:** This example is highly simplified and intended solely for demonstration
+ * purposes. A production implementation would require more robust error handling,
+ * secure key management, and comprehensive validation mechanisms.
+ *
+ * The interceptor performs the following key functions:
+ * - Decrypts the workflow state received from the frontend.
+ * - Processes the workflow response to render appropriate HTML pages for user interaction.
+ * - Encrypts the updated workflow state before sending it back to the frontend.
+ *
+ * For more information on Moost Workflows, visit https://moost.org/wf/
+ */
+
+import { Body } from "@moostjs/event-http";
+import type { TFlowOutput } from "@moostjs/event-wf";
+import type { TInterceptorClass, TInterceptorFn } from "moost";
+import { Injectable, Intercept } from "moost";
+
+import { decryptState, encryptState } from "./wf.encrypt";
+import type {
+  TWfExampleContext,
+  TWfExampleInput,
+  TWfExampleInputSchema,
+  TWfState,
+} from "./wf.types";
+
+/**
+ * `Wf2HtmlPageInterceptor` intercepts http handlers to transform workflow outputs
+ * into HTML pages, facilitating user interactions through forms.
+ *
+ * This interceptor handles the encryption and decryption of the workflow state to ensure
+ * secure transmission between the backend and frontend.
+ */
+@Injectable("FOR_EVENT")
+class Wf2HtmlPageInterceptor implements TInterceptorClass {
+  /**
+   * The input payload containing user inputs and the workflow state.
+   *
+   * @type {TWfExampleInput & { wfState: string | TWfState | undefined }}
+   */
+  @Body()
+  input?: TWfExampleInput & { wfState: string | TWfState | undefined };
+
+  /**
+   * The interceptor handler function that processes workflow events.
+   *
+   * @type {TInterceptorFn}
+   */
+  handler: TInterceptorFn = (before, after) => {
+    /**
+     * Pre-processing step executed before the main workflow logic.
+     *
+     * - Decrypts the workflow state if it is a string.
+     * - Clears the workflow state if it is not a string.
+     *
+     * @function before
+     */
+    before(() => {
+      if (typeof this.input?.wfState === "string") {
+        this.input.wfState = decryptState(this.input.wfState);
+      } else if (this.input) {
+        this.input.wfState = undefined;
+      }
+    });
+
+    /**
+     * Post-processing step executed after the main workflow logic.
+     *
+     * - Renders an input form if additional inputs are required.
+     * - Renders the final output page if the workflow has finished.
+     *
+     * @function after
+     * @param {TFlowOutput<TWfExampleContext, TWfExampleInput, TWfExampleInputSchema>} response - The workflow response.
+     * @param {Function} reply - The function to send the HTTP response.
+     */
+    after((response, reply) => {
+      const wfOutput = response as TFlowOutput<
+        TWfExampleContext,
+        TWfExampleInput,
+        TWfExampleInputSchema
+      >;
+
+      if (wfOutput.inputRequired) {
+        reply(
+          renderInputPage(wfOutput.inputRequired, encryptState(wfOutput.state))
+        );
+      }
+      if (wfOutput.finished) {
+        reply(renderOutputPage(wfOutput.state.context));
+      }
+    });
+  };
+}
+
+/**
+ * Factory function to create an interceptor decorator for the `Wf2HtmlPageInterceptor`.
+ *
+ * @returns {Function} The interceptor decorator.
+ */
+export const Wf2HtmlPage = () => Intercept(Wf2HtmlPageInterceptor);
+
+/**
+ * SVG path data for the Moost logo used in the HTML pages.
+ *
+ * @type {string}
+ */
+const moostLogo =
+  '<path fill-rule="evenodd" clip-rule="evenodd" d="M126 71H127.5C137.717 71 146 79.2827 146 89.5C146 99.7173 137.717 108 127.5 108H126C120.942 117.021 113.089 122 103.012 122H127.5C145.449 122 160 107.449 160 89.5C160 71.5507 145.449 57 127.5 57H103.012C113.089 57 120.942 61.9792 126 71ZM103.012 71L89 57H87.5C69.5507 57 55 71.5507 55 89.5C55 107.449 69.5507 122 87.5 122H89L103.012 108H87.5C77.2827 108 69 99.7173 69 89.5C69 79.2827 77.2827 71 87.5 71H103.012Z" fill="#FF269B"/>';
+
+/**
+ * Renders the HTML page for user inputs.
+ *
+ * This function generates an HTML form based on the required inputs from the workflow.
+ * It includes the necessary fields, messages, error messages, and the encrypted workflow state.
+ *
+ * **Note:** This implementation is simplified for demonstration purposes.
+ *
+ * @param {TWfExampleInputSchema} inputRequired - The schema defining required inputs.
+ * @param {string} [state=''] - The encrypted workflow state to be included as a hidden field.
+ * @returns {string} The rendered HTML string for the input page.
+ */
+function renderInputPage(
+  inputRequired: TWfExampleInputSchema,
+  state = ""
+): string {
+  return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <title>Moost Workflows Example</title>
+        <link rel="preload stylesheet" href="/static/wf.css" as="style">
+    </head>
+    <body>
+        <section>
+        <h1>
+        <svg viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+        ${moostLogo}
+        <rect x="27" y="64" width="91" height="51" rx="25.5" stroke="#FF269B" stroke-width="14"/>
+        </svg>
+        Workflows Example
+        </h1>
+        <form method="POST" action="/wf">
+        ${renderMessage(inputRequired.message)}
+        <input type="hidden" name="wfState" value="${state}" />
+        ${inputRequired.inputs.map((i) => renderInput(i)).join("\n")}
+        ${renderError(inputRequired.errorMessage)}
+        <button type="submit">Submit</button>
+        <a href="https://moost.org/wf/" target="_blank">Moost WF Documentation</a>
+        </form>
+        </section>
+    </body>
+    </html>
+`;
+}
+
+/**
+ * Renders an optional message within the HTML page.
+ *
+ * @param {string} [message] - The message to be displayed.
+ * @returns {string} The rendered HTML string for the message.
+ */
+function renderMessage(message?: string): string {
+  return message ? `<p>${message}</p>` : "";
+}
+
+/**
+ * Renders an optional error message within the HTML page.
+ *
+ * @param {string} [message] - The error message to be displayed.
+ * @returns {string} The rendered HTML string for the error message.
+ */
+function renderError(message?: string): string {
+  return message ? `<p class="error">${message}</p>` : "";
+}
+
+/**
+ * Renders the final output HTML page after workflow completion.
+ *
+ * This function generates an HTML page displaying the user's greeting, email, and age.
+ *
+ * **Note:** This implementation is simplified for demonstration purposes.
+ *
+ * @param {TWfExampleContext} ctx - The workflow context containing user data.
+ * @returns {string} The rendered HTML string for the output page.
+ */
+function renderOutputPage(ctx: TWfExampleContext): string {
+  return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <title>Moost Workflows Example</title>
+        <link rel="preload stylesheet" href="/static/wf.css" as="style">
+    </head>
+    <body>
+        <section>
+        <h1>
+        <svg viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+        ${moostLogo}
+        <rect x="27" y="64" width="91" height="51" rx="25.5" stroke="#FF269B" stroke-width="14"/>
+        </svg>
+        Workflows Example
+        </h1>
+        <h2>${ctx.greeting}</h2>
+        <p>Your email is ${ctx.email}</p>
+        <p>Your age is ${ctx.age}</p>
+
+        <a href="https://moost.org/wf/" target="_blank">Moost WF Documentation</a>
+        </section>
+    </body>
+    </html>
+        `;
+}
+
+/**
+ * Renders an individual input field within the HTML form.
+ *
+ * This function generates the HTML string for a single input field based on its schema.
+ *
+ * @param {TWfExampleInputSchema['inputs'][number]} input - The input schema item.
+ * @returns {string} The rendered HTML string for the input field.
+ */
+function renderInput(input: TWfExampleInputSchema["inputs"][number]): string {
+  return `<label>${input.label}<input type="${input.type}" name="${
+    input.name
+  }" value="${input.value || ""}" /></label>`;
+}

package/templates/common/.eslintrc.json

@@ -1,52 +0,0 @@
-{
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "project": ["./tsconfig.json"],
-        "tsconfigRootDir": "./",
-        "sourceType": "module"
-    },
-    "ignorePatterns": [
-        //=IF (bundler === 'rollup')
-        "rollup.config.js",
-        //=END IF
-        //=IF (type === 'cli')
-        "bin.js",
-        //=END IF
-        ".eslintrc.js",
-        "dist"
-    ],
-    "plugins": ["@typescript-eslint/eslint-plugin"],
-    "extends": [
-        "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
-//=IF (prettier)
-        "prettier"
-//=END IF
-    ],
-    "root": true,
-    "env": {
-        "node": true,
-        "jest": true
-    },
-    "rules": {
-        "indent": ["error", 4, { "SwitchCase": 1 }],
-        "comma-dangle": ["error", "always-multiline"],
-        "no-multiple-empty-lines": ["error", { "max": 1 }],
-        "lines-between-class-members": ["error", "always"],
-        "padded-blocks": ["error", "never"],
-        "eol-last": ["error", "always"],
-        "quotes": ["error", "single"],
-        "semi": ["error", "never"],
-        "@typescript-eslint/explicit-function-return-type": "off",
-        "@typescript-eslint/no-empty-interface": "off",
-        "@typescript-eslint/no-empty-function": "off",
-        "@typescript-eslint/no-explicit-any": "warn",
-        "@typescript-eslint/no-inferrable-types": "off",
-        "@typescript-eslint/explicit-module-boundary-types": "off",
-        "@typescript-eslint/no-implied-eval": "off",
-
-        "@typescript-eslint/no-this-alias": "warn",
-        "no-debugger": "error"
-    }
-}

package/templates/common/.prettierignore

@@ -1,4 +0,0 @@
-# Ignore artifacts:
-build
-coverage
-dist

package/templates/common/.prettierrc

@@ -1,8 +0,0 @@
-{
-    "trailingComma": "es5",
-    "tabWidth": 4,
-    "semi": false,
-    "singleQuote": true,
-    "quoteProps": "as-needed",
-    "bracketSpacing": true
-}

package/templates/common/build.js

@@ -1,28 +0,0 @@
-const esbuild = require('esbuild')
-const esbuildPluginTsc = require('esbuild-plugin-tsc')
-//=IF (type === 'http')
-const { spawn } = require('child_process')
-//=END IF
-
-const watch = process.argv[2] === 'watch'
-
-esbuild[watch ? 'context' : 'build']({
-    entryPoints: [
-        './src/main.ts',
-    ],
-    logLevel: 'info',
-    bundle: true,
-    outdir: './dist',
-    platform: 'node',
-    packages: 'external',
-    sourcemap: watch,
-    plugins: [esbuildPluginTsc()],
-}).then(async ctx => {
-    if (watch) {
-        //=IF (type === 'http')
-        const nodemon = spawn('nodemon', { stdio: 'inherit' })
-        process.on('SIGTERM', async () => { nodemon.kill(); await ctx.dispose() })
-        //=END IF
-        await ctx.watch()
-    }
-})

package/templates/common/package.json

@@ -1,78 +0,0 @@
-{
-    "name": "{{ packageName }}",
-    "version": "1.0.0",
-    "description": "",
-    "main": "dist/main.js",
-    //=IF (type === 'cli')
-    "bin": {
-        "{{ packageName }}": "./bin.js"
-    },
-    "files": [
-        "dist",
-        "bin.js"
-    ],
-    //=END IF
-    "scripts": {
-        //=IF (bundler === 'rollup')
-            //=IF (type === 'http')
-        "dev": "NODE_OPTIONS=--enable-source-maps rollup -c=./rollup.config.js --watch",
-            //=END IF
-            //=IF (type === 'cli')
-        "dev": "npm run build && ./bin.js",
-            //=END IF
-        "build": "rollup -c=./rollup.config.js",
-        //=END IF
-        //=IF (bundler === 'esbuild')
-            //=IF (type === 'http')
-        "dev": "npm run build:watch",
-        "nodemon": "NODE_OPTIONS=--enable-source-maps nodemon ./dist/main",
-            //=END IF
-            //=IF (type === 'cli')
-        "dev": "npm run build && ./bin.js",
-            //=END IF
-        "build": "node ./build",
-        "build:watch": "node ./build watch",
-        //=END IF
-        //=IF (prettier)
-        "prettify": "prettier . --write && lint --fix",
-        //=END IF
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "author": "",
-    "license": "ISC",
-    "dependencies": {
-//=IF (type === 'http')
-        "@moostjs/event-http": "^{{ version }}",
-//=END IF
-//=IF (type === 'cli')
-        "@moostjs/event-cli": "^{{ version }}",
-//=END IF
-        "moost": "^{{ version }}"
-    },
-    "devDependencies": {
-//=IF (bundler === 'rollup')
-        //=IF (type === 'http')
-        "@rollup/plugin-run": "^3.0.1",
-        //=END IF
-        "@rollup/plugin-typescript": "^11.1.1",
-        "rollup": "^3.23.0",
-        "tslib": "^2.5.2",
-//=END IF
-//=IF (bundler === 'esbuild')
-        "esbuild": "^0.18.17",
-        "esbuild-plugin-tsc": "^0.4.0",
-        //=IF (type === 'http')
-        "nodemon": "^2.0.22",
-        //=END IF
-//=END IF
-//=IF (eslint)
-        "@typescript-eslint/eslint-plugin": "^5.59.7",
-        "eslint": "^8.41.0",
-        "eslint-config-prettier": "^8.8.0",
-//=END IF
-//=IF (prettier)
-        "prettier": "^2.8.8",
-//=END IF
-        "typescript": "^5.0.4"
-    }
-}

package/templates/common/rollup.config.js

@@ -1,23 +0,0 @@
-//=IF (type === 'http')
-const run = require('@rollup/plugin-run')
-//=END IF
-const ts = require('@rollup/plugin-typescript')
-//=IF (type === 'http')
-const dev = process.env.NODE_OPTIONS === '--enable-source-maps'
-//=END IF
-module.exports = {
-    input: './src/main.ts',
-    output: {
-        file: 'dist/main.js',
-        format: 'cjs',
-        //=IF (type === 'http')
-        sourcemap: dev,
-        //=END IF
-    },
-    plugins: [
-        ts(),
-        //=IF (type === 'http')
-        dev && run() || null,
-        //=END IF
-    ],
-}