Organize src/ file structure

readme.md

@@ -1,12 +1,13 @@
 # `porpoise-router`
 
-A simple client-side routing solution for custom elements.
+A framework-agnostic, standalone router, designed for use with Web Components
 
+## Initialize JS:
 ```js
 /* Initialize the router */
 import { createRouter } from "porpoise-router";
 
-const router = createRouter({
+const router = createRouter("root", {
     // path "/" renders 
     // <index-view></index-view>
     "/": "index-view", 
@@ -22,3 +23,24 @@ const router = createRouter({
 });
 ```
 
+## Initialize HTML:
+```html
+<p-router name="root"></p-router>
+```
+
+## Porpoise Integration (Optional): 
+```js
+import * as Porpoise from "porpoise";
+
+// Allow access to the router:
+Porpoise.globalize("router", () => router);
+
+// Access the router in porpoise elements via this.$globals.router:
+Porpoise.construct({
+    /* your component... */
+    events: {
+        click() {
+            this.$globals.router.push("/about");
+        }
+    }
+})

src/porpoise-router.ts → src/components/p-router.ts

@@ -1,7 +1,4 @@
-export interface IRouteDescriptor {
-    element: string,
-    props?: Record<string, string>
-}
+import { IRouteDescriptor } from "../internals/api.js";
 
 export class PorpoiseRouter extends HTMLElement {
     routes: Record<string, string | IRouteDescriptor> = Object.create(null);

src/functions/create-router.ts

@@ -0,0 +1,11 @@
+import { PorpoiseRouter } from "../components/p-router.js";
+import { IRouteDescriptor } from "../internals/api.js";
+
+export function createRouter(target: string, routes: Record<string, string | IRouteDescriptor>) {
+    const routerNode = document.querySelector(`p-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/index.ts

@@ -1,13 +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.`);
-}
+import "./internals/es5-adapter.js";
+
+// Register components:
+import "./components/p-link.js";
+import "./components/p-router.js";
+
+// Setup function:
+export { createRouter } from "./functions/create-router.js";
+
+// Export typings:
+export * from "./internals/api.js";
+

src/internals/api.ts

@@ -0,0 +1,4 @@
+export interface IRouteDescriptor {
+    element: string,
+    props?: Record<string, string>
+}