@vue/language-core 2.0.7 → 2.0.10

package/lib/plugins/vue-sfc-styles.js

@@ -5,21 +5,47 @@ const plugin = () => {
     return {
         version: 2,
         getEmbeddedCodes(_fileName, sfc) {
-            return sfc.styles.map((style, i) => ({
-                id: 'style_' + i,
-                lang: style.lang,
-            }));
+            const result = [];
+            for (let i = 0; i < sfc.styles.length; i++) {
+                const style = sfc.styles[i];
+                if (style) {
+                    result.push({
+                        id: 'style_' + i,
+                        lang: style.lang,
+                    });
+                    if (style.cssVars.length) {
+                        result.push({
+                            id: 'style_' + i + '_inline_ts',
+                            lang: 'ts',
+                        });
+                    }
+                }
+            }
+            return result;
         },
         resolveEmbeddedCode(_fileName, sfc, embeddedFile) {
             if (embeddedFile.id.startsWith('style_')) {
-                const index = parseInt(embeddedFile.id.slice('style_'.length));
+                const index = parseInt(embeddedFile.id.split('_')[1]);
                 const style = sfc.styles[index];
-                embeddedFile.content.push([
-                    style.content,
-                    style.name,
-                    0,
-                    (0, utils_1.enableAllFeatures)({}),
-                ]);
+                if (embeddedFile.id.endsWith('_inline_ts')) {
+                    embeddedFile.parentCodeId = 'style_' + index;
+                    for (const cssVar of style.cssVars) {
+                        embeddedFile.content.push('(', [
+                            cssVar.text,
+                            style.name,
+                            cssVar.offset,
+                            (0, utils_1.enableAllFeatures)({}),
+                        ], ');\n');
+                    }
+                }
+                else {
+                    embeddedFile.content.push([
+                        style.content,
+                        style.name,
+                        0,
+                        (0, utils_1.enableAllFeatures)({}),
+                    ]);
+                }
             }
         },
     };

package/lib/plugins/vue-template-inline-css.d.ts

@@ -0,0 +1,3 @@
+import type { VueLanguagePlugin } from '../types';
+declare const plugin: VueLanguagePlugin;
+export default plugin;

package/lib/plugins/vue-template-inline-css.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const inlineCss_1 = require("../generators/inlineCss");
+const plugin = () => {
+    return {
+        version: 2,
+        getEmbeddedCodes(_fileName, sfc) {
+            if (!sfc.template?.ast) {
+                return [];
+            }
+            return [{ id: 'template_inline_css', lang: 'css' }];
+        },
+        resolveEmbeddedCode(_fileName, sfc, embeddedFile) {
+            if (embeddedFile.id !== 'template_inline_css' || !sfc.template?.ast) {
+                return;
+            }
+            embeddedFile.parentCodeId = 'template';
+            embeddedFile.content.push(...(0, inlineCss_1.generate)(sfc.template.ast));
+        },
+    };
+};
+exports.default = plugin;
+//# sourceMappingURL=vue-template-inline-css.js.map

package/lib/plugins/vue-template-inline-ts.d.ts

@@ -0,0 +1,3 @@
+import type { VueLanguagePlugin } from '../types';
+declare const plugin: VueLanguagePlugin;
+export default plugin;

package/lib/plugins/vue-template-inline-ts.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_1 = require("../generators/template");
+const utils_1 = require("../generators/utils");
+const CompilerDOM = require("@vue/compiler-dom");
+const codeFeatures = (0, utils_1.disableAllFeatures)({
+    format: true,
+    // autoInserts: true, // TODO: support vue-autoinsert-parentheses
+});
+const formatBrackets = {
+    normal: ['`${', '}`;'],
+    if: ['if (', ') { }'],
+    for: ['for (', ') { }'],
+    // fix https://github.com/vuejs/language-tools/issues/3572
+    params: ['(', ') => {};'],
+    // fix https://github.com/vuejs/language-tools/issues/1210
+    // fix https://github.com/vuejs/language-tools/issues/2305
+    curly: ['0 +', '+ 0;'],
+    event: ['() => ', ';'],
+};
+const plugin = ctx => {
+    const parseds = new WeakMap();
+    return {
+        version: 2,
+        getEmbeddedCodes(_fileName, sfc) {
+            if (!sfc.template?.ast) {
+                return [];
+            }
+            const parsed = parse(sfc);
+            parseds.set(sfc, parsed);
+            const result = [];
+            for (const [id] of parsed) {
+                result.push({ id, lang: 'ts' });
+            }
+            return result;
+        },
+        resolveEmbeddedCode(_fileName, sfc, embeddedFile) {
+            // access template content to watch change
+            (() => sfc.template?.content)();
+            const parsed = parseds.get(sfc);
+            if (parsed) {
+                const codes = parsed.get(embeddedFile.id);
+                if (codes) {
+                    embeddedFile.content.push(...codes);
+                    embeddedFile.parentCodeId = 'template';
+                }
+            }
+        },
+    };
+    function parse(sfc) {
+        const data = new Map();
+        if (!sfc.template?.ast) {
+            return data;
+        }
+        const templateContent = sfc.template.content;
+        let i = 0;
+        sfc.template.ast.children.forEach(visit);
+        return data;
+        function visit(node) {
+            if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
+                for (const prop of node.props) {
+                    if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE) {
+                        continue;
+                    }
+                    const isShorthand = prop.arg?.loc.start.offset === prop.exp?.loc.start.offset; // vue 3.4+
+                    if (isShorthand) {
+                        continue;
+                    }
+                    if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && !prop.arg.isStatic) {
+                        addFormatCodes(prop.arg.content, prop.arg.loc.start.offset, formatBrackets.normal);
+                    }
+                    if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                        && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY // style='z-index: 2' will compile to {'z-index':'2'}
+                    ) {
+                        if (prop.name === 'on') {
+                            const ast = (0, template_1.createTsAst)(ctx.modules.typescript, prop.exp, prop.exp.content);
+                            addFormatCodes(prop.exp.content, prop.exp.loc.start.offset, (0, template_1.isCompoundExpression)(ctx.modules.typescript, ast)
+                                ? formatBrackets.event
+                                : formatBrackets.normal);
+                        }
+                        else {
+                            addFormatCodes(prop.exp.content, prop.exp.loc.start.offset, formatBrackets.normal);
+                        }
+                    }
+                }
+                for (const child of node.children) {
+                    visit(child);
+                }
+            }
+            else if (node.type === CompilerDOM.NodeTypes.IF) {
+                for (let i = 0; i < node.branches.length; i++) {
+                    const branch = node.branches[i];
+                    if (branch.condition?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                        addFormatCodes(branch.condition.content, branch.condition.loc.start.offset, formatBrackets.if);
+                    }
+                    for (const childNode of branch.children) {
+                        visit(childNode);
+                    }
+                }
+            }
+            else if (node.type === CompilerDOM.NodeTypes.FOR) {
+                const { leftExpressionRange, leftExpressionText } = (0, template_1.parseVForNode)(node);
+                const { source } = node.parseResult;
+                if (leftExpressionRange && leftExpressionText && source.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                    const start = leftExpressionRange.start;
+                    const end = source.loc.start.offset + source.content.length;
+                    addFormatCodes(templateContent.substring(start, end), start, formatBrackets.for);
+                }
+                for (const child of node.children) {
+                    visit(child);
+                }
+            }
+            else if (node.type === CompilerDOM.NodeTypes.TEXT_CALL) {
+                // {{ var }}
+                visit(node.content);
+            }
+            else if (node.type === CompilerDOM.NodeTypes.COMPOUND_EXPRESSION) {
+                // {{ ... }} {{ ... }}
+                for (const childNode of node.children) {
+                    if (typeof childNode === 'object') {
+                        visit(childNode);
+                    }
+                }
+            }
+            else if (node.type === CompilerDOM.NodeTypes.INTERPOLATION) {
+                // {{ ... }}
+                const [content, start] = (0, template_1.parseInterpolationNode)(node, templateContent);
+                const lines = content.split('\n');
+                addFormatCodes(content, start, lines.length <= 1 ? formatBrackets.curly : [
+                    lines[0].trim() === '' ? '(' : formatBrackets.curly[0],
+                    lines[lines.length - 1].trim() === '' ? ');' : formatBrackets.curly[1],
+                ]);
+            }
+        }
+        function addFormatCodes(code, offset, wrapper) {
+            const id = 'template_inline_ts_' + i++;
+            data.set(id, [
+                wrapper[0],
+                [
+                    code,
+                    'template',
+                    offset,
+                    codeFeatures,
+                ],
+                wrapper[1],
+            ]);
+        }
+    }
+};
+exports.default = plugin;
+//# sourceMappingURL=vue-template-inline-ts.js.map

