@stencil/react-output-target
- Version 1.1.0
- Published
- 202 kB
- 4 dependencies
- MIT license
Install
npm i @stencil/react-output-target
yarn add @stencil/react-output-target
pnpm add @stencil/react-output-target
Overview
React output target for @stencil/core components.
Index
Functions
function reactOutputTarget
reactOutputTarget: ({ outDir, esModules, stencilPackageName, excludeComponents, customElementsDir: customElementsDirOverride, hydrateModule, excludeServerSideRenderingFor, serializeShadowRoot,}: ReactOutputTargetOptions) => ReactOutputTarget;
Creates an output target for binding Stencil components to be used in a React context
Parameter outputTarget
the user-defined output target defined in a Stencil configuration file
Returns
an output target that can be used by the Stencil compiler
Modifiers
@public
Interfaces
interface ReactOutputTargetOptions
interface ReactOutputTargetOptions {}
property customElementsDir
customElementsDir?: string;
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.
property esModules
esModules?: boolean;
If
true
, the output target will generate a separate ES module for each React component wrapper. Defaults tofalse
. false
property excludeComponents
excludeComponents?: string[];
Specify the components that should be excluded from the React output target.
property excludeServerSideRenderingFor
excludeServerSideRenderingFor?: string[];
Specify the components that should be excluded from server side rendering.
property hydrateModule
hydrateModule?: 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.
property outDir
outDir: string;
Specify the output directory or path where the generated React components will be saved.
property serializeShadowRoot
serializeShadowRoot?: RenderToStringOptions['serializeShadowRoot'];
Configure how Stencil serializes the components shadow root. - If set to
declarative-shadow-dom
the component will be rendered within a Declarative Shadow DOM. - If set toscoped
Stencil will render the contents of the shadow root as ascoped: true
component and the shadow DOM will be created during client-side hydration. - Alternatively you can mix and match the two by providing an object withdeclarative-shadow-dom
andscoped
keys, the value arrays containing the tag names of the components that should be rendered in that mode.Examples: -
{ 'declarative-shadow-dom': ['my-component-1', 'another-component'], default: 'scoped' }
Render all components asscoped
apart frommy-component-1
andanother-component
-{ 'scoped': ['an-option-component'], default: 'declarative-shadow-dom' }
Render all components withindeclarative-shadow-dom
apart froman-option-component
-'scoped'
Render all components asscoped
-false
disables shadow root serialization*NOTE*
true
has been deprecated in favor ofdeclarative-shadow-dom
andscoped
'declarative-shadow-dom'
property stencilPackageName
stencilPackageName?: string;
The package name of the Stencil project.
This value is automatically detected from the package.json file of the Stencil project. If the validation fails, you can manually assign the package name.
Package Files (1)
Dependencies (4)
Dev Dependencies (9)
Peer Dependencies (3)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@stencil/react-output-target
.
- Markdown[](https://www.jsdocs.io/package/@stencil/react-output-target)
- HTML<a href="https://www.jsdocs.io/package/@stencil/react-output-target"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 2615 ms. - Missing or incorrect documentation? Open an issue for this package.