primate 0.7.0 → 0.8.0

package/README.md

@@ -1,8 +1,7 @@
-# Primate, A JavaScript Framework
+# Primate 
 
-A full-stack Javascript framework, Primate relieves you of dealing with
-repetitive, error-prone tasks and lets you concentrate on writing effective,
-expressive code.
+A full-stack Javascript framework with data verification and server-side HTML
+rendering.
 
 ## Highlights
 
@@ -15,10 +14,12 @@ expressive code.
 [MongoDB][primate-mongodb-store]
 * Easy modelling of`1:1`, `1:n` and `n:m` relationships
 * Minimally opinionated with sane, overrideable defaults
-* No dependencies
+* Supports both Node.js and Deno
 
 ## Getting started
 
+### Prepare
+
 Lay out your app
 
 ```sh
@@ -32,13 +33,13 @@ Create a route for `/`
 
 import {router, html} from "primate";
 
-router.get("/", () => html`<site-index date=${new Date()} />`);
+router.get("/", () => html`<site-index date="${new Date()}" />`);
 ```
 
 Create a component for your route (in `components/site-index.html`)
 
 ```html
-Today's date is <span data-value="date"></span>.
+Today's date is <span value="${date}"></span>.
 ```
 
 Generate SSL key/certificate
@@ -56,6 +57,8 @@ import {app} from "primate";
 app.run();
 ```
 
+### Run on Node.js
+
 Create a start script and enable ES modules (in `package.json`)
 
 ```json