package/lib/plugins/vue-tsx.d.ts

@@ -53,6 +53,7 @@ export declare const tsCodegen: WeakMap<Sfc, {
             name: import("../types").TextRange | undefined;
             nameIsString: boolean;
             type: import("../types").TextRange | undefined;
+            modifierType?: import("../types").TextRange | undefined;
             defaultValue: import("../types").TextRange | undefined;
             required: boolean;
             isModel?: boolean | undefined;
@@ -67,10 +68,6 @@ export declare const tsCodegen: WeakMap<Sfc, {
     generatedTemplate: () => {
         codes: Code[];
         codeStacks: string[];
-        formatCodes: Code[];
-        formatCodeStacks: string[];
-        cssCodes: Code[];
-        cssCodeStacks: string[];
         tagOffsetsMap: Map<string, number[]>;
         accessedGlobalVariables: Set<string>;
         hasSlot: boolean;

package/lib/plugins/vue-tsx.js

@@ -5,7 +5,6 @@ const language_core_1 = require("@volar/language-core");
 const computeds_1 = require("computeds");
 const script_1 = require("../generators/script");
 const template_1 = require("../generators/template");
-const utils_1 = require("../generators/utils");
 const scriptRanges_1 = require("../parsers/scriptRanges");
 const scriptSetupRanges_1 = require("../parsers/scriptSetupRanges");
 exports.tsCodegen = new WeakMap();
@@ -22,10 +21,6 @@ const plugin = ctx => {
             if (['js', 'ts', 'jsx', 'tsx'].includes(tsx.lang())) {
                 files.push({ id: 'script_' + tsx.lang(), lang: tsx.lang() });
             }
-            if (sfc.template) {
-                files.push({ id: 'template_format', lang: 'ts' });
-                files.push({ id: 'template_style', lang: 'css' });
-            }
             return files;
         },
         resolveEmbeddedCode(fileName, sfc, embeddedFile) {
@@ -34,52 +29,11 @@ const plugin = ctx => {
                 const tsx = _tsx.generatedScript();
                 if (tsx) {
                     const [content, contentStacks] = ctx.codegenStack ? (0, language_core_1.track)([...tsx.codes], [...tsx.codeStacks]) : [[...tsx.codes], [...tsx.codeStacks]];
-                    content.forEach(code => {
-                        if (typeof code !== 'string') {
-                            code[3].structure = false;
-                            code[3].format = false;
-                        }
-                    });
                     embeddedFile.content = content;
                     embeddedFile.contentStacks = contentStacks;
                     embeddedFile.linkedCodeMappings = [...tsx.linkedCodeMappings];
                 }
             }
-            else if (embeddedFile.id === 'template_format') {
-                embeddedFile.parentCodeId = 'template';
-                const template = _tsx.generatedTemplate();
-                if (template) {
-                    const [content, contentStacks] = ctx.codegenStack
-                        ? (0, language_core_1.track)([...template.formatCodes], template.formatCodeStacks.map(stack => ({ stack, length: 1 })))
-                        : [[...template.formatCodes], template.formatCodeStacks.map(stack => ({ stack, length: 1 }))];
-                    embeddedFile.content = content;
-                    embeddedFile.contentStacks = contentStacks;
-                }
-                for (const style of sfc.styles) {
-                    embeddedFile.content.push('\n\n');
-                    for (const cssVar of style.cssVars) {
-                        embeddedFile.content.push('(');
-                        embeddedFile.content.push([
-                            cssVar.text,
-                            style.name,
-                            cssVar.offset,
-                            (0, utils_1.enableAllFeatures)({}),
-                        ]);
-                        embeddedFile.content.push(');\n');
-                    }
-                }
-            }
-            else if (embeddedFile.id === 'template_style') {
-                embeddedFile.parentCodeId = 'template';
-                const template = _tsx.generatedTemplate();
-                if (template) {
-                    const [content, contentStacks] = ctx.codegenStack
-                        ? (0, language_core_1.track)([...template.cssCodes], template.cssCodeStacks.map(stack => ({ stack, length: 1 })))
-                        : [[...template.cssCodes], template.cssCodeStacks.map(stack => ({ stack, length: 1 }))];
-                    embeddedFile.content = content;
-                    embeddedFile.contentStacks = contentStacks;
-                }
-            }
         },
     };
     function useTsx(fileName, sfc) {
@@ -130,34 +84,14 @@ function createTsx(fileName, _sfc, ctx) {
             return;
         }
         const tsCodes = [];
-        const tsFormatCodes = [];
-        const inlineCssCodes = [];
         const tsCodegenStacks = [];
-        const tsFormatCodegenStacks = [];
-        const inlineCssCodegenStacks = [];
         const codegen = (0, template_1.generate)(ts, ctx.compilerOptions, ctx.vueCompilerOptions, _sfc.template, shouldGenerateScopedClasses(), stylesScopedClasses(), hasScriptSetupSlots(), slotsAssignName(), propsAssignName(), ctx.codegenStack);
         let current = codegen.next();
         while (!current.done) {
-            const [type, code, stack] = current.value;
-            if (type === 'ts') {
-                tsCodes.push(code);
-            }
-            else if (type === 'tsFormat') {
-                tsFormatCodes.push(code);
-            }
-            else if (type === 'inlineCss') {
-                inlineCssCodes.push(code);
-            }
+            const [code, stack] = current.value;
+            tsCodes.push(code);
             if (ctx.codegenStack) {
-                if (type === 'ts') {
-                    tsCodegenStacks.push(stack);
-                }
-                else if (type === 'tsFormat') {
-                    tsFormatCodegenStacks.push(stack);
-                }
-                else if (type === 'inlineCss') {
-                    inlineCssCodegenStacks.push(stack);
-                }
+                tsCodegenStacks.push(stack);
             }
             current = codegen.next();
         }
@@ -165,10 +99,6 @@ function createTsx(fileName, _sfc, ctx) {
             ...current.value,
             codes: tsCodes,
             codeStacks: tsCodegenStacks,
-            formatCodes: tsFormatCodes,
-            formatCodeStacks: tsFormatCodegenStacks,
-            cssCodes: inlineCssCodes,
-            cssCodeStacks: inlineCssCodegenStacks,
         };
     });
     const hasScriptSetupSlots = (0, computeds_1.computed)(() => !!scriptSetupRanges()?.slots.define);

package/lib/plugins.js

@@ -9,6 +9,8 @@ const vue_sfc_scripts_1 = require("./plugins/vue-sfc-scripts");
 const vue_sfc_styles_1 = require("./plugins/vue-sfc-styles");
 const vue_sfc_template_1 = require("./plugins/vue-sfc-template");
 const vue_template_html_1 = require("./plugins/vue-template-html");
+const vue_template_inline_css_1 = require("./plugins/vue-template-inline-css");
+const vue_template_inline_ts_1 = require("./plugins/vue-template-inline-ts");
 const vue_tsx_1 = require("./plugins/vue-tsx");
 const types_1 = require("./types");
 function getDefaultVueLanguagePlugins(pluginContext) {
@@ -17,6 +19,8 @@ function getDefaultVueLanguagePlugins(pluginContext) {
         file_html_1.default, // .html for PetiteVue
         file_vue_1.default, // .vue and others for Vue
         vue_template_html_1.default,
+        vue_template_inline_css_1.default,
+        vue_template_inline_ts_1.default,
         vue_sfc_styles_1.default,
         vue_sfc_customblocks_1.default,
         vue_sfc_scripts_1.default,

package/lib/virtualFile/computedFiles.js

@@ -36,16 +36,7 @@ function computedFiles(plugins, fileName, sfc, codegenStack) {
                 break;
             }
         }
-        for (const { file, snapshot, mappings, codegenStacks } of remain) {
-            embeddedCodes.push({
-                id: file.id,
-                languageId: (0, language_core_1.resolveCommonLanguageId)(`/dummy.${file.lang}`),
-                linkedCodeMappings: file.linkedCodeMappings,
-                snapshot,
-                mappings,
-                codegenStacks,
-                embeddedCodes: [],
-            });
+        for (const { file } of remain) {
             console.error('Unable to resolve embedded: ' + file.parentCodeId + ' -> ' + file.id);
         }
         return embeddedCodes;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-core",
-	"version": "2.0.7",
+	"version": "2.0.10",
 	"license": "MIT",
 	"files": [
 		"**/*.js",
@@ -12,7 +12,7 @@
 		"directory": "packages/language-core"
 	},
 	"dependencies": {
-		"@volar/language-core": "~2.1.3",
+		"@volar/language-core": "~2.2.0-alpha.5",
 		"@vue/compiler-dom": "^3.4.0",
 		"@vue/shared": "^3.4.0",
 		"computeds": "^0.0.1",
@@ -34,5 +34,5 @@
 			"optional": true
 		}
 	},
-	"gitHead": "4a37e8f3ebcf31ecfd2ea627f7611d5990ec5df6"
+	"gitHead": "a20a2ee950b63a949660b7e8faf0faed0e5bad33"
 }