Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-loader
Advanced tools
vue-loader - npm Package Compare versions
Comparing version 16.5.0 to 16.6.0
@@ -0,1 +1,15 @@ | ||
| # [16.6.0](https://github.com/vuejs/vue-loader/compare/v16.5.0...v16.6.0) (2021-09-20) | ||
| ### Bug Fixes | ||
| * generate treeshaking friendly code ([11e3cb8](https://github.com/vuejs/vue-loader/commit/11e3cb8a8a4a4e0aedc2978ce6d7e549a61de3d7)) | ||
| ### Features | ||
| * support ts in template expressions ([573fbd2](https://github.com/vuejs/vue-loader/commit/573fbd2e72c3246c2daadb8d8c053464c964cfe3)) | ||
| # [16.5.0](https://github.com/vuejs/vue-loader/compare/v16.4.1...v16.5.0) (2021-08-07) | ||
@@ -5,2 +19,6 @@ | ||
| # [16.5.0](https://github.com/vuejs/vue-loader/compare/v16.4.1...v16.5.0) (2021-08-07) | ||
| * Custom Elements mode behavior changed: now only inlines the CSS and no longer exports the custom element constructor (exports the component as in normal mode). Users now need to explicitly call `defineCustomElement` on the component. This allows the custom element to be defined using an async version of the source component. | ||
| ## [16.4.1](https://github.com/vuejs/vue-loader/compare/v16.4.0...v16.4.1) (2021-08-02) | ||
@@ -7,0 +25,0 @@ |
@@ -22,3 +22,3 @@ "use strict"; | ||
| const source = fs.readFileSync(filename, 'utf-8'); | ||
| const { descriptor } = compiler_sfc_1.parse(source, { | ||
| const { descriptor } = (0, compiler_sfc_1.parse)(source, { | ||
| filename, | ||
@@ -25,0 +25,0 @@ sourceMap: true, |
@@ -13,5 +13,5 @@ "use strict"; | ||
| const filePath = chalk.gray(`at ${file}${locString}`); | ||
| const codeframe = compiler_sfc_1.generateCodeFrame(source, loc.start.offset, loc.end.offset); | ||
| const codeframe = (0, compiler_sfc_1.generateCodeFrame)(source, loc.start.offset, loc.end.offset); | ||
| err.message = `\n${chalk.red(`VueCompilerError: ${err.message}`)}\n${filePath}\n${chalk.yellow(codeframe)}\n`; | ||
| } | ||
| exports.formatError = formatError; |
@@ -25,5 +25,11 @@ "use strict"; | ||
| let errorEmitted = false; | ||
| const exportHelperPath = JSON.stringify(require.resolve('./exportHelper')); | ||
| function loader(source) { | ||
| var _a; | ||
| const loaderContext = this; | ||
| if (!/\.vue(\.html)?$/.test(loaderContext.resourcePath)) { | ||
| // ts-loader does some really weird stuff which causes vue-loader to | ||
| // somehow be applied on non-vue files... ignore them | ||
| return source; | ||
| } | ||
| // check if plugin is installed | ||
@@ -46,3 +52,3 @@ if (!errorEmitted && | ||
| const filename = resourcePath.replace(/\?.*$/, ''); | ||
| const { descriptor, errors } = compiler_sfc_1.parse(source, { | ||
| const { descriptor, errors } = (0, compiler_sfc_1.parse)(source, { | ||
| filename, | ||
@@ -55,6 +61,6 @@ sourceMap, | ||
| // cache descriptor | ||
| descriptorCache_1.setDescriptor(filename, descriptor); | ||
| (0, descriptorCache_1.setDescriptor)(filename, descriptor); | ||
| if (errors.length) { | ||
| errors.forEach((err) => { | ||
| formatError_1.formatError(err, source, resourcePath); | ||
| (0, formatError_1.formatError)(err, source, resourcePath); | ||
| loaderContext.emitError(err); | ||
@@ -76,3 +82,3 @@ }); | ||
| if (incomingQuery.type) { | ||
| return select_1.selectBlock(descriptor, id, options, loaderContext, incomingQuery, !!options.appendExtension); | ||
| return (0, select_1.selectBlock)(descriptor, id, options, loaderContext, incomingQuery, !!options.appendExtension); | ||
| } | ||
@@ -85,6 +91,12 @@ // feature information | ||
| options.hotReload !== false; | ||
| // extra properties to attach to the script object | ||
| // we need to do this in a tree-shaking friendly manner | ||
| const propsToAttach = []; | ||
| // script | ||
| let scriptImport = `const script = {}`; | ||
| let isTS = false; | ||
| const { script, scriptSetup } = descriptor; | ||
| if (script || scriptSetup) { | ||
| const lang = (script === null || script === void 0 ? void 0 : script.lang) || (scriptSetup === null || scriptSetup === void 0 ? void 0 : scriptSetup.lang); | ||
| isTS = !!(lang && /tsx?/.test(lang)); | ||
| const src = (script && !scriptSetup && script.src) || resourcePath; | ||
@@ -103,3 +115,3 @@ const attrsQuery = attrsToQuery((scriptSetup || script).attrs, 'js'); | ||
| const renderFnName = isServer ? `ssrRender` : `render`; | ||
| const useInlineTemplate = resolveScript_1.canInlineTemplate(descriptor, isProduction); | ||
| const useInlineTemplate = (0, resolveScript_1.canInlineTemplate)(descriptor, isProduction); | ||
| if (descriptor.template && !useInlineTemplate) { | ||
@@ -110,11 +122,7 @@ const src = descriptor.template.src || resourcePath; | ||
| const attrsQuery = attrsToQuery(descriptor.template.attrs); | ||
| // const bindingsQuery = script | ||
| // ? `&bindings=${JSON.stringify(script.bindings ?? {})}` | ||
| // : `` | ||
| // const varsQuery = descriptor.cssVars | ||
| // ? `&vars=${qs.escape(generateCssVars(descriptor, id, isProduction))}` | ||
| // : `` | ||
| const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${resourceQuery}`; | ||
| const tsQuery = isTS ? `&ts=true` : ``; | ||
| const query = `?vue&type=template${idQuery}${scopedQuery}${tsQuery}${attrsQuery}${resourceQuery}`; | ||
| templateRequest = stringifyRequest(src + query); | ||
| templateImport = `import { ${renderFnName} } from ${templateRequest}`; | ||
| propsToAttach.push([renderFnName, renderFnName]); | ||
| } | ||
@@ -142,6 +150,7 @@ // styles | ||
| if (!hasCSSModules) { | ||
| stylesCode += `\nconst cssModules = script.__cssModules = {}`; | ||
| stylesCode += `\nconst cssModules = {}`; | ||
| propsToAttach.push([`__cssModules`, `cssModules`]); | ||
| hasCSSModules = true; | ||
| } | ||
| stylesCode += cssModules_1.genCSSModulesCode(id, i, styleRequest, style.module, needsHotReload); | ||
| stylesCode += (0, cssModules_1.genCSSModulesCode)(id, i, styleRequest, style.module, needsHotReload); | ||
| } | ||
@@ -159,11 +168,9 @@ else { | ||
| if (asCustomElement) { | ||
| stylesCode += `\nscript.styles = [${descriptor.styles.map((_, i) => `_style_${i}`)}]`; | ||
| propsToAttach.push([ | ||
| `styles`, | ||
| `[${descriptor.styles.map((_, i) => `_style_${i}`)}]`, | ||
| ]); | ||
| } | ||
| } | ||
| let code = [ | ||
| templateImport, | ||
| scriptImport, | ||
| stylesCode, | ||
| templateImport ? `script.${renderFnName} = ${renderFnName}` : ``, | ||
| ] | ||
| let code = [templateImport, scriptImport, stylesCode] | ||
| .filter(Boolean) | ||
@@ -173,6 +180,6 @@ .join('\n'); | ||
| if (hasScoped) { | ||
| code += `\nscript.__scopeId = "data-v-${id}"`; | ||
| propsToAttach.push([`__scopeId`, `"data-v-${id}"`]); | ||
| } | ||
| if (needsHotReload) { | ||
| code += hotReload_1.genHotReloadCode(id, templateRequest); | ||
| code += (0, hotReload_1.genHotReloadCode)(id, templateRequest); | ||
| } | ||
@@ -183,3 +190,6 @@ // Expose filename. This is used by the devtools and Vue runtime warnings. | ||
| // from the devtools. | ||
| code += `\nscript.__file = ${JSON.stringify(rawShortFilePath.replace(/\\/g, '/'))}`; | ||
| propsToAttach.push([ | ||
| `__file`, | ||
| JSON.stringify(rawShortFilePath.replace(/\\/g, '/')), | ||
| ]); | ||
| } | ||
@@ -189,3 +199,3 @@ else if (options.exposeFilename) { | ||
| // For security reasons, only expose the file's basename in production. | ||
| code += `\nscript.__file = ${JSON.stringify(path.basename(resourcePath))}`; | ||
| propsToAttach.push([`__file`, JSON.stringify(path.basename(resourcePath))]); | ||
| } | ||
@@ -206,3 +216,3 @@ // custom blocks | ||
| return (`import block${i} from ${stringifyRequest(src + query)}\n` + | ||
| `if (typeof block${i} === 'function') block${i}(script)`); | ||
| `if (typeof block${i} === 'function') /*#__PURE__*/block${i}(script)`); | ||
| }) | ||
@@ -212,3 +222,11 @@ .join(`\n`) + `\n`; | ||
| // finalize | ||
| code += `\n\nexport default script`; | ||
| if (!propsToAttach.length) { | ||
| code += `\n\nexport default script`; | ||
| } | ||
| else { | ||
| code += `\n\nimport exportComponent from ${exportHelperPath}`; | ||
| code += `\nexport default /*#__PURE__*/exportComponent(script, [${propsToAttach | ||
| .map(([key, val]) => `['${key}',${val}]`) | ||
| .join(',')}])`; | ||
| } | ||
| return code; | ||
@@ -215,0 +233,0 @@ } |
@@ -18,3 +18,3 @@ "use strict"; | ||
| // and transform it into appropriate requests. | ||
| exports.pitch = function () { | ||
| const pitch = function () { | ||
| const context = this; | ||
@@ -72,2 +72,3 @@ const rawLoaders = context.loaders.filter(isNotPitcher); | ||
| }; | ||
| exports.pitch = pitch; | ||
| function genProxyModule(loaders, context, exportDefault = true) { | ||
@@ -74,0 +75,0 @@ const request = genRequest(loaders, context); |
@@ -57,3 +57,3 @@ "use strict"; | ||
| }; | ||
| // for each rule that matches plain .js files, also create a clone and | ||
| // for each rule that matches plain .js/.ts files, also create a clone and | ||
| // match it against the compiled template code inside *.vue files, so that | ||
@@ -63,4 +63,5 @@ // compiled vue render functions receive the same treatment as user code | ||
| const matchesJS = createMatcher(`test.js`); | ||
| const matchesTS = createMatcher(`test.ts`); | ||
| const jsRulesForRenderFn = rules | ||
| .filter((r) => r !== vueRule && matchesJS(r)) | ||
| .filter((r) => r !== vueRule && (matchesJS(r) || matchesTS(r))) | ||
| .map(cloneRuleForRenderFn); | ||
@@ -145,3 +146,3 @@ // pitcher for block requests (for injecting stylePostLoader and deduping | ||
| } | ||
| const fakeResourcePath = `${currentResource}.js`; | ||
| const fakeResourcePath = `${currentResource}.${parsed.ts ? `ts` : `js`}`; | ||
| if (resource && !resource(fakeResourcePath)) { | ||
@@ -148,0 +149,0 @@ return false; |
@@ -119,3 +119,4 @@ "use strict"; | ||
| const jsRulesForRenderFn = rules | ||
| .filter((r) => r !== rawVueRule && match(r, 'test.js').length > 0) | ||
| .filter((r) => r !== rawVueRule && | ||
| (match(r, 'test.js').length > 0 || match(r, 'test.ts').length > 0)) | ||
| .map((rawRule) => cloneRule(rawRule, refs, jsRuleCheck, jsRuleResource)); | ||
@@ -166,3 +167,3 @@ // global pitcher (responsible for injecting template compiler loader & CSS | ||
| }; | ||
| const jsRuleResource = (query, resource) => `${resource}.js`; | ||
| const jsRuleResource = (query, resource) => `${resource}.${query.ts ? `ts` : `js`}`; | ||
| let uid = 0; | ||
@@ -169,0 +170,0 @@ function cloneRule(rawRule, refs, ruleCheck, ruleResource) { |
@@ -5,2 +5,3 @@ "use strict"; | ||
| const compiler_sfc_1 = require("@vue/compiler-sfc"); | ||
| const util_1 = require("./util"); | ||
| const clientCache = new WeakMap(); | ||
@@ -43,3 +44,3 @@ const serverCache = new WeakMap(); | ||
| try { | ||
| resolved = compiler_sfc_1.compileScript(descriptor, { | ||
| resolved = (0, compiler_sfc_1.compileScript)(descriptor, { | ||
| id: scopeId, | ||
@@ -53,3 +54,3 @@ isProd, | ||
| compiler, | ||
| compilerOptions: options.compilerOptions, | ||
| compilerOptions: Object.assign(Object.assign({}, options.compilerOptions), (0, util_1.resolveTemplateTSOptions)(descriptor, options.compilerOptions)), | ||
| transformAssetUrls: options.transformAssetUrls || true, | ||
@@ -56,0 +57,0 @@ }, |
@@ -19,3 +19,3 @@ "use strict"; | ||
| if (query.type === `script`) { | ||
| const script = resolveScript_1.resolveScript(descriptor, scopeId, options, loaderContext); | ||
| const script = (0, resolveScript_1.resolveScript)(descriptor, scopeId, options, loaderContext); | ||
| if (appendExtension) { | ||
@@ -22,0 +22,0 @@ loaderContext.resourcePath += '.' + (script.lang || 'js'); |
@@ -10,3 +10,3 @@ "use strict"; | ||
| const query = qs.parse(this.resourceQuery.slice(1)); | ||
| const { code, map, errors } = compiler_sfc_1.compileStyle({ | ||
| const { code, map, errors } = (0, compiler_sfc_1.compileStyle)({ | ||
| source: source, | ||
@@ -13,0 +13,0 @@ filename: this.resourcePath, |
@@ -9,2 +9,3 @@ "use strict"; | ||
| const resolveScript_1 = require("./resolveScript"); | ||
| const util_1 = require("./util"); | ||
| // Loader that compiles raw template into JavaScript functions. | ||
@@ -17,2 +18,7 @@ // This is injected by the global pitcher (../pitch) for template | ||
| const loaderContext = this; | ||
| if (/\.[jt]sx?$/.test(loaderContext.resourcePath)) { | ||
| // ts-loader does some really weird stuff which causes vue-loader to | ||
| // somehow be applied on non-vue files... ignore them | ||
| return source; | ||
| } | ||
| // although this is not the main vue-loader, we can get access to the same | ||
@@ -27,4 +33,4 @@ // vue-loader options because we've set an ident in the plugin and used that | ||
| const scopeId = query.id; | ||
| const descriptor = descriptorCache_1.getDescriptor(loaderContext.resourcePath); | ||
| const script = resolveScript_1.resolveScript(descriptor, query.id, options, loaderContext); | ||
| const descriptor = (0, descriptorCache_1.getDescriptor)(loaderContext.resourcePath); | ||
| const script = (0, resolveScript_1.resolveScript)(descriptor, query.id, options, loaderContext); | ||
| let compiler; | ||
@@ -37,3 +43,3 @@ if (typeof options.compiler === 'string') { | ||
| } | ||
| const compiled = compiler_sfc_1.compileTemplate({ | ||
| const compiled = (0, compiler_sfc_1.compileTemplate)({ | ||
| source, | ||
@@ -49,3 +55,3 @@ filename: loaderContext.resourcePath, | ||
| compiler, | ||
| compilerOptions: Object.assign(Object.assign({}, options.compilerOptions), { scopeId: query.scoped ? `data-v-${scopeId}` : undefined, bindingMetadata: script ? script.bindings : undefined }), | ||
| compilerOptions: Object.assign(Object.assign(Object.assign({}, options.compilerOptions), { scopeId: query.scoped ? `data-v-${scopeId}` : undefined, bindingMetadata: script ? script.bindings : undefined }), (0, util_1.resolveTemplateTSOptions)(descriptor, options.compilerOptions)), | ||
| transformAssetUrls: options.transformAssetUrls || true, | ||
@@ -66,3 +72,3 @@ }); | ||
| else { | ||
| formatError_1.formatError(err, inMap ? inMap.sourcesContent[0] : source, loaderContext.resourcePath); | ||
| (0, formatError_1.formatError)(err, inMap ? inMap.sourcesContent[0] : source, loaderContext.resourcePath); | ||
| loaderContext.emitError(err); | ||
@@ -69,0 +75,0 @@ } |
| { | ||
| "name": "vue-loader", | ||
| "version": "16.5.0", | ||
| "version": "16.6.0", | ||
| "license": "MIT", | ||
@@ -40,3 +40,3 @@ "author": "Evan You", | ||
| "peerDependencies": { | ||
| "@vue/compiler-sfc": "^3.0.8", | ||
| "@vue/compiler-sfc": "^3.2.12", | ||
| "webpack": "^4.1.0 || ^5.0.0-0" | ||
@@ -55,3 +55,3 @@ }, | ||
| "@types/jest": "^26.0.13", | ||
| "@types/jsdom": "^16.2.4", | ||
| "@types/jsdom": "^16.2.13", | ||
| "@types/loader-utils": "^2.0.1", | ||
@@ -61,3 +61,3 @@ "@types/mini-css-extract-plugin": "^0.9.1", | ||
| "@types/webpack-merge": "^4.1.5", | ||
| "@vue/compiler-sfc": "^3.0.8", | ||
| "@vue/compiler-sfc": "^3.2.12", | ||
| "babel-loader": "^8.1.0", | ||
@@ -90,5 +90,5 @@ "cache-loader": "^4.1.0", | ||
| "ts-loader-v9": "npm:ts-loader@^9.2.4", | ||
| "typescript": "^4.0.2", | ||
| "typescript": "^4.4.3", | ||
| "url-loader": "^4.1.0", | ||
| "vue": "^3.0.8", | ||
| "vue": "^3.2.12", | ||
| "webpack": "^4.41.2", | ||
@@ -95,0 +95,0 @@ "webpack-cli": "^3.3.10", |
@@ -1,2 +0,2 @@ | ||
| # vue-loader [](https://circleci.com/gh/vuejs/vue-loader/tree/next) [](https://ci.appveyor.com/project/yyx990803/vue-loader/branch/next) | ||
| # vue-loader [](https://github.com/vuejs/vue-loader/actions/workflows/ci.yml) | ||
@@ -3,0 +3,0 @@ > webpack loader for Vue Single-File Components |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.3%
71768
- Number of package files
- increased by12.5%
36
- Lines of code
- increased by5.52%
1146
No dependency changes