mise 3.0.0 → 2026.6.0

package/src/vdom/vdom.js

@@ -1,141 +0,0 @@
-import { getUniques } from '../utils';
-import { types } from './fiber';
-
-const setProp = (element, attribute, previous, next) => {
-  if (attribute === 'value') {
-    element[attribute] = next;
-    return;
-  }
-
-  if (typeof next === 'boolean') {
-    if (next) {
-      element.setAttribute(attribute, next);
-      element[attribute] = next;
-    }
-    return;
-  }
-
-  if (typeof next === 'function') {
-    try {
-      element[attribute] = next;
-    } catch (e) {
-      /* sometimes lifecycle methods throw. we don't particularly care */
-    }
-
-    return;
-  }
-
-  if (!next || (typeof next === 'object' && !Object.keys(next).length)) {
-    element.removeAttribute(attribute);
-    return;
-  }
-
-  if (attribute === 'style') {
-    const styles = getUniques(next, previous);
-
-    for (const style of styles) {
-      if (!next[style]) {
-        element.style[style] = '';
-      } else if (!previous || !previous[style] || previous[style] !== next[style]) {
-        element.style[style] = next[style];
-      }
-    }
-
-    return;
-  }
-
-  element.setAttribute(attribute, next);
-};
-
-const setProps = (element, props) => {
-  for (const [attribute, value] of Object.entries(props)) {
-    setProp(element, attribute, {}, value);
-  }
-};
-
-const createElement = (node) => {
-  if (typeof node === 'string') {
-    return document.createTextNode(node);
-  }
-
-  const { type, props, children } = node;
-  const element = document.createElement(type);
-  setProps(element, props);
-
-  children
-    .map(createElement)
-    .forEach(child => element.appendChild(child));
-
-  return element;
-};
-
-const updateProps = (element, previous, next) => {
-  const props = getUniques(previous, next);
-
-  for (const prop of props) {
-    setProp(element, prop, previous[prop], next[prop]);
-  }
-};
-
-const paint = (fibers) => {
-  for (const fiber of fibers) {
-    const {
-      action,
-      next,
-      previous,
-      lifecycle,
-      parent,
-    } = fiber;
-
-    switch (action) {
-      case (types.create): {
-        parent.appendChild(next.element);
-
-        if (lifecycle) {
-          lifecycle(next.element);
-        }
-
-        break;
-      }
-
-      case (types.remove): {
-        if (lifecycle) {
-          lifecycle(next.element)(previous.element.remove.bind(previous.element));
-        } else {
-          previous.element.remove();
-        }
-
-        break;
-      }
-
-      case (types.replace): {
-        if (lifecycle) {
-          lifecycle(next.element)(previous.props);
-        }
-
-        parent.replaceChild(
-          next.element,
-          previous.element,
-        );
-
-        break;
-      }
-
-      case (types.update): {
-        if (lifecycle) {
-          lifecycle(next.element)(previous.props);
-        }
-
-        updateProps(previous.element, previous.tree.props, next.tree.props);
-
-        break;
-      }
-
-      default: {
-        return;
-      }
-    }
-  }
-};
-
-export { paint, createElement };

package/test/e2e/counter.test.js

@@ -1,85 +0,0 @@
-import { dom, component } from '../../src';
-import { requestAnimationFrame, requestIdleCallback } from '../utils';
-
-window.requestAnimationFrame = requestAnimationFrame;
-window.requestIdleCallback = requestIdleCallback;
-
-describe('counter example', () => {
-  let body;
-
-  beforeEach(() => {
-    document.body.innerHTML = '';
-
-    component({
-      template: state => actions =>
-        dom('div', null, [
-
-          dom(
-            'span', {
-              id: 'counter',
-            },
-            state.counter,
-          ),
-
-          dom('button', {
-            id: 'up',
-            onclick() {
-              actions.increment();
-            },
-          }),
-
-          dom('button', {
-            id: 'down',
-            onclick() {
-              actions.decrement();
-            },
-          }),
-        ]),
-      state: {
-        counter: 0,
-      },
-      actions: {
-        increment: state => ({ counter: state.counter + 1 }),
-        decrement: state => ({ counter: state.counter - 1 }),
-      },
-    });
-
-    body = document.body;
-  });
-
-  it('should load a counter', (done) => {
-    setTimeout(() => {
-      expect(body.innerHTML).not.toBe('');
-      done();
-    }, 200);
-  });
-
-  it('should have the proper initial state attached', (done) => {
-    setTimeout(() => {
-      expect(body.querySelector('#counter').innerHTML).toEqual('0');
-      done();
-    }, 100);
-  });
-
-  it('should respond correctly to an increment action', (done) => {
-    setTimeout(() => {
-      body.querySelector('#up').click();
-
-      setTimeout(() => {
-        expect(body.querySelector('#counter').innerHTML).toEqual('1');
-        done();
-      }, 100);
-    }, 100);
-  });
-
-  it('should respond correctly to an decrement action', (done) => {
-    setTimeout(() => {
-      body.querySelector('#down').click();
-
-      setTimeout(() => {
-        expect(body.querySelector('#counter').innerHTML).toEqual('-1');
-        done();
-      }, 100);
-    }, 100);
-  });
-});

