@mochabug/adaptkit 0.14.6 → 1.0.0-beta.10

package/assets/build-client.js

@@ -0,0 +1,107 @@
+import { build } from 'esbuild';
+import { sync as glob } from 'glob';
+import fs from 'node:fs';
+import path from 'node:path';
+
+if (!process.env.PLUGINS_CDN) {
+  console.error('PLUGINS_CDN is required');
+  process.exit(1);
+}
+
+// Load the manifest.json file and read organization, name and version of the plugin
+const manifest = JSON.parse(fs.readFileSync('./manifest.json', 'utf8'));
+if (!manifest.organization || !manifest.name || !manifest.version) {
+  throw new Error('Manifest file is missing organization, name or version');
+}
+const CDN_PATH = `${process.env.PLUGINS_CDN}/${manifest.organization}/${manifest.name}/${manifest.version}`;
+
+fs.rmSync('./cdn', { recursive: true });
+
+// Build the client and place all the assets onto the corresponding CDN for the plugin
+const loader = {
+  '.css': 'css',
+  '.woff': 'file',
+  '.woff2': 'file',
+  '.png': 'file',
+  '.jpg': 'file',
+  '.jpeg': 'file',
+  '.gif': 'file',
+  '.svg': 'file',
+  '.ttf': 'file',
+  '.otf': 'file',
+};
+const result = await build({
+  entryPoints: glob('./src/vertices/**/ui/*.main.tsx'),
+  outdir: 'cdn',
+  bundle: true,
+  minify: true,
+  platform: 'browser',
+  splitting: true,
+  tsconfig: 'tsconfig.json',
+  format: 'esm',
+  metafile: true,
+  publicPath: CDN_PATH,
+  loader,
+});
+
+const entrypoints = {
+  configurators: {},
+  executors: {},
+  vertices: [],
+};
+for (const [outputPath, outputMeta] of Object.entries(result.metafile.outputs)) {
+  if (!outputMeta.entryPoint) {
+    continue;
+  }
+  let vertex = path.dirname(path.dirname(path.relative('./src/vertices', outputMeta.entryPoint)));
+  if (entrypoints.vertices.findIndex((v) => v === vertex) === -1 && manifest.vertices.find((v) => v.name === vertex)) {
+    entrypoints.vertices.push(vertex);
+  }
+  if (outputMeta.entryPoint.endsWith('executor.main.tsx')) {
+    entrypoints.executors[vertex] = { js: `${CDN_PATH}/${outputPath.substring(4)}` };
+    if (outputMeta.cssBundle) {
+      entrypoints.executors[vertex].css = `${CDN_PATH}/${outputMeta.cssBundle.substring(4)}`;
+    }
+  } else if (outputMeta.entryPoint.endsWith('configurator.main.tsx')) {
+    entrypoints.configurators[vertex] = { js: `${CDN_PATH}/${outputPath.substring(4)}` };
+    if (outputMeta.cssBundle) {
+      entrypoints.configurators[vertex].css = `${CDN_PATH}/${outputMeta.cssBundle.substring(4)}`;
+    }
+  }
+}
+
+// Build the static site, make sure that we have the CDN as the public path for the assets
+await build({
+  entryPoints: glob('./src/vertices/**/*.ssg.tsx'),
+  outdir: 'dist',
+  tsconfig: 'tsconfig.json',
+  bundle: true,
+  platform: 'node',
+  format: 'cjs',
+  target: 'esnext',
+  publicPath: CDN_PATH,
+  loader,
+  outExtension: {
+    '.js': '.cjs',
+  },
+});
+
+const configIndices = {};
+for (const file of glob('./dist/**/configurator.ssg.cjs')) {
+  const { default: render } = await import(`file://${path.resolve(file)}`);
+  const vertex = entrypoints.vertices.length === 1 ? entrypoints.vertices[0] : path.dirname(path.dirname(path.relative('./dist', file)));
+  const entrypoint = entrypoints.configurators[vertex];
+  if (entrypoint) {
+    configIndices[vertex] = render.default(entrypoint.js, entrypoint.css);
+  }
+}
+fs.writeFileSync('./dist/configurator-index-html.json', JSON.stringify(configIndices));
+const execIndices = {};
+for (const file of glob('./dist/**/executor.ssg.cjs')) {
+  const { default: render } = await import(`file://${path.resolve(file)}`);
+  const vertex = entrypoints.vertices.length === 1 ? entrypoints.vertices[0] : path.dirname(path.dirname(path.relative('./dist', file)));
+
+  const entrypoint = entrypoints.executors[vertex];
+  execIndices[vertex] = render.default(entrypoint.js, entrypoint.css);
+}
+fs.writeFileSync('./dist/executor-index-html.json', JSON.stringify(execIndices));

