@altafonte/create-stencil-component v1.1.0

create-stencil-component

The script will create missing directories and the following boilerplate files:

• component-name.tsx

import { Component, h, Host, ComponentInterface, JSX } from "@stencil/core";

@Component({
  tag: "af-component-name",
  styleUrl: "component-name.pcss",
  scoped: true,
})
export class ComponentName implements ComponentInterface {
  render(): JSX.Element {
    return <Host></Host>;
  }
}

• component-name.pcss

:host {
  display: block;
}

Installation

npm install --save @altafonte/create-stencil-component

Usage

const { createNewComponent } = require("@altafonte/create-stencil-component");

const componentsDirectory = "src/components";
const newComponent = "utils/link";

// will generate src/components/utils/link directory
// with link.tsx and link.pcss inside
createNewComponent(componentsDirectory, newComponent);

Customization

You can pass an object to configure some behavior of script.

You can configure:

Example:

const { createNewComponent } = require("@altafonte/create-stencil-component");

const componentsDirectory = "src/components";
const newComponent = "utils/link";

// will generate src/components/utils/link directory
// with link.tsx and link.pcss inside
createNewComponent(componentsDirectory, newComponent, {
  styleFileExtension: "css", // styleUrl: "link.css"
  type: "shadow", // shadow: true
  tagPrefix: "cool-company", // tag: cool-company-link
});