You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@stencil/react-output-target

Package Overview
Dependencies
Maintainers
2
Versions
137
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version

0.0.1-dev.11724191071.12bc82c8
to
0.0.1-dev.11724437043.1612ee70

296

dist/react-output-target.js

@@ -1,53 +0,49 @@

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,
import { Project as b, VariableDeclarationKind as w } from "ts-morph";
const S = (o) => o.toLowerCase().split("-").map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(""), _ = (o) => o.replace(/-([a-z])/g, (r, i) => i.toUpperCase()), C = (o) => _(`on-${o}`), v = ({
components: o,
stencilPackageName: r,
customElementsDir: s,
defaultExport: g = !1,
hydrateModule: c
customElementsDir: i,
defaultExport: d = !1,
useClient: g = !1
}) => {
const d = new w({ useInMemoryFileSystem: !0 }), t = c ? "" : `'use client';
const p = new b({ useInMemoryFileSystem: !0 }), l = g ? `'use client';
`, i = `/**
` : "", e = p.createSourceFile(
"component.ts",
`${l}/**
* 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.${c ? `
* Do __not__ import components from this file as server side rendered components
* may not hydrate due to missing Stencil runtime. Instead, import these components through the generated 'components.ts'
* file that re-exports all components with the 'use client' directive.` : ""}
* Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
*/
`, m = `/* eslint-disable */
`, u = c ? "createComponent, createSSRComponent" : "createComponent", e = d.createSourceFile(
"component.ts",
`${t}${i}${m}
/* eslint-disable */
import React from 'react';
import { ${u} } from '@stencil/react-output-target/runtime';
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
import { createComponent } from '@stencil/react-output-target/runtime';
import type { EventName } from '@stencil/react-output-target/runtime';
`
);
for (const l of n) {
const p = l.tagName, f = $(p), T = `${f}Element`, N = `${f}CustomEvent`;
for (const s of o) {
const m = s.tagName, n = S(m), u = `${n}Element`, f = `${n}CustomEvent`;
e.addImportDeclaration({
moduleSpecifier: `${r}/${s}/${p}.js`,
moduleSpecifier: `${r}/${i}/${m}.js`,
namedImports: [
{
name: f,
alias: T
name: n,
alias: u
},
{
name: "defineCustomElement",
alias: `define${f}`
alias: `define${n}`
}
]
});
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({
const N = (s.events || []).filter((t) => t.internal === !1), $ = [];
for (const t of N)
if (Object.keys(t.complexType.references).length > 0) {
for (const h of Object.keys(t.complexType.references))
t.complexType.references[h].location === "global" || e.addImportDeclaration({
moduleSpecifier: r,
namedImports: [
{
name: _,
name: h,
isTypeOnly: !0

@@ -61,194 +57,134 @@ }

{
name: N,
name: f,
isTypeOnly: !0
}
]
}), E.push({
originalName: a.name,
name: x(a.name),
type: `EventName<${N}<${a.complexType.original}>>`
}), $.push({
originalName: t.name,
name: C(t.name),
type: `EventName<${f}<${t.complexType.original}>>`
});
} else
E.push({
originalName: a.name,
name: x(a.name),
type: `EventName<CustomEvent<${a.complexType.original}>>`
$.push({
originalName: t.name,
name: C(t.name),
type: `EventName<CustomEvent<${t.complexType.original}>>`
});
const y = `${f}Events`;
const E = `${n}Events`;
e.addTypeAlias({
name: y,
type: E.length > 0 ? `{ ${E.map((a) => `${a.name}: ${a.type}`).join(`,
name: E,
type: $.length > 0 ? `{ ${$.map((t) => `${t.name}: ${t.type}`).join(`,
`)} }` : "NonNullable<unknown>"
});
const b = `/*@__PURE__*/ createComponent<${T}, ${y}>({
tagName: '${p}',
elementClass: ${T},
react: React,
events: {${E.map((a) => `${a.name}: '${a.originalName}'`).join(`,
`)}} as ${y},
defineCustomElement: define${f}
})`, j = `/*@__PURE__*/ createSSRComponent<${T}, ${y}>({
tagName: '${p}',
hydrateModule: import('${c}')
})`, I = e.addVariableStatement({
declarationKind: O.Const,
const F = e.addVariableStatement({
declarationKind: w.Const,
// React as never is a hack to by-pass a @types/react issue.
declarations: [
{
name: f,
type: `StencilReactComponent<${T}, ${y}>`,
initializer: c ? `typeof window !== 'undefined'
? ${b}
: ${j}` : b
name: n,
initializer: `/*@__PURE__*/ createComponent<${u}, ${E}>({
tagName: '${m}',
elementClass: ${u},
react: React,
events: { ${$.map((t) => `${t.name}: '${t.originalName}'`).join(`,
`)}} as ${E},
defineCustomElement: define${n}
})`
}
]
});
g ? e.addExportAssignment({
d ? e.addExportAssignment({
isExportEquals: !1,
expression: f
}) : I.setIsExported(!0);
expression: n
}) : F.setIsExported(!0);
}
return e.organizeImports(), e.formatText(), e.getFullText();
}, P = ({
components: n,
esModules: r
}) => {
const t = new w({ useInMemoryFileSystem: !0 }).createSourceFile(
"component.ts",
`'use client';
` + `/**
* 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.
*/
` + `/* eslint-disable */
`
);
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: "./components.server",
namedExports: n.map((o) => $(o.tagName))
});
return t.organizeImports(), t.formatText(), t.getFullText();
}, U = async ({
stencilPackageName: n,
}, I = async ({
stencilPackageName: o,
components: r,
outDir: s,
customElementsDir: g,
esModules: c,
excludeComponents: d,
project: t,
hydrateModule: o
outDir: i,
customElementsDir: d,
esModules: g,
experimentalUseClient: p,
excludeComponents: l,
project: c
}) => {
const i = [], m = r.filter((e) => !(e.internal === !0 || d != null && d.includes(e.tagName)));
if (m.length === 0)
const a = [], e = r.filter((s) => !(s.internal === !0 || l != null && l.includes(s.tagName)));
if (e.length === 0)
return [];
const u = {};
if (c === !0)
for (const e of m) {
const l = $(e.tagName), p = C.join(s, `${l}.ts`), f = F({
components: [e],
stencilPackageName: n,
customElementsDir: g,
if (g === !0)
for (const s of e) {
const m = S(s.tagName), n = `${i}/${m}.ts`, u = v({
components: [s],
stencilPackageName: o,
customElementsDir: d,
defaultExport: !0,
hydrateModule: o
});
u[p] = f;
useClient: p
}), f = c.createSourceFile(n, u, { overwrite: !0 });
a.push(f);
}
else {
const e = o ? (
/**
* If hydrate module is provided, we bundle all components in a single file for server side rendering.
* Further down we then create a re-export file that imports this file and exports all components with
* the 'use client' directive to ensure that the Stencil runtime is always being loaded but components
* are also being rendered server side
*/
C.join(s, "components.server.ts")
) : C.join(s, "components.ts"), l = F({
components: m,
stencilPackageName: n,
customElementsDir: g,
const s = `${i}/components.ts`, m = v({
components: e,
stencilPackageName: o,
customElementsDir: d,
defaultExport: !1,
hydrateModule: o
});
u[e] = l;
useClient: p
}), n = c.createSourceFile(s, m, { overwrite: !0 });
await n.save(), a.push(n);
}
if (o) {
const e = C.join(s, "components.ts"), l = P({
components: m,
esModules: c
});
u[e] = l;
}
return await Promise.all(
Object.entries(u).map(async ([e, l]) => {
const p = t.createSourceFile(e, l, { overwrite: !0 });
await p.save(), i.push(p);
})
), i;
}, h = "react-output-target", A = "dist/components", v = "dist-custom-elements", S = "dist-hydrate-script", G = ({
outDir: n,
return a;
}, y = "react-output-target", x = "components", T = "dist-custom-elements", R = ({
outDir: o,
esModules: r,
stencilPackageName: s,
stencilPackageName: i,
experimentalUseClient: d,
excludeComponents: g,
hydrateModule: c
customElementsDir: p
}) => {
let d = A;
let l = x;
return {
type: "custom",
name: h,
validate(t) {
const o = (t.outputTargets || []).find(
(i) => i.type === v
);
if (o == null)
throw new Error(
`The '${h}' requires '${v}' output target. Add { type: '${v}' }, to the outputTargets config.`
name: y,
validate(c) {
if (p)
l = p;
else {
const a = (c.outputTargets || []).find(
(e) => e.type === T
);
if (c) {
if ((t.outputTargets || []).find((m) => m.type === S) == null)
if (a == null)
throw new Error(
`The '${h}' requires '${S}' output target when the 'hydrateModule' option is set. Add { type: '${S}' }, to the outputTargets config.`
`The '${y}' requires '${T}' output target. Add { type: '${T}' }, to the outputTargets config.`
);
if (o.externalRuntime !== !1)
throw new Error(
`The '${h}' requires the '${v}' output target to have 'externalRuntime: false' set in its configuration.`
);
a.dir !== void 0 && (l = a.dir);
}
if (o.dir !== void 0 && (d = o.dir), !n)
throw new Error("The 'outDir' option is required.");
if (s === void 0) {
if (t.sys && t.packageJsonFilePath) {
const { name: i } = JSON.parse(t.sys.readFileSync(t.packageJsonFilePath, "utf8"));
s = i;
if (i === void 0) {
if (c.sys && c.packageJsonFilePath) {
const { name: a } = JSON.parse(c.sys.readFileSync(c.packageJsonFilePath, "utf8"));
i = a;
}
if (!s)
if (!i)
throw new Error(
`Unable to find the package name in the package.json file: ${t.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${h} output target.`
`Unable to find the package name in the package.json file: ${c.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${y} output target.`
);
}
},
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,
stencilPackageName: s,
customElementsDir: d,
async generator(c, a, e) {
const s = e.createTimeSpan(`generate ${y} started`, !0), m = e.components, n = new b(), u = await I({
outDir: o,
components: m,
stencilPackageName: i,
customElementsDir: l,
esModules: r === !0,
experimentalUseClient: d === !0,
excludeComponents: g,
project: e,
hydrateModule: c
project: n
});
await Promise.all(
l.map((p) => o.fs.writeFile(p.getFilePath(), p.getFullText()))
), m.finish(`generate ${h} finished`);
u.map((f) => a.fs.writeFile(f.getFilePath(), f.getFullText()))
), s.finish(`generate ${y} finished`);
},
__internal_getCustomElementsDir() {
return l;
}

@@ -258,3 +194,3 @@ };

export {
G as reactOutputTarget
R as reactOutputTarget
};

4

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, }: {
export declare const createComponentWrappers: ({ stencilPackageName, components, outDir, customElementsDir, esModules, experimentalUseClient, excludeComponents, project, }: {
stencilPackageName: string;

@@ -9,5 +9,5 @@ components: ComponentCompilerMeta[];

esModules?: boolean;
experimentalUseClient?: boolean;
excludeComponents?: string[];
project: Project;
hydrateModule?: string;
}) => Promise<SourceFile[]>;

4

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, }: {
export declare const createStencilReactComponents: ({ components, stencilPackageName, customElementsDir, defaultExport, useClient, }: {
components: ComponentCompilerMeta[];

@@ -7,3 +7,3 @@ stencilPackageName: string;

defaultExport?: boolean;
hydrateModule?: string;
useClient?: boolean;
}) => string;

18

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

@@ -24,7 +24,16 @@ import type { OutputTargetCustom } from '@stencil/core/internal';

/**
* To enable server side rendering, provide the path to the hydrate module, e.g. `my-component/hydrate`.
* By default this value is undefined and server side rendering is disabled.
* Enable this option to add the `use client;` directive to the generated React components.
*/
hydrateModule?: string;
experimentalUseClient?: boolean;
/**
* The directory where the custom elements are saved.
*
* This value is automatically detected from the Stencil configuration file for the dist-custom-elements output target.
* If you are working in an environment that uses absolute paths, consider setting this value manually.
*/
customElementsDir?: string;
}
interface ReactOutputTarget extends OutputTargetCustom {
__internal_getCustomElementsDir: () => string;
}
/**

@@ -36,2 +45,3 @@ * Creates an output target for binding Stencil components to be used in a React context

*/
export declare const reactOutputTarget: ({ outDir, esModules, stencilPackageName, excludeComponents, hydrateModule, }: ReactOutputTargetOptions) => OutputTargetCustom;
export declare const reactOutputTarget: ({ outDir, esModules, stencilPackageName, experimentalUseClient, excludeComponents, customElementsDir: customElementsDirOverride, }: ReactOutputTargetOptions) => ReactOutputTarget;
export {};

56

dist/react.js

@@ -6,44 +6,34 @@ /**

*/
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());
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));
})(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) => {
const c = t.useRef(/* @__PURE__ */ new Map()), n = t.useRef(null), p = {}, m = {};
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;
const E = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), m = /* @__PURE__ */ new WeakMap(), y = (t, a, u, i, f) => {
const d = f == null ? void 0 : f[a];
d === void 0 ? (t[a] = u, u == null && a in HTMLElement.prototype && t.removeAttribute(a)) : u !== i && ((l, c, o) => {
let s = m.get(l);
s === void 0 && m.set(l, s = /* @__PURE__ */ new Map());
let n = s.get(c);
o !== void 0 ? n === void 0 ? (s.set(c, n = { handleEvent: o }), l.addEventListener(c, n)) : n.handleEvent = o : n !== void 0 && (s.delete(c), l.removeEventListener(c, n));
})(t, d, u);
}, h = ({ react: t, tagName: a, elementClass: u, events: i, displayName: f }) => {
const d = new Set(Object.keys(i ?? {})), l = t.forwardRef((c, o) => {
const s = t.useRef(/* @__PURE__ */ new Map()), n = t.useRef(null), p = {}, v = {};
for (const [e, r] of Object.entries(c)) E.has(e) ? p[e === "className" ? "class" : e] = r : d.has(e) || e in u.prototype ? v[e] = r : p[e] = r;
return t.useLayoutEffect(() => {
if (n.current === null) return;
const e = /* @__PURE__ */ new Map();
for (const r in m) y(n.current, r, a[r], c.current.get(r), i), c.current.delete(r), e.set(r, a[r]);
for (const [r, w] of c.current) y(n.current, r, void 0, w, i);
c.current = e;
for (const r in v) y(n.current, r, c[r], s.current.get(r), i), s.current.delete(r), e.set(r, c[r]);
for (const [r, w] of s.current) y(n.current, r, void 0, w, i);
s.current = e;
}), t.useLayoutEffect(() => {
var e;
(e = n.current) == null || e.removeAttribute("defer-hydration");
}, []), p.suppressHydrationWarning = !0, t.createElement(o, { ...p, ref: t.useCallback((e) => {
n.current = e, typeof u == "function" ? u(e) : u !== null && (u.current = e);
}, [u]) });
}, []), p.suppressHydrationWarning = !0, t.createElement(a, { ...p, ref: t.useCallback((e) => {
n.current = e, typeof o == "function" ? o(e) : o !== null && (o.current = e);
}, [o]) });
});
return l.displayName = d ?? s.name, l;
}, E = ({
return l.displayName = f ?? u.name, l;
}, N = ({
defineCustomElement: t,
...o
}) => (typeof t < "u" && t(), S(o)), h = ({
hydrateModule: t,
tagName: o
}) => async (s) => {
const { createComponentForServerSideRendering: i } = await import("./ssr.js");
return i({
tagName: o,
renderToString: (await t).renderToString
})(s);
};
...a
}) => (typeof t < "u" && t(), h(a));
export {
E as createComponent,
h as createSSRComponent
N as createComponent
};

15

dist/react/create-component.d.ts
import type { EventName, Options } from '@lit/react';
import { type ReactWebComponent } from '@lit/react';
import type { RenderToString } from './ssr';
type EventNames = Record<string, EventName | string>;
export type StencilReactComponent<I extends HTMLElement, E extends EventNames = {}> = ReactWebComponent<I, E>;
/**

@@ -12,13 +9,3 @@ * Defines a custom element and creates a React component.

defineCustomElement: () => void;
}) => ReactWebComponent<I, E>;
/**
* Defines a custom element and creates a React component for server side rendering.
* @public
*/
export declare const createSSRComponent: <I extends HTMLElement, E extends EventNames = {}>({ hydrateModule, tagName, }: {
hydrateModule: Promise<{
renderToString: RenderToString;
}>;
tagName: string;
}) => ReactWebComponent<I, E>;
}) => import("@lit/react").ReactWebComponent<I, E>;
export {};

2

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

19

package.json
{
"name": "@stencil/react-output-target",
"version": "0.0.1-dev.11724191071.12bc82c8",
"version": "0.0.1-dev.11724437043.1612ee70",
"description": "React output target for @stencil/core components.",

@@ -41,4 +41,2 @@ "main": "./dist/react-output-target.js",

"devDependencies": {
"@types/node": "^20.14.12",
"@types/react": "^18.2.74",
"react": "^18.2.0",

@@ -51,13 +49,7 @@ "ts-dedent": "^2.2.0",

},
"gitHead": "2bc82c8c582906c7de9f8e3fab79d03b975ea66d",
"gitHead": "612ee706d141dd58ae9a6bcc1a029df6ee919c8a",
"dependencies": {
"@lit/react": "^1.0.4",
"html-react-parser": "^5.1.10",
"ts-morph": "^22.0.0"
},
"peerDependenciesMeta": {
"@stencil/core": {
"optional": false
}
},
"exports": {

@@ -77,11 +69,4 @@ ".": {

"default": "./dist/react.js"
},
"./ssr": {
"types": "./dist/react/ssr.d.ts",
"browser": {
"default": "./dist/ssr.js"
},
"default": "./dist/ssr.js"
}
}
}

15

README.md

@@ -82,8 +82,9 @@ # @stencil/react-output-target

| Property | Description |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `outDir` (required) | The directory where the React components will be generated. |
| `esModule` | If `true`, the output target will generate a separate ES module for each React component wrapper. Defaults to `false`. |
| `stencilPackageName` | The name of the package that exports the Stencil components. Defaults to the package.json detected by the Stencil compiler. |
| `excludeComponents` | An array of component tag names to exclude from the React output target. Useful if you want to prevent certain web components from being in the React library. |
| `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. |
| Property | Description |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `outDir` (required) | The directory where the React components will be generated. |
| `esModule` | If `true`, the output target will generate a separate ES module for each React component wrapper. Defaults to `false`. |
| `stencilPackageName` | The name of the package that exports the Stencil components. Defaults to the package.json detected by the Stencil compiler. |
| `excludeComponents` | An array of component tag names to exclude from the React output target. Useful if you want to prevent certain web components from being in the React library. |
| `experimentalUseClient` | If `true`, the generated output target will include the [`use client;`](https://react.dev/reference/react/use-client) directive. |
| `customElementsDir` | The directory where the custom elements are saved. This value is automatically detected from the Stencil configuration file for the `dist-custom-elements` output target. If you are working in an environment that uses absolute paths, consider setting this value manually. |
dist/react-output-target/create-next-wrapper.d.ts
dist/react/ssr.d.ts
dist/ssr.cjs
dist/ssr.js
dist/react-output-target.cjs

Sorry, the diff of this file is not supported yet

dist/react.cjs

Sorry, the diff of this file is not supported yet