druxt 0.24.1-dev.20260920213131 → 0.25.0-dev.20260921034536

package/dist/components/DruxtModule.vue

@@ -5,6 +5,66 @@ import Vue from 'vue'
 
 import DruxtWrapper from './DruxtWrapper.vue'
 
+/**
+ * Whether JSON holds a value well enough to compare two of them.
+ *
+ * A function or a symbol writes as `undefined`, a Map or a Set as `{}`, and
+ * NaN as `null`, so two different values can write the same text. Anything
+ * JSON does not hold exactly is compared by identity instead.
+ *
+ * @private
+ *
+ * @param {*} value - The value to check.
+ * @param {WeakSet} [seen] - Objects already visited, so a cycle ends the walk.
+ *
+ * @returns {boolean} Whether JSON.stringify represents the value exactly.
+ */
+const isComparable = (value, seen = new WeakSet()) => {
+  if (value === null) return true
+
+  const type = typeof value
+  if (type === 'string' || type === 'boolean') return true
+  if (type === 'number') return Number.isFinite(value)
+  if (type !== 'object') return false
+
+  if (seen.has(value)) return false
+  seen.add(value)
+
+  if (Array.isArray(value)) return value.every((item) => isComparable(item, seen))
+
+  // A Map, a Set, a Date or any class instance writes as something other than itself.
+  const prototype = Object.getPrototypeOf(value)
+  if (prototype !== Object.prototype && prototype !== null) return false
+
+  return Object.values(value).every((item) => isComparable(item, seen))
+}
+
+/**
+ * Whether rebuilt propsData differs from what the wrapper already has.
+ *
+ * Values that cannot be compared count as changed, so a rebuild is skipped
+ * only when the two are known to match.
+ *
+ * @private
+ *
+ * @param {object} current - The propsData the wrapper holds.
+ * @param {object} next - The propsData the module's callback just produced.
+ *
+ * @returns {boolean} Whether the wrapper needs the new propsData.
+ */
+const hasChanged = (current = {}, next = {}) => {
+  const keys = [...new Set([...Object.keys(current), ...Object.keys(next)])]
+  return keys.some((key) => {
+    if (current[key] === next[key]) return false
+    if (!isComparable(current[key]) || !isComparable(next[key])) return true
+    try {
+      return JSON.stringify(current[key]) !== JSON.stringify(next[key])
+    } catch (err) {
+      return true
+    }
+  })
+}
+
 /**
  * The DruxtModule component renders a Druxt module; import and extend the
  * component to build your own module.
@@ -168,6 +228,9 @@ export default {
 
     // Get wrapper data.
     const wrapperData = await this.getWrapperData(component.is)
+    // On the instance rather than in data(), so it is not copied into the
+    // server rendered payload once per module.
+    this.wrapperProps = wrapperData.props || {}
 
     // Build module settings.
     component.settings = wrapperData.druxt || {}
@@ -206,7 +269,20 @@ export default {
      * @param {object} vm.$route - The current route.
      * @return {string} The current language code.
      */
-    lang: ({ langcode, $route }) => langcode || ($route.meta || {}).langcode
+    lang: ({ langcode, $route }) => langcode || ($route.meta || {}).langcode,
+
+    /**
+     * The module's own propsData, tracked so a prop change rebuilds it.
+     *
+     * Reading it here registers whatever the module's `propsData()` callback
+     * reads, so each module declares its own dependencies by using them.
+     *
+     * @type {object}
+     */
+    modulePropsData() {
+      if (!(this.$options.druxt || {}).propsData) return null
+      return { langcode: this.lang, ...this.$options.druxt.propsData.call(this, this) }
+    }
   },
 
   watch: {
@@ -216,6 +292,27 @@ export default {
       }
     },
 
