Personal Components

A small, personal web component library built with Lit, Vite, and Storybook.

Development

npm install
npm run storybook

The component stories will be available at http://localhost:6006.

Use as an ESM package

npm install @ryandejaegher/personal-components

import '@ryandejaegher/personal-components';

<personal-button variant="primary">Save changes</personal-button>

Use from a CDN

The IIFE build bundles Lit and registers the custom elements, so it can be loaded directly with a classic script tag:

<script src="https://unpkg.com/@ryandejaegher/personal-components@latest/dist/personal-components.iife.js"></script>

<personal-button variant="primary">Save changes</personal-button>

The same package also exposes an ESM build for browsers that support modules:

<script type="module" src="https://unpkg.com/@ryandejaegher/personal-components@latest/dist/personal-components.js"></script>

Checks and builds

npm run check             # typecheck, unit tests, and library build
npm run build:storybook  # production Storybook build

The library build writes both dist/personal-components.js (ESM) and dist/personal-components.iife.js (CDN/classic script), plus TypeScript declarations.

Publishing

The GitHub Actions workflow runs checks and a production Storybook build for pull requests and pushes to main. Version tags stage releases on npm for manual 2FA approval. Add a repository secret named NPM_TOKEN.

Initial release

npm cannot stage a package that does not exist yet. For the first version, use an authenticated local checkout and publish directly:

npm install --global [email protected]
npm ci
npm run bootstrap-release

The scoped package is published publicly and npm will require 2FA.

Subsequent staged releases

Update the version in package.json, commit it, and push a matching tag:

git tag v0.2.0
git push origin main
git push origin v0.2.0

The tag workflow validates that the tag exactly matches the package version, builds the package, and runs npm stage publish. Review the staged package on npmjs.com, then approve it with npm 2FA. The workflow skips staging if that exact package version is already published.