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

Comparing version 0.0.1-dev.11716386285.1a6265fd to 0.0.1-dev.11720570072.1dfe2761

dist/react-output-target.js

@@ -1,14 +0,15 @@
-import { Project as b, VariableDeclarationKind as w } from "ts-morph";
-const S = (a) => a.toLowerCase().split("-").map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(""), I = (a) => a.replace(/-([a-z])/g, (r, i) => i.toUpperCase()), v = (a) => I(`on-${a}`), C = ({
-  components: a,
-  stencilPackageName: r,
+import { Project as F, VariableDeclarationKind as R } from "ts-morph";
+const N = (o) => o.toLowerCase().split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(""), x = (o) => o.replace(/-([a-z])/g, (s, i) => i.toUpperCase()), v = (o) => x(`on-${o}`), b = ({
+  components: o,
+  stencilPackageName: s,
   customElementsDir: i,
-  defaultExport: f = !1,
-  useClient: d = !1
+  defaultExport: d = !1,
+  useClient: g = !1,
+  hydrateModule: u
 }) => {
-  const u = new b({ useInMemoryFileSystem: !0 }), o = d ? `'use client';
+  const f = new F({ useInMemoryFileSystem: !0 }), a = g ? `'use client';
 
-` : "", t = u.createSourceFile(
+` : "", e = f.createSourceFile(
     "component.ts",
-    `${o}/**
+    `${a}/**
  * This file was automatically generated by the Stencil React Output Target.
@@ -25,6 +26,13 @@ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
   );
-  for (const s of a) {
-    const m = s.tagName, n = S(m), p = `${n}Element`, y = `${n}CustomEvent`;
-    t.addImportDeclaration({
-      moduleSpecifier: `${r}/${i}/${m}.js`,
+  u && (e.addImportDeclaration({
+    moduleSpecifier: u,
+    namedImports: ["renderToString"]
+  }), e.addImportDeclaration({
+    moduleSpecifier: "@stencil/react-output-target/ssr",
+    namedImports: ["createComponentForServerSideRendering"]
+  }));
+  for (const r of o) {
+    const l = r.tagName, n = N(l), p = `${n}Element`, T = `${n}CustomEvent`;
+    e.addImportDeclaration({
+      moduleSpecifier: `${s}/${i}/${l}.js`,
       namedImports: [
@@ -41,11 +49,11 @@ {
     });
-    const N = (s.events || []).filter((e) => e.internal === !1), g = [];
-    for (const e of N)
-      if (Object.keys(e.complexType.references).length > 0) {
-        for (const h of Object.keys(e.complexType.references))
-          e.complexType.references[h].location === "global" || t.addImportDeclaration({
-            moduleSpecifier: r,
+    const w = (r.events || []).filter((t) => t.internal === !1), $ = [];
+    for (const t of w)
+      if (Object.keys(t.complexType.references).length > 0) {
+        for (const S of Object.keys(t.complexType.references))
+          t.complexType.references[S].location === "global" || e.addImportDeclaration({
+            moduleSpecifier: s,
             namedImports: [
               {
-                name: h,
+                name: S,
                 isTypeOnly: !0
@@ -55,29 +63,39 @@ }
           });
-        t.addImportDeclaration({
-          moduleSpecifier: r,
+        e.addImportDeclaration({
+          moduleSpecifier: s,
           namedImports: [
             {
-              name: y,
+              name: T,
               isTypeOnly: !0
             }
           ]
-        }), g.push({
-          originalName: e.name,
-          name: v(e.name),
-          type: `EventName<${y}<${e.complexType.original}>>`
+        }), $.push({
+          originalName: t.name,
+          name: v(t.name),
+          type: `EventName<${T}<${t.complexType.original}>>`
         });
       } else
-        g.push({
-          originalName: e.name,
-          name: v(e.name),
-          type: `EventName<CustomEvent<${e.complexType.original}>>`
+        $.push({
+          originalName: t.name,
+          name: v(t.name),
+          type: `EventName<CustomEvent<${t.complexType.original}>>`
         });
-    const E = `${n}Events`;
-    t.addTypeAlias({
-      name: E,
-      type: g.length > 0 ? `{ ${g.map((e) => `${e.name}: ${e.type}`).join(`,
+    const y = `${n}Events`;
+    e.addTypeAlias({
+      name: y,
+      type: $.length > 0 ? `{ ${$.map((t) => `${t.name}: ${t.type}`).join(`,
 `)} }` : "NonNullable<unknown>"
     });
-    const F = t.addVariableStatement({
-      declarationKind: w.Const,
+    const h = `/*@__PURE__*/ createComponent<${p}, ${y}>({
+    tagName: '${l}',
+    elementClass: ${p},
+    react: React,
+    events: {${$.map((t) => `${t.name}: '${t.originalName}'`).join(`,
+`)}} as ${y},
+    defineCustomElement: define${n}
+  })`, I = `/*@__PURE__*/ createComponentForServerSideRendering<${p}, ${y}>({
+    tagName: '${l}',
+    renderToString,
+  })`, _ = e.addVariableStatement({
+      declarationKind: R.Const,
       // React as never is a hack to by-pass a @types/react issue.
@@ -87,76 +105,75 @@ declarations: [
           name: n,
-          initializer: `/*@__PURE__*/ createComponent<${p}, ${E}>({
-          tagName: '${m}',
-          elementClass: ${p},
-          react: React,
-          events: { ${g.map((e) => `${e.name}: '${e.originalName}'`).join(`,
-`)}} as ${E},
-          defineCustomElement: define${n}
-        })`
+          initializer: u ? `typeof window !== 'undefined'
+              ? ${h}
+              : ${I}` : h
         }
       ]
     });
-    f ? t.addExportAssignment({
+    d ? e.addExportAssignment({
       isExportEquals: !1,
       expression: n
-    }) : F.setIsExported(!0);
+    }) : _.setIsExported(!0);
   }
-  return t.organizeImports(), t.formatText(), t.getFullText();
-}, _ = async ({
-  stencilPackageName: a,
-  components: r,
+  return e.organizeImports(), e.formatText(), e.getFullText();
+}, D = async ({
+  stencilPackageName: o,
+  components: s,
   outDir: i,
-  customElementsDir: f,
-  esModules: d,
+  customElementsDir: d,
+  esModules: g,
   experimentalUseClient: u,
-  excludeComponents: o,
-  project: l
+  excludeComponents: f,
+  project: a,
+  hydrateModule: m
 }) => {
-  const c = [], t = r.filter((s) => !(s.internal === !0 || o != null && o.includes(s.tagName)));
-  if (t.length === 0)
+  const c = [], e = s.filter((r) => !(r.internal === !0 || f != null && f.includes(r.tagName)));
+  if (e.length === 0)
     return [];
-  if (d === !0)
-    for (const s of t) {
-      const m = S(s.tagName), n = `${i}/${m}.ts`, p = C({
-        components: [s],
-        stencilPackageName: a,
-        customElementsDir: f,
+  if (g === !0)
+    for (const r of e) {
+      const l = N(r.tagName), n = `${i}/${l}.ts`, p = b({
+        components: [r],
+        stencilPackageName: o,
+        customElementsDir: d,
         defaultExport: !0,
-        useClient: u
-      }), y = l.createSourceFile(n, p, { overwrite: !0 });
-      c.push(y);
+        useClient: u,
+        hydrateModule: m
+      }), T = a.createSourceFile(n, p, { overwrite: !0 });
+      c.push(T);
     }
   else {
-    const s = `${i}/components.ts`, m = C({
-      components: t,
-      stencilPackageName: a,
-      customElementsDir: f,
+    const r = `${i}/components.ts`, l = b({
+      components: e,
+      stencilPackageName: o,
+      customElementsDir: d,
       defaultExport: !1,
-      useClient: u
-    }), n = l.createSourceFile(s, m, { overwrite: !0 });
+      useClient: u,
+      hydrateModule: m
+    }), n = a.createSourceFile(r, l, { overwrite: !0 });
     await n.save(), c.push(n);
   }
   return c;
-}, $ = "react-output-target", x = "components", T = "dist-custom-elements", R = ({
-  outDir: a,
-  esModules: r,
+}, E = "react-output-target", O = "components", C = "dist-custom-elements", k = ({
+  outDir: o,
+  esModules: s,
   stencilPackageName: i,
-  experimentalUseClient: f,
-  excludeComponents: d
+  experimentalUseClient: d,
+  excludeComponents: g,
+  hydrateModule: u
 }) => {
-  let u = x;
+  let f = O;
   return {
     type: "custom",
-    name: $,
-    validate(o) {
-      const l = (o.outputTargets || []).find(
-        (c) => c.type === T
+    name: E,
+    validate(a) {
+      const m = (a.outputTargets || []).find(
+        (c) => c.type === C
       );
-      if (l == null)
+      if (m == null)
         throw new Error(
-          `The '${$}' requires '${T}' output target. Add { type: '${T}' }, to the outputTargets config.`
+          `The '${E}' requires '${C}' output target. Add { type: '${C}' }, to the outputTargets config.`
         );
-      if (l.dir !== void 0 && (u = l.dir), i === void 0) {
-        if (o.sys && o.packageJsonFilePath) {
-          const { name: c } = JSON.parse(o.sys.readFileSync(o.packageJsonFilePath, "utf8"));
+      if (m.dir !== void 0 && (f = m.dir), i === void 0) {
+        if (a.sys && a.packageJsonFilePath) {
+          const { name: c } = JSON.parse(a.sys.readFileSync(a.packageJsonFilePath, "utf8"));
           i = c;
@@ -166,20 +183,21 @@ }
           throw new Error(
-            `Unable to find the package name in the package.json file: ${o.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${$} output target.`
+            `Unable to find the package name in the package.json file: ${a.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${E} output target.`
           );
       }
     },
-    async generator(o, l, c) {
-      const t = c.createTimeSpan(`generate ${$} started`, !0), s = c.components, m = new b(), n = await _({
-        outDir: a,
-        components: s,
+    async generator(a, m, c) {
+      const e = c.createTimeSpan(`generate ${E} started`, !0), r = c.components, l = new F(), n = await D({
+        outDir: o,
+        components: r,
         stencilPackageName: i,
-        customElementsDir: u,
-        esModules: r === !0,
-        experimentalUseClient: f === !0,
-        excludeComponents: d,
-        project: m
+        customElementsDir: f,
+        esModules: s === !0,
+        experimentalUseClient: d === !0,
+        excludeComponents: g,
+        project: l,
+        hydrateModule: u
       });
       await Promise.all(
-        n.map((p) => l.fs.writeFile(p.getFilePath(), p.getFullText()))
-      ), t.finish(`generate ${$} finished`);
+        n.map((p) => m.fs.writeFile(p.getFilePath(), p.getFullText()))
+      ), e.finish(`generate ${E} finished`);
     }
@@ -189,3 +207,3 @@ };
 export {
-  R as reactOutputTarget
+  k as reactOutputTarget
 };

dist/react-output-target/create-component-wrappers.d.ts

 import type { ComponentCompilerMeta } from '@stencil/core/internal';
 import { Project, SourceFile } from 'ts-morph';
-export declare const createComponentWrappers: ({ stencilPackageName, components, outDir, customElementsDir, esModules, experimentalUseClient, excludeComponents, project, }: {
+export declare const createComponentWrappers: ({ stencilPackageName, components, outDir, customElementsDir, esModules, experimentalUseClient, excludeComponents, project, hydrateModule, }: {
     stencilPackageName: string;
@@ -12,2 +12,3 @@ components: ComponentCompilerMeta[];
     project: Project;
+    hydrateModule?: string;
 }) => Promise<SourceFile[]>;

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

 import type { ComponentCompilerMeta } from '@stencil/core/internal';
-export declare const createStencilReactComponents: ({ components, stencilPackageName, customElementsDir, defaultExport, useClient, }: {
+export declare const createStencilReactComponents: ({ components, stencilPackageName, customElementsDir, defaultExport, useClient, hydrateModule, }: {
     components: ComponentCompilerMeta[];
@@ -8,2 +8,3 @@ stencilPackageName: string;
     useClient?: boolean;
+    hydrateModule?: string;
 }) => string;

dist/react-output-target/react-output-target.d.ts

@@ -27,2 +27,7 @@ import type { OutputTargetCustom } from '@stencil/core/internal';
     experimentalUseClient?: boolean;
+    /**
+     * To enable server side rendering, provide the path to the hydrate module, e.g. `my-component/hydrate`.
+     * By default this value is undefined and server side rendering is disabled.
+     */
+    hydrateModule?: string;
 }
@@ -35,2 +40,2 @@ /**
  */
-export declare const reactOutputTarget: ({ outDir, esModules, stencilPackageName, experimentalUseClient, excludeComponents, }: ReactOutputTargetOptions) => OutputTargetCustom;
+export declare const reactOutputTarget: ({ outDir, esModules, stencilPackageName, experimentalUseClient, excludeComponents, hydrateModule, }: ReactOutputTargetOptions) => OutputTargetCustom;

dist/react.js

@@ -17,12 +17,8 @@ /**
     const s = t.useRef(/* @__PURE__ */ new Map()), n = t.useRef(null), p = {}, v = {};
-    for (const [e, r] of Object.entries(c))
-      E.has(e) ? p[e === "className" ? "class" : e] = r : d.has(e) || e in u.prototype ? v[e] = r : p[e] = r;
+    for (const [e, r] of Object.entries(c)) E.has(e) ? p[e === "className" ? "class" : e] = r : d.has(e) || e in u.prototype ? v[e] = r : p[e] = r;
     return t.useLayoutEffect(() => {
-      if (n.current === null)
-        return;
+      if (n.current === null) return;
       const e = /* @__PURE__ */ new Map();
-      for (const r in v)
-        y(n.current, r, c[r], s.current.get(r), i), s.current.delete(r), e.set(r, c[r]);
-      for (const [r, w] of s.current)
-        y(n.current, r, void 0, w, i);
+      for (const r in v) y(n.current, r, c[r], s.current.get(r), i), s.current.delete(r), e.set(r, c[r]);
+      for (const [r, w] of s.current) y(n.current, r, void 0, w, i);
       s.current = e;
@@ -29,0 +25,0 @@ }), t.useLayoutEffect(() => {

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "0.0.1-dev.11716386285.1a6265fd",
+  "version": "0.0.1-dev.11720570072.1dfe2761",
   "description": "React output target for @stencil/core components.",
@@ -48,7 +48,13 @@ "main": "./dist/react-output-target.js",
   },
-  "gitHead": "a6265fd59aa0ba8a7417fefaa02897dcfa7141ee",
+  "gitHead": "dfe276107c7e439dcec3ee4fd692d2818a3cf60e",
   "dependencies": {
     "@lit/react": "^1.0.4",
+    "html-react-parser": "^5.1.10",
     "ts-morph": "^22.0.0"
   },
+  "peerDependenciesMeta": {
+    "@stencil/core": {
+      "optional": false
+    }
+  },
   "exports": {
@@ -68,4 +74,11 @@ ".": {
       "default": "./dist/react.js"
+    },
+    "./ssr": {
+      "types": "./dist/react/ssr.d.ts",
+      "browser": {
+        "default": "./dist/ssr.js"
+      },
+      "default": "./dist/ssr.js"
     }
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

118023

increased by309.9%

Number of package files

17

increased by13.33%

Lines of code

2051

increased by298.25%

Worsened metrics

Dependency count

4

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedhtml-react-parser@^5.1.10

• + Addeddom-serializer@2.0.0(transitive)

• + Addeddomelementtype@2.3.0(transitive)

• + Addeddomhandler@5.0.3(transitive)

• + Addeddomutils@3.2.2(transitive)

• + Addedentities@4.5.06.0.0(transitive)

• + Addedhtml-dom-parser@5.0.13(transitive)

• + Addedhtml-react-parser@5.2.2(transitive)

• + Addedhtmlparser2@10.0.0(transitive)

• + Addedinline-style-parser@0.2.4(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-property@2.0.2(transitive)

• + Addedstyle-to-js@1.1.16(transitive)

• + Addedstyle-to-object@1.0.8(transitive)