wallace 0.6.0 → 0.7.0

package/lib/component.js

@@ -151,7 +151,11 @@ export function createConstructor(baseComponent) {
       return proto;
     }
   });
-
+  Component.create = function (props, ctrl) {
+    const component = new Component();
+    component.render(props, ctrl);
+    return component;
+  };
   Component.stubs = {} && baseComponent.stubs;
   return Component;
 }

package/lib/index.js

@@ -5,6 +5,7 @@ export { nestComponent } from "./nest";
 export { saveRef } from "./refs";
 export { KeyedRepeater } from "./repeaters/keyed";
 export { SequentialRepeater } from "./repeaters/sequential";
+export { Router, route } from "./router";
 export { getStub } from "./stubs";
 export { findElement, onEvent, stashMisc } from "./utils";
 export { watch, protect } from "./watch";

package/lib/router.jsx

@@ -0,0 +1,120 @@
+/*
+The Router is a component which mounts other components based on hash (URL bit after #).
+
+It currently expects the route to be made of chunks separated by / which are either
+text or placeholders:
+
+  /todos/detail/{id:int}/notes
+
+It performs no validation yet, and may change to use regex in future.
+*/
+
+const events = ["load", "hashchange"];
+const noMod = x => x;
+const converters = {
+  int: v => parseInt(v),
+  float: v => parseFloat(v),
+  date: v => new Date(v)
+};
+
+export function route(path, componentDef, converter, cleanup) {
+  return new Route(path, componentDef, converter, cleanup);
+}
+
+export const Router = () => <div></div>;
+
+Router.methods = {
+  render(props, ctrl) {
+    const defaultError = (error, router) => (router.el.innerHTML = error.message);
+    this.error = props.error || defaultError;
+    this.current = null;
+    events.forEach(e => window.addEventListener(e, () => this.onHashChange()));
+    if (props.atts) {
+      Object.keys(props.atts).forEach(k => {
+        this.el.setAttribute(k, props.atts[k]);
+      });
+    }
+    this.base.render.call(this, props, ctrl);
+  },
+  async onHashChange() {
+    const path = location.hash.slice(1) || "",
+      routes = this.props.routes,
+      len = routes.length;
+    let i = 0,
+      routeData;
+    try {
+      while (i < len) {
+        let route = routes[i];
+        if ((routeData = route.match(path))) {
+          const component = await route.getComponent(routeData, this.ctrl);
+          this.current && this.current.cleanup();
+          this.mount(component);
+          this.current = route;
+          return;
+        }
+        i++;
+      }
+      throw new Error(`Router unable to match path "${path}"`);
+    } catch (error) {
+      this.error(error, this);
+    }
+  },
+  mount(component) {
+    this.el.innerHTML = "";
+    this.el.appendChild(component.el);
+  }
+};
+
+export function Route(path, def, convert, cleanup) {
+  this.chunks = path
+    .split("/")
+    .map(s => (s.startsWith("{") ? new RouteArg(s.slice(1, -1)) : s));
+  this.def = def;
+  this._convert = convert || noMod;
+  this._cleanup = cleanup || noMod;
+  this.component = null;
+}
+
+Route.prototype = {
+  match(url) {
+    const parts = url.split("?", 2),
+      hash = parts[0],
+      query = parts[1],
+      args = {},
+      definedChunksCount = this.chunks.length,
+      foundChunks = hash.split("/");
+    if (definedChunksCount !== foundChunks.length) return;
+    let i = 0;
+    while (i < definedChunksCount) {
+      let definedChunk = this.chunks[i];
+      let foundChunk = foundChunks[i];
+      if (definedChunk instanceof RouteArg) {
+        args[definedChunk.name] = definedChunk.convert(foundChunk);
+      } else if (definedChunk != foundChunk) {
+        return;
+      }
+      i++;
+    }
+    return { args, params: new URLSearchParams(query), url };
+  },
+  async getComponent(routeData, ctrl) {
+    if (!this.component) {
+      this.component = new this.def();
+    }
+    const props = await this._convert(routeData);
+    this.component.render(props, ctrl);
+    return this.component;
+  },
+  /**
+   * Allows user to delete component or perform other cleanup.
+   */
+  cleanup() {
+    this._cleanup(this);
+  }
+};
+
+function RouteArg(str) {
+  let chunks = str.split(":");
+  this.name = chunks[0];
+  this.convert = converters[chunks[1]] || noMod;
+}

package/lib/types.d.ts

@@ -526,6 +526,7 @@ declare module "wallace" {
       ThisType<ComponentInstance<Props, Controller, Methods>>;
     // Methods will not be available on nested component, so omit.
     readonly stubs?: Record<string, ComponentFunction<Props, Controller>>;
+    create?(props: Props): ComponentInstance<Props, Controller, Methods>;
   }
 
   type ComponenMethods<Props, Controller> = {
@@ -580,7 +581,6 @@ declare module "wallace" {
    * The component constructor function (typed as a class, but isn't).
    */
   export class Component<Props = any, Controller = any> {
-    render(props: Props, ctrl?: Controller): void;
     /**
      * The base render method looks like this:
      *
@@ -691,6 +691,32 @@ declare module "wallace" {
    * @returns a Proxy of the object.
    */
   export function watch<T>(target: T, callback: WatchCallback): T;
+
+  export type RouteData = {
+    args: { [key: string]: any };
+    params: URLSearchParams;
+    url: string;
+  };
+
+  export function route<Props>(
+    path: string,
+    componentDef: ComponentFunction<Props>,
+    converter: RouteConverter<Props>
+  ): Route<Props>;
+
+  type RouteConverter<Props> = (routedata: RouteData) => Props;
+
+  export type Route<Props> = [string, ComponentFunction<Props>, RouteConverter<Props>?];
+  export type RouterProps = {
+    routes: readonly Route<unknown>[];
+    atts?: Record<string, unknown>;
+    error?: (error: Error, router: Router) => void;
+  };
+
+  export class Router extends Component {
+    static nest?({ props }: { props?: RouterProps }): JSX.Element;
+    mount(component: Component<any>): void;
+  }
 }
 
 type MustBeExpression = Exclude<any, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "author": "Andrew Buchan",
   "description": "The framework that brings you FREEDOM!!",
   "license": "ISC",
@@ -14,8 +14,8 @@
     "test": "jest --clearCache && jest"
   },
   "dependencies": {
-    "babel-plugin-wallace": "^0.6.0",
+    "babel-plugin-wallace": "^0.7.0",
     "browserify": "^17.0.1"
   },
-  "gitHead": "451efab81055751fbda64eb80252ec150460e375"
+  "gitHead": "6cd84a9e6135e31d01880a82e6294ae0034bca59"
 }