mosaic/cjs/render.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var constants = require('./constants.js');
var formControl = require('./formControl.js');
var helpers = require('./helpers.js');
var list = require('./list.js');
var token = require('./token.js');
var attribute = require('./attribute.js');
var context = require('./context.js');

const HYDRATE_ATTR = "mosaic-hydrate";

const render = (
  target,
  { getState, dispatch },
  template,
  updatedCallback,
  beforeMountCallback
) => {
  let observer = () => {
    let subscribers = new Set();
    return {
      publish: (cb) => {
        for (let fn of subscribers) {
          fn();
        }
        cb?.();
      },
      subscribe(fn) {
        subscribers.add(fn);
      },
    }
  };

  const createSubscription = {
    [constants.TEXT]: ({ value, node, context }, { getState }) => {
      return {
        handler: () => {
          let state = context ? context.wrap(getState()) : getState();
          let a = node.textContent;
          let b = token.getValueFromParts(state, token.getParts(value));
          if (a !== b) node.textContent = b;
        },
      }
    },
    [constants.ATTRIBUTE]: ({ value, node, name, context }, { getState }) => {
      return {
        handler: () => {
          let state = context ? context.wrap(getState()) : getState();
          let b = token.getValueFromParts(state, token.getParts(value));

          attribute.applyAttribute(node, name, b);

          if (node.nodeName === "OPTION") {
            let path = node.parentNode.getAttribute("name");
            let selected = helpers.getValueAtPath(path, state);
            node.selected = selected === b;
          }
        },
      }
    },
    [constants.INPUT]: ({ node, path, context }, { getState, dispatch }) => {
      node.addEventListener("input", () => {
        let value =
          node.getAttribute("type") === "checkbox" ? node.checked : node.value;

        if (value.trim?.().length && !isNaN(value)) value = +value;

        if (context) {
          let state = context.wrap(getState());
          state[path] = value;
          dispatch({
            type: "MERGE",
            payload: state,
          });
        } else {
          dispatch({
            type: "SET",
            payload: {
              name: path,
              value,
              context,
            },
          });
        }
      });

      return {
        handler: () => {
          let state = context ? context.wrap(getState()) : getState();
          formControl.updateFormControl(node, helpers.getValueAtPath(path, state));
        },
      }
    },
    [constants.EVENT]: (
      { node, eventType, actionType, context },
      { dispatch, getState }
    ) => {
      /* 
      
      NB that context is only passed for local actions not prefixed with "$"

      */

      node.addEventListener(eventType, (event) => {
        let isGlobal = actionType.startsWith("$");

        let action = {
          type: actionType,
          event,
        };

        if (!isGlobal)
          action.context = context ? context.wrap(getState()) : getState();

        dispatch(action);

        if (isGlobal) {
          node.dispatchEvent(
            new CustomEvent(actionType, {
              detail: action,
              bubbles: true,
            })
          );
        }
      });
      return {
        handler: () => {},
      }
    },
    [constants.REPEAT]: (
      {
        node,
        context: context$1,
        map,
        path,
        identifier,
        index,
        key,
        blockIndex,
        hydrate,
        pickupNode,
      },
      { getState }
    ) => {
      let oldValue;
      node.$t = blockIndex - 1;

      const initialiseBlock = (rootNode, i, k, exitNode) => {
        helpers.walk(
          rootNode,
          multi(
            (node) => {
              if (node === exitNode) return false
            },
            bindAll(
              map,
              hydrate,
              context.createContext(
                (context$1?.get() || []).concat({
                  path,
                  identifier,
                  key,
                  index,
                  i,
                  k,
                })
              )
            ),
            (child) => (child.$t = blockIndex)
          )
        );
      };

      function firstChild(v) {
        return (v.nodeType === v.DOCUMENT_FRAGMENT_NODE && v.firstChild) || v
      }

      const createListItem = (datum, i) => {
        let k = datum[key];
        let frag = helpers.fragmentFromTemplate(node);
        initialiseBlock(firstChild(frag), i, k);
        return frag
      };

      if (hydrate) {
        let x = helpers.getValueAtPath(path, getState());
        let blocks = list.getBlocks(node);

        blocks.forEach((block, i) => {
          let datum = x[i];
          let k = datum?.[key];
          initialiseBlock(block[0], i, k, helpers.last(block).nextSibling);
        });

        pickupNode = helpers.last(helpers.last(blocks)).nextSibling;
      }

      return {
        handler: () => {
          let state = context$1 ? context$1.wrap(getState()) : getState();

          const newValue = Object.entries(helpers.getValueAtPath(path, state) || []);
          const delta = list.compareKeyedLists(key, oldValue, newValue);

          if (delta) {
            list.updateList(node, delta, newValue, createListItem);
          }
          oldValue = newValue.slice(0);
        },
        pickupNode,
      }
    },
  };

  const mediator = () => {
    const o = observer();
    return {
      bind(v) {
        let s = createSubscription[v.type](v, { getState, dispatch });
        o.subscribe(s.handler);
        return s
      },
      // scheduleUpdate: debounce((state, cb) => {
      //   return o.publish(state, cb)
      // }),
      update(cb) {
        return o.publish(cb)
      },
    }
  };

  const { bind, update } = mediator();

  let blockCount = 0;

  const parse = (frag) => {
    let index = 0;
    let map = {};

    helpers.walk(frag, (node) => {
      let x = [];
      let pickupNode;
      switch (node.nodeType) {
        case node.TEXT_NODE: {
          let value = node.textContent;
          if (token.hasMustache(value)) {
            x.push({
              type: constants.TEXT,
              value,
            });
          }
          break
        }
        case node.ELEMENT_NODE: {
          let each = list.parseEach(node);

          if (each) {
            let ns = node.namespaceURI;
            let m;

            if (ns.endsWith("/svg")) {
              node.removeAttribute("each");
              let tpl = document.createElementNS(ns, "defs");
              tpl.innerHTML = node.outerHTML;
              node.parentNode.replaceChild(tpl, node);
              node = tpl;
              m = parse(node.firstChild);
            } else {
              if (node.nodeName !== "TEMPLATE") {
                node.removeAttribute("each");
                let tpl = document.createElement("template");

                tpl.innerHTML = node.outerHTML;
                node.parentNode.replaceChild(tpl, node);
                node = tpl;
              }
              m = parse(node.content.firstChild);
            }

            pickupNode = node.nextSibling;

            x.push({
              type: constants.REPEAT,
              map: m,
              blockIndex: blockCount++,
              ...each,
              pickupNode,
            });

            break
          }

          let attrs = node.attributes;
          let i = attrs.length;
          while (i--) {
            let { name, value } = attrs[i];

            if (
              name === ":name" &&
              value &&
              (node.nodeName === "INPUT" ||
                node.nodeName === "SELECT" ||
                node.nodeName === "TEXTAREA")
            ) {
              x.push({
                type: constants.INPUT,
                path: value,
              });

              node.removeAttribute(name);
              node.setAttribute("name", value);
            } else if (name.startsWith(":on")) {
              node.removeAttribute(name);
              let eventType = name.split(":on")[1];
              x.push({
                type: constants.EVENT,
                eventType,
                actionType: value,
              });
            } else if (name.startsWith(":")) {
              let prop = name.slice(1);

              let v = value || prop;

              if (!v.includes("{{")) v = `{{${v}}}`;

              x.push({
                type: constants.ATTRIBUTE,
                name: prop,
                value: v,
              });
              node.removeAttribute(name);
            }
          }
        }
      }
      if (x.length) map[index] = x;
      index++;
      return pickupNode
    });

    return map
  };

  const multi =
    (...fns) =>
    (...args) => {
      for (let fn of fns) {
        let v = fn(...args);
        if (v === false) return false
      }
    };

  const bindAll = (bMap, hydrate = 0, context) => {
    let index = 0;
    return (node) => {
      let k = index;
      let p;
      if (k in bMap) {
        bMap[k].forEach((v) => {
          let x = bind({
            ...v,
            node,
            context,
            hydrate,
          });
          p = x.pickupNode;
        });
        node.$i = index;
      }
      index++;
      return p
    }
  };

  let frag = helpers.fragmentFromTemplate(template);
  let map = parse(frag);
  let hydrate = target.hasAttribute?.(HYDRATE_ATTR);
  if (hydrate) {
    helpers.walk(target, bindAll(map, 1));
  } else {
    helpers.walk(frag, bindAll(map));
    beforeMountCallback?.(frag);
    target.prepend(frag);
    update();
    target.setAttribute?.(HYDRATE_ATTR, 1);
  }

  return helpers.debounce(() => update(updatedCallback))
};

exports.render = render;