package/assets/build.js

@@ -0,0 +1,57 @@
+import { cloudflare } from "@cloudflare/unenv-preset";
+import { build } from 'esbuild';
+import fs from 'node:fs';
+import { defineEnv } from 'unenv';
+
+if (!process.env.PLUGINS_CDN) {
+  console.error('PLUGINS_CDN is required');
+  process.exit(1);
+}
+
+// Load the manifest.json file and read organization, name and version of the plugin
+const manifest = JSON.parse(fs.readFileSync('./manifest.json', 'utf8'));
+if (!manifest.organization || !manifest.name || !manifest.version) {
+  throw new Error('Manifest file is missing organization, name or version');
+}
+const CDN_PATH = `${process.env.PLUGINS_CDN}/${manifest.organization}/${manifest.name}/${manifest.version}`;
+
+const { env } = defineEnv({ nodeCompat: true, presets: [cloudflare] });
+
+const entryPoints = ['./src/executors']
+if (fs.existsSync('./src/configurators.ts')) {
+  entryPoints.push('./src/configurators')
+}
+
+// Set up the defines, this will automatically load ssg index.html files if they exists
+const define = {
+  PLUGINS_CDN: JSON.stringify(CDN_PATH)
+};
+if (fs.existsSync('./dist/configurator-index-html.json')) {
+  const CONFIGURATOR_INDEX_HTML = fs.readFileSync('./dist/configurator-index-html.json', 'utf8');
+  define.CONFIGURATOR_INDEX_HTML = CONFIGURATOR_INDEX_HTML;
+}
+if (fs.existsSync('./dist/executor-index-html.json')) {
+  const EXECUTOR_INDEX_HTML = fs.readFileSync('./dist/executor-index-html.json', 'utf8');
+  define.EXECUTOR_INDEX_HTML = EXECUTOR_INDEX_HTML;
+}
+
+await build({
+  entryPoints,
+  outdir: 'dist',
+  bundle: true,
+  minify: true,
+  treeShaking: true,
+  sourcemap: false,
+  splitting: false,
+  format: 'esm',
+  platform: 'node',
+  target: 'esnext',
+  tsconfig: 'tsconfig.json',
+  inject: ['./inject.js'],
+  mainFields: ["module", "main"],
+  conditions: ["workerd"],
+  external: env.external,
+  alias: env.alias,
+  publicPath: CDN_PATH,
+  define,
+});

package/assets/configurator.App.tsx

