jaxs 0.3.1 → 0.4.0

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

package/src/rendering/dom/create.ts

@@ -1,68 +0,0 @@
-import type {
-  Attributes,
-  DomEventPublisher,
-  EventAttributes,
-  EventMaps,
-  ExpandedElement,
-  InputElement,
-  RenderKit,
-} from '../../types';
-
-export const setAttributesOnElement = (
-  element: Element,
-  attributes: Attributes,
-) => {
-  for (const key in attributes) {
-    if (key === '__self') continue;
-    if (key === 'value') {
-      (element as InputElement).value = attributes[key];
-    } else {
-      element.setAttribute(key, attributes[key]);
-    }
-  }
-};
-
-export const setEventsOnElement = (
-  element: ExpandedElement,
-  events: EventAttributes,
-  publish: DomEventPublisher,
-) => {
-  const eventMaps = {} as EventMaps;
-
-  for (const domEvent in events) {
-    const eventName = events[domEvent];
-    const listener = (event: Event) => publish(eventName, event);
-    element.addEventListener(domEvent, listener);
-
-    eventMaps[domEvent] = {
-      domEvent: domEvent,
-      busEvent: eventName,
-      listener: listener,
-    };
-  }
-
-  element.eventMaps = eventMaps;
-};
-
-export const createNode = (type: string, document: Document) => {
-  document = document || window.document;
-  return document.createElement(type);
-};
-
-export const createTextNode = (value: string, document: Document) => {
-  document = document || window.document;
-  return document.createTextNode(value);
-};
-
-export const createDecoratedNode = (
-  type: string,
-  attributes: Attributes,
-  events: EventAttributes,
-  renderKit: RenderKit,
-) => {
-  // deno-lint-ignore no-explicit-any
-  const dom = createNode(type, renderKit.document) as any as ExpandedElement;
-  setAttributesOnElement(dom, attributes);
-  setEventsOnElement(dom, events, renderKit.publish);
-  return dom;
-};

package/src/rendering/dom/svg.ts

@@ -1,18 +0,0 @@
-import type { RenderKit, Attributes, ExpandedElement } from "../../types"
-
-export const namespace = 'http://www.w3.org/2000/svg'
-export const isSvgTag = (tagType: string) => tagType === 'svg'
-export const isSvg = (element: SVGElement) => element.namespaceURI === namespace
-
-export const createSvgNode = (type: string, attributes: Attributes, renderKit: RenderKit) => {
-  const document = renderKit && renderKit.document || window.document;
-  const node = document.createElementNS(namespace, type)
-
-  for (const key in attributes) {
-    if (key === '__self' || key === 'xmlns') continue;
-    // adding namespace in as first argument makes it not really render!
-    node.setAttributeNS(null, key, attributes[key]);
-  }
-
-  return node as unknown as ExpandedElement
-}

package/src/rendering/templates/bound.js

@@ -1,56 +0,0 @@
-import { eventName } from '../../state'
-import { change } from '../change'
-
-const passThroughViewModel = (state) => state
-export class Bound {
-  constructor (TemplateClass, viewModel, subscriptions, attributes) {
-    this.TemplateClass = TemplateClass
-    this.viewModel = viewModel || passThroughViewModel
-    this.attributes = attributes || {}
-    this.subscriptions = subscriptions
-    this.dom = []
-  }
-
-  render (renderKit) {
-    this.parentElement = renderKit.parent
-    this.renderKit = renderKit
-    this.subscribeForRerender()
-    this.dom = this._render(renderKit)
-    return this.dom
-  }
-
-  _render (renderKit) {
-    const props = {
-      ...this.attributes,
-      ...this.viewModel(renderKit.state.value())
-    }
-
-    const template = this.TemplateClass(props)
-
-    const dom = !template ? [] : template.render(renderKit)
-    return dom
-  }
-
-  rerender () {
-    if (!this.parentElement) {
-      this.parentElement = this.dom[0] && this.dom[0].parentElement
-    }
-    const newDom = this._render(this.renderKit)
-    change(this.dom, newDom, this.parentElement)
-
-    if (this.parentElement) {
-      this.dom = Array.from(this.parentElement.childNodes)
-    }
-  }
-
-  subscribeForRerender () {
-    this.subscriptions.forEach((storeName) => {
-      this.renderKit.subscribe(eventName(storeName), () => this.rerender())
-    })
-  }
-}
-
-export const bind = ({ Template, viewModel, subscriptions }) => {
-  subscriptions = subscriptions || []
-  return (attributes) => new Bound(Template, viewModel, subscriptions, attributes)
-}