feat(SchemaOrgDebug)!: renamed from SchemaOrgInspector and functional

Author: harlan-zw

docs/.vitepress/config.ts

@@ -175,7 +175,7 @@ export default defineConfig({
           text: 'Utility Components',
           items: [
             // to build
-            { text: 'SchemaOrgInspector 🔨', link: '/components/inspector' },
+            { text: 'SchemaOrgDebug 🔨', link: '/components/inspector' },
           ],
         },
       ],

packages/schema-org/runtime/components/SchemaOrgDebug.ts

@@ -0,0 +1,66 @@
+import { defineComponent, h, nextTick, onMounted, ref } from 'vue'
+
+export const SchemaOrgDebug = defineComponent({
+  name: 'SchemaOrgDebug',
+  props: {
+    console: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    const schemaRaw = ref('')
+    let observer: MutationObserver
+
+    onMounted(() => {
+      nextTick(() => {
+        let $el = document.querySelector('script[data-id="schema-org-graph"]')
+        if (!$el)
+          return
+
+        const fetchSchema = () => {
+          $el = document.querySelector('script[data-id="schema-org-graph"]')
+          schemaRaw.value = $el?.innerText
+        }
+
+        // Create an observer instance linked to the callback function
+        observer = new MutationObserver(fetchSchema)
+
+        // Start observing the target node for configured mutations
+        observer.observe(document.body, {
+          childList: true,
+          characterData: true,
+          attributes: true,
+          subtree: true,
+        })
+
+        fetchSchema()
+      })
+    })
+
+    onBeforeUnmount(() => {
+      observer?.disconnect()
+    })
+
+    return () => {
+      return h('div', {
+        style: {
+          display: 'inline-block',
+        },
+      }, [h('div', {
+        style: {
+          backgroundColor: '#282839',
+          color: '#c5c6c9',
+          padding: '5px',
+          borderRadius: '5px',
+          width: '900px',
+          height: '600px',
+          overflowY: 'auto',
+          boxShadow: '3px 4px 15px rgb(0 0 0 / 10%)',
+        },
+      }, [
+        h('pre', { style: { textAlign: 'left' } }, schemaRaw.value),
+      ])])
+    }
+  },
+})

packages/schema-org/runtime/components/SchemaOrgInspector.ts

@@ -1,2 +1,2 @@
 export * from './nodes'
-export * from './SchemaOrgInspector'
+export * from './SchemaOrgDebug'

packages/schema-org/runtime/components/index.ts

@@ -37,6 +37,6 @@ export const schemaOrgAutoImports = [
 ]
 
 export const schemaOrgComponents = [
-  'SchemaOrgInspector',
+  'SchemaOrgDebug',
   ...RootSchemas.map(s => `SchemaOrg${s}`),
 ]

packages/schema-org/src/meta.ts

@@ -95,6 +95,11 @@ const nav = [
         </div>
         <NuxtPage />
       </div>
+      <div>
+        <div>
+          <SchemaOrgDebug />
+        </div>
+      </div>
     </div>
   </div>
 </div>