New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@stencil/react-output-target

Package Overview
Dependencies
Maintainers
2
Versions
113
Alerts
File Explorer

Advanced tools

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.11724437043.1612ee70 to 0.0.1-dev.11725543716.1fa90560

dist/react-output-target/create-next-wrapper.d.ts

292

dist/react-output-target.js

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

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,
import { Project as w, VariableDeclarationKind as D } from "ts-morph";
import C from "node:path";
const $ = (n) => n.toLowerCase().split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(""), O = (n) => n.replace(/-([a-z])/g, (s, i) => i.toUpperCase()), x = (n) => O(`on-${n}`), F = ({
components: n,
stencilPackageName: s,
customElementsDir: i,
defaultExport: d = !1,
useClient: g = !1
defaultExport: g = !1,
hydrateModule: l
}) => {
const p = new b({ useInMemoryFileSystem: !0 }), l = g ? `'use client';
const d = new w({ useInMemoryFileSystem: !0 }), c = l ? "" : `'use client';
` : "", e = p.createSourceFile(
"component.ts",
`${l}/**
`, a = `/**
* 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.
* 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
* 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.` : ""}
*/
/* eslint-disable */
`, r = `/* eslint-disable */
`, f = l ? "createComponent, createSSRComponent" : "createComponent", e = d.createSourceFile(
"component.ts",
`${c}${a}${r}
import React from 'react';
import { createComponent } from '@stencil/react-output-target/runtime';
import type { EventName } from '@stencil/react-output-target/runtime';
import { ${f} } from '@stencil/react-output-target/runtime';
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
`
);
for (const s of o) {
const m = s.tagName, n = S(m), u = `${n}Element`, f = `${n}CustomEvent`;
for (const p of n) {
const u = p.tagName, m = $(u), T = `${m}Element`, N = `${m}CustomEvent`;
e.addImportDeclaration({
moduleSpecifier: `${r}/${i}/${m}.js`,
moduleSpecifier: `${s}/${i}/${u}.js`,
namedImports: [
{
name: n,
alias: u
name: m,
alias: T
},
{
name: "defineCustomElement",
alias: `define${n}`
alias: `define${m}`
}
]
});
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,
const R = (p.events || []).filter((o) => o.internal === !1), E = [];
for (const o of R)
if (Object.keys(o.complexType.references).length > 0) {
for (const b of Object.keys(o.complexType.references))
o.complexType.references[b].location === "global" || e.addImportDeclaration({
moduleSpecifier: s,
namedImports: [
{
name: h,
name: b,
isTypeOnly: !0

@@ -54,112 +58,178 @@ }

e.addImportDeclaration({
moduleSpecifier: r,
moduleSpecifier: s,
namedImports: [
{
name: f,
name: N,
isTypeOnly: !0
}
]
}), $.push({
originalName: t.name,
name: C(t.name),
type: `EventName<${f}<${t.complexType.original}>>`
}), E.push({
originalName: o.name,
name: x(o.name),
type: `EventName<${N}<${o.complexType.original}>>`
});
} else
$.push({
originalName: t.name,
name: C(t.name),
type: `EventName<CustomEvent<${t.complexType.original}>>`
E.push({
originalName: o.name,
name: x(o.name),
type: `EventName<CustomEvent<${o.complexType.original}>>`
});
const E = `${n}Events`;
const y = `${m}Events`;
e.addTypeAlias({
name: E,
type: $.length > 0 ? `{ ${$.map((t) => `${t.name}: ${t.type}`).join(`,
name: y,
type: E.length > 0 ? `{ ${E.map((o) => `${o.name}: ${o.type}`).join(`,
`)} }` : "NonNullable<unknown>"
});
const F = e.addVariableStatement({
declarationKind: w.Const,
const _ = `/*@__PURE__*/ createComponent<${T}, ${y}>({
tagName: '${u}',
elementClass: ${T},
react: React,
events: {${E.map((o) => `${o.name}: '${o.originalName}'`).join(`,
`)}} as ${y},
defineCustomElement: define${m}
})`, j = `/*@__PURE__*/ createSSRComponent<${T}, ${y}>({
tagName: '${u}',
hydrateModule: import('${l}')
})`, I = e.addVariableStatement({
declarationKind: D.Const,
// React as never is a hack to by-pass a @types/react issue.
declarations: [
{
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}
})`
name: m,
type: `StencilReactComponent<${T}, ${y}>`,
initializer: l ? `typeof window !== 'undefined'
? ${_}
: ${j}` : _
}
]
});
d ? e.addExportAssignment({
g ? e.addExportAssignment({
isExportEquals: !1,
expression: n
}) : F.setIsExported(!0);
expression: m
}) : I.setIsExported(!0);
}
return e.organizeImports(), e.formatText(), e.getFullText();
}, I = async ({
stencilPackageName: o,
components: r,
}, P = ({
components: n,
esModules: s
}) => {
const c = 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 (s)
for (const t of n) {
const a = t.tagName, r = $(a), f = $(t.tagName);
c.addExportDeclaration({
moduleSpecifier: `./${f}`,
namedExports: s ? [`default as ${r}`] : n.map((e) => $(e.tagName))
});
}
else
c.addExportDeclaration({
moduleSpecifier: "./components.server",
namedExports: n.map((t) => $(t.tagName))
});
return c.organizeImports(), c.formatText(), c.getFullText();
}, U = async ({
stencilPackageName: n,
components: s,
outDir: i,
customElementsDir: d,
esModules: g,
experimentalUseClient: p,
excludeComponents: l,
project: c
customElementsDir: g,
esModules: l,
excludeComponents: d,
project: c,
hydrateModule: t
}) => {
const a = [], e = r.filter((s) => !(s.internal === !0 || l != null && l.includes(s.tagName)));
if (e.length === 0)
const a = [], r = s.filter((e) => !(e.internal === !0 || d != null && d.includes(e.tagName)));
if (r.length === 0)
return [];
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,
const f = {};
if (l === !0)
for (const e of r) {
const p = $(e.tagName), u = C.join(i, `${p}.ts`), m = F({
components: [e],
stencilPackageName: n,
customElementsDir: g,
defaultExport: !0,
useClient: p
}), f = c.createSourceFile(n, u, { overwrite: !0 });
a.push(f);
hydrateModule: t
});
f[u] = m;
}
else {
const s = `${i}/components.ts`, m = v({
components: e,
stencilPackageName: o,
customElementsDir: d,
const e = t ? (
/**
* 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(i, "components.server.ts")
) : C.join(i, "components.ts"), p = F({
components: r,
stencilPackageName: n,
customElementsDir: g,
defaultExport: !1,
useClient: p
}), n = c.createSourceFile(s, m, { overwrite: !0 });
await n.save(), a.push(n);
hydrateModule: t
});
f[e] = p;
}
return a;
}, y = "react-output-target", x = "components", T = "dist-custom-elements", R = ({
outDir: o,
esModules: r,
if (t) {
const e = C.join(i, "components.ts"), p = P({
components: r,
esModules: l
});
f[e] = p;
}
return await Promise.all(
Object.entries(f).map(async ([e, p]) => {
const u = c.createSourceFile(e, p, { overwrite: !0 });
await u.save(), a.push(u);
})
), a;
}, h = "react-output-target", A = "dist/components", S = "dist-custom-elements", v = "dist-hydrate-script", G = ({
outDir: n,
esModules: s,
stencilPackageName: i,
experimentalUseClient: d,
excludeComponents: g,
customElementsDir: p
customElementsDir: l,
hydrateModule: d
}) => {
let l = x;
let c = A;
return {
type: "custom",
name: y,
validate(c) {
if (p)
l = p;
name: h,
validate(t) {
if (l)
c = l;
else {
const a = (c.outputTargets || []).find(
(e) => e.type === T
const a = (t.outputTargets || []).find(
(r) => r.type === S
);
if (a == null)
throw new Error(
`The '${y}' requires '${T}' output target. Add { type: '${T}' }, to the outputTargets config.`
`The '${h}' requires '${S}' output target. Add { type: '${S}' }, to the outputTargets config.`
);
a.dir !== void 0 && (l = a.dir);
if (a.dir !== void 0 && (c = a.dir), a.externalRuntime !== !1)
throw new Error(
`The '${h}' requires the '${S}' output target to have 'externalRuntime: false' set in its configuration.`
);
}
if (d && (t.outputTargets || []).find((r) => r.type === v) == null)
throw new Error(
`The '${h}' requires '${v}' output target when the 'hydrateModule' option is set. Add { type: '${v}' }, to the outputTargets config.`
);
if (!n)
throw new Error("The 'outDir' option is required.");
if (i === void 0) {
if (c.sys && c.packageJsonFilePath) {
const { name: a } = JSON.parse(c.sys.readFileSync(c.packageJsonFilePath, "utf8"));
if (t.sys && t.packageJsonFilePath) {
const { name: a } = JSON.parse(t.sys.readFileSync(t.packageJsonFilePath, "utf8"));
i = a;

@@ -169,23 +239,23 @@ }

throw new Error(
`Unable to find the package name in the package.json file: ${c.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${y} output target.`
`Unable to find the package name in the package.json file: ${t.packageJsonFilePath}. Please provide the stencilPackageName manually to the ${h} output target.`
);
}
},
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,
async generator(t, a, r) {
const f = r.createTimeSpan(`generate ${h} started`, !0), e = r.components, p = new w(), u = await U({
outDir: n,
components: e,
stencilPackageName: i,
customElementsDir: l,
esModules: r === !0,
experimentalUseClient: d === !0,
customElementsDir: c,
esModules: s === !0,
excludeComponents: g,
project: n
project: p,
hydrateModule: d
});
await Promise.all(
u.map((f) => a.fs.writeFile(f.getFilePath(), f.getFullText()))
), s.finish(`generate ${y} finished`);
u.map((m) => a.fs.writeFile(m.getFilePath(), m.getFullText()))
), f.finish(`generate ${h} finished`);
},
__internal_getCustomElementsDir() {
return l;
return c;
}

@@ -195,3 +265,3 @@ };

export {
R as reactOutputTarget
G as reactOutputTarget
};
import type { ComponentCompilerMeta } from '@stencil/core/internal';
import { Project, SourceFile } from 'ts-morph';
export declare const createComponentWrappers: ({ stencilPackageName, components, outDir, customElementsDir, esModules, experimentalUseClient, excludeComponents, project, }: {
export declare const createComponentWrappers: ({ stencilPackageName, components, outDir, customElementsDir, esModules, excludeComponents, project, hydrateModule, }: {
stencilPackageName: string;

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

esModules?: boolean;
experimentalUseClient?: boolean;
excludeComponents?: string[];
project: Project;
hydrateModule?: string;
}) => Promise<SourceFile[]>;
import type { ComponentCompilerMeta } from '@stencil/core/internal';
export declare const createStencilReactComponents: ({ components, stencilPackageName, customElementsDir, defaultExport, useClient, }: {
export declare const createStencilReactComponents: ({ components, stencilPackageName, customElementsDir, defaultExport, hydrateModule, }: {
components: ComponentCompilerMeta[];

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

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

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

/**
* Enable this option to add the `use client;` directive to the generated React components.
*/
experimentalUseClient?: boolean;
/**
* The directory where the custom elements are saved.

@@ -35,2 +31,7 @@ *

customElementsDir?: string;
/**
* 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.
*/
hydrateModule?: string;
}

@@ -46,3 +47,3 @@ interface ReactOutputTarget extends OutputTargetCustom {

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

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

*/
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;
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;
return t.useLayoutEffect(() => {
if (n.current === null) return;
const e = /* @__PURE__ */ new Map();
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;
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;
}), t.useLayoutEffect(() => {
var e;
(e = n.current) == null || e.removeAttribute("defer-hydration");
}, []), 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]) });
}, []), 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]) });
});
return l.displayName = f ?? u.name, l;
}, N = ({
return l.displayName = d ?? s.name, l;
}, E = ({
defineCustomElement: t,
...a
}) => (typeof t < "u" && t(), h(a));
...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);
};
export {
N as createComponent
E as createComponent,
h as createSSRComponent
};
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>;
/**

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

defineCustomElement: () => void;
}) => import("@lit/react").ReactWebComponent<I, E>;
}) => 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>;
export {};
export type { EventName, Options } from '@lit/react';
export { createComponent } from './create-component';
export { createComponent, createSSRComponent, type StencilReactComponent } from './create-component';
{
"name": "@stencil/react-output-target",
"version": "0.0.1-dev.11724437043.1612ee70",
"version": "0.0.1-dev.11725543716.1fa90560",
"description": "React output target for @stencil/core components.",

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

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

@@ -49,7 +52,15 @@ "ts-dedent": "^2.2.0",

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

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

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

@@ -88,3 +88,3 @@ # @stencil/react-output-target

| `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. |
| `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. |

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc