primate 0.5.1 → 0.6.1

package/source/handlers/DOM/Node.js

@@ -0,0 +1,184 @@
+import Parser from "./Parser.js";
+
+const replacement_regex = /^\$([0-9]*)$/;
+const data_regex = /\${([^}]*)}/g;
+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 fulfill = (attribute, source) => {
+  if (source === undefined) {
+    return undefined;
+  }
+  let value;
+  const matches = [...attribute.matchAll(data_regex)];
+  if (matches.length > 0) {
+    for (const match of matches) {
+      const [key] = match;
+      const new_value = replace(match[1], source);
+      value = attribute.replace(key, new_value);
+    }
+  } else {
+    value = replace(attribute, source);
+  }
+  return value;
+};
+
+export default class Node {
+  #data;
+
+  constructor(parent, content = "div", data) {
+    if (parent !== undefined) {
+      this.parent = parent;
+      this.parent.attach(this);
+    }
+    this.#data = data;
+    this.attributes = {};
+    if (content !== undefined) {
+      const [tag_name, ...attributes] = content.split(" ");
+      this.tag_name = tag_name;
+      for (const attribute of attributes
+        .map(a => a.replaceAll("\"", ""))
+        .filter(a => a.includes("="))) {
+        const position = attribute.indexOf("=");
+        const key = attribute.slice(0, position);
+        const value = attribute.slice(position+1);
+        this.attributes[key] = value;
+        if (this.data) {
+          const result = replacement_regex.exec(value);
+          if (result !== null) {
+            this.attributes[key] = this.data[result[1]];
+          }
+        }
+      }
+    }
+    this.children = [];
+  }
+
+  get data() {
+    if (this.#data !== undefined) {
+      return this.#data;
+    } else {
+      return this.parent?.data;
+    }
+  }
+
+  set data(value) {
+    this.#data = value;
+  }
+
+  attach(child) {
+    this.children.push(child);
+    child.parent = this;
+  }
+
+  replace(child, replacement) {
+    for (let i = 0; i < this.children.length; i++) {
+      if (child === this.children[i]) {
+        replacement.parent = this;
+        this.children.splice(i, 1, replacement);
+      }
+    }
+  }
+
+  async render() {
+    let tag = "<" + this.tag_name;
+    for (const [key, value] of Object.entries(this.attributes)) {
+      if (value === undefined) {
+        continue;
+      }
+      tag += " " + key + "=";
+      if (!value.startsWith("\"")) {
+        tag += "\"";
+      }
+      tag += value;
+      if (!value.endsWith("\"")) {
+        tag += "\"";
+      }
+    }
+    if (this.auto_closing) {
+      tag += "/>";
+    } else {
+      tag += ">";
+      for (const child of this.children) {
+        tag += await child.render();
+      }
+      if (this.text) {
+        tag += await this.text;
+      }
+      tag += "</" + this.tag_name + ">";
+    }
+    return tag;
+  }
+
+  compose(components) {
+    if (components[this.tag_name]) {
+      return Parser.parse(components[this.tag_name], this.attributes);
+    }
+    for (let i = 0; i < this.children.length; i++) {
+      this.children[i] = this.children[i].compose(components);
+    }
+    return this;
+  }
+
+  clone(parent, data) {
+    const cloned = new Node(parent, this.tag_name, data);
+    cloned.text = this.text;
+    for (const attribute in this.attributes) {
+      cloned.attributes[attribute] = this.attributes[attribute];
+    }
+    for (const child of this.children) {
+      child.clone(cloned);
+    }
+  }
+
+  async expand() {
+    if (this.attributes["data-for"] !== undefined) {
+      const key = this.attributes["data-for"];
+      delete this.attributes["data-for"];
+      const value = await this.data[key];
+      const arr = Array.isArray(value) ? value : [value];
+      const newparent = new Node();
+      for (const val of arr) {
+        this.clone(newparent, val);
+      }
+      this.parent.replace(this, newparent);
+      return newparent.expand();
+    }
+    for (const attribute in this.attributes) {
+      if (attribute.startsWith("data-")) {
+        const fulfilled = fulfill(this.attributes[attribute], this.data);
+        switch(attribute) {
+          case "data-value":
+            if (this.tag_name === "input") {
+              this.attributes.value = fulfilled;
+            } else {
+              this.text = fulfilled;
+            }
+            break;
+          case "data-href":
+            fulfill(this.attributes[attribute], this.data);
+            this.attributes.href = fulfilled;
+            break;
+        }
+        delete this.attributes[attribute];
+      }
+    }
+    for (let i = 0; i < this.children.length; i++) {
+      this.children[i] = await this.children[i].expand();
+    }
+    return this;
+  }
+
+  unfold(components) {
+    return this.compose(components).expand();
+  }
+}

package/source/{server/view → handlers/DOM}/Parser.js

@@ -1,24 +1,24 @@
-import TreeNode from "./TreeNode.js";
+import Node from "./Node.js";
 
-const OPEN_TAG = "open_tag";
-const CLOSE_TAG = "close_tag";
-const OPEN_AND_CLOSE_TAG = "open_and_close_tag";
+const open_tag = "open_tag";
+const close_tag = "close_tag";
+const open_and_close_tag = "open_and_close_tag";
 const last_index = -1;
 
 export default class Parser {
-  constructor(html) {
+  constructor(html, data) {
     this.html = html;
-    this.result = [];
     this.index = 0;
+    this.result = [];
     this.buffer = "";
     this.balance = 0;
     this.reading_tag = false;
-    this.node = new TreeNode();
+    this.node = new Node(undefined, undefined, data);
     this.tree = this.node;
   }
 
-  at(index) {
-    return this.html[index];
+  remove_whitespace() {
+    this.html = this.html.replace(/[\n\t\r]/gu, "");
   }
 
   get previous() {
@@ -33,12 +33,12 @@ export default class Parser {
     return this.at(this.index+1);
   }
 
-  remove_whitespace() {
-    this.html = this.html.replace(/[\n\t\r]/gu, "");
+  at(index) {
+    return this.html[index];
   }
 
   open_tag() {
-    this.node = new TreeNode(this.node, this.buffer);
+    this.node = new Node(this.node, this.buffer);
   }
 
   close_tag() {
@@ -49,6 +49,7 @@ export default class Parser {
 
   open_and_close_tag() {
     this.open_tag();
+    this.node.auto_closing = true;
     this.close_tag();
   }
 
@@ -59,7 +60,7 @@ export default class Parser {
       this.reading_tag = false;
       // if the previous character is '/', it's an open and close tag
       if (this.previous === "/") {
-        this.tag = OPEN_AND_CLOSE_TAG;
+        this.tag = open_and_close_tag;
         this.balance--;
         this.buffer = this.buffer.slice(0, last_index);
       }
@@ -77,17 +78,21 @@ export default class Parser {
   process_not_reading_tag() {
     // encountered '<'
     if (this.current === "<") {
+      this.node.text = this.buffer;
+      this.buffer = "";
       // mark as inside tag
       this.reading_tag = true;
       if (this.next === "/") {
         // next character is slash, this is a close tag
-        this.tag = CLOSE_TAG;
+        this.tag = close_tag;
         this.balance--;
       } else {
         // this is an open tag (or open-and-close)
-        this.tag = OPEN_TAG;
+        this.tag = open_tag;
         this.balance++;
       }
+    } else {
+      this.buffer += this.current;
     }
   }
 
@@ -109,14 +114,13 @@ export default class Parser {
     return this.tree;
   }
 
-  // TODO: ignore comments in the analysed html
   parse() {
     this.remove_whitespace();
     do {} while (this.read());
     return this.return_checked();
   }
 
-  static parse(html) {
-    return new Parser(html).parse();
+  static parse(html, data) {
+    return new Parser(html, data).parse();
   }
 }

package/source/handlers/html.js

@@ -0,0 +1,27 @@
+import Parser from "./DOM/Parser.js";
+import conf from "../conf.js";
+import Directory from "../Directory.js";
+import File from "../File.js";
+
+const last = -1;
+const {paths: {"components": path}} = conf();
+const components = {};
+if (await File.exists(path)) {
+  const names = await Directory.list(path);
+  for (const name of names) {
+    components[name.slice(0, -5)] = await File.read(`${path}/${name}`);
+  }
+}
+
+export default async (strings, ...keys) => {
+  const awaited_keys = await Promise.all(keys);
+  const body = await (await Parser.parse(strings
+    .slice(0, last)
+    .map((string, i) => `${string}$${i}`)
+    .join("") + strings[strings.length+last], awaited_keys)
+    .unfold(components))
+    .render();
+  const code = 200;
+  const headers = {"Content-Type": "text/html"};
+  return {code, body, headers};
+};

package/source/handlers/http.js

@@ -0,0 +1,6 @@
+const http404 = () => {
+  const headers = {"Content-Type": "text/html"};
+  return {"code": 404, "body": "Page not found", headers};
+};
+
+export {http404};

package/source/handlers/redirect.js

@@ -0,0 +1,10 @@
+const last = -1;
+
+export default async (strings, ...keys) => {
+  const awaited_keys = await Promise.all(keys);
+  const Location = strings
+    .slice(0, last)
+    .map((string, i) => string + awaited_keys[i])
+    .join("") + strings[strings.length+last];
+  return {"code": 302, "headers": {Location}};
+};

package/source/preset/primate.json

@@ -13,13 +13,21 @@
     "ssl": {
       "key": "ssl/default.key",
       "cert": "ssl/default.crt"
-    }
+    },
+    "csp": {
+      "default-src": "'self'",
+      "object-src": "'none'",
+      "frame-ancestors": "'none'",
+      "form-action": "'self'",
+      "base-uri": "'self'"
+    },
+    "same-site": "Strict"
   },
   "paths": {
-    "client": "client",
     "domains": "domains",
     "public": "public",
-    "server": "server",
-    "static": "static"
+    "static": "static",
+    "routes": "routes",
+    "components": "components"
   }
 }

package/source/preset/static/index.html

@@ -2,9 +2,7 @@
 <html>
   <head>
     <title>Primate app</title>
-    <base href="${conf.base}" />
     <meta charset="utf-8" />
-    ${client}
   </head>
   <body></body>
 </html>

package/source/preset/stores/default.js

@@ -0,0 +1,2 @@
+import MemoryStore from "../../store/Memory.js";
+export default new MemoryStore();

package/source/{server/store → store}/Store.js

@@ -1,5 +1,5 @@
 import {resolve} from "path";
-const preset = "../../preset/data/stores";
+const preset = "../preset/stores";
 
 export default class Store {
   constructor(conf = {}) {

package/source/client/Action.js

@@ -1,157 +0,0 @@
-import Element from "../Element.js";
-import View from "./View.js";
-import {origin_base, origin} from "./document.js";
-
-export default class Action {
-  constructor(name, session) {
-    this.name = name;
-    this.session = session;
-    this.listeners = [];
-  }
-
-  before() {}
-
-  enter(data) {
-    if (data.location) {
-      location.href = data.location;
-    } else {
-      this.create_view(data);
-    }
-  }
-
-  create_view(data, root, save_history = true) {
-    if (save_history) {
-      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) {
-    return new View(data, this, root);
-  }
-
-  get_form_data(target) {
-    const payload = {};
-    const {elements} = target;
-    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;
-    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.type === "update"
-      ? this.view.update(data.payload)
-      : this.session.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 !== "") {
-          await this.session.run(await this.read(href));
-        }
-      }
-    }
-  }
-
-  onchange() {
-    const stop = this.fire("change", event);
-    if (stop) {
-      event.preventDefault();
-    }
-  }
-
-  oninput() {
-    this.fire("input", event);
-  }
-
-  fire(type, event) {
-    const listeners = this.listeners[type];
-    if (listeners !== undefined) {
-      const {target} = event;
-      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};
-    const not_found = -1;
-    if (index === not_found) {
-      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.session.read(pathname);
-  }
-
-  write(pathname, payload) {
-    return this.session.write(pathname, payload);
-  }
-}

package/source/client/App.js

@@ -1,16 +0,0 @@
-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/Client.js

@@ -1,61 +0,0 @@
-import Session from "./Session.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;
-    this.session = new Session(this);
-
-    window.onpopstate = async event => {
-      const {pathname, search} = event.target.location;
-      return this.session.run(await this.read(pathname + search));
-    };
-
-    for (const key of events) {
-      window.addEventListener(key, event => this.session.on(key, event));
-    }
-  }
-
-  open() {
-    return this.connection?.readyState === 1 ? this
-      : new Promise(resolve => {
-        this.connection = new WebSocket(location);
-        this.connection.addEventListener("message", ({data}) => data === "open"
-          ? resolve(this)
-          : this.receive(JSON.parse(data)));
-      });
-  }
-
-  async receive(data) {
-    if (back === undefined) {
-      await this.session.execute(data);
-    } else {
-      back(data);
-      back = undefined;
-    }
-  }
-
-  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);
-    const _url = pathname + search;
-    return new Promise(resolve => {
-      back = data => resolve(data);
-      this.connection.send(JSON.stringify({
-        type, pathname, search, payload, "url": _url,
-      }));
-    });
-  }
-}