primate 0.2.0 → 0.5.0

package/README.md

@@ -18,8 +18,8 @@ yarn add primate
 * **Minimal** just one dependency ([ws][])
 * **Simple** only native web technologies (JavaScript, HTML)
 * **Full-stack** server and client, both in JavaScript
-* **Layered** separation of data (domains), logic (actions) and
-presentation (views)
+* **Layered** separation of data (domains), logic (actions) and presentation
+(views)
 * **Correct** data verification using field definitions in domains
 * **Secure** serving hash-verified scripts on secure HTTP with a strong CSP
 * **Roles** access control with contexts
@@ -27,15 +27,18 @@ presentation (views)
 * **Sane defaults** minimally opinionated with good, overrideable defaults
 for most features
 * **Data linking** modeling `1:1`, `1:n` and `n:m` relationships on domains via
-ad-hoc getters
+cacheable ad-hoc getters
 
 ## Getting started
 
-Coming soon.
+See the [getting started][getting-started] guide.
 
 ## Resources
 
-Coming soon.
+* [Source code][source-code]
+* [Issues][issues]
+
+A full guide is coming soon.
 
 ## Versioning
 
@@ -48,3 +51,6 @@ will move over to semantic versioning.
 BSD-3-Clause
 
 [ws]: https://github.com/websockets/ws
+[getting-started]: https://primatejs.com/getting-started
+[source-code]: https://adaptivecloud.dev/primate/primate
+[issues]: https://adaptivecloud.dev/primate/primate/issues

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "primate",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "author": "Primate core team <core@primatejs.com>",
   "homepage": "https://primatejs.com",
+  "bugs": "https://adaptivecloud.dev/primate/primate/issues",
+  "repository": "https://adaptivecloud.dev/primate/primate",
   "description": "Server-client framework",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "ws": "^8.4.0"
+    "ws": "^8.5.0"
   },
   "scripts": {
-    "test": "node --experimental-json-modules node_modules/stick stick.json"
+    "copy": "rm -rf output && mkdir output && cp source/* output -a",
+    "instrument": "nyc instrument source ./output",
+    "stick": "node --experimental-json-modules node_modules/stick stick.json",
+    "coverage": "yarn instrument && nyc yarn run stick",
+    "test": "yarn copy && yarn run stick"
   },
   "type": "module",
   "exports": "./source/server/exports.js",

package/source/client/Action.js

@@ -1,19 +1,17 @@
 import Element from "../Element.js";
 import View from "./View.js";
-import Base from "./Base.js";
-import {origin_base} from "./document.js";
+import {origin_base, origin} from "./document.js";
 
