@eirikb/domdom

v9.1.0

Published

3 years ago

The proactive web front-end framework for the unprofessional

Downloads

161

0High
0Medium
0Low

eirikb

Facts - not highlights, just facts:

Alternative to React + Redux or Vue + Vuex
Written in TypeScript
No virtual dom
Support for Deno (without jspm or pika)
Nothing reactive - totally unreactive - fundamentally different from React
One global observable state
- Support for re-usable components (with partition of global state)
- No local state
TSX/JSX return pure elements
Close to DOM

Deno

domdom has full support for Deno!
See https://github.com/eirikb/domdom-deno and https://deno.land/x/domdom .

Getting started

Install:

npm i @eirikb/domdom

Basics

Hello, world!

run.sh:

npx parcel index.html

index.html:

<body>
<script type="module" src="app.tsx"></script>
</body>

app.tsx:

import domdom from '@eirikb/domdom';

const { React, init } = domdom({});

const view = <div>Hello, world!</div>;

init(document.body, view);

Output:

hello-world

TSX tags are pure elements

All elements created with tsx are elements which can be instantly referenced.

app.tsx:

const element = <span>Hello, world :)</span>;
element.style.color = 'red';

Output:

pure-elements

Domponents

By creating a function you create a Domponent (component).

app.tsx:

const Button = () => <button>I am button!</button>;

const view = (
  <div>
    <Button />
  </div>
);

Output:

domponents

Domponents with options

It's possible to pass in children, and get a callback when a domponent is mounted (in DOM).
All attributes are passed in first argument.

app.tsx:

const Button = ({ color }: { color: string }, { mounted, children }: Opts) => {
  const button = <button>Hello {children}</button>;
  mounted(() => (button.style.color = color));
  return button;
};

const view = (
  <div>
    <Button color="blue">World!</Button>
  </div>
);

Output:

domponents-options

Events

All attributes starting with 'on' are added to addEventListener on the element.

app.tsx:

const view = (
  <button
    onClick={(event: Event) => {
      event.target.style.color = 'red';
    }}
  >
    Click me!
  </button>
);

Output:

events

State

State handling in domdom is simple: No local state, only one huge global state.
Setting data directly on the data object can update DOM directly in combination with don

Listen for changes

app.tsx:

interface Data {
  hello: string;
}

const { React, init, don, path } = domdom<Data>({
  hello: 'World!',
});

const view = <span>{don(path().hello)}</span>;

Output:

don

Listen for changes in arrays / objects

app.tsx:

interface User {
  name: string;
}

interface Data {
  users: User[];
}

const { React, init, don, path } = domdom<Data>({
  users: [{ name: 'Hello' }, { name: 'World' }],
});

const view = (
  <ul>
    {don(path().users.$).map(user => (
      <li>{user.name}</li>
    ))}
  </ul>
);

Output:

don-wildcard

Listen for changes in sub-listeners

app.tsx:

interface User {
  name: string;
}

interface Data {
  users: User[];
}

const { React, init, don, data, path } = domdom<Data>({
  users: [{ name: 'Hello' }, { name: 'World' }, { name: 'Yup' }],
});

const view = (
  <div>
    <ul>
      {don(path().users.$).map(user => (
        <li>{don(path(user).name)}</li>
      ))}
    </ul>
    <button onClick={() => (data.users[1].name = '🤷')}>Click me!</button>
  </div>
);

Output:

don-children

Update state

app.tsx:

interface Data {
  hello: string;
}

const { React, init, don, path, data } = domdom<Data>({
  hello: 'World!',
});

const view = (
  <div>
    <div>A: Hello, {data.hello}</div>
    <div>B: Hello, {don(path().hello)}</div>
    <div>
      <button onClick={() => (data.hello = 'there!')}>Click me!</button>
    </div>
  </div>
);

Output:

data-set

Data in attributes

app.tsx:

interface Data {
  toggle: boolean;
}

const { React, init, don, path, data } = domdom<Data>({
  toggle: false,
});

