sol-components 2.2.0 → 2.2.2

package/README.md

@@ -1,5 +1,7 @@
 # Solid Web Components
 
+[![npm](https://img.shields.io/npm/v/sol-components)](https://www.npmjs.com/package/sol-components)
+
 ## This is a Work In Progress!
 
 See the <a href="https://jeff-zucker.github.io/sol-components/">help pages</a> for details.

package/core/from-query.js

@@ -14,6 +14,11 @@
 // row (+ a `sol-select` event on change); anything else → nothing is rendered and
 // the W3C SPARQL 1.1 Query Results JSON is left on `el.swcData` for you to use.
 //
+// When the results land, the host fires a `sol-data-ready` event (bubbles/composed,
+// detail.data = the W3C JSON), so a custom element or page can react on the event
+// instead of reading el.swcData:
+//   el.addEventListener('sol-data-ready', (e) => render(e.detail.data.results.bindings));
+//
 // Config attributes (endpoint, pattern, sparql, query, var-<name>) may be written
 // bare OR `data-`-prefixed (data-endpoint, …, data-var-<name>) to keep the markup
 // spec-valid HTML; bare wins if both are given. `data-from-query` is the trigger.
@@ -118,20 +123,40 @@ function fillSelect(el, vars, rows) {
   }
 }
 
-// The host's tag picks the shape. Unknown tags render nothing — the W3C JSON is
-// left on `el.swcData` for the page to consume.
+// While the query runs, show a loading indicator IN the host, shaped to its tag
+// (a <li> in a list, an <option> in a select, else a <div>). aria-live announces it.
+function setLoading(el) {
+  const tag = el.localName;
+  let node;
+  if (tag === 'ul' || tag === 'ol') node = document.createElement('li');
+  else if (tag === 'select') { node = document.createElement('option'); node.disabled = true; node.selected = true; }
+  else { node = document.createElement('div'); node.setAttribute('role', 'status'); }
+  node.className = 'swc-loading';
+  node.setAttribute('aria-live', 'polite');
+  node.textContent = 'Loading…';
+  el.replaceChildren(node);
+}
+
+// The host's tag picks the shape. Unknown tags render nothing into the DOM — the
+// W3C JSON is left on `el.swcData` for the page to consume. Either way, when the
+// results land we fire a `sol-data-ready` event (detail.data = the W3C JSON) so a
+// custom element / page can react without polling el.swcData.
 function renderInto(el, data) {
   el.swcData = data;
   const vars = data.head.vars;
   const rows = data.results.bindings;
   const tag = el.localName;
-  if (tag === 'ul' || tag === 'ol') return fillList(el, vars, rows);
-  if (tag === 'select')            return fillSelect(el, vars, rows);
-  // anything else: leave the DOM untouched; the JSON is on el.swcData.
+  if (tag === 'ul' || tag === 'ol')   fillList(el, vars, rows);
+  else if (tag === 'select')          fillSelect(el, vars, rows);
+  else                                el.replaceChildren();   // clear the loading indicator
+  el.dispatchEvent(new CustomEvent('sol-data-ready', {
+    bubbles: true, composed: true, detail: { data: data },
+  }));
 }
 
 activate('[data-from-query]', (el) => {
   if (el.localName === 'sol-query') return;            // the element handles itself
+  setLoading(el);
   buildData(el)
     .then((data) => renderInto(el, data))
     .catch((e) => { el.innerHTML = `<div class="error">${(e && e.message) || e}</div>`; console.error('[data-from-query]', e); });

package/dist/sol-loader.manifest.json

@@ -1,6 +1,51 @@
 {
   "name": "sol-components",
-
+  "attributes": {
+    "data-from-query": "sol-components/core/from-query.js",
+    "data-handler": "sol-components/core/handler.js",
+    "data-edit-shape data-from-rdf": "rdf-bundle"
+  },
+  "objects": {
+    "provides": {
+      "store": {
+        "service": "rdf",
+        "sendValue": "store"
+      },
+      "auth": {
+        "service": "auth",
+        "sendValue": "fetch"
+      },
+      "navigation": {
+        "respondTo": "sol-navigate",
+        "sendValue": "detail.url"
+      }
+    },
+    "consumes": {
+      "store": {
+        "call": "rdf.useStore"
+      },
+      "auth": {
+        "call": "adoptFetch"
+      }
+    },
+    "accepts": {
+      "navigation": {
+        "onElement": "sol-query",
+        "applyValueTo": "endpoint"
+      }
+    }
+  },
+  "bundles": {
+    "rdf-bundle": [
+      "solid-logic",
+      "solid-ui",
+      "sol-tree-edit",
+      "sol-form",
+      "sol-settings",
+      "sol-components/core/edit-placements.js",
+      "sol-components/core/from-rdf.js"
+    ]
+  },
   "stages": {
     "local": {
       "components": {
@@ -104,38 +149,5 @@
         "sol-components/": "https://esm.sh/sol-components/web/"
       }
     }
-  },
-
-  "bundles": {
-    "rdf-bundle": [
-      "solid-logic",
-      "solid-ui",
-      "sol-tree-edit",
-      "sol-form",
-      "sol-settings",
-      "sol-components/core/edit-placements.js",
-      "sol-components/core/from-rdf.js"
-    ]
-  },
-
-  "attributes": {
-    "data-from-query": "sol-components/core/from-query.js",
-    "data-handler": "sol-components/core/handler.js",
-    "data-edit-shape data-from-rdf": "rdf-bundle"
-  },
-
-  "objects": {
-    "provides": {
-      "store":      { "service": "rdf",  "sendValue": "store" },
-      "auth":       { "service": "auth", "sendValue": "fetch" },
-      "navigation": { "respondTo": "sol-navigate", "sendValue": "detail.url" }
-    },
-    "consumes": {
-      "store": { "call": "rdf.useStore" },
-      "auth":  { "call": "adoptFetch" }
-    },
-    "accepts": {
-      "navigation": { "onElement": "sol-query", "applyValueTo": "endpoint" }
-    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sol-components",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "Web components and Node.js tools for querying, including, and editing RDF/Linked Data on Solid Pods",
   "type": "module",
   "exports": {