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

Comparing version 0.0.1-dev.11727116314.1857d8ca to 0.0.1-dev.11727393647.1ae5e0bd

dist/react-output-target.js

 import { Project as w, VariableDeclarationKind as D } from "ts-morph";
 import C from "node:path";
-const $ = (t) => t.toLowerCase().split("-").map((o) => o.charAt(0).toUpperCase() + o.slice(1)).join(""), O = (t) => t.replace(/-([a-z])/g, (o, r) => r.toUpperCase()), U = (t) => t.replace(/\/([a-z])/g, (o, r) => r.toUpperCase()), x = (t) => {
-  const o = U(t);
-  return O(`on-${o}`);
+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}`);
 }, F = ({
-  components: t,
-  stencilPackageName: o,
+  components: n,
+  stencilPackageName: a,
   customElementsDir: r,
   defaultExport: g = !1,
-  hydrateModule: l
+  hydrateModule: p
 }) => {
-  const d = new w({ useInMemoryFileSystem: !0 }), c = l ? "" : `'use client';
+  const d = new w({ useInMemoryFileSystem: !0 }), c = p ? "" : `'use client';
 
 `, 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,3 +24,3 @@ * may not hydrate due to missing Stencil runtime. Instead, import these components through the generated 'components.ts'
 `, i = `/* eslint-disable */
