jaxs 0.3.1 → 0.4.0

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
-    }, {})
-  }
-}

package/src/types.ts

@@ -1,152 +0,0 @@
-// Rendering & Dom ------
-import { State } from './state'
-export type DomEventPublisher = (eventName: string, domEvent: Event) => void;
-
-export type RenderKit = {
-  document: Document;
-  publish: DomEventPublisher;
-  subscribe: BusSubscribe;
-  state: State;
-  parent?: Element | null;
-};
-
-export interface JsxId {
-  __jsx: string;
-}
-export interface ExpandedElement extends Element, JsxId {
-  eventMaps: EventMaps;
-}
-export interface InputElement extends ExpandedElement {
-  // deno-lint-ignore no-explicit-any
-  value: any;
-}
-export type Dom = Text | ExpandedElement | SVGElement;
-export type DomCollection = Dom[];
-export type HtmlChildren =
-  | HTMLCollection
-  | NodeListOf<ChildNode>
-  | DomCollection;
-export type TextValue = string | number;
-export type EventMap = {
-  domEvent: string;
-  busEvent: string;
-  listener: EventListener;
-};
-export type EventMaps = Record<string, EventMap>;
-
-// deno-lint-ignore no-explicit-any
-export type Attributes = Record<string, any>;
-export type EventAttributes = Record<string, string>;
-export type AttributesAndEvents = {
-  attributes: Attributes;
-  events: EventAttributes;
-};
-
-export type TemplateEventListeners = Record<string, EventListener>;
-
-export interface Template {
-  isSvg?: boolean,
-  render: (
-    renderKit: RenderKit,
-    parentElement?: Element,
-  ) => DomCollection;
-}
-export type TemplateClass = (attributes: Attributes) => Template;
-
-export type ViewModel = (state: Record<string,any>) => State;
-
-// Message Bus ----
-export type BusEventName = string;
-// deno-lint-ignore no-explicit-any
-export type BusOptions = Record<string, any>;
-// deno-lint-ignore no-explicit-any
-export type BusPayload = any;
-export type BusPublish = (eventName: BusEventName, payload: BusPayload) => void;
-export type BusSubscribe = (
-  eventName: BusEventName,
-  listener: BusListener,
-) => void;
-export interface BusListenerKit {
-  publish: BusPublish;
-  eventName: BusEventName;
-  // deno-lint-ignore no-explicit-any
-  [key: string]: any;
-}
-export type BusListener = (
-  payload: BusPayload,
-  listenerKit: BusListenerKit,
-) => void;
-export type BusListenersMap = Record<BusEventName, BusPayload>;
-
-// Change instructions
-export type RemoveInstructionData = {
-  name: string;
-  isSvg?: boolean;
-};
-
-export type AttributeInstructionData = {
-  name: string;
-  value: string;
-  isSvg?: boolean;
-};
-
-export type EventInstructionData = {
-  name: string;
-  value: EventListener;
-};
-
-export type UpdateEventInstructionData = {
-  name: string;
-  sourceValue: EventListener;
-  targetValue: EventListener;
-};
-
-export type InsertNodeData = {
-  parent: ExpandedElement;
-  index: number;
-};
-
-type NullData = Record<string, never>;
-
-export type InstructionData =
-  | RemoveInstructionData
-  | AttributeInstructionData
-  | EventInstructionData
-  | UpdateEventInstructionData
-  | InsertNodeData
-  | NullData;
-
-export type Instruction = {
-  source: Dom;
-  target: Dom;
-  type: ChangeInstructions;
-  data: InstructionData;
-};
-
-export type Instructions = Array<Instruction>;
-
-export enum ChangeInstructions {
-  removeNode,
-  insertNode, // can be to move an existing element in the dom, or to add one
-  replaceNode,
-  removeAttribute,
-  addAttribute,
-  updateAttribute,
-  removeEvent,
-  addEvent,
-  updateEvent,
-  changeValue,
-  changeText,
-}
-
-export type Updater = (instruction: Instruction) => void;
-
-export type App = {
-  publish?: BusPublish;
-  subscribe?: BusSubscribe;
-  // deno-lint-ignore no-explicit-any
-  bus?: any;
-  state?: State
-  renderKit: RenderKit;
-  render: (template: Template, selector: string) => Template;
-};

package/src/views/conditionals.jsx

@@ -1,18 +0,0 @@
-import jsx from '../jsx'
-
-export const If = ({ condition, children }) => {
-  if (!condition) return
-  return <>{children}</>
-}
-
-export const Unless = ({ condition, children }) => {
-  if (condition) return
-  return <>{children}</>
-}
-
-export const IfElse = ({ condition, children }) => {
-  const [first, ...rest] = children
-
-  if (condition) return <>{first}</>
-  return <>{rest}</>
-}

package/src/views/link.jsx

@@ -1,5 +0,0 @@
-import jsx from '../jsx'
-
-export const Link = ({ children, ...props }) => {
-  return <a {...props} onClick='goToHref'>{children}</a>
-}

package/src/views.js

@@ -1,7 +0,0 @@
-import * as conditionals from './views/conditionals.jsx'
-import { Link } from './views/link.jsx'
-
-export const views = {
-  ...conditionals,
-  Link
-}

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["ESNext"],
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleDetection": "force",
-    "allowJs": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-
-    /* Linting */
-    "skipLibCheck": true,
-    "strict": true,
-    "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true,
-
-    /* Jaxs JSX */
-    "jsx": "react",
-    "jsxFactory": "jsx",
-    "jsxFragmentFactory": "jsx.fragment"
-  }
-}