jaxs 0.2.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "jaxs",
+  "version": "0.2.0",
+  "description": "Modular J/TSX application framework",
+  "module": "src/jaxs.ts",
+  "type": "module",
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/jsdom": "^21.1.6",
+    "concurrently": "^8.2.2",
+    "cypress": "^13.6.2",
+    "jsdom": "^23.2.0",
+    "npm": "^10.3.0",
+    "parcel": "^2.11.0",
+    "standard": "^17.1.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "lint": "standard --fix",
+    "build": "bun run bundle.ts",
+    "serve": "bun run build && parcel serve --dist-dir=cypress/jaxs-apps/dist",
+    "integration": "concurrently \"npm run serve\" \"npx cypress open\"",
+    "integration:ci": "concurrently \"npm run serve\" \"npx cypress run\""
+  },
+  "targets": {
+    "html": {
+      "source": [
+        "./cypress/jaxs-apps/add-remove-root-children.html",
+        "./cypress/jaxs-apps/add-remove-nested-children.html"
+      ]
+    }
+  },
+  "standard": {
+    "globals": [ "cy", "describe", "it", "beforeEach" ]
+  }
+}

package/src/app.ts

@@ -0,0 +1,64 @@
+import type { App, BusPublish, BusSubscribe } from './types';
+import { createBus } from './messageBus';
+import { State } from './state'
+import {
+  locationChangeEvent,
+  setupHistory,
+} from './navigation/setupHistory';
+import { setupNavigation } from './navigation/setupNavigation';
+import { render } from './rendering/templates/root';
+
+const setupBus = (app: App) => {
+  const { publish, subscribe, bus } = createBus();
+
+  app.publish = publish;
+  app.subscribe = subscribe;
+  app.bus = bus;
+};
+
+const setupState = (app: App) => {
+  const state = new State(app.publish as BusPublish);
+  app.state = state;
+};
+
+const connectBusToState = (app: App) => {
+  const { bus } = app;
+  bus.addListenerOptions({ state: app.state });
+};
+
+const setupRenderKit = (app: App, document: Document) => {
+  app.renderKit = {
+    publish: app.publish as BusPublish,
+    subscribe: app.subscribe as BusSubscribe,
+    state: app.state as State,
+    document,
+  };
+};
+
+const triggerRoute = (app: App) => {
+  const publish = app.publish as BusPublish;
+  setTimeout(() => {
+    publish(locationChangeEvent, null);
+  }, 0);
+};
+
+const addRender = (app: App) => {
+  app.render = (template, selector) => {
+    return render(template, selector, app.renderKit);
+  };
+};
+
+export const createApp = (document = window.document) => {
+  const app = {} as App;
+
+  setupBus(app);
+  setupState(app);
+  connectBusToState(app);
+  setupRenderKit(app, document);
+  setupHistory(app);
+  setupNavigation(app);
+  triggerRoute(app);
+  addRender(app);
+
+  return app;
+};

package/src/debugging.js

@@ -0,0 +1,5 @@
+export const debug = (...message) => {
+  if (process.env.DEBUG === 'true') {
+    console.log(...message)
+  }
+}

package/src/jaxs.ts

@@ -0,0 +1,8 @@
+export { default as jsx } from './jsx'
+export { render } from './rendering/templates/root'
+export { bind } from './rendering/templates/bound'
+export { createBus } from './messageBus'
+export { createApp } from './app'
+export { State } from './state'
+export * as navigation from './navigation'
+export { views } from './views'

package/src/jsx.js

@@ -0,0 +1,27 @@
+import { Tag } from './rendering/templates/tag'
+import { Children } from './rendering/templates/children'
+
+const ensureChildrenArray = (maybeChildren, attributes) =>
+  maybeChildren || attributes.children || []
+
+const packageAttributes = (maybeAttributes, maybeChildren) => {
+  const attributes = maybeAttributes || {}
+  const children = ensureChildrenArray(maybeChildren, attributes)
+  attributes.children = attributes.children || children
+  return attributes
+}
+
+const jsx = (type, attributes, ...children) => {
+  if (typeof type === 'string') {
+    return new Tag(type, attributes, children)
+  }
+
+  return type(packageAttributes(attributes, children))
+}
+
+jsx.fragment = (attributes, maybeChildren) => {
+  const children = ensureChildrenArray(maybeChildren, attributes)
+  return new Children(children)
+}
+
+export default jsx