@@ -0,0 +1,123 @@
+import React, { useState, type CSSProperties } from 'react';
+
+function App() {
+  const [config, setConfig] = useState<Record<string, unknown> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isHovering, setIsHovering] = useState(false);
+
+  async function handleFetchConfig() {
+    setError(null);
+    try {
+      const hash = window.location.hash.substring(1).trim();
+      const token = decodeURIComponent(hash); 
+      const response = await fetch('/api/config', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (!response.ok) {
+        throw new Error(`Request failed with status ${response.status}`);
+      }
+      const data = (await response.json()) as Record<string, unknown>;
+      setConfig(data);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError('An unknown error occurred.');
+      }
+    }
+  }
+
+  // Black & yellow theme
+  const containerStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+    margin: 0,
+    background: 'linear-gradient(to bottom, #000000, #1c1c1c)',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    color: '#ffd700',
+  };
+
+  const cardStyle: CSSProperties = {
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    padding: '2rem',
+    borderRadius: '8px',
+    textAlign: 'center',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.7)',
+    maxWidth: '600px',
+    width: '90%',
+    border: '2px solid #ffd700',
+  };
+
+  const headingStyle: CSSProperties = {
+    marginBottom: '1rem',
+    textShadow: '0 0 6px rgba(255, 215, 0, 0.5)',
+    fontSize: '2rem',
+  };
+
+  const buttonStyle: CSSProperties = {
+    cursor: 'pointer',
+    marginTop: '1rem',
+    padding: '0.75rem 1.5rem',
+    fontSize: '1rem',
+    borderRadius: '4px',
+    border: '2px solid #ffd700',
+    backgroundColor: '#000',
+    color: '#ffd700',
+    transition: 'transform 0.3s, box-shadow 0.3s',
+    outline: 'none',
+  };
+
+  const buttonHoverStyle: CSSProperties = {
+    ...buttonStyle,
+    transform: 'scale(1.05)',
+    boxShadow: '0 4px 10px rgba(255, 215, 0, 0.4)',
+  };
+
+  return (
+    <div style={containerStyle}>
+      <h1 style={headingStyle}>Spectacular Mochabug Placeholder</h1>
+      <div style={cardStyle}>
+        <p style={{ marginBottom: '1rem' }}>
+          Click the button below to fetch configuration data!
+        </p>
+        <button
+          style={isHovering ? buttonHoverStyle : buttonStyle}
+          onMouseEnter={() => setIsHovering(true)}
+          onMouseLeave={() => setIsHovering(false)}
+          onClick={handleFetchConfig}
+        >
+          Fetch Config
+        </button>
+
+        {error && (
+          <p style={{ color: '#ff4c4c', marginTop: '1rem' }}>
+            {error}
+          </p>
+        )}
+        {config && (
+          <pre
+            style={{
+              textAlign: 'left',
+              backgroundColor: 'rgba(255, 215, 0, 0.1)',
+              color: '#ffd700',
+              padding: '1rem',
+              borderRadius: '4px',
+              marginTop: '1rem',
+              overflowX: 'auto',
+              border: '1px solid #ffd700',
+            }}
+          >
+            {JSON.stringify(config, null, 2)}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/assets/configurator.main.tsx

@@ -0,0 +1,19 @@
+/**
+ * This file serves as the main entry point for the React application. It uses
+ * `hydrateRoot` from `react-dom/client` to attach the React component tree, starting
+ * with the `<App />` component, to the DOM element with the ID of "root".
+ *
+ * When server-side rendering (SSR) or static site generation (SSG) is used,
+ * `hydrateRoot` reuses existing markup on the page, preserving performance and
+ * maintaining any server-rendered content. If you are not using SSR, you may see
+ * `createRoot` used in a similar manner instead.
+ *
+ * The `<App />` component is the root component of the application, where all
+ * child components are nested. This setup ensures that the React application is
+ * rendered and managed within the specified DOM node.
+ */
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import App from './configurator.App';
+
+hydrateRoot(document.getElementById('root')!, <App />);

package/assets/configurator.ssg.tsx

@@ -0,0 +1,31 @@
+/**
+ * This file demonstrates the generation of HTML from a React application on the server
+ * (or ahead of time). It exports a single function that takes a CDN base path as an
+ * argument and returns an HTML string. Within that HTML, the `<App>` component is
+ * rendered to a string via `renderToString` and injected into the `<div id="root">`.
+ *
+ * This approach can be used for server-side rendering (SSR) or static site generation
+ * (SSG). By pre-rendering the React component, you can improve performance and
+ * provide faster initial page loads.
+ */
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import App from './configurator.App';
+
+export default function (js: string, css?: string) {
+  return `
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Title</title>
+        ${css ? `<link rel="stylesheet" href="${css}" />` : ''}
+      </head>
+      <body>
+        <div id="root">${renderToString(<App />)}</div>
+        <script type="module" src="${js}"></script>
+      </body>
+    </html>
+  `;
+}

package/assets/{configurator.ts → configurator_none.ts}

@@ -106,7 +106,7 @@ const helloWorldPage = `
     <pre id="jsonOutput"></pre>
     <script>
       document.getElementById('assimilateButton').addEventListener('click', function() {
-        const hash = window.location.hash.substr(1).trim();
+        const hash = window.location.hash.substring(1).trim();
         const token = decodeURIComponent(hash); 
         fetch('/api/config', {
           method: 'GET',

package/assets/configurator_react.tsx

@@ -0,0 +1,38 @@
+import {
+  mapErrorToHttpError,
+  RpcError
+} from '@mochabug/adapt-plugin-toolkit/api';
+import {
+  ExternalConfiguratorRouter,
+  InternalConfiguratorRouter
+} from '@mochabug/adapt-plugin-toolkit/router';
+
+export default {
+  external: new ExternalConfiguratorRouter()
+    .useRequestLogging()
+    .useBearerAuthorization(['/api'])
+    .useErrorHandling(async (e) => {
+      console.error(e);
+      if (e instanceof RpcError) {
+        return new Response(null, { status: mapErrorToHttpError(e.code) });
+      }
+      return new Response(null, {
+        status: 500,
+        statusText: 'Internal server error'
+      });
+    })
+    .add('GET', '/api/config', async (_req, api) => {
+      const res = await api.getVertexConfig();
+      return new Response(JSON.stringify(res.metadata), {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+    })
+    .add('GET', '{*any}', async () => {
+      return new Response(CONFIGURATOR_INDEX_HTML['___VERTEX_NAME___'], {
+        headers: { 'Content-Type': 'text/html' }
+      });
+    }),
+  internal: new InternalConfiguratorRouter()
+};

package/assets/executor.App.tsx

@@ -0,0 +1,103 @@
+import React, { useState, type CSSProperties } from 'react';
+
+function App() {
+  const [error, setError] = useState<string | null>(null);
+  const [isHovering, setIsHovering] = useState(false);
+
+  async function handleFetchConfig() {
+    setError(null);
+    try {
+      const hash = window.location.hash.substring(1).trim();
+      const token = decodeURIComponent(hash);
+      const response = await fetch('/api/done', {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${token}`
+        }
+      });
+      if (!response.ok) {
+        throw new Error(`Request failed with status ${response.status}`);
+      }
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError('An unknown error occurred.');
+      }
+    }
+  }
+
+  // Black & yellow theme
+  const containerStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+    margin: 0,
+    background: 'linear-gradient(to bottom, #000000, #1c1c1c)',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    color: '#ffd700'
+  };
+
+  const cardStyle: CSSProperties = {
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    padding: '2rem',
+    borderRadius: '8px',
+    textAlign: 'center',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.7)',
+    maxWidth: '600px',
+    width: '90%',
+    border: '2px solid #ffd700'
+  };
+
+  const headingStyle: CSSProperties = {
+    marginBottom: '1rem',
+    textShadow: '0 0 6px rgba(255, 215, 0, 0.5)',
+    fontSize: '2rem'
+  };
+
+  const buttonStyle: CSSProperties = {
+    cursor: 'pointer',
+    marginTop: '1rem',
+    padding: '0.75rem 1.5rem',
+    fontSize: '1rem',
+    borderRadius: '4px',
+    border: '2px solid #ffd700',
+    backgroundColor: '#000',
+    color: '#ffd700',
+    transition: 'transform 0.3s, box-shadow 0.3s',
+    outline: 'none'
+  };
+
+  const buttonHoverStyle: CSSProperties = {
+    ...buttonStyle,
+    transform: 'scale(1.05)',
+    boxShadow: '0 4px 10px rgba(255, 215, 0, 0.4)'
+  };
+
+  return (
+    <div style={containerStyle}>
+      <h1 style={headingStyle}>Spectacular Mochabug Placeholder</h1>
+      <div style={cardStyle}>
+        <p style={{ marginBottom: '1rem' }}>
+          Click below to finalize execution
+        </p>
+        <button
+          style={isHovering ? buttonHoverStyle : buttonStyle}
+          onMouseEnter={() => setIsHovering(true)}
+          onMouseLeave={() => setIsHovering(false)}
+          onClick={handleFetchConfig}
+        >
+          Done
+        </button>
+
+        {error && (
+          <p style={{ color: '#ff4c4c', marginTop: '1rem' }}>{error}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/assets/executor.main.tsx

@@ -0,0 +1,19 @@
+/**
+ * This file serves as the main entry point for the React application. It uses
+ * `hydrateRoot` from `react-dom/client` to attach the React component tree, starting
+ * with the `<App />` component, to the DOM element with the ID of "root".
+ *
+ * When server-side rendering (SSR) or static site generation (SSG) is used,
+ * `hydrateRoot` reuses existing markup on the page, preserving performance and
+ * maintaining any server-rendered content. If you are not using SSR, you may see
+ * `createRoot` used in a similar manner instead.
+ *
+ * The `<App />` component is the root component of the application, where all
+ * child components are nested. This setup ensures that the React application is
+ * rendered and managed within the specified DOM node.
+ */
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import App from './executor.App';
+
+hydrateRoot(document.getElementById('root')!, <App />);

package/assets/executor.ssg.tsx

@@ -0,0 +1,31 @@
+/**
+ * This file demonstrates the generation of HTML from a React application on the server
+ * (or ahead of time). It exports a single function that takes a CDN base path as an
+ * argument and returns an HTML string. Within that HTML, the `<App>` component is
+ * rendered to a string via `renderToString` and injected into the `<div id="root">`.
+ *
+ * This approach can be used for server-side rendering (SSR) or static site generation
+ * (SSG). By pre-rendering the React component, you can improve performance and
+ * provide faster initial page loads.
+ */
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import App from './executor.App';
+
+export default function (js: string, css?: string) {
+  return `
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Title</title>
+        ${css ? `<link rel="stylesheet" href="${css}" />` : ''}
+      </head>
+      <body>
+        <div id="root">${renderToString(<App />)}</div>
+        <script type="module" src="${js}"></script>
+      </body>
+    </html>
+  `;
+}

package/assets/{executor_browser.ts → executor_browser_none.ts}

@@ -97,7 +97,7 @@ const helloWorld = `
         <button id="doneButton">Done</button>
         <script>
           document.getElementById('doneButton').addEventListener('click', function() {
-            const hash = window.location.hash.substr(1).trim();
+            const hash = window.location.hash.substring(1).trim();
             const token = decodeURIComponent(hash); 
             fetch('/api/done', {
               method: 'POST',

package/assets/executor_browser_react.tsx

@@ -0,0 +1,51 @@
+import {
+  mapErrorToHttpError,
+  RpcError
+} from '@mochabug/adapt-plugin-toolkit/api';
+import {
+  ExternalExecutorRouter,
+  InternalExecutorRouter
+} from '@mochabug/adapt-plugin-toolkit/router';
+
+export default {
+  external: new ExternalExecutorRouter()
+    .useRequestLogging()
+    .useBearerAuthorization(['/api'])
+    .useErrorHandling(async (e) => {
+      console.error(e);
+      if (e instanceof RpcError) {
+        return new Response(null, { status: mapErrorToHttpError(e.code) });
+      }
+      return new Response(null, {
+        status: 500,
+        statusText: 'Internal server error'
+      });
+    })
+    .add('POST', '/api/done', async (req, api, _route, ctx) => {
+      const sapi = api.getSessionApi(req.headers.get('Authorization')!);
+      ctx.waitUntil(sapi.complete('output', {}));
+      return new Response();
+    })
+    .add('GET', '{*any}', async () => {
+      return new Response(EXECUTOR_INDEX_HTML['___VERTEX_NAME___'], {
+        headers: { 'Content-Type': 'text/html' }
+      });
+    }),
+  internal: new InternalExecutorRouter()
+    .onStart(async (start, _api) => {
+      console.log('Start has been called');
+      console.log(start);
+    })
+    .onStop(async (stop, _api) => {
+      console.log('Stop has been called');
+      console.log(stop);
+    })
+    .onStream(async (res, _api, name) => {
+      console.log(`Stream ${name} has been called`);
+      console.log(res);
+    })
+    .onProcedure(async (res, _api, name) => {
+      console.log(`Procedure ${name} has been called`);
+      console.log(res);
+    })
+};

package/assets/gitignore

@@ -1,3 +1,6 @@
+# Cdn files
+cdn/**
+
 # Logs
 logs
 *.log

package/assets/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  const PLUGINS_CDN: string;
+  const CONFIGURATOR_INDEX_HTML: Record<string, string>;
+  const EXECUTOR_INDEX_HTML: Record<string, string>;
+}
+
+export {};

package/assets/inject.js

@@ -0,0 +1,15 @@
+import 'unenv/runtime/polyfill/node-global'
+import 'unenv/runtime/polyfill/process'
+import 'unenv/runtime/polyfill/performance'
+import processModule from '@cloudflare/unenv-preset/runtime/node/process/index'
+if (typeof globalThis.process === 'undefined') {
+  globalThis.process = processModule
+}
+import consoleModule from '@cloudflare/unenv-preset/runtime/node/console/index'
+if (typeof globalThis.console === 'undefined') {
+  globalThis.console = consoleModule
+}
+import perfModule from 'unenv/runtime/polyfill/performance'
+if (typeof globalThis.performance === 'undefined') {
+  globalThis.performance = perfModule
+}

package/assets/tsconf.json

@@ -5,16 +5,19 @@
         "target": "esnext",
         "module": "esnext",
         "lib": [
-            "esnext"
+            "esnext",
+            "dom"
         ],
         "moduleResolution": "Bundler",
         "types": [
+            "node",
             "@mochabug/adapt-plugin-typings"
         ],
         "resolveJsonModule": true,
         "allowJs": true,
         "checkJs": false,
         "noEmit": true,
+        "esModuleInterop": true,
         "isolatedModules": true,
         "allowSyntheticDefaultImports": true,
         "forceConsistentCasingInFileNames": true,
@@ -30,7 +33,10 @@
     },
     "exclude": [
         "dist/**",
+        "cdn/**",
         "assets/**",
-        "rollup.config.js"
-    ]
+        "build.js",
+        "inject.js",
+        "build-client.js"
+    ],
 }