ks-fwork 1.0.0 → 1.0.2

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "ks-fwork",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Demo Frontend Framework",
   "license": "ISC",
   "author": "",
   "type": "module",
   "main": "src/index.js",
   "exports": "./src/index.js",
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "ks-fwork": "^1.0.1"
   }
 }

package/src/app.js

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

@@ -0,0 +1,54 @@
+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)) {
+        setAttributes(el, name, value);
+    }
+}
+
+function setClass(el, className) {
+    el.className = '';
+
+    // If classes are set as string
+    if (typeof className === 'string') {
+        el.className = className;
+    }
+
+    // If classes are set as an array
+    if (Array.isArray(className)) {
+        el.classList.add(className);
+    }
+}
+
+export function setStyle(el, name, value) {
+    el.style[name] = value;
+}
+
+export function removeStyle(el, name) {
+    el.style[name] = null;
+}
+
+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;
+    }
+}
+
+export function removeAttribute(el, name) {
+    el[name] = null;
+    el.removeAttribute(name);
+}

package/src/destroy-dom.js

@@ -0,0 +1,52 @@
+import { removeEventListeners } from './events.js'
+import { DOM_TYPES } from "./h.js";
+
+
+export 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: ${vdom.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() {
+    const { children } = vdom;
+    children.forEach(destroyDOM);
+}

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.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());
+    }
+}

package/src/events.js

@@ -0,0 +1,21 @@
+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]) => {
+        const listener = addEventListener(eventName, handler, el);
+        addedListeners[eventName] = listener;
+    });
+
+    return addedListeners;
+}
+
+export function removeEventListeners(listeners = {}, el) {
+    Object.entries(listeners).forEach(([eventName, handler]) => {
+        el.removeEventListener(eventName, handler);
+    })
+}

package/src/h.js

@@ -0,0 +1,49 @@
+import { withoutNulls } from './utils/arrays.js';
+
+export const DOM_TYPES = {
+    TEXT: 'text',
+    ELEMENT: 'element',
+    FRAGMENT: 'fragment'
+}
+
+// Create a virtual DOM element.
+export function h(tag, props = {}, children = []) {
+    return {
+        tag,
+        props,
+        children: mapTextNodes(withoutNulls(children)),
+        type: DOM_TYPES.ELEMENT,
+    }
+}
+
+// Transform strings into text virtual nodes.
+function mapTextNodes(children) {
+    return children.map((child) =>
+        typeof child === 'string' ? hString(child) : child
+    )
+}
+
+export function hString(str) {
+    return { type: DOM_TYPES.TEXT, value: str };
+}
+
+export function hFragment(vNodes) {
+    return {
+        children: mapTextNodes(withoutNulls(vNodes)),
+        type: DOM_TYPES.FRAGMENT,
+    }
+}
+
+// Create an array with specified amount of empty elements and fill them with 'p' virtual node that has text as children.
+export function lipsum(numberOfParagraphs) {
+    const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+     enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+     ut aliquip ex ea commodo consequat.`;
+
+    return hFragment(
+        Array(numberOfParagraphs).fill(
+            h('p', {}, [text])
+        )
+    );
+}

package/src/index.js

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

package/src/mount-dom.js

@@ -0,0 +1,60 @@
+import { DOM_TYPES } from "./h.js";
+import { setAttributes } from './attributes.js'
+import { addEventListeners } from "./events.js";
+
+export 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: {
+            createFragmentNode(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 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 createFragmentNode(vdom, parentEl) {
+        const { children } = vdom;
+        vdom.el = parentEl;
+
+        children.forEach((child) => mountDOM(child, parentEl));
+    }
+}

package/src/utils/arrays.js

@@ -0,0 +1,4 @@
+// Filter out null values from the array.
+export function withoutNulls(arr) {
+    return arr.filter((item) => item != null);
+}