@mochabug/adaptkit 1.0.0-beta.2 → 1.0.0-beta.4

package/assets/build-client.js

@@ -1,5 +1,7 @@
 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');
@@ -13,34 +15,93 @@ if (!manifest.organization || !manifest.name || !manifest.version) {
 }
 const CDN_PATH = `${process.env.PLUGINS_CDN}/${manifest.organization}/${manifest.name}/${manifest.version}`;
 
-if (fs.existsSync('cdn')) {
-  fs.rmSync('cdn', { recursive: true, force: true })
-}
+fs.rmSync('./cdn', { recursive: true });
 
-build({
-  entryPoints: [___ENTRYPOINTS___],
+// 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,
-  sourcemap: true,
   platform: 'browser',
   splitting: true,
+  tsconfig: 'tsconfig.json',
   format: 'esm',
-  publicPath: CDN_PATH,
   metafile: true,
-  loader: {
-    '.css': 'css',
-    '.woff': 'file',
-    '.woff2': 'file',
-    '.png': 'file',
-    '.jpg': 'file',
-    '.jpeg': 'file',
-    '.gif': 'file',
-    '.svg': 'file',
-    '.ttf': 'file',
-    '.otf': 'file',
+  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',
   },
-}).catch((err) => {
-  console.error(err);
-  process.exit(1);
-});
+});
+
+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

@@ -17,20 +17,31 @@ const CDN_PATH = `${process.env.PLUGINS_CDN}/${manifest.organization}/${manifest
 
 const { env } = defineEnv({ nodeCompat: true, presets: [cloudflare] });
 
-if (fs.existsSync('dist')) {
-  fs.rmSync('dist', { recursive: true, force: true })
-}
 const entryPoints = ['./src/executors']
 if (fs.existsSync('./src/configurators.ts')) {
   entryPoints.push('./src/configurators')
 }
 
-build({
+// 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',
@@ -41,10 +52,6 @@ build({
   conditions: ["workerd"],
   external: env.external,
   alias: env.alias,
-  define: {
-    PLUGINS_CDN: JSON.stringify(CDN_PATH),
-  }
-}).catch((error) => {
-  console.error(error)
-  process.exit(1)
+  publicPath: CDN_PATH,
+  define,
 });

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_react.tsx

@@ -6,9 +6,6 @@ import {
   ExternalConfiguratorRouter,
   InternalConfiguratorRouter
 } from '@mochabug/adapt-plugin-toolkit/router';
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import App from './../../frontend/___APP_IMPORT___';
 
 export default {
   external: new ExternalConfiguratorRouter()
@@ -33,25 +30,9 @@ export default {
       });
     })
     .add('GET', '{*any}', async () => {
-      return new Response(readIndexHtml(), {
-        headers: {
-          'Content-Type': 'text/html; charset=utf-8'
-        }
+      return new Response(CONFIGURATOR_INDEX_HTML['___VERTEX_NAME___'], {
+        headers: { 'Content-Type': 'text/html' }
       });
     }),
   internal: new InternalConfiguratorRouter()
 };
-function readIndexHtml() {
-  return `
-  <!DOCTYPE html>
-  <html>
-    <head>
-      <title>My SSR App</title>
-    </head>
-    <body>
-      <div id="root">${renderToString(<App />)}</div>
-      <script type="module" src="${PLUGINS_CDN}/___CLIENT__NAME___.js"></script>
-    </body>
-  </html>
-`;
-}

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_react.tsx

@@ -6,9 +6,6 @@ import {
   ExternalExecutorRouter,
   InternalExecutorRouter
 } from '@mochabug/adapt-plugin-toolkit/router';
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import App from './../../frontend/___APP_IMPORT___';
 
 export default {
   external: new ExternalExecutorRouter()
@@ -30,10 +27,8 @@ export default {
       return new Response();
     })
     .add('GET', '{*any}', async () => {
-      return new Response(readIndexHtml(), {
-        headers: {
-          'Content-Type': 'text/html; charset=utf-8'
-        }
+      return new Response(EXECUTOR_INDEX_HTML['___VERTEX_NAME___'], {
+        headers: { 'Content-Type': 'text/html' }
       });
     }),
   internal: new InternalExecutorRouter()
@@ -54,17 +49,3 @@ export default {
       console.log(res);
     })
 };
-function readIndexHtml() {
-  return `
-  <!DOCTYPE html>
-  <html>
-    <head>
-      <title>My SSR App</title>
-    </head>
-    <body>
-      <div id="root">${renderToString(<App />)}</div>
-      <script type="module" src="${PLUGINS_CDN}/___CLIENT__NAME___.js"></script>
-    </body>
-  </html>
-`;
-}

package/assets/global.d.ts

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