oc-server 3.2.1 → 4.0.0

package/dist/Server.d.ts

@@ -102,8 +102,6 @@ export type ComponentSettings = {
     name: string;
     version: string;
 };
-export declare const getInitialData: () => InitialData;
-export declare const getSettings: () => ComponentSettings;
 type ErrorCodes = 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 421 | 422 | 423 | 424 | 425 | 426 | 428 | 429 | 431 | 451 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 510 | 511;
 export declare class ServerError extends Error {
     statusCode: ErrorCodes;

package/dist/Server.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerError = exports.getSettings = exports.getInitialData = exports.Server = void 0;
+exports.ServerError = exports.Server = void 0;
 // Simple ANSI color utility function
 const styleText = (color, text) => {
     const colors = {
@@ -84,12 +84,6 @@ class HandledServer {
         };
     }
 }
-const getInitialData = () => typeof __$$oc_initialData__ !== 'undefined'
-    ? __$$oc_initialData__
-    : {};
-exports.getInitialData = getInitialData;
-const getSettings = () => typeof __$$oc_Settings__ !== 'undefined' ? __$$oc_Settings__ : {};
-exports.getSettings = getSettings;
 class ServerError extends Error {
     statusCode;
     constructor(statusCode, message) {

package/dist/{cli/index.d.ts → cli.d.ts}

@@ -1,2 +1 @@
 #!/usr/bin/env node
-export {};

package/dist/cli.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+"use strict";
+console.warn('\x1b[33m%s\x1b[0m', 'WARNING: The "oc-server" command is deprecated. Please use the Vite plugin instead by adding oc() to your vite.config.ts. See documentation for migration guide.');

package/dist/client.d.ts

@@ -0,0 +1,2 @@
+export { type ActionOutput, serverClient, getInitialData, getSettings, } from './serverClient';
+export { type Action, type InitialData } from './Server';

package/dist/client.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSettings = exports.getInitialData = exports.serverClient = void 0;
+var serverClient_1 = require("./serverClient");
+Object.defineProperty(exports, "serverClient", { enumerable: true, get: function () { return serverClient_1.serverClient; } });
+Object.defineProperty(exports, "getInitialData", { enumerable: true, get: function () { return serverClient_1.getInitialData; } });
+Object.defineProperty(exports, "getSettings", { enumerable: true, get: function () { return serverClient_1.getSettings; } });

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export * from './Server';
-export * from './serverClient';
+export { Server, ServerError, type ServerContext, type Register, } from './Server';
 export { DataProvider, Template, External, DataContext } from './types';

package/dist/index.js

@@ -1,18 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Server"), exports);
-__exportStar(require("./serverClient"), exports);
+exports.ServerError = exports.Server = void 0;
+var Server_1 = require("./Server");
+Object.defineProperty(exports, "Server", { enumerable: true, get: function () { return Server_1.Server; } });
+Object.defineProperty(exports, "ServerError", { enumerable: true, get: function () { return Server_1.ServerError; } });

package/dist/serverClient.d.ts

@@ -1,5 +1,7 @@
-import { AnyServer, RegisteredServer, Action, GetMiddlewareInput } from './Server';
-import { IsAnyOrUnknown, Prettify, ToPrettyJson } from './types';
+import type { AnyServer, RegisteredServer, Action, GetMiddlewareInput, ComponentSettings, InitialData } from './Server';
+import type { IsAnyOrUnknown, Prettify, ToPrettyJson } from './types';
+export declare const getInitialData: () => InitialData;
+export declare const getSettings: () => ComponentSettings;
 type InferInput<R> = R extends Action<infer I, any, any, any, any> ? I : any;
 type InferOutput<R> = R extends Action<any, infer O, any, any, any> ? ToPrettyJson<O> : never;
 type IsEmptyObject<T> = keyof T extends never ? true : false;

package/dist/serverClient.js

@@ -1,14 +1,19 @@
 "use strict";
 /// <reference types="oc-vite/client" />
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.serverClient = void 0;
-const Server_1 = require("./Server");
+exports.serverClient = exports.getSettings = exports.getInitialData = void 0;
+const getInitialData = () => typeof __$$oc_initialData__ !== 'undefined'
+    ? __$$oc_initialData__
+    : {};
+exports.getInitialData = getInitialData;
+const getSettings = () => typeof __$$oc_Settings__ !== 'undefined' ? __$$oc_Settings__ : {};
+exports.getSettings = getSettings;
 exports.serverClient = new Proxy({}, {
     get(_target, prop) {
         return (data, options) => {
             const componentName = 'COMPONENT_NAME';
             const componentVersion = 'COMPONENT_VERSION';
-            const baseUrl = (0, Server_1.getSettings)().baseUrl ??
+            const baseUrl = (0, exports.getSettings)().baseUrl ??
                 window.oc?.renderedComponents?.[componentName]?.baseUrl;
             return window.oc.getAction({
                 action: prop,

package/dist/vite/plugin.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from 'vite';
+interface OcVitePluginOptions {
+    port?: number;
+}
+export declare function oc(options?: OcVitePluginOptions): Plugin;
+export {};

package/dist/vite/plugin.js

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.oc = oc;
+function oc(options = {}) {
+    const moduleRequire = typeof require !== 'undefined' ? require : null;
+    if (!moduleRequire) {
+        throw new Error('oc-vite-plugin requires a CommonJS environment with require() available');
+    }
+    return {
+        name: 'oc-vite-plugin',
+        async configureServer(server) {
+            const fs = moduleRequire('node:fs');
+            const path = moduleRequire('node:path');
+            const vm = moduleRequire('node:vm');
+            const esbuild = moduleRequire('esbuild');
+            const { loadConfigFromFile } = moduleRequire('vite');
+            const ocClientBrowser = moduleRequire('oc-client-browser');
+            const { getContext, getDefaultParams, parsePkg } = moduleRequire('./oc');
+            const getMockedPlugins = moduleRequire('./get-mocked-plugins').default;
+            const pkg = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf-8'));
+            const parsedPkg = parsePkg(pkg);
+            const templateType = parsedPkg.templateType;
+            const { createRequire } = moduleRequire('module');
+            const projectRequire = createRequire(path.join(process.cwd(), 'package.json'));
+            const tryRequire = (name) => {
+                try {
+                    return { success: true, value: projectRequire(name) };
+                }
+                catch (e) {
+                    return { success: false, value: e };
+                }
+            };
+            const result = tryRequire(`${templateType}-compiler/dist/lib/hmr`);
+            if (!result.success) {
+                const code = String(result.value.code);
+                if (code === 'ERR_REQUIRE_ESM') {
+                    throw new Error('You are using an older version of node that does not support ESM on require. Please update to the latest 22.x or higher');
+                }
+                else if (code === 'MODULE_NOT_FOUND') {
+                    const baseResult = tryRequire(`${templateType}-compiler`);
+                    if (baseResult.success) {
+                        throw new Error(`The template ${templateType} is not supported. Try updating to the last version`);
+                    }
+                    else {
+                        throw new Error(`Could not find the template compiler library: ${templateType}-compiler in your project`);
+                    }
+                }
+                else {
+                    throw result.value;
+                }
+            }
+            const template = result.value;
+            const promisify = (fn) => (...args) => new Promise((resolve, reject) => fn(...args, (err, data) => err ? reject(err) : resolve(data)));
+            const getDataProvider = (serverEntry) => {
+                if (!serverEntry) {
+                    return {
+                        dataProvider: async (context) => ({
+                            ...(context.params ?? {}),
+                        }),
+                    };
+                }
+                const result = esbuild.buildSync({
+                    entryPoints: [serverEntry],
+                    bundle: true,
+                    format: 'cjs',
+                    write: false,
+                });
+                const code = result.outputFiles[0].text;
+                const backend = vm.runInNewContext(code, {
+                    ...globalThis,
+                    exports: {},
+                    console,
+                    module: { exports: {} },
+                });
+                const dataProvider = backend.data || backend.server.getData();
+                return {
+                    dataProvider: promisify(dataProvider),
+                    parametersSchema: backend.server?._parameters,
+                };
+            };
+            const getBaseTemplate = (appBlock, name, version, appEntry, imports = {}) => {
+                return `
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="robots" content="index, follow" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+    </style>
+    ${imports
+                    ? `<script type="importmap">{"imports": ${JSON.stringify(imports)}}</script>`
+                    : ''}
+  </head>
+  <body>
+    <script src="/oc-client/client.js"></script>
+    ${appBlock({ name, version, entry: appEntry })}
+  </body>
+</html>
+  `;
+            };
+            const getHtmlTemplate = async (appBlock, name, version, appEntry, imports = {}, filePath = 'index.html') => {
+                let htmlTemplate;
+                try {
+                    htmlTemplate = fs.readFileSync(path.resolve(process.cwd(), filePath), 'utf-8');
+                    if (!htmlTemplate.includes('</body>')) {
+                        throw new Error('If you use a custom html entry it has to have a closing body tag');
+                    }
+                    htmlTemplate = htmlTemplate.replace('</body>', `<script>
+        if (!window.oc?.status) {
+          const script = document.createElement('script');
+          script.src = '/oc-client/client.js';
+          document.body.appendChild(script);
+        }
+      </script>
+      ${appBlock({ name, version, entry: appEntry })}</body>`);
+                }
+                catch (error) {
+                    htmlTemplate = getBaseTemplate(appBlock, name, version, appEntry, imports);
+                }
+                return htmlTemplate;
+            };
+            const name = parsedPkg.name;
+            const version = parsedPkg.version;
+            const appEntry = parsedPkg.appEntry;
+            const serverEntry = parsedPkg.serverEntry;
+            const dpResult = getDataProvider(serverEntry);
+            const dataProvider = dpResult.dataProvider;
+            const parametersSchema = dpResult.parametersSchema;
+            const plugins = getMockedPlugins(path.join(process.cwd(), '..'));
+            for (const plugin of plugins) {
+                plugin.register.register(null, null, () => { });
+            }
+            const defaultParams = getDefaultParams(pkg.oc?.parameters ?? parametersSchema);
+            const baseConfig = await loadConfigFromFile({
+                command: 'build',
+                mode: 'development',
+            }, undefined, process.cwd()).catch(() => null);
+            const baseConfigImports = baseConfig?.config?.resolve?.alias;
+            const { dev: clientJs } = ocClientBrowser.compileSync();
+            server.middlewares.use('/oc-client/client.js', (req, res) => {
+                res.statusCode = 200;
+                res.setHeader('Content-Type', 'text/javascript');
+                res.end(clientJs);
+            });
+            server.middlewares.use(async (req, res, next) => {
+                if (req.method === 'POST' && req.url === '/') {
+                    try {
+                        let body = '';
+                        req.on('data', (chunk) => {
+                            body += chunk.toString();
+                        });
+                        req.on('end', async () => {
+                            const { action, parameters } = JSON.parse(body).components[0];
+                            const { context, responseHeaders } = getContext(plugins, req, parameters, action);
+                            const props = await dataProvider(context);
+                            const response = [
+                                {
+                                    status: 200,
+                                    response: {
+                                        data: {
+                                            component: {
+                                                props,
+                                            },
+                                        },
+                                    },
+                                },
+                            ];
+                            for (const [key, value] of Object.entries(responseHeaders)) {
+                                res.setHeader(key, value);
+                            }
+                            res.statusCode = 200;
+                            res.setHeader('Content-Type', 'application/json');
+                            res.end(JSON.stringify(response));
+                        });
+                    }
+                    catch (e) {
+                        server.ssrFixStacktrace(e);
+                        res.statusCode = 500;
+                        res.end(JSON.stringify({ error: e.message }));
+                    }
+                }
+                else {
+                    next();
+                }
+            });
+            server.middlewares.use(async (req, res, next) => {
+                if (req.method === 'GET' && req.url === '/') {
+                    try {
+                        const params = defaultParams;
+                        const { context, responseHeaders } = getContext(plugins, req, params);
+                        let htmlTemplate = await getHtmlTemplate(template.appBlock, name, version, appEntry, typeof baseConfigImports === 'object' && !!baseConfigImports
+                            ? baseConfigImports
+                            : {});
+                        const data = await dataProvider(context);
+                        htmlTemplate = htmlTemplate.replace('__INITIAL_DATA__', JSON.stringify(data));
+                        const transformedHtml = await server.transformIndexHtml(req.url || '/', htmlTemplate);
+                        for (const [key, value] of Object.entries(responseHeaders)) {
+                            res.setHeader(key, value);
+                        }
+                        res.statusCode = 200;
+                        res.setHeader('Content-Type', 'text/html');
+                        res.end(transformedHtml);
+                    }
+                    catch (e) {
+                        server.ssrFixStacktrace(e);
+                        next(e);
+                    }
+                }
+                else {
+                    next();
+                }
+            });
+        },
+    };
+}

package/package.json

@@ -1,14 +1,31 @@
 {
   "name": "oc-server",
-  "version": "3.2.1",
+  "version": "4.0.0",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "bin": "dist/cli/index.js",
+  "bin": "dist/cli.js",
   "scripts": {
     "build": "tsc",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./client": {
+      "import": "./dist/client.js",
+      "require": "./dist/client.js",
+      "types": "./dist/client.d.ts"
+    },
+    "./vite": {
+      "import": "./dist/vite/plugin.js",
+      "require": "./dist/vite/plugin.js",
+      "types": "./dist/vite/plugin.d.ts"
+    }
+  },
   "keywords": [
     "oc",
     "opencomponents"
@@ -25,5 +42,11 @@
     "@fastify/express": "^3.0.0",
     "fastify": "^4.28.1",
     "oc-client-browser": "^1.8.0"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.1.3"
   }
 }

package/dist/cli/cli.d.ts

@@ -1 +0,0 @@
-export declare function cli(): void;

package/dist/cli/cli.js

@@ -1,86 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cli = cli;
-const node_path_1 = __importDefault(require("node:path"));
-const node_util_1 = require("node:util");
-const oc_1 = require("./oc");
-const server_1 = require("./server");
-const pkg = require(node_path_1.default.join(process.cwd(), 'package.json'));
-const { templateType } = (0, oc_1.parsePkg)(pkg);
-function cli() {
-    const { positionals: [command], values: { help, port = '5000' }, } = (0, node_util_1.parseArgs)({
-        allowPositionals: true,
-        options: {
-            port: {
-                type: 'string',
-                default: '5000',
-                short: 'p',
-            },
-            help: {
-                type: 'boolean',
-                default: false,
-                short: 'h',
-            },
-        },
-    });
-    if (help || !command) {
-        console.log(`
-    Usage:
-      $ oc-server <command> [options]
-
-    Commands:
-      dev         Start the development server
-
-    Options:
-      -h, --help  Display this message
-    `);
-        if (help && command === 'dev') {
-            console.log(`
-    Usage:
-      $ oc-server <command> [options]
-
-    Commands:
-      dev         Start the development server
-
-    Options:
-      -h, --help  Display this message
-      -p, --port  Port to use (default: 5000)
-    `);
-        }
-        process.exit(0);
-    }
-    function tryRequire(name) {
-        try {
-            return { success: true, value: require(name) };
-        }
-        catch (e) {
-            return { success: false, value: e };
-        }
-    }
-    const result = tryRequire(`${templateType}-compiler/dist/lib/hmr`);
-    if (!result.success) {
-        const code = String(result.value.code);
-        if (code === 'ERR_REQUIRE_ESM') {
-            console.error('You are using an older version of node that does not support ESM on require. Please update to the latest 22.x or higher');
-        }
-        else if (code === 'MODULE_NOT_FOUND') {
-            const baseResult = tryRequire(`${templateType}-compiler`);
-            if (baseResult.success) {
-                console.error(`The template ${templateType} is not supported. Try updating to the last version`);
-            }
-            else {
-                console.error(`Could not find the template compiler library: ${templateType}-compiler in your project`);
-            }
-        }
-        else {
-            console.error(result.value);
-        }
-        process.exit(1);
-    }
-    if (command === 'dev') {
-        (0, server_1.createServer)({ template: result.value, port });
-    }
-}

package/dist/cli/index.js

@@ -1,6 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-process.env.VITE_CJS_IGNORE_WARNING = 'true';
-const cli_1 = require("./cli");
-(0, cli_1.cli)();

package/dist/errors.d.ts

@@ -1,6 +0,0 @@
-type ErrorCodes = 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 421 | 422 | 423 | 424 | 425 | 426 | 428 | 429 | 431 | 451 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 510 | 511;
-export declare class ServerError extends Error {
-    statusCode: ErrorCodes;
-    constructor(statusCode: ErrorCodes, message: string);
-}
-export {};

package/dist/errors.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerError = void 0;
-class ServerError extends Error {
-    statusCode;
-    constructor(statusCode, message) {
-        super(message);
-        this.statusCode = statusCode;
-    }
-}
-exports.ServerError = ServerError;

package/dist/server-types.d.ts

@@ -1,16 +0,0 @@
-import type { DataContext } from './types';
-export type ServerContext<E = {
-    name: string;
-}, P = any, S = any> = Omit<DataContext<any, E, P, S>, 'params' | 'action' | 'setEmptyResponse'>;
-export type Action<I, O, E, P, S> = (params: I, ctx: ServerContext<E, P, S>) => Promise<O> | O;
-export interface Register {
-}
-export type AnyServer = {
-    actions: Record<string, Action<any, any, any, any, any>>;
-};
-export type RegisteredServer = Register extends {
-    server: infer TServer extends AnyServer;
-} ? TServer : AnyServer;
-export type GetMiddlewareInput<TServer extends AnyServer> = TServer extends {
-    _middlewareInput: infer I;
-} ? I : any;

package/dist/server-types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/settings.d.ts

@@ -1,10 +0,0 @@
-export type ComponentSettings = {
-    id: string;
-    element: HTMLElement;
-    staticPath: string;
-    baseUrl: string;
-    name: string;
-    version: string;
-};
-export declare const getInitialData: <T = any>() => T;
-export declare const getSettings: () => ComponentSettings;

package/dist/settings.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSettings = exports.getInitialData = void 0;
-const getInitialData = () => typeof __$$oc_initialData__ !== 'undefined'
-    ? __$$oc_initialData__
-    : {};
-exports.getInitialData = getInitialData;
-const getSettings = () => typeof __$$oc_Settings__ !== 'undefined' ? __$$oc_Settings__ : {};
-exports.getSettings = getSettings;