laghu 1.0.0 → 1.1.0

package/src/router.js

@@ -0,0 +1,123 @@
+// @ts-check
+/**
+ * laghu router plugin (opt-in, separate file, own 2.5kB gzip budget).
+ *
+ * Tiny hash router for pages with a handful of views. Explicitly NOT a
+ * full SPA router: no nested outlets, no code splitting, no async
+ * resolvers. Past about five guarded routes, use a real router.
+ *
+ * Routes match hash paths: "#/user/42" hits "/user/:id" with
+ * params { id: "42" }. Matched renders swap HTML into the target and
+ * hydrate against the given scope. beforeEach guards cancel by
+ * returning false. Links are plain anchors (href="#/user/42");
+ * no interception needed because hash changes fire hashchange.
+ *
+ * @example
+ * LaghuRouter.route({
+ *   target: '#view',
+ *   scope: state,
+ *   routes: [
+ *     { path: '/', render: function () { return '<h1>Home</h1>'; } },
+ *     { path: '/user/:id', render: function (p) { return '<h1>User ' + p.id + '</h1>'; } }
+ *   ],
+ *   notfound: function () { return '<h1>Missing</h1>'; },
+ *   beforeEach: function (to) { return true; }
+ * });
+ */
+(function () {
+  'use strict';
+  /** @type {any} */
+  var current = { path: '', params: {} };
+  /** @type {Array<Function>} */
+  var afterEachFns = [];
+
+  /**
+   * Compile "/user/:id" into a matcher. Static segments match
+   * literally, :name captures one segment, * captures the rest.
+   * @param {string} pattern
+   * @returns {(path: string) => Record<string, string>|null}
+   */
+  function compile(pattern) {
+    /** @type {Array<string>} */
+    var names = [];
+    var src = String(pattern).split('/').map(function (seg) {
+      if (seg.charAt(0) === ':') { names.push(seg.slice(1)); return '([^/]+)'; }
+      if (seg === '*') { names.push('wild'); return '(.*)'; }
+      return seg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }).join('/');
+    var re = new RegExp('^' + src + '$');
+    return function (path) {
+      var m = path.match(re);
+      if (!m) return null;
+      /** @type {Record<string, string>} */
+      var out = {};
+      for (var i = 0; i < names.length; i++) out[names[i]] = decodeURIComponent(m[i + 1] || '');
+      return out;
+    };
+  }
+
+  /**
+   * Start routing. Returns a stop function that detaches the listener.
+   * @param {{target?: string, scope?: any, actions?: Record<string, Function>, routes?: Array<{path: string, render: Function}>, notfound?: Function, beforeEach?: Function, afterEach?: Function}} opts
+   * @returns {Function} Call to stop listening.
+   */
+  function route(opts) {
+    opts = opts || {};
+    var targetSel = opts.target || '#view';
+    var scope = opts.scope || {};
+    var actions = opts.actions || {};
+    var compiled = (opts.routes || []).map(function (r) {
+      return { match: compile(r.path), render: r.render };
+    });
+    function render() {
+      var hash = (typeof location !== 'undefined' && location.hash) || '#/';
+      var pathOnly = hash.charAt(0) === '#' ? hash.slice(1) : hash;
+      if (!pathOnly) pathOnly = '/';
+      var from = current;
+      var i, params = null, hit = null;
+      for (i = 0; i < compiled.length; i++) {
+        params = compiled[i].match(pathOnly);
+        if (params) { hit = compiled[i]; break; }
+      }
+      var to = { path: pathOnly, params: params || {} };
+      if (typeof opts.beforeEach === 'function' && opts.beforeEach(to, from) === false) return;
+      current = to;
+      var html = '';
+      try {
+        if (hit) html = hit.render(params, to) || '';
+        else if (typeof opts.notfound === 'function') html = opts.notfound(to) || '';
+      } catch (e) {
+        if (typeof console !== 'undefined') console.error('[laghu-router]', e);
+        return;
+      }
+      var B = (typeof window !== 'undefined' && /** @type {any} */ (window).Laghu) || null;
+      var target = typeof document !== 'undefined' ? document.querySelector(targetSel) : null;
+      if (B && target) B.swap(target, String(html), 'inner', scope, actions);
+      if (typeof opts.afterEach === 'function') {
+        try { opts.afterEach(to, from); } catch (e) {}
+      }
+      for (var k = 0; k < afterEachFns.length; k++) {
+        try { afterEachFns[k](to, from); } catch (e) {}
+      }
+    }
+    function onHash() { render(); }
+    if (typeof window !== 'undefined') window.addEventListener('hashchange', onHash);
+    render();
+    return function () {
+      if (typeof window !== 'undefined') window.removeEventListener('hashchange', onHash);
+    };
+  }
+
+  var api = {
+    version: '1.1.0',
+    route: route,
+    compile: compile,
+    current: function () { return current; },
+    navigate: function (/** @type {string} */ path) {
+      if (typeof location !== 'undefined') location.hash = '#' + path;
+    },
+    afterEach: function (/** @type {Function} */ fn) { afterEachFns.push(fn); }
+  };
+  // @ts-ignore
+  window.LaghuRouter = api;
+})();