mise 2.0.1 → 2026.5.18

package/test/e2e/counter.test.js

@@ -1,78 +0,0 @@
-import { dom, component } from '../../src';
-
-window.requestAnimationFrame = setTimeout;
-describe('counter example', () => {
-  let body;
-  let count;
-  let up;
-  let down;
-
-  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;
-    count = body.querySelector('#counter');
-    up = body.querySelector('#up');
-    down = body.querySelector('#down');
-  });
-
-  it('should load a counter', () => {
-    expect(body).not.toBe('');
-  });
-
-  it('should have the proper initial state attached', () => {
-    expect(count.innerHTML).toEqual('0');
-  });
-
-  it('should respond correctly to an increment action', (done) => {
-    up.click();
-
-    requestAnimationFrame(() => {
-      expect(count.innerHTML).toEqual('1');
-      done();
-    });
-  });
-
-  it('should respond correctly to an decrement action', (done) => {
-    down.click();
-
-    requestAnimationFrame(() => {
-      expect(count.innerHTML).toEqual('-1');
-      done();
-    });
-  });
-});

package/test/e2e/todos.test.js

@@ -1,211 +0,0 @@
-import { dom, component } from '../../src';
-
-window.requestAnimationFrame = setTimeout;
-
-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 ? { userSelect: 'none', textDecoration: 'line-through' } : { userSelect: 'none' },
-      },
-      text,
-    ),
-    dom(
-      'span',
-      {
-        onclick: function onclick() {
-          return clear({ id });
-        },
-        style: {
-          marginLeft: '10px',
-          color: 'red',
-        },
-      },
-      'x',
-    ),
-  );
-
-describe('counter example', () => {
-  let body;
-  let input;
-  let add;
-  let clear;
-  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) {
-                  //console.log(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;
-    input = body.querySelector('input');
-    add = body.querySelector('#add');
-    clear = body.querySelector('#clear');
-
-    addTodo = (text = 'new todo') => {
-      input.value = text;
-
-      input.dispatchEvent(new Event('input'));
-      add.click();
-    };
-  });
-
-  it('should load', () => {
-    expect(body).not.toBe('');
-  });
-
-  it('the initial state to not have any todos', () => {
-    expect(body.querySelector('#todos').childNodes.length).toBe(0);
-  });
-
-  it('should add a todo', (done) => {
-    addTodo();
-
-    requestAnimationFrame(() => {
-      expect(body.querySelector('#todos').childNodes.length).toBe(1);
-      done();
-    });
-  });
-
-  it('should clear the input after adding a todo', (done) => {
-    addTodo();
-
-    requestAnimationFrame(() => {
-      expect(input.value).toBe('');
-      done();
-    });
-  });
-
-  it('should remove the todo', (done) => {
-    addTodo();
-
-    requestAnimationFrame(() => {
-      body.querySelector('#todos span:last-child').click();
-
-      requestAnimationFrame(() => {
-        expect(body.querySelector('#todos').childNodes.length).toBe(0);
-        done();
-      });
-    });
-  });
-
-  it('should remove all todos', (done) => {
-    addTodo();
-    addTodo();
-    addTodo();
-
-    requestAnimationFrame(() => {
-      expect(body.querySelector('#todos').childNodes.length).toBe(3);
-      clear.click();
-
-      requestAnimationFrame(() => {
-        expect(body.querySelector('#todos').childNodes.length).toBe(0);
-        done();
-      });
-    });
-  });
-});

package/test/ts/index.test.ts

@@ -1,12 +0,0 @@
-import 'jest';
-import * as tsExports from '../../src/index'
-
-describe('TypeScript exports', () => {
-  it('should have a dom', () => {
-    expect(tsExports.dom).toBeDefined();
-  })
-
-  it('should have a component', () => {
-    expect(tsExports.component).toBeDefined();
-  })
-})

package/test/unit/component.test.js

