@stencil/templates

@stencil/templates

Boilerplate generators and project templates for Stencil — used internally by stencil generate and stencil init.

Install

npm install --save-dev @stencil/templates

API

getComponentBoilerplate(tagName, styleExtension?) — component TSX

Generates the .tsx file content for a new Stencil component:

import { getComponentBoilerplate } from '@stencil/templates';

// With a stylesheet
const tsx = getComponentBoilerplate('my-button', 'css');

// Without (no styleUrl in @Component decorator)
const bare = getComponentBoilerplate('my-button');

styleExtension accepts 'css', 'scss', 'sass', or 'less'.

Output for getComponentBoilerplate('my-button', 'css'):

import { Component, Host } from '@stencil/core';

@Component({
  tag: 'my-button',
  styleUrl: 'my-button.css',
  encapsulation: { type: 'shadow' },
})
export class MyButton {
  render() {
    return (
      <Host>
        <slot></slot>
      </Host>
    );
  }
}

getStyleBoilerplate(ext) — stylesheet

Generates the initial stylesheet content. Pass the file extension — not the tag name:

import { getStyleBoilerplate } from '@stencil/templates';

const css  = getStyleBoilerplate('css');   // :host {\n  display: block;\n}
const scss = getStyleBoilerplate('scss');  // same, brace syntax
const sass = getStyleBoilerplate('sass'); // :host\n  display: block  (indented syntax)

toPascalCase(str) — tag name to class name

Converts a dash-case tag name to a PascalCase class name:

import { toPascalCase } from '@stencil/templates';

toPascalCase('my-button');       // 'MyButton'
toPascalCase('ui-card-header');  // 'UiCardHeader'

generateStencilConfig(selections) — stencil.config.ts source

Generates the content for a stencil.config.ts file based on wizard selections. Returns null when the default zero-config covers everything (loader-bundle only, no signals, no docs):

import { generateStencilConfig } from '@stencil/templates';
import type { ConfigSelections } from '@stencil/templates';

const sel: ConfigSelections = {
  namespace: 'MyLib',
  outputs: ['loader', 'standalone'],
  signals: false,
  docs: ['cem'],
};

const src = generateStencilConfig(sel);
// null if only loader + no signals + no docs (zero-config case)
// otherwise: TypeScript source string ready to write to stencil.config.ts

ConfigSelections shape:

Field	Type	Description
namespace	string	Component library namespace (e.g. 'MyLib')
outputs	OutputKey[]	Output targets to enable
signals	boolean	Enable signalBacking: true
docs	DocKey[]	Documentation targets to include

OutputKey values: 'loader' | 'standalone' | 'ssr' | 'ssr-wasm' | 'www'

DocKey values: 'cem' | 'json' | 'vscode'

generatePackageJsonFields(outputs) — package.json distributable fields

Returns the module, types, and type fields to merge into package.json for a given set of output targets. Returns an empty object for 'www'-only (non-publishable app mode):

import { generatePackageJsonFields } from '@stencil/templates';

generatePackageJsonFields([]);             // loader-bundle (default)
// { type: 'module', module: './dist/loader-bundle/esm/loader.js', types: './dist/types/loader.d.ts' }

generatePackageJsonFields(['standalone']);
// { type: 'module', module: './dist/standalone/index.js', types: './dist/types/standalone.d.ts' }

generatePackageJsonFields(['www']);
// {}  — www is an app, not a publishable package

Priority when multiple outputs are selected: loader > standalone > ssr > ssr-wasm.

getTemplatePath(templateId) — project template directory

Returns the absolute path to a project template directory, ready to copy into a new project:

import { getTemplatePath, PROJECT_TEMPLATES } from '@stencil/templates';

// Currently: ['component-starter']
console.log(PROJECT_TEMPLATES);

const dir = getTemplatePath('component-starter');
// → /absolute/path/to/@stencil/templates/templates/project/component-starter

The component-starter template includes a stencil.config.ts, tsconfig.json, package.json, .gitignore, a sample component, and a utility file.