v3.0.1: fixes from CodeRabbit review of #108 (#111)

- walkMeta only skips identity/AST keys at the document root, so nested
  fields like `download.path` are rewritten
- Keep query strings on generated srcset candidates
- Live reload: split srcset on commas, skip src busting on srcset-only
  elements, and reload media elements when a <source> changes

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: davestewart

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+### v3.0.1
+
+- Rewrite nested frontmatter and data fields named `path`, `id`, `stem` or `extension` (previously skipped at any depth, not just the document root)
+- Keep query strings on generated `srcset` candidates, not just `src`
+- Live reload: fix busting authored `srcset`s without spaces or descriptors, don't add an empty `src` to srcset-only elements, and reload `<video>` / `<audio>` when a `<source>` changes
+
 ### v3.0.0
 
 Nuxt Content 3 support. The module now targets `@nuxt/content` v3 only; for Nuxt Content 2 keep using `nuxt-content-assets@1`.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-content-assets",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Enable locally-located assets in Nuxt Content",
   "repository": {
     "type": "git",

package.json

@@ -59,13 +59,15 @@ export function makeAssetIndex (publicPath: string, srcset: SrcsetOptions | fals
     if (!asset) {
       return
     }
-    const resolved: ResolvedAsset = { ...asset }
-    if (srcset && isImage(absSrc)) {
-      Object.assign(resolved, getSrcset(absSrc, asset, path => assets.get(path), srcset))
-    }
+    // keep any query on src and srcset candidates
     const query = parseQuery(value)
-    if (query) {
-      resolved.srcAttr += query
+    const withQuery = (asset: AssetConfig): AssetConfig => ({ ...asset, srcAttr: asset.srcAttr + query })
+    const resolved: ResolvedAsset = withQuery(asset)
+    if (srcset && isImage(absSrc)) {
+      Object.assign(resolved, getSrcset(absSrc, resolved, (path) => {
+        const variant = assets.get(path)
+        return variant && withQuery(variant)
+      }, srcset))
     }
     return resolved
   }

src/build/assets.ts

@@ -18,6 +18,9 @@ export default defineNuxtPlugin(() => {
     const time = String(Date.now())
     const selector = `:is(img, video, source, embed, iframe):where([src*="${src}"], [srcset*="${src}"])`
 
+    // media elements only pick up a changed <source> when reloaded
+    const media = new Set<HTMLMediaElement>()
+
     document.querySelectorAll(selector).forEach((el: any) => {
       // dim if deleted
       el.style.opacity = isUpdate ? '1' : '0.2'
@@ -40,25 +43,40 @@ export default defineNuxtPlugin(() => {
       }
 
       // bust src (nuxt image serves from /_ipx/..., so keep whatever path is there)
-      const [path, query] = String(el.getAttribute('src') || '').split('?')
-      const params = new URLSearchParams(query)
-      params.set('time', time)
-      if (width && height && params.get('width')) {
-        params.set('width', String(width))
-        params.set('height', String(height))
+      const srcAttr = el.getAttribute('src')
+      if (srcAttr) {
+        const [path, query] = srcAttr.split('?')
+        const params = new URLSearchParams(query)
+        params.set('time', time)
+        if (width && height && params.get('width')) {
+          params.set('width', String(width))
+          params.set('height', String(height))
+        }
+        el.setAttribute('src', `${path}?${params.toString()}`)
       }
-      el.setAttribute('src', `${path}?${params.toString()}`)
 
       // bust srcset
       const srcset = el.getAttribute('srcset')
       if (srcset) {
-        el.setAttribute('srcset', srcset.replace(/(\S+)(\s+\S+)?/g, (_match: string, url: string, descriptor = '') => {
-          const [base, q] = url.split('?')
-          const p = new URLSearchParams(q)
-          p.set('time', time)
-          return `${base}?${p.toString()}${descriptor}`
-        }))
+        el.setAttribute('srcset', srcset
+          .split(',')
+          .map((candidate: string) => candidate.trim())
+          .filter(Boolean)
+          .map((candidate: string) => {
+            const [url, ...descriptors] = candidate.split(/\s+/)
+            const [base, q] = url.split('?')
+            const p = new URLSearchParams(q)
+            p.set('time', time)
+            return [`${base}?${p.toString()}`, ...descriptors].join(' ')
+          })
+          .join(', '))
+      }
+
+      if (el.tagName === 'SOURCE' && el.parentElement instanceof HTMLMediaElement) {
+        media.add(el.parentElement)
       }
     })
+
+    media.forEach(el => el.load())
   })
 })

src/runtime/plugin.client.ts

@@ -15,10 +15,10 @@ export interface ElementView {
 const nonMetaKeys = ['body', 'excerpt', 'rawbody', '__metadata', 'id', 'path', 'stem', 'extension']
 
 /**
- * Walk parsed content fields (frontmatter and schema fields), skipping ASTs and identity fields
+ * Walk parsed content fields (frontmatter and schema fields), skipping root-level ASTs and identity fields
  */
 export function walkMeta (content: Record<string, any>, callback: WalkCallback) {
-  walk(content, callback, (value, key) => !(typeof key === 'string' && nonMetaKeys.includes(key)))
+  walk(content, callback, (value, key, parent) => !(parent === content && typeof key === 'string' && nonMetaKeys.includes(key)))
 }
 
 /**

src/runtime/utils/content.ts

@@ -1,6 +1,6 @@
 export type Walkable = { [key: string | number]: any }
 
-export type WalkFilter = (value: any, key?: string | number) => boolean | undefined
+export type WalkFilter = (value: any, key?: string | number, parent?: Walkable) => boolean | undefined
 
 export type WalkCallback = (value: any, parent: Walkable, key: string | number) => void
 
@@ -15,7 +15,7 @@ export function walk (node: any, callback: WalkCallback, filter?: WalkFilter): v
   function visit (node: any, callback: WalkCallback, parent: Walkable, key: string | number) {
     // filter
     if (filter) {
-      const result = filter(node, key)
+      const result = filter(node, key, parent)
       if (result === false) {
         return
       }

src/runtime/utils/object.ts

@@ -45,6 +45,12 @@ describe('content', () => {
     expect(values).toEqual(['Title', 'image.jpg', 'a.jpg', 'b.jpg', 2, 'og.jpg'])
   })
 
+  it('should only skip identity keys at the root', () => {
+    const values: any[] = []
+    walkMeta({ path: '/', download: { path: 'file.pdf', id: 'a.jpg' }, links: [{ stem: 'b.jpg' }] }, value => values.push(value))
+    expect(values).toEqual(['file.pdf', 'a.jpg', 'b.jpg'])
+  })
+
   it('should walk minimark bodies including headings but not code', () => {
     const tags: string[] = []
     walkBody(content.body, node => tags.push(`${node.tag}:${node.props.src || node.props.href}`))

test/unit/content.spec.ts

@@ -64,6 +64,7 @@ describe('process', () => {
       sizes: '(max-width: 400px) 100vw, 400px',
     })
     expect(p2[2][1].src).toBe('/posts/image.png?x=1')
+    expect(p2[2][1].srcset).toBe('/posts/image.png?x=1 400w, /posts/image@2x.png?x=1 800w')
     expect(p2[2][1].style).toBe('color: red; aspect-ratio: 400/300;')
     expect(p3[2][1]).toEqual({ href: '/posts/file.pdf', target: '_blank' })
     expect(video[1]).toEqual({ src: '/posts/media/video.mp4' })
@@ -86,6 +87,12 @@ describe('process', () => {
     expect(content.image).toBe('/posts/image.png')
   })
 
+  it('should rewrite nested frontmatter keys that share identity key names', () => {
+    const content = { path: '/posts', download: { path: 'file.pdf' } }
+    processContent('/c/posts/index.md', content, makeIndex(), [])
+    expect(content).toEqual({ path: '/posts', download: { path: '/posts/file.pdf' } })
+  })
+
   it('should keep an authored srcset', () => {
     const content = { body: { type: 'minimark', value: [['img', { src: 'image.png', srcSet: 'custom.png 1x' }]] } }
     processContent('/c/posts/index.md', content, makeIndex(), [])