package/src/messageBus.ts

@@ -0,0 +1,70 @@
+import type {
+  BusEventName,
+  BusListener,
+  BusListenersMap,
+  BusOptions,
+  BusPayload,
+} from './types';
+
+export class MessageBus {
+  listeners: BusListenersMap;
+  options: BusOptions;
+
+  constructor() {
+    this.options = {};
+    this.listeners = {};
+  }
+
+  subscribe(eventName: BusEventName, listener: BusListener) {
+    this.ensureListenerCollection(eventName);
+
+    this.listeners[eventName].push(listener);
+  }
+
+  publish(eventName: BusEventName, payload: BusPayload) {
+    const listeners = this.listeners[eventName];
+    if (!listeners) return false;
+
+    listeners.forEach((listener: BusListener) => {
+      listener(
+        payload,
+        this.buildListenerKit(eventName),
+      );
+    });
+
+    return true;
+  }
+
+  ensureListenerCollection(eventName: BusEventName) {
+    if (this.listeners[eventName]) return;
+
+    this.listeners[eventName] = [];
+  }
+
+  buildListenerKit(eventName: BusEventName) {
+    return {
+      eventName,
+      publish: this.publish.bind(this),
+      ...this.options,
+    };
+  }
+
+  addListenerOptions(options: BusOptions) {
+    this.options = {
+      ...this.options,
+      ...options,
+    };
+  }
+}
+
+export const createBus = () => {
+  const bus = new MessageBus();
+  const publish = bus.publish.bind(bus);
+  const subscribe = bus.subscribe.bind(bus);
+
+  return {
+    bus,
+    publish,
+    subscribe,
+  };
+};

package/src/navigation/findHref.js

@@ -0,0 +1,10 @@
+export const findHref = (node) => {
+  if (!node || !node.getAttribute) return ''
+
+  while (!node.getAttribute('href')) {
+    node = node.parentNode
+    if (!node || !node.getAttribute) return ''
+  }
+
+  return node.getAttribute('href')
+}

package/src/navigation/routeState.js

@@ -0,0 +1,15 @@
+import { RecordStore } from '../state/stores'
+
+export const createRouteState = (state) => {
+  const store = new RecordStore({
+    name: 'route',
+    value: {
+      host: '',
+      path: '',
+      query: ''
+    },
+    parent: state
+  })
+
+  state.add(store)
+}

package/src/navigation/setupHistory.js

@@ -0,0 +1,38 @@
+import { createRouteState } from './routeState'
+export const locationChangeEvent = 'locationChange'
+export const routeChangeEvent = 'routeChange'
+
+export const extractQueryParams = (queryString) => {
+  return queryString
+    .replace(/^\?/, '')
+    .split('&')
+    .reduce((aggregate, pairString) => {
+      if (!pairString) return aggregate
+
+      const pair = pairString.split('=')
+      aggregate[pair[0]] = pair[1]
+      return aggregate
+    }, {})
+}
+
+export const onLocationChange = (_payload, { publish, state }) => {
+  const { host, pathname, search } = window.location
+  const path = pathname
+  const query = extractQueryParams(search)
+
+  state.route.update({
+    host,
+    path,
+    query
+  })
+
+  // subscribe for fetching data and other things
+  publish(routeChangeEvent, { host, path, query })
+}
+
+export const setupHistory = (app) => {
+  const { publish, subscribe, state } = app
+  createRouteState(state)
+  window.addEventListener('popstate', () => publish(locationChangeEvent))
+  subscribe(locationChangeEvent, onLocationChange)
+}

package/src/navigation/setupNavigation.js

