@web-widget/solid 3.0.0-beta.2 → 3.0.0-beta.5

package/README.md

@@ -0,0 +1,3 @@
+# @web-widget/solid
+
+Solid adapter.

package/dist/chunk-UU3ACCGF.js

@@ -0,0 +1,111 @@
+// src/components.ts
+import {
+  ErrorBoundary,
+  Suspense,
+  createComponent,
+  createResource,
+  splitProps
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { WebWidgetRenderer } from "@web-widget/web-widget";
+function resolveFallback(fallback) {
+  var _a;
+  if (fallback !== null && typeof fallback === "object" && ("pending" in fallback || "error" in fallback)) {
+    return {
+      pending: fallback.pending,
+      error: (_a = fallback.error) != null ? _a : fallback.pending
+    };
+  }
+  return { pending: fallback, error: fallback };
+}
+function createWidgetAdapter(renderChildren, renderHost, renderInnerHTML) {
+  return (loader, options = {}) => (props) => {
+    var _a, _b;
+    const hasChildren = "children" in props;
+    const [local, data] = splitProps(props, ["children", "slot", "widget"]);
+    const widget = (_a = local.widget) != null ? _a : {};
+    if (hasChildren && options.root !== "shadow") {
+      throw new Error(
+        `Rendering content in a slot requires "options.root = 'shadow'".`
+      );
+    }
+    const fallback = resolveFallback(widget.fallback);
+    const renderOptions = {
+      ...options,
+      clientOnly: widget.clientOnly,
+      id: widget.id,
+      loading: (_b = widget.loading) != null ? _b : options.loading,
+      serverOnly: widget.serverOnly
+    };
+    const renderer = new WebWidgetRenderer(loader, {
+      ...renderOptions,
+      data,
+      root: options.root,
+      slot: local.slot
+    });
+    const widgetProps = {
+      component: renderer.localName,
+      ...renderer.attributes
+    };
+    if (!renderChildren && !renderHost && hasChildren) {
+      return createComponent(Dynamic, {
+        ...widgetProps,
+        get children() {
+          return local.children;
+        }
+      });
+    }
+    if (widget.clientOnly && typeof window === "undefined" && fallback.pending != null) {
+      return createComponent(Dynamic, {
+        ...widgetProps,
+        get children() {
+          return createComponent(Dynamic, {
+            component: renderer.pendingBoundary.localName,
+            "aria-busy": renderer.pendingBoundary.ariaBusy,
+            slot: renderer.pendingBoundary.slot,
+            style: `display: ${renderer.pendingBoundary.display}`,
+            children: fallback.pending
+          });
+        }
+      });
+    }
+    const [html] = createResource(async () => {
+      const children = local.children && renderChildren ? await renderChildren(local.children) : "";
+      return renderer.renderInnerHTMLToString({
+        children
+      }).catch(
+        (error) => error instanceof Error ? error : new Error(String(error))
+      );
+    });
+    const renderServerHost = (children) => renderHost && !hasChildren ? renderHost(renderer.localName, renderer.attributes, children) : children;
+    const content = () => {
+      const result = html();
+      if (result instanceof Error) return fallback.error;
+      if (result === void 0) return result;
+      if (renderInnerHTML) {
+        return renderServerHost(renderInnerHTML(result));
+      }
+      return createComponent(Dynamic, {
+        ...widgetProps,
+        innerHTML: result
+      });
+    };
+    const boundary = createComponent(ErrorBoundary, {
+      fallback: () => fallback.error,
+      get children() {
+        return createComponent(Suspense, {
+          fallback: fallback.pending == null ? fallback.pending : renderServerHost(fallback.pending),
+          get children() {
+            return content();
+          }
+        });
+      }
+    });
+    const hostChildren = hasChildren ? [boundary, local.children] : boundary;
+    return renderHost && hasChildren ? renderHost(renderer.localName, renderer.attributes, hostChildren) : boundary;
+  };
+}
+
+export {
+  createWidgetAdapter
+};

package/dist/components-WgHeqrQg.d.ts

@@ -0,0 +1,14 @@
+import { Component, JSX } from 'solid-js';
+import { WidgetHostProps, WidgetContainerProps, WidgetContainerOptions, ExtractWidgetProps, WidgetModuleLoader } from '@web-widget/schema';
+
+type SolidWidgetContainerProps = WidgetContainerProps<JSX.Element>;
+type SolidWidgetComponent<T = unknown> = Component<T & WidgetHostProps & {
+    children?: JSX.Element;
+    widget?: SolidWidgetContainerProps;
+}>;
+interface SolidWidgetFactory {
+    <M>(loader: () => Promise<M>, options?: WidgetContainerOptions): SolidWidgetComponent<ExtractWidgetProps<M>>;
+    <Props>(loader: WidgetModuleLoader, options?: WidgetContainerOptions): SolidWidgetComponent<Props>;
+}
+
+export type { SolidWidgetFactory as S, SolidWidgetComponent as a, SolidWidgetContainerProps as b };

package/dist/solid.adapter.client.d.ts

@@ -1,8 +1,10 @@
 import * as _web_widget_schema from '@web-widget/schema';
+export { WidgetContainerOptions } from '@web-widget/schema';
+import { S as SolidWidgetFactory } from './components-WgHeqrQg.js';
+export { a as SolidWidgetComponent, b as SolidWidgetContainerProps } from './components-WgHeqrQg.js';
 import { Component } from 'solid-js';
-export { D as DefineWebWidgetOptions, S as SolidWidgetComponent, W as WidgetContainerConfig, c as container } from './components-BfyNPS03.js';
-import '@web-widget/web-widget';
 
+declare const widget: SolidWidgetFactory;
 declare const render: _web_widget_schema.ClientRender<Component<any>, unknown, _web_widget_schema.ClientRenderOptions, void | _web_widget_schema.ClientRenderResult<unknown>>;
 
-export { render };
+export { SolidWidgetFactory, render, widget };

package/dist/solid.adapter.client.js

@@ -1,26 +1,52 @@
 import {
-  container
-} from "./chunk-35N5BM2J.js";
+  createWidgetAdapter
+} from "./chunk-UU3ACCGF.js";
 
 // src/adapter.client.ts
 import { defineClientRender } from "@web-widget/helpers";
