1.1.0 • Published 4 years ago
@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:
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
});