+    // Nuxt 2 doesn't re-run fetch() when a component's own props change, so a
+    // reused instance would keep the propsData its first fetch() built. Rebuild
+    // it in place instead of refetching: the data is unchanged, the props are not.
+    modulePropsData: {
+      deep: true,
+      handler(to) {
+        // An errored module renders DruxtDebug with its own props; leave them.
+        if (!to || this.component.is === 'DruxtDebug' || !Object.keys(this.component.propsData || {}).length) {
+          return
+        }
+        if (!hasChanged(this.component.propsData, to)) {
+          return
+        }
+
+        // After hydration this instance never ran fetch(), so read the resolved
+        // wrapper's props instead of the ones that fetch() put on the instance.
+        const resolved = ((this.$options.components || {})[this.component.is] || {}).options || {}
+        this.component = { ...this.component, ...this.getModulePropsData(this.wrapperProps || resolved.props || {}) }
+      }
+    },
+
     model() {
       if (this.component.props && this.component.props.value !== this.model) {
         this.component.props.value = this.model

package/dist/components/DruxtWrapper.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <slot v-bind="{ ...$parent.$attrs }" />
+    <slot v-bind="slotAttrs" />
   </div>
 </template>
 
@@ -10,6 +10,31 @@
  * Placeholder component for the Druxt Wrapper theming system.
  */
 export default {
-  name: 'DruxtWrapper'
+  name: 'DruxtWrapper',
+
+  // A module hands its wrapper the module's own attributes and every propsData
+  // key the wrapper does not declare, so the wrapper can read them. Rendering
+  // them here as well would repeat the module's attributes on a second element
+  // and write objects into the markup as [object Object]. They stay readable
+  // in $attrs either way.
+  inheritAttrs: false,
+
+  computed: {
+    /**
+     * The module's attributes, for the default slot.
+     *
+     * A module renders its fields through this slot, and hands each one these
+     * attributes, so whatever is here reaches every module below. `id` names
+     * one element, so it is left out rather than repeated on each of them.
+     * DruxtModule withholds `data-fetch-key` for the same reason.
+     *
+     * @type {object}
+     */
+    slotAttrs() {
+      const attrs = { ...(this.$parent || {}).$attrs }
+      delete attrs.id
+      return attrs
+    }
+  }
 }
 </script>

package/dist/druxt.esm.js

@@ -263,7 +263,7 @@ class DruxtClient {
 }
 
 var name = "druxt";
-var version = "0.24.1-dev.20260920213131";
+var version = "0.25.0-dev.20260921034536";
 var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
 var keywords = [
 	"cms",
@@ -322,7 +322,7 @@ var dependencies = {
 };
 var devDependencies = {
 	"@storybook/addon-docs": "^6.5.16",
-	"druxt-test-utils": "^0.2.15"
+	"druxt-test-utils": "1.0.0-dev.20260921034536"
 };
 var peerDependencies = {
 	axios: "0.28.0",

package/dist/druxt.ssr.js

@@ -276,7 +276,7 @@ class DruxtClient {
 }
 
 var name = "druxt";
-var version = "0.24.1-dev.20260920213131";
+var version = "0.25.0-dev.20260921034536";
 var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
 var keywords = [
 	"cms",
@@ -335,7 +335,7 @@ var dependencies = {
 };
 var devDependencies = {
 	"@storybook/addon-docs": "^6.5.16",
-	"druxt-test-utils": "^0.2.15"
+	"druxt-test-utils": "1.0.0-dev.20260921034536"
 };
 var peerDependencies = {
 	axios: "0.28.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt",
-  "version": "0.24.1-dev.20260920213131",
+  "version": "0.25.0-dev.20260921034536",
   "description": "The Fully Decoupled Drupal Framework for Nuxt.js.",
   "keywords": [
     "cms",
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@storybook/addon-docs": "^6.5.16",
-    "druxt-test-utils": "^0.2.15"
+    "druxt-test-utils": "1.0.0-dev.20260921034536"
   },
   "peerDependencies": {
     "axios": "0.28.0",