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

Comparing version 0.0.1-dev.11724176899.11a0efb7 to 0.0.1-dev.11724191071.12bc82c8

dist/react-output-target.js

@@ -1,5 +0,5 @@
-import { Project as S, VariableDeclarationKind as O } from "ts-morph";
-import E from "node:path";
-const v = (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) => D(`on-${o}`), F = ({
-  components: o,
+import { Project as w, VariableDeclarationKind as O } from "ts-morph";
+import C from "node:path";
+const $ = (n) => n.toLowerCase().split("-").map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(""), D = (n) => n.replace(/-([a-z])/g, (r, s) => s.toUpperCase()), x = (n) => D(`on-${n}`), F = ({
+  components: n,
   stencilPackageName: r,
@@ -10,3 +10,3 @@ customElementsDir: s,
 }) => {
-  const d = new S({ useInMemoryFileSystem: !0 }), t = c ? "" : `'use client';
+  const d = new w({ useInMemoryFileSystem: !0 }), t = c ? "" : `'use client';
 
@@ -27,7 +27,7 @@ `, i = `/**
 import { ${u} } from '@stencil/react-output-target/runtime';
-import type { EventName } from '@stencil/react-output-target/runtime';
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
   `
   );
-  for (const l of o) {
-    const p = l.tagName, f = v(p), $ = `${f}Element`, b = `${f}CustomEvent`;
+  for (const l of n) {
+    const p = l.tagName, f = $(p), T = `${f}Element`, N = `${f}CustomEvent`;
     e.addImportDeclaration({
@@ -38,3 +38,3 @@ moduleSpecifier: `${r}/${s}/${p}.js`,
           name: f,
-          alias: $
+          alias: T
         },
@@ -47,7 +47,7 @@ {
     });
-    const j = (l.events || []).filter((n) => n.internal === !1), T = [];
-    for (const n of j)
-      if (Object.keys(n.complexType.references).length > 0) {
-        for (const _ of Object.keys(n.complexType.references))
-          n.complexType.references[_].location === "global" || e.addImportDeclaration({
+    const R = (l.events || []).filter((a) => a.internal === !1), E = [];
+    for (const a of R)
+      if (Object.keys(a.complexType.references).length > 0) {
+        for (const _ of Object.keys(a.complexType.references))
+          a.complexType.references[_].location === "global" || e.addImportDeclaration({
             moduleSpecifier: r,
@@ -65,16 +65,16 @@ namedImports: [
             {
-              name: b,
+              name: N,
               isTypeOnly: !0
             }
           ]
-        }), T.push({
-          originalName: n.name,
-          name: x(n.name),
-          type: `EventName<${b}<${n.complexType.original}>>`
+        }), E.push({
+          originalName: a.name,
+          name: x(a.name),
+          type: `EventName<${N}<${a.complexType.original}>>`
         });
       } else
-        T.push({
-          originalName: n.name,
-          name: x(n.name),
-          type: `EventName<CustomEvent<${n.complexType.original}>>`
+        E.push({
+          originalName: a.name,
+          name: x(a.name),
+          type: `EventName<CustomEvent<${a.complexType.original}>>`
         });
@@ -84,16 +84,16 @@ const y = `${f}Events`;
       name: y,
-      type: T.length > 0 ? `{ ${T.map((n) => `${n.name}: ${n.type}`).join(`,
+      type: E.length > 0 ? `{ ${E.map((a) => `${a.name}: ${a.type}`).join(`,
 `)} }` : "NonNullable<unknown>"
     });
-    const N = `/*@__PURE__*/ createComponent<${$}, ${y}>({
+    const b = `/*@__PURE__*/ createComponent<${T}, ${y}>({
     tagName: '${p}',
-    elementClass: ${$},
+    elementClass: ${T},
     react: React,
-    events: {${T.map((n) => `${n.name}: '${n.originalName}'`).join(`,
+    events: {${E.map((a) => `${a.name}: '${a.originalName}'`).join(`,
 `)}} as ${y},
     defineCustomElement: define${f}
-  })`, I = `/*@__PURE__*/ createSSRComponent<${$}, ${y}>({
+  })`, j = `/*@__PURE__*/ createSSRComponent<${T}, ${y}>({
     tagName: '${p}',
     hydrateModule: import('${c}')
-  })`, R = e.addVariableStatement({
+  })`, I = e.addVariableStatement({
       declarationKind: O.Const,
@@ -104,5 +104,6 @@ // React as never is a hack to by-pass a @types/react issue.
           name: f,
+          type: `StencilReactComponent<${T}, ${y}>`,
           initializer: c ? `typeof window !== 'undefined'
-              ? ${N}
-              : ${I}` : N
+              ? ${b}
+              : ${j}` : b
         }
@@ -114,10 +115,10 @@ ]
       expression: f
-    }) : R.setIsExported(!0);
+    }) : I.setIsExported(!0);
   }
   return e.organizeImports(), e.formatText(), e.getFullText();
 }, P = ({
-  components: o,
+  components: n,
   esModules: r
 }) => {
-  const t = new S({ useInMemoryFileSystem: !0 }).createSourceFile(
+  const t = new w({ useInMemoryFileSystem: !0 }).createSourceFile(
     "component.ts",
@@ -134,12 +135,18 @@ `'use client';
   );
-  for (const a of o) {
-    const i = a.tagName, m = v(i), u = v(a.tagName), e = r ? `./${u}` : "./components.server";
+  if (r)
+    for (const o of n) {
+      const i = o.tagName, m = $(i), u = $(o.tagName);
+      t.addExportDeclaration({
+        moduleSpecifier: `./${u}`,
+        namedExports: r ? [`default as ${m}`] : n.map((e) => $(e.tagName))
+      });
+    }
+  else
     t.addExportDeclaration({
-      moduleSpecifier: e,
-      ...r ? { namedExports: [`default as ${m}`] } : {}
+      moduleSpecifier: "./components.server",
+      namedExports: n.map((o) => $(o.tagName))
     });
-  }
   return t.organizeImports(), t.formatText(), t.getFullText();
 }, U = async ({
-  stencilPackageName: o,
+  stencilPackageName: n,
   components: r,
@@ -151,3 +158,3 @@ outDir: s,
   project: t,
-  hydrateModule: a
+  hydrateModule: o
 }) => {
@@ -160,8 +167,8 @@ const i = [], m = r.filter((e) => !(e.internal === !0 || d != null && d.includes(e.tagName)));
     for (const e of m) {
-      const l = v(e.tagName), p = E.join(s, `${l}.ts`), f = F({
+      const l = $(e.tagName), p = C.join(s, `${l}.ts`), f = F({
         components: [e],
-        stencilPackageName: o,
+        stencilPackageName: n,
         customElementsDir: g,
         defaultExport: !0,
-        hydrateModule: a
+        hydrateModule: o
       });
@@ -171,3 +178,3 @@ u[p] = f;
   else {
-    const e = a ? (
+    const e = o ? (
       /**
@@ -179,14 +186,14 @@ * If hydrate module is provided, we bundle all components in a single file for server side rendering.
        */
-      E.join(s, "components.server.ts")
-    ) : E.join(s, "components.ts"), l = F({
+      C.join(s, "components.server.ts")
+    ) : C.join(s, "components.ts"), l = F({
       components: m,
-      stencilPackageName: o,
+      stencilPackageName: n,
       customElementsDir: g,
       defaultExport: !1,
-      hydrateModule: a
+      hydrateModule: o
     });
     u[e] = l;
   }
-  if (a) {
-    const e = E.join(s, "components.ts"), l = P({
+  if (o) {
+    const e = C.join(s, "components.ts"), l = P({
       components: m,
@@ -203,4 +210,4 @@ esModules: c
   ), i;
-}, h = "react-output-target", A = "dist/components", C = "dist-custom-elements", w = "dist-hydrate-script", G = ({
-  outDir: o,
+}, h = "react-output-target", A = "dist/components", v = "dist-custom-elements", S = "dist-hydrate-script", G = ({
+  outDir: n,
   esModules: r,
@@ -216,20 +223,20 @@ stencilPackageName: s,
     validate(t) {
-      const a = (t.outputTargets || []).find(
-        (i) => i.type === C
+      const o = (t.outputTargets || []).find(
+        (i) => i.type === v
       );
-      if (a == null)
+      if (o == null)
         throw new Error(
-          `The '${h}' requires '${C}' output target. Add { type: '${C}' }, to the outputTargets config.`
+          `The '${h}' requires '${v}' output target. Add { type: '${v}' }, to the outputTargets config.`
         );
       if (c) {
-        if ((t.outputTargets || []).find((m) => m.type === w) == null)
+        if ((t.outputTargets || []).find((m) => m.type === S) == null)
           throw new Error(
-            `The '${h}' requires '${w}' output target when the 'hydrateModule' option is set. Add { type: '${w}' }, to the outputTargets config.`
+            `The '${h}' requires '${S}' output target when the 'hydrateModule' option is set. Add { type: '${S}' }, to the outputTargets config.`
           );
-        if (a.externalRuntime !== !1)
+        if (o.externalRuntime !== !1)
           throw new Error(
-            `The '${h}' requires the '${C}' 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 (a.dir !== void 0 && (d = a.dir), !o)
+      if (o.dir !== void 0 && (d = o.dir), !n)
         throw new Error("The 'outDir' option is required.");
@@ -247,5 +254,5 @@ if (s === void 0) {
     },
-    async generator(t, a, i) {
-      const m = i.createTimeSpan(`generate ${h} started`, !0), u = i.components, e = new S(), l = await U({
-        outDir: o,
+    async generator(t, o, i) {
+      const m = i.createTimeSpan(`generate ${h} started`, !0), u = i.components, e = new w(), l = await U({
+        outDir: n,
         components: u,
@@ -260,3 +267,3 @@ stencilPackageName: s,
       await Promise.all(
-        l.map((p) => a.fs.writeFile(p.getFilePath(), p.getFullText()))
+        l.map((p) => o.fs.writeFile(p.getFilePath(), p.getFullText()))
       ), m.finish(`generate ${h} finished`);
@@ -263,0 +270,0 @@ }

dist/react/create-component.d.ts

@@ -5,2 +5,3 @@ import type { EventName, Options } from '@lit/react';
 type EventNames = Record<string, EventName | string>;
+export type StencilReactComponent<I extends HTMLElement, E extends EventNames = {}> = ReactWebComponent<I, E>;
 /**
@@ -7,0 +8,0 @@ * Defines a custom element and creates a React component.

dist/react/index.d.ts

 export type { EventName, Options } from '@lit/react';
-export { createComponent, createSSRComponent } from './create-component';
+export { createComponent, createSSRComponent, type StencilReactComponent } from './create-component';

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "0.0.1-dev.11724176899.11a0efb7",
+  "version": "0.0.1-dev.11724191071.12bc82c8",
   "description": "React output target for @stencil/core components.",
@@ -50,3 +50,3 @@ "main": "./dist/react-output-target.js",
   },
-  "gitHead": "1a0efb7709759da345185263535aa2b70f031112",
+  "gitHead": "2bc82c8c582906c7de9f8e3fab79d03b975ea66d",
   "dependencies": {
@@ -53,0 +53,0 @@ "@lit/react": "^1.0.4",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

124184

increased by0.42%

Lines of code

2158

increased by0.42%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes