mise 3.0.0 → 2026.6.0

package/docs/components.md

@@ -1,40 +0,0 @@
-# Components
-
-Components are how Mise wires together the template, state, and actions to render your application.
-
-```javascript
-import { dom, component } from 'mise';
-
-component({
-  template: state => actions => (
-    <div>
-      <span>{state.counter}</span>
-      <button onclick={actions.increment}>+</button>
-      <button onclick={actions.decrement}>-</button>
-    </div>
-  ),
-  state: {
-    counter: 0,
-  },
-  actions: {
-    increment: state => ({ counter: state.counter + 1 }),
-    decrement: state => ({ counter: state.counter - 1 }),
-  },
-  root: document.querySelector('#app'),
-});
-```
-
-#### Applications should only have one root-level component.
-
-Your application should be structured in a way that only one root level component is ever necessary. Having a single, shared state and a single pool of actions allows you to do some pretty neat things.
-
-* Load the state of your application from a local storage object
-* Hydrate your SSR application with the proper state
-* Easily automate bug reporting by passing the whole state and the action called.
-
-It also forces you to keep your templates presentational. The assumption is that basically no logic should ever live in your templates. Templates can thus be really simple to maintain and to test.
-
-#### Root items shouldn't have anything else in them.
-
-Mise doesn't play nice with others. Please make sure your root items dont get anything added/removed to them. Mise works by diffing a VDOM and applying updates to the real DOM. The real DOM isn't the real source of truth, and as such it's possible for Mise to fall out of sync if the DOM changes out of Mise's purview.
-

package/docs/lifecycle.md

@@ -1,71 +0,0 @@
-# Lifecycle
-
-Mise uses a handful of lifecycle methods to allow you fine-grain control of your elements.
-
-### `oncreate`
-
-The `oncreate` function returns the newly created element.
-
-```javascript
-component({
-  template: state => actions => (
-    <div>
-      <span
-        oncreate={el => actions.hydrate(el)}
-    </div>
-  ),
-  state: {
-    // ..
-  },
-  actions: {
-    hydrate: (state, actions, el) => {
-      // ...
-    }
-  }
-});
-```
-
-### `onremove`
-
-`onremove` returns a curried function, one containing the actual element and the other containing a `done` function. Once you've finished your business with `onremove`, call `done` to actually remove it from the dom;
-
-```javascript
-import { removalAnimation } from './animations';
-
-component({
-  template: state => actions => (
-    <div>
-      <span
-        onremove={
-          el => done =>
-            el.animate([
-              removalAnimation
-            ], 2000);
-
-            setTimeout(done, 2000)
-      }
-    </div>
-  ),
-});
-```
-
-### `onupdate`
-
-`onupdate` is tricky. Mise calls `onupdate` anytime your element is either set to be replaced or if the props are going to be diffed. Since we can't know if any props have changed until we go through all the props, we'd rather let you know this is coming. To faciliate any change, we'll also pass you the old props so you can determine if you want to run your update.
-
-```javascript
-component({
-  template: state => actions => (
-    <div>
-      <span
-        onupdate={
-          el => oldProps => {
-            if (oldProps.TTL < state.TTL) {
-              actions.updateTTL(state.TTL);
-            }
-          }
-        }
-    </div>
-  ),
-});
-```

package/docs/state.md

