@vue/compiler-sfc - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

dist/compiler-sfc.d.ts

@@ -40,3 +40,3 @@ import { BindingMetadata } from '@vue/compiler-core';
  */
-export declare function compileScript(sfc: SFCDescriptor, options?: SFCScriptCompileOptions): SFCScriptBlock;
+export declare function compileScript(sfc: SFCDescriptor, options: SFCScriptCompileOptions): SFCScriptBlock;
 
@@ -90,2 +90,3 @@ export declare function compileStyle(options: SFCStyleCompileOptions): SFCStyleCompileResults;
     customBlocks: SFCBlock[];
+    cssVars: string[];
 }
@@ -116,5 +117,29 @@
     /**
+     * Scope ID for prefixing injected CSS varialbes.
+     * This must be consistent with the `id` passed to `compileStyle`.
+     */
+    id: string;
+    /**
+     * Production mode. Used to determine whether to generate hashed CSS variables
+     */
+    isProd?: boolean;
+    /**
      * https://babeljs.io/docs/en/babel-parser#plugins
      */
     babelParserPlugins?: ParserPlugin[];
+    /**
+     * Enable ref: label sugar
+     * https://github.com/vuejs/rfcs/pull/228
+     * @default true
+     */
+    refSugar?: boolean;
+    /**
+     * Compile the template and inline the resulting render function
+     * directly inside setup().
+     * - Only affects <script setup>
+     * - This should only be used in production because it prevents the template
+     * from being hot-reloaded separately from component state.
+     */
+    inlineTemplate?: boolean;
+    templateOptions?: Partial<SFCTemplateCompileOptions>;
 }
@@ -125,3 +150,2 @@
     scoped?: boolean;
-    vars?: string;
     module?: string | boolean;
@@ -134,6 +158,6 @@ }
     id: string;
-    map?: RawSourceMap;
     scoped?: boolean;
-    vars?: boolean;
     trim?: boolean;
+    isProd?: boolean;
+    inMap?: RawSourceMap;
     preprocessLang?: PreprocessLang;
@@ -144,2 +168,6 @@ preprocessOptions?: any;
     postcssPlugins?: any[];
+    /**
+     * @deprecated
+     */
+    map?: RawSourceMap;
 }
@@ -164,3 +192,7 @@
     filename: string;
+    id: string;
+    scoped?: boolean;
+    isProd?: boolean;
     ssr?: boolean;
+    ssrCssVars?: string[];
     inMap?: RawSourceMap;
@@ -186,2 +218,4 @@ compiler?: TemplateCompiler;
     code: string;
+    ast?: RootNode;
+    preamble?: string;
     source: string;
@@ -188,0 +222,0 @@ tips: string[];

package.json

 {
   "name": "@vue/compiler-sfc",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "@vue/compiler-sfc",
@@ -14,4 +14,3 @@ "main": "dist/compiler-sfc.cjs.js",
       "cjs",
-      "global",
-      "esm-browser"
+      "global"
     ],
@@ -36,3 +35,3 @@ "prod": false,
   "peerDependencies": {
-    "vue": "3.0.2"
+    "vue": "3.0.3"
   },
