@bakery-framework/plugin-vue 2.2.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakery-framework/plugin-vue",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Bakery vue plugin.",
   "keywords": [
     "bakery",
@@ -43,7 +43,7 @@
     "vue": "^3.5.38"
   },
   "dependencies": {
-    "@bakery-framework/core": "^2.2.0"
+    "@bakery-framework/core": "^2.2.1"
   },
   "engines": {
     "bun": ">=1.4.0"

package/src/compile.ts

@@ -138,15 +138,14 @@ export async function compileScriptBlock(
     }
   }
 
-  if (descriptor.script && descriptor.scriptSetup) {
-    const scriptLang = descriptor.script.lang || descriptor.script.attrs?.lang
-    if (scriptLang === 'ts') {
-      // If the script block is TypeScript, we need to compile it first before passing it to the Vue compiler
-      const compiledScript = await compileText(descriptor.script.content)
-      descriptor.script.content = compiledScript
-    }
-  }
-
+  // The blocks go to Vue as written, TypeScript included: `compileScript`
+  // reads TypeScript, and `compileText` below takes the types out of what it
+  // returns. A plain `<script lang="ts">` beside `<script setup>` used to be
+  // transpiled first and written back into `descriptor.script.content`, but
+  // Vue edits the whole file by the block's original offsets, so a rewritten
+  // block put its edits in the wrong places: an `export default` of options
+  // came out as `returnconst __default__ = MIT)` over the lines around it,
+  // and the module failed to parse.
   const { compileScript } = await loadCompiler()
   const result = compileScript(descriptor, {
     id,

package/src/handler.ts

@@ -351,11 +351,17 @@ export async function componentScript(options: {
     code = code.replace(RX_SERVER_DATA_TOKEN, () => serverData)
   }
 
+  // One element per component, holding every block, joined as `componentCss`
+  // joins them for a page. The element is per component so a module evaluated
+  // again replaces its styles rather than stacking a second copy; writing each
+  // block into it in turn, as this did, kept only the last block.
   if (!isRootScript) {
-    for (const style of compiled.styles) {
-      if (style.code) {
-        code += `;\n(function(){var k='__vu_css_${id}';var s=document.getElementById(k)||(function(){var el=document.createElement('style');el.id=k;document.head.appendChild(el);return el})();s.textContent=${JSON.stringify(style.code)}})()`
-      }
+    const css = compiled.styles
+      .map(style => style.code)
+      .filter(Boolean)
+      .join('\n\n')
+    if (css) {
+      code += `;\n(function(){var k='__vu_css_${id}';var s=document.getElementById(k)||(function(){var el=document.createElement('style');el.id=k;document.head.appendChild(el);return el})();s.textContent=${JSON.stringify(css)}})()`
     }
   }