-export default class Action extends Base {
-  constructor(name, context) {
-    super();
+export default class Action {
+  constructor(name, session) {
     this.name = name;
-    this.context = context;
+    this.session = session;
     this.listeners = [];
   }
 
   before() {}
 
-  async enter(data) {
+  enter(data) {
     if (data.location) {
       location.href = data.location;
     } else {
@@ -23,20 +21,20 @@ export default class Action extends Base {
 
   create_view(data, root, save_history = true) {
     if (save_history) {
-      const pathname = data.pathname === "" ? "/" : data.pathname;
-      window.location.pathname !== pathname
-          && history.pushState({}, "", pathname);
+      if (data.url !== document.location.href.replace(origin, "")) {
+        history.pushState({}, "", data.url);
+      }
     }
     this.view = new View(data, this, root);
   }
 
-  create_and_return_view(data, root, save_history) {
+  create_and_return_view(data, root) {
     return new View(data, this, root);
   }
 
   get_form_data(target) {
     const payload = {};
-    const elements = target.elements;
+    const {elements} = target;
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
       const type = Element.value(element, "type");
@@ -66,16 +64,16 @@ export default class Action extends Base {
   }
 
   async onsubmit(event) {
-    const target = event.target;
+    const {target} = event;
     const stop = this.fire("submit", event);
     if (stop) {
       return event.preventDefault();
     }
     event.preventDefault();
     const data = await this.write(target.action, this.get_form_data(target));
-    return data.pathname === document.location.href.replace(origin_base, "")
+    return data.type === "update"
       ? this.view.update(data.payload)
-      : this.context.run(data);
+      : this.session.run(data);
   }
 
   async onclick(event) {
@@ -96,8 +94,7 @@ export default class Action extends Base {
       if (event.button === 0 && url.href.startsWith(origin_base)) {
         event.preventDefault();
         if (href !== "") {
-          const data = await this.read(href);
-          await this.context.run(data);
+          await this.session.run(await this.read(href));
         }
       }
     }
@@ -111,13 +108,13 @@ export default class Action extends Base {
   }
 
   oninput() {
-    const stop = this.fire("input", event);
+    this.fire("input", event);
   }
 
   fire(type, event) {
     const listeners = this.listeners[type];
     if (listeners !== undefined) {
-      const target = event.target;
+      const {target} = event;
       for (const listener of listeners) {
         if (event.target.closest(listener.selector)) {
           listener.listener(event, target);
@@ -134,7 +131,8 @@ export default class Action extends Base {
     const index = this.listeners[event]
       .findIndex(listener => listener.selector === selector);
     const object = {selector, listener};
-    if (index === -1) {
+    const not_found = -1;
+    if (index === not_found) {
       this.listeners[event].push(object);
     } else {
       this.listeners[event].splice(index, 1, object);
@@ -150,10 +148,10 @@ export default class Action extends Base {
   }
 
   read(pathname) {
-    return this.context.read(pathname);
+    return this.session.read(pathname);
   }
 
   write(pathname, payload) {
-    return this.context.write(pathname, payload);
+    return this.session.write(pathname, payload);
   }
 }

package/source/client/Client.js

@@ -1,5 +1,4 @@
-import Context from "./Context.js";
-import {contexts} from "./exports.js";
+import Session from "./Session.js";
 import {base, host, origin_base} from "./document.js";
 
 const events = ["submit", "click", "change", "input"];
@@ -9,43 +8,37 @@ const location = `wss://${host}${base}`;
 export default class Client {
   constructor(conf) {
     this.conf = conf;
+    this.session = new Session(this);
 
     window.onpopstate = async event => {
       const {pathname, search} = event.target.location;
-      return this.execute(await this.read(pathname + search));
+      return this.session.run(await this.read(pathname + search));
     };
 
     for (const key of events) {
-      window.addEventListener(key, event => this.context.on(key, event));
+      window.addEventListener(key, event => this.session.on(key, event));
     }
   }
 
   open() {
     return this.connection?.readyState === 1 ? this
       : new Promise(resolve => {
-        const connection = new WebSocket(location);
-        connection.addEventListener("message", ({data}) => data === "open"
+        this.connection = new WebSocket(location);
+        this.connection.addEventListener("message", ({data}) => data === "open"
           ? resolve(this)
           : this.receive(JSON.parse(data)));
-        this.connection = connection;
       });
   }
 
   async receive(data) {
-    if (back !== undefined) {
+    if (back === undefined) {
+      await this.session.execute(data);
+    } else {
       back(data);
       back = undefined;
-    } else {
-      await this.execute(data);
     }
   }
 
-  async execute(data) {
-    const {context} = data;
-    this.context = new (contexts[context] ?? Context)(context, this);
-    await this.context.run(data);
-  }
-
   read(url) {
     return this.send("read", url);
   }
@@ -57,9 +50,12 @@ export default class Client {
   async send(type, url, payload = {}) {
     await this.open();
     const {pathname, search} = new URL(url, origin_base);
+    const _url = pathname + search;
     return new Promise(resolve => {
       back = data => resolve(data);
-      this.connection.send(JSON.stringify({type, pathname, search, payload}));
+      this.connection.send(JSON.stringify({
+        type, pathname, search, payload, "url": _url,
+      }));
     });
   }
 }

package/source/client/Context.js

@@ -1,24 +1,26 @@
-import Base from "./Base.js";
 import Action from "./Action.js";
 import {routes} from "./exports.js";
 
-export default class Context extends Base {
-  constructor(name, client) {
-    super();
+export default class Context {
+  constructor(name, session) {
     this.name = name;
     this.actions = {};
     this.used_actions = [];
-    this.client = client;
+    this.session = session;
+  }
+
+  get Class() {
+    return this.constructor;
   }
 
   async run(data) {
     const {namespace, action} = data;
     const route = `${namespace}/${action}`;
-    const module = routes?.[namespace]?.[action] ?? Action;
-    this.actions[route] = new module(action, this);
+    const Module = routes?.[namespace]?.[action] ?? Action;
+    this.actions[route] = new Module(action, this.session);
     const nextaction = this.actions[route];
     nextaction.enter(data);
-    await this.Class().before(nextaction);
+    await this.Class.before(nextaction);
     nextaction.before();
     this.action = nextaction;
   }
@@ -31,14 +33,6 @@ export default class Context extends Base {
     return data;
   }
 
-  read(pathname) {
-    return this.client.read(pathname);
-  }
-
-  write(pathname, payload) {
-    return this.client.write(pathname, payload);
-  }
-
   on(key, event) {
     this.action[`on${key}`](event);
   }

package/source/client/Element.js

@@ -1,5 +1,5 @@
-const file_listener = event => reader.readAsDataURL(event.target.files[0]);
 const reader = new FileReader();
+const file_listener = event => reader.readAsDataURL(event.target.files[0]);
 
 const replace = (attribute, source) => {
   if (attribute.includes(".")) {
@@ -20,11 +20,11 @@ const fulfill = (attribute, source) => {
   if (source === undefined) {
     return undefined;
   }
-  let value = attribute.value;
+  let {value} = attribute;
   const matches = [...value.matchAll(data_regex)];
   if (matches.length > 0) {
     for (const match of matches) {
-      const key = match[0];
+      const [key] = match;
       const new_value = replace(match[1], source);
       value = value.replace(key, new_value);
     }
@@ -34,7 +34,6 @@ const fulfill = (attribute, source) => {
   return value;
 };
 
-
 const $selector = Symbol("$selector");
 const $element = Symbol("$element");
 const $action = Symbol("$action");
@@ -47,13 +46,13 @@ const proxy_handler = {
     if (property === "on" || property === "insert") {
       return target[property].bind(target);
     }
-    if (target.element !== null) {
-      return (...args) => target[property] !== undefined
-        ? target[property](...args)
-        : receiver;
-    } else {
+    if (target.element === null) {
       return () => receiver;
     }
+
+    return (...args) => target[property] === undefined
+      ? receiver
+      : target[property](...args);
   },
 };
 
@@ -77,8 +76,7 @@ export default class Element {
   }
 
   static value(element, name) {
-    const attribute = element.attributes.getNamedItem(name);
-    return attribute === null ? null : attribute.value;
+    return element?.attributes.getNamedItem(name)?.value;
   }
 
   static evaluate(attribute, source, data) {
@@ -143,8 +141,10 @@ export default class Element {
     return this;
   }
 
-  class(name, set) {
-    this.element.classList.toggle(name, set !== false);
+  class(classes, set) {
+    classes.split(" ").forEach(name => {
+      this.element.classList.toggle(name, set !== false);
+    });
     return this;
   }
 
@@ -181,7 +181,8 @@ export default class Element {
 
   options(value) {
     value instanceof Array && value.forEach(option => {
-      if (this.element.children[option._id] === undefined) {
+      const children = [...this.element.children];
+      if (!children.find(child => child.value === option._id)) {
         const newElement = document.createElement("option");
         newElement.setAttribute("value", option._id);
         newElement.innerHTML = option.name;
@@ -201,11 +202,13 @@ export default class Element {
 
   select_value(value) {
     this.element.value = value === undefined ? "" : value;
+    return this;
   }
 
   input_value(value) {
     const type = Element.value(this.element, "type");
     this[`input_${type}_value`]?.(value) ?? this.input_input_value(value);
+    return this;
   }
 
   textarea_value(value) {
@@ -216,21 +219,24 @@ export default class Element {
     if (value === true) {
       this.element.checked = true;
     }
+    return this;
   }
 
   input_file_value(value) {
-    const element = this.element;
+    const {element} = this;
     if (value !== undefined) {
       element.setAttribute("base64", value);
     }
     reader.onload = ({target}) => element.setAttribute("base64", target.result);
     element.addEventListener("change", file_listener);
+    return this;
   }
 
   input_input_value(value) {
     if (value !== undefined) {
       this.element.value = value;
     }
+    return this;
   }
 
   default_value(value) {

package/source/client/Session.js

@@ -0,0 +1,27 @@
+import Context from "./Context.js";
+import {contexts} from "./exports.js";
+
+export default class Session {
+  constructor(client) {
+    this.client = client;
+  }
+
+  async run(data) {
+    const {context} = data;
+    this.context = new (contexts[context] ?? Context)(context, this);
+
+    await this.context.run(data);
+  }
+
+  on(key, event) {
+    this.context.on(key, event);
+  }
+
+  read(pathname) {
+    return this.client.read(pathname);
+  }
+
+  write(pathname, payload) {
+    return this.client.write(pathname, payload);
+  }
+}

package/source/client/View.js

@@ -3,8 +3,6 @@
 import Element from "../Element.js";
 import Node from "./Node.js";
 
-const data_regex = /\${([^}]*)}/g;
-
 export default class View {
   constructor(data, action, root) {
     this.sources = {};
@@ -87,4 +85,5 @@ export default class View {
   write(pathname, payload) {
     return this.action.write(pathname, payload);
   }
+
 }

package/source/client/document.js

@@ -3,4 +3,4 @@ const {host, href, origin} = document.location;
 const base = baseURI === href ? "/" : baseURI.replace(origin, "");
 const origin_base = `${origin}${base}`;
 
-export {base, origin_base, host};
+export {base, origin, origin_base, host};

package/source/preset/primate.json

@@ -2,10 +2,7 @@
   "base": "/",
   "debug": false,
   "defaults": {
-    "action": "index",
-    "context": "guest",
-    "namespace": "default",
-    "store": "default.js"
+    "context": "guest"
   },
   "files": {
     "index": "index.html"
@@ -21,8 +18,7 @@
   "paths": {
     "client": "client",
     "data": {
-      "domains": "domains",
-      "stores": "stores"
+      "domains": "domains"
     },
     "public": "public",
     "server": "server",

package/source/server/Action.js

@@ -1,118 +1,99 @@
-import Base from "./Base.js";
-import {MetaPromise} from "./promises.js";
-
-const _response = Symbol("#response");
-
-export default class Action extends Base {
-  constructor(data, session) {
-    super();
-    this._data = data;
+import {resolve} from "path";
+import {default as EagerPromise, eager} from "./EagerPromise.js";
+import View from "./view/View.js";
+import Projector from "./Projector.js";
+import InternalServerError from "./errors/InternalServer.js";
+import {assert, defined} from "./invariants.js";
+import sanitize from "./sanitize.js";
+
+export default class Action {
+  static action = "index";
+  static namespace = "default";
+  static layout = "default";
+
+  constructor(request, session, context) {
+    this.request = request;
     this.session = session;
+    this.context = EagerPromise.resolve(context);
   }
 
-  static get layout() {
-    return "default";
-  }
-
-  static async load(data, session, context) {
-    let module;
-    const server = this.conf.paths.server;
-    const {namespace, action} = data.path;
+  static async new(request, session, context) {
+    const {namespace = this.namespace, action = this.action} = request.path;
+    assert(!namespace.includes("."), () => {
+      throw new InternalServerError("namespace may not include a dot");
+    });
     const route = `${namespace}/${action}`;
+    const path = resolve(`${context.directory}/${route}.js`);
     try {
-      module = (await import(`${server}/${context}/${route}.js`)).default;
+      return new (await import(path)).default(request, session, context);
     } catch (error) {
-      throw new Error(`route '${route}' missing`);
+      throw new Error(`route \`${route}\` missing`);
     }
-    return new module(data, session);
+  }
+
+  get Class() {
+    return this.constructor;
   }
 
   get layout() {
-    return this.Class().layout;
+    return this.Class.layout;
   }
 
   get path() {
-    return this._data.path;
+    const {path} = this.request;
+    const namespace = path.namespace ?? this.Class.namespace;
+    const action = path.action ?? this.Class.action;
+    const {_id} = path;
+    return {action, namespace, _id};
   }
 
   get params() {
-    return this._data.params;
-  }
-
-  async _view(path) {
-    const {namespace, action} = this.path;
-    const view_path = path !== undefined ? path : `${namespace}/${action}`;
-    return (await this.context).view(view_path);
-  }
-
-  static sanitize(payload = {}) {
-    //assert(typeof payload === "object");
-    return Object.keys(payload)
-      .map(key => ({key, "value": payload[key].toString().trim()}))
-      .map(({key, value}) => ({key, "value":
-        value === "" ? undefined : value}))
-      .reduce((o, {key, value}) => {o[key] = value; return o;}, {});
+    return this.request.params;
   }
 
   async run(type) {
+    defined(this[type]);
     this.before && await this.before();
-    await this[type](this.Class().sanitize(this._data.payload));
+    await this[type](sanitize(this.request.payload));
   }
 
-  get response() {
-    return this[_response]();
-  }
-
-  return(data = {}) {
-    this.respond("return", () => ({"payload": data}));
+  return(payload = {}) {
+    this.respond("return", () => ({payload}));
   }
 
   view(data = {}, layout = true) {
     this.respond("view", async () => {
-      const _view = await this._view();
-      const payload = await this.prepare(data, _view);
+      const {_view, payload} = await this.prepare(data);
       const view = layout ? _view.file(this.layout) : _view.content;
       return {view, payload};
     });
   }
 
   update(data) {
-    this.respond("update", async () => {
-      const _view = await this._view();
-      const payload = await this.prepare(data, _view);
-      return {payload};
-    });
+    this.respond("update", async () =>
+      ({"payload": (await this.prepare(data)).payload})
+    );
   }
 
   redirect(location) {
     this.respond("redirect", () => ({location}));
   }
 
-  get context() {
-    return this.session.actual_context;
-  }
-
-  switch_context(name, parameters) {
-    return this.session.switch_context(name, parameters);
-  }
-
-  async prepare(data = {}, view) {
-    (await this.context).Class().prepare(this, data);
-    return MetaPromise(data, await view.elements(this.layout));
+  async prepare(data = {}) {
+    const route = `${this.path.namespace}/${this.path.action}`;
+    const path = await eager`${this.context.directory}/${route}`;
+    const _view = await View.new(path, await this.context.layouts);
+    await this.context.Class.prepare(this, data);
+    const payload = await new Projector(data,
+      await _view.elements(this.layout)).project(route);
+    return {payload, _view};
   }
 
-  respond(type, response) {
-    this[_response] = async () => {
-      const data = await response();
-      data.context = (await this.context).name;
-      data.namespace = this.path.namespace;
-      data.action = this.path.action;
-      if (data.pathname === undefined) {
-        data.pathname = this._data.pathname.replace(this.conf.base, "")
-          + (this._data.search ?? "");
-      }
-      data.type = type;
-      return data;
+  respond(type, how) {
+    this.response = async () => {
+      const context = await this.context.name;
+      const {url} = this.request;
+      return {...await how(), type, context, ...this.path, url};
     };
   }
 }