@stencil/react-output-target
Advanced tools
Comparing version 0.0.1-dev.11724437043.1612ee70 to 0.0.1-dev.11725543716.1fa90560
@@ -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
Major refactor
Supply chain riskPackage 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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
756679
19
13423
6
9
3
+ Addeddecamelize@^6.0.0
+ Addedhtml-react-parser@^5.1.10
+ Addedreact-dom@^18.3.1
+ Addeddecamelize@6.0.0(transitive)
+ Addeddom-serializer@2.0.0(transitive)
+ Addeddomelementtype@2.3.0(transitive)
+ Addeddomhandler@5.0.3(transitive)
+ Addeddomutils@3.2.2(transitive)
+ Addedentities@4.5.06.0.0(transitive)
+ Addedhtml-dom-parser@5.0.13(transitive)
+ Addedhtml-react-parser@5.2.2(transitive)
+ Addedhtmlparser2@10.0.0(transitive)
+ Addedinline-style-parser@0.2.4(transitive)
+ Addedjs-tokens@4.0.0(transitive)
+ Addedloose-envify@1.4.0(transitive)
+ Addedreact@18.3.119.0.0(transitive)
+ Addedreact-dom@18.3.1(transitive)
+ Addedreact-property@2.0.2(transitive)
+ Addedscheduler@0.23.2(transitive)
+ Addedstyle-to-js@1.1.16(transitive)
+ Addedstyle-to-object@1.0.8(transitive)