@luutanhung/rreact 1.0.0

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@luutanhung/rreact",
+  "version": "1.0.0",
+  "type": "module",
+  "author": "luuanhung",
+  "description": "Tiny React Framework",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^7.3.1"
+  }
+}

package/src/app.js

@@ -0,0 +1,45 @@
+import { destroyDOM } from "./destroy-dom";
+import { Dispatcher } from "./dispatcher";
+import { mountDOM } from "./mount-dom";
+
+export 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());
+    },
+  };
+}

package/src/attribute.js

@@ -0,0 +1,52 @@
+export 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);
+  }
+}
+
+export function setStyle(el, name, value) {
+  el.style[name] = value;
+}
+
+export function removeStyle(el, name, value) {
+  el.style[name] = value;
+}
+
+export function removeAttribute(el, name) {
+  el[name] = null;
+  el.removeAttribute(name);
+}
+
+export function setAttribute(el, name, value) {
+  if (value == null) {
+    removeAttribute(el, name);
+  } else if (name.startsWith("data-")) {
+    el.setAttribute(name, value);
+  } else {
+    el[name] = value;
+  }
+}

package/src/destroy-dom.js

@@ -0,0 +1,40 @@
+import { removeEventListeners } from "./event";
+import { DOM_TYPE } from "./h";
+
+export function destroyDOM(vdom) {
+  const { type } = vdom;
+
+  if (type === DOM_TYPE.TEXT) {
+    removeTextNode(vdom);
+  } else if (type === DOM_TYPE.ELEMENT) {
+    removeElementNode(vdom);
+  } else if (type === DOM_TYPE.FRAGMENT) {
+    removeFragmentNode(vdom);
+  } else {
+    throw new Error(`Can't destroy vdom 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((child) => destroyDOM(child));
+}

package/src/dispatcher.js

@@ -0,0 +1,40 @@
+export 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.include(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());
+  }
+}

package/src/event.js

@@ -0,0 +1,19 @@
+export function addEventListener(eventName, handler, el) {
+  el.addEventListener(eventName, handler);
+  return handler;
+}
+
+export function addEventListeners(listeners = {}, el) {
+  const addedListeners = {};
+  Object.entries(listeners).forEach(([eventName, handler]) => {
+    el.addEventListener(eventName, handler);
+    addedListeners[eventName] = handler;
+  });
+  return addedListeners;
+}
+
+export function removeEventListeners(listeners = {}, el) {
+  Object.entries(listeners).map(([eventName, handler]) => {
+    el.removeEventListener(eventName, handler);
+  });
+}

package/src/h.js

@@ -0,0 +1,44 @@
+import { filterNulls } from "./helpers/array";
+
+export const DOM_TYPE = Object.freeze({
+  ELEMENT: "element",
+  TEXT: "text",
+  FRAGMENT: "fragment",
+});
+
+export function h(tag, props = {}, children = []) {
+  const normalizedChildren = mapToVNodes(children);
+
+  return {
+    type: DOM_TYPE.ELEMENT,
+    tag,
+    props,
+    children: normalizedChildren,
+  };
+}
+
+export function normalizeVNode(child) {
+  const typeofChild = typeof child;
+  if (typeofChild === "string") {
+    return hString(child);
+  }
+  return child;
+}
+
+export function mapToVNodes(children = []) {
+  return children.map((child) => normalizeVNode(child));
+}
+
+export function hString(txt = "") {
+  return {
+    type: DOM_TYPE.TEXT,
+    value: txt,
+  };
+}
+
+export function hFragment(vNodes) {
+  return {
+    type: DOM_TYPE.FRAGMENT,
+    children: mapToVNodes(vNodes),
+  };
+}

package/src/helpers/array.js

@@ -0,0 +1,6 @@
+/**
+ * @param {Array} - arr: a collection of elements.
+ */
+export function filterNulls(arr) {
+  return arr.filter((item) => item !== null && item !== undefined);
+}

package/src/helpers/index.js

@@ -0,0 +1 @@
+export * from "./array";

package/src/index.js

@@ -0,0 +1,2 @@
+export { createApp } from "./app";
+export { h, hFragment, hString } from "./h";

package/src/mount-dom.js

@@ -0,0 +1,47 @@
+import { setAttributes } from "./attribute";
+import { addEventListeners } from "./event";
+import { DOM_TYPE } from "./h";
+
+export function mountDOM(vdom, parentEl) {
+  const vdomType = vdom.type;
+
+  if (vdomType === DOM_TYPE.TEXT) {
+    createTextNode(vdom, parentEl);
+  } else if (vdomType === DOM_TYPE.ELEMENT) {
+    createElementNode(vdom, parentEl);
+  } else if (vdomType === DOM_TYPE.FRAGMENT) {
+    createFragmentNodes(vdom, parentEl);
+  } else {
+    throw new Error(`Can't mount vdom of type: ${vdomType}`);
+  }
+}
+
+function createTextNode(vdom, parentEl) {
+  const { value } = vdom;
+  const textNode = document.createTextNode(value);
+  vdom.el = textNode;
+  parentEl.appendChild(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);
+}

package/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: "src/index.js",
+      name: "RReact",
+      fileName: "rreact",
+    },
+  },
+});