sol-components 2.1.0 → 2.2.1

package/README.md

@@ -1,7 +1,9 @@
 # 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://solidos.github.io/sol-components/">help pages</a> for details.
+See the <a href="https://jeff-zucker.github.io/sol-components/">help pages</a> for details.
 
 (c) 2023-2026, Jeff Zucker, may be freely distributed under an MIT or Apache license.

package/core/from-query.js

@@ -118,8 +118,22 @@ 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.
 function renderInto(el, data) {
   el.swcData = data;
   const vars = data.head.vars;
@@ -127,11 +141,12 @@ function renderInto(el, data) {
   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.
+  el.replaceChildren();   // clear the loading indicator; the JSON is on el.swcData
 }
 
 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/core/handler.js

@@ -0,0 +1,88 @@
+// handler.js — the `handler` capability (part of component-interop).
+//
+// Lets ANY element (a library's own button/menu, a plain link) activate a
+// component or a script, with NO display logic in component-interop: ci catches
+// the activation, optionally instantiates a named component, forwards the
+// element's data, and fires ONE event — the consuming app decides what happens
+// and where any result goes.
+//
+//   <a data-handler="my-viewer" href="report.ttl" data-mode="compact">Open</a>   <!-- component -->
+//   <button data-handler="exportCsv" data-format="utf8">Export</button>          <!-- script -->
+//
+//   document.addEventListener('interop:activate', (e) => {
+//     const { handler, element, data, source } = e.detail;
+//     if (element) source.closest('.pane').querySelector('.output').replaceChildren(element);
+//     else if (handler === 'exportCsv') exportTheTable(data);
+//   });
+//
+// Zero imports. Activation is delegated at the document level, so dynamically
+// added elements and shadow-DOM buttons (composed events) work with no setup.
+
+// A custom-element tag (must contain a hyphen) or an already-registered element
+// → instantiate a component; otherwise it's a bare-name action (script).
+function isComponentTag(name) {
+  return !!name && (name.indexOf('-') !== -1 || !!customElements.get(name));
+}
+
+// Collect the element's payload: href (if any) + data-* attributes with the
+// `data-` prefix stripped, excluding `data-handler` itself.
+function collectData(el) {
+  const data = {};
+  const href = el.getAttribute && el.getAttribute('href');
+  if (href != null) data.href = href;
+  const attrs = el.attributes || [];
+  for (let i = 0; i < attrs.length; i++) {
+    const a = attrs[i];
+    if (a.name === 'data-handler') continue;
+    if (a.name.indexOf('data-') === 0) data[a.name.slice(5)] = a.value;
+  }
+  return data;
+}
+
+// Forward the payload onto the instantiated component as attributes
+// (href → href, data-mode → mode, …). The component reads its own attributes.
+function forwardAttrs(target, data) {
+  for (const key in data) {
+    if (Object.prototype.hasOwnProperty.call(data, key)) target.setAttribute(key, data[key]);
+  }
+}
+
+function activate(el) {
+  const name = el.getAttribute('data-handler');
+  if (!name) return;
+  const data = collectData(el);
+
+  let element = null;
+  if (isComponentTag(name)) {
+    element = document.createElement(name);
+    forwardAttrs(element, data);
+  }
+
+  el.dispatchEvent(new CustomEvent('interop:activate', {
+    bubbles: true, composed: true,
+    detail: { handler: name, element: element, data: data, source: el },
+  }));
+}
+
+function onClick(e) {
+  const el = e.target && e.target.closest && e.target.closest('[data-handler]');
+  if (!el) return;
+  e.preventDefault();          // don't navigate / submit — the app routes it
+  activate(el);
+}
+
+function onKeydown(e) {
+  if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar') return;
+  const el = e.target && e.target.closest && e.target.closest('[data-handler]');
+  if (!el) return;
+  e.preventDefault();
+  activate(el);
+}
+
+if (typeof document !== 'undefined' && !document.__ciHandlerWired) {
+  document.__ciHandlerWired = true;
+  document.addEventListener('click', onClick);
+  document.addEventListener('keydown', onKeydown);
+}
+
+export { activate, isComponentTag, collectData };

package/dist/sol-loader.manifest.json

@@ -120,6 +120,7 @@
 
   "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"
   },
 

package/package.json

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