@@ -42,6 +41,6 @@ "dependencies": {
     "@babel/types": "^7.12.0",
-    "@vue/compiler-core": "3.0.2",
-    "@vue/compiler-dom": "3.0.2",
-    "@vue/compiler-ssr": "3.0.2",
-    "@vue/shared": "3.0.2",
+    "@vue/compiler-core": "3.0.3",
+    "@vue/compiler-dom": "3.0.3",
+    "@vue/compiler-ssr": "3.0.3",
+    "@vue/shared": "3.0.3",
     "consolidate": "^0.16.0",
@@ -48,0 +47,0 @@ "estree-walker": "^2.0.1",

README.md

 # @vue/compiler-sfc
 
-> Lower level utilities for compiling Vue single file components
+> Lower level utilities for compiling Vue Single File Components
 
-This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue single file components into JavaScript. It is used in [vue-loader](https://github.com/vuejs/vue-loader).
+This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue Single File Components (SFCs) into JavaScript. It is used in [vue-loader](https://github.com/vuejs/vue-loader), [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue) and [vite](https://github.com/vitejs/vite).
 
-The API surface is intentionally minimal - the goal is to reuse as much as possible while being as flexible as possible.
+## Browser Build Notes
 
-## Browser Build Usage
+The browser build relies on a browser-bundled build of `postcss` to be available under the global `postcss` (since it can't be properly bundled by Rollup).
 
-This package relies on `postcss`, `postcss-selector-parser` and `postcss-modules`
-
 ## API
 
-TODO
+The API is intentionally low-level due to the various considerations when integrating Vue SFCs in a build system:
+
+- Separate hot-module replacement (HMR) for script, template and styles
+  - template updates should not reset component state
+  - style updates should be performed without component re-render
+
+- Leveraging the tool's plugin system for pre-processor handling. e.g. `<style lang="scss">` should be processed by the corresponding webpack loader.
+
+- In some cases, transformers of each block in an SFC do not share the same execution context. For example, when used with `thread-loader` or other parallelized configurations, the template sub-loader in `vue-loader` may not have access to the full SFC and its descriptor.
+
+The general idea is to generate a facade module that imports the individual blocks of the component. The trick is the module imports itself with different query strings so that the build system can handle each request as "virtual" modules:
+
+```
+                                  +--------------------+
+                                  |                    |
+                                  |  script transform  |
+                           +----->+                    |
+                           |      +--------------------+
+                           |
++--------------------+     |      +--------------------+
+|                    |     |      |                    |
+|  facade transform  +----------->+ template transform |
+|                    |     |      |                    |
++--------------------+     |      +--------------------+
+                           |
+                           |      +--------------------+
+                           +----->+                    |
+                                  |  style transform   |
+                                  |                    |
+                                  +--------------------+
+```
+
+Where the facade module looks like this:
+
+```js
+// main script
+import script from '/project/foo.vue?vue&type=script'
+// template compiled to render function
+import { render } from '/project/foo.vue?vue&type=template&id=xxxxxx'
+// css
+import '/project/foo.vue?vue&type=style&index=0&id=xxxxxx'
+
+// attach render function to script
+script.render = render
+
+// attach additional metadata
+// some of these should be dev only
+script.__file = 'example.vue'
+script.__scopeId = 'xxxxxx'
+
+// additional tooling-specific HMR handling code
+// using __VUE_HMR_API__ global
+
+export default script
+```
+
+### High Level Workflow
+
+1. In facade transform, parse the source into descriptor with the `parse` API and generate the above facade module code based on the descriptor;
+
+2. In script transform, use `compileScript` to process the script. This handles features like `<script setup>` and CSS variable injection. Alternatively, this can be done directly in the facade module (with the code inlined instead of imported), but it will require rewriting `export default` to a temp variable (a `rewriteDefault` convenience API is provided for this purpose) so additional options can be attached to the exported object.
+
+3. In template transform, use `compileTemplate` to compile the raw template into render function code.
+
+4. In style transform, use `compileStyle` to compile raw CSS to handle `<style scoped>`, `<style module>` and CSS variable injection.
+
+Options needed for these APIs can be passed via the query string.
+
+
+
+For detailed API references and options, check out the source type definitions. For actual usage of these APIs, check out [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue/tree/next) or [vue-loader](https://github.com/vuejs/vue-loader/tree/next).

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

Number of lines in readme file

84

increased by425%

Worsened metrics

Total package byte prevSize

1358319

decreased by-44.6%

Number of package files

5

decreased by-16.67%

Lines of code

35565

decreased by-46.37%

Number of low supply chain risk alerts

4

increased by33.33%

Dependency changes

• + Added@vue/compiler-core@3.0.3(transitive)

• + Added@vue/compiler-dom@3.0.3(transitive)

• + Added@vue/compiler-ssr@3.0.3(transitive)

• + Added@vue/reactivity@3.0.3(transitive)

• + Added@vue/runtime-core@3.0.3(transitive)

• + Added@vue/runtime-dom@3.0.3(transitive)

• + Added@vue/shared@3.0.3(transitive)

• + Addedvue@3.0.3(transitive)

• - Removed@vue/compiler-core@3.0.2(transitive)

• - Removed@vue/compiler-dom@3.0.2(transitive)

• - Removed@vue/compiler-ssr@3.0.2(transitive)

• - Removed@vue/reactivity@3.0.2(transitive)

• - Removed@vue/runtime-core@3.0.2(transitive)

• - Removed@vue/runtime-dom@3.0.2(transitive)

• - Removed@vue/shared@3.0.2(transitive)

• - Removedvue@3.0.2(transitive)

• Updated@vue/compiler-core@3.0.3

• Updated@vue/compiler-dom@3.0.3

• Updated@vue/compiler-ssr@3.0.3

• Updated@vue/shared@3.0.3