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

Comparing version 0.0.1-dev.11751415560.154e7968 to 0.0.1-dev.11751417027.15fc7269

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 F } 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()), R = (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.
 
-`, y = v.join(s || "", "components.ts"), l = u.createSourceFile(y, 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 }), y = 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,10 +44,10 @@ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
 
-`, m = `/* eslint-disable */
-`, i = u ? [
-    "import * as clientComponents from './components.js';",
+`, d = `/* eslint-disable */
+`, i = m ? [
+    `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 = d.createSourceFile(
+`) : "import { createComponent } from '@stencil/react-output-target/runtime';", e = g.createSourceFile(
     "component.ts",
-    `${y}${l}${m}
+    `${l}${T}${d}
 import React from 'react';
@@ -57,5 +58,5 @@ ${i}
   );
-  u && e.addVariableStatement({
+  m && e.addVariableStatement({
     isExported: !0,
-    declarationKind: F.Const,
+    declarationKind: R.Const,
     declarations: [
@@ -65,10 +66,10 @@ {
         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: [
@@ -85,11 +86,11 @@ {
     });
-    const h = (a.events || []).filter((t) => t.internal === !1), T = [];
-    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
@@ -100,3 +101,3 @@ }
         e.addImportDeclaration({
-          moduleSpecifier: r,
+          moduleSpecifier: a,
           namedImports: [
@@ -108,34 +109,34 @@ {
           ]
-        }), T.push({
+        }), E.push({
           originalName: t.name,
-          name: R(t.name),
+          name: j(t.name),
           type: `EventName<${p}<${t.complexType.original}>>`
         });
       } else
-        T.push({
+        E.push({
           originalName: t.name,
-          name: R(t.name),
+          name: j(t.name),
           type: `EventName<CustomEvent<${t.complexType.original}>>`
         });
-    const $ = `${c}Events`;
+    const C = `${c}Events`;
     e.addTypeAlias({
       isExported: !0,
-      name: $,
-      type: T.length > 0 ? `{ ${T.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}, ${$}>({
-    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: {${T.map((t) => `${t.name}: '${t.originalName}'`).join(`,
-`)}} as ${$},
+    events: {${E.map((t) => `${t.name}: '${t.originalName}'`).join(`,
+`)}} as ${C},
     defineCustomElement: define${c}
-  })`, S = `/*@__PURE__*/ createComponent<${n}, ${$}>({
-    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>,
-    clientModule: clientComponents.${c} as ReactWebComponent<${n}, ${$}>,
+    hydrateModule: import('${m}') as Promise<HydrateModule>,
+    clientModule: clientComponents.${c} as ReactWebComponent<${n}, ${C}>,
     serializeShadowRoot,
@@ -145,3 +146,3 @@ })`;
       isExported: !0,
-      declarationKind: F.Const,
+      declarationKind: R.Const,
       // React as never is a hack to by-pass a @types/react issue.
@@ -151,4 +152,4 @@ declarations: [
           name: c,
-          type: `StencilReactComponent<${n}, ${$}>`,
-          initializer: u ? S : w
+          type: `StencilReactComponent<${n}, ${C}>`,
+          initializer: m ? b : S
         }
@@ -159,116 +160,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: y,
+  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`), T = j({
+    const y = N.join(r, `${p}.ts`), E = O({
       components: n,
       stencilPackageName: o,
-      customElementsDir: f
+      customElementsDir: h
     });
-    if (g[h] = T, l) {
-      const $ = 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[$] = 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: y, 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 = y.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: y,
-  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: y,
-        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 +289,4 @@ };
 export {
-  L as reactOutputTarget
+  q as reactOutputTarget
 };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "0.0.1-dev.11751415560.154e7968",
+  "version": "0.0.1-dev.11751417027.15fc7269",
   "description": "React output target for @stencil/core components.",
@@ -87,3 +87,3 @@ "author": "Ionic Team",
   },
-  "gitHead": "54e79685f3312573233853f2c3c0e8a9f2952dff"
+  "gitHead": "5fc7269bf1df56e8fa948b03e54ce617c370b103"
 }

No alert changes

Improved metrics

Total package byte prevSize

212922

1.27%

Lines of code

1233

1.65%

No dependency changes