lahama 5.0.0 → 6.0.0

package/dist/lahama.js

@@ -384,6 +384,7 @@ function createComponentNode(vdom, parentEl, index, hostComponent) {
     const { props, events } = extractPropsAndEvents(vdom);
     const component = new Component(props, events, hostComponent);
     component.setExternalContent(children);
+    component.setAppContext(hostComponent?.appContext ?? {});
     component.mount(parentEl, index);
     vdom.component = component;
     vdom.el = component.firstElement;
@@ -433,10 +434,253 @@ function removeFragmentNode(vdom) {
     children.forEach(destroyDom);
 }
 
-function createApp(RootComponent, props = {}) {
+function makeRouteMatcher(route) {
+    return routeHasParams(route)
+    ? makeMatcherWithParams(route)
+        : makeMatcherWithoutParams(route)
+}
+function routeHasParams({ path }) {
+    return path.includes(':')
+}
+const CATCH_ALL_ROUTE = '*';
+function makeRouteWithoutParamsRegex( { path }) {
+    if (path === CATCH_ALL_ROUTE) {
+        return new RegExp('^.*$')
+    }
+    return new RegExp(`^${path}`)
+}
+function makeMatcherWithoutParams(route) {
+    const regex = makeRouteWithoutParamsRegex(route);
+    const isRedirect = typeof route.redirect === 'string';
+    return {
+        route,
+        isRedirect,
+        checkMatch(path) {
+            return regex.test(path)
+        },
+        extractParams() {
+            return {}
+        },
+        extractQuery,
+    }
+}
+function extractQuery(path) {
+    const queryIndex = path.indexOf('?');
+    if (queryIndex === -1) {
+        return {}
+    }
+    const search = new URLSearchParams(path.slice(queryIndex + 1));
+    return Object.fromEntries(search.entries())
+}
+function makeRouteWithParamsRegex({ path }) {
+    const regex = path.replace(
+        /:([^/]+)/g,
+        (_, paramName) => `(?<${paramName}>[^/]+)`
+  );
+  return new RegExp(`^${regex}$`)
+}
+function makeMatcherWithParams(route) {
+    const regex = makeRouteWithParamsRegex(route);
+    const isRedirect = typeof route.redirect === 'string';
+    return {
+        route,
+        isRedirect,
+        checkMatch(path) {
+            return regex.test(path)
+        },
+        extractParams(path) {
+            const { groups } = regex.exec(path);
+            return groups
+        },
+        extractQuery,
+    }
+}
+
+class Dispatcher {
+    #subs = new Map()
+    #afterHandlers = []
+    subscribe(commandName, handler) {
+        if (!this.#subs.has(commandName)) {
+            this.#subs.set(commandName, []);
+        }
+        const handlersArray = this.#subs.get(commandName);
+        if (handlersArray.includes(handler)) {
+            return () => {
+            }
+        }
+        handlersArray.push(handler);
+        return () => {
+            const idx = handlersArray.indexOf(handler);
+            handlersArray.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());
+    }
+}
+
+const ROUTER_EVENT = 'router-event';
+class HashRouter {
+    #matchers = []
+    #isInitialized = false
+    #onPopState = () => this.#matchCurrentRoute()
+    #params = {}
+    #query = {}
+    #matchedRoute = null
+    #dispatcher = new Dispatcher()
+    #subscriptions = new WeakMap()
+    #subscriberFns = new Set()
+    get params() {
+        return this.#params
+    }
+    get query() {
+        return this.#query
+    }
+    get matchedRoute() {
+        return this.#matchedRoute
+    }
+    constructor(routes = []) {
+        this.#matchers = routes.map(makeRouteMatcher);
+    }
+    get #currentRouteHash() {
+        const hash = document.location.hash;
+        if (hash === '') {
+            return '/'
+        }
+        return hash.slice(1)
+    }
+    async init() {
+        if (this.#isInitialized) {
+            return
+        }
+        this.#isInitialized = true;
+        if (document.location.hash === '') {
+            window.history.replaceState({}, '', '#/');
+        }
+        window.addEventListener('popstate', this.#onPopState);
+    }
+    destroy() {
+        if (!this.#isInitialized) {
+            return
+        }
+        window.removeEventListener('popstate', this.#onPopState);
+        Array.from(this.#subscriberFns).forEach(this.unsubscribe, this);
+        this.#isInitialized = false;
+    }
+    #matchCurrentRoute() {
+        return this.navigateTo(this.#currentRouteHash)
+    }
+    async navigateTo(path) {
+        const matcher = this.#matchers.find((matcher) =>
+            matcher.checkMatch(path)
+        );
+        if (matcher == null) {
+            console.warn(`[Router] No route matches path "${path}"`);
+            this.#matchedRoute = null;
+            this.#params = {};
+            this.#query = {};
+            return
+        }
+        if (matcher.isRedirect) {
+            return this.navigateTo(matcher.route.redirect)
+        }
+        const from = this.#matchedRoute;
+        const to = matcher.route;
+        const { shouldNavigate, shouldRedirect, redirectPath } =
+            await this.#canChangeRoute(from, to);
+        if (shouldRedirect) {
+            return this.navigateTo(redirectPath)
+        }
+        if (shouldNavigate) {
+            this.#matchedRoute = matcher.route;
+            this.#params = matcher.extractParams(path);
+            this.#query = matcher.extractQuery(path);
+            this.#pushState(path);
+            this.#dispatcher.dispatch(ROUTER_EVENT, {from, to, router: this});
+        }
+    }
+    #pushState(path) {
+        window.history.pushState({}, '', `#${path}`);
+    }
+    back() {
+        window.history.back();
+    }
+    forward() {
+        window.history.forward();
+    }
+    subscribe(handler) {
+        const unsubscribe = this.#dispatcher.subscribe(ROUTER_EVENT, handler);
+        this.#subscriptions.set(handler, unsubscribe);
+        this.#subscriberFns.add(handler);
+    }
+    unsubscribe(handler) {
+        const unsubscribe = this.#subscriptions.get(handler);
+        if (unsubscribe) {
+            unsubscribe();
+            this.#subscriptions.delete(handler);
+            this.#subscriberFns.delete(handler);
+        }
+    }
+    async #canChangeRoute(from, to) {
+        const guard = to.beforeEnter;
+        if (typeof guard !== 'function') {
+            return {
+                shouldRedirect : false,
+                shouldNavigate : true,
+                redirectPath : null,
+            }
+        }
+        const result = await guard(from?.path, to?.path);
+        if (result === false) {
+            return {
+                shouldRedirect : false,
+                shouldNavigate : false,
+                redirectPath: null,
+            }
+        }
+        if (typeof result === 'string') {
+            return {
+                shouldRedirect : true,
+                shouldNavigate : true,
+                redirectPath: result,
+            }
+        }
+        return {
+            shouldRedirect : false,
+            shouldNavigate : true,
+            redirectPath : null,
+        }
+    }
+}
+class NoopRouter {
+    init() {}
+    destroy() {}
+    navigateTo() {}
+    back() {}
+    forward() {}
+    subscribe() {}
+    unsubscribe() {}
+}
+
+function createApp(RootComponent, props = {}, options = {}) {
     let parentEl = null;
     let isMounted = false;
     let vdom = null;
+    const context = {
+        router : options.router || new NoopRouter(),
+    };
     function reset() {
         parentEl = null;
         isMounted = false;
@@ -449,7 +693,8 @@ function createApp(RootComponent, props = {}) {
             }
             parentEl = _parentEl;
             vdom = h(RootComponent, props);
-            mountDom(vdom, parentEl);
+            mountDom(vdom, parentEl, null, { appContext : context});
+            context.router.init();
             isMounted = true;
         },
         unmount() {
@@ -457,6 +702,7 @@ function createApp(RootComponent, props = {}) {
                 throw new Error(`The application is not mounted`)
             }
             destroyDom(vdom);
+            context.router.destroy();
             reset();
         }
     }
@@ -739,41 +985,6 @@ function requireFastDeepEqual () {
 var fastDeepEqualExports = requireFastDeepEqual();
 var equal = /*@__PURE__*/getDefaultExportFromCjs(fastDeepEqualExports);
 
-class Dispatcher {
-    #subs = new Map()
-    #afterHandlers = []
-    subscribe(commandName, handler) {
-        if (!this.#subs.has(commandName)) {
-            this.#subs.set(commandName, []);
-        }
-        const handlersArray = this.#subs.get(commandName);
-        if (handlersArray.includes(handler)) {
-            return () => {
-            }
-        }
-        handlersArray.push(handler);
-        return () => {
-            const idx = handlersArray.indexOf(handler);
-            handlersArray.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 traverseDFS(
     vdom,
     processNode,
@@ -827,6 +1038,7 @@ function defineComponent({
         #parentComponent = null
         #dispatcher = new Dispatcher()
         #subscriptions = []
+        #appContext = null
         #children = []
         setExternalContent(children) {
             this.#children = children;
@@ -847,6 +1059,12 @@ function defineComponent({
         onUnMounted() {
             return Promise.resolve(onUnmounted.call(this))
         }
+        setAppContext(appContext) {
+            this.#appContext = appContext;
+        }
+        get appContext() {
+            return this.#appContext
+        }
         get elements() {
             if (this.#vdom == null) {
                 return []
@@ -948,4 +1166,50 @@ function defineComponent({
     return Component;
 }
 
-export { DOM_TYPES, createApp, defineComponent, h, hFragment, hSlot, hString, nextTick };
+const RouterLink = defineComponent({
+    render() {
+        const { to } = this.props;
+        return h(
+            'a',
+            {
+                href : to,
+                on : {
+                    click : (e) => {
+                        e.preventDefault();
+                        this.appContext.router.navigateTo(to);
+                    },
+                },
+            },
+            [hSlot()]
+        )
+    },
+});
+const RouterOutlet = defineComponent({
+    state() {
+        return {
+            matchedRoute: null,
+            subscription : null,
+        }
+    },
+    onMounted() {
+        const subscription = this.appContext.router.subscribe(({ to }) => {
+            this.handleRouteChange(to);
+        });
+        this.updateState({ subscription });
+    },
+    onUnmounted() {
+        const { subscription } = this.state();
+        this.appContext.router.unsubscribe(subscription);
+    },
+    handleRouteChange(matchedRoute) {
+        this.updateState({ matchedRoute});
+    },
+    render() {
+        const { matchedRoute } = this.state;
+        return h('div', {id : 'router-outlet'}, [
+                matchedRoute ? h(matchedRoute.component) : null,
+            ])
+    }
+});
+
+export { DOM_TYPES, HashRouter, RouterLink, RouterOutlet, createApp, defineComponent, h, hFragment, hSlot, hString, nextTick };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lahama",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "",
   "main": "dist/lahama.js",
   "files": [