cyberia 3.0.3 → 3.2.5

package/src/server/client-formatted.js

@@ -1,87 +1,139 @@
 /**
- * Module for formatting client-side code
+ * Module for formatting client-side code using esbuild for import rewriting and minification.
  * @module src/server/client-formatted.js
  * @namespace clientFormatted
  */
 
 'use strict';
 
+import * as esbuild from 'esbuild';
+import fs from 'fs-extra';
+import * as path from 'path';
+
+/**
+ * Escapes a string for safe use inside a RegExp.
+ * @param {string} s - The string to escape.
+ * @returns {string} The escaped string.
+ * @memberof clientFormatted
+ */
+const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
 /**
- * Formats a source code string by removing 'html`' and 'css`' tags from template literals.
+ * Formats a source code string by removing 'html`' and 'css`' tagged template prefixes.
+ * Used for SSR VM execution where the full esbuild pipeline is not needed.
  * @param {string} src - The source code string.
  * @returns {string} The formatted source code.
  * @memberof clientFormatted
  */
-const srcFormatted = (src) =>
-  src
-    .replaceAll(' html`', '`')
-    .replaceAll(' css`', '`')
-    .replaceAll('{html`', '{`')
-    .replaceAll('{css`', '{`')
-    .replaceAll('(html`', '(`')
-    .replaceAll('(css`', '(`')
-    .replaceAll('[html`', '[`')
-    .replaceAll('[css`', '[`');
+const srcFormatted = (src) => src.replace(/(?<=[\s({[,;=+!?:^])(html|css)`/g, '`');
 
 /**
  * Converts a JavaScript object into a string that can be embedded in client-side code
  * and parsed back into an object (e.g., 'JSON.parse(`{...}`)').
+ * Escapes backticks and template expression markers for safe template literal embedding.
  * @param {*} data - The data to be stringified.
  * @returns {string} A string representing the code to parse the JSON data.
  * @memberof clientFormatted
  */
-const JSONweb = (data) => 'JSON.parse(`' + JSON.stringify(data) + '`)';
+const JSONweb = (data) => {
+  const json = JSON.stringify(data).replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+  return 'JSON.parse(`' + json + '`)';
+};
 
 /**
- * Formats a component's source code by rewriting its import paths to be absolute for browser consumption.
- * @param {string} src - The source code of the component.
- * @param {string} module - The name of the module/component.
- * @param {Array<object>} dists - An array of distribution objects with import names.
- * @param {string} proxyPath - The proxy path for the application.
- * @param {string} [componentBasePath=''] - The base path for components.
- * @param {string} [baseHost=''] - The base host URL.
- * @returns {string} The formatted source code with updated import paths.
+ * Creates an esbuild plugin that rewrites import paths for browser consumption.
+ * Handles dist library imports, relative imports, and marks all remaining imports as external.
+ * @param {object} options
+ * @param {Array<object>} [options.dists=[]] - Distribution objects with import_name and import_name_build.
+ * @param {string} options.proxyPath - The proxy path for the application.
+ * @param {string} [options.basePath=''] - The base path for the module type (e.g., 'components', 'services').
+ * @param {string} [options.module=''] - The module/component name for relative import resolution.
+ * @param {string} [options.baseHost=''] - The base host URL.
+ * @returns {import('esbuild').Plugin}
  * @memberof clientFormatted
  */
-const componentFormatted = (src, module, dists, proxyPath, componentBasePath = '', baseHost = '') => {
-  dists.map(
-    (dist) =>
-      (src = src.replaceAll(
-        `from '${dist.import_name}'`,
-        `from '${baseHost}${proxyPath !== '/' ? `${proxyPath}` : ''}${dist.import_name_build}'`,
-      )),
-  );
-  return src
-    .replaceAll(
-      `from '../`,
-      `from '${baseHost}${proxyPath !== '/' ? `${proxyPath}/` : '/'}${
-        componentBasePath === '' ? `` : `${componentBasePath}/`
-      }`,
-    )
-    .replaceAll(
-      `from './`,
-      `from '${baseHost}${proxyPath !== '/' ? `${proxyPath}/` : '/'}${
-        componentBasePath === '' ? `` : `${componentBasePath}/`
-      }${module}/`,
-    );
-};
+const importRewritePlugin = ({ dists = [], proxyPath, basePath = '', module = '', baseHost = '' }) => ({
+  name: 'import-rewrite',
+  setup(build) {
+    const prefix = `${baseHost}${proxyPath !== '/' ? `${proxyPath}/` : '/'}`;
+
+    // Rewrite dist library imports (e.g., '@neodrag/vanilla' → '/proxyPath/dist/@neodrag-vanilla/index.js')
+    if (dists) {
+      for (const dist of dists) {
+        if (!dist.import_name) continue;
+        const filter = new RegExp(`^${escapeRegExp(dist.import_name)}$`);
+        build.onResolve({ filter }, () => ({
+          path: `${baseHost}${proxyPath !== '/' ? proxyPath : ''}${dist.import_name_build}`,
+          external: true,
+        }));
+      }
+    }
+
+    // Rewrite relative imports to absolute paths based on proxy path and module
+    build.onResolve({ filter: /^\.\.?\// }, (args) => {
+      const basePrefix = `${prefix}${basePath ? `${basePath}/` : ''}`;
+      if (args.path.startsWith('./')) {
+        return {
+          path: `${basePrefix}${module ? `${module}/` : ''}${args.path.slice(2)}`,
+          external: true,
+        };
+      }
+      if (args.path.startsWith('../')) {
+        return {
+          path: `${basePrefix}${args.path.slice(3)}`,
+          external: true,
+        };
+      }
+    });
+
+    // Mark any remaining imports as external
+    build.onResolve({ filter: /.*/ }, (args) => {
+      if (args.kind === 'entry-point') return;
+      return { path: args.path, external: true };
+    });
+  },
+});
 
 /**
- * Formats a view's source code by rewriting its import paths.
- * @param {string} src - The source code of the view.
- * @param {Array<object>} dists - An array of distribution objects with import names.
- * @param {string} proxyPath - The proxy path for the application.
- * @param {string} [baseHost=''] - The base host URL.
- * @returns {string} The formatted source code with updated import paths.
+ * Transforms a JavaScript source file using esbuild with import path rewriting,
+ * tagged template stripping, and optional minification.
+ * Replaces the previous srcFormatted + componentFormatted/viewFormatted + UglifyJS pipeline.
+ * @param {string} srcPath - Path to the source file.
+ * @param {object} options
+ * @param {Array<object>} [options.dists=[]] - Distribution objects with import names.
+ * @param {string} options.proxyPath - The proxy path for the application.
+ * @param {string} [options.basePath=''] - Base path for the module type (e.g., 'components', 'services').
+ * @param {string} [options.module=''] - Module name for relative import resolution.
+ * @param {string} [options.baseHost=''] - Base host URL.
+ * @param {boolean} [options.minify=false] - Whether to minify the output.
+ * @returns {Promise<string>} The transformed source code.
  * @memberof clientFormatted
  */
-const viewFormatted = (src, dists, proxyPath, baseHost = '') => {
-  dists.map(
-    (dist) =>
-      (src = src.replaceAll(dist.import_name, `${proxyPath !== '/' ? `${proxyPath}` : ''}${dist.import_name_build}`)),
-  );
-  const componentFromFormatted = `from '${baseHost}${proxyPath !== '/' ? `${proxyPath}/` : '/'}`;
-  return src.replaceAll(`from './`, componentFromFormatted).replaceAll(`from '../`, componentFromFormatted);
+const transformClientJs = async (
+  srcPath,
+  { dists = [], proxyPath, basePath = '', module = '', baseHost = '', minify: shouldMinify = false } = {},
+) => {
+  const src = fs.readFileSync(srcPath, 'utf8');
+  const stripped = srcFormatted(src);
+
+  const result = await esbuild.build({
+    stdin: {
+      contents: stripped,
+      loader: 'js',
+      resolveDir: path.dirname(path.resolve(srcPath)),
+      sourcefile: srcPath,
+    },
+    bundle: true,
+    write: false,
+    format: 'esm',
+    platform: 'browser',
+    target: 'esnext',
+    minify: shouldMinify,
+    logLevel: 'warning',
+    plugins: [importRewritePlugin({ dists, proxyPath, basePath, module, baseHost })],
+  });
+
+  return result.outputFiles[0].text;
 };
 
-export { srcFormatted, JSONweb, componentFormatted, viewFormatted };
+export { srcFormatted, JSONweb, transformClientJs };