wc.js

Exports (auto)

Web Components adapter.

Import example

import { defineComponent } from "@ztools.org/runtime/client";

When to use

Use wc.js when you want framework-agnostic custom elements with reactive internals and plain HTML usage.

defineComponent(name, Component, options?)

Defines a custom element and mounts ztools content inside it.

Component receives:

Common options:

Minimal example

import { defineComponent, tags as t } from "@ztools.org/runtime/client";

defineComponent("x-hello", (props) => {
  return t.div(
    t.strong("Hello, "),
    () => props.$["name"]() || "world"
  );
}, {
  shadow: true,
  observedAttributes: ["name"]
});

<x-hello name="Max"></x-hello>

Event example (props.emit)

defineComponent("x-counter", (props) => {
  let value = Number(props.$["value"]() || 0);

  return t.button({
    onClick: () => {
      value += 1;
      props.setAttr("value", String(value));
      props.emit("change", { value });
    }
  }, () => `Count: ${props.$["value"]() || 0}`);
}, {
  shadow: true,
  observedAttributes: ["value"]
});

document.querySelector("x-counter")
  .addEventListener("change", (e) => {
    console.log("new value", e.detail.value);
  });

Examples

Related APIs