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:

| Option | Default | Description | | ------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------- | | styleFileExtension | pcss | Extension of style file created and referenced on TSX file | | type | scoped | Writes the component with shadow: true or scoped: true | | tagPrefix | af | The prefix for the component tag. By default af-${component-name}. Set it to "" to create component without prefix |

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
});