@@ -1,55 +0,0 @@
-import { component, dom } from '../../src';
-
-window.requestAnimationFrame = setTimeout;
-
-describe('component tests', () => {
-  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(); } }),
-        ]),
-      state: {
-        text: 'hello, world',
-      },
-      actions: {
-        update: state => ({ text: `${state.text}!` }),
-        asyncUpdate: state => (update) => {
-          setTimeout(() => {
-            update({ text: `${state.text}!!` });
-          }, 500);
-        },
-      },
-    });
-  });
-
-  it('should properly render', () => {
-    expect(document.body.innerHTML).not.toEqual('');
-  });
-
-  it('should properly render the state', () => {
-    expect(document.querySelector('#text').innerHTML).toEqual('hello, world');
-  });
-
-  it('should properly handle an update action', (done) => {
-    document.querySelector('#update').click();
-
-    requestAnimationFrame(() => {
-      expect(document.querySelector('#text').innerHTML).toEqual('hello, world!');
-      done();
-    }, 500);
-  });
-
-  it('should handle a thunk', (done) => {
-    document.querySelector('#async').click();
-
-    requestAnimationFrame(() => {
-      expect(document.querySelector('#text').innerHTML).toEqual('hello, world!!');
-      done();
-    }, 1000);
-  });
-});

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);
-  });
-});

package/test/unit/vdom/vdom.createlement.test.js

@@ -1,42 +0,0 @@
-/* eslint no-useless-escape: 0 */
-
-import { vdom } from '../../../src/vdom';
-import { dom } from '../../../src';
-
-const VDOM = vdom();
-
-describe('create element', () => {
-  it('should create a simple text node', () => {
-    const element = VDOM.createElement('hey');
-
-    expect(element.nodeValue).toEqual('hey');
-  });
-
-  it('should create an empty div if no data is passed', () => {
-    const element = VDOM.createElement(dom('h1'));
-
-    expect(element.outerHTML).toEqual('<h1></h1>');
-  });
-
-  it('should make elements for the children, too', () => {
-    const node = dom(
-      'ul',
-      null,
-      [
-        dom('li', null, 'first'),
-        dom('li', null, 'second'),
-        dom('li', null, 'third'),
-      ],
-    );
-
-    const element = VDOM.createElement(node);
-
-    expect(element.outerHTML).toEqual('<ul><li>first</li><li>second</li><li>third</li></ul>');
-  });
-
-  it('should properly add props', () => {
-    const element = VDOM.createElement(dom('div', { id: 'neato-element' }));
-
-    expect(element.outerHTML).toEqual('<div id=\"neato-element\"></div>');
-  });
-});

package/test/unit/vdom/vdom.update.test.js

