@ecopages/ecopages-jsx 0.2.0-alpha.21 → 0.2.0-alpha.23

package/CHANGELOG.md

@@ -8,8 +8,10 @@
 
 ### Bug Fixes
 
+- Patched the Ecopages JSX browser runtime bundle so nested SVG templates restore canonical camel-cased SVG tag names during client rendering.
 - Aligned Ecopages JSX peer dependency ranges with the current `@ecopages/jsx` and `@ecopages/radiant` alpha releases.
 - Aligned Radiant SSR and hydration wiring with the public `@ecopages/radiant/server/render-component` and `@ecopages/radiant/client/hydrator` entrypoints so JSX apps install an explicit client hydrator bootstrap instead of relying on implicit side effects.
+- Updated the Ecopages JSX Radiant browser runtime for the `RadiantElement` and `RadiantController` API surface and switched the explicit hydrator bootstrap to `@ecopages/radiant/client/install-hydrator`.
 - Fixed Radiant SSR page inspection to install the light-DOM shim before JSX page modules are imported outside the normal render pass.
 - Restored direct `EcopagesJsxPlugin` construction so the exported class still accepts the public plugin options shape.
 - Fixed intrinsic custom-element asset discovery so Ecopages JSX registers scripts declared with decorator and function-call `customElement(...)` syntax.

package/README.md

@@ -48,9 +48,9 @@ Radiant support is enabled by default. When `radiant: true`, the plugin keeps th
 
 - Ecopages JSX owns page-level JSX SSR and container hydration.
 - Radiant SSR is activated on the server through `@ecopages/radiant/server/render-component`.
-- Radiant host hydration is activated on the client through an explicit head bootstrap that calls `installRadiantHydrator()` from `@ecopages/radiant/client/hydrator` before intrinsic custom-element modules load.
+- Radiant host hydration is activated on the client through an explicit head bootstrap that imports `@ecopages/radiant/client/install-hydrator` before intrinsic custom-element modules load.
 
