{"id":16117903,"url":"https://github.com/aelbore/create-custom-elements","last_synced_at":"2025-03-18T10:30:58.826Z","repository":{"id":97376756,"uuid":"154008096","full_name":"aelbore/create-custom-elements","owner":"aelbore","description":"Boilerplate to create custom elements","archived":false,"fork":false,"pushed_at":"2020-05-15T11:30:57.000Z","size":182,"stargazers_count":12,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-16T19:21:41.760Z","etag":null,"topics":["boilerplate","components","create","create-custom-elements","custom-elements","custom-elements-ts","customelements","typescript","web-components","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aelbore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-21T12:54:37.000Z","updated_at":"2024-11-22T18:12:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"fe40e143-edc8-4464-9906-6840d8bba7aa","html_url":"https://github.com/aelbore/create-custom-elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelbore%2Fcreate-custom-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelbore%2Fcreate-custom-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelbore%2Fcreate-custom-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelbore%2Fcreate-custom-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aelbore","download_url":"https://codeload.github.com/aelbore/create-custom-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244201739,"owners_count":20415138,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","components","create","create-custom-elements","custom-elements","custom-elements-ts","customelements","typescript","web-components","webcomponents"],"created_at":"2024-10-09T20:47:38.551Z","updated_at":"2025-03-18T10:30:58.814Z","avatar_url":"https://github.com/aelbore.png","language":"TypeScript","readme":"# create-custom-elements\nBoilerplate to create custom elements\n\n## Getting Started \n\n* Clone repository\n  ```\n  git clone https://github.com/aelbore/create-custom-elements.git\n  ```\n* Install dependencies\n  ```\n  npm install\n  ```\n* Start the Application\n  ```\n  npm start\n  ```\n  - this will build, watch the file changes, live reload and open browser\n* Run unit test\n  ```\n  npm test\n  ```\n\n\u003cbr /\u003e\n\n## Step by Step example\n* [ Star Rating ](https://github.com/aelbore/create-custom-elements/tree/star-rating)\n* [ Vanilla Javascript ](https://github.com/aelbore/create-custom-elements/tree/vanilla-js)\n\n## Demo\n* [ plnkr ](https://next.plnkr.co/edit/CvFYOqAWzoTM6P4L)\n* [ stackblitz ](https://stackblitz.com/edit/typescript-ycfbcu?file=star-rating.element.ts)\n* [ codesandbox ](https://codesandbox.io/s/vqwk9011o5)\n\n\u003cbr /\u003e\n\n### Project Structure\n```\n.\n├── node_modules \n├── server                                # mock/fake data serve as you api         \n├── src                                   # all your code should be inside `src` folder\n|   ├─ app                                # Application Project specific folder\n|   |  ├─ app.element.html \n|   |  ├─ app.element.scss\n|   |  ├─ app.element.ts \n|   |  ├─ index.ts  \n|   |  └─ package.json    \n|   ├─ elements                           # reusable custom elements \n|   |  ├─ \u003cinput\u003e                         # example of web components folder\n|   |  |  ├─ src                          # this should mandatory, all source code should be inside `src`\n|   |  |  |  ├─ index.ts                  # export .ts file \u003cinput.element.ts\u003e\n|   |  |  |  ├─ input.element.html        # \u003coptional\u003e, all your markup codes\n|   |  |  |  ├─ input.element.scss        # \u003coptional\u003e, all your style codes, you can have `.css`.\n|   |  |  |  ├─ input.element.spec.ts     # \u003coptional\u003e, spec file, contain your unit test\n|   |  |  |  └─ input.element.ts          # main web component, define your custom elements\n|   |  |  └── package.json                # \u003cmandatory\u003e `name` should be same as folder name\n|   |  ├─ .....\t \t             \n|   |  |  \n|   ├─ libs\n|      ├─ \u003cprofile-card\u003e                   # library or micro-app web components\n|      |  ├─ src                           # this should mandatory, all source code should be inside `src`\n|      |  |  ├─ index.ts                   # \u003cmandatory\u003e export .ts file \u003cprofile-card.element.ts\u003e\n|      |  |  ├─ profile-card.element.html  # \u003coptional\u003e, all your markup codes\n|      |  |  ├─ profile-card.element.scss  # \u003coptional\u003e, all your style codes, you can have `.css`.\n|      |  |  ├─ profile-card.element.ts    # \u003cmandatory\u003e main web component, define your custom elements\n|      |  |  └─ profile-card.ts            # \u003coptional\u003e define your model, service or utils here.\n|      |  └── package.json                 # \u003cmandatory\u003e `name` should be same as folder name\n|      ├─ .....\t\n|\n|\n├── README.md\n├── .devtools.json                        # add config for build and server ie. static folders.  \n├── rollup.config.js                      # rollup config, override default config.  \n├── gulpfile.js                           # customize your build, add task      \n├── package.json\n└── tsconfig.json\n```\n\n\u003cbr /\u003e\n\n##### Delete dist and .tmp folder\n```\nnpm run clean.all\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faelbore%2Fcreate-custom-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faelbore%2Fcreate-custom-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faelbore%2Fcreate-custom-elements/lists"}