@gramlot/gramlot-examples 0.3.5 → 0.3.6

package/README.md

@@ -12,7 +12,7 @@ npm install @gramlot/gramlot-examples
 [![PyPI](https://img.shields.io/pypi/v/gramlot-examples)](https://pypi.org/project/gramlot-examples/)
 [![npm](https://img.shields.io/npm/v/@gramlot/gramlot-examples)](https://www.npmjs.com/package/@gramlot/gramlot-examples)
 
-Current release: 0.3.5.
+Current release: 0.3.6.
 
 [Documentation and learning sequence](https://gramlot-examples.readthedocs.io/en/latest/)
 include every lesson, its Python and JavaScript source, and the gallery guide.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gramlot/gramlot-examples",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Gramlot example pages, the gallery page and its catalogue.",
   "license": "Apache-2.0",
   "repository": {

package/src/gramlot_examples/gallery/dist/gallery.js

@@ -6879,11 +6879,101 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     element.innerHTML = purifier.sanitize(markdown.parse(element.textContent), { USE_PROFILES: { html: true } });
   }
 
+  // src/gramlot_examples/gallery/browser/gallery-content.js
+  var pending = /* @__PURE__ */ new WeakMap();
+  function mountGalleryContent(renderer, root) {
+    const document2 = renderer.destination.ownerDocument;
+    const byId = (id) => document2.getElementById(id);
+    const node = (element) => renderer.elements.get(element).node;
+    const entries2 = /* @__PURE__ */ new Map();
+    let disposed = false;
+    function format({ key, view }) {
+      if (view === "description") {
+        const readme = byId(`readme-${key}`);
+        readme.textContent = node(readme).value;
+        renderReadme(readme);
+        return;
+      }
+      const code = byId(`code-${key}`);
+      code.textContent = node(code).value;
+      highlightCode(code);
+      const logic = byId(`logic-${key}`);
+      if (logic) {
+        const source = logicSource(node(logic).value);
+        node(byId(`logic-panel-${key}`)).setAttr({ hidden: source === null });
+        logic.textContent = source ?? "";
+        if (source !== null) highlightCode(logic);
+      }
+    }
+    async function load(entry) {
+      if (entry.loading) return;
+      entry.loading = true;
+      const targetId = entry.view === "code" ? `code-tabs-${entry.key}` : entry.element.id;
+      const target = node(byId(targetId));
+      const current = () => {
+        const element = byId(targetId);
+        return element && renderer.elements.get(element)?.node === target ? element : null;
+      };
+      let request = pending.get(target);
+      if (!request) {
+        request = renderer.binding.gramlot.src.remoteSource(target, "lesson", { key: entry.key, view: entry.view });
+        pending.set(target, request);
+      }
+      try {
+        const mounted = await request;
+        if (disposed || !current() || !mounted) return;
+        format(entry);
+        observer.unobserve(entry.element);
+        entries2.delete(entry.element);
+      } catch {
+        if (disposed || !current()) return;
+        const status = current().querySelector('[role="status"]');
+        node(status).setValue("Could not load this content. Close and reopen the panel to retry.");
+      } finally {
+        if (pending.get(target) === request) pending.delete(target);
+        entry.loading = false;
+      }
+    }
+    const observer = new document2.defaultView.IntersectionObserver((records) => {
+      for (const record of records) {
+        const entry = entries2.get(record.target);
+        if (!entry) continue;
+        const visible = record.isIntersecting && record.intersectionRect.width > 0 && record.intersectionRect.height > 0;
+        if (visible && !entry.visible) void load(entry);
+        entry.visible = visible;
+      }
+    });
+    const dispose = () => {
+      disposed = true;
+      observer.disconnect();
+      entries2.clear();
+    };
+    renderer.onDispose(root, dispose);
+    return {
+      observe(key) {
+        for (const [view, id, loaded] of [
+          ["code", `codepane-${key}`, `code-${key}`],
+          ["description", `description-${key}`, `readme-${key}`]
+        ]) {
+          const element = byId(id);
+          const entry = { key, view, element, visible: false, loading: false };
+          if (byId(loaded)) format(entry);
+          else if (!entries2.has(element)) {
+            entries2.set(element, entry);
+            observer.observe(element);
+          }
+        }
+      },
+      dispose
+    };
+  }
+
   // src/gramlot_examples/gallery/browser/gallery.js
   function mountGallery(renderer, root, inspector) {
     const state = root.builder.data.getItem("galleryIndex");
     const settings = mountGallerySettings(renderer, root, state);
     let guide = null;
+    const content = mountGalleryContent(renderer, root);
     const mobile = mountGalleryMobile(renderer, root, inspector, state, (visible) => {
       if (!visible) guide?.pause();
     });
@@ -6891,19 +6981,14 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       inspector.update(entries2, active);
       mobile.update(entries2, active);
       guide?.update(entries2, active);
-    }, (entry, { byId, node, set, listen }) => {
+    }, (entry, { byId }) => {
       const { key } = entry;
       if (key === "l04" && !guide) guide = mountGuidedDemo(renderer, root);
-      renderReadme(byId(`readme-${key}`));
-      if (entry.panel.classList.contains("index-category")) return;
-      highlightCode(byId(`code-${key}`));
-      const logic = byId(`logic-${key}`);
-      if (logic) {
-        const source = logicSource(node(logic).value);
-        set(byId(`logic-panel-${key}`), { hidden: source === null });
-        logic.textContent = source ?? "";
-        if (source !== null) highlightCode(logic);
+      if (entry.panel.classList.contains("index-category")) {
+        renderReadme(byId(`readme-${key}`));
+        return;
       }
+      content.observe(entry.key);
     }, {
       containerLayout: true,
       state,
@@ -6919,20 +7004,22 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           hidden: true,
           class: category ? "index-category" : "gallery-panel"
         });
-        const code = category ? null : source("gallery-code-pages").tabContainer({
+        const code = category ? null : source("gallery-code-pages").div({
           id: `codepane-${entry.key}`,
-          class: "gallery-codepane gallery-source-tabs",
+          class: "gallery-codepane",
           hidden: true,
+          height: "100%"
+        });
+        if (code) code.tabContainer({
+          id: `code-tabs-${entry.key}`,
+          class: "gallery-source-tabs",
           height: "100%",
           tabMode: "underline"
-        });
+        }).contentPane({ title: "Code" }).p("Loading code\u2026", { role: "status" });
         try {
           const runtime = renderer.binding.gramlot;
-          const results = await Promise.all([
-            runtime.src.remoteSource(node(`panel-${entry.key}`), "lesson", { key: entry.key }),
-            ...code ? [runtime.src.remoteSource(node(`codepane-${entry.key}`), "lesson", { key: entry.key, view: "code" })] : []
-          ]);
-          if (results.some((mounted) => !mounted)) throw new Error("Lesson loading was cancelled");
+          const mounted = await runtime.src.remoteSource(node(`panel-${entry.key}`), "lesson", { key: entry.key });
+          if (!mounted) throw new Error("Lesson loading was cancelled");
         } catch (error) {
           for (const target of [pane, code]) if (target?.parentBag) target.parentBag.popNode(target.label);
           throw error;
@@ -6945,6 +7032,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     });
     return { dispose() {
       guide?.dispose();
+      content.dispose();
       settings.dispose();
       index.dispose();
       mobile.dispose();
@@ -7550,11 +7638,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         this.error = error.message;
       }
       if (message.type === "result") {
-        const pending = this.#pending.get(message.id);
-        if (pending) {
+        const pending2 = this.#pending.get(message.id);
+        if (pending2) {
           this.#pending.delete(message.id);
-          if (message.ok && !this.error) pending.resolve(message);
-          else pending.reject(new Error(message.error || this.error));
+          if (message.ok && !this.error) pending2.resolve(message);
+          else pending2.reject(new Error(message.error || this.error));
         }
       }
       this.#notify();
@@ -7611,7 +7699,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       this.#port.removeEventListener("message", this.#receive);
       this.#port.close();
       this.state = "disposed";
-      for (const pending of this.#pending.values()) pending.reject(new Error("Inspected page disconnected"));
+      for (const pending2 of this.#pending.values()) pending2.reject(new Error("Inspected page disconnected"));
       this.#pending.clear();
       this.#notify();
     }
@@ -7690,9 +7778,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     _subscribe() {
       if (this._store) this._store.subscribe(this._subId, { any: () => {
         if (this._pendingRender) return;
-        const pending = this._pendingRender = {};
+        const pending2 = this._pendingRender = {};
         queueMicrotask(() => {
-          if (this._pendingRender === pending && this.isConnected) this._render();
+          if (this._pendingRender === pending2 && this.isConnected) this._render();
         });
       } });
     }

package/src/gramlot_examples/gallery/gallery-page.js

@@ -102,6 +102,7 @@ export class GalleryPage extends IndexPage {
     lesson(root, {key, view = 'example'}) {
         const item = this.galleryItem(key);
         if (view === 'code' && !item.examples) this.codePanel(root, item);
+        else if (view === 'description' && !item.examples) root.div(item.readme, {id: `readme-${key}`});
         else if (view === 'example') {
             if (item.examples) this.groupPanel(root, item);
             else this.panel(root, item);
@@ -124,8 +125,8 @@ export class GalleryPage extends IndexPage {
             guidedDemo(layout);
         }
         stage.iframe({title: `${example.title} preview`, name: `example-${key}`, id: `frame-${key}`});
-        preview.contentPane({title: 'Explanation', pageName: 'explanation', class: 'gallery-lesson', overflow: 'auto'})
-            .div(example.readme, {id: `readme-${key}`});
+        preview.contentPane({title: 'Explanation', pageName: 'explanation', class: 'gallery-lesson', overflow: 'auto', id: `description-${key}`})
+            .p('Loading explanation…', {role: 'status'});
     }
     codePanel(parent, example) {
         const key = example.key;