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

Comparing version 1.0.4 to 1.0.5

dist/index.js

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

dist/runtime/create-component.d.ts

@@ -1,5 +0,8 @@
-import { EventName, Options, ReactWebComponent } from '@lit/react';
+import { EventName, Options } from '@lit/react';
 
 type EventNames = Record<string, EventName | string>;
-export type StencilReactComponent<I extends HTMLElement, E extends EventNames = {}> = ReactWebComponent<I, E>;
+type StencilProps<I extends HTMLElement, E extends EventNames> = Omit<React.HTMLAttributes<I>, keyof E> & Partial<{
+    [K in keyof E]: E[K] extends EventName<infer T> ? (event: T) => void : (event: any) => void;
+}> & Partial<Omit<I, keyof HTMLElement>>;
+export type StencilReactComponent<I extends HTMLElement, E extends EventNames = {}> = React.FunctionComponent<StencilProps<I, E>>;
 /**
@@ -11,3 +14,3 @@ * Defines a custom element and creates a React component.
     defineCustomElement: () => void;
-}) => ReactWebComponent<I, E>;
+}) => StencilReactComponent<I, E>;
 export {};

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "React output target for @stencil/core components.",
@@ -71,3 +71,3 @@ "author": "Ionic Team",
   "dependencies": {
-    "@lit/react": "^1.0.4",
+    "@lit/react": "^1.0.7",
     "html-react-parser": "^5.2.2",
@@ -74,0 +74,0 @@ "style-object-to-css-string": "^1.1.3",

No alert changes

Improved metrics

Total package byte prevSize

59411

3.45%

Number of package files

20

5.26%

Lines of code

1085

3.63%

Dependency changes

• Updated

  @lit/react@^1.0.7