-import { createComponent } from "solid-js";
+import { createComponent, sharedConfig } from "solid-js";
 import { hydrate, render as renderComponent } from "solid-js/web";
+var widget = createWidgetAdapter();
+function ensureHydrationRuntime() {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const runtime = globalThis;
+  if (!runtime._$HY) {
+    runtime._$HY = {
+      completed: /* @__PURE__ */ new WeakSet(),
+      events: [],
+      fe: () => void 0,
+      r: {}
+    };
+    return;
+  }
+  (_b = (_a = runtime._$HY).completed) != null ? _b : _a.completed = /* @__PURE__ */ new WeakSet();
+  (_d = (_c = runtime._$HY).events) != null ? _d : _c.events = [];
+  (_f = (_e = runtime._$HY).fe) != null ? _f : _e.fe = () => void 0;
+  (_h = (_g = runtime._$HY).r) != null ? _h : _g.r = {};
+}
 var render = defineClientRender(
-  async (component, data, { container: container2, recovering }) => {
+  async (component, data, { container, id, recovering }) => {
     if (!component) throw new TypeError("Missing component.");
-    if (!container2) throw new Error("Missing container.");
+    if (!container) throw new Error("Missing container.");
     let dispose;
     return {
       mount() {
         const view = () => createComponent(component, data != null ? data : {});
-        const isIsolatedWidget = container2 instanceof Element && container2.hasAttribute("recovering") && container2.hasAttribute("import");
-        const canHydrate = recovering && !isIsolatedWidget && Reflect.has(globalThis, "_$HY");
-        if (canHydrate) {
-          dispose = hydrate(view, container2);
+        const canHydrate = recovering && container.querySelector("[data-hk]") !== null;
+        if (recovering && !canHydrate) {
+          throw new Error(
+            "Cannot hydrate Solid widget: SSR hydration markers are missing."
+          );
+        }
+        if (recovering) {
+          ensureHydrationRuntime();
+          const runtime = globalThis;
+          runtime._$HY.done = false;
+          sharedConfig.done = false;
+          dispose = hydrate(view, container, { renderId: id });
         } else {
-          container2.replaceChildren();
-          dispose = renderComponent(view, container2);
+          container.replaceChildren();
+          dispose = renderComponent(view, container);
         }
       },
       unmount() {
@@ -31,6 +57,6 @@ var render = defineClientRender(
   }
 );
 export {
-  container,
-  render
+  render,
+  widget
 };

package/dist/solid.adapter.server.d.ts

@@ -1,8 +1,10 @@
 import * as _web_widget_schema from '@web-widget/schema';
+export { WidgetContainerOptions } from '@web-widget/schema';
+import { S as SolidWidgetFactory } from './components-WgHeqrQg.js';
+export { a as SolidWidgetComponent, b as SolidWidgetContainerProps } from './components-WgHeqrQg.js';
 import { Component } from 'solid-js';
-export { D as DefineWebWidgetOptions, S as SolidWidgetComponent, W as WidgetContainerConfig, c as container } from './components-BfyNPS03.js';
-import '@web-widget/web-widget';
 
+declare const widget: SolidWidgetFactory;
 declare const render: _web_widget_schema.ServerRender<Component<any>, unknown, _web_widget_schema.ServerRenderOptions, _web_widget_schema.ServerRenderResult>;
 
-export { render };
+export { SolidWidgetFactory, render, widget };

package/dist/solid.adapter.server.js

@@ -1,45 +1,85 @@
 import {
-  container
-} from "./chunk-35N5BM2J.js";
+  createWidgetAdapter
+} from "./chunk-UU3ACCGF.js";
 
 // src/adapter.server.ts
 import { defineServerRender } from "@web-widget/helpers";
 import { createComponent } from "solid-js";
-import { renderToStream, renderToStringAsync } from "solid-js/web";
-var HYDRATION_SCRIPT_FALLBACK = [
-  "<script>",
-  'window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));',
-  '["click","input"].forEach(o=>document.addEventListener(o,o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);',
-  "s&&!e.completed.has(s)&&e.events.push([s,o])}))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});",
-  "</script><!--xs-->"
-].join("");
+import {
+  generateHydrationScript,
+  renderToStream,
+  renderToStringAsync,
+  ssr,
+  ssrElement
+} from "solid-js/web";
+var widget = createWidgetAdapter(
+  void 0,
+  (localName, attributes, children) => ssrElement(localName, attributes, children, true),
+  (html) => ssr(html)
+);
+var HYDRATION_SCRIPT = generateHydrationScript();
 var render = defineServerRender(
-  async (component, data, { progressive }) => {
+  async (component, data, { id, progressive }) => {
     if (!component) throw new TypeError("Missing component.");
     const view = () => createComponent(component, data != null ? data : {});
     if (!progressive) {
-      return HYDRATION_SCRIPT_FALLBACK + await renderToStringAsync(view);
+      return HYDRATION_SCRIPT + await renderToStringAsync(view, { renderId: id });
     }
-    return new ReadableStream({
+    let resolveShell;
+    let rejectShell;
+    const shellReady = new Promise((resolve, reject) => {
+      resolveShell = resolve;
+      rejectShell = reject;
+    });
+    let active = true;
+    const stream = new ReadableStream({
       start(controller) {
         let shellPending = true;
         const writable = {
           write(chunk) {
-            controller.enqueue(
-              shellPending ? HYDRATION_SCRIPT_FALLBACK + chunk : chunk
-            );
+            if (!active) return;
+            const shell = shellPending;
             shellPending = false;
+            controller.enqueue(shell ? HYDRATION_SCRIPT + chunk : chunk);
+            if (shell) resolveShell();
           },
           end() {
+            if (!active) return;
+            active = false;
             controller.close();
+            if (shellPending) resolveShell();
           }
         };
-        renderToStream(view).pipe(writable);
+        try {
+          const streamOptions = {
+            renderId: id,
+            onError(error) {
+              if (!active) return;
+              if (shellPending) {
+                active = false;
+                rejectShell(error);
+                controller.error(error);
+              } else {
+                console.error(error);
+              }
+            }
+          };
+          renderToStream(view, streamOptions).pipe(writable);
+        } catch (error) {
+          active = false;
+          rejectShell(error);
+          controller.error(error);
+        }
+      },
+      cancel() {
+        active = false;
       }
     });
+    await shellReady;
+    return stream;
   }
 );
 export {
-  container,
-  render
+  render,
+  widget
 };

package/dist/solid.transform.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    name: string;
+    extensions: string[];
+    adapter: string;
+};
+
+export { _default as default };

package/dist/solid.transform.js

@@ -0,0 +1,9 @@
+// src/transform.ts
+var transform_default = {
+  name: "solid",
+  extensions: [".tsx", ".jsx"],
+  adapter: "@web-widget/solid/adapter"
+};
+export {
+  transform_default as default
+};

package/package.json

@@ -1,22 +1,33 @@
 {
   "name": "@web-widget/solid",
   "description": "Solid adapter",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.5",
+  "homepage": "https://github.com/web-widget/web-widget#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/web-widget/web-widget.git",
+    "directory": "packages/solid"
+  },
+  "bugs": {
+    "url": "https://github.com/web-widget/web-widget/issues"
+  },
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
   "dependencies": {
-    "@web-widget/schema": "3.0.0-beta.2",
-    "@web-widget/web-widget": "3.0.0-beta.2",
-    "@web-widget/helpers": "3.0.0-beta.2"
+    "@web-widget/helpers": "workspace:*",
+    "@web-widget/schema": "workspace:*",
+    "@web-widget/web-widget": "workspace:*"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"
   },
   "devDependencies": {
-    "solid-js": "^1.9.14",
-    "tsup": "^8.3.4",
-    "typescript": "^5.9.3"
+    "happy-dom": "14.12.3",
+    "solid-js": "catalog:",
+    "tsup": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
   },
   "exports": {
     ".": {
@@ -24,6 +35,11 @@
       "development": "./src/index.ts",
       "default": "./dist/solid.js"
     },
+    "./transform": {
+      "types": "./dist/solid.transform.d.ts",
+      "development": "./src/transform.ts",
+      "default": "./dist/solid.transform.js"
+    },
     "./adapter": {
       "worker": {
         "types": "./dist/solid.adapter.server.d.ts",
@@ -42,15 +58,6 @@
       }
     }
   },
-  "webWidgetAdapter": {
-    "version": "1.0.0",
-    "name": "solid",
-    "extensions": [
-      ".tsx",
-      ".jsx"
-    ],
-    "adapter": "./adapter"
-  },
   "files": [
     "dist"
   ],
@@ -58,6 +65,7 @@
     "build": "pnpm exec tsup",
     "clean:build": "rm -rf dist",
     "clean:node": "rm -rf node_modules",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "test": "vitest run"
   }
-}
+}

package/dist/chunk-35N5BM2J.js

@@ -1,61 +0,0 @@
-// src/components.ts
-import {
-  ErrorBoundary,
-  Suspense,
-  createComponent,
-  createResource,
-  splitProps
-} from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { WebWidgetRenderer } from "@web-widget/web-widget";
-function resolveFallback(fallback) {
-  var _a;
-  if (fallback !== null && typeof fallback === "object" && ("pending" in fallback || "error" in fallback)) {
-    return {
-      pending: fallback.pending,
-      error: (_a = fallback.error) != null ? _a : fallback.pending
-    };
-  }
-  return { pending: fallback, error: fallback };
-}
-function container(loader, options = {}) {
-  return (props) => {
-    var _a, _b, _c, _d;
-    const [local, data] = splitProps(props, ["children", "widget"]);
-    if (local.children) throw new TypeError("Children not supported.");
-    const widget = (_a = local.widget) != null ? _a : {};
-    const fallback = resolveFallback(widget.fallback);
-    const renderStage = widget.serverOnly ? "server" : widget.clientOnly ? "client" : options.renderStage;
-    const renderer = new WebWidgetRenderer(loader, {
-      ...options,
-      children: "",
-      data,
-      loading: (_c = (_b = widget.loading) != null ? _b : options.loading) != null ? _c : "lazy",
-      renderStage,
-      renderTarget: (_d = options.renderTarget) != null ? _d : "light"
-    });
-    const [html] = createResource(() => renderer.renderInnerHTMLToString());
-    const content = () => createComponent(Dynamic, {
-      component: renderer.localName,
-      ...renderer.attributes,
-      get innerHTML() {
-        return html();
-      }
-    });
-    return createComponent(ErrorBoundary, {
-      fallback: () => fallback.error,
-      get children() {
-        return createComponent(Suspense, {
-          fallback: fallback.pending,
-          get children() {
-            return content();
-          }
-        });
-      }
-    });
-  };
-}
-
-export {
-  container
-};

package/dist/components-BfyNPS03.d.ts

@@ -1,22 +0,0 @@
-import { Component, JSX } from 'solid-js';
-import { WebWidgetRendererOptions, Loader } from '@web-widget/web-widget';
-import { ExtractWidgetProps } from '@web-widget/schema';
-
-type DefineWebWidgetOptions = Partial<Pick<WebWidgetRendererOptions, 'base' | 'import' | 'loading' | 'name' | 'renderStage' | 'renderTarget'>>;
-interface WidgetContainerConfig {
-    fallback?: JSX.Element | {
-        pending?: JSX.Element;
-        error?: JSX.Element;
-    };
-    loading?: WebWidgetRendererOptions['loading'];
-    serverOnly?: true;
-    clientOnly?: true;
-}
-type SolidWidgetComponent<T = unknown> = Component<T & {
-    children?: JSX.Element;
-    widget?: WidgetContainerConfig;
-}>;
-declare function container<M>(loader: () => Promise<M>, options?: DefineWebWidgetOptions): SolidWidgetComponent<ExtractWidgetProps<M>>;
-declare function container<Props>(loader: Loader, options?: DefineWebWidgetOptions): SolidWidgetComponent<Props>;
-
-export { type DefineWebWidgetOptions as D, type SolidWidgetComponent as S, type WidgetContainerConfig as W, container as c };