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

Comparing version 0.0.1-dev.11730913953.1fecd221 to 0.0.1-dev.11730928290.1699ee88

dist/react-output-target.js

@@ -1,19 +0,18 @@
-import { Project as N, VariableDeclarationKind as U } from "ts-morph";
-import v from "node:path";
-const y = (t) => t.toLowerCase().split("-").map((o) => o.charAt(0).toUpperCase() + o.slice(1)).join(""), P = (t) => t.replace(/-([_a-z])/g, (o, a) => a.toUpperCase()), A = (t) => t.replace(/\/([a-z])/g, (o, a) => a.toUpperCase()), j = (t) => {
-  const o = A(t);
-  return P(`on-${o}`);
-}, F = ({
-  components: t,
-  stencilPackageName: o,
-  customElementsDir: a,
-  defaultExport: $ = !1,
-  hydrateModule: l,
-  excludeServerSideRenderingFor: g
+import { Project as w, VariableDeclarationKind as D } from "ts-morph";
+import C from "node:path";
+const $ = (n) => n.toLowerCase().split("-").map((a) => a.charAt(0).toUpperCase() + a.slice(1)).join(""), O = (n) => n.replace(/-([_a-z])/g, (a, r) => r.toUpperCase()), U = (n) => n.replace(/\/([a-z])/g, (a, r) => r.toUpperCase()), x = (n) => {
+  const a = U(n);
+  return O(`on-${a}`);
+}, R = ({
+  components: n,
+  stencilPackageName: a,
+  customElementsDir: r,
+  defaultExport: g = !1,
+  hydrateModule: p
 }) => {
-  const p = new N({ useInMemoryFileSystem: !0 }), r = g || [], s = l ? "" : `'use client';
+  const d = new w({ useInMemoryFileSystem: !0 }), c = p ? "" : `'use client';
 
-`, c = `/**
+`, s = `/**
  * 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.${l ? `
+ * 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
@@ -24,35 +23,35 @@ * may not hydrate due to missing Stencil runtime. Instead, import these components through the generated 'components.ts'
 
-`, u = `/* eslint-disable */
-`, m = l ? "createComponent, createSSRComponent" : "createComponent", n = p.createSourceFile(
+`, i = `/* eslint-disable */
+`, f = p ? "createComponent, createSSRComponent" : "createComponent", e = d.createSourceFile(
     "component.ts",
-    `${s}${c}${u}
+    `${c}${s}${i}
 import React from 'react';
-import { ${m} } from '@stencil/react-output-target/runtime';
+import { ${f} } from '@stencil/react-output-target/runtime';
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
   `
   );
-  for (const f of t) {
-    const d = f.tagName, h = y(d), E = `${h}Element`, _ = `${h}CustomEvent`;
-    n.addImportDeclaration({
-      moduleSpecifier: `${o}/${a}/${d}.js`,
+  for (const m of n) {
+    const u = m.tagName, l = $(u), T = `${l}Element`, b = `${l}CustomEvent`;
+    e.addImportDeclaration({
+      moduleSpecifier: `${a}/${r}/${u}.js`,
       namedImports: [
         {
-          name: h,
-          alias: E
+          name: l,
+          alias: T
         },
         {
           name: "defineCustomElement",
-          alias: `define${h}`
+          alias: `define${l}`
         }
       ]
     });
-    const I = (f.events || []).filter((e) => e.internal === !1), C = [];
-    for (const e of I)
-      if (Object.keys(e.complexType.references).length > 0) {
-        for (const R of Object.keys(e.complexType.references))
-          e.complexType.references[R].location === "global" || n.addImportDeclaration({
-            moduleSpecifier: o,
+    const j = (m.events || []).filter((t) => t.internal === !1), y = [];
+    for (const t of j)
+      if (Object.keys(t.complexType.references).length > 0) {
+        for (const _ of Object.keys(t.complexType.references))
+          t.complexType.references[_].location === "global" || e.addImportDeclaration({
+            moduleSpecifier: a,
             namedImports: [
               {
-                name: R,
+                name: _,
                 isTypeOnly: !0
@@ -62,64 +61,64 @@ }
           });
-        n.addImportDeclaration({
-          moduleSpecifier: o,
+        e.addImportDeclaration({
+          moduleSpecifier: a,
           namedImports: [
             {
-              name: _,
+              name: b,
               isTypeOnly: !0
             }
           ]
-        }), C.push({
-          originalName: e.name,
-          name: j(e.name),
-          type: `EventName<${_}<${e.complexType.original}>>`
+        }), y.push({
+          originalName: t.name,
+          name: x(t.name),
+          type: `EventName<${b}<${t.complexType.original}>>`
         });
       } else
-        C.push({
-          originalName: e.name,
-          name: j(e.name),
-          type: `EventName<CustomEvent<${e.complexType.original}>>`
+        y.push({
+          originalName: t.name,
+          name: x(t.name),
+          type: `EventName<CustomEvent<${t.complexType.original}>>`
         });
-    const S = `${h}Events`;
-    n.addTypeAlias({
-      name: S,
-      type: C.length > 0 ? `{ ${C.map((e) => `${e.name}: ${e.type}`).join(`,
+    const E = `${l}Events`;
+    e.addTypeAlias({
+      name: E,
+      type: y.length > 0 ? `{ ${y.map((t) => `${t.name}: ${t.type}`).join(`,
 `)} }` : "NonNullable<unknown>"
     });
-    const x = `/*@__PURE__*/ createComponent<${E}, ${S}>({
-    tagName: '${d}',
-    elementClass: ${E},
+    const N = `/*@__PURE__*/ createComponent<${T}, ${E}>({
+    tagName: '${u}',
+    elementClass: ${T},
     // @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: {${C.map((e) => `${e.name}: '${e.originalName}'`).join(`,
-`)}} as ${S},
-    defineCustomElement: define${h}
-  })`, D = `/*@__PURE__*/ createSSRComponent<${E}, ${S}>({
-    tagName: '${d}',
-    properties: {${f.properties.filter((e) => !!e.attribute).map((e) => `${e.name}: '${e.attribute}'`).join(`,
+    events: {${y.map((t) => `${t.name}: '${t.originalName}'`).join(`,
+`)}} as ${E},
+    defineCustomElement: define${l}
+  })`, F = `/*@__PURE__*/ createSSRComponent<${T}, ${E}>({
+    tagName: '${u}',
+    properties: {${m.properties.filter((t) => !!t.attribute).map((t) => `${t.name}: '${t.attribute}'`).join(`,
 `)}},
-    hydrateModule: import('${l}')
-  })`, O = n.addVariableStatement({
-      declarationKind: U.Const,
+    hydrateModule: import('${p}')
+  })`, I = e.addVariableStatement({
+      declarationKind: D.Const,
       // React as never is a hack to by-pass a @types/react issue.
       declarations: [
         {
-          name: h,
-          type: `StencilReactComponent<${E}, ${S}>`,
-          initializer: l && !r.includes(d) ? `typeof window !== 'undefined'
-              ? ${x}
-              : ${D}` : x
+          name: l,
+          type: `StencilReactComponent<${T}, ${E}>`,
+          initializer: p ? `typeof window !== 'undefined'
+              ? ${N}
+              : ${F}` : N
         }
       ]
     });
-    $ ? n.addExportAssignment({
+    g ? e.addExportAssignment({
       isExportEquals: !1,
-      expression: h
-    }) : O.setIsExported(!0);
+      expression: l
+    }) : I.setIsExported(!0);
   }
-  return n.organizeImports(), n.formatText(), n.getFullText();
-}, k = ({
-  components: t,
-  esModules: o
+  return e.organizeImports(), e.formatText(), e.getFullText();
+}, P = ({
+  components: n,
+  esModules: a
 }) => {
-  const p = new N({ useInMemoryFileSystem: !0 }).createSourceFile(
+  const c = new w({ useInMemoryFileSystem: !0 }).createSourceFile(
     "component.ts",
@@ -136,45 +135,43 @@ `'use client';
   );
-  if (o)
-    for (const r of t) {
-      const s = r.tagName, i = y(s), c = y(r.tagName);
-      p.addExportDeclaration({
-        moduleSpecifier: `./${c}`,
-        namedExports: o ? [`default as ${i}`] : t.map((u) => y(u.tagName))
+  if (a)
+    for (const o of n) {
+      const s = o.tagName, i = $(s), f = $(o.tagName);
+      c.addExportDeclaration({
+        moduleSpecifier: `./${f}`,
+        namedExports: a ? [`default as ${i}`] : n.map((e) => $(e.tagName))
       });
     }
   else
-    p.addExportDeclaration({
+    c.addExportDeclaration({
       moduleSpecifier: "./components.server",
-      namedExports: t.map((r) => y(r.tagName))
+      namedExports: n.map((o) => $(o.tagName))
     });
-  return p.organizeImports(), p.formatText(), p.getFullText();
-}, L = async ({
-  stencilPackageName: t,
-  components: o,
-  outDir: a,
-  customElementsDir: $,
-  esModules: l,
-  excludeComponents: g,
-  project: p,
-  hydrateModule: r,
-  excludeServerSideRenderingFor: s
+  return c.organizeImports(), c.formatText(), c.getFullText();
+}, A = async ({
+  stencilPackageName: n,
+  components: a,
+  outDir: r,
+  customElementsDir: g,
+  esModules: p,
+  excludeComponents: d,
+  project: c,
+  hydrateModule: o
 }) => {
-  const i = [], c = o.filter((m) => !(m.internal === !0 || g != null && g.includes(m.tagName)));
-  if (c.length === 0)
+  const s = [], i = a.filter((e) => !(e.internal === !0 || d != null && d.includes(e.tagName)));
+  if (i.length === 0)
     return [];
-  const u = {};
-  if (l === !0)
-    for (const m of c) {
-      const n = y(m.tagName), f = v.join(a, `${n}.ts`), d = F({
-        components: [m],
-        stencilPackageName: t,
-        customElementsDir: $,
+  const f = {};
+  if (p === !0)
+    for (const e of i) {
+      const m = $(e.tagName), u = C.join(r, `${m}.ts`), l = R({
+        components: [e],
+        stencilPackageName: n,
+        customElementsDir: g,
         defaultExport: !0,
-        hydrateModule: r,
-        excludeServerSideRenderingFor: s
+        hydrateModule: o
       });
-      u[f] = d;
+      f[u] = l;
     }
   else {
-    const m = r ? (
+    const e = o ? (
       /**
@@ -186,90 +183,87 @@ * If hydrate module is provided, we bundle all components in a single file for server side rendering.
        */
-      v.join(a, "components.server.ts")
-    ) : v.join(a, "components.ts"), n = F({
-      components: c,
-      stencilPackageName: t,
-      customElementsDir: $,
+      C.join(r, "components.server.ts")
+    ) : C.join(r, "components.ts"), m = R({
+      components: i,
+      stencilPackageName: n,
+      customElementsDir: g,
       defaultExport: !1,
-      hydrateModule: r,
-      excludeServerSideRenderingFor: s
+      hydrateModule: o
     });
-    u[m] = n;
+    f[e] = m;
   }
-  if (r) {
-    const m = v.join(a, "components.ts"), n = k({
-      components: c,
-      esModules: l
+  if (o) {
+    const e = C.join(r, "components.ts"), m = P({
+      components: i,
+      esModules: p
     });
-    u[m] = n;
+    f[e] = m;
   }
   return await Promise.all(
-    Object.entries(u).map(async ([m, n]) => {
-      const f = p.createSourceFile(m, n, { overwrite: !0 });
-      await f.save(), i.push(f);
+    Object.entries(f).map(async ([e, m]) => {
+      const u = c.createSourceFile(e, m, { overwrite: !0 });
+      await u.save(), s.push(u);
     })
-  ), i;
-}, T = "react-output-target", q = "dist/components", w = "dist-custom-elements", b = "dist-hydrate-script", V = ({
-  outDir: t,
-  esModules: o,
-  stencilPackageName: a,
-  excludeComponents: $,
-  customElementsDir: l,
-  hydrateModule: g,
-  excludeServerSideRenderingFor: p
+  ), s;
+}, h = "react-output-target", k = "dist/components", v = "dist-custom-elements", S = "dist-hydrate-script", J = ({
+  outDir: n,
+  esModules: a,
+  stencilPackageName: r,
+  excludeComponents: g,
+  customElementsDir: p,
+  hydrateModule: d
 }) => {
-  let r = q;
+  let c = k;
   return {
     type: "custom",
-    name: T,
-    validate(s) {
-      if (l)
-        r = l;
+    name: h,
+    validate(o) {
+      if (p)
+        c = p;
       else {
-        const i = (s.outputTargets || []).find(
-          (c) => c.type === w
+        const s = (o.outputTargets || []).find(
+          (i) => i.type === v
         );
-        if (i == null)
+        if (s == null)
           throw new Error(
-            `The '${T}' requires '${w}' output target. Add { type: '${w}' }, to the outputTargets config.`
+            `The '${h}' requires '${v}' output target. Add { type: '${v}' }, to the outputTargets config.`
           );
-        if (i.dir !== void 0 && (r = i.dir), i.externalRuntime !== !1)
+        if (s.dir !== void 0 && (c = s.dir), s.externalRuntime !== !1)
           throw new Error(
-            `The '${T}' requires the '${w}' output target to have 'externalRuntime: false' set in its configuration.`
+            `The '${h}' requires the '${v}' output target to have 'externalRuntime: false' set in its configuration.`
           );
       }
-      if (g && (s.outputTargets || []).find((c) => c.type === b) == null)
+      if (d && (o.outputTargets || []).find((i) => i.type === S) == null)
         throw new Error(
-          `The '${T}' requires '${b}' output target when the 'hydrateModule' option is set. Add { type: '${b}' }, to the outputTargets config.`
+          `The '${h}' requires '${S}' output target when the 'hydrateModule' option is set. Add { type: '${S}' }, to the outputTargets config.`
         );
-      if (!t)
+      if (!n)
         throw new Error("The 'outDir' option is required.");
-      if (a === void 0) {
-        if (s.sys && s.packageJsonFilePath) {
-          const { name: i } = JSON.parse(s.sys.readFileSync(s.packageJsonFilePath, "utf8"));
-          a = i;
+      if (r === void 0) {
+        if (o.sys && o.packageJsonFilePath) {
+          const { name: s } = JSON.parse(o.sys.readFileSync(o.packageJsonFilePath, "utf8"));
+          r = s;
         }
-        if (!a)
+        if (!r)
           throw new Error(
-            `Unable to find the package name in the package.json file: ${s.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${T} output target.`
+            `Unable to find the package name in the package.json file: ${o.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${h} output target.`
           );
       }
     },
-    async generator(s, i, c) {
-      const u = c.createTimeSpan(`generate ${T} started`, !0), m = c.components, n = new N(), f = await L({
-        outDir: t,
-        components: m,
-        stencilPackageName: a,
-        customElementsDir: r,
-        esModules: o === !0,
-        excludeComponents: $,
-        project: n,
-        hydrateModule: g,
-        excludeServerSideRenderingFor: p
+    async generator(o, s, i) {
+      const f = i.createTimeSpan(`generate ${h} started`, !0), e = i.components, m = new w(), u = await A({
+        outDir: n,
+        components: e,
+        stencilPackageName: r,
+        customElementsDir: c,
+        esModules: a === !0,
+        excludeComponents: g,
+        project: m,
+        hydrateModule: d
       });
       await Promise.all(
-        f.map((d) => i.fs.writeFile(d.getFilePath(), d.getFullText()))
-      ), u.finish(`generate ${T} finished`);
+        u.map((l) => s.fs.writeFile(l.getFilePath(), l.getFullText()))
+      ), f.finish(`generate ${h} finished`);
     },
     __internal_getCustomElementsDir() {
-      return r;
+      return c;
     }
@@ -279,3 +273,3 @@ };
 export {
-  V as reactOutputTarget
+  J 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, excludeComponents, project, hydrateModule, excludeServerSideRenderingFor, }: {
+export declare const createComponentWrappers: ({ stencilPackageName, components, outDir, customElementsDir, esModules, excludeComponents, project, hydrateModule, }: {
     stencilPackageName: string;
@@ -12,3 +12,2 @@ components: ComponentCompilerMeta[];
     hydrateModule?: string;
-    excludeServerSideRenderingFor?: 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, hydrateModule, excludeServerSideRenderingFor, }: {
+export declare const createStencilReactComponents: ({ components, stencilPackageName, customElementsDir, defaultExport, hydrateModule, }: {
     components: ComponentCompilerMeta[];
@@ -8,3 +8,2 @@ stencilPackageName: string;
     hydrateModule?: string;
-    excludeServerSideRenderingFor?: string[];
 }) => string;

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

@@ -35,6 +35,2 @@ import type { OutputTargetCustom } from '@stencil/core/internal';
     hydrateModule?: string;
-    /**
-     * Specify the components that should be excluded from server side rendering.
-     */
-    excludeServerSideRenderingFor?: string[];
 }
@@ -50,3 +46,3 @@ interface ReactOutputTarget extends OutputTargetCustom {
  */
-export declare const reactOutputTarget: ({ outDir, esModules, stencilPackageName, excludeComponents, customElementsDir: customElementsDirOverride, hydrateModule, excludeServerSideRenderingFor, }: ReactOutputTargetOptions) => ReactOutputTarget;
+export declare const reactOutputTarget: ({ outDir, esModules, stencilPackageName, excludeComponents, customElementsDir: customElementsDirOverride, hydrateModule, }: ReactOutputTargetOptions) => ReactOutputTarget;
 export {};

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "0.0.1-dev.11730913953.1fecd221",
+  "version": "0.0.1-dev.11730928290.1699ee88",
   "description": "React output target for @stencil/core components.",
@@ -54,3 +54,3 @@ "main": "./dist/react-output-target.js",
   },
-  "gitHead": "fecd221ccc756da90b0c2e29d29b7a0ca9e5ef26",
+  "gitHead": "699ee88cb3dc0726b12a985c49a3875b9eb7745a",
   "dependencies": {
@@ -57,0 +57,0 @@ "@lit/react": "^1.0.4",

README.md

@@ -91,2 +91,1 @@ # @stencil/react-output-target
 | `hydrateModule`         | For server side rendering support, provide the package for importing the [Stencil Hydrate module](https://stenciljs.com/docs/hydrate-app#hydrate-app), e.g. `my-package/hydrate`. This will generate two files: a `component.server.ts` which defines all component wrappers and a `components.ts` that re-exports these components for importing in your application. |
-| `excludeServerSideRenderingFor` | A list of components that won't be considered for Server Side Rendering (SSR) |

No alert changes

Worsened metrics

Total package byte prevSize

757649

-0.12%

Lines of code

13436

-0.09%

Number of lines in readme file

91

-1.09%

No dependency changes