@@ -79,15 +82,33 @@ Run app
 $ npm start
 ```
 
-Visit `https://localhost:9999`
+### Run on Deno
+
+Create an import map file (`import-map.json`)
+
+```json
+{
+  "imports": {
+    "runtime-compat": "https://deno.land/x/runtime_compat/exports.js",
+    "primate": "https:/deno.land/x/primate/exports.js"
+  }
+}
+```
+
+Run app
+
+```
+deno run --import-map=import-map.json app.js
+```
+
+You will typically need the `allow-read`, `allow-write` and `allow-net`
+permissions.
 
 ## Table of Contents
 
 * [Routes](#routes)
 * [Handlers](#handlers)
 * [Components](#components)
-* [Domains](#domains)
-* [Verification](#verification)
 
 ## Routes
 
@@ -171,13 +192,15 @@ router.map("/user/edit/_id", request => {
 
 router.get("/user/edit/_id", request => {
   // show user edit form
-  return html`<user-edit user=${request.user} />`
+  return html`<user-edit user="${request.user}" />`
 });
 
 router.post("/user/edit/_id", request => {
   const {user} = request;
   // verify form and save / show errors
-  return await user.save() ? redirect`/users` : html`<user-edit user=${user} />`
+  return await user.save()
+    ? redirect`/users`
+    : html`<user-edit user="${user}" />`
 });
 ```
 
@@ -185,7 +208,7 @@ router.post("/user/edit/_id", request => {
 
 Handlers are tagged template functions usually associated with data.
 
-### ``html`<component-name attribute=${value} />` ``
+### ``html`<component-name attribute="${value}" />` ``
 
 Compiles and serves a component from the `components` directory and with the
 specified attributes and their values. Returns an HTTP 200 response with the
@@ -202,8 +225,8 @@ Redirects to `url`. Returns an HTTP 302 response.
 
 ## Components
 
-Create HTML components in the `components` directory. Use `data`-attributes to
-show data within your component.
+Create HTML components in the `components` directory. Use attributes to expose
+passed data within your component.
 
 ```js
 // in routes/user.js
@@ -219,14 +242,16 @@ router.map("/user/edit/_id", request => {
 
 router.get("/user/edit/_id", request => {
   // show user edit form
-  return html`<user-edit user=${request.user} />`
+  return html`<user-edit user="${request.user}" />`
 });
 
 router.post("/user/edit/_id", request => {
   const {user, payload} = request;
   // verify form and save / show errors
   // this assumes `user` has a method `save` to verify data
-  return await user.save(payload) ? redirect`/users` : html`<user-edit user=${user} />`
+  return await user.save(payload)
+    ? redirect`/users`
+    : html`<user-edit user="${user}" />`
 });
 ```
 
@@ -235,28 +260,28 @@ router.post("/user/edit/_id", request => {
 <form method="post">
   <h1>Edit user</h1>
   <p>
-    <input name="user.name" data-value="user.name"></textarea>
+    <input name="name" value="${user.name}"></textarea>
   </p>
   <p>
-    <input name="user.email" data-value="user.email"></textarea>
+    <input name="email" value="${user.email}"></textarea>
   </p>
   <input type="submit" value="Save user" />
 </form>
 ```
 
-### Grouping objects with `data-for`
+### Grouping objects with `for`
 
-You can use the special attribute `data-for` to group objects.
+You can use the special attribute `for` to group objects.
 
 ```html
 <!-- components/edit-user.html -->
-<form data-for="user" method="post">
+<form for="${user}" method="post">
   <h1>Edit user</h1>
   <p>
-    <input name="name" data-value="name" />
+    <input name="name" value="${name}" />
   </p>
   <p>
-    <input name="email" data-value="email" />
+    <input name="email" value="${email}" />
   </p>
   <input type="submit" value="Save user" />
 </form>
@@ -264,7 +289,7 @@ You can use the special attribute `data-for` to group objects.
 
 ### Expanding arrays
 
-`data-for` can also be used to expand arrays.
+`for` can also be used to expand arrays.
 
 ```js
 // in routes/user.js
@@ -275,15 +300,15 @@ router.get("/users", request => {
    {"name": "Donald", "email": "donald@was.here"},
    {"name": "Ryan", "email": "ryan@was.here"},
   ];
-  return html`<user-index users=${users} />`;
+  return html`<user-index users="${users}" />`;
 });
 ```
 
 ```html
 <!-- in components/user-index.html -->
-<div data-for="users">
-  User <span data-value="name"></span>
-  Email <span data-value="email"></span>
+<div for="${users}">
+  User <span value="${name}"></span>
+  Email <span value="${email}"></span>
 </div>
 ```
 

package/exports.js

@@ -0,0 +1,28 @@
+import conf from "./source/conf.js";
+import App from "./source/App.js";
+
+export {App};
+export {default as Bundler} from "./source/Bundler.js";
+export {default as EagerPromise, eager} from "./source/EagerPromise.js" ;
+
+export {default as Domain} from "./source/domain/Domain.js";
+export {default as Storeable} from "./source/types/Storeable.js";
+
+export * from "./source/errors.js";
+export * from "./source/invariants.js";
+
+export {default as MemoryStore} from "./source/store/Memory.js";
+export {default as Store} from "./source/store/Store.js";
+
+export {default as extend_object} from "./source/extend_object.js";
+export {default as sanitize} from "./source/sanitize.js";
+
+export {default as html} from "./source/handlers/html.js";
+export {default as json} from "./source/handlers/json.js";
+export {default as redirect} from "./source/handlers/redirect.js";
+
+export {default as router} from "./source/Router.js";
+
+const app = new App(conf());
+
+export {app};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "primate",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "author": "Primate core team <core@primatejs.com>",
   "homepage": "https://primatejs.com",
   "bugs": "https://github.com/primatejs/primate/issues",
   "repository": "https://github.com/primatejs/primate",
-  "description": "Full-stack JavaScript framework",
+  "description": "Cross-runtime JavaScript framework",
   "license": "BSD-3-Clause",
   "scripts": {
     "copy": "rm -rf output && mkdir output && cp source/* output -a",
@@ -15,16 +15,16 @@
     "test": "npm run copy && npm run debris"
   },
   "dependencies": {
-    "runtime-compat": "^0.1.0"
+    "runtime-compat": "^0.1.5"
   },
   "devDependencies": {
     "debris": "^0.2.2",
-    "eslint": "^8.13.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-json": "^3.1.0",
     "nyc": "^15.1.0"
   },
   "type": "module",
-  "exports": "./source/exports.js",
+  "exports": "./exports.js",
   "engines": {
     "node": ">=17.9.0"
   }

package/source/App.js

@@ -13,7 +13,7 @@ export default class App {
     log.reset("Primate").yellow(package_json.version);
     const routes = await File.list(this.conf.paths.routes);
     for (const route of routes) {
-      await import(`${this.conf.paths.routes}/${route}`);
+      await import(`file://${this.conf.paths.routes}/${route}`);
     }
     await new Bundler(this.conf).bundle();
 

package/source/Bundler.js

@@ -12,25 +12,16 @@ export default class Bundler {
     this.scripts = [];
   }
 
-  async copy_with_preset(subdirectory, to) {
-    const {paths} = this.conf;
-
-    // copy files preset files first
-    await File.copy(`${preset}/${subdirectory}`, to);
-
-    // copy any user code over it, not recreating the folder
-    try {
-      await File.copy(paths[subdirectory], to);
-    } catch(error) {
-      // directory doesn't exist
-    }
-  }
-
   async bundle() {
     const {paths} = this.conf;
 
+    // remove public directory in case exists
+    await File.remove(paths.public);
+    // create public directory
+    await File.create(paths.public);
+
     // copy static files to public
-    await this.copy_with_preset("static", paths.public);
+    await File.copy(paths.static, paths.public);
 
     // read index.html from public, then remove it (we serve it dynamically)
     await File.remove(`${paths.public}/${this.index}`);

package/source/Router.js

@@ -6,8 +6,8 @@ const dealias = path => aliases.reduce((dealiased, {key, value}) =>
   dealiased.replace(key, () => value), path);
 const push = (type, path, handler) =>
   routes.push({type, "path": new RegExp(`^${dealias(path)}$`, "u"), handler});
-const find = (type, path, fallback) => routes.find(route =>
-  route.type === type && route.path.test(path))?.handler ?? fallback;
+const find = (type, path, fallback = {"handler": r => r}) => routes.find(route =>
+  route.type === type && route.path.test(path)) ?? fallback;
 
 export default {
   "map": (path, callback) => push("map", path, callback),
@@ -19,10 +19,13 @@ export default {
     const url = new URL(`https://primatejs.com${original_request.pathname}`);
     const {pathname, searchParams} = url;
     const params = Object.fromEntries(searchParams);
-    const request = {...original_request, pathname, params,
-      "path": pathname.split("/").filter(path => path !== ""),
-    };
-    const verb = find(method, pathname, () => http404``);
-    return verb(await find("map", pathname, _ => _)(request));
+    const verb = find(method, pathname, () => ({"handler": http404``}));
+    const path = pathname.split("/").filter(path => path !== "");
+    Object.entries(verb.path.exec(pathname)?.groups ?? [])
+      .filter(([key]) => path[key] === undefined)
+      .forEach(([key, value]) => Object.defineProperty(path, key, {value}));
+
+    const request = {...original_request, pathname, params, path};
+    return verb.handler(await find("map", pathname).handler(request));
   },
 };

package/source/Server.js

@@ -30,12 +30,12 @@ export default class Server {
         response.setHeader("Set-Cookie", `${cookie}; SameSite=${same_site}`);
       }
       response.session = session;
-      const body = await request.body;
-      const payload = Object.fromEntries(decodeURI(body).replaceAll("+", " ")
+      const text = await request.text();
+      const payload = Object.fromEntries(decodeURI(text).replaceAll("+", " ")
         .split("&")
         .map(part => part.split("="))
         .filter(([, value]) => value !== ""));
-      const {pathname, search} = new URL(`https://1${request.url}`);
+      const {pathname, search} = request.url;
       return this.try(pathname + search, request, response, payload);
     });
   }

package/source/handlers/DOM/Node.js

@@ -2,6 +2,7 @@ import Parser from "./Parser.js";
 
 const replacement_regex = /^\$([0-9]*)$/;
 const data_regex = /\${([^}]*)}/g;
+const attributes_regex = /([-a-z]*="[^"]+")/g;
 const replace = (attribute, source) => {
   if (attribute.includes(".")) {
     const index = attribute.indexOf(".");
@@ -18,16 +19,17 @@ const fulfill = (attribute, source) => {
   if (source === undefined) {
     return undefined;
   }
-  let value;
+  let value = attribute;
   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);
+      if (attribute === key) {
+        return new_value;
+      }
       value = attribute.replace(key, new_value);
     }
-  } else {
-    value = replace(attribute, source);
   }
   return value;
 };
@@ -43,7 +45,8 @@ export default class Node {
     this.#data = data;
     this.attributes = {};
     if (content !== undefined) {
-      const [tag_name, ...attributes] = content.split(" ");
+      const [tag_name] = content.split(" ");
+      const attributes = content.match(attributes_regex) ?? [];
       this.tag_name = tag_name;
       for (const attribute of attributes
         .map(a => a.replaceAll("\"", ""))
@@ -64,11 +67,7 @@ export default class Node {
   }
 
   get data() {
-    if (this.#data !== undefined) {
-      return this.#data;
-    } else {
-      return this.parent?.data;
-    }
+    return this.#data ?? this.parent?.data;
   }
 
   set data(value) {
@@ -119,13 +118,13 @@ export default class Node {
     return tag;
   }
 
-  compose(components) {
+  async 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 Parser.parse(components[this.tag_name], this.attributes)
+        .compose(components);
     }
+    this.children = await Promise.all(this.children.map(child =>
+      child.compose(components)));
     return this;
   }
 
@@ -136,15 +135,15 @@ export default class Node {
       cloned.attributes[attribute] = this.attributes[attribute];
     }
     for (const child of this.children) {
-      child.clone(cloned);
+      child.clone(cloned, child.data !== this.data ? child.data : undefined);
     }
   }
 
   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];
+    if (this.attributes["for"] !== undefined) {
+      const key = this.attributes["for"];
+      delete this.attributes["for"];
+      const value = await fulfill(key, this.data);
       const arr = Array.isArray(value) ? value : [value];
       const newparent = new Node();
       for (const val of arr) {
@@ -154,21 +153,18 @@ export default class Node {
       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;
-          default:
-            this.attributes[attribute.slice(5)] = fulfilled;
-            break;
-        }
-        delete this.attributes[attribute];
+      const fulfilled = fulfill(this.attributes[attribute], this.data);
+      switch(attribute) {
+        case "value":
+          if (this.tag_name === "input") {
+            this.attributes.value = fulfilled;
+          } else {
+            this.text = fulfilled;
+          }
+          break;
+        default:
+          this.attributes[attribute] = fulfilled;
+          break;
       }
     }
     for (let i = 0; i < this.children.length; i++) {
@@ -177,7 +173,7 @@ export default class Node {
     return this;
   }
 
-  unfold(components) {
-    return this.compose(components).expand();
+  async unfold(components) {
+    return (await this.compose(components)).expand();
   }
 }

package/source/handlers/html.js

@@ -16,11 +16,11 @@ if (await File.exists(path)) {
 
 export default async (strings, ...keys) => {
   const awaited_keys = await Promise.all(keys);
-  const rendered = await (await Parser.parse(strings
+  const rendered = await (await (await Parser.parse(strings
     .slice(0, last)
     .map((string, i) => `${string}$${i}`)
     .join("") + strings[strings.length+last], awaited_keys)
-    .unfold(components))
+    .unfold(components)))
     .render();
   const body = (await index(conf)).replace("<body>", () => `<body>${rendered}`);
   const code = 200;

package/debris.json

@@ -1,4 +0,0 @@
-{
-  "suites": "test/suites",
-  "fixtures": "test/fixtures"
-}

package/jsconfig.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "target": "esnext",
-    "module": "esnext"
-  },
-  "exclude": ["node_modules"]
-}

package/source/exports.js

@@ -1,28 +0,0 @@
-import conf from "./conf.js";
-import App from "./App.js";
-
-export {App};
-export {default as Bundler} from "./Bundler.js";
-export {default as EagerPromise, eager} from "./EagerPromise.js" ;
-
-export {default as Domain} from "./domain/Domain.js";
-export {default as Storeable} from "./types/Storeable.js";
-
-export * from "./errors.js";
-export * from "./invariants.js";
-
-export {default as MemoryStore} from "./store/Memory.js";
-export {default as Store} from "./store/Store.js";
-
-export {default as extend_object} from "./extend_object.js";
-export {default as sanitize} from "./sanitize.js";
-
-export {default as html} from "./handlers/html.js";
-export {default as json} from "./handlers/json.js";
-export {default as redirect} from "./handlers/redirect.js";
-
-export {default as router} from "./Router.js";
-
-const app = new App(conf());
-
-export {app};

package/source/preset/static/index.html

@@ -1,8 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>Primate app</title>
-    <meta charset="utf-8" />
-  </head>
-  <body></body>
-</html>