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

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,49 @@
 const defaultMarkerAttribute = 'data-pg-source-id'
+const pinegrowMarkerAttribute = 'data-pg-id'
 const astroFrameworkKey = 'astro'
+const astroSourceIdPrefix = 'pgastro-'
+
+const createFallbackComputed = getter => ({
+    get value() {
+        return getter()
+    },
+})
+
+const createFallbackRef = value => ({ value })
+
+const readWatchSource = source => {
+    if (typeof source === 'function') {
+        return source()
+    }
+
+    return source?.value
+}
+
+const createFallbackWatch = (source, callback, options = {}) => {
+    if (options.immediate && typeof callback === 'function') {
+        callback(readWatchSource(source), undefined)
+    }
+
+    return () => {}
+}
+
+const createAstroSyntheticInstance = (node, element) => ({
+    uid: `astro:${node.id}`,
+    isMounted: true,
+    isUnmounted: false,
+    parent: null,
+    type: {
+        __name: node.name || 'AstroElement',
+        __file: null,
+    },
+    props: {},
+    attrs: {},
+    slots: {},
+    subTree: {
+        el: element,
+    },
+    appContext: null,
+})
 
 const getDefaultWindow = () => {
     if (typeof window !== 'undefined') {
@@ -16,6 +60,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
 
@@ -23,6 +74,57 @@ const getManifestSourceKey = manifest => manifest?.sourceFile || manifest?.id ||
 
 const normalizeElCacheEntries = entries => Array.isArray(entries) ? entries : []
 
+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()
 
@@ -51,7 +153,42 @@ 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 = ({
+    element,
+    manifest,
+    markerAttribute = defaultMarkerAttribute,
+    node,
+    mirroredPgId = false,
+}) => {
     const sourceRange = {
         start: node.sourceStart ?? null,
         end: node.sourceEnd ?? null,
@@ -61,19 +198,41 @@ const createAstroElCacheEntry = ({ element, manifest, node }) => {
     return {
         el: element,
         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,
+        },
         editability: node.editability || null,
         attributes: node.attributes || [],
         isFragment: false,
@@ -82,11 +241,99 @@ const createAstroElCacheEntry = ({ element, manifest, node }) => {
         rootEl: null,
         firstEl: element,
         lastEl: element,
-        instance: null,
+        instance: createAstroSyntheticInstance(node, element),
         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 firstEntry = entries[0]
+    const lastEntry = entries[entries.length - 1]
+    const componentId = `astro-component:${sourceFile}`
+    const firstEl = isPageRoot ? rootElement : firstEntry.firstEl || firstEntry.el
+    const lastEl = isPageRoot ? null : lastEntry.lastEl || lastEntry.el
+    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,
+        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 = []
@@ -97,6 +344,7 @@ const scanAstroSourceDomMarkers = (root, manifest, options = {}) => {
             status: 'unavailable',
             markerAttribute,
             entries,
+            componentEntries: [],
             missing,
             reason: manifest?.reason || 'Astro source manifest is unavailable.',
         }
@@ -107,6 +355,7 @@ const scanAstroSourceDomMarkers = (root, manifest, options = {}) => {
             status: 'unavailable',
             markerAttribute,
             entries,
+            componentEntries: [],
             missing,
             reason: 'A DOM root with querySelectorAll() is required.',
         }
@@ -119,17 +368,28 @@ 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 = mirrorAstroSourceIdToPgId(element, sourceId, options)
+
+        entries.push(createAstroElCacheEntry({
+            element,
+            manifest,
+            markerAttribute,
+            node,
+            mirroredPgId,
+        }))
     })
 
     return {
         status: 'ready',
         markerAttribute,
         entries,
+        componentEntries: createAstroComponentEntries({ entries, manifest, root }),
         missing,
     }
 }
@@ -143,17 +403,32 @@ const ensurePinegrowAstroBridge = (win = getDefaultWindow()) => {
         win.pinegrow = {}
     }
 
-    if (!isMapLike(win.pinegrow.elCache)) {
-        win.pinegrow.elCache = new Map()
+    if (typeof win.pinegrow.reactiveFromContext !== 'function') {
+        win.pinegrow.reactiveFromContext = value => value
     }
 
+    if (typeof win.pinegrow.refFromContext !== 'function') {
+        win.pinegrow.refFromContext = createFallbackRef
+    }
+
+    if (typeof win.pinegrow.computedFromContext !== 'function') {
+        win.pinegrow.computedFromContext = createFallbackComputed
+    }
+
+    if (typeof win.pinegrow.watchFromContext !== 'function') {
+        win.pinegrow.watchFromContext = createFallbackWatch
+    }
+
+    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
 }
@@ -232,7 +507,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)
     })
@@ -251,7 +528,7 @@ const refreshAstroElCache = (manifest, options = {}) => {
 
     return {
         ...scan,
-        cached: scan.entries.length,
+        cached: cacheEntries.length,
         removed: removal.removed,
     }
 }
@@ -267,6 +544,7 @@ const createAstroRuntimeBridge = (manifest, options = {}) => ({
 })
 
 export {
+    createAstroComponentEntries,
     createAstroElCacheEntry,
     createAstroRuntimeBridge,
     ensurePinegrowAstroBridge,