iframe view generation (#150)

* Working (if janky) view generation example
* expose value proxies on simple cells
* use proxy to read data + related changes
* accept data as input, add a default
* fix getAsProxy to point to the right subpath
* New feature "$<prop>" will pass raw cell to element
* refactored this a bit and now directly uses the cell
* use new $data feature
* Fix port when launching views
* MVP subscription to a cell
* Cleanup and document confusion
* expose scheduler on the module
* allow setting a log on getAsProxy on simple cells
* use read logs and scheduler for updates
* change default example to counter
* standardize on `value` on the wire protocol (before it was a mix of `data` and `value`)

---------

Co-authored-by: Bernhard Seefeld <berni@common.tools>

Author: bfollington

typescript/packages/collectathon/view.ts

@@ -40,7 +40,7 @@ export async function handleViewCommandInteractive(collection: string, initialPr
       [viewId, collection, html]
     );
 
-    const url = `http://localhost:8000/view/${collection}/${viewId}`;
+    const url = `http://localhost:8001/view/${collection}/${viewId}`;
     console.log(`Opening view in browser: ${url}`);
     await open(url);
 

typescript/packages/common-html/src/render.ts

@@ -143,6 +143,7 @@ const bindProps = (
   context: Context
 ): Cancel => {
   const [cancel, addCancel] = useCancelGroup();
+  console.log("binding props", element.tagName, props);
   for (const [propKey, propValue] of Object.entries(props)) {
     if (isBinding(propValue)) {
       const replacement = getContext(context, propValue.path);
@@ -163,6 +164,10 @@ const bindProps = (
         } else {
           logger.warn("Could not bind event", propKey, propValue);
         }
+      } else if (propKey.startsWith("$")) {
+        console.log("binding context directly", propKey);
+        const key = propKey.slice(1);
+        setProp(element, key, replacement);
       } else {
         const cancel = effect(replacement, (replacement) => {
           // Replacements are set as properties not attributes to avoid

typescript/packages/common-runner/src/cell.ts

@@ -36,6 +36,7 @@ export interface Cell<T> {
   send(value: T): void;
   sink(callback: (value: T) => void): () => void;
   key<K extends keyof T>(valueKey: K): Cell<T[K]>;
+  getAsProxy(path?: PropertyKey[], log?: ReactivityLog): CellProxy<T>;
 }
 
 export interface ReactiveCell<T> {
@@ -185,6 +186,8 @@ function simpleCell<T>(
         },
         key: <K extends keyof T>(key: K) =>
           cell.asSimpleCell([...path, key], log) as Cell<T[K]>,
+        getAsProxy: (subPath: PropertyKey[] = [], newLog?: ReactivityLog) =>
+          createValueProxy(cell, [...path, ...subPath], newLog ?? log),
       };
   return self;
 }

typescript/packages/common-runner/src/index.ts

@@ -1,4 +1,9 @@
 export { run, charmById } from "./runner.js";
+export {
+  run as addAction,
+  unschedule as removeAction,
+  type Action,
+} from "./scheduler.js";
 export type {
   Cell,
   ReactiveCell,

typescript/packages/lookslike-high-level/src/components/iframe-view.ts

@@ -0,0 +1,101 @@
+import { LitElement, html } from "lit-element";
+import { customElement, property } from "lit/decorators.js";
+import {
+  Cell,
+  addAction,
+  removeAction,
+  type Action,
+  type ReactivityLog,
+} from "@commontools/common-runner";
+import { Ref, createRef, ref } from "lit/directives/ref.js";
+
+@customElement("common-iframe")
+export class CommonIframe extends LitElement {
+  @property({ type: String }) src = "";
+  // HACK: The UI framework already translates the top level cell into updated
+  // properties, but we want to only have to deal with one type of listening, so
+  // we'll add a an extra level of indirection with the "context" property.
+  @property({ type: Object }) context?: Cell<any> | any;
+
+  private iframeRef: Ref<HTMLIFrameElement> = createRef();
+
+  private subscriptions: Map<string, Action[]> = new Map();
+
+  private handleMessage = (event: MessageEvent) => {
+    console.log("Received message", event);
+    if (event.source === this.iframeRef.value?.contentWindow) {
+      const { type, key, value } = event.data;
+      if (typeof key !== "string") {
+        console.error("Invalid key type. Expected string.");
+        return;
+      }
+      if (type === "read" && this.context) {
+        const value = this.context?.getAsProxy
+          ? this.context?.getAsProxy([key])
+          : this.context?.[key];
+        // TODO: This might cause infinite loops, since the data can be a graph.
+        const copy =
+          value !== undefined ? JSON.parse(JSON.stringify(value)) : undefined;
+        console.log("readResponse", key, value);
+        this.iframeRef.value?.contentWindow?.postMessage(
+          { type: "readResponse", key, value: copy },
+          "*"
+        );
+      } else if (type === "write" && this.context) {
+        this.context.getAsProxy()[key] = value;
+      } else if (type === "subscribe" && this.context) {
+        console.log("subscribing", key, this.context);
+
+        const action: Action = (log: ReactivityLog) =>
+          this.notifySubscribers(key, this.context.getAsProxy([key], log));
+
+        addAction(action);
+        if (!this.subscriptions.has(key)) this.subscriptions.set(key, [action]);
+        else this.subscriptions.get(key)!.push(action);
+      } else if (type === "unsubscribe" && this.context) {
+        if (this.subscriptions && this.subscriptions.has(key)) {
+          const actions = this.subscriptions.get(key);
+          if (actions && actions.length) removeAction(actions.pop()!);
+        }
+      }
+    }
+  };
+
+  private notifySubscribers(key: string, value: any) {
+    console.log("notifySubscribers", key, value);
+    // TODO: This might cause infinite loops, since the data can be a graph.
+    const copy =
+      value !== undefined ? JSON.parse(JSON.stringify(value)) : undefined;
+    this.iframeRef.value?.contentWindow?.postMessage(
+      { type: "update", key, value: copy },
+      "*"
+    );
+  }
+  private boundHandleMessage = this.handleMessage.bind(this);
+
+  override connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("message", this.boundHandleMessage);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("message", this.boundHandleMessage);
+  }
+
+  override render() {
+    return html`
+      <iframe
+        ${ref(this.iframeRef)}
+        sandbox="allow-scripts"
+        .srcdoc=${this.src}
+        height="512px"
+        width="100%"
+        @load=${this.iframeRef.value?.contentWindow?.postMessage(
+          { type: "init" },
+          "*"
+        )}
+      ></iframe>
+    `;
+  }
+}

typescript/packages/lookslike-high-level/src/components/index.ts

@@ -2,3 +2,4 @@ export * as CommonAnnotation from "./annotation.js";
 export * as CommonRecipeLink from "./recipe-link.js";
 export * as CommonCharmLink from "./charm-link.js";
 export * as CommonWindowManager from "./window-manager.js";
+export * as CommonIframe from "./iframe-view.js";

typescript/packages/lookslike-high-level/src/data.ts

@@ -25,6 +25,7 @@ import {
   isCellProxyForDereferencing,
 } from "@commontools/common-runner";
 import { fetchCollections } from "./recipes/fetchCollections.js";
+import { iframeExample } from "./recipes/iframeExample.js";
 
 export type Charm = {
   [ID]: number;
@@ -56,6 +57,8 @@ export function addCharms(newCharms: CellImpl<any>[]) {
 }
 
 addCharms([
+  run(iframeExample, { }),
+  run(iframeExample, { prompt: "playable breakout/arkanoid, use `score` to write score, click to start, reset score at start", data: { score: 0, counter: 0 } }),
   run(fetchExample, {
     url: "https://anotherjesse-restfuljsonblobapi.web.val.run/items",
   }),

typescript/packages/lookslike-high-level/src/recipes/iframeExample.ts

@@ -0,0 +1,140 @@
+import { html } from "@commontools/common-html";
+import {
+  recipe,
+  UI,
+  NAME,
+  lift,
+  generateData,
+  handler,
+  cell,
+} from "@commontools/common-builder";
+
+const formatData = lift(({ obj }) => {
+  console.log("stringify", obj);
+  return JSON.stringify(obj, null, 2);
+});
+
+const tap = lift((x) => {
+  console.log(x);
+  return x;
+});
+
+const updateValue = handler<{ detail: { value: string } }, { value: string }>(
+  ({ detail }, state) => detail?.value && (state.value = detail.value)
+);
+
+const generate = handler<void, { prompt: string; query: string }>(
+  (_, state) => {
+    state.query = state.prompt;
+    console.log("generarting", state.query);
+  }
+);
+
+const randomize = handler<void, { data: Record<string, any> }>((_, state) => {
+  for (const key in state.data) {
+    if (typeof state.data[key] === "number") {
+      state.data[key] = Math.round(Math.random() * 100); // Generates a random number between 0 and 100
+    }
+  }
+});
+
+const maybeHTML = lift(({ result }) => result?.html ?? "");
+
+const viewSystemPrompt = `generate a complete HTML document within a json block , e.g.
+  \`\`\`json
+  { html: "..."}
+  \`\`\`
+
+  This must be plain JSON.
+
+  the document can and should make use of postMessage to read and write data from the host context. e.g.
+
+  document.addEventListener('DOMContentLoaded', function() {
+    console.log('Initialized!');
+
+    window.parent.postMessage({
+        type: 'subscribe',
+        key: 'exampleKey'
+      }, '*');
+
+    window.addEventListener('message', function(event) {
+      if (event.data.type === 'readResponse') {
+        // use response
+        console.log('readResponse', event.data.key,event.data.value);
+      } else if (event.data.type === 'update') {
+      ...
+    });
+  });
+
+
+
+
+  window.parent.postMessage({
+    type: 'read',
+    key: 'exampleKey'
+  }, '*');
+
+  window.parent.postMessage({
+    type: 'write',
+    key: 'exampleKey',
+    value: 'Example data to write'
+  }, '*');
+
+  You can also subscribe and unsubscribe to changes from the keys:
+
+  window.parent.postMessage({
+    type: 'subscribe',
+    key: 'exampleKey'
+  }, '*');
+
+  You receive 'update' messages with a 'key' and 'value' field.
+
+  window.parent.postMessage({
+    type: 'unsubscribe',
+    key: 'exampleKey',
+  }, '*');`;
+
+export const iframeExample = recipe<{ prompt: string; data: any }>(
+  "iFrame Example",
+  ({ prompt, data }) => {
+    tap({ data });
+    prompt.setDefault(
+      "counter example using write and subscribe with key `counter`"
+    );
+    data.setDefault({ message: "hello", counter: 0 });
+
+    const query = cell<string>();
+    const response = generateData<{ html: string }>({
+      prompt: query,
+      system: viewSystemPrompt,
+    });
+    tap({ response });
+    tap({ result: response.result });
+
+    return {
+      [NAME]: "iFrame Example",
+      [UI]: html`<div>
+        <pre>${formatData({ obj: data })}</pre>
+        <common-input
+          value=${prompt}
+          placeholder="Prompt"
+          oncommon-input=${updateValue({ value: prompt })}
+        ></common-input>
+        <common-button onclick=${randomize({ data })}
+          >Randomize Values</common-button
+        >
+        <common-button onclick=${generate({ prompt, query })}
+          >Generate</common-button
+        >
+
+        <common-iframe
+          src=${maybeHTML({ result: response.result })}
+          $context=${data}
+        ></common-iframe>
+        <pre>${maybeHTML({ result: response.result })}</pre>
+      </div>`,
+      response,
+      data,
+    };
+  }
+);