@pinegrow/vite-plugin 3.0.73-alpha.10 → 3.0.73-alpha.11

package/dist/adapters/astro/astro-runtime-bridge.js

@@ -1,7 +1,11 @@
-const defaultMarkerAttribute = 'data-pg-source-id'
+const defaultMarkerAttribute = 'data-pg-id'
 const pinegrowMarkerAttribute = 'data-pg-id'
 const astroFrameworkKey = 'astro'
 const astroSourceIdPrefix = 'pgastro-'
+const elementNodeType = 1
+const commentNodeType = 8
+const documentPositionPreceding = 2
+const documentPositionFollowing = 4
 
 const createFallbackComputed = getter => ({
     get value() {
@@ -74,6 +78,32 @@ const getManifestSourceKey = manifest => manifest?.sourceFile || manifest?.id ||
 
 const normalizeElCacheEntries = entries => Array.isArray(entries) ? entries : []
 
+const getEntryFirstElement = entry => entry?.firstEl || entry?.el || null
+
+const getEntryLastElement = entry => entry?.lastEl || entry?.el || null
+
+const sortEntriesByDocumentPosition = entries =>
+    [...entries].sort((a, b) => {
+        const aEl = getEntryFirstElement(a)
+        const bEl = getEntryFirstElement(b)
+
+        if (!aEl || !bEl || aEl === bEl || typeof aEl.compareDocumentPosition !== 'function') {
+            return 0
+        }
+
+        const position = aEl.compareDocumentPosition(bEl)
+
+        if (position & documentPositionPreceding) {
+            return 1
+        }
+
+        if (position & documentPositionFollowing) {
+            return -1
+        }
+
+        return 0
+    })
+
 const normalizePathLike = value => `${value || ''}`.replace(/\\/g, '/')
 
 const getBasename = value => {
@@ -145,6 +175,106 @@ const queryMarkerElements = (root, markerAttribute) => {
     return Array.from(root.querySelectorAll(`[${markerAttribute}]`))
 }
 
+const getChildNodes = node => Array.from(node?.childNodes || [])
+
+const walkDomNodes = (node, visitor) => {
+    if (!node) {
+        return
+    }
+
+    visitor(node)
+    getChildNodes(node).forEach(child => walkDomNodes(child, visitor))
+}
+
+const parseAstroBoundaryComment = node => {
+    if (node?.nodeType !== commentNodeType) {
+        return null
+    }
+
+    const match = `${node.nodeValue || ''}`.trim().match(/^pgastro:(start|end):(.+)$/)
+
+    return match
+        ? {
+            boundary: match[1],
+            sourceId: match[2],
+        }
+        : null
+}
+
+const getBoundaryElements = (startComment, endComment) => {
+    if (!startComment?.parentNode || startComment.parentNode !== endComment?.parentNode) {
+        return {
+            firstEl: null,
+            lastEl: null,
+        }
+    }
+
+    let firstEl = null
+    let lastEl = null
+    let node = startComment.nextSibling
+
+    while (node && node !== endComment) {
+        if (node.nodeType === elementNodeType) {
+            if (!firstEl) {
+                firstEl = node
+            }
+            lastEl = node
+        }
+
+        node = node.nextSibling
+    }
+
+    return {
+        firstEl,
+        lastEl,
+    }
+}
+
+const queryBoundaryMarkerRanges = (root, nodeIndex) => {
+    const startsById = new Map()
+    const ranges = []
+
+    walkDomNodes(root, node => {
+        const marker = parseAstroBoundaryComment(node)
+
+        if (!marker || !nodeIndex.has(marker.sourceId)) {
+            return
+        }
+
+        if (marker.boundary === 'start') {
+            if (!startsById.has(marker.sourceId)) {
+                startsById.set(marker.sourceId, [])
+            }
+
+            startsById.get(marker.sourceId).push(node)
+            return
+        }
+
+        const starts = startsById.get(marker.sourceId)
+        const startComment = starts?.pop()
+
+        if (!startComment) {
+            return
+        }
+
+        const { firstEl, lastEl } = getBoundaryElements(startComment, node)
+
+        if (!firstEl) {
+            return
+        }
+
+        ranges.push({
+            sourceId: marker.sourceId,
+            firstEl,
+            lastEl: lastEl || firstEl,
+            startComment,
+            endComment: node,
+        })
+    })
+
+    return ranges
+}
+
 const getElementMarkerId = (element, markerAttribute) => {
     if (!element || typeof element.getAttribute !== 'function') {
         return null
@@ -183,12 +313,18 @@ const mirrorAstroSourceIdToPgId = (element, sourceId, options = {}) => {
 }
 
 const createAstroElCacheEntry = ({
+    boundary = null,
     element,
+    firstElement = null,
+    lastElement = null,
     manifest,
     markerAttribute = defaultMarkerAttribute,
     node,
     mirroredPgId = false,
 }) => {
+    const firstEl = firstElement || element
+    const lastEl = lastElement || firstEl
+    const isBoundaryRange = Boolean(boundary)
     const sourceRange = {
         start: node.sourceStart ?? null,
         end: node.sourceEnd ?? null,
@@ -196,7 +332,7 @@ const createAstroElCacheEntry = ({
     }
 
     return {
-        el: element,
+        el: firstEl,
         framework: astroFrameworkKey,
         entryKind: 'source-node',
         treeScopes: {
@@ -232,16 +368,17 @@ const createAstroElCacheEntry = ({
             liveAttribute: markerAttribute,
             pinegrowAttribute: pinegrowMarkerAttribute,
             mirroredPgId,
+            boundary,
         },
         editability: node.editability || null,
         attributes: node.attributes || [],
-        isFragment: false,
+        isFragment: isBoundaryRange,
         isRootFragment: false,
         isIsland: false,
         rootEl: null,
-        firstEl: element,
-        lastEl: element,
-        instance: createAstroSyntheticInstance(node, element),
+        firstEl,
+        lastEl,
+        instance: createAstroSyntheticInstance(node, firstEl),
         vnode: null,
     }
 }
@@ -256,11 +393,12 @@ const createAstroComponentEntry = ({ entries, manifest, root }) => {
         return null
     }
 
-    const firstEntry = entries[0]
-    const lastEntry = entries[entries.length - 1]
+    const orderedEntries = sortEntriesByDocumentPosition(entries)
+    const firstEntry = orderedEntries[0]
+    const lastEntry = orderedEntries[orderedEntries.length - 1]
     const componentId = `astro-component:${sourceFile}`
-    const firstEl = isPageRoot ? rootElement : firstEntry.firstEl || firstEntry.el
-    const lastEl = isPageRoot ? null : lastEntry.lastEl || lastEntry.el
+    const firstEl = isPageRoot ? rootElement : getEntryFirstElement(firstEntry)
+    const lastEl = isPageRoot ? null : getEntryLastElement(lastEntry)
     const componentName = getBasename(sourceFile)
     const entryKind = isPageRoot ? 'page-root' : 'component-boundary'
 
@@ -374,7 +512,9 @@ const scanAstroSourceDomMarkers = (root, manifest, options = {}) => {
             return
         }
 
-        const mirroredPgId = mirrorAstroSourceIdToPgId(element, sourceId, options)
+        const mirroredPgId = markerAttribute === pinegrowMarkerAttribute
+            ? false
+            : mirrorAstroSourceIdToPgId(element, sourceId, options)
 
         entries.push(createAstroElCacheEntry({
             element,
@@ -385,6 +525,25 @@ const scanAstroSourceDomMarkers = (root, manifest, options = {}) => {
         }))
     })
 
+    queryBoundaryMarkerRanges(root, nodeIndex).forEach(boundary => {
+        const node = nodeIndex.get(boundary.sourceId)
+
+        entries.push(createAstroElCacheEntry({
+            boundary: {
+                strategy: 'boundary-comment',
+                startComment: boundary.startComment,
+                endComment: boundary.endComment,
+            },
+            element: boundary.firstEl,
+            firstElement: boundary.firstEl,
+            lastElement: boundary.lastEl,
+            manifest,
+            markerAttribute,
+            node,
+            mirroredPgId: false,
+        }))
+    })
+
     return {
         status: 'ready',
         markerAttribute,