@nxext/stencil

Table of Contents

• Features
• Usage
• Project schematics
• Build
• Test
• Watch
• Serve
• Storybook
• React and Angular

Features

• Generate Ionic/Pwa project
• Generate Stencil app project
• Generate library project

Usage

Add this plugin to an Nx workspace:

yarn add @nxext/stencil

or

npm install @nxext/stencil --save

Project schematics

Generate your projects:

nx g @nxext/stencil:app my-app
nx g @nxext/stencil:lib my-lib

each generator is able to generate your template with different style variants. Supported are:

--style=css (default)
--style=scss

You can generate components with:

nx g @nxext/stencil:component my-comp

or

nx g @nxext/stencil:c my-comp

If Storybook is configured a <my-comp>.stories.ts is generated.

Build

Build your project:

nx build my-app

Run commands are passed to the stencil compiler. Supported flags are:

| Parameter | Type | Default | Description | | ------------ | ------ | ---------------------------------------------------------------------------------------- | ---------------------------- | | --ci | bool | false | | | --debug | bool | false | | | --dev | bool | false | | | --docs | bool | false | | | --port=1234 | number | | | | --serve | bool | false | | | --verbose | bool | false | | | --watch | bool | false | | | --configPath | string | "libs/projectname/stencil.config.ts" or "apps/projectname/stencil.config.ts" | relative from workspace root |

You can define the path for the stencil.config.ts file like this: The configPath is set in the workspace.json/angular.json for each builder. The default used path can be change there.

Support for tests. For unit tests run:

Test

nx test my-app

Watch

Supported flags are:

• --watch

For e2e test:

nx e2e my-app

Serve

Serve with:

nx serve my-app

Supported flags are:

| Parameter | Type | Default | Description | | ------------ | ------- | ---------------------------------------------------------------------------------------- | ---------------------------- | | --debug | bool | false | | | --dev | bool | false | | | --docs | bool | false | | | --port=1234 | number | | | | --verbose | bool | false | | | --configPath | string | "libs/projectname/stencil.config.ts" or "apps/projectname/stencil.config.ts" | relative from workspace root | | --open | boolean | true | |

Storybook

You can generate Storybook configuration for an individual project with this command:

nx g @nxext/stencil:storybook-configuration my-lib

To run the generated Storybook use:

nx storybook my-lib

The Storybook startup needs an successful nx build cause of the generated loaders to work

React, Angular and Vue

You're able to generate angular/react/vue libraries for yout stencil libraries using stencils outputtargets:

nx g @nxext/stencil:add-outputtarget my-lib

With the --outputType='react' or --outputType='angular' or --outputType='vue' you can define the kind of library.