@astrojs/solid-js - npm Package Compare versions

Comparing version 3.0.3 to 4.0.0

dist/client.js

@@ -0,9 +1,8 @@
+import { Suspense } from "solid-js";
 import { createComponent, hydrate, render } from "solid-js/web";
 var client_default = (element) => (Component, props, slotted, { client }) => {
-  if (!window._$HY) {
-    window._$HY = { events: [], completed: /* @__PURE__ */ new WeakSet(), r: {} };
-  }
   if (!element.hasAttribute("ssr"))
     return;
-  const boostrap = client === "only" ? render : hydrate;
+  const isHydrate = client !== "only";
+  const bootstrap = isHydrate ? hydrate : render;
   let slot;
@@ -36,8 +35,19 @@ let _slots = {};
   const renderId = element.dataset.solidRenderId;
-  const dispose = boostrap(
-    () => createComponent(Component, {
-      ...props,
-      ...slots,
-      children
-    }),
+  const dispose = bootstrap(
+    () => {
+      const inner = () => createComponent(Component, {
+        ...props,
+        ...slots,
+        children
+      });
+      if (isHydrate) {
+        return createComponent(Suspense, {
+          get children() {
+            return inner();
+          }
+        });
+      } else {
+        return inner();
+      }
+    },
     element,
@@ -44,0 +54,0 @@ {

dist/server.d.ts

 import type { RendererContext } from './types.js';
-declare function check(this: RendererContext, Component: any, props: Record<string, any>, children: any): boolean;
-declare function renderToStaticMarkup(this: RendererContext, Component: any, props: Record<string, any>, { default: children, ...slotted }: any, metadata?: undefined | Record<string, any>): {
+declare function check(this: RendererContext, Component: any, props: Record<string, any>, children: any): Promise<boolean>;
+declare function renderToStaticMarkup(this: RendererContext, Component: any, props: Record<string, any>, { default: children, ...slotted }: any, metadata?: undefined | Record<string, any>): Promise<{
     attrs: {
@@ -8,3 +8,3 @@ 'data-solid-render-id': string;
     html: string;
-};
+}>;
 declare const _default: {
@@ -14,3 +14,4 @@ check: typeof check;
     supportsAstroStaticSlot: boolean;
+    renderHydrationScript: () => string;
 };
 export default _default;

dist/server.js

@@ -1,5 +0,13 @@
-import { createComponent, renderToString, ssr } from "solid-js/web";
+import {
+  createComponent,
+  generateHydrationScript,
+  NoHydration,
+  renderToString,
+  renderToStringAsync,
+  ssr,
+  Suspense
+} from "solid-js/web";
 import { getContext, incrementId } from "./context.js";
 const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
-function check(Component, props, children) {
+async function check(Component, props, children) {
   if (typeof Component !== "function")
@@ -9,28 +17,58 @@ return false;
     return false;
-  const { html } = renderToStaticMarkup.call(this, Component, props, children);
+  const { html } = await renderToStaticMarkup.call(this, Component, props, children, {
+    // The purpose of check() is just to validate that this is a Solid component and not
+    // React, etc. We should render in sync mode which should skip Suspense boundaries
+    // or loading resources like external API calls.
+    renderStrategy: "sync"
+  });
   return typeof html === "string";
 }
-function renderToStaticMarkup(Component, props, { default: children, ...slotted }, metadata) {
-  const renderId = metadata?.hydrate ? incrementId(getContext(this.result)) : "";
+async function renderToStaticMarkup(Component, props, { default: children, ...slotted }, metadata) {
+  const ctx = getContext(this.result);
+  const renderId = metadata?.hydrate ? incrementId(ctx) : "";
   const needsHydrate = metadata?.astroStaticSlot ? !!metadata.hydrate : true;
   const tagName = needsHydrate ? "astro-slot" : "astro-static-slot";
-  const html = renderToString(
-    () => {
-      const slots = {};
-      for (const [key, value] of Object.entries(slotted)) {
-        const name = slotName(key);
-        slots[name] = ssr(`<${tagName} name="${name}">${value}</${tagName}>`);
+  const renderStrategy = metadata?.renderStrategy ?? "async";
+  const renderFn = () => {
+    const slots = {};
+    for (const [key, value] of Object.entries(slotted)) {
+      const name = slotName(key);
+      slots[name] = ssr(`<${tagName} name="${name}">${value}</${tagName}>`);
+    }
+    const newProps = {
+      ...props,
+      ...slots,
+      // In Solid SSR mode, `ssr` creates the expected structure for `children`.
+      children: children != null ? ssr(`<${tagName}>${children}</${tagName}>`) : children
+    };
+    if (renderStrategy === "sync") {
+      return createComponent(Component, newProps);
+    } else {
+      if (needsHydrate) {
+        return createComponent(Suspense, {
+          get children() {
+            return createComponent(Component, newProps);
+          }
+        });
+      } else {
+        return createComponent(NoHydration, {
+          get children() {
+            return createComponent(Suspense, {
+              get children() {
+                return createComponent(Component, newProps);
+              }
+            });
+          }
+        });
       }
-      const newProps = {
-        ...props,
-        ...slots,
-        // In Solid SSR mode, `ssr` creates the expected structure for `children`.
-        children: children != null ? ssr(`<${tagName}>${children}</${tagName}>`) : children
-      };
-      return createComponent(Component, newProps);
-    },
-    {
-      renderId
     }
-  );
+  };
+  const componentHtml = renderStrategy === "async" ? await renderToStringAsync(renderFn, {
+    renderId,
+    // New setting since Solid 1.8.4 that fixes an errant hydration event appearing in
+    // server only components. Not available in TypeScript types yet.
+    // https://github.com/solidjs/solid/issues/1931
+    // https://github.com/ryansolid/dom-expressions/commit/e09e255ac725fd59195aa0f3918065d4bd974e6b
+    ...{ noScripts: !needsHydrate }
+  }) : renderToString(renderFn, { renderId });
   return {
@@ -40,3 +78,3 @@ attrs: {
     },
-    html
+    html: componentHtml
   };
@@ -47,3 +85,4 @@ }
   renderToStaticMarkup,
-  supportsAstroStaticSlot: true
+  supportsAstroStaticSlot: true,
+  renderHydrationScript: () => generateHydrationScript()
 };
@@ -50,0 +89,0 @@ export {

package.json

 {
   "name": "@astrojs/solid-js",
-  "version": "3.0.3",
+  "version": "4.0.0",
   "description": "Use Solid components within Astro",
@@ -37,7 +37,7 @@ "type": "module",
     "solid-js": "^1.8.5",
-    "astro": "4.0.8",
+    "astro": "4.1.0",
     "astro-scripts": "0.0.14"
   },
   "peerDependencies": {
-    "solid-js": "^1.4.3"
+    "solid-js": "^1.8.5"
   },
@@ -44,0 +44,0 @@ "engines": {

No alert changes

Improved metrics

Total package byte prevSize

14621

increased by13.35%

Lines of code

264

increased by23.36%

No dependency changes