@teamvelix/velix 5.0.1

package/dist/islands/index.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+
+/**
+ * Velix v5 Islands Architecture
+ *
+ * Islands allow partial hydration — only interactive components are hydrated
+ * on the client, while static content remains as HTML.
+ *
+ * Usage: Add 'use island' at the top of a component file.
+ */
+
+/**
+ * Island wrapper component for server-side rendering
+ */
+declare function Island({ component: Component, props, name, clientPath }: {
+    component: React.ComponentType<any>;
+    props?: any;
+    name: string;
+    clientPath: string;
+}): React.ReactElement<{
+    'data-island': string;
+    'data-island-name': string;
+    'data-island-props': string;
+}, string | React.JSXElementConstructor<any>>;
+/**
+ * Gets all registered islands and clears the registry
+ */
+declare function getRegisteredIslands(): any[];
+/**
+ * Creates an island component wrapper
+ */
+declare function createIsland(Component: React.ComponentType<any>, options?: {
+    name?: string;
+    clientPath?: string;
+}): {
+    (props: any): React.ReactElement<{
+        'data-island': string;
+        'data-island-name': string;
+        'data-island-props': string;
+    }, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+    isIsland: boolean;
+    originalComponent: React.ComponentType<any>;
+};
+/**
+ * Island loading strategies
+ */
+declare const LoadStrategy: {
+    readonly IMMEDIATE: "immediate";
+    readonly VISIBLE: "visible";
+    readonly IDLE: "idle";
+    readonly MEDIA: "media";
+};
+/**
+ * Creates a lazy island that hydrates based on strategy
+ */
+declare function createLazyIsland(Component: React.ComponentType<any>, options?: {
+    name?: string;
+    clientPath?: string;
+    strategy?: string;
+    media?: string | null;
+}): {
+    (props: any): React.ReactElement<{
+        'data-island': string;
+        'data-island-name': any;
+        'data-island-strategy': string;
+        'data-island-media': string | null;
+        'data-island-props': string;
+    }, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+    isIsland: boolean;
+    isLazy: boolean;
+};
+/**
+ * Generates the client-side hydration script for islands
+ */
+declare function generateHydrationScript(islands: any[]): string;
+/**
+ * Generates advanced hydration script with loading strategies
+ */
+declare function generateAdvancedHydrationScript(islands: any[]): string;
+declare const _default: {
+    Island: typeof Island;
+    createIsland: typeof createIsland;
+    createLazyIsland: typeof createLazyIsland;
+    getRegisteredIslands: typeof getRegisteredIslands;
+    generateHydrationScript: typeof generateHydrationScript;
+    generateAdvancedHydrationScript: typeof generateAdvancedHydrationScript;
+    LoadStrategy: {
+        readonly IMMEDIATE: "immediate";
+        readonly VISIBLE: "visible";
+        readonly IDLE: "idle";
+        readonly MEDIA: "media";
+    };
+};
+
+export { Island, LoadStrategy, createIsland, createLazyIsland, _default as default, generateAdvancedHydrationScript, generateHydrationScript, getRegisteredIslands };

package/dist/islands/index.js

