jaxs 0.3.2 → 0.4.0

package/src/rendering/change/instructions/children.ts

@@ -1,127 +0,0 @@
-import type {
-  Dom,
-  ExpandedElement,
-  HtmlChildren,
-  Instruction,
-  Instructions,
-} from '../../../types';
-import { insertNode, removeNode, replaceNode } from './generate';
-import { createIdMap } from './idMap';
-import { compileForNodeGenerator } from './node';
-
-type DiffPair = {
-  source: Dom;
-  target: Dom;
-};
-
-export const compileChildren = (
-  sourceList: HtmlChildren,
-  targetList: HtmlChildren,
-  parent: ExpandedElement,
-) => {
-  const baseInstructions = [] as Instructions;
-  const length = largerLength(sourceList, targetList);
-  const sourceMap = createIdMap(sourceList);
-  const targetMap = createIdMap(targetList);
-  const nodesPairsToDiff = [] as DiffPair[];
-
-  let index = 0;
-  for (; index < length; index++) {
-    const source = sourceList[index] as ExpandedElement;
-    const target = targetList[index] as ExpandedElement;
-    // debug(
-    //   '\n',
-    //   'loop index',
-    //   index,
-    //   source && source.__jsx,
-    //   target && target.__jsx,
-    // );
-
-    // This algorithm uses the target as the source of truth, iterating
-    // through it first figuring out what to do. The length could be larger than
-    // the target length, which means that there are unresolved sources to remove.
-    // Part of the goal of this flow is to ensure that insertions happen in
-    // accending order.
-    if (target && targetMap.check(target)) {
-      // debug('target', target.__jsx, 'index', index);
-      const matchingSource = sourceMap.pullMatch(target);
-      targetMap.clear(target); // mark target as resolved
-
-      if (matchingSource.element) {
-        // debug('matching source found for target');
-        if (matchingSource.index !== index) {
-          // move source to index
-          // debug('moving source', matchingSource.element.__jsx, index);
-          baseInstructions.push(
-            insertNode(matchingSource.element, { parent, index }),
-          );
-        }
-        // update element for attribute, event and child changes
-        // debug('updating to match target',
-        //   matchingSource.element.__jsx,
-        //   matchingSource.element.classList,
-        //   target.__jsx,
-        //   target.classList
-        // );
-        nodesPairsToDiff.push({
-          source: matchingSource.element,
-          target,
-        });
-      } else if (source) {
-        // debug('NO matching source for target but source in slot', source.__jsx);
-
-        if (targetMap.check(source)) {
-          // the source is somewhere else in the target, so just add this
-          // target element and assume the source will get resolved later.
-          // debug('adding', target.__jsx, 'at', index);
-          baseInstructions.push(insertNode(target, { parent, index }));
-        } else {
-          // no matching target, but something is in the index/slot ... so swap
-          // debug('replacing', source.__jsx, target.__jsx, 'at', index);
-          sourceMap.clear(source); // resolve source
-          baseInstructions.push(replaceNode(source as Dom, target as Dom));
-        }
-      } else {
-        // extra targets, add these to the end of the parent in order received
-        // debug('adding target to end', target.__jsx);
-        baseInstructions.push(insertNode(target, { parent, index }));
-      }
-    } else if (source) {
-      // stuff has been remove from the target
-      // check to see if source has been resolved in map
-      // if not remove from dom
-      const matchingSource = sourceMap.pullMatch(source);
-      if (matchingSource.element) {
-        // debug('removing', source.__jsx);
-        baseInstructions.push(removeNode(source));
-      }
-    }
-  }
-
-  // deal with unresolved sources
-  sourceMap.remaining().forEach(({ element }) => {
-    // debug('removing', element.__jsx);
-    baseInstructions.push(removeNode(element));
-  });
-
-  const nodeInstructions = nodesPairsToDiff
-    .reduce((collection, { source, target }) => {
-      return collection.concat(compileForNode(source, target));
-    }, [] as Instructions);
-
-  return baseInstructions.concat(nodeInstructions).sort(instructionsSorter);
-};
-
-const instructionsSorter = (left: Instruction, right: Instruction) => {
-  if (left.type > right.type) return 1;
-  if (left.type < right.type) return -1;
-  return 0;
-};
-
-const largerLength = (sourceList: HtmlChildren, targetList: HtmlChildren) => {
-  const sourceLength = Array.from(sourceList).length;
-  const targetLength = Array.from(targetList).length;
-  return sourceLength > targetLength ? sourceLength : targetLength;
-};
-
-const compileForNode = compileForNodeGenerator(compileChildren);

