chayns-api 2.6.0-beta.8 → 2.6.0

package/dist/cjs/constants/hydrationContext.js

@@ -9,6 +9,17 @@ let HydrationContext = exports.HydrationContext = void 0;
 if (!globalThis.window && globalThis._hydrationContext) {
   exports.HydrationContext = HydrationContext = globalThis._hydrationContext;
 } else {
-  exports.HydrationContext = HydrationContext = (0, _react.createContext)({});
+  const emptyReadonly = new Proxy({}, {
+    set() {
+      return true;
+    },
+    defineProperty() {
+      return true;
+    },
+    deleteProperty() {
+      return true;
+    }
+  });
+  exports.HydrationContext = HydrationContext = (0, _react.createContext)(emptyReadonly);
   globalThis._hydrationContext = HydrationContext;
 }

package/dist/cjs/constants/moduleContext.js

@@ -9,6 +9,17 @@ let ModuleContext = exports.ModuleContext = void 0;
 if (!globalThis.window && globalThis._moduleContext) {
   exports.ModuleContext = ModuleContext = globalThis._moduleContext;
 } else {
-  exports.ModuleContext = ModuleContext = (0, _react.createContext)({});
+  const emptyReadonly = new Proxy({}, {
+    set() {
+      return true;
+    },
+    defineProperty() {
+      return true;
+    },
+    deleteProperty() {
+      return true;
+    }
+  });
+  exports.ModuleContext = ModuleContext = (0, _react.createContext)(emptyReadonly);
   globalThis._moduleContext = ModuleContext;
 }

package/dist/cjs/host/module/ModuleHost.js

