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

Comparing version 0.0.1-dev.11715951675.191c768e to 0.0.1-dev.11716386285.1a6265fd

./dist/react-output-target.js

@@ -1,12 +0,12 @@
-import { Project as C, VariableDeclarationKind as F } from "ts-morph";
-const S = (a) => a.toLowerCase().split("-").map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(""), w = (a) => a.replace(/-([a-z])/g, (r, i) => i.toUpperCase()), h = (a) => w(`on-${a}`), v = ({
+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,
   customElementsDir: i,
-  defaultExport: d = !1,
-  useClient: f = !1
+  defaultExport: f = !1,
+  useClient: d = !1
 }) => {
-  const p = new C({ useInMemoryFileSystem: !0 }), o = f ? `'use client';
+  const u = new b({ useInMemoryFileSystem: !0 }), o = d ? `'use client';
 
-` : "", n = p.createSourceFile(
+` : "", t = u.createSourceFile(
     "component.ts",
@@ -26,62 +26,67 @@ `${o}/**
   for (const s of a) {
-    const m = s.tagName, t = S(m), u = `${t}Element`, g = `${t}CustomEvent`;
-    n.addImportDeclaration({
+    const m = s.tagName, n = S(m), p = `${n}Element`, y = `${n}CustomEvent`;
+    t.addImportDeclaration({
       moduleSpecifier: `${r}/${i}/${m}.js`,
       namedImports: [
         {
-          name: t,
-          alias: `${t}Element`
+          name: n,
+          alias: p
         },
         {
           name: "defineCustomElement",
-          alias: `define${t}`
+          alias: `define${n}`
         }
       ]
     });
-    const b = (s.events || []).filter((e) => e.internal === !1), y = [];
-    for (const e of b)
-      Object.keys(e.complexType.references).includes(e.complexType.original) ? (e.complexType.references[e.complexType.original].location === "global" || n.addImportDeclaration({
-        moduleSpecifier: r,
-        namedImports: [
-          {
-            name: e.complexType.original,
-            isTypeOnly: !0
-          }
-        ]
-      }), n.addImportDeclaration({
-        moduleSpecifier: r,
-        namedImports: [
-          {
-            name: g,
-            isTypeOnly: !0
-          }
-        ]
-      }), y.push({
-        originalName: e.name,
-        name: h(e.name),
-        type: `EventName<${g}<${e.complexType.resolved}>>`
-      })) : y.push({
-        originalName: e.name,
-        name: h(e.name),
-        type: `EventName<CustomEvent<${e.complexType.resolved}>>`
-      });
-    const T = `${t}Events`;
-    n.addTypeAlias({
-      name: T,
-      type: y.length > 0 ? `{ ${y.map((e) => `${e.name}: ${e.type}`).join(`,
+    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,
+            namedImports: [
+              {
+                name: h,
+                isTypeOnly: !0
+              }
+            ]
+          });
+        t.addImportDeclaration({
+          moduleSpecifier: r,
+          namedImports: [
+            {
+              name: y,
+              isTypeOnly: !0
+            }
+          ]
+        }), g.push({
+          originalName: e.name,
+          name: v(e.name),
+          type: `EventName<${y}<${e.complexType.original}>>`
+        });
+      } else
+        g.push({
+          originalName: e.name,
+          name: v(e.name),
+          type: `EventName<CustomEvent<${e.complexType.original}>>`
+        });
+    const E = `${n}Events`;
+    t.addTypeAlias({
+      name: E,
+      type: g.length > 0 ? `{ ${g.map((e) => `${e.name}: ${e.type}`).join(`,
 `)} }` : "NonNullable<unknown>"
     });
-    const N = n.addVariableStatement({
-      declarationKind: F.Const,
+    const F = t.addVariableStatement({
+      declarationKind: w.Const,
       // React as never is a hack to by-pass a @types/react issue.
       declarations: [
         {
-          name: t,
-          initializer: `createComponent<${u}, ${T}>({
+          name: n,
+          initializer: `/*@__PURE__*/ createComponent<${p}, ${E}>({
           tagName: '${m}',
-          elementClass: ${u},
+          elementClass: ${p},
           react: React,
-          events: { ${y.map((e) => `${e.name}: '${e.originalName}'`).join(`,
-`)}} as ${T},
-          defineCustomElement: define${t}
+          events: { ${g.map((e) => `${e.name}: '${e.originalName}'`).join(`,
+`)}} as ${E},
+          defineCustomElement: define${n}
         })`
@@ -91,51 +96,51 @@ }
     });
-    d ? n.addExportAssignment({
+    f ? t.addExportAssignment({
       isExportEquals: !1,
-      expression: t
-    }) : N.setIsExported(!0);
+      expression: n
+    }) : F.setIsExported(!0);
   }
-  return n.organizeImports(), n.formatText(), n.getFullText();
-}, x = async ({
+  return t.organizeImports(), t.formatText(), t.getFullText();
+}, _ = async ({
   stencilPackageName: a,
   components: r,
   outDir: i,
-  customElementsDir: d,
-  esModules: f,
-  experimentalUseClient: p,
+  customElementsDir: f,
+  esModules: d,
+  experimentalUseClient: u,
   excludeComponents: o,
-  project: c
+  project: l
 }) => {
-  const l = [], n = r.filter((s) => !(s.internal === !0 || o != null && o.includes(s.tagName)));
-  if (n.length === 0)
+  const c = [], t = r.filter((s) => !(s.internal === !0 || o != null && o.includes(s.tagName)));
+  if (t.length === 0)
     return [];
-  if (f === !0)
-    for (const s of n) {
-      const m = S(s.tagName), t = `${i}/${m}.ts`, u = v({
+  if (d === !0)
+    for (const s of t) {
+      const m = S(s.tagName), n = `${i}/${m}.ts`, p = C({
         components: [s],
         stencilPackageName: a,
-        customElementsDir: d,
+        customElementsDir: f,
         defaultExport: !0,
-        useClient: p
-      }), g = c.createSourceFile(t, u, { overwrite: !0 });
-      l.push(g);
+        useClient: u
+      }), y = l.createSourceFile(n, p, { overwrite: !0 });
+      c.push(y);
     }
   else {
-    const s = `${i}/components.ts`, m = v({
-      components: n,
+    const s = `${i}/components.ts`, m = C({
+      components: t,
       stencilPackageName: a,
-      customElementsDir: d,
+      customElementsDir: f,
       defaultExport: !1,
-      useClient: p
-    }), t = c.createSourceFile(s, m, { overwrite: !0 });
-    await t.save(), l.push(t);
+      useClient: u
+    }), n = l.createSourceFile(s, m, { overwrite: !0 });
+    await n.save(), c.push(n);
   }
-  return l;
-}, $ = "react-output-target", I = "components", E = "dist-custom-elements", D = ({
+  return c;
+}, $ = "react-output-target", x = "components", T = "dist-custom-elements", R = ({
   outDir: a,
   esModules: r,
   stencilPackageName: i,
-  experimentalUseClient: d,
-  excludeComponents: f
+  experimentalUseClient: f,
+  excludeComponents: d
 }) => {
-  let p = I;
+  let u = x;
   return {
@@ -145,13 +150,13 @@ type: "custom",
     validate(o) {
-      const c = (o.outputTargets || []).find(
-        (l) => l.type === E
+      const l = (o.outputTargets || []).find(
+        (c) => c.type === T
       );
-      if (c == null)
+      if (l == null)
         throw new Error(
-          `The '${$}' requires '${E}' output target. Add { type: '${E}' }, to the outputTargets config.`
+          `The '${$}' requires '${T}' output target. Add { type: '${T}' }, to the outputTargets config.`
         );
-      if (c.dir !== void 0 && (p = c.dir), i === void 0) {
+      if (l.dir !== void 0 && (u = l.dir), i === void 0) {
         if (o.sys && o.packageJsonFilePath) {
-          const { name: l } = JSON.parse(o.sys.readFileSync(o.packageJsonFilePath, "utf8"));
-          i = l;
+          const { name: c } = JSON.parse(o.sys.readFileSync(o.packageJsonFilePath, "utf8"));
+          i = c;
         }
@@ -164,16 +169,16 @@ if (!i)
     },
-    async generator(o, c, l) {
-      const n = l.createTimeSpan(`generate ${$} started`, !0), s = l.components, m = new C(), t = await x({
+    async generator(o, l, c) {
+      const t = c.createTimeSpan(`generate ${$} started`, !0), s = c.components, m = new b(), n = await _({
         outDir: a,
         components: s,
         stencilPackageName: i,
-        customElementsDir: p,
+        customElementsDir: u,
         esModules: r === !0,
-        experimentalUseClient: d === !0,
-        excludeComponents: f,
+        experimentalUseClient: f === !0,
+        excludeComponents: d,
         project: m
       });
       await Promise.all(
-        t.map((u) => c.fs.writeFile(u.getFilePath(), u.getFullText()))
-      ), n.finish(`generate ${$} finished`);
+        n.map((p) => l.fs.writeFile(p.getFilePath(), p.getFullText()))
+      ), t.finish(`generate ${$} finished`);
     }
@@ -183,3 +188,3 @@ };
 export {
-  D as reactOutputTarget
+  R as reactOutputTarget
 };

dist/react-output-target.js

@@ -1,12 +0,12 @@
-import { Project as C, VariableDeclarationKind as F } from "ts-morph";
-const S = (a) => a.toLowerCase().split("-").map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(""), w = (a) => a.replace(/-([a-z])/g, (r, i) => i.toUpperCase()), h = (a) => w(`on-${a}`), v = ({
+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,
   customElementsDir: i,
-  defaultExport: d = !1,
-  useClient: f = !1
+  defaultExport: f = !1,
+  useClient: d = !1
 }) => {
-  const p = new C({ useInMemoryFileSystem: !0 }), o = f ? `'use client';
+  const u = new b({ useInMemoryFileSystem: !0 }), o = d ? `'use client';
 
-` : "", n = p.createSourceFile(
+` : "", t = u.createSourceFile(
     "component.ts",
@@ -26,62 +26,67 @@ `${o}/**
   for (const s of a) {
-    const m = s.tagName, t = S(m), u = `${t}Element`, g = `${t}CustomEvent`;
-    n.addImportDeclaration({
+    const m = s.tagName, n = S(m), p = `${n}Element`, y = `${n}CustomEvent`;
+    t.addImportDeclaration({
       moduleSpecifier: `${r}/${i}/${m}.js`,
       namedImports: [
         {
-          name: t,
-          alias: `${t}Element`
+          name: n,
+          alias: p
         },
         {
           name: "defineCustomElement",
-          alias: `define${t}`
+          alias: `define${n}`
         }
       ]
     });
-    const b = (s.events || []).filter((e) => e.internal === !1), y = [];
-    for (const e of b)
-      Object.keys(e.complexType.references).includes(e.complexType.original) ? (e.complexType.references[e.complexType.original].location === "global" || n.addImportDeclaration({
-        moduleSpecifier: r,
-        namedImports: [
-          {
-            name: e.complexType.original,
-            isTypeOnly: !0
-          }
-        ]
-      }), n.addImportDeclaration({
-        moduleSpecifier: r,
-        namedImports: [
-          {
-            name: g,
-            isTypeOnly: !0
-          }
-        ]
-      }), y.push({
-        originalName: e.name,
-        name: h(e.name),
-        type: `EventName<${g}<${e.complexType.resolved}>>`
-      })) : y.push({
-        originalName: e.name,
-        name: h(e.name),
-        type: `EventName<CustomEvent<${e.complexType.resolved}>>`
-      });
-    const T = `${t}Events`;
-    n.addTypeAlias({
-      name: T,
-      type: y.length > 0 ? `{ ${y.map((e) => `${e.name}: ${e.type}`).join(`,
+    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,
+            namedImports: [
+              {
+                name: h,
+                isTypeOnly: !0
+              }
+            ]
+          });
+        t.addImportDeclaration({
+          moduleSpecifier: r,
+          namedImports: [
+            {
+              name: y,
+              isTypeOnly: !0
+            }
+          ]
+        }), g.push({
+          originalName: e.name,
+          name: v(e.name),
+          type: `EventName<${y}<${e.complexType.original}>>`
+        });
+      } else
+        g.push({
+          originalName: e.name,
+          name: v(e.name),
+          type: `EventName<CustomEvent<${e.complexType.original}>>`
+        });
+    const E = `${n}Events`;
+    t.addTypeAlias({
+      name: E,
+      type: g.length > 0 ? `{ ${g.map((e) => `${e.name}: ${e.type}`).join(`,
 `)} }` : "NonNullable<unknown>"
     });
-    const N = n.addVariableStatement({
-      declarationKind: F.Const,
+    const F = t.addVariableStatement({
+      declarationKind: w.Const,
       // React as never is a hack to by-pass a @types/react issue.
       declarations: [
         {
-          name: t,
-          initializer: `createComponent<${u}, ${T}>({
+          name: n,
+          initializer: `/*@__PURE__*/ createComponent<${p}, ${E}>({
           tagName: '${m}',
-          elementClass: ${u},
+          elementClass: ${p},
           react: React,
-          events: { ${y.map((e) => `${e.name}: '${e.originalName}'`).join(`,
-`)}} as ${T},
-          defineCustomElement: define${t}
+          events: { ${g.map((e) => `${e.name}: '${e.originalName}'`).join(`,
+`)}} as ${E},
+          defineCustomElement: define${n}
         })`
@@ -91,51 +96,51 @@ }
     });
-    d ? n.addExportAssignment({
+    f ? t.addExportAssignment({
       isExportEquals: !1,
-      expression: t
-    }) : N.setIsExported(!0);
+      expression: n
+    }) : F.setIsExported(!0);
   }
-  return n.organizeImports(), n.formatText(), n.getFullText();
-}, x = async ({
+  return t.organizeImports(), t.formatText(), t.getFullText();
+}, _ = async ({
   stencilPackageName: a,
   components: r,
   outDir: i,
-  customElementsDir: d,
-  esModules: f,
-  experimentalUseClient: p,
+  customElementsDir: f,
+  esModules: d,
+  experimentalUseClient: u,
   excludeComponents: o,
-  project: c
+  project: l
 }) => {
-  const l = [], n = r.filter((s) => !(s.internal === !0 || o != null && o.includes(s.tagName)));
-  if (n.length === 0)
+  const c = [], t = r.filter((s) => !(s.internal === !0 || o != null && o.includes(s.tagName)));
+  if (t.length === 0)
     return [];
-  if (f === !0)
-    for (const s of n) {
-      const m = S(s.tagName), t = `${i}/${m}.ts`, u = v({
+  if (d === !0)
+    for (const s of t) {
+      const m = S(s.tagName), n = `${i}/${m}.ts`, p = C({
         components: [s],
         stencilPackageName: a,
-        customElementsDir: d,
+        customElementsDir: f,
         defaultExport: !0,
-        useClient: p
-      }), g = c.createSourceFile(t, u, { overwrite: !0 });
-      l.push(g);
+        useClient: u
+      }), y = l.createSourceFile(n, p, { overwrite: !0 });
+      c.push(y);
     }
   else {
-    const s = `${i}/components.ts`, m = v({
-      components: n,
+    const s = `${i}/components.ts`, m = C({
+      components: t,
       stencilPackageName: a,
-      customElementsDir: d,
+      customElementsDir: f,
       defaultExport: !1,
-      useClient: p
-    }), t = c.createSourceFile(s, m, { overwrite: !0 });
-    await t.save(), l.push(t);
+      useClient: u
+    }), n = l.createSourceFile(s, m, { overwrite: !0 });
+    await n.save(), c.push(n);
   }
-  return l;
-}, $ = "react-output-target", I = "components", E = "dist-custom-elements", D = ({
+  return c;
+}, $ = "react-output-target", x = "components", T = "dist-custom-elements", R = ({
   outDir: a,
   esModules: r,
   stencilPackageName: i,
-  experimentalUseClient: d,
-  excludeComponents: f
+  experimentalUseClient: f,
+  excludeComponents: d
 }) => {
-  let p = I;
+  let u = x;
   return {
@@ -145,13 +150,13 @@ type: "custom",
     validate(o) {
-      const c = (o.outputTargets || []).find(
-        (l) => l.type === E
+      const l = (o.outputTargets || []).find(
+        (c) => c.type === T
       );
-      if (c == null)
+      if (l == null)
         throw new Error(
-          `The '${$}' requires '${E}' output target. Add { type: '${E}' }, to the outputTargets config.`
+          `The '${$}' requires '${T}' output target. Add { type: '${T}' }, to the outputTargets config.`
         );
-      if (c.dir !== void 0 && (p = c.dir), i === void 0) {
+      if (l.dir !== void 0 && (u = l.dir), i === void 0) {
         if (o.sys && o.packageJsonFilePath) {
-          const { name: l } = JSON.parse(o.sys.readFileSync(o.packageJsonFilePath, "utf8"));
-          i = l;
+          const { name: c } = JSON.parse(o.sys.readFileSync(o.packageJsonFilePath, "utf8"));
+          i = c;
         }
@@ -164,16 +169,16 @@ if (!i)
     },
-    async generator(o, c, l) {
-      const n = l.createTimeSpan(`generate ${$} started`, !0), s = l.components, m = new C(), t = await x({
+    async generator(o, l, c) {
+      const t = c.createTimeSpan(`generate ${$} started`, !0), s = c.components, m = new b(), n = await _({
         outDir: a,
         components: s,
         stencilPackageName: i,
-        customElementsDir: p,
+        customElementsDir: u,
         esModules: r === !0,
-        experimentalUseClient: d === !0,
-        excludeComponents: f,
+        experimentalUseClient: f === !0,
+        excludeComponents: d,
         project: m
       });
       await Promise.all(
-        t.map((u) => c.fs.writeFile(u.getFilePath(), u.getFullText()))
-      ), n.finish(`generate ${$} finished`);
+        n.map((p) => l.fs.writeFile(p.getFilePath(), p.getFullText()))
+      ), t.finish(`generate ${$} finished`);
     }
@@ -183,3 +188,3 @@ };
 export {
-  D as reactOutputTarget
+  R as reactOutputTarget
 };

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "0.0.1-dev.11715951675.191c768e",
+  "version": "0.0.1-dev.11716386285.1a6265fd",
   "description": "React output target for @stencil/core components.",
@@ -48,3 +48,3 @@ "main": "./dist/react-output-target.js",
   },
-  "gitHead": "91c768ea91e3a8b9e24819786975ecc5947efd91",
+  "gitHead": "a6265fd59aa0ba8a7417fefaa02897dcfa7141ee",
   "dependencies": {
@@ -51,0 +51,0 @@ "@lit/react": "^1.0.4",

README.md

@@ -59,2 +59,21 @@ # @stencil/react-output-target
 
+Verify or update your `tsconfig.json` file to include the following settings:
+
+```json
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  }
+}
+```
+
+> `moduleResolution": "bundler"` is required to resolve the secondary entry points in the `@stencil/react-output-target` runtime package. You can learn more about this setting in the [TypeScript documentation](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution).
+
+Verify or install Typescript v5.0 or later in your project:
+
+```bash
+npm install typescript@5 --save-dev
+```
+
 That's it! You can now import and use your Stencil components as React components in your React application or library.
@@ -61,0 +80,0 @@

No alert changes

Improved metrics

Total package byte prevSize

28793

increased by2.84%

Lines of code

515

increased by1.98%

Number of lines in readme file

89

increased by27.14%

No dependency changes