package/src/rendering/change/instructions/element.ts

@@ -1,49 +0,0 @@
-import type { ExpandedElement, InputElement, Instructions } from '../../../types';
-import { changeValue } from './generate';
-import { compileForAttributes } from './attributes';
-import { compileForEvents } from './events';
-
-export const compileForElement = (
-  source: ExpandedElement,
-  target: ExpandedElement,
-) => {
-  const attributeInstructions = compileForAttributes(source, target);
-  const eventInstructions = compileForEvents(source, target);
-  const valueInstructions = compileForInputValue(source, target);
-
-  return attributeInstructions
-    .concat(eventInstructions)
-    .concat(valueInstructions);
-};
-
-export const compileForSvg = (
-  source: ExpandedElement,
-  target: ExpandedElement,
-) => {
-  return compileForAttributes(source, target, true);
-}
-
-const compileForInputValue = (
-  sourceElement: ExpandedElement,
-  targetElement: ExpandedElement,
-) => {
-  const instructions = [] as Instructions;
-  if (sourceElement.tagName !== 'INPUT') {
-    return instructions;
-  }
-
-  const source = sourceElement as InputElement;
-  const target = targetElement as InputElement;
-
-  if (source.value !== target.value) {
-    instructions.push(
-      changeValue(
-        source,
-        target,
-        { name: 'value', value: target.value },
-      ),
-    );
-  }
-
-  return instructions;
-};

package/src/rendering/change/instructions/events.ts

@@ -1,51 +0,0 @@
-import type { ExpandedElement, Instructions } from '../../../types';
-import { addEvent, removeEvent, updateEvent } from './generate';
-
-export const compileForEvents = (
-  source: ExpandedElement,
-  target: ExpandedElement,
-) => {
-  const instructions = [] as Instructions;
-  const sourceEventMaps = source.eventMaps;
-  const targetEventMaps = target.eventMaps;
-  const sourceDomEvents = Object.keys(sourceEventMaps);
-  const targetDomEvents = Object.keys(targetEventMaps);
-
-  sourceDomEvents.forEach((domEvent) => {
-    const sourceEventMap = sourceEventMaps[domEvent];
-    const targetEventMap = targetEventMaps[domEvent];
-
-    if (!targetEventMap) {
-      instructions.push(
-        removeEvent(source, target, {
-          name: sourceEventMap.domEvent,
-          value: sourceEventMap.listener,
-        }),
-      );
-    } else if (targetEventMap.busEvent !== sourceEventMap.busEvent) {
-      instructions.push(
-        updateEvent(source, target, {
-          name: domEvent,
-          targetValue: targetEventMap.listener,
-          sourceValue: sourceEventMap.listener,
-        }),
-      );
-    } // else events the same
-  });
-
-  targetDomEvents.forEach((domEvent) => {
-    const sourceEventMap = sourceEventMaps[domEvent];
-    const targetEventMap = targetEventMaps[domEvent];
-
-    if (!sourceEventMap) {
-      instructions.push(
-        addEvent(source, target, {
-          name: targetEventMap.domEvent,
-          value: targetEventMap.listener,
-        }),
-      );
-    }
-  });
-
-  return instructions;
-};

package/src/rendering/change/instructions/generate.ts