@@ -1,151 +0,0 @@
-/* eslint no-useless-escape: 0 */
-
-import { vdom } from '../../../src/vdom';
-import { dom } from '../../../src';
-
-const VDOM = vdom();
-
-describe('update', () => {
-  let parent;
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    parent = document.body;
-  });
-
-  describe('creating an element', () => {
-    it('should properly add an element if a previous one didnt exist', () => {
-      VDOM.update(parent, null, null, dom('h1'));
-
-      expect(parent.innerHTML).toEqual('<h1></h1>');
-    });
-
-    it('should try to run an oncreate function if it exists', () => {
-      const create = jest.fn();
-
-      VDOM.update(parent, null, null, dom('h1', { oncreate() { create(); } }));
-
-      expect(create.mock.calls.length).toEqual(1);
-    });
-  });
-
-  describe('removing an element', () => {
-    it('should remove an element if a previous one did exist', () => {
-      parent.innerHTML = '<h1></h1>';
-
-      VDOM.update(parent, parent.childNodes[0], dom('h1'), null);
-
-      expect(parent.innerHTML).toEqual('');
-    });
-
-    it('should try to run an onremove function if it exists', () => {
-      const inner = jest.fn();
-      const remove = () => inner;
-
-      VDOM.update(parent, parent.childNodes[0], dom('h1', { onremove() { return remove(); } }), null);
-
-      expect(inner.mock.calls.length).toEqual(1);
-    });
-  });
-
-  describe('replacing an element', () => {
-    it('should try to replace an element if the types are different', () => {
-      parent.innerHTML = '<h1></h1>';
-
-      VDOM.update(parent, parent.childNodes[0], dom('h1'), dom('h2'));
-
-      expect(parent.innerHTML).toEqual('<h2></h2>');
-    });
-
-    it('should trigger an onupdate function if attempting to replace', () => {
-      parent.innerHTML = '<h1></h1>';
-
-      const inner = jest.fn();
-      const replace = () => inner;
-
-      VDOM.update(parent, parent.childNodes[0], dom('h1'), dom('h2', { onupdate() { return replace(); } }, []));
-
-      expect(inner.mock.calls.length).toEqual(1);
-    });
-  });
-
-  describe('updating an element in place', () => {
-    it('should try to update a basic prop in place', () => {
-      const previous = dom('h1');
-      const next = dom('h1', { id: 'great' });
-
-      parent.innerHTML = '<h1></h1>';
-
-      VDOM.update(parent, parent.childNodes[0], previous, next);
-
-      expect(parent.innerHTML).toEqual('<h1 id=\"great\"></h1>');
-    });
-
-    it('should try intelligently update a boolean value', () => {
-      const previous = dom('h1');
-      const next = dom('h1', { disabled: true, id: 'title' });
-
-      parent.innerHTML = '<h1></h1>';
-
-      VDOM.update(parent, parent.childNodes[0], previous, next);
-
-      expect(parent.innerHTML).toEqual('<h1 disabled=\"true\" id=\"title\"></h1>');
-    });
-
-    describe('updating styles', () => {
-      it('should try to add styles', () => {
-        const previous = dom('h1');
-        const next = dom('h1', { style: { fontSize: '18px' } });
-
-        parent.innerHTML = '<h1></h1>';
-
-        VDOM.update(parent, parent.childNodes[0], previous, next);
-
-        expect(parent.innerHTML).toEqual('<h1 style=\"font-size: 18px;\"></h1>');
-      });
-
-      it('should try to swap styles properly', () => {
-        const previous = dom('h1', { style: { textDecoration: 'line-through' } });
-        const next = dom('h1', { style: { fontSize: '18px' } });
-
-        parent.innerHTML = '<h1></h1>';
-
-        VDOM.update(parent, parent.childNodes[0], previous, next);
-
-        expect(parent.innerHTML).toEqual('<h1 style=\"font-size: 18px;\"></h1>');
-      });
-
-      it('should try to update style values if the property is the same', () => {
-        const previous = dom('h1', { style: { fontSize: '20px' } });
-        const next = dom('h1', { style: { fontSize: '18px' } });
-
-        parent.innerHTML = '<h1></h1>';
-
-        VDOM.update(parent, parent.childNodes[0], previous, next);
-
-        expect(parent.innerHTML).toEqual('<h1 style=\"font-size: 18px;\"></h1>');
-      });
-
-      it('should try to remove styles properly', () => {
-        const previous = dom('h1', { style: { textDecoration: 'line-through' } });
-        const next = dom('h1');
-
-        parent.innerHTML = '<h1></h1>';
-
-        VDOM.update(parent, parent.childNodes[0], previous, next);
-
-        expect(parent.innerHTML).toEqual('<h1></h1>');
-      });
-
-      it('should trigger an onupdate function when diffing props', () => {
-        parent.innerHTML = '<h1></h1>';
-
-        const inner = jest.fn();
-        const replace = () => inner;
-
-        VDOM.update(parent, parent.childNodes[0], dom('h1'), dom('h1', { onupdate() { return replace(); } }, []));
-
-        expect(inner.mock.calls.length).toEqual(1);
-      });
-    });
-  });
-});

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-      "removeComments": true,
-      "allowJs": true,
-      "allowSyntheticDefaultImports": true,
-      "baseUrl": "./src"
-  },
-  "include": [
-      "./src/index.d.ts"
-  ],
-  "awesomeTypescriptLoaderOptions": {
-      "useBabel": true,
-      "useCache": true
-  }
-}