{"id":24057829,"url":"https://github.com/devboidesigns/devboi-test-component","last_synced_at":"2026-02-16T23:40:03.305Z","repository":{"id":271263021,"uuid":"912890520","full_name":"DevboiDesigns/devboi-test-component","owner":"DevboiDesigns","description":"Lit DOM Elements. 🌎 Example Repository to document how to create and publish web components with Lit \u0026 Vite","archived":false,"fork":false,"pushed_at":"2025-01-10T16:20:04.000Z","size":66,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-12T23:29:53.175Z","etag":null,"topics":["lit","npm-package","vite","web-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/devboi-test-component","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DevboiDesigns.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2025-01-06T15:51:38.000Z","updated_at":"2025-02-11T15:53:28.000Z","dependencies_parsed_at":"2025-01-06T16:53:17.566Z","dependency_job_id":"c06e9e33-f548-4da5-8584-1f235905596f","html_url":"https://github.com/DevboiDesigns/devboi-test-component","commit_stats":null,"previous_names":["devboidesigns/devboi-test-component"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/DevboiDesigns/devboi-test-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevboiDesigns%2Fdevboi-test-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevboiDesigns%2Fdevboi-test-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevboiDesigns%2Fdevboi-test-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevboiDesigns%2Fdevboi-test-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevboiDesigns","download_url":"https://codeload.github.com/DevboiDesigns/devboi-test-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevboiDesigns%2Fdevboi-test-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29524387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T21:45:09.491Z","status":"ssl_error","status_checked_at":"2026-02-16T21:44:58.452Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["lit","npm-package","vite","web-components"],"created_at":"2025-01-09T05:53:19.419Z","updated_at":"2026-02-16T23:40:03.288Z","avatar_url":"https://github.com/DevboiDesigns.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lit \u0026 Vite Web Component\n\nExample Repository to document how to create and publish web components with vite \u0026 lit.\n\n- [Lit](https://lit.dev)\n- [Vite](https://vite.dev)\n\nCreate a Vite \u0026 Lit web component and publish to NPM and consume in a new project.\n\n- [Bundle Vite in library mode notes](https://vite.dev/guide/build.html#library-mode)\n- [Helpful Stackoverflow](https://stackoverflow.com/questions/78195144/bundling-lit-js-in-vite-for-production-rolluperror-could-not-resolve-entry-mo)\n- [Lit Publish Docs](https://lit.dev/docs/v1/tools/publish/)\n\n## Create Web Component\n\nExample setup for a package named **`devboi-test-component`**. Be sure to replace all instances of this name with your own package name.\n\n- [Publishing Lit \u0026 Vite notes (with storybook)](https://dev.to/leon/vite-lit-and-storybook-43f)\n\n1. **Create package**:\n\n```sh\nnpm create vite@latest devboi-test-component -- --template lit-ts\n```\n\n2. **Delete assets, public dist, sample element, and remove favicon from `index.html`.**\n\n3. **Create vite.config.js**:\n\n_Depending on your project `externalize deps that shouldn't be bundled`_\n\n```js\nimport { resolve } from \"path\"\nimport { defineConfig } from \"vite\"\n\nexport default defineConfig({\n  build: {\n    lib: {\n      // Could also be a dictionary or array of multiple entry points\n      entry: resolve(__dirname, \"src/index.ts\"),\n      name: \"NewCmp\",\n      // the proper extensions will be added\n      fileName: \"devboi-test-component\",\n    },\n    rollupOptions: {\n      // make sure to externalize deps that shouldn't be bundled\n      // into your library\n      external: [\"lit\"],\n    },\n  },\n})\n```\n\n4. **Create some test components to export in the src dir**:\n\n- `one-element.ts`\n\n```ts\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\n@customElement(\"one-element\")\nclass OneElement extends LitElement {\n  @property({ type: String }) oneName = \"Default Company Name\"\n\n  render() {\n    return html`\u003cpre\u003e${this.oneName}\u003c/pre\u003e`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"one-element\": OneElement\n  }\n}\n```\n\n- `two-element.ts`\n\n```ts\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\n@customElement(\"two-element\")\nclass TwoElement extends LitElement {\n  @property({ type: String }) twoName = \"Default Company Name\"\n\n  render() {\n    return html`\u003cpre\u003e${this.twoName}\u003c/pre\u003e`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"two-element\": TwoElement\n  }\n}\n```\n\n5. **Create a barrel file entry point in the src dir and export all components**:\n\n- `src/index.ts`\n\n```ts\nexport * from \"./one-element\"\nexport * from \"./two-element\"\n```\n\n6. **Update `tsconfig.json`**:\n\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"es2017\",\n    \"module\": \"es2015\",\n    \"moduleResolution\": \"node\",\n    \"lib\": [\"es2017\", \"dom\"],\n    \"experimentalDecorators\": true,\n    \"declaration\": true,\n    \"emitDeclarationOnly\": true,\n    \"outDir\": \"./types\",\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"useDefineForClassFields\": false\n  },\n  \"include\": [\"src/**/*.ts\"]\n}\n```\n\n7. **Setup `index.html` and test new components with `npm run dev`**:\n\n_Make sure to import the new `src/index.ts` export file._\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eTest Component\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"./src/index.css\" /\u003e\n    \u003cscript type=\"module\" src=\"/src/index.ts\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cone-element oneName=\"One-Name\"\u003e\u003c/one-element\u003e\n    \u003ctwo-element twoName=\"TwoName\"\u003e\u003c/two-element\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n8. **Setup `package.json`**:\n\n- Remove:\n  - private\n\n_Update the peer dependencies_\n\n- Add:\n  - name of package\n  - type\n  - files\n  - main\n  - module\n  - exports\n  - repository\n\n```json\n{\n  \"name\": \"devboi-test-component\",\n  \"version\": \"0.0.1\",\n  \"type\": \"module\",\n  \"files\": [\"dist\", \"types\"],\n  \"main\": \"./dist/devboi-test-component.umd.cjs\",\n  \"module\": \"./dist/devboi-test-component.js\",\n  \"exports\": {\n    \".\": {\n      \"import\": \"./dist/devboi-test-component.js\",\n      \"require\": \"./dist/devboi-test-component.umd.cjs\"\n    }\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/DevboiDesigns/devboi-test-component\"\n  },\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"tsc \u0026\u0026 vite build\",\n    \"preview\": \"vite preview\"\n  },\n  \"peerDependencies\": {\n    \"lit\": \"^3.2.1\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"~5.6.2\",\n    \"vite\": \"^6.0.5\"\n  }\n}\n```\n\n## Publish\n\n- [Notes on publishing](https://www.freecodecamp.org/news/how-to-create-and-publish-your-first-npm-package/)\n\n```sh\nnpm publish --access public\n```\n\n## Testing in a new project\n\nLoad the module via [skypack](https://www.skypack.dev):\n\n```html\n\u003cscript\n  type=\"module\"\n  src=\"https://cdn.skypack.dev/devboi-test-component\"\n\u003e\u003c/script\u003e\n```\n\nCreate a new empty directory with an `index.html` file and add the below code. You should see the components in the browser.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003cscript\n      type=\"module\"\n      src=\"https://cdn.skypack.dev/devboi-test-component\"\n    \u003e\u003c/script\u003e\n    \u003ctitle\u003eTest Component\u003c/title\u003e\n    \u003cstyle\u003e\n      * {\n        background-color: black;\n        color: white;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cone-element oneName=\"Test\u0026nbsp;Name\"\u003e\u003c/one-element\u003e\n    \u003cfake-element fakeName=\"FakeName\"\u003e\u003c/fake-element\u003e\n    \u003ctwo-element twoName=\"Two\u0026nbsp;Name\"\u003e\u003c/two-element\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Notes\n\n- The repo also contains a branch [`config_using_vue`](https://github.com/DevboiDesigns/devboi-test-component/tree/config_using_vue) for setting up the project to use [Vue](https://vuejs.org) files.\n\n**Interesting helpful links**:\n\n- [Medium Article - create-web-components-using-google-lit](https://biondifabio.medium.com/create-web-components-using-google-lit-71099093b8fc)\n- [YT Video by same person as above on publishing](https://www.youtube.com/watch?v=hrhWXSZ7M3w)\n\n# Star on GitHub 🤩\n\nIf you found this example to be helpful\n[star this project on GitHub](https://github.com/DevboiDesigns/devboi-test-component#start-of-content).\n\n[![GitHub stars](https://img.shields.io/github/stars/devboidesigns/devboi-test-component?style=social)](https://github.com/devboidesigns/devboi-test-component#start-of-content)\n\n---\n\n[Source code](https://github.com/DevboiDesigns/devboi-test-component)\n\n[License](https://github.com/DevboiDesigns/devboi-test-component/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevboidesigns%2Fdevboi-test-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevboidesigns%2Fdevboi-test-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevboidesigns%2Fdevboi-test-component/lists"}