mika

Repositories

2

Projects Packages

13

Public activity Starred repositories

@mika/eddy (0.1.0)

Published 2026-05-24 07:44:33 +00:00 by mika

Installation

Setup this registry in your project .npmrc file:

@mika:registry=

To install the package using npm, run the following command:

npm install @mika/eddy@0.1.0

or add it to the package.json file:

"@mika/eddy": "0.1.0"

For more information on the npm registry, see the documentation.

About this package

Eddy

Eddy is a tiny custom-element component helper for browser apps that use Blackcurrant.

It owns component render scheduling, local component signals, reactive reads, Blackcurrant-backed queries, and constructed stylesheet caching.

Usage

import Eddy from "@mika/eddy";
import Blackcurrant from "@mika/blackcurrant";

const blackcurrant = Blackcurrant(...)
await Blackcurrant.ready()

const component = Eddy({
    blackcurrant,
    renderErrors: true,
    onError(error, context) {
        console.error(context.phase, error);
    },
});

export default component;

The returned component function is passed to a custom-element runtime:

import { html } from "lit-html";

Elements.define(
    "k-example",
    component(({ css, read }) => {
        css(new URL("./example.css", import.meta.url));
        const label = read.attr("label");

        return html`<p>${label}</p>`;
    })
);

Import html and nothing from lit-html in the consuming app.

Options

• blackcurrant: optional object with watch(strings, ...values) and status() methods. Required only when components call read.query or read.status.
• renderErrors: defaults to true. When enabled, caught component errors are rendered into the component shadow DOM.
• onError: optional callback receiving (error, context).

All caught errors are logged with console.error.

Styles

Stylesheets passed to css(path) are fetched, cached as constructed stylesheets, and adopted into the component shadow root.

For HMR, notify Eddy when a CSS file changes:

hmr.onChange((path) => component.styleSheetChanged(path));

component.styleSheetChanged(path) returns true when Eddy knows that stylesheet and handled the change.

Details

npm

2026-05-24 07:44:33 +00:00

53

latest

6.3 KiB

Assets (1)

eddy-0.1.0.tgz 6.3 KiB

Versions (1) View all

0.1.0 2026-05-24