@@ -1,122 +0,0 @@
-import type {
-  AttributeInstructionData,
-  Dom,
-  EventInstructionData,
-  ExpandedElement,
-  InputElement,
-  InsertNodeData,
-  Instruction,
-  RemoveInstructionData,
-  UpdateEventInstructionData,
-} from '../../../types';
-import { ChangeInstructions } from '../../../types'
-
-export const changeText = (source: Text, target: Text): Instruction => ({
-  source,
-  target,
-  type: ChangeInstructions.changeText,
-  data: {},
-});
-
-export const replaceNode = (source: Dom, target: Dom): Instruction => ({
-  source,
-  target,
-  type: ChangeInstructions.replaceNode,
-  data: {},
-});
-
-export const removeAttribute = (
-  source: ExpandedElement,
-  target: ExpandedElement,
-  data: RemoveInstructionData,
-): Instruction => ({
-  source,
-  target,
-  data,
-  type: ChangeInstructions.removeAttribute,
-});
-
-export const addAttribute = (
-  source: ExpandedElement,
-  target: ExpandedElement,
-  data: AttributeInstructionData,
-): Instruction => ({
-  source,
-  target,
-  data,
-  type: ChangeInstructions.addAttribute,
-});
-
-export const updateAttribute = (
-  source: ExpandedElement,
-  target: ExpandedElement,
-  data: AttributeInstructionData,
-): Instruction => ({
-  source,
-  target,
-  data,
-  type: ChangeInstructions.updateAttribute,
-});
-
-export const removeEvent = (
-  source: ExpandedElement,
-  target: ExpandedElement,
-  data: EventInstructionData,
-): Instruction => ({
-  source,
-  target,
-  data,
-  type: ChangeInstructions.removeEvent,
-});
-
-export const addEvent = (
-  source: ExpandedElement,
-  target: ExpandedElement,
-  data: EventInstructionData,
-): Instruction => ({
-  source,
-  target,
-  data,
-  type: ChangeInstructions.addEvent,
-});
-
-export const updateEvent = (
-  source: ExpandedElement,
-  target: ExpandedElement,
-  data: UpdateEventInstructionData,
-): Instruction => ({
-  source,
-  target,
-  data,
-  type: ChangeInstructions.updateEvent,
-});
-
-export const removeNode = (
-  source: ExpandedElement,
-) => ({
-  source,
-  target: source, // for type crap only
-  type: ChangeInstructions.removeNode,
-  data: {},
-});
-
-export const insertNode = (
-  target: ExpandedElement,
-  data: InsertNodeData,
-) => ({
-  target,
-  source: target, // for type crap only
-  type: ChangeInstructions.insertNode,
-  data,
-});
-
-export const changeValue = (
-  source: InputElement,
-  target: InputElement,
-  data: AttributeInstructionData,
-) => ({
-  source,
-  target,
-  type: ChangeInstructions.changeValue,
-  data,
-});

package/src/rendering/change/instructions/idMap.js

@@ -1,55 +0,0 @@
-const nullMatch = { index: -1 }
-
-export class IdMap {
-  constructor () {
-    this.map = {}
-  }
-
-  populate (list) {
-    list.forEach((element, i) => {
-      const id = element.__jsx
-      if (id) {
-        this.map[id] = this.map[id] || []
-        this.map[id].push({
-          element,
-          index: i
-        })
-      }
-    })
-  }
-
-  pullMatch (element) {
-    const id = element && element.__jsx
-    if (!id) return nullMatch
-    if (!(this.map[id] && this.map[id].length)) return nullMatch
-
-    return this.map[id].shift()
-  }
-
-  clear (element) {
-    const id = element && element.__jsx
-    if (!(id && this.map[id] && this.map[id].length)) return
-
-    const matches = this.map[id]
-    this.map[id] = matches.reduce((collection, possibleMatch) => {
-      if (possibleMatch.element !== element) collection.push(possibleMatch)
-      return collection
-    }, [])
-  }
-
-  check (element) {
-    const id = element && element.__jsx
-    if (!(id && this.map[id])) return false
-    return this.map[id].length > 0
-  }
-
-  remaining () {
-    return Object.values(this.map).flat()
-  }
-}
-
-export const createIdMap = (list) => {
-  const map = new IdMap()
-  map.populate(list)
-  return map
-}