-`, f = l ? "createComponent, createSSRComponent" : "createComponent", e = d.createSourceFile(
+`, f = p ? "createComponent, createSSRComponent" : "createComponent", e = d.createSourceFile(
     "component.ts",
@@ -33,9 +33,9 @@ `${c}${s}${i}
   );
-  for (const p of t) {
-    const u = p.tagName, m = $(u), T = `${m}Element`, N = `${m}CustomEvent`;
+  for (const m of n) {
+    const u = m.tagName, l = $(u), T = `${l}Element`, b = `${l}CustomEvent`;
     e.addImportDeclaration({
-      moduleSpecifier: `${o}/${r}/${u}.js`,
+      moduleSpecifier: `${a}/${r}/${u}.js`,
       namedImports: [
         {
-          name: m,
+          name: l,
           alias: T
@@ -45,15 +45,15 @@ },
           name: "defineCustomElement",
-          alias: `define${m}`
+          alias: `define${l}`
         }
       ]
     });
-    const R = (p.events || []).filter((a) => a.internal === !1), E = [];
-    for (const a of R)
-      if (Object.keys(a.complexType.references).length > 0) {
-        for (const b of Object.keys(a.complexType.references))
-          a.complexType.references[b].location === "global" || e.addImportDeclaration({
-            moduleSpecifier: o,
+    const R = (m.events || []).filter((t) => t.internal === !1), E = [];
+    for (const t of R)
+      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: b,
+                name: _,
                 isTypeOnly: !0
@@ -64,6 +64,6 @@ }
         e.addImportDeclaration({
-          moduleSpecifier: o,
+          moduleSpecifier: a,
           namedImports: [
             {
-              name: N,
+              name: b,
               isTypeOnly: !0
@@ -73,28 +73,30 @@ }
         }), E.push({
-          originalName: a.name,
-          name: x(a.name),
-          type: `EventName<${N}<${a.complexType.original}>>`
+          originalName: t.name,
+          name: x(t.name),
+          type: `EventName<${b}<${t.complexType.original}>>`
         });
       } else
         E.push({
-          originalName: a.name,
-          name: x(a.name),
-          type: `EventName<CustomEvent<${a.complexType.original}>>`
+          originalName: t.name,
+          name: x(t.name),
+          type: `EventName<CustomEvent<${t.complexType.original}>>`
         });
-    const y = `${m}Events`;
+    const y = `${l}Events`;
     e.addTypeAlias({
       name: y,
-      type: E.length > 0 ? `{ ${E.map((a) => `${a.name}: ${a.type}`).join(`,
+      type: E.length > 0 ? `{ ${E.map((t) => `${t.name}: ${t.type}`).join(`,
 `)} }` : "NonNullable<unknown>"
     });
-    const _ = `/*@__PURE__*/ createComponent<${T}, ${y}>({
+    const N = `/*@__PURE__*/ createComponent<${T}, ${y}>({
     tagName: '${u}',
     elementClass: ${T},
     react: React,
-    events: {${E.map((a) => `${a.name}: '${a.originalName}'`).join(`,
+    events: {${E.map((t) => `${t.name}: '${t.originalName}'`).join(`,
 `)}} as ${y},
-    defineCustomElement: define${m}
+    defineCustomElement: define${l}
   })`, j = `/*@__PURE__*/ createSSRComponent<${T}, ${y}>({
     tagName: '${u}',
-    hydrateModule: import('${l}')
+    properties: {${m.properties.filter((t) => !!t.attribute).map((t) => `${t.name}: '${t.attribute}'`).join(`,
+`)}},
+    hydrateModule: import('${p}')
   })`, I = e.addVariableStatement({
@@ -105,7 +107,7 @@ declarationKind: D.Const,
         {
-          name: m,
+          name: l,
           type: `StencilReactComponent<${T}, ${y}>`,
-          initializer: l ? `typeof window !== 'undefined'
-              ? ${_}
-              : ${j}` : _
+          initializer: p ? `typeof window !== 'undefined'
+              ? ${N}
+              : ${j}` : N
         }
@@ -116,3 +118,3 @@ ]
       isExportEquals: !1,
-      expression: m
+      expression: l
     }) : I.setIsExported(!0);
@@ -122,4 +124,4 @@ }
 }, P = ({
-  components: t,
-  esModules: o
+  components: n,
+  esModules: a
 }) => {
@@ -138,8 +140,8 @@ const c = new w({ useInMemoryFileSystem: !0 }).createSourceFile(
   );
-  if (o)
-    for (const n of t) {
-      const s = n.tagName, i = $(s), f = $(n.tagName);
+  if (a)
+    for (const o of n) {
+      const s = o.tagName, i = $(s), f = $(o.tagName);
       c.addExportDeclaration({
         moduleSpecifier: `./${f}`,
-        namedExports: o ? [`default as ${i}`] : t.map((e) => $(e.tagName))
+        namedExports: a ? [`default as ${i}`] : n.map((e) => $(e.tagName))
       });
@@ -150,32 +152,32 @@ }
       moduleSpecifier: "./components.server",
-      namedExports: t.map((n) => $(n.tagName))
+      namedExports: n.map((o) => $(o.tagName))
     });
   return c.organizeImports(), c.formatText(), c.getFullText();
 }, A = async ({
-  stencilPackageName: t,
-  components: o,
+  stencilPackageName: n,
+  components: a,
   outDir: r,
   customElementsDir: g,
-  esModules: l,
+  esModules: p,
   excludeComponents: d,
   project: c,
-  hydrateModule: n
+  hydrateModule: o
 }) => {
-  const s = [], i = o.filter((e) => !(e.internal === !0 || d != null && d.includes(e.tagName)));
+  const s = [], i = a.filter((e) => !(e.internal === !0 || d != null && d.includes(e.tagName)));
   if (i.length === 0)
     return [];
   const f = {};
-  if (l === !0)
+  if (p === !0)
     for (const e of i) {
-      const p = $(e.tagName), u = C.join(r, `${p}.ts`), m = F({
+      const m = $(e.tagName), u = C.join(r, `${m}.ts`), l = F({
         components: [e],
-        stencilPackageName: t,
+        stencilPackageName: n,
         customElementsDir: g,
         defaultExport: !0,
-        hydrateModule: n
+        hydrateModule: o
       });
-      f[u] = m;
+      f[u] = l;
     }
   else {
-    const e = n ? (
+    const e = o ? (
       /**
@@ -188,21 +190,21 @@ * If hydrate module is provided, we bundle all components in a single file for server side rendering.
       C.join(r, "components.server.ts")
-    ) : C.join(r, "components.ts"), p = F({
+    ) : C.join(r, "components.ts"), m = F({
       components: i,
-      stencilPackageName: t,
+      stencilPackageName: n,
       customElementsDir: g,
       defaultExport: !1,
-      hydrateModule: n
+      hydrateModule: o
     });
-    f[e] = p;
+    f[e] = m;
   }
-  if (n) {
-    const e = C.join(r, "components.ts"), p = P({
+  if (o) {
+    const e = C.join(r, "components.ts"), m = P({
       components: i,
-      esModules: l
+      esModules: p
     });
-    f[e] = p;
+    f[e] = m;
   }
   return await Promise.all(
-    Object.entries(f).map(async ([e, p]) => {
-      const u = c.createSourceFile(e, p, { overwrite: !0 });
+    Object.entries(f).map(async ([e, m]) => {
+      const u = c.createSourceFile(e, m, { overwrite: !0 });
       await u.save(), s.push(u);
@@ -212,7 +214,7 @@ })
 }, h = "react-output-target", k = "dist/components", v = "dist-custom-elements", S = "dist-hydrate-script", J = ({
-  outDir: t,
-  esModules: o,
+  outDir: n,
+  esModules: a,
   stencilPackageName: r,
   excludeComponents: g,
-  customElementsDir: l,
+  customElementsDir: p,
   hydrateModule: d
@@ -224,7 +226,7 @@ }) => {
     name: h,
-    validate(n) {
-      if (l)
-        c = l;
+    validate(o) {
+      if (p)
+        c = p;
       else {
-        const s = (n.outputTargets || []).find(
+        const s = (o.outputTargets || []).find(
           (i) => i.type === v
@@ -241,11 +243,11 @@ );
       }
-      if (d && (n.outputTargets || []).find((i) => i.type === S) == null)
+      if (d && (o.outputTargets || []).find((i) => i.type === S) == null)
         throw new Error(
           `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 (r === void 0) {
-        if (n.sys && n.packageJsonFilePath) {
-          const { name: s } = JSON.parse(n.sys.readFileSync(n.packageJsonFilePath, "utf8"));
+        if (o.sys && o.packageJsonFilePath) {
+          const { name: s } = JSON.parse(o.sys.readFileSync(o.packageJsonFilePath, "utf8"));
           r = s;
@@ -255,19 +257,19 @@ }
           throw new Error(
-            `Unable to find the package name in the package.json file: ${n.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${h} 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(n, s, i) {
-      const f = i.createTimeSpan(`generate ${h} started`, !0), e = i.components, p = new w(), u = await A({
-        outDir: t,
+    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: o === !0,
+        esModules: a === !0,
         excludeComponents: g,
-        project: p,
+        project: m,
         hydrateModule: d
       });
       await Promise.all(
-        u.map((m) => s.fs.writeFile(m.getFilePath(), m.getFullText()))
+        u.map((l) => s.fs.writeFile(l.getFilePath(), l.getFullText()))
       ), f.finish(`generate ${h} finished`);
@@ -274,0 +276,0 @@ },

dist/react.js

@@ -6,12 +6,12 @@ /**
  */
-const g = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), y = (t, o, s, i, d) => {
-  const f = d == null ? void 0 : d[o];
-  f === void 0 ? (t[o] = s, s == null && o in HTMLElement.prototype && t.removeAttribute(o)) : s !== i && ((l, a, u) => {
-    let c = v.get(l);
-    c === void 0 && v.set(l, c = /* @__PURE__ */ new Map());
+const g = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), y = (t, o, s, i, l) => {
+  const f = l == null ? void 0 : l[o];
+  f === void 0 ? (t[o] = s, s == null && o in HTMLElement.prototype && t.removeAttribute(o)) : s !== i && ((d, a, u) => {
+    let c = v.get(d);
+    c === void 0 && v.set(d, c = /* @__PURE__ */ new Map());
     let n = c.get(a);
-    u !== void 0 ? n === void 0 ? (c.set(a, n = { handleEvent: u }), l.addEventListener(a, n)) : n.handleEvent = u : n !== void 0 && (c.delete(a), l.removeEventListener(a, n));
+    u !== void 0 ? n === void 0 ? (c.set(a, n = { handleEvent: u }), d.addEventListener(a, n)) : n.handleEvent = u : n !== void 0 && (c.delete(a), d.removeEventListener(a, n));
   })(t, f, s);
-}, S = ({ react: t, tagName: o, elementClass: s, events: i, displayName: d }) => {
-  const f = new Set(Object.keys(i ?? {})), l = t.forwardRef((a, u) => {
+}, S = ({ react: t, tagName: o, elementClass: s, events: i, displayName: l }) => {
+  const f = new Set(Object.keys(i ?? {})), d = t.forwardRef((a, u) => {
     const c = t.useRef(/* @__PURE__ */ new Map()), n = t.useRef(null), p = {}, m = {};
@@ -32,3 +32,3 @@ for (const [e, r] of Object.entries(a)) g.has(e) ? p[e === "className" ? "class" : e] = r : f.has(e) || e in s.prototype ? m[e] = r : p[e] = r;
   });
-  return l.displayName = d ?? s.name, l;
+  return d.displayName = l ?? s.name, d;
 }, E = ({
@@ -39,9 +39,11 @@ defineCustomElement: t,
   hydrateModule: t,
-  tagName: o
-}) => async (s) => {
-  const { createComponentForServerSideRendering: i } = await import("./ssr.js");
-  return i({
-    tagName: o,
+  properties: o,
+  tagName: s
+}) => async (i) => {
+  const { createComponentForServerSideRendering: l } = await import("./ssr.js");
+  return l({
+    tagName: s,
+    properties: o,
     renderToString: (await t).renderToString
-  })(s);
+  })(i);
 };
@@ -48,0 +50,0 @@ export {

dist/react/create-component.d.ts

@@ -17,8 +17,9 @@ import type { EventName, Options } from '@lit/react';
  */
-export declare const createSSRComponent: <I extends HTMLElement, E extends EventNames = {}>({ hydrateModule, tagName, }: {
+export declare const createSSRComponent: <I extends HTMLElement, E extends EventNames = {}>({ hydrateModule, properties, tagName, }: {
     hydrateModule: Promise<{
         renderToString: RenderToString;
     }>;
+    properties: Record<string, string>;
     tagName: string;
 }) => ReactWebComponent<I, E>;
 export {};

dist/react/ssr.d.ts

@@ -16,2 +16,3 @@ import type { EventName, ReactWebComponent } from '@lit/react';
     tagName: string;
+    properties: Record<string, string>;
     renderToString: RenderToString;
@@ -18,0 +19,0 @@ }

package.json

 {
   "name": "@stencil/react-output-target",
-  "version": "0.0.1-dev.11727116314.1857d8ca",
+  "version": "0.0.1-dev.11727393647.1ae5e0bd",
   "description": "React output target for @stencil/core components.",
@@ -19,3 +19,3 @@ "main": "./dist/react-output-target.js",
     "build:dts": "tsc -p tsconfig.json",
-    "build:tsup": "tsup",
+    "dev": "vite build --watch",
     "version": "pnpm run build",
@@ -52,6 +52,5 @@ "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\" --write",
   },
-  "gitHead": "857d8ca5cbf5bc2da386b4d264df36bd996603c5",
+  "gitHead": "ae5e0bd181da0ed53cde60a7ee5190a62f4b5f6b",
   "dependencies": {
     "@lit/react": "^1.0.4",
-    "decamelize": "^6.0.0",
     "html-react-parser": "^5.1.10",
@@ -58,0 +57,0 @@ "react-dom": "^18.3.1",

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

Improved metrics

Dependency count

5

decreased by-16.67%

Worsened metrics

Total package byte prevSize

755928

decreased by-0.12%

Lines of code

13413

decreased by-0.1%

Dependency changes

• - Removeddecamelize@^6.0.0

• - Removeddecamelize@6.0.0(transitive)