frontend: expose request prop

packages/frontend/package.json

@@ -25,10 +25,10 @@
     "react-dom": "^18.2.0",
     "solid-js": "^1.8.3",
     "svelte": "^4.2.2",
-    "vue": "^3.3.4"
+    "vue": "^3.3.6"
   },
   "dependencies": {
-    "runtime-compat": "^0.32.2"
+    "runtime-compat": "^0.32.3"
   },
   "peerDependencies": {
     "@babel/core": "7",

packages/frontend/src/frontends/common/handler.js

@@ -1,5 +1,6 @@
 import { Response, Status, MediaType } from "runtime-compat/http";
 import { map } from "runtime-compat/async";
+import { valmap, filter } from "runtime-compat/object";
 import register from "./register.js";
 
 export default config => {
@@ -24,9 +25,17 @@ export default config => {
       const data = components.map(component => component.props);
       const names = await get_names(components);
 
+      const $request = {
+        request: {
+          ...valmap(filter(request, ([, { get }]) =>
+            get !== undefined), o => o.get()),
+          url: request.url,
+        },
+      };
+
       if (options.liveview &&
         request.headers.get(app.liveview?.header) !== undefined) {
-        return new Response(JSON.stringify({ names, data }), {
+        return new Response(JSON.stringify({ names, data, ...$request }), {
           status,
           headers: { ...await app.headers(),
             "Content-Type": MediaType.APPLICATION_JSON },
@@ -37,9 +46,10 @@ export default config => {
       const { body, head } = render(imported, {
         components: components.map(({ component }) => component),
         data,
+        ...$request,
       });
 
-      const code = client({ names, data }, options);
+      const code = client({ names, data, ...$request }, options);
       const inlined = await app.inline(code, "module");
 
       const headers = app.headers({ script: inlined.csp });

packages/frontend/src/frontends/common/load.js

@@ -13,8 +13,8 @@ const ErrorInComponent = (name, path, error) => {
   console.log(error);
   errors.ErrorInComponent.throw(name, path);
 };
-const get_error = ({ code, url }, path) =>
-  in_component(code, new Path(url), new Path(path))
+const get_error = (error, path) =>
+  in_component(error.code, new Path(error.url), new Path(path))
     ? MissingComponent
     : ErrorInComponent;
 

packages/frontend/src/frontends/react/client/create-root.js

@@ -2,16 +2,16 @@ export default length => {
   const n = length - 1;
   const body = Array.from({ length: n }, (_, i) => i - 1)
     .reduceRight((child, _, i) => `components[${i + 1}] !== undefined
-        ? createElement(components[${i}], {...data[${i}]}, ${child})
-        : createElement(components[${i}], {...data[${i}]})
-    `, `createElement(components[${n}], {...data[${n}]})`);
+        ? createElement(components[${i}], {request, ...data[${i}]}, ${child})
+        : createElement(components[${i}], {request, ...data[${i}]})
+    `, `createElement(components[${n}], {request, ...data[${n}]})`);
 
   return `
     import {createElement} from "react";
     import {HeadContext, is} from "@primate/frontend/react";
     const {Provider} = HeadContext;
 
-    export default ({components, data, push_heads: value}) =>
+    export default ({components, data, request, push_heads: value}) =>
       is.client ? ${body} : createElement(Provider, {value}, ${body});
   `;
 };

packages/frontend/src/frontends/react/client/default.js

@@ -1,7 +1,7 @@
 import rootname from "./rootname.js";
 import liveview from "./liveview.js";
 
-export default ({ names, data }, options) => `
+export default ({ names, data, request }, options) => `
   import * as components from "app";
   import {hydrateRoot, createElement, ReactHead} from "app";
 
@@ -10,6 +10,10 @@ export default ({ names, data }, options) => `
     createElement(components.${rootname}, {
       components: [${names.map(name => `components.${name}`).join(", ")}],
       data: JSON.parse(${JSON.stringify(JSON.stringify(data))}),
+      request: {
+        ...JSON.parse(${JSON.stringify(JSON.stringify(request))}),
+        url: new URL(location.href),
+      },
     })
   );
   ${options.liveview ? liveview : ""}`;

packages/frontend/src/frontends/react/client/liveview.js

@@ -7,6 +7,10 @@ window.addEventListener("DOMContentLoaded", _ => liveview((props, update) => {
     createElement(components.${rootname}, {
       components: props.names.map(name => components[name]),
       data: props.data,
+      request: {
+        ...props.request,
+        url: new URL(location.href),
+      },
     })
   );
 }));`;

packages/frontend/src/frontends/solid/client/create-root.js

@@ -2,17 +2,18 @@ export default length => {
   const n = length - 1;
   const body = Array.from({ length: n }, (_, i) => i - 1)
     .reduceRight((child, _, i) => `components[${i + 1}] !== undefined
-        ? createComponent(components[${i}], {...data[${i}], children: ${child}})
-        : createComponent(components[${i}], {...data[${i}]})
-    `, `createComponent(components[${n}], {...data[${n}]})`);
+        ? createComponent(components[${i}], {request, ...data[${i}], 
+            children: ${child}})
+        : createComponent(components[${i}], {request, ...data[${i}]})
+    `, `createComponent(components[${n}], {request, ...data[${n}]})`);
 
   return `
     import {createComponent} from "solid-js/web";
     import {HeadContext, is} from "@primate/frontend/solid";
 
     const Provider = HeadContext.Provider;
 
-    export default ({components, data, push_heads: value}) =>
+    export default ({components, data, request, push_heads: value}) =>
       is.client ? ${body} : <Provider value={value}>{${body}}</Provider>;
   `;
 };

packages/frontend/src/frontends/solid/client/default.js

@@ -5,7 +5,7 @@ import liveview from "./liveview.js";
 const { groups: { code: hydration_script } } = generateHydrationScript()
   .match(/^<script>(?<code>.*?)<\/script>/u);
 
-export default ({ names, data }, options) => `
+export default ({ names, data, request }, options) => `
   import * as components from "app";
   import {hydrate_solid, render_solid, SolidHead} from "app";
 
@@ -17,5 +17,9 @@ export default ({ names, data }, options) => `
   let dispose = hydrate_solid(() => components.${rootname}({
       components: [${names.map(name => `components.${name}`).join(", ")}],
       data: JSON.parse(${JSON.stringify(JSON.stringify(data))}),
+      request: {
+        ...JSON.parse(${JSON.stringify(JSON.stringify(request))}),
+        url: new URL(location.href),
+      },
     }), globalThis.window.document.body);
   ${options.liveview ? liveview : ""}`;

packages/frontend/src/frontends/solid/client/liveview.js

@@ -7,5 +7,9 @@ window.addEventListener("DOMContentLoaded", _ => liveview((props, update) => {
   dispose = render_solid(() => components.${rootname}({
     components: props.names.map(name => components[name]),
     data: props.data,
+    request: {
+      ...props.request,
+      url: new URL(location.href),
+    },
   }), globalThis.window.document.body);
 }));`;

packages/frontend/src/frontends/svelte/client/create-root.js

@@ -3,19 +3,21 @@ export default length => {
   const body = Array.from({ length: n }, (_, i) => i - 1)
     .reduceRight((child, _, i) => `
       {#if components[${i + 1}]}
-        <svelte:component this={components[${i}]} {...data[${i}]}>
+        <svelte:component this={components[${i}]} {request} {...data[${i}]}>
           ${child}
         </svelte:component>
       {:else}
-        <svelte:component this={components[${i}]} {...data[${i}]} />
+        <svelte:component this={components[${i}]} {request} {...data[${i}]}/>
       {/if}
-    `, `<svelte:component this={components[${n}]} {...data[${n}]} />`);
+    `, `<svelte:component this={components[${n}]} {request} {...data[${n}]}/>`);
 
   return `
     <script>
       import {afterUpdate} from "svelte";
+
       export let components;
       export let data;
+      export let request;
       export let update = () => undefined;
 
       afterUpdate(update);

packages/frontend/src/frontends/svelte/client/default.js

@@ -1,14 +1,18 @@
 import rootname from "./rootname.js";
 import liveview from "./liveview.js";
 
-export default ({ names, data }, options) => `
+export default ({ names, data, request }, options) => `
   import * as components from "app";
   let root = new components.${rootname}({
     target: document.body,
     hydrate: true,
     props: {
       components: [${names.map(name => `components.${name}`).join(", ")}],
       data: JSON.parse(${JSON.stringify(JSON.stringify(data))}),
+      request: {
+        ...JSON.parse(${JSON.stringify(JSON.stringify(request))}),
+        url: new URL(location.href),
+      },
     },
   });
   ${options.liveview ? liveview : ""}`;

packages/frontend/src/frontends/svelte/client/exports.js

@@ -1,3 +1,4 @@
 export { default } from "./default.js";
+export { default as expose } from "./expose.js";
 export { default as create_root } from "./create-root.js";
 export { default as rootname } from "./rootname.js";

packages/frontend/src/frontends/svelte/client/expose.js

@@ -0,0 +1,3 @@
+export default `
+  export {setContext} from "svelte";
+`;

packages/frontend/src/frontends/svelte/client/liveview.js

@@ -10,6 +10,10 @@ window.addEventListener("DOMContentLoaded", _ => liveview((props, update) => {
     props: {
       components: props.names.map(name => components[name]),
       data: props.data,
+      request: {
+        ...props.request,
+        url: new URL(location.href),
+      },
       update,
     },
   });

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

@@ -1,4 +1,5 @@
 import * as compiler from "svelte/compiler";
+import { expose } from "./client/exports.js";
 
 export const render = (component, ...args) => {
   const { html, head } = component.render(...args);
@@ -7,6 +8,8 @@ export const render = (component, ...args) => {
 
 export const prepare = async app => {
   await app.import("svelte");
+  // expose code through "app", for bundlers
+  await app.export({ type: "script", code: expose });
 };
 
 export const compile = {