mise 2.0.1 → 2026.5.18

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,67 +0,0 @@
-import { vdom } from './vdom';
-
-const component = ({
-  template, state, actions, root = document.body,
-}) => {
-  const VDOM = vdom();
-  let appState;
-  let appTemplate;
-  let appActions;
-
-  const generateTemplate = unsafeState => (unsafeActions) => {
-    const readOnlyState = { ...unsafeState };
-    const readOnlyActions = { ...unsafeActions };
-
-    return template(readOnlyState)(readOnlyActions);
-  };
-
-  const render = () => {
-    const oldTemplate = appTemplate;
-    appTemplate = generateTemplate(appState)(appActions);
-
-    VDOM.update(root, root.childNodes[0], oldTemplate, appTemplate);
-  };
-
-  const requestRender = () => {
-    requestAnimationFrame(render);
-  };
-
-  const update = (partialState) => {
-    appState = {
-      ...appState,
-      ...partialState,
-    };
-
-    requestRender();
-  };
-
-  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);
-
-    root.appendChild(VDOM.createElement(appTemplate));
-  };
-
-  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.d.ts

@@ -1,20 +0,0 @@
-export as namespace mise;
-export default Mise;
-
-declare namespace Mise {
-
-  export class VNode {
-    type: string | Function;
-    props: object | null;
-    children: Array<string | VNode>
-  }
-
-  export class Component {
-    constructor(
-      template: (state: object) => (actions: object) => VNode, 
-      state: object, 
-      actions: object,
-      root?: Element
-    )
-  }
-}

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.js

@@ -1,159 +0,0 @@
-import { getUniques } from './utils';
-
-const vdom = () => {
-  const setProp = (element, attribute, original, updated) => {
-    if (attribute === 'value') {
-      if (updated || updated === 0 || updated === '') {
-        element[attribute] = updated;
-      }
-      return;
-    }
-
-    if (typeof updated === 'boolean') {
-      if (updated) {
-        element.setAttribute(attribute, updated);
-        element[attribute] = updated;
-      }
-      return;
-    }
-
-    if (typeof updated === 'function') {
-      try {
-        element[attribute] = updated;
-      } catch (e) {
-        /* sometimes lifecycle methods throw. we don't particularly care */
-      }
-
-      return;
-    }
-
-    if (!updated || (typeof updated === 'object' && !Object.keys(updated).length)) {
-      element.removeAttribute(attribute);
-      return;
-    }
-
-    if (attribute === 'style') {
-      const styles = getUniques(updated, original);
-
-      for (const style of styles) {
-        if (!updated[style]) {
-          element.style[style] = '';
-        } else if (!original || !original[style] || original[style] !== updated[style]) {
-          element.style[style] = updated[style];
-        }
-      }
-
-      return;
-    }
-
-    element.setAttribute(attribute, updated);
-  };
-
-  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 shouldReplace = (original, updated) =>
-    typeof original !== typeof updated ||
-    (typeof original === 'string' && original !== updated) ||
-    original.type !== updated.type;
-
-  const updateProps = (element, original, updated) => {
-    const props = getUniques(original, updated);
-
-    for (const prop of props) {
-      setProp(element, prop, original[prop], updated[prop]);
-    }
-  };
-
-  const reconcile = (parent, element, previous, next) => {
-    if (!previous) {
-      const el = createElement(next);
-
-      if (next.props.oncreate) {
-        next.props.oncreate(el);
-      }
-
-      parent.appendChild(el);
-      return false;
-    }
-
-    if (!next) {
-      const remove = () => element.remove();
-
-      if (previous.props && previous.props.onremove) {
-        previous.props.onremove(element)(remove);
-      } else {
-        remove();
-      }
-      return false;
-    }
-
-    if (shouldReplace(previous, next)) {
-      const nextElement = createElement(next);
-
-      if (next.props && next.props.onupdate) {
-        next.props.onupdate(nextElement)(previous.props);
-      }
-
-      parent.replaceChild(
-        nextElement,
-        element,
-      );
-
-      return true;
-    }
-
-    if (next.props && next.props.onupdate) {
-      next.props.onupdate(element)(previous.props);
-    }
-
-    updateProps(element, previous.props, next.props);
-    return true;
-  };
-
-  const update = (parent, element, previous, next) => {
-    const updated = reconcile(parent, element, previous, next);
-
-    if (updated) {
-      const prevChildren = previous.children || [];
-      const nextChildren = next.children || [];
-      const length = Math.max(prevChildren.length, nextChildren.length);
-      const childNodes = [...(element && element.childNodes) || []];
-
-      for (let i = 0; i < length; i += 1) {
-        update(
-          element,
-          childNodes[i],
-          previous.children[i],
-          next.children[i],
-        );
-      }
-    }
-  };
-
-  return {
-    createElement,
-    update,
-  };
-};
-
-export { vdom };