@@ -17,13 +17,14 @@ const System = ({
 }) => {
   const Component = (0, _react.useMemo)(() => (0, _loadComponent.default)(system.scope, system.module, globalThis.window ? system.url : system.serverUrl, undefined, system.preventSingleton), [system.scope, system.module, system.url, system.serverUrl, system.preventSingleton]);
   if (!globalThis.window) {
-    var _system$scope, _moduleContext$_syste;
+    var _moduleContext$system;
     const moduleContext = (0, _react.useContext)(_moduleContext.ModuleContext);
-    (_moduleContext$_syste = moduleContext[_system$scope = system.scope]) !== null && _moduleContext$_syste !== void 0 ? _moduleContext$_syste : moduleContext[_system$scope] = {
+    const info = (_moduleContext$system = moduleContext[system.scope]) !== null && _moduleContext$system !== void 0 ? _moduleContext$system : {
       url: system.url,
       modules: new Set()
     };
-    moduleContext[system.scope].modules.add(system.module);
+    info.modules.add(system.module);
+    moduleContext[system.scope] = info;
   }
   return _react.default.createElement(_react.default.Suspense, {
     fallback: fallback || ''

package/dist/cjs/util/collectCssChunks.js

@@ -4,26 +4,50 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.collectCssChunks = void 0;
+const remoteInfoCache = {};
+const loadRemoteInfo = async url => {
+  if (!url.endsWith('/mf-manifest.json')) {
+    return null;
+  }
+  if (remoteInfoCache[url]) {
+    return remoteInfoCache[url];
+  }
+  const res = await fetch(url);
+  if (res.status === 200) {
+    const info = await res.json();
+    remoteInfoCache[url] = info;
+    return info;
+  }
+  if (res.status === 404) {
+    remoteInfoCache[url] = null;
+    return null;
+  }
+  throw new Error(`Could not load remote info from ${url}`);
+};
 const collectCssChunks = async modules => {
-  const instance = globalThis.moduleFederationRuntime.getInstance();
-  const p = Object.values(modules).map(module => {
-    const info = instance.snapshotHandler.manifestCache.get(module.url);
+  const p = Object.values(modules).map(async module => {
+    const info = await loadRemoteInfo(module.url);
     const chunks = [];
     info === null || info === void 0 || info.exposes.forEach(exposes => {
-      if (exposes.path && module.modules.has(exposes.path)) {
+      if (module.modules.has(exposes.path)) {
         var _exposes$assets$css, _exposes$assets;
         const {
           sync = [],
           async = []
         } = (_exposes$assets$css = (_exposes$assets = exposes.assets) === null || _exposes$assets === void 0 ? void 0 : _exposes$assets.css) !== null && _exposes$assets$css !== void 0 ? _exposes$assets$css : {};
-        [...sync, ...async].forEach(chunk => {
+        sync.forEach(chunk => {
           const url = new URL(chunk, module.url);
           chunks.push(`<link rel="stylesheet" href="${url}">`);
         });
+        async.forEach(chunk => {
+          const url = new URL(chunk, module.url);
+          chunks.push(`<link rel="preload" href="${url}" as="style" onload="this.rel='stylesheet'">`);
+        });
       }
     });
     return chunks;
   });
-  return p.flat().join('');
+  const r = await Promise.allSettled(p);
+  return r.flatMap(v => v.status === 'fulfilled' ? v.value : []).join('');
 };
 exports.collectCssChunks = collectCssChunks;

package/dist/esm/constants/hydrationContext.js

@@ -3,6 +3,17 @@ export let HydrationContext;
 if (!globalThis.window && globalThis._hydrationContext) {
   HydrationContext = globalThis._hydrationContext;
 } else {
-  HydrationContext = createContext({});
+  const emptyReadonly = new Proxy({}, {
+    set() {
+      return true;
+    },
+    defineProperty() {
+      return true;
+    },
+    deleteProperty() {
+      return true;
+    }
+  });
+  HydrationContext = createContext(emptyReadonly);
   globalThis._hydrationContext = HydrationContext;
 }

package/dist/esm/constants/moduleContext.js

@@ -3,6 +3,17 @@ export let ModuleContext;
 if (!globalThis.window && globalThis._moduleContext) {
   ModuleContext = globalThis._moduleContext;
 } else {
-  ModuleContext = createContext({});
+  const emptyReadonly = new Proxy({}, {
+    set() {
+      return true;
+    },
+    defineProperty() {
+      return true;
+    },
+    deleteProperty() {
+      return true;
+    }
+  });
+  ModuleContext = createContext(emptyReadonly);
   globalThis._moduleContext = ModuleContext;
 }

package/dist/esm/host/module/ModuleHost.js

@@ -9,13 +9,14 @@ const System = ({
 }) => {
   const Component = useMemo(() => loadComponent(system.scope, system.module, globalThis.window ? system.url : system.serverUrl, undefined, system.preventSingleton), [system.scope, system.module, system.url, system.serverUrl, system.preventSingleton]);
   if (!globalThis.window) {
-    var _system$scope, _moduleContext$_syste;
+    var _moduleContext$system;
     const moduleContext = useContext(ModuleContext);
-    (_moduleContext$_syste = moduleContext[_system$scope = system.scope]) !== null && _moduleContext$_syste !== void 0 ? _moduleContext$_syste : moduleContext[_system$scope] = {
+    const info = (_moduleContext$system = moduleContext[system.scope]) !== null && _moduleContext$system !== void 0 ? _moduleContext$system : {
       url: system.url,
       modules: new Set()
     };
-    moduleContext[system.scope].modules.add(system.module);
+    info.modules.add(system.module);
+    moduleContext[system.scope] = info;
   }
   return React.createElement(React.Suspense, {
     fallback: fallback || ''

package/dist/esm/util/collectCssChunks.js

@@ -1,22 +1,46 @@
+const remoteInfoCache = {};
+const loadRemoteInfo = async url => {
+  if (!url.endsWith('/mf-manifest.json')) {
+    return null;
+  }
+  if (remoteInfoCache[url]) {
+    return remoteInfoCache[url];
+  }
+  const res = await fetch(url);
+  if (res.status === 200) {
+    const info = await res.json();
+    remoteInfoCache[url] = info;
+    return info;
+  }
+  if (res.status === 404) {
+    remoteInfoCache[url] = null;
+    return null;
+  }
+  throw new Error(`Could not load remote info from ${url}`);
+};
 export const collectCssChunks = async modules => {
-  const instance = globalThis.moduleFederationRuntime.getInstance();
-  const p = Object.values(modules).map(module => {
-    const info = instance.snapshotHandler.manifestCache.get(module.url);
+  const p = Object.values(modules).map(async module => {
+    const info = await loadRemoteInfo(module.url);
     const chunks = [];
     info === null || info === void 0 || info.exposes.forEach(exposes => {
-      if (exposes.path && module.modules.has(exposes.path)) {
+      if (module.modules.has(exposes.path)) {
         var _exposes$assets$css, _exposes$assets;
         const {
           sync = [],
           async = []
         } = (_exposes$assets$css = (_exposes$assets = exposes.assets) === null || _exposes$assets === void 0 ? void 0 : _exposes$assets.css) !== null && _exposes$assets$css !== void 0 ? _exposes$assets$css : {};
-        [...sync, ...async].forEach(chunk => {
+        sync.forEach(chunk => {
           const url = new URL(chunk, module.url);
           chunks.push(`<link rel="stylesheet" href="${url}">`);
         });
+        async.forEach(chunk => {
+          const url = new URL(chunk, module.url);
+          chunks.push(`<link rel="preload" href="${url}" as="style" onload="this.rel='stylesheet'">`);
+        });
       }
     });
     return chunks;
   });
-  return p.flat().join('');
+  const r = await Promise.allSettled(p);
+  return r.flatMap(v => v.status === 'fulfilled' ? v.value : []).join('');
 };

package/dist/types/util/collectCssChunks.d.ts

@@ -1,2 +1,8 @@
 import { ModuleContextValueType } from '../constants';
+/**
+ * Collects the css chunks from all modules rendered during SSR
+ * @experimental Handling for async chunks is not final and subject to change.
+ * Eventually a parameter for the rendered html might be added to analyze the async chunks
+ * @param modules
+ */
 export declare const collectCssChunks: (modules: ModuleContextValueType) => Promise<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "chayns-api",
-    "version": "2.6.0-beta.8",
+    "version": "2.6.0",
     "description": "new chayns api",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",