package/src/rendering/change/instructions/node.ts

@@ -1,55 +0,0 @@
-import type { Dom, ExpandedElement, Instructions } from '../../../types';
-import { compileForElement, compileForSvg } from './element';
-import { compileForText } from './text';
-import { isSvg } from '../../dom/svg'
-
-enum NodeTypes {
-  ElementNode = 1,
-  TextNode = 3,
-}
-
-export const compileForNodeGenerator =
-  (compileForCollection: any) => (source: Dom, target: Dom) => {
-    let instructions = [] as Instructions;
-
-    if (source.nodeType === NodeTypes.ElementNode &&
-        isSvg(source as SVGElement)) {
-      const sourceElement = source as ExpandedElement;
-      const targetElement = target as ExpandedElement;
-      const baseInstructions = compileForSvg(
-        sourceElement,
-        targetElement
-      )
-
-      const childrenInstructions = compileForCollection(
-        sourceElement.childNodes,
-        targetElement.childNodes,
-        sourceElement,
-      );
-
-      instructions = baseInstructions.concat(childrenInstructions);
-    } else if (source.nodeType === NodeTypes.ElementNode) {
-      const sourceElement = source as ExpandedElement;
-      const targetElement = target as ExpandedElement;
-
-      const baseInstructions = compileForElement(
-        sourceElement,
-        targetElement,
-      );
-
-      const childrenInstructions = compileForCollection(
-        sourceElement.childNodes,
-        targetElement.childNodes,
-        sourceElement,
-      );
-
-      instructions = baseInstructions.concat(childrenInstructions);
-    } else if (source.nodeType === NodeTypes.TextNode) {
-      instructions = compileForText(
-        source as Text,
-        target as Text,
-      );
-    }
-
-    return instructions;
-  };

package/src/rendering/change/instructions/text.ts

@@ -1,10 +0,0 @@
-import type { Instructions } from '../../../types';
-import { changeText } from './generate';
-
-export const compileForText = (source: Text, target: Text) => {
-  if (source.textContent !== target.textContent) {
-    return [changeText(source, target)];
-  }
-
-  return [] as Instructions;
-};

package/src/rendering/change.ts

