It's currently impossible to nest components, i.e.

import {router, html} from "primate";

router.get("/", html`<parent-component />`);

<!-- in parent-component -->
<child-component />

Doesn't expand <child-component>.

Additionally, there is the issue of passing fixed strings vs. values to child components. In JS this is not a problem, as we use template literals. But in HTML there is no distinction between strings and values.

A possible solution is to adhere to data attributes and use them to pass data, and otherwise treat everything as literal, e.g.

import {router, html} from "primate";

router.get("/", html`<parent-component user=${{"name": "Donald"}} />`);

<!-- in parent-component -->
<child-component label="user" data-user="user" />

<!-- in child-component -->
<span data-value="label"></span>
<span data-value="user"></span>

This, however, might seem inconsistent with the JS side and would result in conflicts if the data attribute and the normal attribute are called the same.

An alternative would be to force using template literals for actual data, and treat everything else as text in components.

<!-- in parent-component -->
<child-component label="user" user="${user}" />

<!-- in child-component -->
<span data-value="label"></span>
<span data-value="user"></span>

This raises the question whether enforcing the template literal syntax should be limited to component tags or to all HTML code within components, to reach uniformity at the cost of being more verbose.

SSR web components should support slots.

Parent component:

<child-component attribute="${value"}>
  <div>Some content</div>   
</child-component>

Child component:

<h1>Child component</h1>
<slot />
<div>More content</div>

Currently, it is possible to access the parts of a pathname via the request.path array:

router.get(`/namespace/action/([a-z0-9]*)`, request => {
   const [,, _id] = request.path;
});

It would be more convenient to populate request.path with the results of matching named capture groups, such as that the name of the capture group is available as a property on request.path.

router.get(`/namespace/action/(?<_id>[a-z0-9]*)`, request => {
   // still works
   const [,, _id] = request.path;
   // but also available as
   const {"_id": also_id} = request.path;
});

It could be desirable to provide a short-syntax variant in routes by returning an object instead of a handler call. Such cases should be identified automatically.

Right now in order to return JSON you need to explicitly use the json handler.

router.get("/", () => json`${{foo: "bar"}} />`);

It's more straightforward to simply return the object and have Primate guess a handler.

router.get("/", () => ({foo: "bar"}) />`);

Cases to consider (assuming obj) and appropriate handlers

• isJSONSerializeable(obj) -> json
• Object.getPrototypeOf(obj) === ReadableStream.prototype -> stream

To consider:

• Should be there a default? E.g. text/plain
• Or should there be any error thrown if no appropriate handler can be found