https://github.com/aelbore/create-custom-elements
Boilerplate to create custom elements
https://github.com/aelbore/create-custom-elements
boilerplate components create create-custom-elements custom-elements custom-elements-ts customelements typescript web-components webcomponents
Last synced: 10 months ago
JSON representation
Boilerplate to create custom elements
- Host: GitHub
- URL: https://github.com/aelbore/create-custom-elements
- Owner: aelbore
- Created: 2018-10-21T12:54:37.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-05-15T11:30:57.000Z (over 5 years ago)
- Last Synced: 2025-03-16T19:21:41.760Z (10 months ago)
- Topics: boilerplate, components, create, create-custom-elements, custom-elements, custom-elements-ts, customelements, typescript, web-components, webcomponents
- Language: TypeScript
- Homepage:
- Size: 178 KB
- Stars: 12
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# create-custom-elements
Boilerplate to create custom elements
## Getting Started
* Clone repository
```
git clone https://github.com/aelbore/create-custom-elements.git
```
* Install dependencies
```
npm install
```
* Start the Application
```
npm start
```
- this will build, watch the file changes, live reload and open browser
* Run unit test
```
npm test
```
## Step by Step example
* [ Star Rating ](https://github.com/aelbore/create-custom-elements/tree/star-rating)
* [ Vanilla Javascript ](https://github.com/aelbore/create-custom-elements/tree/vanilla-js)
## Demo
* [ plnkr ](https://next.plnkr.co/edit/CvFYOqAWzoTM6P4L)
* [ stackblitz ](https://stackblitz.com/edit/typescript-ycfbcu?file=star-rating.element.ts)
* [ codesandbox ](https://codesandbox.io/s/vqwk9011o5)
### Project Structure
```
.
├── node_modules
├── server # mock/fake data serve as you api
├── src # all your code should be inside `src` folder
| ├─ app # Application Project specific folder
| | ├─ app.element.html
| | ├─ app.element.scss
| | ├─ app.element.ts
| | ├─ index.ts
| | └─ package.json
| ├─ elements # reusable custom elements
| | ├─ # example of web components folder
| | | ├─ src # this should mandatory, all source code should be inside `src`
| | | | ├─ index.ts # export .ts file
| | | | ├─ input.element.html # , all your markup codes
| | | | ├─ input.element.scss # , all your style codes, you can have `.css`.
| | | | ├─ input.element.spec.ts # , spec file, contain your unit test
| | | | └─ input.element.ts # main web component, define your custom elements
| | | └── package.json # `name` should be same as folder name
| | ├─ .....
| | |
| ├─ libs
| ├─ # library or micro-app web components
| | ├─ src # this should mandatory, all source code should be inside `src`
| | | ├─ index.ts # export .ts file
| | | ├─ profile-card.element.html # , all your markup codes
| | | ├─ profile-card.element.scss # , all your style codes, you can have `.css`.
| | | ├─ profile-card.element.ts # main web component, define your custom elements
| | | └─ profile-card.ts # define your model, service or utils here.
| | └── package.json # `name` should be same as folder name
| ├─ .....
|
|
├── README.md
├── .devtools.json # add config for build and server ie. static folders.
├── rollup.config.js # rollup config, override default config.
├── gulpfile.js # customize your build, add task
├── package.json
└── tsconfig.json
```
##### Delete dist and .tmp folder
```
npm run clean.all
```