@@ -1,139 +0,0 @@
-import type {
-  AttributeInstructionData,
-  EventInstructionData,
-  ExpandedElement,
-  HtmlChildren,
-  InputElement,
-  InsertNodeData,
-  Instruction,
-  RemoveInstructionData,
-  UpdateEventInstructionData,
-  Updater,
-} from '../types';
-import {  ChangeInstructions } from '../types'
-import { compileChange } from './change/compile';
-// import { debug } from '../debugging';
-
-export const change = (
-  source: HtmlChildren,
-  target: HtmlChildren,
-  parent: ExpandedElement,
-) => {
-  const instructions = compileChange(source, target, parent);
-
-  // debug('instructions', instructions.map((instruction) => instruction.type))
-
-  instructions.forEach((instruction) => {
-    performInstruction(instruction);
-  });
-};
-
-const performInstruction = (instruction: Instruction) => {
-  const performer = performers[instruction.type] || noop;
-  performer(instruction);
-};
-
-const noop: Updater = (_instruction: Instruction) => {};
-
-const changeText: Updater = (instruction: Instruction) => {
-  const { source, target } = instruction;
-  source.nodeValue = target.textContent;
-};
-
-const removeNode: Updater = (instruction: Instruction) => {
-  const { source } = instruction;
-  source.remove();
-  // debug('removeNode called on', source.nodeName)
-};
-
-const insertNode: Updater = (instruction: Instruction) => {
-  const { target, data } = instruction;
-  const { parent, index } = data as InsertNodeData;
-  const sibling = parent.childNodes[index];
-  if (!sibling) {
-    parent.appendChild(target);
-  } else if (sibling && sibling !== target) {
-    parent.insertBefore(target, sibling);
-  }
-  // else case, sibling is target and so it is moving to the same place: no-op.
-};
-
-const replaceNode: Updater = (instruction: Instruction) => {
-  const { source, target } = instruction;
-  source.replaceWith(target);
-  // debug('replaceNode called on', source.nodeName, 'with', target.nodeName)
-  // debug('parent', source.parentElement)
-};
-
-const removeAttribute: Updater = (instruction: Instruction) => {
-  const { source, data } = instruction;
-  const { name, isSvg } = data as RemoveInstructionData;
-
-  if (isSvg) {
-    (source as SVGElement).removeAttributeNS(null, name)
-  } else {
-    (source as ExpandedElement).removeAttribute(name);
-  }
-};
-
-const addAttribute: Updater = (instruction: Instruction) => {
-  const { source, data } = instruction;
-  const { name, value, isSvg } = data as AttributeInstructionData;
-
-  if (isSvg) {
-    (source as SVGElement).setAttributeNS(null, name, value)
-  } else {
-    (source as ExpandedElement).setAttribute(name, value);
-  }
-};
-
-const updateAttribute: Updater = (instruction: Instruction) => {
-  addAttribute(instruction);
-};
-
-const removeEvent: Updater = (instruction: Instruction) => {
-  const data = instruction.data as EventInstructionData;
-  const source = instruction.source as ExpandedElement;
-  const { name, value } = data;
-  (source as ExpandedElement).removeEventListener(name, value);
-};
-
-const addEvent: Updater = (instruction: Instruction) => {
-  const data = instruction.data as EventInstructionData;
-  const source = instruction.source as ExpandedElement;
-  const { name, value } = data;
-  (source as ExpandedElement).addEventListener(name, value);
-};
-
-const updateEvent: Updater = (instruction: Instruction) => {
-  const data = instruction.data as UpdateEventInstructionData;
-  const source = instruction.source as ExpandedElement;
-
-  const { name, sourceValue, targetValue } = data;
-
-  source.removeEventListener(name, sourceValue);
-  source.addEventListener(name, targetValue);
-};
-
-const changeValue: Updater = (instruction: Instruction) => {
-  const data = instruction.data as AttributeInstructionData;
-  const source = instruction.source as InputElement;
-
-  const { value } = data;
-
-  source.value = value;
-};
-
-const performers = {
-  [ChangeInstructions.changeText]: changeText,
-  [ChangeInstructions.removeNode]: removeNode,
-  [ChangeInstructions.insertNode]: insertNode,
-  [ChangeInstructions.replaceNode]: replaceNode,
-  [ChangeInstructions.removeAttribute]: removeAttribute,
-  [ChangeInstructions.addAttribute]: addAttribute,
-  [ChangeInstructions.updateAttribute]: updateAttribute,
-  [ChangeInstructions.removeEvent]: removeEvent,
-  [ChangeInstructions.addEvent]: addEvent,
-  [ChangeInstructions.updateEvent]: updateEvent,
-  [ChangeInstructions.changeValue]: changeValue,
-};

package/src/rendering/dom/attributesAndEvents.ts

@@ -1,33 +0,0 @@
-import type { Attributes, AttributesAndEvents } from '../../types';
-
-export const separateAttrsAndEvents = (
-  combined: Attributes,
-  defaultValue = '',
-): AttributesAndEvents => {
-  const attributes: Attributes = {};
-  const events: Attributes = {};
-
-  for (const key in combined) {
-    const value = combined[key];
-    if (key.match(/^on.+/i)) {
-      const eventKey = key.slice(2).toLowerCase();
-      events[eventKey] = value;
-    } else {
-      attributes[key] = normalizeValueForKey(combined, key, defaultValue);
-    }
-  }
-
-  return {
-    attributes,
-    events,
-  };
-};
-
-const normalizeValueForKey = (
-  object: Attributes,
-  key: string,
-  defaultValue = '',
-) => {
-  if (object[key] === undefined) return defaultValue;
-  return object[key];
-};