const view = (
  <div>
    <button onClick={() => (data.toggle = !data.toggle)}>Toggle</button>
    <button disabled={don(path().toggle)}>A</button>
    <button disabled={don(path().toggle).map(res => !res)}>B</button>
  </div>
);

Output:

data-attributes

Automatic binding

app.tsx:

interface Data {
  hello: string;
}

const { React, init, don, path } = domdom<Data>({
  hello: 'World!',
});

const view = (
  <div>
    <div>Hello, {don(path().hello)}</div>
    <div>
      <input type="text" bind="hello" />
    </div>
  </div>
);

Output:

bind

Pathifier

Aggregate data. Supports:

map
sort
slice
filter

And in addition accompanying "on" version, making it possible to listen for an external path:

mapOn
sortOn
sliceOn
filterOn

app.tsx:

interface User {
  name: string;
}

interface Data {
  users: User[];
}

const { React, init, don, path } = domdom<Data>({
  users: [{ name: 'Yup' }, { name: 'World' }, { name: 'Hello' }],
});

const view = (
  <ul>
    {don(path().users.$)
      .filter(user => user.name !== 'World')
      .sort((a, b) => a.name.localeCompare(b.name))
      .map(user => (
        <li>{user.name}</li>
      ))}
  </ul>
);

Output:

pathifier

Recipies

How to handle common tasks with domdom

Routing

app.tsx:

import domdom from '@eirikb/domdom';

type Route = 'panel-a' | 'panel-b';

interface Data {
  route: Route;
}

const { React, init, don, path, data } = domdom<Data>({ route: 'panel-a' });

const PanelA = () => (
  <div>
    Panel A :) <button onclick={() => gotoRoute('panel-b')}>Next panel</button>
  </div>
);

const PanelB = () => <div>Panel B! (hash is: {window.location.hash})</div>;

const view = (
  <div>
    {don(path().route).map((route: Route) => {
      switch (route) {
        case 'panel-b':
          return <PanelB />;

        default:
          return <PanelA />;
      }
    })}
  </div>
);

function gotoRoute(route: Route) {
  window.location.hash = route;
}

window.addEventListener(
  'hashchange',
  () => (data.route = window.location.hash.slice(1) as Route)
);

init(document.body, view);

Output:

routing

Structure

This is how I would suggest putting domdom in its own file for importing.

app.tsx:

import { data, don, init, path, React } from './domdom';

const view = <div>Hello, {don(path().hello)}</div>;

data.hello = 'There :)';

init(document.body, view);

domdom.ts:

import domdom from '@eirikb/domdom';

export interface Data {
  hello: string;
}

const dd = domdom<Data>({ hello: 'world' });
export const React = dd.React;
export const init = dd.init;
export const data = dd.data;
export const don = dd.don;
export const path = dd.path;

Output:

structure

Animation (garbage collection)

At writing moment domdom doesn't have any unmount callback. I'm not a big fan of destructors, unmounted, dispose or similar. This might seem silly, and it might not be obvious how to use say setInterval, without this preventing the element from ever being cleaned up by garbage collector.

This is how I would suggest putting domdom in its own file for importing.

app.tsx:

import domdom from '@eirikb/domdom';

interface Data {
  run: boolean;
  tick: number;
}

const { React, init, don, path, data } = domdom<Data>({
  run: false,
  tick: 0,
});

const view = (
  <div>
    <img
      src="https://i.imgur.com/rsD0RUq.jpg"
      style={don(path().tick).map(tick => ({ rotate: `${tick % 180}deg` }))}
    />
    <button onClick={() => (data.run = !data.run)}>Start/Stop</button>
  </div>
);

(function loop(time) {
  if (data.run) {
    data.tick = time;
  }
  requestAnimationFrame(loop);
})(0);

init(document.body, view);

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Menu

Deno

Getting started

Basics

Hello, world!

TSX tags are pure elements

Domponents

Domponents with options

Events

State

Listen for changes

Listen for changes in arrays / objects

Listen for changes in sub-listeners

Update state

Data in attributes

Automatic binding

Pathifier

Recipies

Routing

Structure

Animation (garbage collection)