fix: parse custom block code correctly. (#66)

playground/App.vue

@@ -4,6 +4,7 @@
     <TestBlockSrcImport/>
     <TestScopedCss/>
     <TestCssModules/>
+    <TestCustomBlock/>
     <TestHmr/>
     <TestAssets/>
     <TestJsx/>
@@ -15,6 +16,7 @@
 import TestBlockSrcImport from './src-import/TestBlockSrcImport.vue'
 import TestScopedCss from './css/TestScopedCss.vue'
 import TestCssModules from './css/TestCssModules.vue'
+import TestCustomBlock from './custom/TestCustomBlock.vue'
 import TestHmr from './hmr/TestHmr.vue'
 import TestAssets from './test-assets/TestAssets.vue'
 import TestJsx from './TestJsx.tsx'
@@ -26,6 +28,7 @@ export default {
     TestScopedCss,
     TestBlockSrcImport,
     TestCssModules,
+    TestCustomBlock,
     TestHmr,
     TestAssets,
     TestJsx,

playground/custom/TestCustomBlock.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <p class="custom-block">{{ custom }}</p>
+    <p class="custom-block-lang">{{ customLang }}</p>
+    <p class="custom-block-src">{{ customSrc }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TestCustomBlock',
+  data() {
+    return {
+      custom: '',
+      customLang: '',
+      customSrc: '',
+    }
+  },
+  created() {
+    this.custom = this.$options.__customBlock.custom
+    this.customLang = this.$options.__customBlock.customLang
+    this.customSrc = this.$options.__customBlock.customSrc
+  },
+}
+</script>
+
+<custom>
+export default {
+  "custom": "Custom Block"
+}
+</custom>
+
+<custom lang="json">
+{
+  "customLang": "Custom Block"
+}
+</custom>
+
+<custom src="./custom.json"></custom>

playground/custom/custom.json

@@ -0,0 +1,3 @@
+{
+  "customSrc": "Custom Block"
+}

playground/vite.config.ts

@@ -11,7 +11,29 @@ const config = defineConfig({
     // sourcemap: true,
     minify: false,
   },
-  plugins: [createVuePlugin({ jsx: true })],
+  plugins: [
+    createVuePlugin({ jsx: true }),
+    {
+      name: 'customBlock',
+      transform(code, id) {
+        if (/type=custom/i.test(id)) {
+          const transformedAssginment = code
+            .trim()
+            .replace(/export default/, 'const __customBlock =')
+          return {
+            code: `${transformedAssginment}
+              export default function (component) {
+              const options = component.options;
+              if (!options.__customBlock) {
+                options.__customBlock = {};
+              }
+              Object.assign(options.__customBlock, __customBlock);
+            }`,
+          }
+        }
+      },
+    },
+  ],
 })
 
 export default config

src/main.ts

@@ -70,12 +70,12 @@ function injectStyles (context) {
 }\n`
 
   // custom block
-  code += genCustomBlockCode(filePath, descriptor)
+  result += await genCustomBlockCode(filePath, descriptor, pluginContext)
   // Expose filename. This is used by the devtools and Vue runtime warnings.
   if (options.isProduction) {
     // Expose the file's full path in development, so that it can be opened
     // from the devtools.
-    code += `\ncomponent.options.__file = ${JSON.stringify(
+    result += `\ncomponent.options.__file = ${JSON.stringify(
       path.relative(options.root, filePath).replace(/\\/g, '/')
     )}`
   }
@@ -194,20 +194,31 @@ async function genTemplateRequest(
   }
 }
 
-function genCustomBlockCode(filename: string, descriptor: SFCDescriptor) {
+async function genCustomBlockCode(
+  filename: string,
+  descriptor: SFCDescriptor,
+  pluginContext: TransformPluginContext
+) {
   let code = ''
-  descriptor.customBlocks.forEach((block, index) => {
-    // if (block.src) {
-    //   linkSrcToDescriptor(block.src, descriptor)
-    // }
-    const src = filename
-    const attrsQuery = attrsToQuery(block.attrs, block.type)
-    // const srcQuery = block.src ? `&src` : ``
-    const query = `?vue&type=${block.type}&index=${index}${attrsQuery}`
-    const request = JSON.stringify(src + query)
-    code += `import block${index} from ${request}\n`
-    code += `if (typeof block${index} === 'function') block${index}(component)\n`
-  })
+  await Promise.all(
+    descriptor.customBlocks.map(async (block, index) => {
+      const blockSrc =
+        typeof block.attrs.src === 'string' ? block.attrs.src : ''
+      if (blockSrc) {
+        await linkSrcToDescriptor(blockSrc, filename, descriptor, pluginContext)
+      }
+      const src = blockSrc || filename
+      const attrsQuery = attrsToQuery(
+        block.attrs,
+        path.extname(blockSrc) || block.type
+      )
+      const srcQuery = block.attrs.src ? `&src` : ``
+      const query = `?vue&type=${block.type}&index=${index}${srcQuery}${attrsQuery}`
+      const request = JSON.stringify(src + query)
+      code += `import block${index} from ${request}\n`
+      code += `if (typeof block${index} === 'function') block${index}(component)\n`
+    })
+  )
   return code
 }
 

test/util.ts

@@ -172,6 +172,12 @@ export function declareTests(isBuild: boolean) {
     }
   })
 
+  test('SFC <custom>', async () => {
+    expect(await getText('.custom-block')).toMatch('Custom Block')
+    expect(await getText('.custom-block-lang')).toMatch('Custom Block')
+    expect(await getText('.custom-block-src')).toMatch('Custom Block')
+  })
+
   test('SFC src imports', async () => {
     expect(await getText('.src-imports-script')).toMatch('src="./script.ts"')
     const el = await getEl('.src-imports-style')