@nerest/nerest 0.0.6 → 0.0.8

package/README.md

@@ -86,7 +86,17 @@ Here `react` and `react-dom` imports will be replaced with accessing the respect
 
 ### Runtime Hooks
 
-TODO
+If the module `nerest-runtime.ts` exists in the root of the micro frontend and exports a default function, this function will be executed when the server starts, and the fastify app instance will be passed to it as its only argument. Example of `nerest-runtime.ts`:
+
+```typescript
+import type { FastifyInstance } from 'fastify';
+
+export default function (app: FastifyInstance) {
+  console.log('Hello from nerest-runtime.ts');
+}
+```
+
+This runtime hook can be used to adjust fastify settings, register additional plugins or add custom routes.
 
 ## Development
 

package/bin/build.ts

@@ -1,4 +1,4 @@
-import { buildMicroFrontend } from '../build';
+import { buildMicroFrontend } from '../build/index.js';
 
 // Produce the production build of the Nerest micro frontend
 export async function build() {

package/bin/index.ts

@@ -2,8 +2,8 @@
 // All executions of `nerest <command>` get routed through here
 import 'dotenv/config';
 
-import { build } from './build';
-import { watch } from './watch';
+import { build } from './build.js';
+import { watch } from './watch.js';
 
 // TODO: add CLI help and manual, maybe use a CLI framework like oclif
 async function cliEntry(args: string[]) {

package/bin/watch.ts

@@ -1,4 +1,4 @@
-import { runDevelopmentServer } from '../server/development';
+import { runDevelopmentServer } from '../server/development.js';
 
 // Start dev server in watch mode, that restarts on file change
 // and rebuilds the client static files

package/build/index.ts

@@ -2,13 +2,13 @@ import path from 'path';
 import fs from 'fs/promises';
 import { existsSync } from 'fs';
 
-import vite from 'vite';
+import { build } from 'vite';
 import type { InlineConfig } from 'vite';
 import { viteExternalsPlugin } from 'vite-plugin-externals';
 
-import { loadApps } from '../server/parts/apps';
-import type { BuildConfiguration } from '../schemas/nerest-build.schema';
-import { excludes } from './excludes';
+import { loadApps } from '../server/parts/apps.js';
+import type { BuildConfiguration } from '../schemas/nerest-build.schema.js';
+import { excludes } from './excludes/index.js';
 
 export async function buildMicroFrontend() {
   const root = process.cwd();
@@ -57,7 +57,7 @@ export async function buildMicroFrontend() {
   };
 
   console.log('Producing production client build...');
-  await vite.build(clientConfig);
+  await build(clientConfig);
 
   console.log('Producing Nerest manifest file...');
   await buildAppsManifest(root, staticPath);
@@ -83,7 +83,7 @@ export async function buildMicroFrontend() {
   };
 
   console.log('Producing production server build...');
-  await vite.build(serverConfig);
+  await build(serverConfig);
 }
 
 async function buildAppsManifest(root: string, staticPath: string) {

package/client/index.ts

@@ -1,6 +1,7 @@
 // Shared client entrypoint that bootstraps all of the apps supplied
 // by current microfrontend
 import React from 'react';
+import type { ComponentType } from 'react';
 import ReactDOM from 'react-dom/client';
 
 // Since this is a shared entrypoint, it dynamically imports all of the
@@ -28,7 +29,10 @@ async function runHydration() {
     // TODO: more robust error handling and error logging
     const props = JSON.parse(propsContainer?.textContent ?? '{}');
 
-    const reactElement = React.createElement(await appModuleLoader(), props);
+    const reactElement = React.createElement(
+      (await appModuleLoader()) as ComponentType,
+      props
+    );
     ReactDOM.hydrateRoot(container, reactElement);
   }
 }

package/dist/bin/build.js

@@ -1,11 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.build = void 0;
-const build_1 = require("../build");
+import { buildMicroFrontend } from '../build/index.js';
 // Produce the production build of the Nerest micro frontend
-async function build() {
+export async function build() {
     console.log('Nerest is preparing production build...');
-    await (0, build_1.buildMicroFrontend)();
+    await buildMicroFrontend();
     console.log('Nerest build is finished');
 }
-exports.build = build;

package/dist/bin/index.js

@@ -1,17 +1,15 @@
 #!/usr/bin/env node
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 // All executions of `nerest <command>` get routed through here
-require("dotenv/config");
-const build_1 = require("./build");
-const watch_1 = require("./watch");
+import 'dotenv/config';
+import { build } from './build.js';
+import { watch } from './watch.js';
 // TODO: add CLI help and manual, maybe use a CLI framework like oclif
 async function cliEntry(args) {
     if (args[0] === 'build') {
-        await (0, build_1.build)();
+        await build();
     }
     else if (args[0] === 'watch') {
-        await (0, watch_1.watch)();
+        await watch();
     }
 }
 // [<path to node>, <path to nerest binary>, ...args]

package/dist/bin/watch.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.watch = void 0;
-const development_1 = require("../server/development");
+import { runDevelopmentServer } from '../server/development.js';
 // Start dev server in watch mode, that restarts on file change
 // and rebuilds the client static files
-async function watch() {
+export async function watch() {
     // TODO: will be replaced with nerest logger
     console.log('Starting Nerest watch...');
-    await (0, development_1.runDevelopmentServer)();
+    await runDevelopmentServer();
 }
-exports.watch = watch;

package/dist/build/excludes/index.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.excludes = void 0;
 /**
  * Maps list of imports into a list of rollup aliases that resolve
  * into an empty module.
  */
-function excludes(list) {
+export function excludes(list) {
     return list?.map((exclude) => ({
         // Excluding '@some/package' should exclude both '@some/package' and
         // '@some/package/...` imports
@@ -13,7 +10,6 @@ function excludes(list) {
         replacement: '@nerest/nerest/build/excludes/empty-module',
     }));
 }
-exports.excludes = excludes;
 /**
  * Escapes string to use inside of a regular expression.
  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping

package/dist/build/index.js

@@ -1,17 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildMicroFrontend = void 0;
-const path_1 = __importDefault(require("path"));
-const promises_1 = __importDefault(require("fs/promises"));
-const fs_1 = require("fs");
-const vite_1 = __importDefault(require("vite"));
-const vite_plugin_externals_1 = require("vite-plugin-externals");
-const apps_1 = require("../server/parts/apps");
-const excludes_1 = require("./excludes");
-async function buildMicroFrontend() {
+import path from 'path';
+import fs from 'fs/promises';
+import { existsSync } from 'fs';
+import { build } from 'vite';
+import { viteExternalsPlugin } from 'vite-plugin-externals';
+import { loadApps } from '../server/parts/apps.js';
+import { excludes } from './excludes/index.js';
+export async function buildMicroFrontend() {
     const root = process.cwd();
     const staticPath = process.env.NEREST_STATIC_PATH;
     // TODO: The path where the client files are deployed is built-in during
@@ -44,15 +38,15 @@ async function buildMicroFrontend() {
         },
         resolve: {
             // excludes - map buildConfig.excludes packages to an empty module
-            alias: (0, excludes_1.excludes)(buildConfig?.excludes),
+            alias: excludes(buildConfig?.excludes),
         },
         plugins: [
             // externals - map buildConfig.externals packages to a global variable on window
-            (0, vite_plugin_externals_1.viteExternalsPlugin)(buildConfig?.externals, { useWindow: false }),
+            viteExternalsPlugin(buildConfig?.externals, { useWindow: false }),
         ],
     };
     console.log('Producing production client build...');
-    await vite_1.default.build(clientConfig);
+    await build(clientConfig);
     console.log('Producing Nerest manifest file...');
     await buildAppsManifest(root, staticPath);
     // Build server using the client manifest
@@ -75,18 +69,17 @@ async function buildMicroFrontend() {
         },
     };
     console.log('Producing production server build...');
-    await vite_1.default.build(serverConfig);
+    await build(serverConfig);
 }
-exports.buildMicroFrontend = buildMicroFrontend;
 async function buildAppsManifest(root, staticPath) {
-    const apps = await (0, apps_1.loadApps)(root, staticPath);
-    await promises_1.default.writeFile(path_1.default.join(root, 'build/nerest-manifest.json'), JSON.stringify(apps), { encoding: 'utf-8' });
+    const apps = await loadApps(root, staticPath);
+    await fs.writeFile(path.join(root, 'build/nerest-manifest.json'), JSON.stringify(apps), { encoding: 'utf-8' });
 }
 // TODO: error handling
 async function readBuildConfig(root) {
-    const configPath = path_1.default.join(root, 'nerest-build.json');
-    if ((0, fs_1.existsSync)(configPath)) {
-        const content = await promises_1.default.readFile(configPath, { encoding: 'utf-8' });
+    const configPath = path.join(root, 'nerest-build.json');
+    if (existsSync(configPath)) {
+        const content = await fs.readFile(configPath, { encoding: 'utf-8' });
         return JSON.parse(content);
     }
 }

package/dist/client/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/index.js

@@ -0,0 +1,32 @@
+// Shared client entrypoint that bootstraps all of the apps supplied
+// by current microfrontend
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+// Since this is a shared entrypoint, it dynamically imports all of the
+// available apps. They will be built as separate chunks and only loaded
+// if needed.
+const modules = import.meta.glob('/apps/*/index.tsx', { import: 'default' });
+async function runHydration() {
+    for (const container of document.querySelectorAll('div[data-app-name]')) {
+        const appName = container.getAttribute('data-app-name');
+        const appModuleLoader = modules[`/apps/${appName}/index.tsx`];
+        if (!appModuleLoader || container.hasAttribute('data-app-hydrated')) {
+            continue;
+        }
+        // Mark container as hydrated, in case there are multiple instances
+        // of the same microfrontend script on the page
+        container.setAttribute('data-app-hydrated', 'true');
+        const appId = container.getAttribute('data-app-id');
+        const propsContainer = document.querySelector(`script[data-app-id="${appId}"]`);
+        // TODO: more robust error handling and error logging
+        const props = JSON.parse(propsContainer?.textContent ?? '{}');
+        const reactElement = React.createElement((await appModuleLoader()), props);
+        ReactDOM.hydrateRoot(container, reactElement);
+    }
+}
+if (document.readyState !== 'complete') {
+    document.addEventListener('DOMContentLoaded', runHydration);
+}
+else {
+    runHydration();
+}

package/dist/server/development.js

@@ -1,22 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.runDevelopmentServer = void 0;
 // This is the nerest development server entrypoint
-const path_1 = __importDefault(require("path"));
-const vite_1 = __importDefault(require("vite"));
-const fastify_1 = __importDefault(require("fastify"));
-const static_1 = __importDefault(require("@fastify/static"));
-const fastify_graceful_shutdown_1 = __importDefault(require("fastify-graceful-shutdown"));
-const apps_1 = require("./parts/apps");
-const render_1 = require("./parts/render");
-const preview_1 = require("./parts/preview");
-const validator_1 = require("./parts/validator");
-const swagger_1 = require("./parts/swagger");
-const k8s_probes_1 = require("./parts/k8s-probes");
-async function runDevelopmentServer() {
+import path from 'path';
+import { build, createServer } from 'vite';
+import fastify from 'fastify';
+import fastifyStatic from '@fastify/static';
+import fastifyGracefulShutdown from 'fastify-graceful-shutdown';
+import { loadApps } from './parts/apps.js';
+import { renderApp } from './parts/render.js';
+import { renderPreviewPage } from './parts/preview.js';
+import { validator } from './parts/validator.js';
+import { setupSwagger } from './parts/swagger.js';
+import { setupK8SProbes } from './parts/k8s-probes.js';
+import { runRuntimeHook } from './parts/runtime-hook.js';
+// eslint-disable-next-line max-statements
+export async function runDevelopmentServer() {
     const root = process.cwd();
     // TODO: move build config into a separate file
     // TODO: look at @vitejs/plugin-react (everything seems fine without it though)
@@ -53,15 +49,15 @@ async function runDevelopmentServer() {
     await startClientBuildWatcher(config);
     // Load app entries following the `apps/{name}/index.tsx` convention
     // TODO: remove hardcoded port
-    const apps = await (0, apps_1.loadApps)(root, 'http://0.0.0.0:3000/');
+    const apps = await loadApps(root, 'http://0.0.0.0:3000/');
     // Start vite server that will be rendering SSR components
-    const viteSsr = await vite_1.default.createServer(config);
-    const app = (0, fastify_1.default)();
+    const viteSsr = await createServer(config);
+    const app = fastify();
     // Setup schema validation. We have to use our own ajv instance that
     // we can use both to validate request bodies and examples against
     // app schemas
-    app.setValidatorCompiler(({ schema }) => validator_1.validator.compile(schema));
-    await (0, swagger_1.setupSwagger)(app);
+    app.setValidatorCompiler(({ schema }) => validator.compile(schema));
+    await setupSwagger(app);
     for (const appEntry of Object.values(apps)) {
         const { name, entry, examples, schema } = appEntry;
         const routeOptions = {};
@@ -86,7 +82,7 @@ async function runDevelopmentServer() {
             const ssrComponent = await viteSsr.ssrLoadModule(entry, {
                 fixStacktrace: true,
             });
-            return (0, render_1.renderApp)({
+            return renderApp({
                 name,
                 assets: appEntry.assets,
                 component: ssrComponent.default,
@@ -94,9 +90,9 @@ async function runDevelopmentServer() {
         });
         for (const [exampleName, example] of Object.entries(examples)) {
             // Validate example against schema when specified
-            if (schema && !validator_1.validator.validate(schema, example)) {
+            if (schema && !validator.validate(schema, example)) {
                 // TODO: use logger and display errors more prominently
-                console.error(`Example "${exampleName}" of app "${name}" does not satisfy schema: ${validator_1.validator.errorsText()}`);
+                console.error(`Example "${exampleName}" of app "${name}" does not satisfy schema: ${validator.errorsText()}`);
             }
             // GET /api/{name}/examples/{example} -> render a preview page
             // with a predefined example body
@@ -111,24 +107,24 @@ async function runDevelopmentServer() {
                 const ssrComponent = await viteSsr.ssrLoadModule(entry, {
                     fixStacktrace: true,
                 });
-                const { html, assets } = (0, render_1.renderApp)({
+                const { html, assets } = renderApp({
                     name,
                     assets: appEntry.assets,
                     component: ssrComponent.default,
                 }, example);
                 reply.type('text/html');
-                return (0, preview_1.renderPreviewPage)(html, assets);
+                return renderPreviewPage(html, assets);
             });
         }
     }
     // Add graceful shutdown handler to prevent requests errors
-    await app.register(fastify_graceful_shutdown_1.default);
+    await app.register(fastifyGracefulShutdown);
     if (process.env.ENABLE_K8S_PROBES) {
-        await (0, k8s_probes_1.setupK8SProbes)(app);
+        await setupK8SProbes(app);
     }
     // TODO: only do this locally, load from CDN in production
-    await app.register(static_1.default, {
-        root: path_1.default.join(root, 'build'),
+    await app.register(fastifyStatic, {
+        root: path.join(root, 'build'),
         // TODO: maybe use @fastify/cors instead
         setHeaders(res) {
             res.setHeader('Access-Control-Allow-Origin', '*');
@@ -136,6 +132,8 @@ async function runDevelopmentServer() {
             res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, Authorization');
         },
     });
+    // Execute runtime hook in nerest-runtime.ts if it exists
+    await runRuntimeHook(app, () => viteSsr.ssrLoadModule('/nerest-runtime.ts'));
     // TODO: remove hardcoded port
     await app.listen({
         host: '0.0.0.0',
@@ -143,10 +141,9 @@ async function runDevelopmentServer() {
     });
     console.log('Nerest is listening on 0.0.0.0:3000');
 }
-exports.runDevelopmentServer = runDevelopmentServer;
 // TODO: this should probably be moved from here
 async function startClientBuildWatcher(config) {
-    const watcher = (await vite_1.default.build(config));
+    const watcher = (await build(config));
     return new Promise((resolve) => {
         // We need to have a built manifest.json to provide assets
         // links in SSR. We will wait for rollup to report when it

package/dist/server/loaders/assets.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadAppAssets = void 0;
 // Extracts the list of assets for a given app from the manifest file
-function loadAppAssets(appName, manifest, staticPath) {
+export function loadAppAssets(appName, manifest, staticPath) {
     // TODO: handling errors and potentially missing entries
     // All apps share the same JS entry that dynamically imports the chunks of the apps
     // that are used on the page based on their name
@@ -11,4 +8,3 @@ function loadAppAssets(appName, manifest, staticPath) {
     const appCss = manifest[`apps/${appName}/index.tsx`].css ?? [];
     return [clientEntryJs, ...appCss].map((x) => staticPath + x);
 }
-exports.loadAppAssets = loadAppAssets;

package/dist/server/loaders/examples.js

@@ -1,31 +1,24 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadAppExamples = void 0;
-const path_1 = __importDefault(require("path"));
-const fs_1 = require("fs");
-const promises_1 = __importDefault(require("fs/promises"));
+import path from 'path';
+import { existsSync } from 'fs';
+import fs from 'fs/promises';
 // Loads and parses the example json files for providing
 // `/examples/` routes of the dev server
-async function loadAppExamples(appRoot) {
-    const examplesRoot = path_1.default.join(appRoot, 'examples');
+export async function loadAppExamples(appRoot) {
+    const examplesRoot = path.join(appRoot, 'examples');
     // Examples are optional and may not exist
-    if (!(0, fs_1.existsSync)(examplesRoot)) {
+    if (!existsSync(examplesRoot)) {
         return {};
     }
-    const exampleFiles = (await promises_1.default.readdir(examplesRoot, { withFileTypes: true }))
+    const exampleFiles = (await fs.readdir(examplesRoot, { withFileTypes: true }))
         .filter((d) => d.isFile() && d.name.endsWith('.json'))
         .map((d) => d.name);
     const examples = {};
     // TODO: error handling and reporting
     for (const filename of exampleFiles) {
-        const file = path_1.default.join(examplesRoot, filename);
-        const content = await promises_1.default.readFile(file, { encoding: 'utf8' });
+        const file = path.join(examplesRoot, filename);
+        const content = await fs.readFile(file, { encoding: 'utf8' });
         const json = JSON.parse(content);
-        examples[path_1.default.basename(filename, '.json')] = json;
+        examples[path.basename(filename, '.json')] = json;
     }
     return examples;
 }
-exports.loadAppExamples = loadAppExamples;

package/dist/server/loaders/manifest.js

@@ -1,17 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadAppManifest = void 0;
-const path_1 = __importDefault(require("path"));
-const promises_1 = __importDefault(require("fs/promises"));
+import path from 'path';
+import fs from 'fs/promises';
 // Manifest is used to provide assets list for every app
 // for use with SSR
-async function loadAppManifest(root) {
+export async function loadAppManifest(root) {
     // TODO: error handling
-    const manifestPath = path_1.default.join(root, 'build', 'manifest.json');
-    const manifestData = await promises_1.default.readFile(manifestPath, { encoding: 'utf8' });
+    const manifestPath = path.join(root, 'build', 'manifest.json');
+    const manifestData = await fs.readFile(manifestPath, { encoding: 'utf8' });
     return JSON.parse(manifestData);
 }
-exports.loadAppManifest = loadAppManifest;

package/dist/server/loaders/schema.js

@@ -1,21 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadAppSchema = void 0;
-const path_1 = __importDefault(require("path"));
-const fs_1 = require("fs");
-const promises_1 = __importDefault(require("fs/promises"));
+import path from 'path';
+import { existsSync } from 'fs';
+import fs from 'fs/promises';
 // Loads and parses the schema file for a specific app
-async function loadAppSchema(appRoot) {
-    const schemaPath = path_1.default.join(appRoot, 'schema.json');
+export async function loadAppSchema(appRoot) {
+    const schemaPath = path.join(appRoot, 'schema.json');
     let schema = null;
     // TODO: error handling and reporting
-    if ((0, fs_1.existsSync)(schemaPath)) {
-        const file = await promises_1.default.readFile(schemaPath, { encoding: 'utf-8' });
+    if (existsSync(schemaPath)) {
+        const file = await fs.readFile(schemaPath, { encoding: 'utf-8' });
         schema = JSON.parse(file);
     }
     return schema;
 }
-exports.loadAppSchema = loadAppSchema;

package/dist/server/parts/apps.js

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadApps = void 0;
-const path_1 = __importDefault(require("path"));
-const promises_1 = __importDefault(require("fs/promises"));
-const assets_1 = require("../loaders/assets");
-const examples_1 = require("../loaders/examples");
-const schema_1 = require("../loaders/schema");
-const manifest_1 = require("../loaders/manifest");
+import path from 'path';
+import fs from 'fs/promises';
+import { loadAppAssets } from '../loaders/assets.js';
+import { loadAppExamples } from '../loaders/examples.js';
+import { loadAppSchema } from '../loaders/schema.js';
+import { loadAppManifest } from '../loaders/manifest.js';
 // Build the record of the available apps by convention
 // apps -> /apps/{name}/index.tsx
 // examples -> /apps/{name}/examples/{example}.json
-async function loadApps(root, deployedStaticPath) {
-    const appsRoot = path_1.default.join(root, 'apps');
-    const manifest = await (0, manifest_1.loadAppManifest)(root);
-    const appsDirs = (await promises_1.default.readdir(appsRoot, { withFileTypes: true }))
+export async function loadApps(root, deployedStaticPath) {
+    const appsRoot = path.join(root, 'apps');
+    const manifest = await loadAppManifest(root);
+    const appsDirs = (await fs.readdir(appsRoot, { withFileTypes: true }))
         .filter((d) => d.isDirectory())
         .map((d) => d.name);
     const apps = [];
@@ -25,19 +19,18 @@ async function loadApps(root, deployedStaticPath) {
     }
     return Object.fromEntries(apps);
 }
-exports.loadApps = loadApps;
 async function loadApp(appsRoot, name, manifest, deployedStaticPath) {
     // TODO: report problems with loading entries, assets and/or examples
-    const appRoot = path_1.default.join(appsRoot, name);
+    const appRoot = path.join(appsRoot, name);
     return [
         name,
         {
             name,
             root: appRoot,
-            entry: path_1.default.join(appRoot, 'index.tsx'),
-            assets: (0, assets_1.loadAppAssets)(name, manifest, deployedStaticPath),
-            examples: await (0, examples_1.loadAppExamples)(appRoot),
-            schema: await (0, schema_1.loadAppSchema)(appRoot),
+            entry: path.join(appRoot, 'index.tsx'),
+            assets: loadAppAssets(name, manifest, deployedStaticPath),
+            examples: await loadAppExamples(appRoot),
+            schema: await loadAppSchema(appRoot),
         },
     ];
 }

package/dist/server/parts/k8s-probes.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupK8SProbes = void 0;
 // Setup routes for k8s probes to check if application is live
-async function setupK8SProbes(app) {
+export async function setupK8SProbes(app) {
     // Handler for graceful shutdowns
     // K8s can initiate shutdown at any moment: on pods restart or on deploy.
     // So, if we receive shutdown request, we:
@@ -28,4 +25,3 @@ async function setupK8SProbes(app) {
         }
     });
 }
-exports.setupK8SProbes = setupK8SProbes;

package/dist/server/parts/preview.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderPreviewPage = void 0;
 // Renders the preview page available by convention at /api/{name}/examples/{example}
-function renderPreviewPage(html, assets) {
+export function renderPreviewPage(html, assets) {
     const { scripts, styles } = mapAssets(assets);
     return `
   <html>
@@ -16,7 +13,6 @@ function renderPreviewPage(html, assets) {
   </html>
   `;
 }
-exports.renderPreviewPage = renderPreviewPage;
 function mapAssets(assets) {
     // TODO: script type="module" is not supported by older browsers
     // but vite doesn't provide `nomodule` fallback by default

package/dist/server/parts/render.js

@@ -1,22 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderApp = void 0;
-const react_1 = __importDefault(require("react"));
-const server_1 = require("react-dom/server");
-const nanoid_1 = require("nanoid");
-function renderApp({ name, assets, component }, props = {}) {
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { nanoid } from 'nanoid';
+export function renderApp({ name, assets, component }, props = {}) {
     const html = renderSsrComponent(name, component, props);
     return { html, assets };
 }
-exports.renderApp = renderApp;
 function renderSsrComponent(appName, appComponent, props) {
-    const html = (0, server_1.renderToString)(react_1.default.createElement(appComponent, props));
+    const html = renderToString(React.createElement(appComponent, props));
     // There may be multiple instances of the same app on the page,
     // so we will use a randomized id to avoid collisions
-    const appId = (0, nanoid_1.nanoid)();
+    const appId = nanoid();
     // data-app-name and data-app-id are used by client entrypoint to hydrate
     // apps using correct serialized props
     const container = `<div data-app-name="${appName}" data-app-id="${appId}">${html}</div>`;

package/dist/server/parts/runtime-hook.d.ts

@@ -0,0 +1,2 @@
+import type { FastifyInstance } from 'fastify';
+export declare function runRuntimeHook(app: FastifyInstance, loader: () => Promise<unknown>): Promise<void>;

package/dist/server/parts/runtime-hook.js

@@ -0,0 +1,28 @@
+// Load the runtime hook module and run it if it exists, passing down our
+// fastify instance. This hook can be used to modify fastify settings, add
+// plugins or routes on an individual app level.
+export async function runRuntimeHook(app, loader) {
+    let module;
+    try {
+        module = (await loader());
+    }
+    catch { }
+    if (typeof module?.default === 'function') {
+        // If module exists and exports a default function, execute it and
+        // pass down the fastify instance
+        try {
+            await module.default(app);
+        }
+        catch (e) {
+            console.error('Failed to execute runtime hook', e);
+            process.exit(1);
+        }
+    }
+    else if (module) {
+        console.error("Runtime hook found, but doesn't export default function!");
+        process.exit(1);
+    }
+    else {
+        console.log('Runtime hook not found, skipping...');
+    }
+}

package/dist/server/parts/swagger.js

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupSwagger = void 0;
-const path_1 = __importDefault(require("path"));
-const fs_1 = __importDefault(require("fs"));
-const swagger_1 = __importDefault(require("@fastify/swagger"));
-const swagger_ui_1 = __importDefault(require("@fastify/swagger-ui"));
+import path from 'path';
+import fs from 'fs';
+import fastifySwagger from '@fastify/swagger';
+import fastifySwaggerUi from '@fastify/swagger-ui';
 // Setup automatic OpenAPI specification compilation and enable
 // Swagger UI at the `/api` route
-async function setupSwagger(app) {
+export async function setupSwagger(app) {
     let appInfo = {};
     try {
-        const packageJson = fs_1.default.readFileSync(path_1.default.join(process.cwd(), 'package.json'), { encoding: 'utf-8' });
+        const packageJson = fs.readFileSync(path.join(process.cwd(), 'package.json'), { encoding: 'utf-8' });
         appInfo = JSON.parse(packageJson);
     }
     catch (e) {
@@ -24,7 +18,7 @@ async function setupSwagger(app) {
         (typeof appInfo.repository === 'string'
             ? appInfo.repository
             : appInfo.repository?.url);
-    await app.register(swagger_1.default, {
+    await app.register(fastifySwagger, {
         openapi: {
             info: {
                 title: appInfo.name ?? 'Nerest micro frontend',
@@ -43,8 +37,7 @@ async function setupSwagger(app) {
             },
         },
     });
-    await app.register(swagger_ui_1.default, {
+    await app.register(fastifySwaggerUi, {
         routePrefix: '/api',
     });
 }
-exports.setupSwagger = setupSwagger;

package/dist/server/parts/validator.d.ts

@@ -1,2 +1,2 @@
 import Ajv from 'ajv';
-export declare const validator: Ajv;
+export declare const validator: Ajv.default;

package/dist/server/parts/validator.js

@@ -1,17 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.validator = void 0;
-const ajv_1 = __importDefault(require("ajv"));
-const fast_uri_1 = __importDefault(require("fast-uri"));
-const ajv_formats_1 = __importDefault(require("ajv-formats"));
-exports.validator = new ajv_1.default({
+import Ajv from 'ajv';
+import fastUri from 'fast-uri';
+import addFormats from 'ajv-formats';
+// Ajv default export is broken, so we have to specify `.default`
+// manually: https://github.com/ajv-validator/ajv/issues/2132
+// eslint-disable-next-line new-cap
+export const validator = new Ajv.default({
     coerceTypes: 'array',
     useDefaults: true,
     removeAdditional: true,
-    uriResolver: fast_uri_1.default,
+    uriResolver: fastUri,
     addUsedSchema: false,
     // Explicitly set allErrors to `false`.
     // When set to `true`, a DoS attack is possible.
@@ -20,4 +17,4 @@ exports.validator = new ajv_1.default({
 // Support additional type formats in JSON schema like `date`,
 // `email`, `url`, etc. Used by default in fastify
 // https://www.npmjs.com/package/ajv-formats
-(0, ajv_formats_1.default)(exports.validator);
+addFormats.default(validator);

package/dist/server/production.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/server/production.js

@@ -0,0 +1,85 @@
+// This is the nerest production server entrypoint
+import path from 'path';
+import fs from 'fs/promises';
+import fastify from 'fastify';
+import fastifyGracefulShutdown from 'fastify-graceful-shutdown';
+import { renderApp } from './parts/render.js';
+import { setupSwagger } from './parts/swagger.js';
+import { validator } from './parts/validator.js';
+import { renderPreviewPage } from './parts/preview.js';
+import { setupK8SProbes } from './parts/k8s-probes.js';
+import { runRuntimeHook } from './parts/runtime-hook.js';
+// TODO: refactor to merge the similar parts between production and development server?
+async function runProductionServer() {
+    const root = process.cwd();
+    // TODO: error handling for file reading
+    const apps = JSON.parse(await fs.readFile(path.join(root, 'build/nerest-manifest.json'), {
+        encoding: 'utf-8',
+    }));
+    // TODO: fix client-side vite types
+    const components = import.meta.glob('/apps/*/index.tsx', {
+        import: 'default',
+        eager: true,
+    });
+    const app = fastify();
+    // Setup schema validation. We have to use our own ajv instance that
+    // we can use both to validate request bodies and examples against
+    // app schemas
+    app.setValidatorCompiler(({ schema }) => validator.compile(schema));
+    await setupSwagger(app);
+    for (const appEntry of Object.values(apps)) {
+        const { name, examples, schema, assets } = appEntry;
+        const component = components[`/apps/${name}/index.tsx`];
+        const routeOptions = {};
+        // TODO: report error if schema is missing, unless this app is client-only
+        // TODO: disallow apps without schemas in production build
+        if (schema) {
+            routeOptions.schema = {
+                // Use description as Swagger summary, since summary is visible
+                // even when the route is collapsed in the UI
+                summary: schema.description,
+                // TODO: do we need to mix in examples like in the development server?
+                body: schema,
+            };
+        }
+        // POST /api/{name} -> render app with request.body as props
+        app.post(`/api/${name}`, routeOptions, (request) => renderApp({ name, assets, component }, request.body));
+        for (const [exampleName, example] of Object.entries(examples)) {
+            // GET /api/{name}/examples/{example} -> render a preview page
+            // with a predefined example body
+            const exampleRoute = `/api/${name}/examples/${exampleName}`;
+            app.get(exampleRoute, {
+                schema: {
+                    // Add a clickable link to the example route in route's Swagger
+                    // description so it's easier to navigate to
+                    description: `Open sandbox: [${exampleRoute}](${exampleRoute})`,
+                },
+            }, async (_, reply) => {
+                const { html, assets: outAssets } = renderApp({
+                    name,
+                    assets,
+                    component,
+                }, example);
+                reply.type('text/html');
+                return renderPreviewPage(html, outAssets);
+            });
+        }
+    }
+    // Add graceful shutdown handler to prevent requests errors
+    await app.register(fastifyGracefulShutdown);
+    if (process.env.ENABLE_K8S_PROBES) {
+        await setupK8SProbes(app);
+    }
+    // Execute runtime hook in nerest-runtime.ts if it exists
+    await runRuntimeHook(app, async () => {
+        const glob = import.meta.glob('/nerest-runtime.ts', { eager: true });
+        return glob['/nerest-runtime.ts'];
+    });
+    // TODO: remove hardcoded port
+    await app.listen({
+        host: '0.0.0.0',
+        port: 3000,
+    });
+    console.log('Nerest is listening on 0.0.0.0:3000');
+}
+runProductionServer();

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@nerest/nerest",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "React micro frontend framework",
   "homepage": "https://github.com/nerestjs/nerest#readme",
   "repository": {
     "type": "git",
     "url": "https://github.com/nerestjs/nerest.git"
   },
+  "type": "module",
   "bin": {
     "nerest": "dist/bin/index.js"
   },
@@ -52,16 +53,16 @@
     ]
   },
   "dependencies": {
-    "@fastify/static": "^6.11.2",
+    "@fastify/static": "^6.12.0",
     "@fastify/swagger": "^8.12.0",
     "@fastify/swagger-ui": "^1.10.1",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
     "dotenv": "^16.3.1",
-    "fast-uri": "^2.2.0",
+    "fast-uri": "^2.3.0",
     "fastify": "^4.24.3",
     "fastify-graceful-shutdown": "^3.5.1",
-    "nanoid": "^3.3.6",
+    "nanoid": "^5.0.2",
     "vite": "^4.5.0",
     "vite-plugin-externals": "^0.6.2"
   },
@@ -69,7 +70,7 @@
     "@tinkoff/eslint-config": "^1.54.4",
     "@tinkoff/eslint-config-react": "^1.54.4",
     "@tinkoff/prettier-config": "^1.52.1",
-    "@types/react": "^18.2.29",
+    "@types/react": "^18.2.34",
     "@types/react-dom": "^18.2.14",
     "jest": "^29.7.0",
     "json-schema-to-typescript": "^13.1.1",

package/server/development.ts

@@ -2,7 +2,7 @@
 import path from 'path';
 import type { ServerResponse } from 'http';
 
-import vite from 'vite';
+import { build, createServer } from 'vite';
 import type { InlineConfig } from 'vite';
 import type { RollupWatcher, RollupWatcherEvent } from 'rollup';
 
@@ -11,13 +11,15 @@ import fastify from 'fastify';
 import fastifyStatic from '@fastify/static';
 import fastifyGracefulShutdown from 'fastify-graceful-shutdown';
 
-import { loadApps } from './parts/apps';
-import { renderApp } from './parts/render';
-import { renderPreviewPage } from './parts/preview';
-import { validator } from './parts/validator';
-import { setupSwagger } from './parts/swagger';
-import { setupK8SProbes } from './parts/k8s-probes';
+import { loadApps } from './parts/apps.js';
+import { renderApp } from './parts/render.js';
+import { renderPreviewPage } from './parts/preview.js';
+import { validator } from './parts/validator.js';
+import { setupSwagger } from './parts/swagger.js';
+import { setupK8SProbes } from './parts/k8s-probes.js';
+import { runRuntimeHook } from './parts/runtime-hook.js';
 
+// eslint-disable-next-line max-statements
 export async function runDevelopmentServer() {
   const root = process.cwd();
 
@@ -61,7 +63,7 @@ export async function runDevelopmentServer() {
   const apps = await loadApps(root, 'http://0.0.0.0:3000/');
 
   // Start vite server that will be rendering SSR components
-  const viteSsr = await vite.createServer(config);
+  const viteSsr = await createServer(config);
   const app = fastify();
 
   // Setup schema validation. We have to use our own ajv instance that
@@ -171,6 +173,9 @@ export async function runDevelopmentServer() {
     },
   });
 
+  // Execute runtime hook in nerest-runtime.ts if it exists
+  await runRuntimeHook(app, () => viteSsr.ssrLoadModule('/nerest-runtime.ts'));
+
   // TODO: remove hardcoded port
   await app.listen({
     host: '0.0.0.0',
@@ -182,7 +187,7 @@ export async function runDevelopmentServer() {
 
 // TODO: this should probably be moved from here
 async function startClientBuildWatcher(config: InlineConfig) {
-  const watcher = (await vite.build(config)) as RollupWatcher;
+  const watcher = (await build(config)) as RollupWatcher;
   return new Promise<void>((resolve) => {
     // We need to have a built manifest.json to provide assets
     // links in SSR. We will wait for rollup to report when it

package/server/parts/apps.ts

@@ -2,10 +2,10 @@ import path from 'path';
 import fs from 'fs/promises';
 import type { Manifest } from 'vite';
 
-import { loadAppAssets } from '../loaders/assets';
-import { loadAppExamples } from '../loaders/examples';
-import { loadAppSchema } from '../loaders/schema';
-import { loadAppManifest } from '../loaders/manifest';
+import { loadAppAssets } from '../loaders/assets.js';
+import { loadAppExamples } from '../loaders/examples.js';
+import { loadAppSchema } from '../loaders/schema.js';
+import { loadAppManifest } from '../loaders/manifest.js';
 
 export type AppEntry = {
   name: string;

package/server/parts/runtime-hook.ts

@@ -0,0 +1,35 @@
+import type { FastifyInstance } from 'fastify';
+
+type RuntimeHookModule = {
+  default: (app: FastifyInstance) => unknown;
+};
+
+// Load the runtime hook module and run it if it exists, passing down our
+// fastify instance. This hook can be used to modify fastify settings, add
+// plugins or routes on an individual app level.
+export async function runRuntimeHook(
+  app: FastifyInstance,
+  loader: () => Promise<unknown>
+) {
+  let module: RuntimeHookModule | undefined;
+
+  try {
+    module = (await loader()) as RuntimeHookModule;
+  } catch {}
+
+  if (typeof module?.default === 'function') {
+    // If module exists and exports a default function, execute it and
+    // pass down the fastify instance
+    try {
+      await module.default(app);
+    } catch (e) {
+      console.error('Failed to execute runtime hook', e);
+      process.exit(1);
+    }
+  } else if (module) {
+    console.error("Runtime hook found, but doesn't export default function!");
+    process.exit(1);
+  } else {
+    console.log('Runtime hook not found, skipping...');
+  }
+}

package/server/parts/validator.ts

@@ -2,7 +2,10 @@ import Ajv from 'ajv';
 import fastUri from 'fast-uri';
 import addFormats from 'ajv-formats';
 
-export const validator = new Ajv({
+// Ajv default export is broken, so we have to specify `.default`
+// manually: https://github.com/ajv-validator/ajv/issues/2132
+// eslint-disable-next-line new-cap
+export const validator = new Ajv.default({
   coerceTypes: 'array',
   useDefaults: true,
   removeAdditional: true,
@@ -16,4 +19,4 @@ export const validator = new Ajv({
 // Support additional type formats in JSON schema like `date`,
 // `email`, `url`, etc. Used by default in fastify
 // https://www.npmjs.com/package/ajv-formats
-addFormats(validator);
+addFormats.default(validator);

package/server/production.ts

@@ -6,12 +6,13 @@ import fastify from 'fastify';
 import fastifyGracefulShutdown from 'fastify-graceful-shutdown';
 import type { RouteShorthandOptions } from 'fastify';
 
-import type { AppEntry } from './parts/apps';
-import { renderApp } from './parts/render';
-import { setupSwagger } from './parts/swagger';
-import { validator } from './parts/validator';
-import { renderPreviewPage } from './parts/preview';
-import { setupK8SProbes } from './parts/k8s-probes';
+import type { AppEntry } from './parts/apps.js';
+import { renderApp } from './parts/render.js';
+import { setupSwagger } from './parts/swagger.js';
+import { validator } from './parts/validator.js';
+import { renderPreviewPage } from './parts/preview.js';
+import { setupK8SProbes } from './parts/k8s-probes.js';
+import { runRuntimeHook } from './parts/runtime-hook.js';
 
 // TODO: refactor to merge the similar parts between production and development server?
 async function runProductionServer() {
@@ -103,6 +104,12 @@ async function runProductionServer() {
     await setupK8SProbes(app);
   }
 
+  // Execute runtime hook in nerest-runtime.ts if it exists
+  await runRuntimeHook(app, async () => {
+    const glob = import.meta.glob('/nerest-runtime.ts', { eager: true });
+    return glob['/nerest-runtime.ts'];
+  });
+
   // TODO: remove hardcoded port
   await app.listen({
     host: '0.0.0.0',