@@ -1,71 +0,0 @@
-# State
-
-State has proven to be a pain-point in more traditional frameworks, so we've worked on making state front-and-center in Mise.
-
-Every component takes an initial state as one of the required parameters
-
-```javascript
-import { dom, component } from 'mise';
-
-component({
-  template:
-    //...
-  actions:
-    //...
-  state: {
-    greeting: 'Hello World!',
-  },
-})
-```
-
-State is always an object and accessibly in both templates and actions as a parameter.
-
-#### State is Read-Only.
-
-You can't ever directly modify the state.
-
-```javascript
-import { dom, component } from 'mise';
-component({
-  template:
-    //...
-  state: {
-    id: 0
-  },
-  actions: {
-    // wont actually work!
-    increment: state => { state.id++ },
-  }
-})
-```
-
-#### State can _only_ be modified by actions
-
-If you want to modify the state of your application, you can do so via an action. Actions must return a new object which is merged with the current state.
-
-```javascript
-import { dom, component } from 'mise';
-component({
-  template:
-    //...
-  state: {
-    id: 0
-  },
-  actions: {
-    // works!
-    increment: state => ({ state.id + 1 }),
-  }
-})
-```
-
-In this example, after using the increment action, the new state is `1`. After setting a new state, the application re-renders and generates a new template.
-
-#### Testing
-Since state is directly modified by actions, testing an action and having it return a new state is a sufficiently good test.
-
-```javascript
-describe('increment action', () => {
-  it('should increment the state by one', () => {
-    expect(increment({ id: 0 })).toEqual({ id: 1 });
-  })
-})

package/docs/templates.md

@@ -1,97 +0,0 @@
-# Templates
-
-Mise templates are simple affairs. Primary templates are curried functions that accept state and actions as parameters and return a JSX representation of what your UI looks like. Generally, you only have one primary template.
-
-```javascript
-const template = state => actions => (
-  <h1>{state.greeting}</h1>
-)
-```
-
-Secondary templates (i.e. templates that aren't at the root level) are functions that accept props and children as their parameters.
-
-```javascript
-const secondary = (props, children) => {
-    <li className={props.className}>
-      <div>{children}</div>
-    </li>
-}
-```
-
-#### All templates in Mise are presentational templates.
-Templates don't contain actual logic in them. They instead contain references to functions that contain the actual logic. The closest a template will get to logic is to pass in parameters that a function will need.
-
-```javascript
-const template => state => actions => (
-  <div id="click-counter">
-    <span>{state.clicked}</span>
-    <button onclick={actions.increment}>Click me!</span>
-    <button onclick={e => actions.reset(e)}>Reset</span>
-  </div>
-)
-```
-
-#### Templates in Mise are composable
-
-```javascript
-const template = state => actions => (
-  <div id="todos">
-    <h1>Todos!</h1>
-    <ul>
-      {state.todos.map(todo =>
-        <TodoItem
-          id={todo.id}
-          text={todo.text}
-          complete={actions.complete}
-          remove={actions.remove} />
-      )}
-    </ul>
-  </div>
-)
-
-const TodoItem = ({
-    id,
-    text,
-    complete,
-    remove
-}) => (
-  <li>
-    <span onclick={() => complete(id)}>
-      {todo.text}
-    </span>
-    <button onclick={() => remove(id)}>
-      x
-    </button>
-  </li>
-)
-```
-
-By composing templates, we can keep items compartmentalized and easy to test. This also reduces the cognative load of onboarding a new developer - it's easy to see the hierarchy.
-
-#### Testing
-
-Since Mise components are all pure functions, testing them is simple. We use Jest and strongly suggest that you use it to test Mise.
-
-```javascript
-import { createElement } from 'mise/src/vdom';
-
-import { template } from './src/todo.template';
-import { actions } from './src/todo.actions';
-import { state } from './src/todo.state';
-
-describe('template test', () => {
-  const { body } = document;
-  
-  beforeEach(() => {
-    body.innerHTML = '';
-  })
-
-  it('should render a todo ul', () => {
-    /* this is basically what mise does, too! */
-    const result = template(state)(actions);
-    body.appendChild(createElement(result));
-    
-    expect(body.querySelector('ul')).not.toBeNull();
-  })
-})
-```

package/example/counter/counter.jsx

@@ -1,18 +0,0 @@
-import { dom, component } from 'mise';
-
-component({
-  template: state => actions => (
-    <div>
-      <span>{state.counter}</span>
-      <button onclick={actions.increment}>+</button>
-      <button onclick={actions.decrement}>-</button>
-    </div>
-  ),
-  state: {
-    counter: 0,
-  },
-  actions: {
-    increment: state => ({ counter: state.counter + 1 }),
-    decrement: state => ({ counter: state.counter - 1 }),
-  }
-});

package/example/todos/todo/todo.jsx

@@ -1,16 +0,0 @@
-import { spanStyle } from './todo.style';
-
-const TodoItem = ({ id, text, done, toggle, remove }) =>
-  <li>
-    <div
-      onclick={() => toggle({id})}
-      style={done ? {textDecoration: 'line-through' } : {}}>
-      {text}
-    </div>
-    <span
-      onclick={() => remove({ id })}
-      style={spanStyle}>
-      x</span>
-  </li>;
-
-export { TodoItem };

package/example/todos/todo/todo.style.js

@@ -1,6 +0,0 @@
-const spanStyle = {
-  marginLeft: '10px',
-  color: 'red',
-};
-
-export { spanStyle };

package/example/todos/todos.actions.js

@@ -1,36 +0,0 @@
-const add = (state, actions) => {
-  const text = state.input;
-  actions.clearInput();
-  return {
-    todos: [
-      ...state.todos,
-      {
-        text,
-        id: state.id,
-        done: false
-      }
-    ],
-    id: state.id + 1,
-  };
-};
-
-const input = (state, actions, { value }) => ({ input: value });
-
-const toggle = (state, actions, { id }) => ({
-  todos: state.todos.map(todo => todo.id === id ? Object.assign({}, todo, { done: !todo.done }) : todo),
-});
-
-const remove = (state, actions, { id }) => ({ todos: state.todos.filter(todo => todo.id !== id )});
-
-const clearInput = () => ({ input: '' });
-
-const clearTodos = () => ({ todos : [] });
-
-export {
-  add,
-  input,
-  toggle,
-  remove,
-  clearInput,
-  clearTodos,
-};

package/example/todos/todos.component.js

@@ -1,11 +0,0 @@
-import { dom, component } from 'mise';
-
-import { template } from './todos.template';
-import { state } from './todos.state';
-import * as actions from './todos.actions';
-
-component({
-  template,
-  state,
-  actions,
-});

package/example/todos/todos.state.js

@@ -1,7 +0,0 @@
-const state = {
-  todos: [],
-  input: '',
-  id: 0,
-};
-
-export { state };

package/example/todos/todos.template.jsx

@@ -1,35 +0,0 @@
-import { TodoItem } from './todo/todo.template';
-
-const template = state => actions => (
-  <div>
-    <h1>Todos</h1>
-    <ul>
-      {state.todos.map(
-        todo =>
-          <TodoItem
-            text={todo.text}
-            id={todo.id}
-            done={todo.done}
-            toggle={actions.toggle}
-            remove={actions.remove}/>
-      )}
-    </ul>
-
-    <input
-      type="text"
-      value={state.input}
-      oninput= {
-        e => actions.input({ value: e.target.value })
-      }/>
-    <button
-      onclick={actions.add}>
-      Add Todo
-    </button>
-    <button
-      onclick={actions.clearTodos}>
-      Clear All Todos
-    </button>
-  </div>
-);
-
-export { template };

package/src/component.js

@@ -1,80 +0,0 @@
-import { reconciler } from './vdom/reconciler';
-import { create } from './vdom/fiber';
-
-const component = ({
-  template,
-  state,
-  actions,
-  root = document.body,
-}) => {
-  const { add } = reconciler();
-
-  let appState;
-  let appTemplate;
-  let appActions;
-
-  const generateTemplate = unsafeState => (unsafeActions) => {
-    const readOnlyState = { ...unsafeState };
-    const readOnlyActions = { ...unsafeActions };
-
-    return template(readOnlyState)(readOnlyActions);
-  };
-
-  const render = () => {
-    const previousTemplate = appTemplate;
-    appTemplate = generateTemplate(appState)(appActions);
-
-    const fiber = create({
-      parent: root,
-      element: root.childNodes[0],
-      previous: previousTemplate,
-      next: appTemplate,
-    });
-
-    add(fiber);
-  };
-
-  const update = (partialState) => {
-    appState = {
-      ...appState,
-      ...partialState,
-    };
-
-    render();
-  };
-
-  const bindUpdateToActions = (unboundActions) => {
-    const tempActions = {};
-
-    for (const [key, fn] of Object.entries(unboundActions)) {
-      tempActions[key] = (data) => {
-        const result = fn(appState, appActions, data);
-
-        if (typeof result === 'function') {
-          result(update);
-        } else {
-          update(result);
-        }
-      };
-    }
-
-    return tempActions;
-  };
-
-  const init = (initialActions) => {
-    appState = state;
-    appActions = bindUpdateToActions(initialActions);
-    appTemplate = generateTemplate(appState)(appActions);
-
-    const fiber = create({
-      parent: root,
-      next: appTemplate,
-    });
-
-    add(fiber);
-  };
-
-  init(actions);
-};
-
-export { component };

package/src/dom.js

@@ -1,27 +0,0 @@
-const dom = (type, uncheckedProps = {}, ...uncheckedChildren) => {
-  let children = [];
-  let props = uncheckedProps;
-
-  for (const child of uncheckedChildren) {
-    if (Array.isArray(child)) {
-      children = [...children, ...child];
-    } else {
-      children = [...children, typeof child === 'number' ? String(child) : child];
-    }
-  }
-
-  if (uncheckedProps === null) { props = {}; }
-
-  if (props.className) {
-    props.class = props.className;
-    props.className = undefined;
-  }
-
-  if (typeof type === 'function') {
-    return type(props, children);
-  }
-
-  return { type, props, children };
-};
-
-export { dom };

package/src/index.js

@@ -1,2 +0,0 @@
-export { component } from './component';
-export { dom } from './dom';

package/src/utils.js

@@ -1,4 +0,0 @@
-const getUniques = (first, second) =>
-  new Set([...Object.keys(first || {}), ...Object.keys(second || {})]);
-
-export { getUniques };

package/src/vdom/fiber.js

@@ -1,30 +0,0 @@
-const types = {
-  create: 'CREATE',
-  remove: 'REMOVE',
-  replace: 'REPLACE',
-  update: 'UPDATE',
-};
-
-const empty = () => ({
-  children: [],
-  empty: true,
-});
-
-const create = ({
-  parent,
-  element = null,
-  previous = empty(),
-  next = empty(),
-}) => ({
-  parent,
-  previous: {
-    tree: previous,
-    element,
-  },
-  next: {
-    tree: next,
-    element: null,
-  },
-});
-
-export { create, types };

package/src/vdom/reconciler.js

@@ -1,118 +0,0 @@
-import { create, types } from './fiber';
-import { createElement, paint } from './vdom';
-
-const reconciler = () => {
-  let inProgress = false;
-  let workQueue = [];
-  let finished = [];
-
-  const next = () => {
-    const [item, ...rest] = workQueue;
-    workQueue = rest;
-    return item;
-  };
-
-  const shouldReplace = (previous, updated) =>
-    typeof previous !== typeof updated ||
-    (typeof previous === 'string' && previous !== updated) ||
-    previous.type !== updated.type;
-
-  const addChildren = (fiber) => {
-    const prevChildren = (fiber.previous.tree && fiber.previous.tree.children) || [];
-    const nextChildren = (fiber.next.tree && fiber.next.tree.children) || [];
-    const length = Math.max(prevChildren.length, nextChildren.length);
-
-    if (fiber.previous.element) {
-      for (let i = 0; i < length; i += 1) {
-        const newFiber = create({
-          parent: fiber.previous.element,
-          element: (fiber.previous.element && fiber.previous.element.childNodes[i]) || null,
-          previous: prevChildren[i],
-          next: nextChildren[i],
-        });
-
-        // eslint-disable-next-line no-use-before-define
-        add(newFiber);
-      }
-    }
-  };
-
-  const reconcile = (fiber) => {
-    addChildren(fiber);
-
-    if (!fiber.previous.tree || fiber.previous.tree.empty) {
-      fiber.action = types.create;
-      fiber.next.element = createElement(fiber.next.tree);
-
-      if (fiber.next.tree.props && fiber.next.tree.props.oncreate) {
-        fiber.lifecycle = fiber.next.tree.props.oncreate;
-      }
-
-      return fiber;
-    }
-
-    if (!fiber.next.tree || fiber.next.tree.empty) {
-      fiber.action = types.remove;
-      if (fiber.previous.tree.props && fiber.previous.tree.props.onremove) {
-        fiber.lifecycle = fiber.previous.tree.props.onremove;
-      }
-
-      return fiber;
-    }
-
-    if (shouldReplace(fiber.previous.tree, fiber.next.tree)) {
-      fiber.action = types.replace;
-      fiber.next.element = createElement(fiber.next.tree);
-
-      if (fiber.next.tree.props && fiber.next.tree.props.onupdate) {
-        fiber.lifecycle = fiber.next.tree.props.onupdate;
-      }
-
-      return fiber;
-    }
-
-    fiber.action = types.update;
-    if (fiber.next.tree.props && fiber.next.tree.props.onupdate) {
-      fiber.lifecycle = fiber.next.tree.props.onupdate;
-    }
-
-    return fiber;
-  };
-
-  const work = (deadline) => {
-    while (deadline.timeRemaining() && workQueue.length) {
-      const completed = reconcile(next());
-      finished = [...finished, completed];
-    }
-  };
-
-  const process = (deadline) => {
-    work(deadline);
-
-    if (workQueue.length) {
-      requestIdleCallback(process);
-    } else {
-      inProgress = false;
-
-      const boundPaint = paint.bind(null, finished);
-      requestAnimationFrame(boundPaint);
-
-      finished = [];
-    }
-  };
-
-  const add = (fiber) => {
-    workQueue = [...workQueue, fiber];
-
-    if (!inProgress) {
-      inProgress = true;
-      requestIdleCallback(process);
-    }
-  };
-
-  return {
-    add,
-  };
-};
-
-export { reconciler };