@@ -0,0 +1,182 @@
+// islands/index.ts
+import React from "react";
+import crypto from "crypto";
+var islandRegistry = /* @__PURE__ */ new Map();
+function generateIslandId(componentName) {
+  const hash = crypto.randomBytes(4).toString("hex");
+  return `island-${componentName}-${hash}`;
+}
+function Island({ component: Component, props = {}, name, clientPath }) {
+  const islandId = generateIslandId(name);
+  islandRegistry.set(islandId, { id: islandId, name, clientPath, props });
+  return React.createElement("div", {
+    "data-island": islandId,
+    "data-island-name": name,
+    "data-island-props": JSON.stringify(props)
+  }, React.createElement(Component, props));
+}
+function getRegisteredIslands() {
+  const islands = Array.from(islandRegistry.values());
+  islandRegistry.clear();
+  return islands;
+}
+function createIsland(Component, options = {}) {
+  const { name = Component.name || "Island", clientPath } = options;
+  function IslandWrapper(props) {
+    return Island({
+      component: Component,
+      props,
+      name,
+      clientPath: clientPath || `/__velix/islands/${name}.js`
+    });
+  }
+  IslandWrapper.displayName = `Island(${name})`;
+  IslandWrapper.isIsland = true;
+  IslandWrapper.originalComponent = Component;
+  return IslandWrapper;
+}
+var LoadStrategy = {
+  IMMEDIATE: "immediate",
+  VISIBLE: "visible",
+  IDLE: "idle",
+  MEDIA: "media"
+};
+function createLazyIsland(Component, options = {}) {
+  const {
+    name = Component.name || "LazyIsland",
+    clientPath,
+    strategy = LoadStrategy.VISIBLE,
+    media = null
+  } = options;
+  function LazyIslandWrapper(props) {
+    const islandId = generateIslandId(name);
+    islandRegistry.set(islandId, {
+      id: islandId,
+      name,
+      clientPath: clientPath || `/__velix/islands/${name}.js`,
+      props,
+      strategy,
+      media
+    });
+    return React.createElement("div", {
+      "data-island": islandId,
+      "data-island-name": name,
+      "data-island-strategy": strategy,
+      "data-island-media": media,
+      "data-island-props": JSON.stringify(props)
+    });
+  }
+  LazyIslandWrapper.displayName = `LazyIsland(${name})`;
+  LazyIslandWrapper.isIsland = true;
+  LazyIslandWrapper.isLazy = true;
+  return LazyIslandWrapper;
+}
+function generateHydrationScript(islands) {
+  if (!islands.length) return "";
+  const islandData = islands.map((island) => ({
+    id: island.id,
+    name: island.name,
+    path: island.clientPath,
+    props: island.props
+  }));
+  return `
+<script type="module">
+  const islands = ${JSON.stringify(islandData)};
+
+  async function hydrateIslands() {
+    const { hydrateRoot } = await import('/__velix/react-dom-client.js');
+    const React = await import('/__velix/react.js');
+
+    for (const island of islands) {
+      try {
+        const el = document.querySelector(\`[data-island="\${island.id}"]\`);
+        if (!el) continue;
+        const mod = await import(island.path);
+        hydrateRoot(el, React.createElement(mod.default, island.props));
+        el.setAttribute('data-hydrated', 'true');
+      } catch (error) {
+        console.error(\`Failed to hydrate island \${island.name}:\`, error);
+      }
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', hydrateIslands);
+  } else {
+    hydrateIslands();
+  }
+</script>`;
+}
+function generateAdvancedHydrationScript(islands) {
+  if (!islands.length) return "";
+  const islandData = islands.map((island) => ({
+    id: island.id,
+    name: island.name,
+    path: island.clientPath,
+    props: island.props,
+    strategy: island.strategy || LoadStrategy.IMMEDIATE,
+    media: island.media
+  }));
+  return `
+<script type="module">
+  const islands = ${JSON.stringify(islandData)};
+
+  async function hydrateIsland(island) {
+    const el = document.querySelector(\`[data-island="\${island.id}"]\`);
+    if (!el || el.hasAttribute('data-hydrated')) return;
+
+    try {
+      const { hydrateRoot } = await import('/__velix/react-dom-client.js');
+      const React = await import('/__velix/react.js');
+      const mod = await import(island.path);
+      hydrateRoot(el, React.createElement(mod.default, island.props));
+      el.setAttribute('data-hydrated', 'true');
+    } catch (error) {
+      console.error(\`Failed to hydrate island \${island.name}:\`, error);
+    }
+  }
+
+  const visibleObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const id = entry.target.getAttribute('data-island');
+        const island = islands.find(i => i.id === id);
+        if (island) { hydrateIsland(island); visibleObserver.unobserve(entry.target); }
+      }
+    });
+  }, { rootMargin: '50px' });
+
+  function processIslands() {
+    for (const island of islands) {
+      const el = document.querySelector(\`[data-island="\${island.id}"]\`);
+      if (!el) continue;
+      switch (island.strategy) {
+        case 'immediate': hydrateIsland(island); break;
+        case 'visible': visibleObserver.observe(el); break;
+        case 'idle': requestIdleCallback(() => hydrateIsland(island)); break;
+        case 'media':
+          if (island.media && window.matchMedia(island.media).matches) hydrateIsland(island);
+          break;
+      }
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', processIslands);
+  } else {
+    processIslands();
+  }
+</script>`;
+}
+var islands_default = { Island, createIsland, createLazyIsland, getRegisteredIslands, generateHydrationScript, generateAdvancedHydrationScript, LoadStrategy };
+export {
+  Island,
+  LoadStrategy,
+  createIsland,
+  createLazyIsland,
+  islands_default as default,
+  generateAdvancedHydrationScript,
+  generateHydrationScript,
+  getRegisteredIslands
+};
+//# sourceMappingURL=index.js.map

