primate 0.0.1 → 0.3.0

package/LICENSE

@@ -0,0 +1,27 @@
+Copyright (c) 2022, Primate core team <core@primatejs.com>. All rights
+reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+this list of conditions and the following disclaimer in the documentation
+and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+may be used to endorse or promote products derived from this software without
+specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,50 @@
+# Primate: a JavaScript framework
+
+⚠️ **This software is currently its initial development phase. It is not
+considered production-ready. Expect breakage.** ⚠️
+
+Primate is a server-client JavaScript framework for web applications aimed at
+relieving you of dealing with repetitive, error-prone tasks and letting you
+concentrate on writing effective, expressive code.
+
+## Installing
+
+```
+yarn add primate
+```
+
+## Concepts
+
+* **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)
+* **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
+* **Sessions** using cookies that are `HttpOnly`, `Secure` and `Path`-limited
+* **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
+
+## Getting started
+
+Coming soon.
+
+## Resources
+
+Coming soon.
+
+## Versioning
+
+This software is still in its initial development phase and is not considered
+stable or recommended for production. Once we release a stable version `1`, we
+will move over to semantic versioning.
+
+## License
+
+BSD-3-Clause
+
+[ws]: https://github.com/websockets/ws

package/package.json

@@ -1,9 +1,23 @@
 {
   "name": "primate",
-  "version": "0.0.1",
+  "version": "0.3.0",
   "author": "Primate core team <core@primatejs.com>",
   "homepage": "https://primatejs.com",
+  "description": "Server-client framework",
   "license": "BSD-3-Clause",
+  "dependencies": {
+    "ws": "^8.4.0"
+  },
+  "scripts": {
+    "test": "node --experimental-json-modules node_modules/stick stick.json"
+  },
+  "devDependencies": {
+    "eslint": "^8.6.0",
+    "eslint-plugin-json": "^3.1.0",
+    "stick": "../stick"
+  },
+  "type": "module",
+  "exports": "./source/server/exports.js",
   "engines": {
     "node": ">=17.3.0"
   }

package/source/client/Action.js

@@ -0,0 +1,159 @@
+import Element from "../Element.js";
+import View from "./View.js";
+import Base from "./Base.js";
+import {origin_base} from "./document.js";
+
+export default class Action extends Base {
+  constructor(name, context) {
+    super();
+    this.name = name;
+    this.context = context;
+    this.listeners = [];
+  }
+
+  before() {}
+
+  async enter(data) {
+    if (data.location) {
+      location.href = data.location;
+    } else {
+      this.create_view(data);
+    }
+  }
+
+  create_view(data, root, save_history = true) {
+    if (save_history) {
+      const pathname = data.pathname === "" ? "/" : data.pathname;
+      window.location.pathname !== pathname
+          && history.pushState({}, "", pathname);
+    }
+    this.view = new View(data, this, root);
+  }
+
+  create_and_return_view(data, root, save_history) {
+    return new View(data, this, root);
+  }
+
+  get_form_data(target) {
+    const payload = {};
+    const elements = target.elements;
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i];
+      const type = Element.value(element, "type");
+      const data_value = Element.value(element, "data-value");
+      switch (element.localName) {
+        case "input":
+        case "textarea":
+          if (type === "checkbox") {
+            payload[data_value] = element.checked;
+          } else if (type === "file") {
+            payload[data_value] = element.getAttribute("base64");
+          } else if (type === "submit") {
+            // do nothing
+          } else {
+            payload[data_value] = element.value;
+          }
+          break;
+        case "select":
+          payload[data_value] = Element
+            .value(element.children[element.selectedIndex], "value");
+          break;
+        default:
+          break;
+      }
+    }
+    return payload;
+  }
+
+  async onsubmit(event) {
+    const target = event.target;
+    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, "")
+      ? this.view.update(data.payload)
+      : this.context.run(data);
+  }
+
+  async onclick(event) {
+    const stop = await this.fire("click", event);
+    if (stop) {
+      return event.preventDefault();
+    }
+    let target;
+    if (event.target.shadowRoot !== null &&
+      event.target.shadowRoot.activeElement !== null) {
+      target = event.target.shadowRoot.activeElement.closest("a");
+    } else {
+      target = event.target.closest("a");
+    }
+    if (target !== null) {
+      const href = Element.value(target, "href");
+      const url = new URL(href, origin_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);
+        }
+      }
+    }
+  }
+
+  onchange() {
+    const stop = this.fire("change", event);
+    if (stop) {
+      event.preventDefault();
+    }
+  }
+
+  oninput() {
+    const stop = this.fire("input", event);
+  }
+
+  fire(type, event) {
+    const listeners = this.listeners[type];
+    if (listeners !== undefined) {
+      const target = event.target;
+      for (const listener of listeners) {
+        if (event.target.closest(listener.selector)) {
+          listener.listener(event, target);
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  on(selector, event, listener) {
+    this.listeners[event] = this.listeners[event] ?? [];
+    const index = this.listeners[event]
+      .findIndex(listener => listener.selector === selector);
+    const object = {selector, listener};
+    if (index === -1) {
+      this.listeners[event].push(object);
+    } else {
+      this.listeners[event].splice(index, 1, object);
+    }
+  }
+
+  _(selector) {
+    return new Element(selector, this);
+  }
+
+  get selector() {
+    return selector => new Element(selector, this);
+  }
+
+  read(pathname) {
+    return this.context.read(pathname);
+  }
+
+  write(pathname, payload) {
+    return this.context.write(pathname, payload);
+  }
+}

package/source/client/App.js

@@ -0,0 +1,16 @@
+import Client from "./Client.js";
+
+export default class App {
+  constructor() {
+    this.definitions = {};
+  }
+
+  run() {
+    this.client = new Client();
+    this.client.open();
+  }
+
+  define(name, predicate) {
+    this.definitions[name] = predicate;
+  }
+}

package/source/client/Base.js

@@ -0,0 +1,5 @@
+export default class Base {
+  Class() {
+    return this.constructor;
+  }
+}

package/source/client/Client.js

@@ -0,0 +1,65 @@
+import Context from "./Context.js";
+import {contexts} from "./exports.js";
+import {base, host, origin_base} from "./document.js";
+
+const events = ["submit", "click", "change", "input"];
+let back = undefined;
+const location = `wss://${host}${base}`;
+
+export default class Client {
+  constructor(conf) {
+    this.conf = conf;
+
+    window.onpopstate = async event => {
+      const {pathname, search} = event.target.location;
+      return this.execute(await this.read(pathname + search));
+    };
+
+    for (const key of events) {
+      window.addEventListener(key, event => this.context.on(key, event));
+    }
+  }
+
+  open() {
+    return this.connection?.readyState === 1 ? this
+      : new Promise(resolve => {
+        const connection = new WebSocket(location);
+        connection.addEventListener("message", ({data}) => data === "open"
+          ? resolve(this)
+          : this.receive(JSON.parse(data)));
+        this.connection = connection;
+      });
+  }
+
+  async receive(data) {
+    if (back !== undefined) {
+      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);
+  }
+
+  write(url, payload) {
+    return this.send("write", url, payload);
+  }
+
+  async send(type, url, payload = {}) {
+    await this.open();
+    const {pathname, search} = new URL(url, origin_base);
+    return new Promise(resolve => {
+      back = data => resolve(data);
+      this.connection.send(JSON.stringify({type, pathname, search, payload}));
+    });
+  }
+}

package/source/client/Context.js

@@ -0,0 +1,53 @@
+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();
+    this.name = name;
+    this.actions = {};
+    this.used_actions = [];
+    this.client = client;
+  }
+
+  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 nextaction = this.actions[route];
+    nextaction.enter(data);
+    await this.Class().before(nextaction);
+    nextaction.before();
+    this.action = nextaction;
+  }
+
+  static before(action) {
+    return action;
+  }
+
+  static prepare(action, data) {
+    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);
+  }
+
+  push_action() {
+    this.used_actions.push(this.action);
+  }
+
+  pop_action() {
+    this.action = this.used_actions.pop();
+  }
+}

