add initial marko support

packages/frontend/package.json

@@ -36,6 +36,8 @@
     "@angular/platform-server": "17",
     "@angular/ssr": "17",
     "@babel/core": "7",
+    "@marko/compiler": "5",
+    "@marko/translator-default": "5",
     "babel-preset-solid": "1",
     "esbuild": "0.20",
     "handlebars": "4",
@@ -67,6 +69,12 @@
     "@babel/core": {
       "optional": true
     },
+    "@marko/compiler": {
+      "optional": true
+    },
+    "@marko/translator-default": {
+      "optional": true
+    },
     "babel-preset-solid": {
       "optional": true
     },

packages/frontend/src/frontends/exports.js

@@ -7,3 +7,4 @@ export { default as svelte } from "./svelte/module.js";
 export { default as vue } from "./vue/module.js";
 export { default as angular } from "./angular/module.js";
 export { default as handlebars } from "./handlebars/module.js";
+export { default as marko } from "./marko/module.js";

packages/frontend/src/frontends/marko/imports.js

@@ -0,0 +1,9 @@
+import * as compiler from "@marko/compiler";
+
+export const compile = {
+  async server(text, { path }) {
+    return (await compiler.compile(text, path)).code;
+  },
+};
+
+export const render = (component, props) => component.renderToString(props);

packages/frontend/src/frontends/marko/module.js

@@ -0,0 +1,56 @@
+import { filter } from "rcompat/object";
+import { compile, peers, load } from "../common/exports.js";
+import depend from "../depend.js";
+
+const handler = ({ directory, render }) => (name, props = {}, options = {}) =>
+  async app => {
+    const components = app.runpath(app.config.location.server, directory);
+
+    const { default : component } = await load(components.join(name));
+
+    return app.view({ body: render(component, props), ...options });
+  };
+
+const name = "marko";
+const dependencies = ["@marko/compiler", "@marko/translator-default"];
+const default_extension = ".marko";
+const on = filter(peers, ([key]) => dependencies.includes(key));
+
+export default ({ extension = default_extension } = {}) => {
+  const rootname = name;
+  let imports = {};
+
+  return {
+    name: `primate:${name}`,
+    async init(app, next) {
+      await depend(on, `frontend:${name}`);
+
+      imports = await import("./imports.js");
+
+      return next(app);
+    },
+    async register(app, next) {
+      const { config } = app;
+
+      app.register(extension, {
+        handle: handler({
+          directory: config.location.components,
+          render: imports.render,
+        }),
+        compile: {
+          ...await compile({
+            app,
+            extension,
+            rootname,
+            compile: imports.compile,
+          }),
+          // no support for hydration
+          client: _ => _,
+        },
+      });
+
+      return next(app);
+    },
+  };
+};
+