package/dist/islands/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../islands/index.ts"],"sourcesContent":["/**\n * Velix v5 Islands Architecture\n *\n * Islands allow partial hydration — only interactive components are hydrated\n * on the client, while static content remains as HTML.\n *\n * Usage: Add 'use island' at the top of a component file.\n */\n\nimport React from 'react';\nimport crypto from 'crypto';\n\n// Island registry for tracking all islands in a render\nconst islandRegistry = new Map();\n\nfunction generateIslandId(componentName: string): string {\n  const hash = crypto.randomBytes(4).toString('hex');\n  return `island-${componentName}-${hash}`;\n}\n\n/**\n * Island wrapper component for server-side rendering\n */\nexport function Island({ component: Component, props = {}, name, clientPath }: {\n  component: React.ComponentType<any>;\n  props?: any;\n  name: string;\n  clientPath: string;\n}) {\n  const islandId = generateIslandId(name);\n\n  islandRegistry.set(islandId, { id: islandId, name, clientPath, props });\n\n  return React.createElement('div', {\n    'data-island': islandId,\n    'data-island-name': name,\n    'data-island-props': JSON.stringify(props),\n  }, React.createElement(Component, props));\n}\n\n/**\n * Gets all registered islands and clears the registry\n */\nexport function getRegisteredIslands() {\n  const islands = Array.from(islandRegistry.values());\n  islandRegistry.clear();\n  return islands;\n}\n\n/**\n * Creates an island component wrapper\n */\nexport function createIsland(Component: React.ComponentType<any>, options: { name?: string; clientPath?: string } = {}) {\n  const { name = (Component as any).name || 'Island', clientPath } = options;\n\n  function IslandWrapper(props: any) {\n    return Island({\n      component: Component, props, name,\n      clientPath: clientPath || `/__velix/islands/${name}.js`\n    });\n  }\n\n  IslandWrapper.displayName = `Island(${name})`;\n  IslandWrapper.isIsland = true;\n  IslandWrapper.originalComponent = Component;\n  return IslandWrapper;\n}\n\n/**\n * Island loading strategies\n */\nexport const LoadStrategy = {\n  IMMEDIATE: 'immediate',\n  VISIBLE: 'visible',\n  IDLE: 'idle',\n  MEDIA: 'media'\n} as const;\n\n/**\n * Creates a lazy island that hydrates based on strategy\n */\nexport function createLazyIsland(Component: React.ComponentType<any>, options: {\n  name?: string; clientPath?: string; strategy?: string; media?: string | null;\n} = {}) {\n  const {\n    name = (Component as any).name || 'LazyIsland',\n    clientPath,\n    strategy = LoadStrategy.VISIBLE,\n    media = null\n  } = options;\n\n  function LazyIslandWrapper(props: any) {\n    const islandId = generateIslandId(name);\n\n    islandRegistry.set(islandId, {\n      id: islandId, name,\n      clientPath: clientPath || `/__velix/islands/${name}.js`,\n      props, strategy, media\n    });\n\n    return React.createElement('div', {\n      'data-island': islandId,\n      'data-island-name': name,\n      'data-island-strategy': strategy,\n      'data-island-media': media,\n      'data-island-props': JSON.stringify(props),\n    });\n  }\n\n  LazyIslandWrapper.displayName = `LazyIsland(${name})`;\n  LazyIslandWrapper.isIsland = true;\n  LazyIslandWrapper.isLazy = true;\n  return LazyIslandWrapper;\n}\n\n/**\n * Generates the client-side hydration script for islands\n */\nexport function generateHydrationScript(islands: any[]): string {\n  if (!islands.length) return '';\n\n  const islandData = islands.map((island: any) => ({\n    id: island.id, name: island.name,\n    path: island.clientPath, props: island.props\n  }));\n\n  return `\n<script type=\"module\">\n  const islands = ${JSON.stringify(islandData)};\n\n  async function hydrateIslands() {\n    const { hydrateRoot } = await import('/__velix/react-dom-client.js');\n    const React = await import('/__velix/react.js');\n\n    for (const island of islands) {\n      try {\n        const el = document.querySelector(\\`[data-island=\"\\${island.id}\"]\\`);\n        if (!el) continue;\n        const mod = await import(island.path);\n        hydrateRoot(el, React.createElement(mod.default, island.props));\n        el.setAttribute('data-hydrated', 'true');\n      } catch (error) {\n        console.error(\\`Failed to hydrate island \\${island.name}:\\`, error);\n      }\n    }\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', hydrateIslands);\n  } else {\n    hydrateIslands();\n  }\n</script>`;\n}\n\n/**\n * Generates advanced hydration script with loading strategies\n */\nexport function generateAdvancedHydrationScript(islands: any[]): string {\n  if (!islands.length) return '';\n\n  const islandData = islands.map((island: any) => ({\n    id: island.id, name: island.name, path: island.clientPath,\n    props: island.props, strategy: island.strategy || LoadStrategy.IMMEDIATE,\n    media: island.media\n  }));\n\n  return `\n<script type=\"module\">\n  const islands = ${JSON.stringify(islandData)};\n\n  async function hydrateIsland(island) {\n    const el = document.querySelector(\\`[data-island=\"\\${island.id}\"]\\`);\n    if (!el || el.hasAttribute('data-hydrated')) return;\n\n    try {\n      const { hydrateRoot } = await import('/__velix/react-dom-client.js');\n      const React = await import('/__velix/react.js');\n      const mod = await import(island.path);\n      hydrateRoot(el, React.createElement(mod.default, island.props));\n      el.setAttribute('data-hydrated', 'true');\n    } catch (error) {\n      console.error(\\`Failed to hydrate island \\${island.name}:\\`, error);\n    }\n  }\n\n  const visibleObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        const id = entry.target.getAttribute('data-island');\n        const island = islands.find(i => i.id === id);\n        if (island) { hydrateIsland(island); visibleObserver.unobserve(entry.target); }\n      }\n    });\n  }, { rootMargin: '50px' });\n\n  function processIslands() {\n    for (const island of islands) {\n      const el = document.querySelector(\\`[data-island=\"\\${island.id}\"]\\`);\n      if (!el) continue;\n      switch (island.strategy) {\n        case 'immediate': hydrateIsland(island); break;\n        case 'visible': visibleObserver.observe(el); break;\n        case 'idle': requestIdleCallback(() => hydrateIsland(island)); break;\n        case 'media':\n          if (island.media && window.matchMedia(island.media).matches) hydrateIsland(island);\n          break;\n      }\n    }\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', processIslands);\n  } else {\n    processIslands();\n  }\n</script>`;\n}\n\nexport default { Island, createIsland, createLazyIsland, getRegisteredIslands, generateHydrationScript, generateAdvancedHydrationScript, LoadStrategy };\n"],"mappings":"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","names":[]}

package/dist/runtime/start-dev.d.ts

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