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

Comparing version 0.0.1-dev.11742481103.1f47dcf9 to 0.0.1-dev.11747788192.126c626b

dist/create-component-wrappers.d.ts

@@ -5,3 +5,3 @@ import { ComponentCompilerMeta } from '@stencil/core/internal';
 
-export declare const createComponentWrappers: ({ stencilPackageName, components, outDir, customElementsDir, excludeComponents, project, hydrateModule, excludeServerSideRenderingFor, serializeShadowRoot, }: {
+export declare const createComponentWrappers: ({ stencilPackageName, components, outDir, esModules, customElementsDir, excludeComponents, project, hydrateModule, excludeServerSideRenderingFor, serializeShadowRoot, }: {
     stencilPackageName: string;
@@ -8,0 +8,0 @@ components: ComponentCompilerMeta[];

dist/index.d.ts

@@ -37,2 +37,7 @@ import { OutputTargetCustom } from '@stencil/core/internal';
     /**
+     * If `true`, the output target will generate a separate ES module for each React component wrapper. Defaults to `false`.
+     * @default false
+     */
+    esModules?: boolean;
+    /**
      * Configure how Stencil serializes the components shadow root.
@@ -67,3 +72,3 @@ * - If set to `declarative-shadow-dom` the component will be rendered within a Declarative Shadow DOM.
  */
-export declare const reactOutputTarget: ({ outDir, stencilPackageName, excludeComponents, customElementsDir: customElementsDirOverride, hydrateModule, excludeServerSideRenderingFor, serializeShadowRoot, }: ReactOutputTargetOptions) => ReactOutputTarget;
+export declare const reactOutputTarget: ({ outDir, esModules, stencilPackageName, excludeComponents, customElementsDir: customElementsDirOverride, hydrateModule, excludeServerSideRenderingFor, serializeShadowRoot, }: ReactOutputTargetOptions) => ReactOutputTarget;
 export {};

dist/index.js

@@ -1,18 +0,18 @@
-import { Project as R, VariableDeclarationKind as _ } from "ts-morph";
-import S from "node:path";
-const I = (o) => o.toLowerCase().split("-").map((t) => t.charAt(0).toUpperCase() + t.slice(1)).join(""), D = (o) => o.replace(/-([_a-z])/g, (t, m) => m.toUpperCase()), U = (o) => o.replace(/\/([a-z])/g, (t, m) => m.toUpperCase()), b = (o) => {
-  const t = U(o);
-  return D(`on-${t}`);
-}, N = ({
+import { Project as j, VariableDeclarationKind as b } from "ts-morph";
+import N from "node:path";
+const I = (o) => o.toLowerCase().split("-").map((a) => a.charAt(0).toUpperCase() + a.slice(1)).join(""), D = (o) => o.replace(/-([_a-z])/g, (a, s) => s.toUpperCase()), U = (o) => o.replace(/\/([a-z])/g, (a, s) => s.toUpperCase()), R = (o) => {
+  const a = U(o);
+  return D(`on-${a}`);
+}, O = ({
   components: o,
-  stencilPackageName: t,
-  customElementsDir: m,
-  hydrateModule: s,
-  serializeShadowRoot: l
+  stencilPackageName: a,
+  customElementsDir: s,
+  hydrateModule: p,
+  serializeShadowRoot: d
 }) => {
-  const T = new R({ useInMemoryFileSystem: !0 }), $ = s ? "" : `'use client';
+  const h = new j({ useInMemoryFileSystem: !0 }), y = p ? "" : `'use client';
 
-`, i = `/**
+`, l = `/**
  * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.${s ? `
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.${p ? `
  * Do __not__ import components from this file as server side rendered components
@@ -23,14 +23,14 @@ * may not hydrate due to missing Stencil runtime. Instead, import these components through the generated 'components.ts'
 
-`, r = `/* eslint-disable */
-`, c = s ? "import { createComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';" : "import { createComponent } from '@stencil/react-output-target/runtime';", a = T.createSourceFile(
+`, i = `/* eslint-disable */
+`, r = p ? "import { createComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';" : "import { createComponent } from '@stencil/react-output-target/runtime';", t = h.createSourceFile(
     "component.ts",
-    `${$}${i}${r}
+    `${y}${l}${i}
 import React from 'react';
-${c}
+${r}
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
   `
   );
-  s && a.addVariableStatement({
+  p && t.addVariableStatement({
     isExported: !0,
-    declarationKind: _.Const,
+    declarationKind: b.Const,
     declarations: [
@@ -40,14 +40,14 @@ {
         type: "SerializeShadowRootOptions",
-        initializer: l ? JSON.stringify(l) : '{ default: "declarative-shadow-dom" }'
+        initializer: d ? JSON.stringify(d) : '{ default: "declarative-shadow-dom" }'
       }
     ]
   });
-  for (const d of o) {
-    const f = d.tagName, n = I(f), p = `${n}Element`, h = `${n}CustomEvent`;
-    a.addImportDeclaration({
-      moduleSpecifier: `${t}/${m}/${f}.js`,
+  for (const u of o) {
+    const f = u.tagName, n = I(f), c = `${n}Element`, m = `${n}CustomEvent`;
+    t.addImportDeclaration({
+      moduleSpecifier: `${a}/${s}/${f}.js`,
       namedImports: [
         {
           name: n,
-          alias: p
+          alias: c
         },
@@ -60,11 +60,11 @@ {
     });
-    const O = (d.events || []).filter((e) => e.internal === !1), y = [];
-    for (const e of O)
+    const v = (u.events || []).filter((e) => e.internal === !1), g = [];
+    for (const e of v)
       if (Object.keys(e.complexType.references).length > 0) {
-        for (const w of Object.keys(e.complexType.references))
-          e.complexType.references[w].location === "global" || a.addImportDeclaration({
-            moduleSpecifier: t,
+        for (const S of Object.keys(e.complexType.references))
+          e.complexType.references[S].location === "global" || t.addImportDeclaration({
+            moduleSpecifier: a,
             namedImports: [
               {
-                name: w,
+                name: S,
                 isTypeOnly: !0
@@ -74,46 +74,46 @@ }
           });
-        a.addImportDeclaration({
-          moduleSpecifier: t,
+        t.addImportDeclaration({
+          moduleSpecifier: a,
           namedImports: [
             {
-              name: h,
+              name: m,
               isTypeOnly: !0
             }
           ]
-        }), y.push({
+        }), g.push({
           originalName: e.name,
-          name: b(e.name),
-          type: `EventName<${h}<${e.complexType.original}>>`
+          name: R(e.name),
+          type: `EventName<${m}<${e.complexType.original}>>`
         });
       } else
-        y.push({
+        g.push({
           originalName: e.name,
-          name: b(e.name),
+          name: R(e.name),
           type: `EventName<CustomEvent<${e.complexType.original}>>`
         });
-    const C = `${n}Events`;
-    a.addTypeAlias({
+    const $ = `${n}Events`;
+    t.addTypeAlias({
       isExported: !0,
-      name: C,
-      type: y.length > 0 ? `{ ${y.map((e) => `${e.name}: ${e.type}`).join(`,
+      name: $,
+      type: g.length > 0 ? `{ ${g.map((e) => `${e.name}: ${e.type}`).join(`,
 `)} }` : "NonNullable<unknown>"
     });
-    const j = `/*@__PURE__*/ createComponent<${p}, ${C}>({
+    const w = `/*@__PURE__*/ createComponent<${c}, ${$}>({
     tagName: '${f}',
-    elementClass: ${p},
+    elementClass: ${c},
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
-    events: {${y.map((e) => `${e.name}: '${e.originalName}'`).join(`,
-`)}} as ${C},
+    events: {${g.map((e) => `${e.name}: '${e.originalName}'`).join(`,
+`)}} as ${$},
     defineCustomElement: define${n}
-  })`, F = `/*@__PURE__*/ createComponent<${p}, ${C}>({
+  })`, F = `/*@__PURE__*/ createComponent<${c}, ${$}>({
     tagName: '${f}',
-    properties: {${d.properties.filter((e) => !!e.attribute).map((e) => `${e.name}: '${e.attribute}'`).join(`,
+    properties: {${u.properties.filter((e) => !!e.attribute).map((e) => `${e.name}: '${e.attribute}'`).join(`,
 `)}},
-    hydrateModule: import('${s}'),
+    hydrateModule: import('${p}'),
     serializeShadowRoot
   })`;
-    a.addVariableStatement({
+    t.addVariableStatement({
       isExported: !0,
-      declarationKind: _.Const,
+      declarationKind: b.Const,
       // React as never is a hack to by-pass a @types/react issue.
@@ -123,4 +123,4 @@ declarations: [
           name: n,
-          type: `StencilReactComponent<${p}, ${C}>`,
-          initializer: s ? F : j
+          type: `StencilReactComponent<${c}, ${$}>`,
+          initializer: p ? F : w
         }
@@ -130,104 +130,115 @@ ]
   }
-  return a.organizeImports(), a.formatText(), a.getFullText();
+  return t.organizeImports(), t.formatText(), t.getFullText();
 }, x = async ({
   stencilPackageName: o,
-  components: t,
-  outDir: m,
-  customElementsDir: s,
-  excludeComponents: l,
-  project: T,
-  hydrateModule: $,
-  excludeServerSideRenderingFor: u,
+  components: a,
+  outDir: s,
+  esModules: p,
+  customElementsDir: d,
+  excludeComponents: h,
+  project: y,
+  hydrateModule: C,
+  excludeServerSideRenderingFor: l,
   serializeShadowRoot: i
 }) => {
-  const r = [], c = t.filter((n) => !(n.internal === !0 || l != null && l.includes(n.tagName)));
-  if (c.length === 0)
+  const r = [], t = a.filter((n) => !(n.internal === !0 || h != null && h.includes(n.tagName)));
+  if (t.length === 0)
     return [];
-  const a = {}, d = S.join(m, "components.ts"), f = N({
-    components: c,
-    stencilPackageName: o,
-    customElementsDir: s
-  });
-  if (a[d] = f, $) {
-    const n = S.join(m, "components.server.ts"), p = N({
-      components: c.filter(
-        (h) => !u || !u.includes(h.tagName)
-      ),
+  const u = {};
+  function f(n, c = "components") {
+    const m = N.join(s, `${c}.ts`), v = O({
+      components: n,
       stencilPackageName: o,
-      customElementsDir: s,
-      hydrateModule: $,
-      serializeShadowRoot: i
+      customElementsDir: d
     });
-    a[n] = p;
+    if (u[m] = v, C) {
+      const g = N.join(s, `${c}.server.ts`), $ = O({
+        components: n.filter(
+          (w) => !l || !l.includes(w.tagName)
+        ),
+        stencilPackageName: o,
+        customElementsDir: d,
+        hydrateModule: C,
+        serializeShadowRoot: i
+      });
+      u[g] = $;
+    }
   }
+  if (p)
+    for (const n of t)
+      f([n], n.tagName);
+  else
+    f(t);
   return await Promise.all(
-    Object.entries(a).map(async ([n, p]) => {
-      const h = T.createSourceFile(n, p, { overwrite: !0 });
-      await h.save(), r.push(h);
+    Object.entries(u).map(async ([n, c]) => {
+      const m = y.createSourceFile(n, c, { overwrite: !0 });
+      await m.save(), r.push(m);
     })
   ), r;
-}, g = "react-output-target", P = "dist/components", E = "dist-custom-elements", v = "dist-hydrate-script", J = ({
+}, T = "react-output-target", P = "dist/components", E = "dist-custom-elements", _ = "dist-hydrate-script", J = ({
   outDir: o,
-  stencilPackageName: t,
-  excludeComponents: m,
-  customElementsDir: s,
-  hydrateModule: l,
-  excludeServerSideRenderingFor: T,
-  serializeShadowRoot: $
+  esModules: a,
+  stencilPackageName: s,
+  excludeComponents: p,
+  customElementsDir: d,
+  hydrateModule: h,
+  excludeServerSideRenderingFor: y,
+  serializeShadowRoot: C
 }) => {
-  let u = P;
+  let l = P;
   return {
     type: "custom",
-    name: g,
+    name: T,
     validate(i) {
-      if (s)
-        u = s;
+      if (d)
+        l = d;
       else {
         const r = (i.outputTargets || []).find(
-          (c) => c.type === E
+          (t) => t.type === E
         );
         if (r == null)
           throw new Error(
-            `The '${g}' requires '${E}' output target. Add { type: '${E}' }, to the outputTargets config.`
+            `The '${T}' requires '${E}' output target. Add { type: '${E}' }, to the outputTargets config.`
           );
-        if (r.dir !== void 0 && (u = r.dir), r.externalRuntime !== !1)
+        if (r.dir !== void 0 && (l = r.dir), r.externalRuntime !== !1)
           throw new Error(
-            `The '${g}' requires the '${E}' output target to have 'externalRuntime: false' set in its configuration.`
+            `The '${T}' requires the '${E}' output target to have 'externalRuntime: false' set in its configuration.`
           );
       }
-      if (l && (i.outputTargets || []).find((c) => c.type === v) == null)
+      if (h && (i.outputTargets || []).find((t) => t.type === _) == null)
         throw new Error(
-          `The '${g}' requires '${v}' output target when the 'hydrateModule' option is set. Add { type: '${v}' }, to the outputTargets config.`
+          `The '${T}' requires '${_}' output target when the 'hydrateModule' option is set. Add { type: '${_}' }, to the outputTargets config.`
         );
       if (!o)
         throw new Error("The 'outDir' option is required.");
-      if (t === void 0) {
+      if (s === void 0) {
         if (i.sys && i.packageJsonFilePath) {
           const { name: r } = JSON.parse(i.sys.readFileSync(i.packageJsonFilePath, "utf8"));
-          t = r;
+          s = r;
         }
-        if (!t)
+        if (!s)
           throw new Error(
-            `Unable to find the package name in the package.json file: ${i.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${g} output target.`
+            `Unable to find the package name in the package.json file: ${i.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${T} output target.`
           );
       }
     },
-    async generator(i, r, c) {
-      const a = c.createTimeSpan(`generate ${g} started`, !0), d = c.components, f = new R(), n = await x({
+    async generator(i, r, t) {
+      const u = t.createTimeSpan(`generate ${T} started`, !0), f = t.components, n = new j(), c = await x({
         outDir: o,
-        components: d,
-        stencilPackageName: t,
-        customElementsDir: u,
-        excludeComponents: m,
-        project: f,
-        hydrateModule: l,
-        excludeServerSideRenderingFor: T,
-        serializeShadowRoot: $
+        components: f,
+        stencilPackageName: s,
+        customElementsDir: l,
+        excludeComponents: p,
+        esModules: a === !0,
+        project: n,
+        hydrateModule: h,
+        excludeServerSideRenderingFor: y,
+        serializeShadowRoot: C
       });
       await Promise.all(
-        n.map((p) => r.fs.writeFile(p.getFilePath(), p.getFullText()))
-      ), a.finish(`generate ${g} finished`);
+        c.map((m) => r.fs.writeFile(m.getFilePath(), m.getFullText()))
+      ), u.finish(`generate ${T} finished`);
     },
     __internal_getCustomElementsDir() {
-      return u;
+      return l;
     }
@@ -234,0 +245,0 @@ };

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "0.0.1-dev.11742481103.1f47dcf9",
+  "version": "0.0.1-dev.11747788192.126c626b",
   "description": "React output target for @stencil/core components.",
@@ -60,3 +60,3 @@ "author": "Ionic Team",
   "devDependencies": {
-    "@stencil/core": "4.28.2-dev.1742453865.0e5a479",
+    "@stencil/core": "4.29.0",
     "@types/node": "^20.14.12",
@@ -88,3 +88,3 @@ "@types/react": "^18 || ^19",
   },
-  "gitHead": "f47dcf9b779e51ad5dfe0dc5925aa66694717830"
+  "gitHead": "26c626b05967f630cbf7851a82dca592894b8b28"
 }

runtime.d.ts

@@ -5,2 +5,2 @@ /**
  */
-export * from './dist/react/index';
+export * from './dist/runtime/index';

No alert changes

Improved metrics

Total package byte prevSize

57571

0.89%

Lines of code

1047

1.65%

No dependency changes