my-framework-almaz 1.0.0

package/README.md

@@ -0,0 +1,27 @@
+# Fe-Fwk
+
+![fe-fwk](https://img.shields.io/badge/fe--fwk-book-blueviolet)
+
+Code for the book "[Build a frontend framework from scratch](http://mng.bz/aM2o)".
+
+This framework **isn't intended for production use**.
+Its intention is to **teach you how frontend frameworks work** by building one yourself, from scratch.
+
+## [v1.0 — Chapter 6](https://github.com/angelsolaorbaiceta/fe-fwk-book/tree/ch6/packages/runtime)
+
+_See the example application in the [examples/ch06 folder](https://github.com/angelsolaorbaiceta/fe-fwk-book/tree/main/examples/ch06)_.
+
+To checkout this version of the code:
+
+```bash
+git checkout ch6
+```
+
+This version of the framework introduces the concept of a _Virtual DOM_.
+It implements the `h()`, `hString()` and `hFragment()` functions to create virtual nodes and the `mountDOM()` and `destroyDOM()` functions to turn the virtual DOM representing the view of the application into HTML elements in the browser.
+
+The application instance, created using the `createApp()` function, holds all the state for the application, which can be changed by dispatching commands using an instance of a `Dispatcher`.
+Every time a command is dispatched, the reducer subscribed to the command is run to update the state, and then, the entire view is destroyed and recreated from scratch.
+This is done by registering the application's `renderApp()` function to run after each command is processed in the dispatcher.
+
+In the next version we introduce the _reconciliation algorithm_ to only update the parts of the DOM that have changed.

package/dist/my-framework-almaz.js

@@ -0,0 +1,243 @@
+function addEventListener(eventName, handler, el) {
+  el.addEventListener(eventName, handler);
+  return handler
+}
+function addEventListeners(listeners = {}, el) {
+  const addedListeners = {};
+  Object.entries(listeners).forEach(([eventName, handler]) => {
+    const listener = addEventListener(eventName, handler, el);
+    addedListeners[eventName] = listener;
+  });
+  return addedListeners
+}
+function removeEventListeners(listeners, el) {
+  Object.entries(listeners).forEach(([eventName, handler]) => {
+    el.removeEventListener(eventName, handler);
+  });
+}
+
+function withoutNulls(arr) {
+  return arr.filter((item) => item != null)
+}
+
+const DOM_TYPES = {
+  TEXT: 'text',
+  ELEMENT: 'element',
+  FRAGMENT: 'fragment',
+};
+function h(tag, props = {}, children = []) {
+  return {
+    tag,
+    props,
+    children: mapTextNodes(withoutNulls(children)),
+    type: DOM_TYPES.ELEMENT,
+  }
+}
+function hString(str) {
+  return { type: DOM_TYPES.TEXT, value: str }
+}
+function hFragment(vNodes) {
+  return {
+    type: DOM_TYPES.FRAGMENT,
+    children: mapTextNodes(withoutNulls(vNodes)),
+  }
+}
+function mapTextNodes(children) {
+  return children.map((child) =>
+    typeof child === 'string' ? hString(child) : child
+  )
+}
+
+function destroyDOM(vdom) {
+  const { type } = vdom;
+  switch (type) {
+    case DOM_TYPES.TEXT: {
+      removeTextNode(vdom);
+      break
+    }
+    case DOM_TYPES.ELEMENT: {
+      removeElementNode(vdom);
+      break
+    }
+    case DOM_TYPES.FRAGMENT: {
+      removeFragmentNode(vdom);
+      break
+    }
+    default: {
+      throw new Error(`Can't destroy DOM of type: ${type}`)
+    }
+  }
+  delete vdom.el;
+}
+function removeTextNode(vdom) {
+  const { el } = vdom;
+  el.remove();
+}
+function removeElementNode(vdom) {
+  const { el, children, listeners } = vdom;
+  el.remove();
+  children.forEach(destroyDOM);
+  if (listeners) {
+    removeEventListeners(listeners, el);
+    delete vdom.listeners;
+  }
+}
+function removeFragmentNode(vdom) {
+  const { children } = vdom;
+  children.forEach(destroyDOM);
+}
+
+class Dispatcher {
+  #subs = new Map()
+  #afterHandlers = []
+  subscribe(commandName, handler) {
+    if (!this.#subs.has(commandName)) {
+      this.#subs.set(commandName, []);
+    }
+    const handlers = this.#subs.get(commandName);
+    if (handlers.includes(handler)) {
+      return () => {}
+    }
+    handlers.push(handler);
+    return () => {
+      const idx = handlers.indexOf(handler);
+      handlers.splice(idx, 1);
+    }
+  }
+  afterEveryCommand(handler) {
+    this.#afterHandlers.push(handler);
+    return () => {
+      const idx = this.#afterHandlers.indexOf(handler);
+      this.#afterHandlers.splice(idx, 1);
+    }
+  }
+  dispatch(commandName, payload) {
+    if (this.#subs.has(commandName)) {
+      this.#subs.get(commandName).forEach((handler) => handler(payload));
+    } else {
+      console.warn(`No handlers for command: ${commandName}`);
+    }
+    this.#afterHandlers.forEach((handler) => handler());
+  }
+}
+
+function setAttributes(el, attrs) {
+  const { class: className, style, ...otherAttrs } = attrs;
+  if (className) {
+    setClass(el, className);
+  }
+  if (style) {
+    Object.entries(style).forEach(([prop, value]) => {
+      setStyle(el, prop, value);
+    });
+  }
+  for (const [name, value] of Object.entries(otherAttrs)) {
+    setAttribute(el, name, value);
+  }
+}
+function setClass(el, className) {
+  el.className = '';
+  if (typeof className === 'string') {
+    el.className = className;
+  }
+  if (Array.isArray(className)) {
+    el.classList.add(...className);
+  }
+}
+function setStyle(el, name, value) {
+  el.style[name] = value;
+}
+function setAttribute(el, name, value) {
+  if (value === null) {
+    removeAttribute(el, value);
+  } else if (name.startsWith('data-')) {
+    el.setAttribute(name, value);
+  } else {
+    el[name] = value;
+  }
+}
+function removeAttribute(el, name) {
+  el[name] = null;
+  el.removeAttribute(name);
+}
+
+function mountDOM(vdom, parentEl) {
+  switch (vdom.type) {
+    case DOM_TYPES.TEXT: {
+      createTextNode(vdom, parentEl);
+      break
+    }
+    case DOM_TYPES.ELEMENT: {
+      createElementNode(vdom, parentEl);
+      break
+    }
+    case DOM_TYPES.FRAGMENT: {
+      createFragmentNodes(vdom, parentEl);
+      break
+    }
+    default: {
+      throw new Error(`Can't mount DOM of type: ${vdom.type}`)
+    }
+  }
+}
+function createTextNode(vdom, parentEl) {
+  const { value } = vdom;
+  const textNode = document.createTextNode(value);
+  vdom.el = textNode;
+  parentEl.append(textNode);
+}
+function createFragmentNodes(vdom, parentEl) {
+  const { children } = vdom;
+  vdom.el = parentEl;
+  children.forEach((child) => mountDOM(child, parentEl));
+}
+function createElementNode(vdom, parentEl) {
+  const { tag, props, children } = vdom;
+  const element = document.createElement(tag);
+  addProps(element, props, vdom);
+  vdom.el = element;
+  children.forEach((child) => mountDOM(child, element));
+  parentEl.append(element);
+}
+function addProps(el, props, vdom) {
+  const { on: events, ...attrs } = props;
+  vdom.listeners = addEventListeners(events, el);
+  setAttributes(el, attrs);
+}
+
+function createApp({ state, view, reducers = {} }) {
+  let parentEl = null;
+  let vdom = null;
+  const dispatcher = new Dispatcher();
+  const subscriptions = [dispatcher.afterEveryCommand(renderApp)];
+  function emit(eventName, payload) {
+    dispatcher.dispatch(eventName, payload);
+  }
+  for (const actionName in reducers) {
+    const reducer = reducers[actionName];
+    const subs = dispatcher.subscribe(actionName, (payload) => {
+      state = reducer(state, payload);
+    });
+    subscriptions.push(subs);
+  }
+  function renderApp() {
+    if (vdom) {
+      destroyDOM(vdom);
+    }
+    vdom = view(state, emit);
+    mountDOM(vdom, parentEl);
+  }
+  return {
+    mount(_parentEl) {
+      parentEl = _parentEl;
+      renderApp();
+    },
+    unmount() {
+      destroyDOM(vdom);
+      vdom = null;
+      subscriptions.forEach((unsubscribe) => unsubscribe());
+    },
+  }
+}
+
+export { createApp, h, hFragment, hString };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "my-framework-almaz",
+  "version": "1.0.0",
+  "description": "A frontend framework to teach web developers how frontend frameworks work.",
+  "keywords": [
+    "frontend",
+    "framework",
+    "book",
+    "learning",
+    "web",
+    "development"
+  ],
+  "main": "dist/my-framework-almaz.js",
+  "files": [
+    "dist/my-framework-almaz.js"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "prepack": "npm run build"
+  },
+  "author": "Angel Sola Orbaiceta",
+  "license": "MIT",
+  "devDependencies": {
+    "@vitest/coverage-c8": "^0.28.5",
+    "eslint": "^8.35.0",
+    "rollup": "^3.18.0",
+    "rollup-plugin-cleanup": "^3.2.1",
+    "rollup-plugin-filesize": "^10.0.0",
+    "vitest": "^0.28.5"
+  }
+}