package/test/e2e/todos.test.js

@@ -1,263 +0,0 @@
-import { dom, component } from '../../src';
-import { requestAnimationFrame, requestIdleCallback } from '../utils';
-
-window.requestAnimationFrame = requestAnimationFrame;
-window.requestIdleCallback = requestIdleCallback;
-
-const TodoItem = ({
-  id, text, done, toggle, clear, create, remove, update,
-}) =>
-  dom(
-    'li',
-    {
-      oncreate: create,
-      onremove: remove,
-      onupdate: update,
-    },
-    dom(
-      'span',
-      {
-        onclick: function onclick() {
-          return toggle({ id });
-        },
-        style: done ? { fontSize: '18px', textDecoration: 'line-through' } : { fontSize: '18px' },
-      },
-      text,
-    ),
-    dom(
-      'span',
-      {
-        onclick: function onclick() {
-          return clear({ id });
-        },
-        style: {
-          marginLeft: '10px',
-          color: 'red',
-        },
-      },
-      'x',
-    ),
-  );
-
-describe('counter example', () => {
-  let body;
-  let input;
-  let addTodo;
-
-  beforeEach(() => {
-    document.body.innerHTML = '';
-
-    component({
-      template: state => actions => (
-        dom(
-          'div',
-          null,
-          dom(
-            'h1',
-            null,
-            'Todos',
-          ),
-          dom(
-            'ul',
-            {
-              id: 'todos',
-              className: 'todos',
-            },
-            state.todos.map(todo => dom(TodoItem, {
-              create: function create() {
-
-              },
-              remove: function remove() {
-                return function finish(done) {
-                  done();
-                };
-              },
-              update: function update() {
-                return function checkOldProps(oldProps) {
-                  return oldProps;
-                };
-              },
-              text: todo.text,
-              id: todo.id,
-              done: todo.done,
-              toggle: actions.toggle,
-              clear: actions.remove,
-            })),
-          ),
-          dom('input', {
-            type: 'text',
-            value: state.input,
-            oninput: function oninput(e) {
-              return actions.input({ value: e.target.value });
-            },
-          }),
-          dom(
-            'button',
-            {
-              onclick: actions.add,
-              id: 'add',
-            },
-            'Add Todo',
-          ),
-          dom(
-            'button',
-            {
-              onclick: actions.clearTodos,
-              id: 'clear',
-            },
-            'Clear All Todos',
-          ),
-        )
-      ),
-      state: {
-        todos: [],
-        input: '',
-        id: 0,
-      },
-      actions: {
-        add: (state, actions) => {
-          const text = state.input;
-          actions.clearInput();
-          return {
-            todos: [
-              ...state.todos,
-              {
-                text,
-                id: state.id,
-                done: false,
-              },
-            ],
-            id: state.id + 1,
-          };
-        },
-        input: (state, actions, { value }) => ({ input: value }),
-        toggle: (state, actions, { id }) => ({
-          todos: state.todos.map(todo => (
-            todo.id === id ? { ...todo, done: !todo.done } : todo)),
-        }),
-        remove: (state, actions, { id }) => ({ todos: state.todos.filter(todo => todo.id !== id) }),
-        clearInput: () => ({ input: '' }),
-        clearTodos: () => ({ todos: [] }),
-      },
-    });
-
-    body = document.body;
-
-    addTodo = (text = 'new todo') => {
-      input = document.body.querySelector('input');
-      input.value = text;
-
-      input.dispatchEvent(new Event('input'));
-      body.querySelector('#add').click();
-    };
-  });
-
-  it('should load', (done) => {
-    setTimeout(() => {
-      expect(body.innerHTML).not.toBe('');
-      done();
-    }, 100);
-  });
-
-  it('the initial state to not have any todos', (done) => {
-    setTimeout(() => {
-      expect(body.querySelector('#todos').childNodes.length).toBe(0);
-      done();
-    }, 25);
-  });
-
-  it('should add a todo', (done) => {
-    setTimeout(() => {
-      addTodo();
-
-      setTimeout(() => {
-        expect(body.querySelector('#todos').childNodes.length).toBe(1);
-        done();
-      }, 25);
-    }, 25);
-  });
-
-  it('should clear the input after adding a todo', (done) => {
-    setTimeout(() => {
-      addTodo();
-
-      setTimeout(() => {
-        expect(input.value).toBe('');
-        done();
-      }, 25);
-    }, 25);
-  });
-
-  it('should remove the todo', (done) => {
-    setTimeout(() => {
-      addTodo();
-
-      setTimeout(() => {
-        body.querySelector('#todos span:last-child').click();
-
-        setTimeout(() => {
-          expect(body.querySelector('#todos').childNodes.length).toBe(0);
-          done();
-        }, 25);
-      }, 25);
-    }, 25);
-  });
-
-  it('should set the todo to done', (done) => {
-    const firstTodoSpanSelector = '#todos li:first-child span:first-child';
-
-    setTimeout(() => {
-      addTodo();
-
-      setTimeout(() => {
-        body.querySelector(firstTodoSpanSelector).click();
-
-        setTimeout(() => {
-          expect(body.querySelector(firstTodoSpanSelector).outerHTML).toEqual('<span style="font-size: 18px; text-decoration: line-through;">new todo</span>');
-          done();
-        }, 25);
-      }, 25);
-    }, 25);
-  });
-
-  it('should set the todo to done, then unset it', (done) => {
-    const firstTodoSpanSelector = '#todos li:first-child span:first-child';
-
-    setTimeout(() => {
-      addTodo();
-
-      setTimeout(() => {
-        body.querySelector(firstTodoSpanSelector).click();
-
-        setTimeout(() => {
-          expect(body.querySelector(firstTodoSpanSelector).outerHTML).toEqual('<span style="font-size: 18px; text-decoration: line-through;">new todo</span>');
-
-          body.querySelector(firstTodoSpanSelector).click();
-
-          setTimeout(() => {
-            expect(body.querySelector(firstTodoSpanSelector).outerHTML).toEqual('<span style="font-size: 18px;">new todo</span>');
-            done();
-          }, 25);
-        }, 25);
-      }, 25);
-    }, 25);
-  });
-
-  it('should remove all todos', (done) => {
-    setTimeout(() => {
-      addTodo();
-      addTodo();
-      addTodo();
-
-      setTimeout(() => {
-        expect(body.querySelector('#todos').childNodes.length).toBe(3);
-        body.querySelector('#clear').click();
-
-        setTimeout(() => {
-          expect(body.querySelector('#todos').childNodes.length).toBe(0);
-          done();
-        }, 25);
-      }, 25);
-    }, 25);
-  });
-});

