Skip to main content

@druid-ui/component

Core runtime for building DruidUI components.

Installation​

npm install @druid-ui/component

Exports​

ExportUsage
@druid-ui/componentMain (WASM sandbox)
@druid-ui/component/rawRaw mode (dev)
@druid-ui/component/jsxJSX types
@druid-ui/component/typesWIT types

API​

createComponent()​

function createComponent(
  renderFn: (ctx: Context) => JSX.Element
): Component;

Creates a component from render function.

import { createComponent } from '@druid-ui/component';

let count = 0;

export const component = createComponent((ctx) => {
  return (
    <button onClick={() => { count++; }}>
      Count: {count}
    </button>
  );
});

Context​

interface Context {
  path: string;                     // Current route
  params: Record<string, string>;   // URL params
}

Events​

All standard DOM events supported:

<button onClick={(e) => { /* handler */ }}>Click</button>
<input onInput={(e) => { /* handler */ }} />
<form onSubmit={(e) => { /* handler */ }}>...</form>

Every event execution triggers full rerender.

State​

Use module-level variables (no hooks):

let todos: string[] = [];
let input = '';

export const component = createComponent(() => {
  return (
    <div>
      <input 
        value={input}
        onInput={(e) => { input = e.target.value; }}
      />
      <button onClick={() => {
        todos.push(input);
        input = '';
      }}>
        Add
      </button>
      
      <ul>
        {todos.map(todo => <li>{todo}</li>)}
      </ul>
    </div>
  );
});

TypeScript​

Enable JSX in tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "d",
    "jsxFragmentFactory": "Fragment",
    "types": ["@druid-ui/component/jsx"]
  }
}

See Also​