@vue/language-plugin-pug 3.2.4 → 3.2.5

package/README.md

@@ -1,17 +1,70 @@
-A `VueLanguagePlugin` to support `<template lang="pug">` for `@vue/language-server`.
+# @vue/language-plugin-pug
+
+<p>
+  <a href="https://www.npmjs.com/package/@vue/language-plugin-pug"><img src="https://img.shields.io/npm/v/@vue/language-plugin-pug.svg?labelColor=18181B&color=1584FC" alt="NPM version"></a>
+  <a href="https://github.com/vuejs/language-tools/blob/master/LICENSE"><img src="https://img.shields.io/github/license/vuejs/language-tools.svg?labelColor=18181B&color=1584FC" alt="License"></a>
+</p>
+
+A Pug template language plugin for Vue Language Tools, enabling the use of `<template lang="pug">` in Vue SFCs.
+
+## Installation
+
+```bash
+npm install @vue/language-plugin-pug --save-dev
+```
+
+## Configuration
+
+Add this plugin in `tsconfig.json`:
+
+```jsonc
+{
+  "vueCompilerOptions": {
+    "plugins": ["@vue/language-plugin-pug"]
+  }
+}
+```
 
 ## Usage
 
-1. Install
+After configuration, you can use Pug syntax in Vue components:
+
+```vue
+<template lang="pug">
+div.container
+  h1 {{ title }}
+  p {{ description }}
+  button(@click="handleClick") Click me
+</template>
+
+<script setup lang="ts">
+const title = 'Hello'
+const description = 'World'
+const handleClick = () => console.log('clicked')
+</script>
+```
+
+## Features
+
+This plugin implements the `VueLanguagePlugin` interface, providing:
+
+- **`getEmbeddedCodes`** - Identifies `<template lang="pug">` blocks
+- **`resolveEmbeddedCode`** - Extracts Pug content as embedded code
+- **`compileSFCTemplate`** - Compiles Pug to HTML, then parses it into an AST using `@vue/compiler-dom`
+
+## How it Works
+
+1. Uses `pug-lexer` to convert Pug syntax into tokens
+2. Uses `pug-parser` to parse tokens into an AST
+3. Traverses the AST to generate HTML while building a source map
+4. Uses `@vue/compiler-dom.parse` to parse the HTML
+5. Uses `@vue/compiler-dom.transform` to transform the AST
+6. Maps error and warning positions back to the original Pug code via the source map
+
+## Related Packages
 
-   `$ npm i -D @vue/language-plugin-pug`
+- [`@vue/language-core`](../language-core) - Core module
 
-2. Add to `tsconfig.json`
+## License
 
-   ```jsonc
-	{
-		"vueCompilerOptions": {
-			"plugins": ["@vue/language-plugin-pug"]
-		}
-	}
-   ```
+[MIT](https://github.com/vuejs/language-tools/blob/master/LICENSE) License

package/lib/baseParse.js

@@ -207,14 +207,21 @@ function baseParse(pugCode) {
                     addPrevSpace(attrToken);
                     if (attrToken.type === 'attribute') {
                         let attrText = pugCode.substring(getDocOffset(attrToken.loc.start.line, attrToken.loc.start.column), getDocOffset(attrToken.loc.end.line, attrToken.loc.end.column));
-                        if (typeof attrToken.val === 'string' && attrText.indexOf('=') >= 0) {
+                        if (typeof attrToken.val === 'string' && attrText.includes('=')) {
                             let valText = attrToken.val;
                             if (valText.startsWith('`') && valText.endsWith('`')) {
-                                if (valText.indexOf('"') === -1) {
-                                    valText = `"${valText.slice(1, -1)}"`;
+                                const innerContent = valText.slice(1, -1);
+                                if (!innerContent.includes('"')) {
+                                    valText = `"${innerContent}"`;
+                                }
+                                else if (!innerContent.includes("'")) {
+                                    valText = `'${innerContent}'`;
                                 }
                                 else {
-                                    valText = `'${valText.slice(1, -1)}'`;
+                                    // Both quote types present: convert inner single quotes to double quotes
+                                    // This allows using single quotes as the outer delimiter
+                                    // JavaScript accepts both 'str' and "str" for string literals
+                                    valText = `'${innerContent.replace(/'/g, '"')}'`;
                                 }
                             }
                             valText = valText.replace(/ \\\n/g, '//\n');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-plugin-pug",
-	"version": "3.2.4",
+	"version": "3.2.5",
 	"license": "MIT",
 	"files": [
 		"**/*.js",
@@ -13,7 +13,7 @@
 		"directory": "packages/language-plugin-pug"
 	},
 	"dependencies": {
-		"@volar/source-map": "2.4.27",
+		"@volar/source-map": "2.4.28",
 		"muggle-string": "^0.4.1",
 		"pug-lexer": "^5.0.1",
 		"pug-parser": "^6.0.0",
@@ -22,7 +22,7 @@
 	"devDependencies": {
 		"@types/node": "^22.10.4",
 		"@vue/compiler-dom": "^3.5.0",
-		"@vue/language-core": "3.2.4"
+		"@vue/language-core": "3.2.5"
 	},
-	"gitHead": "f0ede303fadb192a59068b4b667b0405523d24c8"
+	"gitHead": "ee5041d27940cf6f9a5150635d3b13140a9dff54"
 }