feat: abilities to compile, render html blocks as vue inline components

Signed-off-by: Neko Ayaka <[email protected]>

Author: nekomeowww

cspell.config.yaml

@@ -6,6 +6,7 @@ words:
   - antfu
   - codemirror
   - collab
+  - importmap
   - lezer
   - nolebase
   - Nólëbase

package.json

@@ -35,6 +35,7 @@
     "eslint": "^8.57.0",
     "hast-util-to-html": "^9.0.1",
     "obsidian": "^1.5.7",
+    "ofetch": "^1.3.4",
     "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-parse": "^11.0.0",

pnpm-lock.yaml

@@ -0,0 +1,64 @@
+import { $fetch } from 'ofetch'
+
+// https://github.com/unocss/unocss/blob/6d94efc56b0c966f25f46d8988b3fd30ebc189aa/packages/shared-docs/src/config.ts#L5
+const AsyncFunction = Object.getPrototypeOf(async () => { }).constructor
+
+// https://github.com/unocss/unocss/blob/6d94efc56b0c966f25f46d8988b3fd30ebc189aa/packages/shared-docs/src/config.ts#L7-L9
+const CDN_BASE = 'https://esm.sh/'
+const modulesCache = new Map<string, Promise<unknown> | unknown>()
+
+// https://github.com/unocss/unocss/blob/6d94efc56b0c966f25f46d8988b3fd30ebc189aa/packages/shared-docs/src/config.ts#L26
+// eslint-disable-next-line no-new-func
+const nativeImport = new Function('a', 'return import(a);')
+
+// https://github.com/unocss/unocss/blob/6d94efc56b0c966f25f46d8988b3fd30ebc189aa/packages/shared-docs/src/config.ts#L31-L33
+async function fetchAndImportAnyModuleWithCDNCapabilities(name: string) {
+  if (name.endsWith('.json')) {
+    const response = await $fetch(CDN_BASE + name, { responseType: 'json' })
+    return { default: response }
+  }
+
+  return nativeImport(CDN_BASE + name)
+}
+
+// https://github.com/unocss/unocss/blob/6d94efc56b0c966f25f46d8988b3fd30ebc189aa/packages/shared-docs/src/config.ts#L27-L37
+// bypass vite interop
+async function dynamicImportAnyModule(name: string): Promise<any> {
+  if (modulesCache.has(name))
+    return modulesCache.get(name)
+
+  try {
+    const module = await fetchAndImportAnyModuleWithCDNCapabilities(name)
+    modulesCache.set(name, module)
+  }
+  catch (error) {
+    console.error(`Failed to import module ${name} from CDN`, error)
+  }
+}
+
+// https://github.com/unocss/unocss/blob/main/packages/shared-docs/src/config.ts
+const importUnocssRegex = /import\s(.*?)\sfrom\s*(['"])unocss\2/g
+const importObjectRegex = /import\s*\{([\s\S]*?)\}\s*from\s*(['"])([\w@/-]+)\2/g
+const importDefaultRegex = /import\s(.*?)\sfrom\s*(['"])([\w@/-]+)\2/g
+const exportDefaultRegex = /export default /
+const importRegex = /\bimport\s*\(/g
+
+// New regex to handle `as` to `:` transformation
+const importAsRegex = /(\w+)\s+as\s+(\w+)/g
+
+// https://github.com/unocss/unocss/blob/main/packages/shared-docs/src/config.ts
+export async function evaluateAnyModule<T = any>(configCode: string): Promise<T | undefined> {
+  const transformedCode = configCode
+    .replace(importUnocssRegex, 'const $1 = await __import("unocss");')
+    .replace(importObjectRegex, (match, p1, p2, p3) => {
+      // Replace `as` with `:` within the destructuring assignment
+      const transformedP1 = p1.replace(importAsRegex, '$1: $2')
+      return `const {${transformedP1}} = await __import("${p3}");`
+    })
+    .replace(importDefaultRegex, 'const $1 = (await __import("$3")).default;')
+    .replace(exportDefaultRegex, 'return ')
+    .replace(importRegex, '__import(')
+
+  const wrappedDynamicImport = new AsyncFunction('__import', transformedCode)
+  return await wrappedDynamicImport(dynamicImportAnyModule)
+}

src/import.ts

@@ -2,6 +2,7 @@ import { Plugin } from 'obsidian'
 import type { EditorView, PluginValue, ViewUpdate } from '@codemirror/view'
 import { ViewPlugin } from '@codemirror/view'
 import { type App, createApp, defineComponent, h } from 'vue'
+import * as Vue from 'vue'
 import { compileTemplate } from '@vue/compiler-sfc'
 
 import { unified } from 'unified'
@@ -11,6 +12,8 @@ import RehypeRaw from 'rehype-raw'
 import { remove } from 'unist-util-remove'
 import { toHtml } from 'hast-util-to-html'
 
+import { evaluateAnyModule } from './import'
+
 function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms))
 }
@@ -40,6 +43,8 @@ class VueViewPlugin implements PluginValue {
 
   async init() {
     await this.waitForViewDOM()
+    const anyGlobalThis = globalThis as any
+    anyGlobalThis.Vue = Vue
 
     // eslint-disable-next-line no-console
     console.log('view ready', this.view.dom)
@@ -50,6 +55,8 @@ class VueViewPlugin implements PluginValue {
       vueDom.classList.add('.obsidian-plugin-vue')
     }
 
+    this.vueInstance?.unmount()
+
     const parsedMarkdownAst = await unified()
       .use(RemarkParse)
       .use(() => tree => remove(tree, 'heading'))
@@ -63,6 +70,8 @@ class VueViewPlugin implements PluginValue {
       .run(parsedMarkdownAst)
 
     let index = 0
+    const renderFunctions: Array<() => void> = []
+
     for (const node of transformedHast.children) {
       index++
 
@@ -73,22 +82,26 @@ class VueViewPlugin implements PluginValue {
         source: componentTemplateStr,
         filename: `some-${index}`,
         id: index.toString(),
+        compilerOptions: {
+          mode: 'function',
+        },
       })
       if (errors.length) {
         console.error(errors)
         throw new Error('Failed to compile template')
       }
 
-      // eslint-disable-next-line no-console
-      console.log(code)
-    }
+      const res = await evaluateAnyModule<() => void>(code)
+      if (!res)
+        continue
 
-    this.vueInstance?.unmount()
+      renderFunctions.push(res)
+    }
 
     const comp = defineComponent({
       setup() {
         return () => [
-          h('div', 'Hello World'),
+          h('div', { class: 'obsidian-plugin-vue' }, renderFunctions.map(fn => fn())),
         ]
       },
     })