jaxs 0.3.2 → 0.4.2

package/src/rendering/dom/create.ts

@@ -1,66 +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) => {
-  return document.createElement(type);
-};
-
-export const createTextNode = (value: string, document: 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
-  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)
-}

package/src/rendering/templates/children.ts

@@ -1,99 +0,0 @@
-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);
-};
-
-const withSvgFlag = (isSvg: boolean) => (template: Template) => {
-  template && (template.isSvg = template.isSvg || isSvg)
-  return template
-}
-
-export class Children implements Template {
-  collection: Template[];
-  parentElement: Element | undefined;
-  isSvg: boolean;
-
-  constructor(jsxChildren: Template[], isSvg = false) {
-    this.collection = ensureArray(jsxChildren)
-    this.collection = this.collection.map(replaceTextNodes) as Template[];
-    this.collection = this.collection.flat() as Template[];
-    this.collection = this.collection.map(withSvgFlag(isSvg))
-    this.isSvg = isSvg;
-  }
-
-  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

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

package/src/rendering/templates/tag.ts

@@ -1,92 +0,0 @@
-import type {
-  Attributes,
-  DomCollection,
-  EventAttributes,
-  RenderKit,
-  Template,
-} from '../../types';
-
-import { createDecoratedNode } from '../dom/create';
-import { separateAttrsAndEvents } from '../dom/attributesAndEvents';
-import { isSvgTag, createSvgNode } from '../dom/svg'
-import { Children } from './children';
-
-export class Tag implements Template {
-  type: string;
-  events: EventAttributes;
-  attributes: Attributes;
-  children: Children;
-  isSvg: boolean;
-
-  constructor(
-    tagType: string,
-    combinedAttributes: Attributes,
-    children: Template[],
-    isSvg = false
-  ) {
-    this.type = tagType;
-
-    const { events, attributes } = separateAttrsAndEvents(combinedAttributes);
-    this.events = events;
-    this.attributes = attributes;
-
-    this.isSvg = isSvg || isSvgTag(this.type);
-    this.children = new Children(children, this.isSvg);
-  }
-
-  render(renderKit: RenderKit): DomCollection {
-    const dom = this.generateDom(renderKit);
-    if (!dom) return [];
-
-    this.children.render(renderKit, dom);
-    return [dom];
-  }
-
-  generateDom(renderKit: RenderKit) {
-    if (this.isSvg) {
-      return this.generateSvnDom(renderKit)
-    } else {
-      return this.generateHtmlDom(renderKit)
-    }
-  }
-
-  generateHtmlDom(renderKit: RenderKit) {
-    const node = createDecoratedNode(
-      this.type,
-      this.attributes,
-      this.events,
-      renderKit,
-    );
-    node.__jsx = this.key();
-    return node;
-  }
-
-  generateSvnDom(renderKit: RenderKit) {
-    const node = createSvgNode(
-      this.type,
-      this.attributes,
-      renderKit,
-    );
-    node.__jsx = this.key();
-    return node;
-  }
-
-  key() {
-    return this.attributes.key || this.source() || this.createKey();
-  }
-
-  source() {
-    if (this.attributes.__source) {
-      const { fileName, lineNumber, columnNumber } = this.attributes.__source;
-      return `${fileName}:${lineNumber}:${columnNumber}`;
-    }
-  }
-
-  createKey() {
-    const id = this.attributes.id ? `#${this.attributes.id}` : '';
-    const type = this.attributes.type ? `[type=${this.attributes.type}]` : '';
-    const name = this.attributes.name ? `[name=${this.attributes.name}]` : '';
-
-    return `${this.type}${id}${type}${name}`;
-  }
-}

package/src/rendering/templates/text.ts

@@ -1,17 +0,0 @@
-import type { JsxId, RenderKit, Template, TextValue } from '../../types';
-import { createTextNode } from '../dom/create';
-
-export class TextTemplate implements Template {
-  value: string;
-
-  constructor(content: TextValue) {
-    this.value = content.toString();
-  }
-
-  render(renderKit: RenderKit) {
-    const textNode = createTextNode(this.value, renderKit.document);
-    if (!textNode) return [];
-    (textNode as unknown as JsxId).__jsx = 'TextNode';
-    return [textNode];
-  }
-}

package/src/state/equality.js

@@ -1,36 +0,0 @@
-import { isObject, isArray } from './testingTypes'
-
-export const areElementEqual = (oldValue, newValue) => oldValue === newValue
-
-const keyLengthSame = (oldValue, newValue) =>
-  Object.keys(oldValue).length === Object.keys(newValue).length
-
-export const areObjectsEqual = (oldValue, newValue) => {
-  if (!(isObject(oldValue) && isObject(newValue))) return false
-  if (!keyLengthSame(oldValue, newValue)) return false
-
-  Object.keys(oldValue).every((key) => {
-    const oldInnerValue = oldValue[key]
-    const newInnerValue = newValue[key]
-
-    return areEqual(oldInnerValue, newInnerValue)
-  })
-}
-
-export const areArraysEqual = (oldValue, newValue) => {
-  if (!(isArray(oldValue) && isArray(newValue))) return false
-  if (oldValue.length !== newValue.length) return false
-
-  oldValue.every((oldInnerValue, index) => {
-    const newInnerValue = newValue[index]
-
-    return areEqual(oldInnerValue, newInnerValue)
-  })
-}
-
-export const areEqual = (oldValue, newValue) => {
-  if (isObject(oldValue)) return areObjectsEqual(oldValue, newValue)
-  if (isArray(oldValue)) return areArraysEqual(oldValue, newValue)
-
-  return areElementEqual(oldValue, newValue)
-}

package/src/state/stores.js

@@ -1,63 +0,0 @@
-import { areElementEqual, areArraysEqual, areObjectsEqual } from './equality'
-
-export class GeneralStore {
-  nullEvent = {}
-
-  constructor ({ name, value, parent }) {
-    this.name = name
-    this.value = value
-    this.parent = parent
-    this.initialState = value
-  }
-
-  update (newValue) {
-    if (this.isEqual(newValue)) return
-
-    this.value = newValue
-    return this.parent.publish(this.event())
-  }
-
-  reset () {
-    this.update(this.initialState)
-  }
-
-  isEqual (newValue) {
-    return areElementEqual(this.value, newValue)
-  }
-
-  event () {
-    return {
-      name: this.name,
-      value: this.value
-    }
-  }
-}
-
-export class BooleanStore extends GeneralStore {
-  toggle () {
-    this.update(!this.value)
-  }
-}
-
-export class NumericStore extends GeneralStore {
-}
-
-export class StringStore extends GeneralStore {
-}
-
-export class ListStore extends GeneralStore {
-  isEqual (newValue) {
-    return areArraysEqual(this.value, newValue)
-  }
-
-  push (newValue) {
-    const value = [...this.value, newValue]
-    this.update(value)
-  }
-}
-
-export class RecordStore extends GeneralStore {
-  isEqual (newValue) {
-    return areObjectsEqual(this.value, newValue)
-  }
-}

package/src/state/testingTypes.js

@@ -1,6 +0,0 @@
-export const isBoolean = (value) => typeof (value) === 'boolean'
-export const isNumber = (value) => typeof (value) === 'number'
-export const isString = (value) => typeof (value) === 'string'
-export const isArray = (value) => Array.isArray(value)
-export const isObject = (value) =>
-  value !== null && !isArray(value) && typeof (value) === 'object'

package/src/state.js

@@ -1,89 +0,0 @@
-import {
-  isArray,
-  isObject,
-  isBoolean,
-  isNumber,
-  isString
-} from './state/testingTypes'
-
-import {
-  GeneralStore,
-  ListStore,
-  NumericStore,
-  BooleanStore,
-  StringStore,
-  RecordStore
-} from './state/stores'
-
-const eventPrefix = 'state-change'
-export const eventName = (name) => `${eventPrefix}:${name}`
-
-export class State {
-  constructor (publish) {
-    this.publisher = publish
-    this.stores = {}
-    this.events = []
-    this.transacting = false
-  }
-
-  create (name, value) {
-    const StoreClass = this.storeTypeFor(value)
-    const store = new StoreClass({ name, value, parent: this })
-    this.addStore(name, store)
-  }
-
-  add (store) {
-    const name = store.name
-    this.addStore(name, store)
-  }
-
-  getStore (name) {
-    return this.stores[name]
-  }
-
-  addStore (name, store) {
-    this.stores[name] = store
-    this[name] = store
-  }
-
-  storeTypeFor (value) {
-    if (isArray(value)) return ListStore
-    if (isObject(value)) return RecordStore
-    if (isNumber(value)) return NumericStore
-    if (isBoolean(value)) return BooleanStore
-    if (isString(value)) return StringStore
-
-    return GeneralStore
-  }
-
-  publish (event) {
-    this.events.push(event)
-    if (!this.transacting) this.publishAll()
-  }
-
-  publishAll () {
-    const publishedStores = []
-    this.events.reverse().forEach((event) => {
-      const { name, value } = event
-      if (!publishedStores.includes(name)) {
-        publishedStores.push(name)
-        this.publisher(`${eventPrefix}:${name}`, value)
-      }
-    })
-    this.events = []
-  }
-
-  transaction (setter) {
-    this.transacting = true
-    setter(this)
-    this.transacting = false
-    this.publishAll()
-  }
-
-  value () {
-    return Object.keys(this.stores).reduce((valueObject, key) => {
-      valueObject[key] = this.stores[key].value
-      return valueObject
-    }, {})
-  }
-}