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

Comparing version 0.0.1-dev.11751408120.133721e3 to 0.0.1-dev.11751409298.10e07235

dist/index.js

@@ -1,4 +0,4 @@
-import { Project as N, VariableDeclarationKind as _ } from "ts-morph";
+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()), j = (o) => {
+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);
@@ -11,4 +11,4 @@ return I(`on-${r}`);
 }) => {
-  const u = r || new N({ useInMemoryFileSystem: !0 }), d = `/* eslint-disable */
-`, f = `/**
+  const u = r || new N({ useInMemoryFileSystem: !0 }), f = `/* eslint-disable */
+`, d = `/**
  * This file was automatically generated by the Stencil React Output Target.
@@ -18,3 +18,3 @@ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
 
-`, h = v.join(s || "", "components.ts"), l = u.createSourceFile(h, f + d, {
+`, y = v.join(s || "", "components.ts"), l = u.createSourceFile(y, d + f, {
     overwrite: !0
@@ -30,3 +30,3 @@ });
   return l.organizeImports(), l.formatText(), await l.save(), l;
-}, F = ({
+}, j = ({
   components: o,
@@ -36,5 +36,5 @@ stencilPackageName: r,
   hydrateModule: u,
-  serializeShadowRoot: d
+  serializeShadowRoot: f
 }) => {
-  const f = new N({ useInMemoryFileSystem: !0 }), h = u ? "" : `'use client';
+  const d = new N({ useInMemoryFileSystem: !0 }), y = u ? "" : `'use client';
 
@@ -50,5 +50,5 @@ `, l = `/**
   ].join(`
-`) : "import { createComponent } from '@stencil/react-output-target/runtime';", e = f.createSourceFile(
+`) : "import { createComponent } from '@stencil/react-output-target/runtime';", e = d.createSourceFile(
     "component.ts",
-    `${h}${l}${m}
+    `${y}${l}${m}
 import React from 'react';
@@ -61,3 +61,3 @@ ${i}
     isExported: !0,
-    declarationKind: _.Const,
+    declarationKind: R.Const,
     declarations: [
@@ -67,3 +67,3 @@ {
         type: "SerializeShadowRootOptions",
-        initializer: d ? JSON.stringify(d) : '{ default: "declarative-shadow-dom" }'
+        initializer: f ? JSON.stringify(f) : '{ default: "declarative-shadow-dom" }'
       }
@@ -87,11 +87,11 @@ ]
     });
-    const y = (a.events || []).filter((t) => t.internal === !1), $ = [];
-    for (const t of y)
+    const h = (a.events || []).filter((t) => t.internal === !1), $ = [];
+    for (const t of h)
       if (Object.keys(t.complexType.references).length > 0) {
-        for (const R of Object.keys(t.complexType.references))
-          t.complexType.references[R].location === "global" || e.addImportDeclaration({
+        for (const _ of Object.keys(t.complexType.references))
+          t.complexType.references[_].location === "global" || e.addImportDeclaration({
             moduleSpecifier: r,
             namedImports: [
               {
-                name: R,
+                name: _,
                 isTypeOnly: !0
@@ -111,3 +111,3 @@ }
           originalName: t.name,
-          name: j(t.name),
+          name: F(t.name),
           type: `EventName<${p}<${t.complexType.original}>>`
@@ -118,3 +118,3 @@ });
           originalName: t.name,
-          name: j(t.name),
+          name: F(t.name),
           type: `EventName<CustomEvent<${t.complexType.original}>>`
@@ -142,7 +142,2 @@ });
     hydrateModule: import('${u}') as Promise<HydrateModule>,
-    /**
-     * We need to use a dynamic import to ensure we don't load the client module
-     * during the SSR build.
-     */
-    clientModule: (() => import('./components.js') as unknown as Promise<Record<string, ReactWebComponent<any, any>>>)(),
     serializeShadowRoot,
@@ -158,3 +153,3 @@ elementClass: ${n},
       isExported: !0,
-      declarationKind: _.Const,
+      declarationKind: R.Const,
       // React as never is a hack to by-pass a @types/react issue.
@@ -176,5 +171,5 @@ declarations: [
   esModules: u,
-  customElementsDir: d,
-  excludeComponents: f,
-  project: h,
+  customElementsDir: f,
+  excludeComponents: d,
+  project: y,
   hydrateModule: l,
@@ -184,3 +179,3 @@ excludeServerSideRenderingFor: m,
 }) => {
-  const e = [], a = r.filter((n) => !(n.internal === !0 || f != null && f.includes(n.tagName)));
+  const e = [], a = r.filter((n) => !(n.internal === !0 || d != null && d.includes(n.tagName)));
   if (a.length === 0)
@@ -190,9 +185,9 @@ return [];
   function c(n, p = "components") {
-    const y = v.join(s, `${p}.ts`), $ = F({
+    const h = v.join(s, `${p}.ts`), $ = j({
       components: n,
       stencilPackageName: o,
-      customElementsDir: d
+      customElementsDir: f
     });
-    if (g[y] = $, l) {
-      const T = v.join(s, `${p}.server.ts`), w = F({
+    if (g[h] = $, l) {
+      const T = v.join(s, `${p}.server.ts`), w = j({
         components: n.filter(
@@ -202,3 +197,3 @@ (S) => !m || !m.includes(S.tagName)
         stencilPackageName: o,
-        customElementsDir: d,
+        customElementsDir: f,
         hydrateModule: l,
@@ -213,3 +208,3 @@ serializeShadowRoot: i
       c([p], p.tagName);
-    const n = await U({ components: a, project: h, outDir: s });
+    const n = await U({ components: a, project: y, outDir: s });
     e.push(n);
@@ -220,4 +215,4 @@ } else
     Object.entries(g).map(async ([n, p]) => {
-      const y = h.createSourceFile(n, p, { overwrite: !0 });
-      await y.save(), e.push(y);
+      const h = y.createSourceFile(n, p, { overwrite: !0 });
+      await h.save(), e.push(h);
     })
@@ -230,5 +225,5 @@ ), e;
   excludeComponents: u,
-  customElementsDir: d,
-  hydrateModule: f,
-  excludeServerSideRenderingFor: h,
+  customElementsDir: f,
+  hydrateModule: d,
+  excludeServerSideRenderingFor: y,
   serializeShadowRoot: l
@@ -241,4 +236,4 @@ }) => {
     validate(i) {
-      if (d)
-        m = d;
+      if (f)
+        m = f;
       else {
@@ -257,3 +252,3 @@ const e = (i.outputTargets || []).find(
       }
-      if (f && (i.outputTargets || []).find((a) => a.type === b) == null)
+      if (d && (i.outputTargets || []).find((a) => a.type === b) == null)
         throw new Error(
@@ -284,8 +279,8 @@ `The '${C}' requires '${b}' output target when the 'hydrateModule' option is set. Add { type: '${b}' }, to the outputTargets config.`
         project: n,
-        hydrateModule: f,
-        excludeServerSideRenderingFor: h,
+        hydrateModule: d,
+        excludeServerSideRenderingFor: y,
         serializeShadowRoot: l
       });
       await Promise.all(
-        p.map((y) => e.fs.writeFile(y.getFilePath(), y.getFullText()))
+        p.map((h) => e.fs.writeFile(h.getFilePath(), h.getFullText()))
       ), g.finish(`generate ${C} finished`);
@@ -292,0 +287,0 @@ },

dist/runtime.js

@@ -1,2 +0,2 @@
-import { c as r } from "./create-component-C2u0Q7Hs.js";
+import { createComponent as r } from "./create-component-BH-OlKKj.js";
 export {
@@ -3,0 +3,0 @@ r as createComponent

dist/runtime/ssr.d.ts

@@ -70,5 +70,4 @@ import { EventName, Options, ReactWebComponent } from '@lit/react';
     serializeShadowRoot?: SerializeShadowRootOptions;
-    clientModule: Promise<Record<string, ReactWebComponent<any, any>>>;
 } & Options<I, E> & {
     defineCustomElement: () => void;
 }) => ReactWebComponent<I, E>;

dist/ssr.js

@@ -1,5 +0,5 @@
-import o from "react";
-import H from "next/dynamic";
-import { c as w } from "./create-component-C2u0Q7Hs.js";
-var _ = {
+import i from "react";
+import _ from "next/dynamic";
+import { createComponent as w } from "./create-component-BH-OlKKj.js";
+var H = {
   animationIterationCount: 1,
@@ -62,7 +62,7 @@ aspectRatio: 1,
     );
-  const r = _[e] === 1;
+  const r = H[e] === 1;
   if (typeof t == "string" || t === 0 || r)
     return `${t}`;
-  const i = (typeof n == "string" ? n : n[e]) || v;
-  return `${t}${i}`;
+  const o = (typeof n == "string" ? n : n[e]) || v;
+  return `${t}${o}`;
 }
@@ -75,6 +75,6 @@ function j(e, t) {
   const n = t != null && t.important ? "!important" : "";
-  return Object.entries(e).filter(([r, i]) => M(i)).map(
-    ([r, i]) => `${A(r)}:${U(
+  return Object.entries(e).filter(([r, o]) => M(o)).map(
+    ([r, o]) => `${A(r)}:${U(
       r,
-      i,
+      o,
       t == null ? void 0 : t.unit
@@ -304,10 +304,10 @@ )}${n};`
   for (const [s, a] of Object.entries(n)) {
-    let l = f(a) ? `"${a}"` : typeof a != "function" ? e.serializeProperty(a) : void 0;
-    if (s === "style" && typeof a == "object" && a && (l = `"${D(a)}"`), !l)
+    let c = f(a) ? `"${a}"` : typeof a != "function" ? e.serializeProperty(a) : void 0;
+    if (s === "style" && typeof a == "object" && a && (c = `"${D(a)}"`), !c)
       continue;
     const d = F[s] || e.properties[s] || s;
-    r += ` ${d}=${l}`;
+    r += ` ${d}=${c}`;
   }
-  let i = "";
-  const c = `<${e.tagName}${r} suppressHydrationWarning="true">`, p = console.error;
+  let o = "";
+  const l = `<${e.tagName}${r} suppressHydrationWarning="true">`, p = console.error;
   try {
@@ -317,3 +317,3 @@ process.env.STENCIL_SSR_DEBUG || (console.error = () => {
     const s = await h(t);
-    i = (await import("react-dom/server")).renderToString(s);
+    o = (await import("react-dom/server")).renderToString(s);
   } catch (s) {
@@ -323,3 +323,3 @@ if (process.env.STENCIL_SSR_DEBUG) {
       console.warn(
-        `${W} Failed to serialize light DOM for ${c.slice(0, -1)} />: ${a.stack} - this may impact the hydration of the component`
+        `${W} Failed to serialize light DOM for ${l.slice(0, -1)} />: ${a.stack} - this may impact the hydration of the component`
       );
@@ -330,3 +330,3 @@ }
   }
-  const T = `${c}${i}</${e.tagName}>`, { html: g, styles: S } = await e.renderToString(T, {
+  const T = `${l}${o}</${e.tagName}>`, { html: g, styles: S } = await e.renderToString(T, {
     fullDocument: !1,
@@ -346,9 +346,9 @@ serializeShadowRoot: e.serializeShadowRoot ?? "declarative-shadow-dom",
       if ("name" in a && a.name === e.tagName) {
-        const l = s.props, d = `${e.tagName}`;
+        const c = s.props, d = `${e.tagName}`;
         if (!x) {
-          const { children: u, ...I } = l || {}, $ = m.slice(1, -1).join(`
+          const { children: u, ...I } = c || {}, $ = m.slice(1, -1).join(`
 `).trim().replace(new RegExp("(?<=>)\\s+(?=<)", "g"), "");
-          return /* @__PURE__ */ o.createElement(o.Fragment, null, S.map((y) => /* @__PURE__ */ o.createElement("style", { key: y.id, id: y.id, dangerouslySetInnerHTML: { __html: y.content } })), /* @__PURE__ */ o.createElement(d, { ...I, suppressHydrationWarning: !0, dangerouslySetInnerHTML: { __html: $ } }));
+          return /* @__PURE__ */ i.createElement(i.Fragment, null, S.map((y) => /* @__PURE__ */ i.createElement("style", { key: y.id, id: y.id, dangerouslySetInnerHTML: { __html: y.content } })), /* @__PURE__ */ i.createElement(d, { ...I, suppressHydrationWarning: !0, dangerouslySetInnerHTML: { __html: $ } }));
         }
-        return /* @__PURE__ */ o.createElement(o.Fragment, null, S.map((u) => /* @__PURE__ */ o.createElement("style", { key: u.id, id: u.id, dangerouslySetInnerHTML: { __html: u.content } })), /* @__PURE__ */ o.createElement(d, { ...l, suppressHydrationWarning: !0 }, /* @__PURE__ */ o.createElement(
+        return /* @__PURE__ */ i.createElement(i.Fragment, null, S.map((u) => /* @__PURE__ */ i.createElement("style", { key: u.id, id: u.id, dangerouslySetInnerHTML: { __html: u.content } })), /* @__PURE__ */ i.createElement(d, { ...c, suppressHydrationWarning: !0 }, /* @__PURE__ */ i.createElement(
           "template",
@@ -363,10 +363,4 @@ {
     }
-  }), O = H(
-    async () => {
-      const s = await e.clientModule, a = e.tagName.split("-").map((l) => l.charAt(0).toUpperCase() + l.slice(1)).join("");
-      return () => {
-        const l = s[a];
-        return /* @__PURE__ */ o.createElement(l, { suppressHydrationWarning: !0, ...n }, t);
-      };
-    },
+  }), O = _(
+    async () => (await import("./create-component-BH-OlKKj.js")).createComponent(e),
     {
@@ -376,7 +370,7 @@ /**
        */
-      loading: () => /* @__PURE__ */ o.createElement(L, null),
+      loading: () => /* @__PURE__ */ i.createElement(L, null),
       ssr: !1
     }
   );
-  return /* @__PURE__ */ o.createElement(O, { suppressHydrationWarning: !0 });
+  return /* @__PURE__ */ i.createElement(O, { suppressHydrationWarning: !0 });
 };
@@ -390,13 +384,13 @@ async function h(e) {
         return h(t);
-      if (!o.isValidElement(t))
+      if (!i.isValidElement(t))
         return t;
       const { type: n, props: r } = t;
       try {
-        const i = await k(n, r);
-        if (o.isValidElement(i))
-          return i;
-        const c = r != null && r.children ? await h(r.children) : r == null ? void 0 : r.children;
-        return typeof i == "string" ? o.createElement(i, { ...r, children: c }) : o.cloneElement(t, { ...r, children: c });
-      } catch (i) {
-        return process.env.STENCIL_SSR_DEBUG && console.warn("Failed to resolve component type:", i), t;
+        const o = await k(n, r);
+        if (i.isValidElement(o))
+          return o;
+        const l = r != null && r.children ? await h(r.children) : r == null ? void 0 : r.children;
+        return typeof o == "string" ? i.createElement(o, { ...r, children: l }) : i.cloneElement(t, { ...r, children: l });
+      } catch (o) {
+        return process.env.STENCIL_SSR_DEBUG && console.warn("Failed to resolve component type:", o), t;
       }
@@ -415,4 +409,4 @@ })
     } else if (G(e)) {
-      const r = e._payload, i = r._status === -1 ? await r._result() : r._result, c = i.default || i;
-      n = await k(c, t);
+      const r = e._payload, o = r._status === -1 ? await r._result() : r._result, l = o.default || o;
+      n = await k(l, t);
     } else if (typeof e == "function") {
@@ -422,3 +416,3 @@ let r = e(t);
     }
-    for (; n && typeof n == "object" && !o.isValidElement(n) && !f(n) && "type" in n; )
+    for (; n && typeof n == "object" && !i.isValidElement(n) && !f(n) && "type" in n; )
       n = await k(n.type, t);
@@ -434,7 +428,7 @@ return n;
   serializeShadowRoot: r,
-  ...i
+  ...o
 }) => typeof window < "u" && w ? w({
   tagName: n,
-  ...i
-}) : async (c) => {
+  ...o
+}) : async (l) => {
   const p = await e;
@@ -447,4 +441,4 @@ return B({
     serializeShadowRoot: r,
-    ...i
-  })(c);
+    ...o
+  })(l);
 };
@@ -451,0 +445,0 @@ export {

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "0.0.1-dev.11751408120.133721e3",
+  "version": "0.0.1-dev.11751409298.10e07235",
   "description": "React output target for @stencil/core components.",
@@ -87,3 +87,3 @@ "author": "Ionic Team",
   },
-  "gitHead": "33721e332be823e2ca5887a051a80efc65606e1a"
+  "gitHead": "0e07235b38bb210800f431c4b15a789b1425c1be"
 }

No alert changes

Worsened metrics

Total package byte prevSize

212992

-1.29%

Lines of code

1243

-1.35%

No dependency changes