@@ -0,0 +1,25 @@
+import { findHref } from './findHref'
+import { locationChangeEvent } from './setupHistory'
+
+export const linkNavigationEvent = 'goToHref'
+export const programmaticNavigationEvent = 'navigate'
+
+export const navigate = (path, { publish }) => {
+  window.history.pushState(null, '', path)
+  publish(locationChangeEvent)
+}
+
+export const onLinkClick = (domEvent, { publish }) => {
+  if (!domEvent || !domEvent.target) return
+  domEvent.preventDefault()
+
+  const href = findHref(domEvent.target)
+  navigate(href, { publish })
+}
+
+export const setupNavigation = (app) => {
+  const { subscribe } = app
+
+  subscribe(linkNavigationEvent, onLinkClick)
+  subscribe(programmaticNavigationEvent, navigate)
+}

package/src/navigation.ts

@@ -0,0 +1,2 @@
+export { setupHistory } from './navigation/setupHistory';
+export { setupNavigation } from './navigation/setupNavigation';

package/src/rendering/change/compile.ts

@@ -0,0 +1 @@
+export { compileChildren as compileChange } from './instructions/children';

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

@@ -0,0 +1,78 @@
+import { ExpandedElement, Instructions } from '../../../types';
+import { addAttribute, removeAttribute, updateAttribute } from './generate';
+
+export const compileForAttributes = (
+  source: ExpandedElement,
+  target: ExpandedElement,
+) => {
+  const instructions = [] as Instructions;
+  const sourceAttributes = source.attributes;
+  const sourceLength = sourceAttributes.length;
+  const targetAttributes = target.attributes;
+  const targetLength = targetAttributes.length;
+
+  // NOTE: this implementation sucks, but JSDOM doesn't properly implement
+  // .getNamedItem and the deno dom doesn't implement the .length attribute.
+  // It's a total test cluster fuck. When there are integration-y tests that
+  // I can use for rerender via the DOM, I will get rid of unit tests and
+  // improve the implementation. Sucks all around.
+  let index;
+  let innerIndex;
+  let matchingAttribute;
+
+  // iterate through the source attributes to find removals and updates
+  for (index = 0; index < sourceLength; index++) {
+    matchingAttribute = null;
+    const sourceAttribute = sourceAttributes.item(index);
+    if (!sourceAttribute) continue;
+
+    for (innerIndex = 0; innerIndex < targetLength; innerIndex++) {
+      const targetAttribute = targetAttributes.item(innerIndex);
+      if (!targetAttribute) continue;
+      if (sourceAttribute.name == targetAttribute.name) {
+        matchingAttribute = targetAttribute;
+        break;
+      }
+    }
+
+    if (!matchingAttribute) {
+      instructions.push(
+        removeAttribute(source, target, { name: sourceAttribute.name }),
+      );
+    } else if (sourceAttribute.value !== matchingAttribute.value) {
+      instructions.push(
+        updateAttribute(source, target, {
+          name: sourceAttribute.name,
+          value: matchingAttribute.value,
+        }),
+      );
+    }
+  }
+
+  // iterate through the target to find additions
+  for (index = 0; index < targetLength; index++) {
+    matchingAttribute = null;
+    const targetAttribute = targetAttributes.item(index);
+    if (!targetAttribute) continue;
+
+    for (innerIndex = 0; innerIndex < sourceLength; innerIndex++) {
+      const sourceAttribute = sourceAttributes.item(innerIndex);
+      if (!sourceAttribute) continue;
+      if (sourceAttribute.name == targetAttribute.name) {
+        matchingAttribute = sourceAttribute;
+        break;
+      }
+    }
+
+    if (!matchingAttribute) {
+      instructions.push(
+        addAttribute(source, target, {
+          name: targetAttribute.name,
+          value: targetAttribute.value,
+        }),
+      );
+    }
+  }
+
+  return instructions;
+};

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

@@ -0,0 +1,128 @@
+import type {
+  Dom,
+  ExpandedElement,
+  HtmlChildren,
+  Instruction,
+  Instructions,
+} from '../../../types';
+import { insertNode, removeNode, replaceNode } from './generate';
+import { createIdMap } from './idMap';
+import { compileForNodeGenerator } from './node';
+import { debug } from '../../../debugging';
+
+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

@@ -0,0 +1,42 @@
+import { 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);
+};
+
+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

@@ -0,0 +1,51 @@
+import { 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;
+};