Web Components Generator

Webcomp-gen is an npm package focused on helping the developers to save time and effort in creating the template for web components.

Features!

• creates Webpack files
• link Babel
• creates a sample index file

Webcomp-gen is a lightweight package that is focused on creating webcomponents using Javascript.

Installation

webcomp-gen requires Node.js v4+ to run and npm v4+.

Install the node and npm and do the below:

$ npm i webcomp-gen -g

Usage

$ webcomp-gen create new

This triggers code for creating new component. The a set of interactive questions will be asked to complete the component-template creation.

Interaction Mocks

1. Name your component

Lets get started. Name your component: simple-popup (seperated by hiphen is recommended)

The same name will be used as the folder name and the component name.

2. Choose your language

Preffered scripting language for your component?
> Javascript
Typescript

Use your mouse to move up and down to choose your scripting language.

3. Your files location

Have you put your index & css file in this folder?
> yes
no

Use your mouse to move up and down to answer it.

If no,

Specify where your files are: C:/Users/user_name/Docuemnts/component-source (Location)

4. Name of HTML

Name of your HTML file without extensions? (default: index)  my-html

Note: Extension is not required Name of the HTML file. If left empty, its index.html else if something is specified .html

5. Name of CSS

Name of your CSS file without extensions? (default: index)  my-css

Note: Extension is not required Name of the CSS file. If left empty, its component's name else if something is specified it is considered

6. CSS Format

CSS File Format?
> my-css.min.css
my-css.css

Choose in which format your CSS file is.

7. Attributes

Mention a HTML attribute:  attribute-name
Mention its data type:  String
Add more HTML attributes?  yes

If you want to stop specifying attributes, choose no option.

Once the no option is choosed, the files are read and the template is created in the location where the command is called from.

Latest package of lit-element, webcomponents is installed and the basic dependencies are installed by default.

DONOT CLOSE UNTIL YOU SEE THE BELOW MESSAGE

NPM Install Complete. You are ready to go.!

Once you get the message, you are ready with the basic template. Start customizing it.

Running the Web Component

As webpack files are written with this command. You can easily start working with the following command:

$ npm run start

You are good to go!

Future Aspects

• Write webcomponents using Typescript

Author

Mugundh M