stencil-solid-output-target

Stencil can generate Solid component wrappers for your web components. This allows your Stencil components to be used within a Solid application.

Installation

npm install stencil-solid-output-target

Versioning

Here are the versions of stencil-solid-output-target that correspond to the different versions of Stencil:

Stencil Version	`stencil-solid-output-target` Version
2.x	0.x
3.x	3.x
4.x	4.x

Usage

In your stencil.config.ts add the following configuration to the outputTargets section:

import { Config } from '@stencil/core';
import { solidOutputTarget } from 'stencil-solid-output-target';

export const config: Config = {
  namespace: 'demo',
  outputTargets: [
    solidOutputTarget({
      componentCorePackage: 'component-library',
      proxiesFile: '../component-library-solid/src/components.ts',
    }),
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
  ],
};

Config Options

Property	Description
`componentCorePackage`	The NPM package name of your Stencil component library. This package is used as a dependency for your Solid wrappers.
`proxiesFile`	The output file of all the component wrappers generated by the output target. This file path should point to a location within your Solid library/project.
`excludeComponents`	An array of tag names to exclude from generating component wrappers for. This is helpful when have a custom framework implementation of a specific component or need to extend the base component wrapper behavior.
`loaderDir`	This is the path to where the `defineCustomElements` function exists in your built project. If `loaderDir` is not provided, the `/dist/loader` directory will be used.
`includePolyfills`	If `true`, polyfills will automatically be imported and the `applyPolyfills` function will be called in your proxies file. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`.
`includeDefineCustomElements`	If `true`, all Web Components will automatically be registered with the Custom Elements Registry. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`.
`includeImportCustomElements`	If `true`, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the Custom Elements Bundle and will not work with lazy loaded components.
`customElementsDir`	This is the directory where the custom elements are imported from when using the Custom Elements Bundle. Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`.

Consumption

We can simply import the components we need after installing the package.

import { MyComponent } from "component-library";

Notes

This package is very inspired by @stencil/react-output-target. It shares the same logic and the same configuration options.

arthur-fontaine / stencil-solid-output-target