package/source/client/Element.js

@@ -0,0 +1,245 @@
+const file_listener = event => reader.readAsDataURL(event.target.files[0]);
+const reader = new FileReader();
+
+const replace = (attribute, source) => {
+  if (attribute.includes(".")) {
+    const index = attribute.indexOf(".");
+    const left = attribute.slice(0, index);
+    const rest = attribute.slice(index+1);
+    if (source[left] !== undefined) {
+      return replace(rest, source[left]);
+    }
+  } else {
+    return source[attribute];
+  }
+};
+
+const data_prefix_length = 5;
+const data_regex = /\${([^}]*)}/g;
+const fulfill = (attribute, source) => {
+  if (source === undefined) {
+    return undefined;
+  }
+  let value = attribute.value;
+  const matches = [...value.matchAll(data_regex)];
+  if (matches.length > 0) {
+    for (const match of matches) {
+      const key = match[0];
+      const new_value = replace(match[1], source);
+      value = value.replace(key, new_value);
+    }
+  } else {
+    value = replace(value, source);
+  }
+  return value;
+};
+
+
+const $selector = Symbol("$selector");
+const $element = Symbol("$element");
+const $action = Symbol("$action");
+
+const proxy_handler = {
+  "get": (target, property, receiver) => {
+    if (property === "element") {
+      return target.element;
+    }
+    if (property === "on" || property === "insert") {
+      return target[property].bind(target);
+    }
+    if (target.element !== null) {
+      return (...args) => target[property] !== undefined
+        ? target[property](...args)
+        : receiver;
+    } else {
+      return () => receiver;
+    }
+  },
+};
+
+export default class Element {
+  constructor(selector, action) {
+    this[$action] = action;
+    if (typeof selector === "string") {
+      this.construct_by_selector(selector);
+    } else {
+      this.construct_by_element(selector);
+    }
+    return new Proxy(this, proxy_handler);
+  }
+
+  construct_by_selector(selector) {
+    this[$selector] = selector;
+  }
+
+  construct_by_element(element) {
+    this[$element] = element;
+  }
+
+  static value(element, name) {
+    const attribute = element.attributes.getNamedItem(name);
+    return attribute === null ? null : attribute.value;
+  }
+
+  static evaluate(attribute, source, data) {
+    const element = new this(source);
+    const attribute_name = attribute.name.slice(data_prefix_length);
+    element.resolve(attribute_name)(fulfill(attribute, data), attribute_name);
+  }
+
+  resolve(name) {
+    return (this[name] ?? this.default).bind(this);
+  }
+
+  get element() {
+    return this[$element] ?? document.querySelector(this[$selector]);
+  }
+
+  each(callback) {
+    document.querySelectorAll(this[$selector]).forEach(callback);
+  }
+
+  get(name) {
+    return this.element.getAttribute(name);
+  }
+
+  has(attribute) {
+    return this.element[attribute] !== undefined;
+  }
+
+  show() {
+    return this.class("show");
+  }
+
+  hide() {
+    return this.class("show", false);
+  }
+
+  insert() {
+    const element = document.createElement("div");
+    if (this[$selector].startsWith(".")) {
+      element.className = this[$selector].slice(1);
+    }
+    document.body.append(element);
+    return this;
+  }
+
+  replace(child) {
+    this.element.innerHTML = "";
+    return this.append(child);
+  }
+
+  append(child) {
+    if (child instanceof HTMLElement) {
+      this.element.appendChild(child);
+    } else {
+      this.element.innerHTML += child;
+    }
+    return this;
+  }
+
+  set(name, value) {
+    this.element.setAttribute(name, value);
+    return this;
+  }
+
+  class(classes, set) {
+    classes.split(" ").forEach(name => {
+      this.element.classList.toggle(name, set !== false);
+    })
+    return this;
+  }
+
+  remove() {
+    this.element.remove();
+    return this;
+  }
+
+  remove_attribute(name) {
+    this.element.removeAttribute(name);
+    return this;
+  }
+
+  click() {
+    this.element.click();
+    return this;
+  }
+
+  on(event, handler) {
+    this[$action].on(this[$selector], event, handler);
+    return this;
+  }
+
+  defined(value) {
+    return value === undefined && this.remove();
+  }
+
+  html(value) {
+    if (value !== undefined) {
+      this.element.innerHTML = value;
+    }
+    return this;
+  }
+
+  options(value) {
+    value instanceof Array && value.forEach(option => {
+      if (this.element.children[option._id] === undefined) {
+        const newElement = document.createElement("option");
+        newElement.setAttribute("value", option._id);
+        newElement.innerHTML = option.name;
+        this.append(newElement);
+      }
+    });
+  }
+
+  if(value) {
+    return value !== true && this.remove();
+  }
+
+  value(value) {
+    const name = `${this.element.localName}_value`;
+    this[name]?.(value) ?? this.default_value(value);
+  }
+
+  select_value(value) {
+    this.element.value = value === undefined ? "" : value;
+  }
+
+  input_value(value) {
+    const type = Element.value(this.element, "type");
+    this[`input_${type}_value`]?.(value) ?? this.input_input_value(value);
+  }
+
+  textarea_value(value) {
+    return this.input_value(value);
+  }
+
+  input_checkbox_value(value) {
+    if (value === true) {
+      this.element.checked = true;
+    }
+  }
+
+  input_file_value(value) {
+    const element = this.element;
+    if (value !== undefined) {
+      element.setAttribute("base64", value);
+    }
+    reader.onload = ({target}) => element.setAttribute("base64", target.result);
+    element.addEventListener("change", file_listener);
+  }
+
+  input_input_value(value) {
+    if (value !== undefined) {
+      this.element.value = value;
+    }
+  }
+
+  default_value(value) {
+    this.element.innerText = value ?? "";
+  }
+
+  default(value, attribute) {
+    value !== undefined && this.element.setAttribute(attribute, value);
+  }
+}

package/source/client/Node.js

@@ -0,0 +1,13 @@
+export default class Node {
+  constructor(node) {
+    this.node = node;
+  }
+
+  get attributes() {
+    return [...this.node.attributes];
+  }
+
+  get children() {
+    return [...this.node.children];
+  }
+}