@kupcad/playground 0.1.0 → 0.1.2

package/README.md

@@ -22,6 +22,10 @@ the PWA) embeds; it keeps nothing of the page's.
   is called with the script at each of the person's edits (not with the `source` it was given),
   and an `actions` snippet puts the host's own buttons in the model's toolbar, after Export
   (`.kc-control` gives them its look). It keeps no draft: a page loaded again shows `source`.
+* **For a host that gives it other scripts** (examples to choose from): `load(script)` (the
+  component's, by `bind:this`) puts one in the editor in place of the person's, which the
+  editor's undo takes back, and runs it at once on its own values; the core, the console and the
+  layout stay as they are.
 * **When it runs** (`runner.js`, `Runner`): once the script stays as it is for a moment after an
   edit (`DELAY_MS`, 300), at once when a parameter's value changes or it starts. A run under
   way when the next starts is stopped (the worker drops or ends its call), so what is shown is
@@ -74,8 +78,8 @@ pnpm test:browser   # the smoke test: the page built, in headless Chromium
 
 The runner's timing against a stand-in for the core, the marks, the downloads, and the component
 on the real core (`@kupcad/wasm`'s `testCore`) under jsdom: the model shown, the findings and the
-run's error marked, a problem clicked revealing its line, an edit and a value running again, an
-export downloaded and one refused. In a browser, with the real worker, the smoke test
+run's error marked, a problem clicked revealing its line, an edit and a value running again, a
+script loaded in place of the one shown, an export downloaded and one refused. In a browser, with the real worker, the smoke test
 (`smoke/playground.spec.js`): the page built (`vite build`, the worker an ES module as a site's
 build makes it) and served, the example run to Ready, its parts and parameters shown, `param`
 highlighted as a function, and a script that raises saying so.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/playground",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "KupCAD in the browser: a script's editor, its model and its parameters, running on the core compiled to WebAssembly in a worker. One Svelte component a page embeds.",
   "license": "AGPL-3.0-only",
   "repository": {
@@ -24,10 +24,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@kupcad/editor": "0.1.0",
-    "@kupcad/protocol": "0.1.0",
-    "@kupcad/ui": "0.1.0",
-    "@kupcad/wasm": "0.1.0"
+    "@kupcad/editor": "0.1.2",
+    "@kupcad/protocol": "0.1.2",
+    "@kupcad/ui": "0.1.2",
+    "@kupcad/wasm": "0.1.2"
   },
   "devDependencies": {
     "@codemirror/lint": "^6.9.7",

package/src/Playground.svelte

@@ -9,9 +9,9 @@
   bars between the panes resize them, and the toolbar's Parameters button hides theirs (for the
   model's width); the sizes, what is hidden or folded, and how the view looks are kept in
   `settings` (the page's localStorage by default), and follow them as they are set. It keeps
-  nothing else of the page's: the page gives the script it starts with (`source`), and is told
-  of each edit of it (`onsource`), for its own buttons in the toolbar (`actions`) to share or
-  save it.
+  nothing else of the page's: the page gives the script it starts with (`source`) and another
+  in its place (`load`), and is told of each edit of it (`onsource`), for its own buttons in the
+  toolbar (`actions`) to share or save it.
 -->
 <script>
   import { onMount, untrack } from 'svelte';
@@ -102,8 +102,10 @@
   /** The playground's width, once laid out. */
   let width = $state(0);
 
-  /** The script as the editor has it: the user's, from the one the page gave at first. */
+  /** The script as the editor has it: the user's, from the one the page gave last. */
   let value = $state(untrack(() => source));
+  /** How many scripts the page loaded: the parameters' fields are made again for each. */
+  let loads = $state(0);
   let editor = $state(/** @type {EditorClass | null} */ (null));
   /** `check`'s findings of the script as it is, none while it changed since. */
   let findings = $state(/** @type {Finding[]} */ ([]));
@@ -149,6 +151,19 @@
     };
   });
 
+  /**
+   * Puts `script` in the editor in place of the one there (the editor's undo takes that back),
+   * and runs it at once on its own values: none the panel set for the last.
+   * @param {string} script another the page gives: an example, a script it opened
+   */
+  export function load(script) {
+    value = script;
+    findings = [];
+    overrides = {};
+    loads += 1;
+    runner?.run(script, {}, { now: true });
+  }
+
   /** @param {string} line of the core's log, which goes to the console */
   function log(line) {
     consoleLines = appendLines(consoleLines, linesOfLog(line));
@@ -270,13 +285,16 @@
     {/if}
     <!-- Hidden, not gone: what its fields hold stays, and the toggle has it to control -->
     <aside class="params" id="{id}-params" aria-label="Parameters" hidden={!paramsOpen}>
-      <ParamsPanel
-        schema={header.params.schema}
-        values={header.params.values}
-        error={header.error}
-        bind:overrides
-        onchange={valuesChanged}
-      />
+      <!-- Made again for each script loaded: no field keeps what was typed in the last's -->
+      {#key loads}
+        <ParamsPanel
+          schema={header.params.schema}
+          values={header.params.values}
+          error={header.error}
+          bind:overrides
+          onchange={valuesChanged}
+        />
+      {/key}
     </aside>
   {/if}
 </div>