jaxs 0.2.0

package/src/rendering/templates/tag.ts

@@ -0,0 +1,70 @@
+import type {
+  Attributes,
+  DomCollection,
+  EventAttributes,
+  RenderKit,
+  Template,
+} from '../../types';
+
+import { createDecoratedNode } from '../dom/create';
+import { separateAttrsAndEvents } from '../dom/attributesAndEvents';
+import { Children } from './children';
+
+export class Tag implements Template {
+  type: string;
+  events: EventAttributes;
+  attributes: Attributes;
+  children: Children;
+
+  constructor(
+    tagType: string,
+    combinedAttributes: Attributes,
+    children: Template[],
+  ) {
+    this.type = tagType;
+
+    const { events, attributes } = separateAttrsAndEvents(combinedAttributes);
+    this.events = events;
+    this.attributes = attributes;
+
+    this.children = new Children(children);
+  }
+
+  render(renderKit: RenderKit): DomCollection {
+    const dom = this.generateDom(renderKit);
+    if (!dom) return [];
+
+    this.children.render(renderKit, dom);
+    return [dom];
+  }
+
+  generateDom(renderKit: RenderKit) {
+    const node = createDecoratedNode(
+      this.type,
+      this.attributes,
+      this.events,
+      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

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

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

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

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

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

@@ -0,0 +1,149 @@
+// 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;
+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 {
+  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;
+};
+
+export type AttributeInstructionData = {
+  name: string;
+  value: string;
+};
+
+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

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

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

package/src/views.js

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

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "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"
+  }
+}