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

package/astro-runtime.d.ts

@@ -8,14 +8,44 @@ export interface AstroRuntimeBridgeOptions {
 export interface AstroElCacheEntry {
     el: Element
     framework: 'astro'
+    entryKind: 'source-node' | 'component-boundary' | 'page-root'
+    treeScopes: {
+        pageTree: boolean
+        appTree: boolean
+    }
     isAstro: true
+    isAstroSourceDomEntry: boolean
+    isAstroComponent: boolean
+    isAppTreeComponent: boolean
+    isAstroPageRoot?: boolean
     sourceId: string
-    pgId: string
-    key: string
+    pgId: string | null
+    key: string | null
     localFile: string | null
     sourceFile: string | null
     nodeType: string | null
     name: string
+    source: {
+        id: string
+        file: string | null
+        range: {
+            start: number | null
+            end: number | null
+            status: string
+        }
+        nodeType: string | null
+        name: string
+    }
+    component: {
+        file: string
+        name: string
+        kind: string
+    } | null
+    owners: Array<{
+        kind: string
+        file: string
+        name?: string
+    }>
     sourceRange: {
         start: number | null
         end: number | null
@@ -32,11 +62,53 @@ export interface AstroElCacheEntry {
     isIsland: false
     rootEl: null
     firstEl: Element
-    lastEl: Element
-    instance: null
+    lastEl: Element | null
+    instance: {
+        uid: string
+        isMounted: boolean
+        isUnmounted: boolean
+        type: {
+            __name?: string
+            __file?: string | null
+        }
+        props: Record<string, unknown>
+        attrs: Record<string, unknown>
+        slots: Record<string, unknown>
+        subTree: {
+            el: Element
+        }
+        appContext: unknown
+    }
     vnode: null
 }
 
+export type AstroComponentEntry = AstroElCacheEntry & {
+    entryKind: 'component-boundary' | 'page-root'
+    treeScopes: {
+        pageTree: false
+        appTree: true
+    }
+    isAstroSourceDomEntry: false
+    isAstroComponent: true
+    isAppTreeComponent: true
+    pgId: null
+    key: null
+    localFile: string
+    sourceFile: string
+    nodeType: 'component-file'
+    component: {
+        file: string
+        name: string
+        kind: string
+    }
+}
+
+export function createAstroComponentEntries(input: {
+    entries: AstroElCacheEntry[]
+    manifest: unknown
+    root?: Document | Element
+}): AstroComponentEntry[]
+
 export function createAstroElCacheEntry(input: {
     element: Element
     manifest: unknown

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

@@ -1,5 +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() {
@@ -25,13 +31,20 @@ const createFallbackWatch = (source, callback, options = {}) => {
     return () => {}
 }
 
-const createAstroSyntheticInstance = (manifest, node) => ({
+const createAstroSyntheticInstance = (node, element) => ({
     uid: `astro:${node.id}`,
     isMounted: true,
     isUnmounted: false,
+    parent: null,
     type: {
         __name: node.name || 'AstroElement',
-        __file: manifest.sourceFile || null,
+        __file: null,
+    },
+    props: {},
+    attrs: {},
+    slots: {},
+    subTree: {
+        el: element,
     },
     appContext: null,
 })
@@ -51,6 +64,13 @@ const isMapLike = value =>
     typeof value.delete === 'function' &&
     typeof value.entries === 'function'
 
+const createReactiveMap = (pinegrow, value) => {
+    const map = isMapLike(value) ? value : new Map()
+    const reactiveFromContext = pinegrow?.reactiveFromContext
+
+    return typeof reactiveFromContext === 'function' ? reactiveFromContext(map) : map
+}
+
 const getMarkerAttribute = (manifest, options = {}) =>
     options.markerAttribute || manifest?.marker?.attribute || defaultMarkerAttribute
 
@@ -58,6 +78,83 @@ 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 => {
+    if (!value) {
+        return ''
+    }
+
+    return normalizePathLike(value).split('/').pop() || ''
+}
+
+const isAstroPageSourceFile = sourceFile =>
+    /(^|\/)src\/pages\/.+\.astro$/i.test(normalizePathLike(sourceFile))
+
+const getRootElement = root => {
+    if (!root) {
+        return null
+    }
+
+    if (root.documentElement) {
+        return root.documentElement
+    }
+
+    if (root.body) {
+        return root.body
+    }
+
+    if (root.firstElementChild) {
+        return root.firstElementChild
+    }
+
+    return root.nodeType === 1 ? root : null
+}
+
+const createAstroComponentSyntheticInstance = (manifest, componentId, element) => ({
+    uid: componentId,
+    isMounted: true,
+    isUnmounted: false,
+    parent: null,
+    type: {
+        __name: getBasename(manifest?.sourceFile) || 'AstroComponent',
+        __file: manifest?.sourceFile || null,
+    },
+    props: {},
+    attrs: {},
+    slots: {},
+    subTree: {
+        el: element,
+    },
+    appContext: null,
+})
+
 const createNodeIndex = manifest => {
     const index = new Map()
 
@@ -78,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
@@ -86,7 +283,48 @@ const getElementMarkerId = (element, markerAttribute) => {
     return element.getAttribute(markerAttribute)
 }
 
-const createAstroElCacheEntry = ({ element, manifest, node }) => {
+const canOverwritePgId = currentValue =>
+    !currentValue || currentValue.startsWith(astroSourceIdPrefix)
+
+const mirrorAstroSourceIdToPgId = (element, sourceId, options = {}) => {
+    if (
+        options.mirrorPgId === false ||
+        !sourceId ||
+        !element ||
+        typeof element.getAttribute !== 'function' ||
+        typeof element.setAttribute !== 'function'
+    ) {
+        return false
+    }
+
+    const currentPgId = element.getAttribute(pinegrowMarkerAttribute)
+
+    if (currentPgId === sourceId) {
+        return true
+    }
+
+    if (!canOverwritePgId(currentPgId)) {
+        return false
+    }
+
+    element.setAttribute(pinegrowMarkerAttribute, sourceId)
+
+    return true
+}
+
+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,
@@ -94,34 +332,146 @@ const createAstroElCacheEntry = ({ element, manifest, node }) => {
     }
 
     return {
-        el: element,
+        el: firstEl,
         framework: astroFrameworkKey,
+        entryKind: 'source-node',
+        treeScopes: {
+            pageTree: true,
+            appTree: false,
+        },
         isAstro: true,
+        isAstroSourceDomEntry: true,
+        isAstroComponent: false,
+        isAppTreeComponent: false,
         sourceId: node.id,
         pgId: node.id,
         key: node.id,
-        localFile: manifest.sourceFile || null,
+        localFile: null,
         sourceFile: manifest.sourceFile || null,
         nodeType: node.type || null,
         name: node.name || '',
+        source: {
+            id: node.id,
+            file: manifest.sourceFile || null,
+            range: sourceRange,
+            nodeType: node.type || null,
+            name: node.name || '',
+        },
+        component: null,
+        owners: [],
         sourceRange,
         sourceStart: sourceRange.start,
         sourceEnd: sourceRange.end,
         sourceRangeStatus: sourceRange.status,
-        marker: node.marker || null,
+        marker: {
+            ...(node.marker || {}),
+            liveAttribute: markerAttribute,
+            pinegrowAttribute: pinegrowMarkerAttribute,
+            mirroredPgId,
+            boundary,
+        },
         editability: node.editability || null,
         attributes: node.attributes || [],
+        isFragment: isBoundaryRange,
+        isRootFragment: false,
+        isIsland: false,
+        rootEl: null,
+        firstEl,
+        lastEl,
+        instance: createAstroSyntheticInstance(node, firstEl),
+        vnode: null,
+    }
+}
+
+const createAstroComponentEntry = ({ entries, manifest, root }) => {
+    const sourceFile = manifest?.sourceFile
+    const rootElement = getRootElement(root)
+    const isPageFile = isAstroPageSourceFile(sourceFile)
+    const isPageRoot = isPageFile && rootElement
+
+    if (!sourceFile || (!entries.length && !isPageRoot)) {
+        return null
+    }
+
+    const orderedEntries = sortEntriesByDocumentPosition(entries)
+    const firstEntry = orderedEntries[0]
+    const lastEntry = orderedEntries[orderedEntries.length - 1]
+    const componentId = `astro-component:${sourceFile}`
+    const firstEl = isPageRoot ? rootElement : getEntryFirstElement(firstEntry)
+    const lastEl = isPageRoot ? null : getEntryLastElement(lastEntry)
+    const componentName = getBasename(sourceFile)
+    const entryKind = isPageRoot ? 'page-root' : 'component-boundary'
+
+    return {
+        el: firstEl,
+        framework: astroFrameworkKey,
+        entryKind,
+        treeScopes: {
+            pageTree: false,
+            appTree: true,
+        },
+        isAstro: true,
+        isAstroSourceDomEntry: false,
+        isAstroComponent: true,
+        isAppTreeComponent: true,
+        isAstroPageRoot: Boolean(isPageRoot),
+        sourceId: componentId,
+        pgId: null,
+        key: null,
+        localFile: sourceFile,
+        sourceFile,
+        nodeType: 'component-file',
+        name: componentName,
+        source: {
+            id: componentId,
+            file: sourceFile,
+            range: {
+                start: null,
+                end: null,
+                status: 'component-file',
+            },
+            nodeType: 'component-file',
+            name: componentName,
+        },
+        component: {
+            file: sourceFile,
+            name: componentName,
+            kind: isPageFile ? 'page' : 'component',
+        },
+        owners: [],
+        sourceRange: {
+            start: null,
+            end: null,
+            status: 'component-file',
+        },
+        sourceStart: null,
+        sourceEnd: null,
+        sourceRangeStatus: 'component-file',
+        marker: null,
+        editability: {
+            mode: 'inspect',
+            operations: ['select', 'open-source-file'],
+            reasons: ['astro-component-file'],
+        },
+        attributes: [],
+        state: Array.isArray(manifest.state) ? manifest.state : [],
         isFragment: false,
         isRootFragment: false,
         isIsland: false,
         rootEl: null,
-        firstEl: element,
-        lastEl: element,
-        instance: createAstroSyntheticInstance(manifest, node),
+        firstEl,
+        lastEl,
+        instance: createAstroComponentSyntheticInstance(manifest, componentId, firstEl),
         vnode: null,
     }
 }
 
+const createAstroComponentEntries = ({ entries, manifest, root }) => {
+    const componentEntry = createAstroComponentEntry({ entries, manifest, root })
+
+    return componentEntry ? [componentEntry] : []
+}
+
 const scanAstroSourceDomMarkers = (root, manifest, options = {}) => {
     const markerAttribute = getMarkerAttribute(manifest, options)
     const entries = []
@@ -132,6 +482,7 @@ const scanAstroSourceDomMarkers = (root, manifest, options = {}) => {
             status: 'unavailable',
             markerAttribute,
             entries,
+            componentEntries: [],
             missing,
             reason: manifest?.reason || 'Astro source manifest is unavailable.',
         }
@@ -142,6 +493,7 @@ const scanAstroSourceDomMarkers = (root, manifest, options = {}) => {
             status: 'unavailable',
             markerAttribute,
             entries,
+            componentEntries: [],
             missing,
             reason: 'A DOM root with querySelectorAll() is required.',
         }
@@ -154,17 +506,49 @@ const scanAstroSourceDomMarkers = (root, manifest, options = {}) => {
         const node = nodeIndex.get(sourceId)
 
         if (!node) {
-            missing.push({ element, sourceId })
+            if (options.reportMissingMarkers) {
+                missing.push({ element, sourceId })
+            }
             return
         }
 
-        entries.push(createAstroElCacheEntry({ element, manifest, node }))
+        const mirroredPgId = markerAttribute === pinegrowMarkerAttribute
+            ? false
+            : mirrorAstroSourceIdToPgId(element, sourceId, options)
+
+        entries.push(createAstroElCacheEntry({
+            element,
+            manifest,
+            markerAttribute,
+            node,
+            mirroredPgId,
+        }))
+    })
+
+    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,
         entries,
+        componentEntries: createAstroComponentEntries({ entries, manifest, root }),
         missing,
     }
 }
@@ -194,17 +578,16 @@ const ensurePinegrowAstroBridge = (win = getDefaultWindow()) => {
         win.pinegrow.watchFromContext = createFallbackWatch
     }
 
-    if (!isMapLike(win.pinegrow.elCache)) {
-        win.pinegrow.elCache = new Map()
-    }
+    win.pinegrow.elCache = createReactiveMap(win.pinegrow, win.pinegrow.elCache)
 
     if (!win.pinegrow.astro) {
         win.pinegrow.astro = {}
     }
 
-    if (!isMapLike(win.pinegrow.astro.sourceManifests)) {
-        win.pinegrow.astro.sourceManifests = new Map()
-    }
+    win.pinegrow.astro.sourceManifests = createReactiveMap(
+        win.pinegrow,
+        win.pinegrow.astro.sourceManifests
+    )
 
     return win.pinegrow
 }
@@ -283,7 +666,9 @@ const refreshAstroElCache = (manifest, options = {}) => {
         : removeAstroEntriesForManifest(pinegrow.elCache, manifest)
     const updatedElements = new Set(removal.elements)
 
-    scan.entries.forEach(entry => {
+    const cacheEntries = [...scan.entries, ...(scan.componentEntries || [])]
+
+    cacheEntries.forEach(entry => {
         upsertAstroEntry(pinegrow.elCache, entry)
         updatedElements.add(entry.el)
     })
@@ -302,7 +687,7 @@ const refreshAstroElCache = (manifest, options = {}) => {
 
     return {
         ...scan,
-        cached: scan.entries.length,
+        cached: cacheEntries.length,
         removed: removal.removed,
     }
 }
@@ -318,6 +703,7 @@ const createAstroRuntimeBridge = (manifest, options = {}) => ({
 })
 
 export {
+    createAstroComponentEntries,
     createAstroElCacheEntry,
     createAstroRuntimeBridge,
     ensurePinegrowAstroBridge,