1.1.0 • Published 4 years ago

@altafonte/create-stencil-component v1.1.0

Weekly downloads
61
License
MIT
Repository
github
Last release
4 years ago

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:

OptionDefaultDescription
styleFileExtensionpcssExtension of style file created and referenced on TSX file
typescopedWrites the component with shadow: true or scoped: true
tagPrefixafThe 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
});