gg-wf-scripts 2.4.0 → 2.5.0

package/README.md

@@ -86,6 +86,25 @@ Display data from your queries in the DOM.
 
 `gg-field` supports dot-paths for nested data (e.g. `author.name`).
 
+#### Passing data to web components / React
+
+For elements that manage their own DOM (custom elements wrapping React, Lit, etc.), use `gg-data-key` to receive a JSON-serialized value as a `gg-data-value` attribute. The component listens for attribute changes and updates its own state.
+
+```html
+<div gg-data="post_form">
+  <!-- record.schools is e.g. [{ id, name }, ...] -->
+  <my-select gg-data-key="schools"></my-select>
+</div>
+```
+
+After the query runs, the engine resolves the dot-path against the record and writes the result:
+
+```html
+<my-select gg-data-key="schools" gg-data-value='[{"id":1,"name":"Acme"}]'></my-select>
+```
+
+The lookup pierces shadow roots, so the marker can live inside a component's shadow DOM. Leaving `gg-data-key=""` passes the entire record. Note: if the component renders after the query runs, it won't be found — re-run the query (e.g. via `gg-data-on`) once the component has mounted, or have the component pull from `host.__ggRecord` on connect.
+
 #### Re-running on URL changes
 
 Add `gg-data-on` to re-run a query when specific URL params change:

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gg-wf-scripts",
-	"version": "2.4.0",
+	"version": "2.5.0",
 	"type": "module",
 	"exports": "./src/index.js"
 }

package/src/data-engine.js

@@ -17,6 +17,23 @@ function applySwitchFields(root, record) {
   });
 }
 
+function queryDeep(root, selector) {
+  const results = [...root.querySelectorAll(selector)];
+  root.querySelectorAll("*").forEach((el) => {
+    if (el.shadowRoot) results.push(...queryDeep(el.shadowRoot, selector));
+  });
+  return results;
+}
+
+function applyDataValues(root, record) {
+  queryDeep(root, "[gg-data-key]").forEach((el) => {
+    const path = el.getAttribute("gg-data-key");
+    const value = path ? getPath(record, path) : record;
+    if (value === undefined) return;
+    el.setAttribute("gg-data-value", JSON.stringify(value));
+  });
+}
+
 function populateFormFields(root, record) {
   root.querySelectorAll(
     "input[name], select[name], textarea[name]",
@@ -97,6 +114,7 @@ export function initDataEngine(context, { debug = false } = {}) {
         clone.__ggRecord = record;
         populateFields(clone, record);
         applySwitchFields(clone, record);
+        applyDataValues(clone, record);
         container.appendChild(clone);
       });
     } else if (isForm) {
@@ -109,6 +127,7 @@ export function initDataEngine(context, { debug = false } = {}) {
       if (!result) return;
       container.__ggRecord = result;
       populateFormFields(container, result);
+      applyDataValues(container, result);
     } else {
       if (Array.isArray(result)) {
         console.warn(
@@ -120,6 +139,7 @@ export function initDataEngine(context, { debug = false } = {}) {
       container.__ggRecord = result;
       populateFields(container, result);
       applySwitchFields(container, result);
+      applyDataValues(container, result);
     }
   }