@beardcoder/simple-components

Minimal, dependency-free, and interactive UI component API for vanilla JS/TS projects.

Features

• Minimal, composable UI component API
• Reactivity and hooks (e.g. useLocalStorage, useMediaQuery)
• TypeScript-first, ESM/CJS compatible
• No dependencies, fast and tree-shakeable

Installation

bun add @beardcoder/simple-components
pnpm add @beardcoder/simple-components
npm i @beardcoder/simple-components

Usage

Create a component

import { createComponent, mount } from '@beardcoder/simple-components';

const MyComponent = createComponent('.my-button', ({ element }) => {
  element.addEventListener('click', () => alert('Hello!'));
});

mount(MyComponent);

or

import { createComponentAndMount } from '@beardcoder/simple-components';

createComponentAndMount('.my-button', ({ element }) => {
  element.addEventListener('click', () => alert('Hello!'));
});

useLocalStorage

import { useLocalStorage } from '@beardcoder/simple-components';

const counter = useLocalStorage('counter', 0);
counter.value++; // persists to localStorage
counter.reset(); // resets to initial value and removes from localStorage

useMediaQuery

import { useMediaQuery } from '@beardcoder/simple-components';

const isDark = useMediaQuery('(prefers-color-scheme: dark)');
console.log('Dark mode?', isDark);

usePreferredColorScheme

import { usePreferredColorScheme } from '@beardcoder/simple-components';

const scheme = usePreferredColorScheme();
console.log('Preferred color scheme:', scheme); // 'dark', 'light', or 'no-preference'

Development

Install dependencies:

bun install

Build the package:

bun run build

Start development mode (watch):

bun run dev

Format code:

bun run format

Release

Conventional commits drive automatic versioning and changelog.

1. Make conventional commits (feat:, fix:, chore:, docs:, refactor:, perf:, test:). Major bumps come from commits containing BREAKING CHANGE:.

2. Cut a release (bumps version, updates CHANGELOG.md, creates a git tag):

bun run release              # auto-detect version from commits
# or explicitly
bun run release:patch        # 0.4.1
bun run release:minor        # 0.5.0
bun run release:major        # 1.0.0
bun run release:prerelease   # 1.0.0-rc.0

3. Push tags and publish to npm:

bun run release:publish

Notes:

• The release scripts run format, tests, and build before tagging.
• Ensure you’re on a clean git branch with all changes committed.

License

MIT