npmpackage.info

Gathering detailed insights and metrics for devboi-test-component

devboi-test-component - 1.0.8 | npmpackage.info

devboi-test-component

Lit DOM Elements. 🌎 Example Repository to document how to create and publish web components with Lit & Vite

1.0.8

MIT

TypeScript

31.40 kB

Installations

npm install devboi-test-component

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

22.11.0

NPM Version

10.9.0 Pull Requests

Open

0

Total

1

Closed

1

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

TypeScript

CSS

JavaScript

HTML

TypeScript (33.99%)

CSS (27.4%)

JavaScript (20.76%)

HTML (17.85%)

Developer

DevboiDesigns

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

2 Stars

28 Commits

1 Watchers

2 Branches

1 Contributors

Updated on Feb 11, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.0.8

Package Id

devboi-test-component@1.0.8

Unpacked Size

31.40 kB

Size

9.73 kB

File Count

NPM Version

10.9.0

Node Version

22.11.0

Published on

Jan 10, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

lit

Dev Dependencies

typescript vite

Lit & Vite Web Component

Example Repository to document how to create and publish web components with vite & lit.

Lit
Vite

Create a Vite & Lit web component and publish to NPM and consume in a new project.

Create Web Component

Example setup for a package named devboi-test-component. Be sure to replace all instances of this name with your own package name.

Publishing Lit & Vite notes (with storybook)

Create package:

1npm create vite@latest devboi-test-component -- --template lit-ts

Delete assets, public dist, sample element, and remove favicon from index.html.
Create vite.config.js:

Depending on your project externalize deps that shouldn't be bundled

1import { resolve } from "path"
2import { defineConfig } from "vite"
3
4export default defineConfig({
5  build: {
6    lib: {
7      // Could also be a dictionary or array of multiple entry points
8      entry: resolve(__dirname, "src/index.ts"),
9      name: "NewCmp",
10      // the proper extensions will be added
11      fileName: "devboi-test-component",
12    },
13    rollupOptions: {
14      // make sure to externalize deps that shouldn't be bundled
15      // into your library
16      external: ["lit"],
17    },
18  },
19})

Create some test components to export in the src dir:

one-element.ts

1import { LitElement, html } from "lit"
2import { customElement, property } from "lit/decorators.js"
3
4@customElement("one-element")
5class OneElement extends LitElement {
6  @property({ type: String }) oneName = "Default Company Name"
7
8  render() {
9    return html`<pre>${this.oneName}</pre>`
10  }
11}
12
13declare global {
14  interface HTMLElementTagNameMap {
15    "one-element": OneElement
16  }
17}

two-element.ts

1import { LitElement, html } from "lit"
2import { customElement, property } from "lit/decorators.js"
3
4@customElement("two-element")
5class TwoElement extends LitElement {
6  @property({ type: String }) twoName = "Default Company Name"
7
8  render() {
9    return html`<pre>${this.twoName}</pre>`
10  }
11}
12
13declare global {
14  interface HTMLElementTagNameMap {
15    "two-element": TwoElement
16  }
17}

Create a barrel file entry point in the src dir and export all components:

src/index.ts

1export * from "./one-element"
2export * from "./two-element"

Update tsconfig.json:

1{
2  "compilerOptions": {
3    "target": "es2017",
4    "module": "es2015",
5    "moduleResolution": "node",
6    "lib": ["es2017", "dom"],
7    "experimentalDecorators": true,
8    "declaration": true,
9    "emitDeclarationOnly": true,
10    "outDir": "./types",
11    "strict": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true,
14    "noImplicitReturns": true,
15    "noFallthroughCasesInSwitch": true,
16    "allowSyntheticDefaultImports": true,
17    "forceConsistentCasingInFileNames": true,
18    "useDefineForClassFields": false
19  },
20  "include": ["src/**/*.ts"]
21}

Setup index.html and test new components with npm run dev:

Make sure to import the new src/index.ts export file.

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Test Component</title>
7    <link rel="stylesheet" href="./src/index.css" />
8    <script type="module" src="/src/index.ts"></script>
9  </head>
10  <body>
11    <one-element oneName="One-Name"></one-element>
12    <two-element twoName="TwoName"></two-element>
13  </body>
14</html>

Setup package.json:

Remove:
- private

Update the peer dependencies

Add:
- name of package
- type
- files
- main
- module
- exports
- repository

1{
2  "name": "devboi-test-component",
3  "version": "0.0.1",
4  "type": "module",
5  "files": ["dist", "types"],
6  "main": "./dist/devboi-test-component.umd.cjs",
7  "module": "./dist/devboi-test-component.js",
8  "exports": {
9    ".": {
10      "import": "./dist/devboi-test-component.js",
11      "require": "./dist/devboi-test-component.umd.cjs"
12    }
13  },
14  "repository": {
15    "type": "git",
16    "url": "https://github.com/DevboiDesigns/devboi-test-component"
17  },
18  "scripts": {
19    "dev": "vite",
20    "build": "tsc && vite build",
21    "preview": "vite preview"
22  },
23  "peerDependencies": {
24    "lit": "^3.2.1"
25  },
26  "devDependencies": {
27    "typescript": "~5.6.2",
28    "vite": "^6.0.5"
29  }
30}

Publish

Notes on publishing

1npm publish --access public

Testing in a new project

Load the module via skypack:

1<script
2  type="module"
3  src="https://cdn.skypack.dev/devboi-test-component"
4></script>

Create a new empty directory with an index.html file and add the below code. You should see the components in the browser.

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <script
7      type="module"
8      src="https://cdn.skypack.dev/devboi-test-component"
9    ></script>
10    <title>Test Component</title>
11    <style>
12      * {
13        background-color: black;
14        color: white;
15      }
16    </style>
17  </head>
18  <body>
19    <one-element oneName="Test&nbsp;Name"></one-element>
20    <fake-element fakeName="FakeName"></fake-element>
21    <two-element twoName="Two&nbsp;Name"></two-element>
22  </body>
23</html>

Notes

The repo also contains a branch config_using_vue for setting up the project to use Vue files.

Interesting helpful links:

Star on GitHub 🤩

If you found this example to be helpful star this project on GitHub.

Source code

License

No vulnerabilities found.

No security vulnerabilities found.