@stencil/react-output-target - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/create-component-wrappers.d.ts

@@ -5,3 +5,3 @@ import { ComponentCompilerMeta } from '@stencil/core/internal';
 
-export declare const createComponentWrappers: ({ stencilPackageName, components, outDir, esModules, customElementsDir, excludeComponents, project, hydrateModule, excludeServerSideRenderingFor, serializeShadowRoot, }: {
+export declare const createComponentWrappers: ({ stencilPackageName, components, outDir, esModules, customElementsDir, excludeComponents, project, hydrateModule, clientModule, excludeServerSideRenderingFor, serializeShadowRoot, }: {
     stencilPackageName: string;
@@ -15,4 +15,5 @@ components: ComponentCompilerMeta[];
     hydrateModule?: string;
+    clientModule?: string;
     excludeServerSideRenderingFor?: string[];
     serializeShadowRoot?: RenderToStringOptions["serializeShadowRoot"];
 }) => Promise<SourceFile[]>;

dist/create-stencil-react-components.d.ts

 import { ComponentCompilerMeta } from '@stencil/core/internal';
 import { RenderToStringOptions } from './runtime/ssr.js';
 
-export declare const createStencilReactComponents: ({ components, stencilPackageName, customElementsDir, hydrateModule, serializeShadowRoot, }: {
+export declare const createStencilReactComponents: ({ components, stencilPackageName, customElementsDir, hydrateModule, clientModule, serializeShadowRoot, }: {
     components: ComponentCompilerMeta[];
@@ -9,3 +9,4 @@ stencilPackageName: string;
     hydrateModule?: string;
+    clientModule?: string;
     serializeShadowRoot?: RenderToStringOptions["serializeShadowRoot"];
 }) => string;

dist/index.d.ts

@@ -33,2 +33,7 @@ import { OutputTargetCustom } from '@stencil/core/internal';
     /**
+     * The name of the package that exports all React wrapped Stencil components for client side rendering.
+     * This options is required when `hydrateModule` is set for server side rendering to work.
+     */
+    clientModule?: string;
+    /**
      * Specify the components that should be excluded from server side rendering.
@@ -72,3 +77,3 @@ */
  */
-export declare const reactOutputTarget: ({ outDir, esModules, stencilPackageName, excludeComponents, customElementsDir: customElementsDirOverride, hydrateModule, excludeServerSideRenderingFor, serializeShadowRoot, }: ReactOutputTargetOptions) => ReactOutputTarget;
+export declare const reactOutputTarget: ({ outDir, esModules, stencilPackageName, excludeComponents, customElementsDir: customElementsDirOverride, hydrateModule, clientModule, excludeServerSideRenderingFor, serializeShadowRoot, }: ReactOutputTargetOptions) => ReactOutputTarget;
 export {};

dist/index.js

@@ -1,13 +0,13 @@
-import { Project as N, VariableDeclarationKind as R } from "ts-morph";
-import v from "node:path";
-const O = (o) => o.toLowerCase().split("-").map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(""), I = (o) => o.replace(/-([_a-z])/g, (r, s) => s.toUpperCase()), P = (o) => o.replace(/\/([a-z])/g, (r, s) => s.toUpperCase()), F = (o) => {
-  const r = P(o);
-  return I(`on-${r}`);
-}, U = async ({
+import { Project as _, VariableDeclarationKind as R } from "ts-morph";
+import N from "node:path";
+const I = (o) => o.toLowerCase().split("-").map((a) => a.charAt(0).toUpperCase() + a.slice(1)).join(""), P = (o) => o.replace(/-([_a-z])/g, (a, r) => r.toUpperCase()), U = (o) => o.replace(/\/([a-z])/g, (a, r) => r.toUpperCase()), j = (o) => {
+  const a = U(o);
+  return P(`on-${a}`);
+}, x = async ({
   components: o,
-  project: r,
-  outDir: s
+  project: a,
+  outDir: r
 }) => {
-  const u = r || new N({ useInMemoryFileSystem: !0 }), f = `/* eslint-disable */
-`, d = `/**
+  const m = a || new _({ useInMemoryFileSystem: !0 }), h = `/* eslint-disable */
+`, u = `/**
  * This file was automatically generated by the Stencil React Output Target.
@@ -17,23 +17,24 @@ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
 
-`, $ = v.join(s || "", "components.ts"), l = u.createSourceFile($, d + f, {
+`, g = N.join(r || "", "components.ts"), l = m.createSourceFile(g, u + h, {
     overwrite: !0
   });
-  for (const m of o) {
-    const i = m.tagName, e = O(i), a = m.tagName;
+  for (const T of o) {
+    const d = T.tagName, i = I(d), e = T.tagName;
     l.addExportDeclaration({
-      moduleSpecifier: `./${a}.js`,
-      namedExports: [e]
+      moduleSpecifier: `./${e}.js`,
+      namedExports: [i]
     });
   }
   return l.organizeImports(), l.formatText(), await l.save(), l;
-}, j = ({
+}, O = ({
   components: o,
-  stencilPackageName: r,
-  customElementsDir: s,
-  hydrateModule: u,
-  serializeShadowRoot: f
+  stencilPackageName: a,
+  customElementsDir: r,
+  hydrateModule: m,
+  clientModule: h,
+  serializeShadowRoot: u
 }) => {
-  const d = new N({ useInMemoryFileSystem: !0 }), $ = u ? "" : `'use client';
+  const g = new _({ useInMemoryFileSystem: !0 }), l = m ? "" : `'use client';
 
-`, l = `/**
+`, T = `/**
  * This file was automatically generated by the Stencil React Output Target.
@@ -43,6 +44,12 @@ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
 
-`, m = `/* eslint-disable */
-`, i = u ? "import { createComponent, type SerializeShadowRootOptions, type HydrateModule } from '@stencil/react-output-target/ssr';" : "import { createComponent } from '@stencil/react-output-target/runtime';", e = d.createSourceFile(
+`, d = `/* eslint-disable */
+`, i = m ? [
+    "// @ts-ignore - ignore potential type issues as the project is importing itself",
+    `import * as clientComponents from '${h}';`,
+    "",
+    "import { createComponent, type SerializeShadowRootOptions, type HydrateModule, type ReactWebComponent, type DynamicFunction } from '@stencil/react-output-target/ssr';"
+  ].join(`
+`) : "import { createComponent } from '@stencil/react-output-target/runtime';", e = g.createSourceFile(
     "component.ts",
-    `${$}${l}${m}
+    `${l}${T}${d}
 import React from 'react';
@@ -53,3 +60,3 @@ ${i}
   );
-  u && e.addVariableStatement({
+  m && e.addVariableStatement({
     isExported: !0,
@@ -61,10 +68,10 @@ declarationKind: R.Const,
         type: "SerializeShadowRootOptions",
-        initializer: f ? JSON.stringify(f) : '{ default: "declarative-shadow-dom" }'
+        initializer: u ? JSON.stringify(u) : '{ default: "declarative-shadow-dom" }'
       }
     ]
   });
-  for (const a of o) {
-    const g = a.tagName, c = O(g), n = `${c}Element`, p = `${c}CustomEvent`;
+  for (const s of o) {
+    const f = s.tagName, c = I(f), n = `${c}Element`, p = `${c}CustomEvent`;
     e.addImportDeclaration({
-      moduleSpecifier: `${r}/${s}/${g}.js`,
+      moduleSpecifier: `${a}/${r}/${f}.js`,
       namedImports: [
@@ -81,11 +88,11 @@ {
     });
-    const h = (a.events || []).filter((t) => t.internal === !1), y = [];
-    for (const t of h)
+    const y = (s.events || []).filter((t) => t.internal === !1), E = [];
+    for (const t of y)
       if (Object.keys(t.complexType.references).length > 0) {
-        for (const _ of Object.keys(t.complexType.references))
-          t.complexType.references[_].location === "global" || e.addImportDeclaration({
-            moduleSpecifier: r,
+        for (const F of Object.keys(t.complexType.references))
+          t.complexType.references[F].location === "global" || e.addImportDeclaration({
+            moduleSpecifier: a,
             namedImports: [
               {
-                name: _,
+                name: F,
                 isTypeOnly: !0
@@ -96,3 +103,3 @@ }
         e.addImportDeclaration({
-          moduleSpecifier: r,
+          moduleSpecifier: a,
           namedImports: [
@@ -104,40 +111,35 @@ {
           ]
-        }), y.push({
+        }), E.push({
           originalName: t.name,
-          name: F(t.name),
+          name: j(t.name),
           type: `EventName<${p}<${t.complexType.original}>>`
         });
       } else
-        y.push({
+        E.push({
           originalName: t.name,
-          name: F(t.name),
+          name: j(t.name),
           type: `EventName<CustomEvent<${t.complexType.original}>>`
         });
-    const T = `${c}Events`;
+    const C = `${c}Events`;
     e.addTypeAlias({
       isExported: !0,
-      name: T,
-      type: y.length > 0 ? `{ ${y.map((t) => `${t.name}: ${t.type}`).join(`,
+      name: C,
+      type: E.length > 0 ? `{ ${E.map((t) => `${t.name}: ${t.type}`).join(`,
 `)} }` : "NonNullable<unknown>"
     });
-    const w = `/*@__PURE__*/ createComponent<${n}, ${T}>({
-    tagName: '${g}',
+    const S = `/*@__PURE__*/ createComponent<${n}, ${C}>({
+    tagName: '${f}',
     elementClass: ${n},
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {${y.map((t) => `${t.name}: '${t.originalName}'`).join(`,
-`)}} as ${T},
+    events: {${E.map((t) => `${t.name}: '${t.originalName}'`).join(`,
+`)}} as ${C},
     defineCustomElement: define${c}
-  })`, S = `/*@__PURE__*/ createComponent<${n}, ${T}>({
-    tagName: '${g}',
-    properties: {${a.properties.filter((t) => !!t.attribute).map((t) => `${t.name}: '${t.attribute}'`).join(`,
+  })`, b = `/*@__PURE__*/ createComponent<${n}, ${C}>({
+    tagName: '${f}',
+    properties: {${s.properties.filter((t) => !!t.attribute).map((t) => `${t.name}: '${t.attribute}'`).join(`,
 `)}},
-    hydrateModule: import('${u}') as Promise<HydrateModule>,
+    hydrateModule: import('${m}') as Promise<HydrateModule>,
+    clientModule: clientComponents.${c} as ReactWebComponent<${n}, ${C}>,
     serializeShadowRoot,
-    elementClass: ${n},
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {${y.map((t) => `${t.name}: '${t.originalName}'`).join(`,
-`)}} as ${T},
-    defineCustomElement: define${c}
   })`;
@@ -151,4 +153,4 @@ e.addVariableStatement({
           name: c,
-          type: `StencilReactComponent<${n}, ${T}>`,
-          initializer: u ? S : w
+          type: `StencilReactComponent<${n}, ${C}>`,
+          initializer: m ? b : S
         }
@@ -159,116 +161,126 @@ ]
   return e.organizeImports(), e.formatText(), e.getFullText();
-}, x = async ({
+}, D = async ({
   stencilPackageName: o,
-  components: r,
-  outDir: s,
-  esModules: u,
-  customElementsDir: f,
-  excludeComponents: d,
-  project: $,
+  components: a,
+  outDir: r,
+  esModules: m,
+  customElementsDir: h,
+  excludeComponents: u,
+  project: g,
   hydrateModule: l,
-  excludeServerSideRenderingFor: m,
+  clientModule: T,
+  excludeServerSideRenderingFor: d,
   serializeShadowRoot: i
 }) => {
-  const e = [], a = r.filter((n) => !(n.internal === !0 || d != null && d.includes(n.tagName)));
-  if (a.length === 0)
+  const e = [], s = a.filter((n) => !(n.internal === !0 || u != null && u.includes(n.tagName)));
+  if (s.length === 0)
     return [];
-  const g = {};
+  const f = {};
   function c(n, p = "components") {
-    const h = v.join(s, `${p}.ts`), y = j({
+    const y = N.join(r, `${p}.ts`), E = O({
       components: n,
       stencilPackageName: o,
-      customElementsDir: f
+      customElementsDir: h
     });
-    if (g[h] = y, l) {
-      const T = v.join(s, `${p}.server.ts`), w = j({
+    if (f[y] = E, l) {
+      const C = N.join(r, `${p}.server.ts`), S = O({
         components: n.filter(
-          (S) => !m || !m.includes(S.tagName)
+          (b) => !d || !d.includes(b.tagName)
         ),
         stencilPackageName: o,
-        customElementsDir: f,
+        customElementsDir: h,
         hydrateModule: l,
+        clientModule: T,
         serializeShadowRoot: i
       });
-      g[T] = w;
+      f[C] = S;
     }
   }
-  if (u) {
-    for (const p of a)
+  if (m) {
+    for (const p of s)
       c([p], p.tagName);
-    const n = await U({ components: a, project: $, outDir: s });
+    const n = await x({ components: s, project: g, outDir: r });
     e.push(n);
   } else
-    c(a);
+    c(s);
   return await Promise.all(
-    Object.entries(g).map(async ([n, p]) => {
-      const h = $.createSourceFile(n, p, { overwrite: !0 });
-      await h.save(), e.push(h);
+    Object.entries(f).map(async ([n, p]) => {
+      const y = g.createSourceFile(n, p, { overwrite: !0 });
+      await y.save(), e.push(y);
     })
   ), e;
-}, C = "react-output-target", D = "dist/components", E = "dist-custom-elements", b = "dist-hydrate-script", L = ({
+}, $ = "react-output-target", M = "dist/components", w = "dist-custom-elements", v = "dist-hydrate-script", q = ({
   outDir: o,
-  esModules: r,
-  stencilPackageName: s,
-  excludeComponents: u,
-  customElementsDir: f,
-  hydrateModule: d,
-  excludeServerSideRenderingFor: $,
-  serializeShadowRoot: l
+  esModules: a,
+  stencilPackageName: r,
+  excludeComponents: m,
+  customElementsDir: h,
+  hydrateModule: u,
+  clientModule: g,
+  excludeServerSideRenderingFor: l,
+  serializeShadowRoot: T
 }) => {
-  let m = D;
+  let d = M;
   return {
     type: "custom",
-    name: C,
+    name: $,
     validate(i) {
-      if (f)
-        m = f;
+      if (h)
+        d = h;
       else {
         const e = (i.outputTargets || []).find(
-          (a) => a.type === E
+          (s) => s.type === w
         );
         if (e == null)
           throw new Error(
-            `The '${C}' requires '${E}' output target. Add { type: '${E}' }, to the outputTargets config.`
+            `The '${$}' requires '${w}' output target. Add { type: '${w}' }, to the outputTargets config.`
           );
-        if (e.dir !== void 0 && (m = e.dir), e.externalRuntime !== !1)
+        if (e.dir !== void 0 && (d = e.dir), e.externalRuntime !== !1)
           throw new Error(
-            `The '${C}' requires the '${E}' output target to have 'externalRuntime: false' set in its configuration.`
+            `The '${$}' requires the '${w}' output target to have 'externalRuntime: false' set in its configuration.`
           );
       }
-      if (d && (i.outputTargets || []).find((a) => a.type === b) == null)
-        throw new Error(
-          `The '${C}' requires '${b}' output target when the 'hydrateModule' option is set. Add { type: '${b}' }, to the outputTargets config.`
-        );
+      if (u) {
+        if ((i.outputTargets || []).find((s) => s.type === v) == null)
+          throw new Error(
+            `The '${$}' requires '${v}' output target when the 'hydrateModule' option is set. Add { type: '${v}' }, to the outputTargets config.`
+          );
+        if (g == null)
+          throw new Error(
+            `The '${$}' requires the 'clientModule' option when the 'hydrateModule' option is set. Please provide the clientModule manually to the ${$} output target.`
+          );
+      }
       if (!o)
         throw new Error("The 'outDir' option is required.");
-      if (s === void 0) {
+      if (r === void 0) {
         if (i.sys && i.packageJsonFilePath) {
           const { name: e } = JSON.parse(i.sys.readFileSync(i.packageJsonFilePath, "utf8"));
-          s = e;
+          r = e;
         }
-        if (!s)
+        if (!r)
           throw new Error(
-            `Unable to find the package name in the package.json file: ${i.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${C} output target.`
+            `Unable to find the package name in the package.json file: ${i.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${$} output target.`
           );
       }
     },
-    async generator(i, e, a) {
-      const g = a.createTimeSpan(`generate ${C} started`, !0), c = a.components, n = new N(), p = await x({
+    async generator(i, e, s) {
+      const f = s.createTimeSpan(`generate ${$} started`, !0), c = s.components, n = new _(), p = await D({
         outDir: o,
         components: c,
-        stencilPackageName: s,
-        customElementsDir: m,
-        excludeComponents: u,
-        esModules: r === !0,
+        stencilPackageName: r,
+        customElementsDir: d,
+        excludeComponents: m,
+        esModules: a === !0,
         project: n,
-        hydrateModule: d,
-        excludeServerSideRenderingFor: $,
-        serializeShadowRoot: l
+        hydrateModule: u,
+        clientModule: g,
+        excludeServerSideRenderingFor: l,
+        serializeShadowRoot: T
       });
       await Promise.all(
-        p.map((h) => e.fs.writeFile(h.getFilePath(), h.getFullText()))
-      ), g.finish(`generate ${C} finished`);
+        p.map((y) => e.fs.writeFile(y.getFilePath(), y.getFullText()))
+      ), f.finish(`generate ${$} finished`);
     },
     __internal_getCustomElementsDir() {
-      return m;
+      return d;
     }
@@ -278,4 +290,4 @@ };
 export {
-  L as reactOutputTarget
+  q as reactOutputTarget
 };
 //# sourceMappingURL=index.js.map

dist/runtime.js

@@ -1,2 +0,6 @@
-import { c as r } from "./create-component-C2u0Q7Hs.js";
+import { createComponent as t } from "@lit/react";
+const r = ({
+  defineCustomElement: e,
+  ...o
+}) => (typeof e < "u" && e(), t(o));
 export {
@@ -3,0 +7,0 @@ r as createComponent

dist/runtime/ssr.d.ts

@@ -1,4 +0,6 @@
-import { EventName, Options, ReactWebComponent } from '@lit/react';
+import { EventName, ReactWebComponent } from '@lit/react';
+import { default as React, ReactNode } from 'react';
 
 type EventNames = Record<string, EventName | string>;
+export type { ReactWebComponent, WebComponentProps } from '@lit/react';
 export type SerializeShadowRootOptions = 'declarative-shadow-dom' | 'scoped' | {
@@ -10,2 +12,12 @@ 'declarative-shadow-dom'?: string[];
 /**
+ * Type that emulates Next.js dynamic import functionality without importing Next.js types
+ */
+export type DynamicImport<T = any> = () => Promise<T>;
+export type DynamicOptions = {
+    loading?: () => ReactNode;
+    ssr?: boolean;
+    suspense?: boolean;
+};
+export type DynamicFunction = <T = any>(dynamicImport: DynamicImport<T>, options?: DynamicOptions) => React.ComponentType<any>;
+/**
  * these types are defined by a Stencil hydrate app so we have to copy the minimal types here
@@ -37,4 +49,10 @@ */
 }
+interface HydrateStyle {
+    href: string | null;
+    id: string;
+    content: string;
+}
 type RenderToString = (html: string, options: RenderToStringOptions) => Promise<{
     html: string | null;
+    styles: HydrateStyle[];
 }>;
@@ -45,2 +63,13 @@ export type HydrateModule = {
 };
+interface CreateComponentForServerSideRenderingOptions<I extends HTMLElement = HTMLElement, E extends EventNames = {}> {
+    clientModule: ReactWebComponent<I, E>;
+    tagName: string;
+    properties: Record<string, string>;
+    renderToString: RenderToString;
+    serializeProperty: (value: any) => string;
+    serializeShadowRoot?: SerializeShadowRootOptions;
+}
+type CreateComponentForSSROptions<I extends HTMLElement, E extends EventNames = {}> = Omit<CreateComponentForServerSideRenderingOptions<I, E>, 'renderToString' | 'serializeProperty'> & {
+    hydrateModule: Promise<HydrateModule>;
+};
 /**
@@ -50,10 +79,2 @@ * Defines a custom element and creates a React component for server side rendering.
  */
-export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>({ hydrateModule, properties, tagName, serializeShadowRoot, ...options }: {
-    hydrateModule: Promise<HydrateModule>;
-    properties: Record<string, string>;
-    tagName: string;
-    serializeShadowRoot?: SerializeShadowRootOptions;
-} & Options<I, E> & {
-    defineCustomElement: () => void;
-}) => ReactWebComponent<I, E>;
-export {};
+export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>(options: CreateComponentForSSROptions<I, E>) => ReactWebComponent<I, E>;

dist/ssr.js

@@ -1,4 +0,4 @@
-import l from "react";
-import { c as b } from "./create-component-C2u0Q7Hs.js";
-var O = {
+import o from "react";
+import M from "next/dynamic";
+var _ = {
   animationIterationCount: 1,
@@ -52,7 +52,7 @@ aspectRatio: 1,
   strokeWidth: 1
-}, S = "px", $ = (e) => typeof e == "number" || typeof e == "string";
-function L(e) {
+}, b = "px", $ = (e) => typeof e == "number" || typeof e == "string";
+function H(e) {
   return e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
 }
-function I(e, t, r = S) {
+function A(e, t, n = b) {
   if (typeof t != "string" && typeof t != "number")
@@ -62,9 +62,9 @@ throw new Error(
     );
-  const n = O[e] === 1;
-  if (typeof t == "string" || t === 0 || n)
+  const r = _[e] === 1;
+  if (typeof t == "string" || t === 0 || r)
     return `${t}`;
-  const o = (typeof r == "string" ? r : r[e]) || S;
-  return `${t}${o}`;
+  const i = (typeof n == "string" ? n : n[e]) || b;
+  return `${t}${i}`;
 }
-function A(e, t) {
+function U(e, t) {
   if (typeof e != "object" || e === null)
@@ -74,12 +74,12 @@ throw new TypeError(
     );
-  const r = t != null && t.important ? "!important" : "";
-  return Object.entries(e).filter(([n, o]) => $(o)).map(
-    ([n, o]) => `${L(n)}:${I(
-      n,
-      o,
+  const n = t != null && t.important ? "!important" : "";
+  return Object.entries(e).filter(([r, i]) => $(i)).map(
+    ([r, i]) => `${H(r)}:${A(
+      r,
+      i,
       t == null ? void 0 : t.unit
-    )}${r};`
+    )}${n};`
   ).join("");
 }
-function H(e, t = !1) {
+function j(e, t = !1) {
   if (typeof e != "object" || e === null)
@@ -89,7 +89,7 @@ throw new TypeError(
     );
-  return A(e, typeof t == "boolean" ? {
+  return U(e, typeof t == "boolean" ? {
     important: t
   } : t);
 }
-const j = {
+const D = {
   acceptCharset: "accept-charset",
@@ -300,31 +300,31 @@ accessKey: "accesskey",
   zoomAndPan: "zoomandpan"
-}, M = "[react-output-target]", u = (e) => typeof e == "string" || typeof e == "number" || typeof e == "boolean", g = (e) => e == null, w = (e) => Array.isArray(e), U = (e) => !!e && /^\s*class\s+/.test(e.toString()), _ = (e) => !!e && typeof e == "object" && "_payload" in e, W = (e) => async ({ children: t, ...r } = {}) => {
+}, F = "[react-output-target]", u = (e) => typeof e == "string" || typeof e == "number" || typeof e == "boolean", w = (e) => e == null, v = (e) => Array.isArray(e), N = (e) => !!e && /^\s*class\s+/.test(e.toString()), W = (e) => !!e && typeof e == "object" && "_payload" in e, G = (e) => async ({ children: t, ...n } = {}) => {
   if (!("process" in globalThis) || typeof window < "u")
     throw new Error("`createComponent` can only be run on the server");
-  let n = "";
-  for (const [a, i] of Object.entries(r)) {
-    let s = u(i) ? `"${i}"` : typeof i != "function" ? e.serializeProperty(i) : void 0;
-    if (a === "style" && typeof i == "object" && i && (s = `"${H(i)}"`), !s)
+  let r = "";
+  for (const [s, a] of Object.entries(n)) {
+    let c = u(a) ? `"${a}"` : typeof a != "function" ? e.serializeProperty(a) : void 0;
+    if (s === "style" && typeof a == "object" && a && (c = `"${j(a)}"`), !c)
       continue;
-    const m = j[a] || e.properties[a] || a;
-    n += ` ${m}=${s}`;
+    const d = D[s] || e.properties[s] || s;
+    r += ` ${d}=${c}`;
   }
-  let o = "";
-  const c = `<${e.tagName}${n} suppressHydrationWarning="true">`, p = console.error;
+  let i = "";
+  const l = `<${e.tagName}${r} suppressHydrationWarning="true">`, C = console.error;
   try {
     process.env.STENCIL_SSR_DEBUG || (console.error = () => {
     });
-    const a = await y(t), { renderToString: i } = await import("react-dom/server");
-    o = i(a);
-  } catch (a) {
+    const s = await y(t);
+    i = (await import("react-dom/server")).renderToString(s);
+  } catch (s) {
     if (process.env.STENCIL_SSR_DEBUG) {
-      const i = a instanceof Error ? a : new Error("Unknown error");
+      const a = s instanceof Error ? s : new Error("Unknown error");
       console.warn(
-        `${M} Failed to serialize light DOM for ${c.slice(0, -1)} />: ${i.message} - this may impact the hydration of the component`
+        `${F} Failed to serialize light DOM for ${l.slice(0, -1)} />: ${a.stack} - this may impact the hydration of the component`
       );
     }
   } finally {
-    console.error = p;
+    console.error = C;
   }
-  const v = `${c}${o}</${e.tagName}>`, { html: f } = await e.renderToString(v, {
+  const E = `${l}${i}</${e.tagName}>`, { html: f, styles: k } = await e.renderToString(E, {
     fullDocument: !1,
@@ -336,17 +336,17 @@ serializeShadowRoot: e.serializeShadowRoot ?? "declarative-shadow-dom",
     throw new Error("No HTML returned from renderToString");
-  const d = f.split(`
-`), C = "<!--r.1-->", k = d[1].includes('shadowrootmode="open"');
+  const p = f.split(`
+`), T = "<!--r.1-->", S = p[1].includes('shadowrootmode="open"');
   let x;
-  k && (x = d.slice(2, d.lastIndexOf("  </template>")).join(`
+  S && (x = p.slice(2, p.lastIndexOf("  </template>")).join(`
 `).trim());
-  const { default: T } = await import("html-react-parser"), E = T, z = () => E(f, {
-    transform(a, i) {
-      if ("name" in i && i.name === e.tagName) {
-        const s = a.props, m = `${e.tagName}`;
-        if (!k) {
-          const { children: D, ...P } = s || {}, R = d.slice(1, -1).join(`
+  const { default: R } = await import("html-react-parser"), z = R, P = () => z(f, {
+    transform(s, a) {
+      if ("name" in a && a.name === e.tagName) {
+        const c = s.props, d = `${e.tagName}`;
+        if (!S) {
+          const { children: m, ...O } = c || {}, I = p.slice(1, -1).join(`
 `).trim().replace(new RegExp("(?<=>)\\s+(?=<)", "g"), "");
-          return /* @__PURE__ */ l.createElement(m, { ...P, suppressHydrationWarning: !0, dangerouslySetInnerHTML: { __html: R } });
+          return /* @__PURE__ */ o.createElement(o.Fragment, null, k.map((g) => /* @__PURE__ */ o.createElement("style", { key: g.id, id: g.id, dangerouslySetInnerHTML: { __html: g.content } })), /* @__PURE__ */ o.createElement(d, { ...O, suppressHydrationWarning: !0, dangerouslySetInnerHTML: { __html: I } }));
         }
-        return /* @__PURE__ */ l.createElement(m, { ...s, suppressHydrationWarning: !0 }, /* @__PURE__ */ l.createElement(
+        return /* @__PURE__ */ o.createElement(o.Fragment, null, k.map((m) => /* @__PURE__ */ o.createElement("style", { key: m.id, id: m.id, dangerouslySetInnerHTML: { __html: m.content } })), /* @__PURE__ */ o.createElement(d, { ...c, suppressHydrationWarning: !0 }, /* @__PURE__ */ o.createElement(
           "template",
@@ -356,28 +356,35 @@ {
             suppressHydrationWarning: !0,
-            dangerouslySetInnerHTML: { __html: C + x }
+            dangerouslySetInnerHTML: { __html: T + x }
           }
-        ), t);
+        ), t));
       }
     }
+  }), L = M(async () => e.clientModule, {
+    /**
+     * Render Declarative Shadow DOM component
+     */
+    loading: () => /* @__PURE__ */ o.createElement(P, null),
+    ssr: !1
   });
-  return /* @__PURE__ */ l.createElement(z, null);
+  return /* @__PURE__ */ o.createElement(L, { suppressHydrationWarning: !0, ...n }, t);
 };
 async function y(e) {
-  return u(e) || g(e) ? e : (w(e) || (e = [e]), Promise.all(
+  return u(e) || w(e) ? e : (v(e) || (e = [e]), Promise.all(
     Array.from(e).map(async (t) => {
-      if (u(t) || g(t))
+      if (u(t) || w(t))
         return t;
-      if (w(t))
+      if (v(t))
         return y(t);
-      if (!l.isValidElement(t))
+      if (!o.isValidElement(t))
         return t;
-      const { type: r, props: n } = t;
-      return {
-        ...t,
-        props: {
-          ...n,
-          children: await y(n.children)
-        },
-        type: await h(r, n)
-      };
+      const { type: n, props: r } = t;
+      try {
+        const i = await h(n, r);
+        if (o.isValidElement(i))
+          return i;
+        const l = r != null && r.children ? await y(r.children) : r == null ? void 0 : r.children;
+        return typeof i == "string" ? o.createElement(i, { ...r, children: l }) : o.cloneElement(t, { ...r, children: l });
+      } catch (i) {
+        return process.env.STENCIL_SSR_DEBUG && console.warn("Failed to resolve component type:", i), t;
+      }
     })
@@ -387,35 +394,33 @@ ));
 const h = async (e, t) => {
-  let r = null;
   if (typeof e == "string")
     return e;
-  if (U(e)) {
-    const n = new e(t);
-    r = n.render ? n.render() : n;
-  } else if (_(e)) {
-    const n = e._payload, { deault: o } = n._status === -1 ? await n._result() : n._result;
-    r = await h(o, t);
-  } else typeof e != "object" && (r = await e(t));
-  return !g(r) && !u(r) && typeof r == "object" && r !== null && "type" in r && (r = await h(r.type, t)), r;
-}, G = ({
-  hydrateModule: e,
-  properties: t,
-  tagName: r,
-  serializeShadowRoot: n,
-  ...o
-}) => typeof window < "u" && b ? b({
-  tagName: r,
-  ...o
-}) : async (c) => {
-  const p = await e;
-  return W({
-    tagName: r,
-    properties: t,
-    renderToString: p.renderToString,
-    serializeProperty: p.serializeProperty,
-    serializeShadowRoot: n
-  })(c);
+  try {
+    let n = null;
+    if (N(e)) {
+      const r = new e(t);
+      n = r.render ? await r.render() : r;
+    } else if (W(e)) {
+      const r = e._payload, i = r._status === -1 ? await r._result() : r._result, l = i.default || i;
+      n = await h(l, t);
+    } else if (typeof e == "function") {
+      let r = e(t);
+      r && typeof r == "object" && "then" in r && typeof r.then == "function" && (r = await r), n = r;
+    }
+    for (; n && typeof n == "object" && !o.isValidElement(n) && !u(n) && "type" in n; )
+      n = await h(n.type, t);
+    return n;
+  } catch (n) {
+    return process.env.STENCIL_SSR_DEBUG && console.warn("Error resolving component type:", n), null;
+  }
+}, q = (e) => typeof window < "u" ? e.clientModule : async (t) => {
+  const n = await e.hydrateModule;
+  return G({
+    renderToString: n.renderToString,
+    serializeProperty: n.serializeProperty,
+    ...e
+  })(t);
 };
 export {
-  G as createComponent
+  q as createComponent
 };
 //# sourceMappingURL=ssr.js.map

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "React output target for @stencil/core components.",
@@ -5,0 +5,0 @@ "author": "Ionic Team",

No alert changes

Improved metrics

Total package byte prevSize

213261

5.54%

Lines of code

1236

3.52%

Worsened metrics

Number of package files

26

-13.33%

Number of low supply chain risk alerts

8

100%

No dependency changes