vue-loader - npm Package Compare versions

Comparing version 16.4.1 to 16.5.0

CHANGELOG.md

@@ -1,4 +0,8 @@
-## [16.4.1](https://github.com/vuejs/vue-loader/compare/v16.3.3...v16.4.1) (2021-08-02)
+# [16.5.0](https://github.com/vuejs/vue-loader/compare/v16.4.1...v16.5.0) (2021-08-07)
 
 
+
+## [16.4.1](https://github.com/vuejs/vue-loader/compare/v16.4.0...v16.4.1) (2021-08-02)
+
+
 ### Bug Fixes
@@ -9,8 +13,11 @@
 
-### Features
 
-* customElement option support for Vue 3.2 ([e19fcda](https://github.com/vuejs/vue-loader/commit/e19fcdaa62c4aa5d826c33a0e7fb8786904ee225))
+## [16.4.1](https://github.com/vuejs/vue-loader/compare/v16.3.3...v16.4.1) (2021-08-02)
 
 
+### Bug Fixes
 
+* fix webpack 5.48 compatibility ([b94289c](https://github.com/vuejs/vue-loader/commit/b94289c9fb395556100ec121529dfe676280d3cd)), closes [#1859](https://github.com/vuejs/vue-loader/issues/1859)
+
+
 # [16.4.0](https://github.com/vuejs/vue-loader/compare/v16.3.3...v16.4.0) (2021-07-30)
@@ -17,0 +24,0 @@

dist/index.js

@@ -199,6 +199,3 @@ "use strict";
     // finalize
-    code += asCustomElement
-        ? `\n\nimport { defineCustomElement as __ce } from 'vue';` +
-            `export default __ce(script)`
-        : `\n\nexport default script`;
+    code += `\n\nexport default script`;
     return code;
@@ -205,0 +202,0 @@ }

package.json

 {
   "name": "vue-loader",
-  "version": "16.4.1",
+  "version": "16.5.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Evan You",

README.md

@@ -10,5 +10,6 @@ # vue-loader [![Build Status](https://circleci.com/gh/vuejs/vue-loader/tree/next.svg?style=shield)](https://circleci.com/gh/vuejs/vue-loader/tree/next) [![Windows Build status](https://ci.appveyor.com/api/projects/status/8cdonrkbg6m4k1tm/branch/next?svg=true)](https://ci.appveyor.com/project/yyx990803/vue-loader/branch/next)
 - `refSugar: boolean`: enable experimental ref sugar.
-- `customElement: boolean | RegExp`: enable custom elements mode.
+
+- `customElement: boolean | RegExp`: enable custom elements mode. An SFC loaded in custom elements mode inlines its `<style>` tags as strings under the component's `styles` option. When used with `defineCustomElement` from Vue core, the styles will be injected into the custom element's shadow root.
   - Default is `/\.ce\.vue$/`
-  - Setting to `true` will load all `.vue` files as native Custom Elements.
+  - Setting to `true` will process all `.vue` files in custom element mode.
 
@@ -19,3 +20,3 @@ ## What is Vue Loader?
 
-``` vue
+```vue
 <template>
@@ -27,7 +28,7 @@ <div class="example">{{ msg }}</div>
 export default {
-  data () {
+  data() {
     return {
-      msg: 'Hello world!'
+      msg: 'Hello world!',
     }
-  }
+  },
 }
@@ -59,54 +60,54 @@ </script>
 
-1. `vue-loader` parses the SFC source code into an *SFC Descriptor* using `@vue/compiler-sfc`. It then generates an import for each language block so the actual returned module code looks like this:
+1. `vue-loader` parses the SFC source code into an _SFC Descriptor_ using `@vue/compiler-sfc`. It then generates an import for each language block so the actual returned module code looks like this:
 
-    ``` js
-    // code returned from the main loader for 'source.vue'
+   ```js
+   // code returned from the main loader for 'source.vue'
 
-    // import the <template> block
-    import render from 'source.vue?vue&type=template'
-    // import the <script> block
-    import script from 'source.vue?vue&type=script'
-    export * from 'source.vue?vue&type=script'
-    // import <style> blocks
-    import 'source.vue?vue&type=style&index=1'
+   // import the <template> block
+   import render from 'source.vue?vue&type=template'
+   // import the <script> block
+   import script from 'source.vue?vue&type=script'
+   export * from 'source.vue?vue&type=script'
+   // import <style> blocks
+   import 'source.vue?vue&type=style&index=1'
 
-    script.render = render
-    export default script
-    ```
+   script.render = render
+   export default script
+   ```
 
-    Notice how the code is importing `source.vue` itself, but with different request queries for each block.
+   Notice how the code is importing `source.vue` itself, but with different request queries for each block.
 
 2. We want the content in `script` block to be treated like `.js` files (and if it's `<script lang="ts">`, we want to to be treated like `.ts` files). Same for other language blocks. So we want webpack to apply any configured module rules that matches `.js` also to requests that look like `source.vue?vue&type=script`. This is what `VueLoaderPlugin` (`src/plugins.ts`) does: for each module rule in the webpack config, it creates a modified clone that targets corresponding Vue language block requests.
 
-    Suppose we have configured `babel-loader` for all `*.js` files. That rule will be cloned and applied to Vue SFC `<script>` blocks as well. Internally to webpack, a request like
+   Suppose we have configured `babel-loader` for all `*.js` files. That rule will be cloned and applied to Vue SFC `<script>` blocks as well. Internally to webpack, a request like
 
-    ``` js
-    import script from 'source.vue?vue&type=script'
-    ```
+   ```js
+   import script from 'source.vue?vue&type=script'
+   ```
 
-    Will expand to:
+   Will expand to:
 
-    ``` js
-    import script from 'babel-loader!vue-loader!source.vue?vue&type=script'
-    ```
+   ```js
+   import script from 'babel-loader!vue-loader!source.vue?vue&type=script'
+   ```
 
-    Notice the `vue-loader` is also matched because `vue-loader` are applied to `.vue` files.
+   Notice the `vue-loader` is also matched because `vue-loader` are applied to `.vue` files.
 
-    Similarly, if you have configured `style-loader` + `css-loader` + `sass-loader` for `*.scss` files:
+   Similarly, if you have configured `style-loader` + `css-loader` + `sass-loader` for `*.scss` files:
 
-    ``` html
-    <style scoped lang="scss">
-    ```
+   ```html
+   <style scoped lang="scss">
+   ```
 
-    Will be returned by `vue-loader` as:
+   Will be returned by `vue-loader` as:
 
-    ``` js
-    import 'source.vue?vue&type=style&index=1&scoped&lang=scss'
-    ```
+   ```js
+   import 'source.vue?vue&type=style&index=1&scoped&lang=scss'
+   ```
 
-    And webpack will expand it to:
+   And webpack will expand it to:
 
-    ``` js
-    import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'
-    ```
+   ```js
+   import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'
+   ```
 
@@ -117,13 +118,13 @@ 3. When processing the expanded requests, the main `vue-loader` will get invoked again. This time though, the loader notices that the request has queries and is targeting a specific block only. So it selects (`src/select.ts`) the inner content of the target block and passes it on to the loaders matched after it.
 
-    - We need to compile the template using the Vue template compiler;
-    - We need to post-process the CSS in `<style scoped>` blocks, **after** `css-loader` but **before** `style-loader`.
+   - We need to compile the template using the Vue template compiler;
+   - We need to post-process the CSS in `<style scoped>` blocks, **after** `css-loader` but **before** `style-loader`.
 
-    Technically, these are additional loaders (`src/templateLoader.ts` and `src/stylePostLoader.ts`) that need to be injected into the expanded loader chain. It would be very complicated if the end users have to configure this themselves, so `VueLoaderPlugin` also injects a global [Pitching Loader](https://webpack.js.org/api/loaders/#pitching-loader) (`src/pitcher.ts`) that intercepts Vue `<template>` and `<style>` requests and injects the necessary loaders. The final requests look like the following:
+   Technically, these are additional loaders (`src/templateLoader.ts` and `src/stylePostLoader.ts`) that need to be injected into the expanded loader chain. It would be very complicated if the end users have to configure this themselves, so `VueLoaderPlugin` also injects a global [Pitching Loader](https://webpack.js.org/api/loaders/#pitching-loader) (`src/pitcher.ts`) that intercepts Vue `<template>` and `<style>` requests and injects the necessary loaders. The final requests look like the following:
 
-    ``` js
-    // <template lang="pug">
-    import 'vue-loader/template-loader!pug-loader!source.vue?vue&type=template'
+   ```js
+   // <template lang="pug">
+   import 'vue-loader/template-loader!pug-loader!source.vue?vue&type=template'
 
-    // <style scoped lang="scss">
-    import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'
-    ```
+   // <style scoped lang="scss">
+   import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'
+   ```

New alerts

License Policy Violation

License

This 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

License

This 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

68153

increased by0.42%

Number of lines in readme file

126

increased by0.8%

Worsened metrics

Lines of code

1086

decreased by-0.28%

No dependency changes