@cloudcrane/app-runtime 0.1.0 → 0.2.0

package/README.md

@@ -12,10 +12,26 @@ const { html, sha256, runtime } = compile(spec);
 ```
 
 - `compile(spec)` returns the page, its sha256 and the runtime it was built
-  with (`@cloudcrane/app-runtime@0.1.0+<hash>`); it throws `CompileError`
+  with (`@cloudcrane/app-runtime@0.2.0+<hash>`); it throws `CompileError`
   listing every problem when the spec doesn't validate.
 - Each runtime version is locked to one bundle hash (`runtime-lock.json`), so a
   version always draws apps the same way.
+- A coded component runs in a frame that's sandboxed (scripts only, so it has
+  no storage and nothing of the page's), in a closed shadow root, reached only
+  through a `MessagePort`. Under CloudCrane's lockdown the lockdown makes the
+  frame (`window.__ccFrame`); elsewhere the runtime makes the same kind. The
+  page drives it: a seed and the inputs, then its clock each frame, paused
+  while hidden. The game kit turns that clock into fixed steps, so a game moves
+  the same way for the same time and seed:
+
+  ```js
+  game.start({ rate: 6, setup() {}, step() {}, draw(g, width, height) {} });
+  game.on("swipe", (dir) => {}); // also "tap" and "input"
+  game.state = { score }; // shown at /ui/coded/<id>/state
+  game.emit("over", { score }); // the screen's action for "over" runs
+  game.random(); // seeded by the page
+  ```
+
 - `@cloudcrane/app-runtime/host`: what a host publishing spec apps needs in one
   import (validate, compile, derive the blueprint).
 

package/dist/compiler/compile.js

@@ -1,6 +1,6 @@
 import { createHash } from "node:crypto";
 import { canonical, validateSpec } from "@cloudcrane/app-spec";
-import { DATESTRIP_CSS } from "../runtime/styles.js";
+import { CODED_CSS, DATESTRIP_CSS } from "../runtime/styles.js";
 import { tokensCss } from "../runtime/theme.js";
 import { RUNTIME_JS, RUNTIME_SHA256, RUNTIME_VERSION } from "./runtime.generated.js";
 // The compiler: a spec in, one HTML page out, the same bytes every time for the
@@ -30,8 +30,10 @@ export function compile(input) {
     if (spec.manifest.runtime !== RUNTIME_VERSION)
         throw new CompileError([{ at: "manifest.runtime", problem: `this compiler builds runtime ${RUNTIME_VERSION}` }]);
     // Only what drawing the app needs goes in the page: not the journeys, promises or tests.
+    // Coded components go in only when there are some.
     const inPage = {
         module: spec.module,
+        ...(Object.keys(spec.components).length ? { components: spec.components } : {}),
         data: spec.data,
         logic: spec.logic,
         surface: spec.surface,
@@ -41,7 +43,7 @@ export function compile(input) {
         '<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">' +
         `<meta name="cc-runtime" content="${RUNTIME_VERSION}">` +
         `<title>${escapeHtml(spec.module.name)}</title>` +
-        `<style>${tokensCss(spec.tokens)}${BASE_CSS}${DATESTRIP_CSS}</style>` +
+        `<style>${tokensCss(spec.tokens)}${BASE_CSS}${DATESTRIP_CSS}${CODED_CSS}</style>` +
         '</head><body><main id="app"></main>' +
         `<script type="application/json" id="cc-spec">${scriptSafe(canonical(inPage))}</script>` +
         `<script type="module">${RUNTIME_JS}</script>` +