primate 0.7.4 → 0.8.0

package/README.md

@@ -1,8 +1,7 @@
-# Primate, a cross-runtime framework
+# Primate 
 
-Primate is a full-stack cross-runtime Javascript framework (Node.js and Deno).
-It 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
 
@@ -34,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
@@ -110,8 +109,6 @@ permissions.
 * [Routes](#routes)
 * [Handlers](#handlers)
 * [Components](#components)
-* [Domains](#domains)
-* [Verification](#verification)
 
 ## Routes
 
@@ -195,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}" />`
 });
 ```
 
@@ -209,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
@@ -226,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
@@ -243,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}" />`
 });
 ```
 
@@ -259,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>
@@ -288,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
@@ -299,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primate",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "author": "Primate core team <core@primatejs.com>",
   "homepage": "https://primatejs.com",
   "bugs": "https://github.com/primatejs/primate/issues",
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "debris": "^0.2.2",
-    "eslint": "^8.13.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-json": "^3.1.0",
     "nyc": "^15.1.0"
   },

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/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"]
-}