Initial commit, get started with router

.gitignore

@@ -0,0 +1,3 @@
+lib/
+node_modules/
+test/

.npmignore

@@ -0,0 +1,2 @@
+src/
+test/

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "porpoise-router",
+  "version": "1.0.0",
+  "description": "An powerful framework-agnostic routing solution.",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsc && webpack"
+  },
+  "author": "raghav-misra",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^3.9.7",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12"
+  },
+  "dependencies": {
+    "path-to-regexp": "^6.1.0"
+  }
+}

readme.md

@@ -0,0 +1,24 @@
+# `porpoise-router`
+
+A simple client-side routing solution for custom elements.
+
+```js
+/* Initialize the router */
+import { createRouter } from "porpoise-router";
+
+const router = createRouter({
+    // path "/" renders 
+    // <index-view></index-view>
+    "/": "index-view", 
+
+    // path "/about" renders 
+    // <about-view></about-view>
+    "/about": "about-view", 
+
+    // path "/profile/:userId" renders 
+    // <profile-view></profile-view>
+    // "userId" access via (router.current.params.userId)
+    "/profile/:userId": "profile-view",
+});
+```
+

src/es5-adapter.ts

@@ -0,0 +1,2 @@
+//@ts-ignore
+!function () { "use strict"; !function () { if (void 0 === window.Reflect || void 0 === window.customElements || window.customElements.polyfillWrapFlushCallback) return; const t = HTMLElement; window.HTMLElement = { HTMLElement: function () { return Reflect.construct(t, [], this.constructor) } }.HTMLElement, HTMLElement.prototype = t.prototype, HTMLElement.prototype.constructor = HTMLElement, Object.setPrototypeOf(HTMLElement, t) }() }();

src/index.ts

@@ -0,0 +1,13 @@
+// ES5 interop with custom elements:
+import "./es5-adapter.js";
+import { PorpoiseRouter, IRouteDescriptor } from "./porpoise-router.js";
+import { pathToRegexp } from "path-to-regexp";
+
+export default function createRouter(target: string, routes: Record<string, string | IRouteDescriptor>) {
+    const routerNode = document.querySelector(`porpoise-router[name="${target}"]`) as PorpoiseRouter;
+
+    if (routerNode) {
+        routerNode.configure(routes);
+    }
+    else console.error(`Could not find <porpoise-router name="${target}"></porpoise-router> in the DOM.`);
+}

src/porpoise-router.ts

@@ -0,0 +1,17 @@
+export interface IRouteDescriptor {
+    element: string,
+    props?: Record<string, string>
+}
+
+export class PorpoiseRouter extends HTMLElement {
+    routes: Record<string, string | IRouteDescriptor> = Object.create(null);
+
+    configure(routes: Record<string, string | IRouteDescriptor>) {
+        this.routes = routes;
+        window.addEventListener("popstate", this.changeView.bind(this));
+    }
+
+    changeView() {
+
+    }
+}

tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "es2020",
+        "lib": [
+            "es2015",
+            "dom"
+        ],
+        "declaration": true,
+        "outDir": "./lib/esm",
+        "strict": true,
+        "moduleResolution": "node",
+        "baseUrl": "./",
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "include": [
+        "src"
+    ]
+}

webpack.config.js

@@ -0,0 +1,18 @@
+const path = require("path");
+
+module.exports = {
+    entry: {
+        "index": "./lib/esm/index.js",
+    },
+    output: {
+        path: path.resolve(__dirname, "lib"),
+        filename: "[name].js",
+        libraryTarget: "global",
+        library: "PorpoiseRouter",
+        umdNamedDefine: true,
+    },
+    resolve: {
+        extensions: [".js"],
+    },
+    devtool: "source-map"
+};