jaxs 0.2.0

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

@@ -0,0 +1,122 @@
+import {
+  AttributeInstructionData,
+  ChangeInstructions,
+  Dom,
+  EventInstructionData,
+  ExpandedElement,
+  InputElement,
+  InsertNodeData,
+  Instruction,
+  RemoveInstructionData,
+  UpdateEventInstructionData,
+} 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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,38 @@
+import type { Dom, ExpandedElement, Instructions } from '../../../types';
+import { compileForElement } from './element';
+import { compileForText } from './text';
+
+enum NodeTypes {
+  ElementNode = 1,
+  TextNode = 3,
+}
+
+export const compileForNodeGenerator =
+  (compileForCollection: any) => (source: Dom, target: Dom) => {
+    let instructions = [] as Instructions;
+
+    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

@@ -0,0 +1,10 @@
+import { 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

@@ -0,0 +1,131 @@
+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 } = data as RemoveInstructionData;
+
+  (source as ExpandedElement).removeAttribute(name);
+};
+
+const addAttribute: Updater = (instruction: Instruction) => {
+  const { source, data } = instruction;
+  const { name, value } = data as AttributeInstructionData;
+
+  (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

@@ -0,0 +1,33 @@
+import { 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

@@ -0,0 +1,68 @@
+import {
+  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/templates/bound.js

@@ -0,0 +1,55 @@
+import { eventName } from '../../state'
+import { change } from '../change'
+
+export class Bound {
+  constructor (TemplateClass, viewModel, subscriptions, attributes) {
+    this.TemplateClass = TemplateClass
+    this.viewModel = viewModel
+    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)
+}

package/src/rendering/templates/children.ts

@@ -0,0 +1,91 @@
+import type {
+  Dom,
+  DomCollection,
+  RenderKit,
+  Template,
+  TextValue,
+} from '../../types';
+import { TextTemplate } from './text';
+
+export const ensureArray = (children: Template | Template[]): Template[] => {
+  if (Array.isArray(children)) {
+    return children.flat();
+  }
+
+  if (!children) {
+    return [];
+  }
+
+  return [children];
+};
+
+/* three options for children
+  1. there is no view
+  2. view is an array, recurse
+  3. view is a renderable thing
+*/
+const recursiveRender = (
+  children: Template[],
+  renderKit: RenderKit,
+  rendered = [] as DomCollection,
+): DomCollection => children.reduce(renderReducer(renderKit), rendered).flat();
+
+const renderReducer =
+  (renderKit: RenderKit) =>
+  (aggregate: DomCollection, view: Template): DomCollection => {
+    if (!view) return aggregate;
+
+    if (Array.isArray(view)) {
+      const dom = recursiveRender(view, renderKit, aggregate) as DomCollection;
+      return dom;
+    }
+
+    view.render(renderKit).forEach((template) => aggregate.push(template));
+
+    return aggregate;
+  };
+
+const replaceTextNodes = (child: TextValue | Template) => {
+  if (isTextNode(child)) {
+    return textNode(child as TextValue);
+  }
+
+  return child;
+};
+
+const isTextNode = (child: TextValue | Template) => {
+  return typeof child === 'string' || typeof child === 'number';
+};
+
+const textNode = (content: TextValue) => {
+  return new TextTemplate(content);
+};
+
+export class Children implements Template {
+  collection: Template[];
+  parentElement: Element | undefined;
+
+  constructor(jsxChildren: Template[]) {
+    this.collection = ensureArray(jsxChildren);
+    this.collection = this.collection.map(replaceTextNodes) as Template[];
+    this.collection = this.collection.flat() as Template[];
+  }
+
+  render(renderKit: RenderKit, parentElement: Element | undefined) {
+    this.parentElement = parentElement;
+    const dom = this.generateDom(renderKit);
+    this.attachToParent(dom);
+    return dom;
+  }
+
+  generateDom(renderKit: RenderKit) {
+    return recursiveRender(this.collection, renderKit);
+  }
+
+  attachToParent(dom: DomCollection) {
+    if (this.parentElement === undefined) return;
+
+    const parent = this.parentElement as Element;
+    dom.forEach((node: Dom) => parent.appendChild(node));
+  }
+}

package/src/rendering/templates/root.ts

@@ -0,0 +1,55 @@
+import type {
+  DomCollection,
+  RenderKit,
+  Template,
+} from '../../types';
+
+export class Root {
+  template: Template;
+  selector: string;
+  renderKit: RenderKit;
+  dom: DomCollection;
+  parentElement: Element | null;
+
+  constructor(template: Template, selector: string, renderKit: RenderKit) {
+    this.template = template;
+    this.selector = selector;
+    this.renderKit = renderKit;
+    this.dom = [];
+    this.parentElement = null;
+  }
+
+  renderAndAttach(renderKit: RenderKit) {
+    this.parentElement = this.getParentElement();
+    this.dom = this.render({...renderKit, parent: this.parentElement});
+
+    if (this.parentElement) {
+      this.attach();
+    }
+  }
+
+  render(renderKit: RenderKit) {
+    return this.template.render(renderKit);
+  }
+
+  attach() {
+    this.parentElement && (this.parentElement.innerHTML = '');
+    this.dom.forEach((element) => {
+      this.parentElement && this.parentElement.appendChild(element);
+    });
+  }
+
+  getParentElement() {
+    return this.renderKit.document.querySelector(this.selector);
+  }
+}
+
+export const render = (
+  template: Template,
+  selector: string,
+  renderKit: RenderKit,
+) => {
+  const root = new Root(template, selector, renderKit);
+  root.renderAndAttach(renderKit);
+  return root;
+};