package/test/unit/component.test.js

@@ -1,80 +0,0 @@
-import { component, dom } from '../../src';
-import { requestAnimationFrame, requestIdleCallback } from '../utils';
-
-window.requestAnimationFrame = requestAnimationFrame;
-window.requestIdleCallback = requestIdleCallback;
-
-describe('component tests', () => {
-  let body;
-
-  beforeEach(() => {
-    document.body.innerHTML = '';
-
-    component({
-      template: state => actions =>
-        dom('div', null, [
-          dom('span', { id: 'text' }, state.text),
-          dom('button', { id: 'update', onclick() { actions.update(); } }),
-          dom('button', { id: 'async', onclick() { actions.asyncUpdate(); } }),
-          dom('div', null, [
-            dom('div', null, [
-              dom('div', null, [
-                dom('div', null, ['hey']),
-              ]),
-            ]),
-          ]),
-        ]),
-      state: {
-        text: 'hello, world',
-      },
-      actions: {
-        update: state => ({ text: `${state.text}!` }),
-        asyncUpdate: state => (update) => {
-          setTimeout(() => {
-            update({ text: `${state.text}!!` });
-          }, 50);
-        },
-      },
-    });
-
-    body = document.body;
-  });
-
-  it('should properly render', (done) => {
-    setTimeout(() => {
-      expect(body.innerHTML).not.toEqual('');
-
-      done();
-    }, 50);
-  });
-
-  it('should properly render the state', (done) => {
-    setTimeout(() => {
-      expect(body.querySelector('#text').innerHTML).toEqual('hello, world');
-
-      done();
-    }, 50);
-  });
-
-  it('should properly handle an update action', (done) => {
-    setTimeout(() => {
-      body.querySelector('#update').click();
-
-      setTimeout(() => {
-        expect(body.querySelector('#text').innerHTML).toEqual('hello, world!');
-        done();
-      }, 25);
-    }, 25);
-  });
-
-  it('should handle a thunk', (done) => {
-    setTimeout(() => {
-      body.querySelector('#async').click();
-
-      setTimeout(() => {
-        expect(body.querySelector('#text').innerHTML).toEqual('hello, world!!');
-        done();
-      }, 100);
-    }, 25);
-  });
-});