-That means server-rendered `RadiantComponent` hosts hydrate in place only when both the SSR markers and the explicit client hydrator are present. Without the client hydrator, Radiant intentionally falls back to a fresh client render on first connect.
+That means server-rendered `RadiantElement` hosts hydrate in place only when both the SSR markers and the explicit client hydrator are present. Without the client hydrator, Radiant intentionally falls back to a fresh client render on first connect.
 
 ```ts
 ecopagesJsxPlugin({
@@ -60,7 +60,7 @@ ecopagesJsxPlugin({
 
 Set `radiant: false` when your JSX pages do not need Radiant SSR or the Radiant browser runtime on a given app.
 
-The plugin bootstrap is intentionally explicit rather than relying on unrelated imports to install the Radiant hydrator as a side effect.
+The plugin bootstrap is intentionally explicit rather than depending on custom-element modules to install the Radiant hydrator opportunistically.
 
 ## MDX Support
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/ecopages-jsx",
-  "version": "0.2.0-alpha.21",
+  "version": "0.2.0-alpha.23",
   "description": "JSX integration plugin for Ecopages",
   "keywords": [
     "ecopages",
@@ -21,8 +21,8 @@
     "vfile": "^6.0.3"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.21",
-    "@ecopages/jsx": "^0.3.0-alpha.2",
-    "@ecopages/radiant": "^0.3.0-alpha.2"
+    "@ecopages/core": "0.2.0-alpha.23",
+    "@ecopages/jsx": "0.3.0-alpha.5",
+    "@ecopages/radiant": "0.3.0-alpha.5"
   }
 }

package/src/ecopages-jsx.types.d.ts

@@ -38,8 +38,9 @@ export type EcopagesJsxPluginOptions = Omit<IntegrationPluginConfig, 'name' | 'e
      * When enabled, Ecopages JSX:
      * - imports `@ecopages/radiant/server/render-component` before Radiant SSR
      * - exposes browser-safe Radiant bare specifiers through the runtime import map
-     * - injects an explicit client bootstrap that calls `installRadiantHydrator()`
-     *   before intrinsic custom-element modules load
+     * - injects an explicit client bootstrap that imports
+     *   `@ecopages/radiant/client/install-hydrator` before intrinsic
+     *   custom-element modules load
      *
      * Set to `false` when pages do not use Radiant web components.
      * @default true

package/src/services/jsx-runtime-bundle.service.d.ts

@@ -20,6 +20,7 @@ export declare class JsxRuntimeBundleService {
     private cachedSpecifierMap;
     private cachedJsxEntryModulePath;
     private cachedRadiantEntryModulePath;
+    private cachedRadiantInstallHydratorEntryModulePath;
     constructor(config: JsxRuntimeBundleServiceConfig);
     setRootDir(rootDir: string | undefined): void;
     /**
@@ -54,4 +55,5 @@ export declare class JsxRuntimeBundleService {
     private getRadiantBrowserRuntimeModules;
     private resolvePackageExportModulePath;
     private getOrCreateRadiantEntryModulePath;
+    private getOrCreateRadiantInstallHydratorEntryModulePath;
 }

package/src/services/jsx-runtime-bundle.service.js

@@ -9,9 +9,21 @@ import {
 } from "@ecopages/core/services/asset-processing-service";
 const VENDOR_FILE_NAMES = {
   jsx: "ecopages-jsx-esm.js",
-  radiant: "ecopages-radiant-esm.js"
+  radiant: "ecopages-radiant-esm.js",
+  radiantInstallHydrator: "ecopages-radiant-install-hydrator-esm.js"
 };
 const RADIANT_HYDRATOR_BOOTSTRAP_ATTRIBUTE = "data-ecopages-jsx-radiant-hydrator";
+const JSX_RUNTIME_NAMESPACE_REPAIR_SNIPPET = "function rG(W,G,J){let j=G instanceof Element?G:G?.parentElement,U=j?.namespaceURI??K9,$=j?.localName,X=W.firstElementChild;if(!X)return;let F=J??X.localName,Z=O9(U,$,F);if(X.namespaceURI===Z&&X.localName===F)return;W.replaceChild(tG(X,Z,F),X)}function tG(W,G,J){let j=document.createElementNS(G,J);for(let U of Array.from(W.attributes)){if(U.namespaceURI){j.setAttributeNS(U.namespaceURI,U.name,U.value);continue}n(j,U.name,U.value)}return j.append(...W.childNodes),j}";
+const JSX_RUNTIME_NAMESPACE_REPAIR_PATCH = [
+  "const eopHtmlNamespace='http://www.w3.org/1999/xhtml',eopSvgNamespace='http://www.w3.org/2000/svg',eopCanonicalSvgLocalNames={altglyph:'altGlyph',altglyphdef:'altGlyphDef',altglyphitem:'altGlyphItem',animatemotion:'animateMotion',animatetransform:'animateTransform',clippath:'clipPath',feblend:'feBlend',fecolormatrix:'feColorMatrix',fecomponenttransfer:'feComponentTransfer',fecomposite:'feComposite',feconvolvematrix:'feConvolveMatrix',fediffuselighting:'feDiffuseLighting',fedisplacementmap:'feDisplacementMap',fedistantlight:'feDistantLight',fedropshadow:'feDropShadow',feflood:'feFlood',fefunca:'feFuncA',fefuncb:'feFuncB',fefuncg:'feFuncG',fefuncr:'feFuncR',fegaussianblur:'feGaussianBlur',feimage:'feImage',femerge:'feMerge',femergenode:'feMergeNode',femorphology:'feMorphology',feoffset:'feOffset',fepointlight:'fePointLight',fespecularlighting:'feSpecularLighting',fespotlight:'feSpotLight',fetile:'feTile',feturbulence:'feTurbulence',foreignobject:'foreignObject',glyphref:'glyphRef',lineargradient:'linearGradient',radialgradient:'radialGradient',textpath:'textPath'};",
+  "function eopGetCanonicalSvgLocalName(W){return eopCanonicalSvgLocalNames[W]??W}",
+  "function eopIsSvgNamespace(W){return W===eopSvgNamespace}",
+  "function rG(W,G,J){let j=G instanceof Element?G:G?.parentElement,U=j?.namespaceURI??K9,$=j?.localName;eopRepairNamespaceFragment(W,U??eopHtmlNamespace,$,J)}",
+  "function eopRepairNamespaceFragment(W,G,J,j){let U=W.firstElementChild;if(!U)return;let $=j??U.localName,X=O9(G,J,$),F=eopIsSvgNamespace(X)?eopGetCanonicalSvgLocalName($):$;eopRepairNamespaceElement(W,U,X,F)}",
+  "function eopRepairNamespaceElement(W,G,J,j){let U=G;if(G.namespaceURI!==J||G.localName!==j)U=tG(G,J,j),W.replaceChild(U,G);eopRepairNamespaceChildren(U,J,j)}",
+  "function eopRepairNamespaceChildren(W,G,J){for(let j of Array.from(W.children)){let U=O9(G,J,j.localName),$=eopIsSvgNamespace(U)?eopGetCanonicalSvgLocalName(j.localName):j.localName,X=j;if(j.namespaceURI!==U||j.localName!==$)X=tG(j,U,$),W.replaceChild(X,j);eopRepairNamespaceChildren(X,U,$)}}",
+  "function tG(W,G,J){let j=document.createElementNS(G,eopIsSvgNamespace(G)?eopGetCanonicalSvgLocalName(J):J);for(let U of Array.from(W.attributes)){if(U.namespaceURI){j.setAttributeNS(U.namespaceURI,U.name,U.value);continue}n(j,U.name,U.value)}return j.append(...W.childNodes),j}"
+].join("");
 function getNamedExportNamesFromModuleSource(source) {
   const exportNames = /* @__PURE__ */ new Set();
   for (const match of source.matchAll(/export\s*\{([^}]+)\}/g)) {
@@ -39,13 +51,33 @@ function isBrowserRuntimeRadiantSpecifier(exportKey) {
   if (exportKey === "." || exportKey.startsWith("./context/")) {
     return true;
   }
+  if (exportKey === "./controller-registry") {
+    return true;
+  }
   if (exportKey === "./client/hydrator") {
     return true;
   }
+  if (exportKey === "./client/install-hydrator") {
+    return true;
+  }
   if (exportKey.startsWith("./decorators/") || exportKey.startsWith("./helpers/")) {
     return true;
   }
-  return exportKey === "./core/radiant-component" || exportKey === "./core/radiant-element";
+  return exportKey === "./core/radiant-controller" || exportKey === "./core/radiant-element";
+}
+function replaceExactOnce(source, search, replacement, label) {
+  if (!source.includes(search)) {
+    throw new Error(`Could not find ${label} in @ecopages/jsx browser runtime source`);
+  }
+  return source.replace(search, replacement);
+}
+function createPatchedJsxBrowserRuntimeSource(source) {
+  return replaceExactOnce(
+    source,
+    JSX_RUNTIME_NAMESPACE_REPAIR_SNIPPET,
+    JSX_RUNTIME_NAMESPACE_REPAIR_PATCH,
+    "SVG namespace repair snippet"
+  );
 }
 function findPackageManifestPath(packageName) {
   let currentDir = path.dirname(new URL(import.meta.url).pathname);
@@ -67,6 +99,7 @@ class JsxRuntimeBundleService {
   cachedSpecifierMap;
   cachedJsxEntryModulePath;
   cachedRadiantEntryModulePath;
+  cachedRadiantInstallHydratorEntryModulePath;
   constructor(config) {
     this.config = config;
   }
@@ -124,11 +157,17 @@ class JsxRuntimeBundleService {
     );
     if (this.config.radiant) {
       const radiantEntryModulePath = await this.getOrCreateRadiantEntryModulePath();
+      const radiantInstallHydratorEntryModulePath = await this.getOrCreateRadiantInstallHydratorEntryModulePath();
       deps.push(
         createBrowserRuntimeScriptAsset({
           importPath: radiantEntryModulePath,
           name: "ecopages-radiant-esm",
           fileName: VENDOR_FILE_NAMES.radiant
+        }),
+        createBrowserRuntimeScriptAsset({
+          importPath: radiantInstallHydratorEntryModulePath,
+          name: "ecopages-radiant-install-hydrator-esm",
+          fileName: VENDOR_FILE_NAMES.radiantInstallHydrator
         })
       );
     }
@@ -146,10 +185,7 @@ class JsxRuntimeBundleService {
     });
   }
   createRadiantHydratorBootstrapSource() {
-    return [
-      "import { installRadiantHydrator } from '@ecopages/radiant/client/hydrator';",
-      "installRadiantHydrator();"
-    ].join("\n");
+    return "import '@ecopages/radiant/client/install-hydrator';";
   }
   getArtifactsDir() {
     const rootDir = this.config.rootDir ?? process.cwd();
@@ -172,6 +208,9 @@ class JsxRuntimeBundleService {
     };
     if (this.config.radiant) {
       const radiantVendorUrl = buildBrowserRuntimeAssetUrl(VENDOR_FILE_NAMES.radiant);
+      const radiantInstallHydratorVendorUrl = buildBrowserRuntimeAssetUrl(
+        VENDOR_FILE_NAMES.radiantInstallHydrator
+      );
       const radiantPkg = JSON.parse(
         readFileSync(findPackageManifestPath("@ecopages/radiant"), "utf8")
       );
@@ -180,7 +219,7 @@ class JsxRuntimeBundleService {
           continue;
         }
         const specifier = key === "." ? "@ecopages/radiant" : `@ecopages/radiant${key.slice(1)}`;
-        specifierMap[specifier] = radiantVendorUrl;
+        specifierMap[specifier] = key === "./client/install-hydrator" ? radiantInstallHydratorVendorUrl : radiantVendorUrl;
       }
     }
     this.cachedSpecifierMap = specifierMap;
@@ -200,9 +239,9 @@ class JsxRuntimeBundleService {
       ".",
       jsxPkg.exports?.["."]
     );
-    const entryImportPath = this.getEntryImportPath(artifactsDir, jsxModulePath);
+    const patchedRuntimeSource = createPatchedJsxBrowserRuntimeSource(readFileSync(jsxModulePath, "utf8"));
     mkdirSync(artifactsDir, { recursive: true });
-    writeFileSync(filePath, [`export * from '${entryImportPath}';`].join("\n"), "utf8");
+    writeFileSync(filePath, patchedRuntimeSource, "utf8");
     this.cachedJsxEntryModulePath = filePath;
     return filePath;
   }
@@ -255,6 +294,31 @@ class JsxRuntimeBundleService {
     this.cachedRadiantEntryModulePath = filePath;
     return filePath;
   }
+  async getOrCreateRadiantInstallHydratorEntryModulePath() {
+    if (this.cachedRadiantInstallHydratorEntryModulePath) {
+      return this.cachedRadiantInstallHydratorEntryModulePath;
+    }
+    const artifactsDir = this.getArtifactsDir();
+    const filePath = path.join(artifactsDir, "ecopages-radiant-install-hydrator-esm-entry.mjs");
+    const manifestPath = findPackageManifestPath("@ecopages/radiant");
+    const packageDir = path.dirname(realpathSync(manifestPath));
+    const radiantPkg = JSON.parse(readFileSync(manifestPath, "utf8"));
+    const modulePath = this.resolvePackageExportModulePath(
+      packageDir,
+      "./client/install-hydrator",
+      radiantPkg.exports?.["./client/install-hydrator"]
+    );
+    mkdirSync(artifactsDir, { recursive: true });
+    writeFileSync(
+      filePath,
+      `import '${this.getEntryImportPath(artifactsDir, modulePath)}';
+export {};
+`,
+      "utf8"
+    );
+    this.cachedRadiantInstallHydratorEntryModulePath = filePath;
+    return filePath;
+  }
 }
 export {
   JsxRuntimeBundleService,