package/test/unit/dom.test.js

@@ -1,111 +0,0 @@
-import { dom } from '../../src/';
-
-describe('DOM jsx tests', () => {
-  it('should be defined', () => {
-    expect(dom).toBeDefined();
-  });
-
-  it('should properly handle a tag with no children or props', () => {
-    const element = dom('main');
-
-    expect(element).toEqual({
-      type: 'main',
-      props: {},
-      children: [],
-    });
-  });
-
-  it('should properly handle a tag with a null prop', () => {
-    const element = dom('main', null);
-
-    expect(element).toEqual({
-      type: 'main',
-      props: {},
-      children: [],
-    });
-  });
-
-  it('should properly handle a tag with children but no props', () => {
-    const children = ['article', 'aside', 'section'];
-    const element = dom('main', {}, ...children);
-
-    expect(element).toEqual({
-      type: 'main',
-      props: {},
-      children,
-    });
-  });
-
-  it('should properly handle a tag with props but no children', () => {
-    const props = {
-      id: 'news',
-      className: 'main-section',
-    };
-
-    const element = dom('main', props);
-
-    expect(element).toEqual({
-      type: 'main',
-      props,
-      children: [],
-    });
-  });
-
-  it('should handle a child being a number', () => {
-    const element = dom('li', {}, 0);
-
-    expect(element).toEqual({
-      type: 'li',
-      props: {},
-      children: ['0'],
-    });
-  });
-
-  it('should properly handle children being an array', () => {
-    const children = ['article', 'aside', 'section'];
-    const element = dom('main', {}, children);
-
-    expect(element).toEqual({
-      type: 'main',
-      props: {},
-      children,
-    });
-  });
-
-  it('should handle a function as a type', () => {
-    const statelessComponent = (props, children) => dom('div', props, children);
-    let element = dom(statelessComponent);
-
-    expect(element).toEqual({
-      type: 'div',
-      props: {},
-      children: [],
-    });
-
-    const props = { id: 'thing', className: 'thing-haver' };
-    element = dom(statelessComponent, props);
-
-    expect(element).toEqual({
-      type: 'div',
-      props,
-      children: [],
-    });
-
-    const secondProps = { id: 'second-thing', className: 'thing-haver' };
-    element = dom(statelessComponent, props, [
-      dom(statelessComponent, secondProps, []),
-    ]);
-
-    expect(element).toEqual({
-      type: 'div',
-      props,
-      children: [
-        {
-          type: 'div',
-          props: secondProps,
-          children: [],
-        },
-      ],
-    });
-  });
-});

package/test/unit/utils.test.js

@@ -1,26 +0,0 @@
-import { getUniques } from '../../src/utils';
-
-describe('get uniques', () => {
-  it('should properly find the uniques', () => {
-    const first = { a: '', b: '', c: '' };
-    const second = { a: '', b: '', d: '' };
-
-    const uniques = getUniques(first, second);
-    expect(uniques.size).toBe(4);
-    expect([...uniques.values()]).toEqual(['a', 'b', 'c', 'd']);
-  });
-
-  it('should handle undef/null as well', () => {
-    const real = { a: '', b: '' };
-    const fake = null;
-
-    const first = getUniques(real, fake);
-    const second = getUniques(fake, real);
-
-    const set = new Set(['a', 'b']);
-    expect(first).toEqual(set);
-    expect(second).toEqual(set);
-
-    expect(first).toEqual(second);
-  });
-});