vue3-sfc-loader - npm Package Compare versions

Comparing version 0.9.3 to 0.9.4

dist/types/vue2-esm/src/types.d.ts

@@ -315,3 +315,4 @@ import { ParserPlugin as babel_ParserPlugin } from '@babel/parser';
     /**
-     *
+     * creates a CommonJS module from JS source string.
+     * *(optional)*
      */
@@ -321,3 +322,3 @@ createCJSModule(refPath: AbstractPath, source: string, options: Options): Module;
      * Abstact path handling
-     *
+     * *(optional)*
      */
@@ -327,2 +328,3 @@ pathResolve: PathResolve;
      * Abstact resource handling
+     * *(optional)*
      *
@@ -356,3 +358,10 @@ */
     devMode?: boolean;
+    /**
+     *
+     * @param srcRaw
+     * @param lang
+     * @param filename
+     */
+    processStyles(srcRaw: string, lang: string | undefined, filename: AbstractPath, options: Options): Promise<string>;
 };
 export type LangProcessor = (source: string, preprocessOptions?: any) => Promise<string> | string;

dist/types/vue2/src/types.d.ts

@@ -315,3 +315,4 @@ import { ParserPlugin as babel_ParserPlugin } from '@babel/parser';
     /**
-     *
+     * creates a CommonJS module from JS source string.
+     * *(optional)*
      */
@@ -321,3 +322,3 @@ createCJSModule(refPath: AbstractPath, source: string, options: Options): Module;
      * Abstact path handling
-     *
+     * *(optional)*
      */
@@ -327,2 +328,3 @@ pathResolve: PathResolve;
      * Abstact resource handling
+     * *(optional)*
      *
@@ -356,3 +358,10 @@ */
     devMode?: boolean;
+    /**
+     *
+     * @param srcRaw
+     * @param lang
+     * @param filename
+     */
+    processStyles(srcRaw: string, lang: string | undefined, filename: AbstractPath, options: Options): Promise<string>;
 };
 export type LangProcessor = (source: string, preprocessOptions?: any) => Promise<string> | string;

dist/types/vue3-esm/types.d.ts

@@ -315,3 +315,4 @@ import { ParserPlugin as babel_ParserPlugin } from '@babel/parser';
     /**
-     *
+     * creates a CommonJS module from JS source string.
+     * *(optional)*
      */
@@ -321,3 +322,3 @@ createCJSModule(refPath: AbstractPath, source: string, options: Options): Module;
      * Abstact path handling
-     *
+     * *(optional)*
      */
@@ -327,2 +328,3 @@ pathResolve: PathResolve;
      * Abstact resource handling
+     * *(optional)*
      *
@@ -356,3 +358,10 @@ */
     devMode?: boolean;
+    /**
+     *
+     * @param srcRaw
+     * @param lang
+     * @param filename
+     */
+    processStyles(srcRaw: string, lang: string | undefined, filename: AbstractPath, options: Options): Promise<string>;
 };
 export type LangProcessor = (source: string, preprocessOptions?: any) => Promise<string> | string;

dist/types/vue3/types.d.ts

@@ -315,3 +315,4 @@ import { ParserPlugin as babel_ParserPlugin } from '@babel/parser';
     /**
-     *
+     * creates a CommonJS module from JS source string.
+     * *(optional)*
      */
@@ -321,3 +322,3 @@ createCJSModule(refPath: AbstractPath, source: string, options: Options): Module;
      * Abstact path handling
-     *
+     * *(optional)*
      */
@@ -327,2 +328,3 @@ pathResolve: PathResolve;
      * Abstact resource handling
+     * *(optional)*
      *
@@ -356,3 +358,10 @@ */
     devMode?: boolean;
+    /**
+     *
+     * @param srcRaw
+     * @param lang
+     * @param filename
+     */
+    processStyles(srcRaw: string, lang: string | undefined, filename: AbstractPath, options: Options): Promise<string>;
 };
 export type LangProcessor = (source: string, preprocessOptions?: any) => Promise<string> | string;

dist/vue2-sfc-loader-node.js

@@ -174,3 +174,3 @@ "use strict";
     const component = {};
-    const {delimiters: delimiters, whitespace: whitespace, moduleCache: moduleCache, compiledCache: compiledCache, getResource: getResource, addStyle: addStyle, log: log, additionalBabelParserPlugins: additionalBabelParserPlugins = [], additionalBabelPlugins: additionalBabelPlugins = {}, customBlockHandler: customBlockHandler, devMode: devMode = false, createCJSModule: createCJSModule} = options;
+    const {delimiters: delimiters, whitespace: whitespace, moduleCache: moduleCache, compiledCache: compiledCache, getResource: getResource, addStyle: addStyle, log: log, additionalBabelParserPlugins: additionalBabelParserPlugins = [], additionalBabelPlugins: additionalBabelPlugins = {}, customBlockHandler: customBlockHandler, devMode: devMode = false, createCJSModule: createCJSModule, processStyles: processStyles} = options;
     const descriptor = componentCompilerUtils.parse({
@@ -183,4 +183,3 @@ source: source,
     const customBlockCallbacks = customBlockHandler !== undefined ? await Promise.all(descriptor.customBlocks.map((block => customBlockHandler(block, filename, options)))) : [];
-    const componentHash = hash(strFilename, version, targetBrowserBabelPluginsHash);
-    const scopeId = `data-v-${componentHash}`;
+    const scopeId = `data-v-${hash(strFilename)}`;
     if (descriptor.template && descriptor.template.lang) await loadModuleInternal({
@@ -215,3 +214,3 @@ refPath: filename,
         const preprocess = moduleCache[descriptor.template.lang];
-        compileTemplateOptions.source = await withCache(compiledCache, [ componentHash, compileTemplateOptions.source, descriptor.template.lang ], (async ({preventCache: preventCache}) => await new Promise(((resolve, reject) => {
+        compileTemplateOptions.source = await withCache(compiledCache, [ vueVersion, compileTemplateOptions.source, descriptor.template.lang ], (async ({preventCache: preventCache}) => await new Promise(((resolve, reject) => {
             preprocess.render(compileTemplateOptions.source, compileTemplateOptions.preprocessOptions, ((_err, _res) => {
@@ -227,3 +226,3 @@ if (_err) reject(_err); else resolve(_res);
         }, options).getContent()).getContentData(false) : descriptor.script.content;
-        const [depsList, transformedScriptSource] = await withCache(compiledCache, [ componentHash, src, descriptor.script.lang, additionalBabelParserPlugins, Object.keys(additionalBabelPlugins) ], (async ({preventCache: preventCache}) => {
+        const [depsList, transformedScriptSource] = await withCache(compiledCache, [ vueVersion, isProd, devMode, src, descriptor.script.lang, additionalBabelParserPlugins, Object.keys(additionalBabelPlugins), targetBrowserBabelPluginsHash ], (async ({preventCache: preventCache}) => {
             var _a;
@@ -247,3 +246,3 @@ let contextBabelParserPlugins = [ "jsx" ];
     if (descriptor.template !== null) {
-        const [templateDepsList, templateTransformedSource] = await withCache(compiledCache, [ componentHash, compileTemplateOptions.source ], (async ({preventCache: preventCache}) => {
+        const [templateDepsList, templateTransformedSource] = await withCache(compiledCache, [ vueVersion, devMode, compileTemplateOptions.source, delimiters, whitespace, scopeId, additionalBabelParserPlugins, Object.keys(additionalBabelPlugins), targetBrowserBabelPluginsHash ], (async ({preventCache: preventCache}) => {
             const template = componentCompilerUtils.compileTemplate(compileTemplateOptions);
@@ -280,8 +279,10 @@ template.code += `\nmodule.exports = { render: render, staticRenderFns: staticRenderFns }`;
     for (const descStyle of descriptor.styles) {
-        const src = descStyle.src ? await (await getResource({
+        const srcRaw = descStyle.src ? await (await getResource({
             refPath: filename,
             relPath: descStyle.src
         }, options).getContent()).getContentData(false) : descStyle.content;
-        const style = await withCache(compiledCache, [ componentHash, src, descStyle.lang ], (async ({preventCache: preventCache}) => {
-            const compileStyleOptions = {
+        const style = await withCache(compiledCache, [ vueVersion, srcRaw, descStyle.lang, scopeId, descStyle.scoped ], (async ({preventCache: preventCache}) => {
+            const src = processStyles !== undefined ? await processStyles(srcRaw, descStyle.lang, filename, options) : srcRaw;
+            if (src === undefined) preventCache();
+            const compileStyleOptions = Object.assign({
                 source: src,
@@ -291,3 +292,4 @@ filename: strFilename,
                 scoped: descStyle.scoped !== undefined ? descStyle.scoped : false,
-                trim: false,
+                trim: false
+            }, processStyles === undefined ? {
                 preprocessLang: descStyle.lang,
@@ -299,3 +301,3 @@ preprocessOptions: {
                 }
-            };
+            } : {});
             if (descStyle.lang && processors[descStyle.lang] === undefined) processors[descStyle.lang] = await loadModuleInternal({
@@ -322,3 +324,3 @@ refPath: filename,
 
-const version$1 = "0.9.3";
+const version$1 = "0.9.4";
 
@@ -468,3 +470,3 @@ function formatError(message, path, source) {
             if (handleModule !== undefined) module = await handleModule(type, getContentData, path, options);
-            if (module === undefined) module = await defaultHandleModule(type, getContentData, path, options);
+            if (module === undefined) module = await handleModuleInternal(type, getContentData, path, options);
             if (module === undefined) throw new TypeError(`Unable to handle ${type} files (${path})`);
@@ -518,3 +520,3 @@ }
 
-async function defaultHandleModule(type, getContentData, path, options) {
+async function handleModuleInternal(type, getContentData, path, options) {
     var _a, _b;
@@ -542,3 +544,3 @@ switch (type) {
 
-const version = "0.9.3";
+const version = "0.9.4";
 
@@ -577,3 +579,3 @@ const vueVersion = "2.7.16";
             if (!res) {
-                log === null || log === void 0 ? void 0 : log("error", `There is no module avaialable such as "${path$1}"`);
+                log === null || log === void 0 ? void 0 : log("error", `There is no file avaialable such as "${path$1}"`);
             }
@@ -580,0 +582,0 @@ return {

dist/vue3-sfc-loader-node.js

@@ -54,3 +54,3 @@ "use strict";
     const component = {};
-    const {delimiters: delimiters, whitespace: whitespace, isCustomElement: isCustomElement, moduleCache: moduleCache, compiledCache: compiledCache, getResource: getResource, addStyle: addStyle, log: log, additionalBabelParserPlugins: additionalBabelParserPlugins = [], additionalBabelPlugins: additionalBabelPlugins = {}, customBlockHandler: customBlockHandler, devMode: devMode = false, createCJSModule: createCJSModule} = options;
+    const {delimiters: delimiters, whitespace: whitespace, isCustomElement: isCustomElement, moduleCache: moduleCache, compiledCache: compiledCache, getResource: getResource, addStyle: addStyle, log: log, additionalBabelParserPlugins: additionalBabelParserPlugins = [], additionalBabelPlugins: additionalBabelPlugins = {}, customBlockHandler: customBlockHandler, devMode: devMode = false, createCJSModule: createCJSModule, processStyles: processStyles} = options;
     const {descriptor: descriptor, errors: errors} = compilerSfc.parse(source, {
@@ -61,4 +61,3 @@ filename: strFilename,
     const customBlockCallbacks = customBlockHandler !== undefined ? await Promise.all(descriptor.customBlocks.map((block => customBlockHandler(block, filename, options)))) : [];
-    const componentHash = hash(strFilename, version, targetBrowserBabelPluginsHash);
-    const scopeId = `data-v-${componentHash}`;
+    const scopeId = `data-v-${hash(strFilename)}`;
     const hasScoped = descriptor.styles.some((e => e.scoped));
@@ -102,3 +101,3 @@ if (hasScoped) {
         }, options).getContent()).getContentData(false);
-        const [bindingMetadata, depsList, transformedScriptSource] = await withCache(compiledCache, [ componentHash, (_b = descriptor.script) === null || _b === void 0 ? void 0 : _b.content, (_c = descriptor.script) === null || _c === void 0 ? void 0 : _c.lang, (_d = descriptor.scriptSetup) === null || _d === void 0 ? void 0 : _d.content, (_e = descriptor.scriptSetup) === null || _e === void 0 ? void 0 : _e.lang, additionalBabelParserPlugins, Object.keys(additionalBabelPlugins) ], (async ({preventCache: preventCache}) => {
+        const [bindingMetadata, depsList, transformedScriptSource] = await withCache(compiledCache, [ vueVersion, isProd, devMode, (_b = descriptor.script) === null || _b === void 0 ? void 0 : _b.content, (_c = descriptor.script) === null || _c === void 0 ? void 0 : _c.lang, (_d = descriptor.scriptSetup) === null || _d === void 0 ? void 0 : _d.content, (_e = descriptor.scriptSetup) === null || _e === void 0 ? void 0 : _e.lang, additionalBabelParserPlugins, Object.keys(additionalBabelPlugins), targetBrowserBabelPluginsHash ], (async ({preventCache: preventCache}) => {
             var _a, _b;
@@ -130,3 +129,3 @@ let contextBabelParserPlugins = [ "jsx" ];
     if (descriptor.template !== null) {
-        const [templateDepsList, templateTransformedSource] = await withCache(compiledCache, [ componentHash, compileTemplateOptions.source, compileTemplateOptions.compilerOptions.delimiters, compileTemplateOptions.compilerOptions.whitespace, compileTemplateOptions.compilerOptions.scopeId, compileTemplateOptions.compilerOptions.bindingMetadata ? Object.entries(compileTemplateOptions.compilerOptions.bindingMetadata) : "" ], (async ({preventCache: preventCache}) => {
+        const [templateDepsList, templateTransformedSource] = await withCache(compiledCache, [ vueVersion, devMode, compileTemplateOptions.source, compileTemplateOptions.compilerOptions.delimiters, compileTemplateOptions.compilerOptions.whitespace, compileTemplateOptions.compilerOptions.scopeId, compileTemplateOptions.compilerOptions.bindingMetadata ? Object.entries(compileTemplateOptions.compilerOptions.bindingMetadata) : "", additionalBabelParserPlugins, Object.keys(additionalBabelPlugins), targetBrowserBabelPluginsHash ], (async ({preventCache: preventCache}) => {
             const template = compilerSfc.compileTemplate(compileTemplateOptions);
@@ -154,12 +153,14 @@ if (template.errors.length) {
     for (const descStyle of descriptor.styles) {
-        if (descStyle.lang) await loadModuleInternal({
+        const srcRaw = descStyle.src ? await (await getResource({
             refPath: filename,
-            relPath: descStyle.lang
-        }, options);
-        const src = descStyle.src ? await (await getResource({
-            refPath: filename,
             relPath: descStyle.src
         }, options).getContent()).getContentData(false) : descStyle.content;
-        const style = await withCache(compiledCache, [ componentHash, src ], (async ({preventCache: preventCache}) => {
-            const compiledStyle = await compilerSfc.compileStyleAsync({
+        const style = await withCache(compiledCache, [ vueVersion, srcRaw, descStyle.lang, scopeId, descStyle.scoped ], (async ({preventCache: preventCache}) => {
+            const src = processStyles !== undefined ? await processStyles(srcRaw, descStyle.lang, filename, options) : srcRaw;
+            if (src === undefined) preventCache();
+            if (processStyles === undefined && descStyle.lang !== undefined) await loadModuleInternal({
+                refPath: filename,
+                relPath: descStyle.lang
+            }, options);
+            const compiledStyle = await compilerSfc.compileStyleAsync(Object.assign({
                 filename: descriptor.filename,
@@ -170,6 +171,7 @@ source: src,
                 scoped: descStyle.scoped,
-                trim: true,
+                trim: true
+            }, processStyles === undefined ? {
                 preprocessLang: descStyle.lang,
                 preprocessCustomRequire: id => moduleCache[id]
-            });
+            } : {}));
             if (compiledStyle.errors.length) {
@@ -191,3 +193,3 @@ preventCache();
 
-const version$1 = "0.9.3";
+const version$1 = "0.9.4";
 
@@ -316,3 +318,3 @@ function formatError(message, path, source) {
             if (handleModule !== undefined) module = await handleModule(type, getContentData, path, options);
-            if (module === undefined) module = await defaultHandleModule(type, getContentData, path, options);
+            if (module === undefined) module = await handleModuleInternal(type, getContentData, path, options);
             if (module === undefined) throw new TypeError(`Unable to handle ${type} files (${path})`);
@@ -366,3 +368,3 @@ }
 
-async function defaultHandleModule(type, getContentData, path, options) {
+async function handleModuleInternal(type, getContentData, path, options) {
     var _a, _b;
@@ -390,3 +392,3 @@ switch (type) {
 
-const version = "0.9.3";
+const version = "0.9.4";
 
@@ -425,3 +427,3 @@ const vueVersion = "3.4.15";
             if (!res) {
-                log === null || log === void 0 ? void 0 : log("error", `There is no module avaialable such as "${path$1}"`);
+                log === null || log === void 0 ? void 0 : log("error", `There is no file avaialable such as "${path$1}"`);
             }
@@ -428,0 +430,0 @@ return {

package.json

@@ -22,13 +22,27 @@ {
   "license": "MIT",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "browserslist": "> 1%, last 8 versions, Firefox ESR and not dead",
   "browser": "./dist/vue3-sfc-loader.js",
-  "main": "./dist/vue3-sfc-loader-node.js",
-  "module": "./dist/vue3-sfc-loader-node.mjs",
+  "main": "./dist/vue3-sfc-loader.js",
+  "module": "./dist/vue3-sfc-loader.esm.js",
   "types": "./dist/types/vue3-esm/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/vue3-sfc-loader-node.mjs",
-      "require": "./dist/vue3-sfc-loader-node.js"
-    }
+      "node": {
+        "import": "./dist/vue3-sfc-loader-node.mjs",
+        "require": "./dist/vue3-sfc-loader-node.js"
+      },
+      "import": "./dist/vue3-sfc-loader.esm.js",
+      "require": "./dist/vue3-sfc-loader.js"
+    },
+    "./vue2": {
+      "node": {
+        "import": "./dist/vue2-sfc-loader-node.mjs",
+        "require": "./dist/vue2-sfc-loader-node.js"
+      },
+      "import": "./dist/vue2-sfc-loader.esm.js",
+      "require": "./dist/vue2-sfc-loader.js"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
   },
@@ -53,4 +67,4 @@ "scripts": {
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.16.10",
-    "@babel/preset-env": "7.23",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
     "@rollup/plugin-alias": "^5.1.0",
@@ -66,9 +80,9 @@ "@rollup/plugin-replace": "^5.0.5",
     "babel-loader": "^9.1.3",
-    "babel-plugin-polyfill-corejs3": "^0.8.7",
+    "babel-plugin-polyfill-corejs3": "^0.9.0",
     "bn.js": "5",
     "buffer": "^6.0.3",
     "caniuse-api": "^3.0.0",
-    "compression-webpack-plugin": "^10.0.0",
-    "core-js": "^3.35.0",
-    "core-js-pure": "^3.35.0",
+    "compression-webpack-plugin": "^11.0.0",
+    "core-js": "^3.35.1",
+    "core-js-pure": "^3.35.1",
     "cross-env": "^7.0.3",
@@ -85,3 +99,3 @@ "dts-bundle": "^0.7.3",
     "rimraf": "5",
-    "rollup": "^4.9.5",
+    "rollup": "^4.9.6",
     "safe-buffer": "^5.2.1",
@@ -103,3 +117,3 @@ "semver": "^7.3.5",
     "vue2": "npm:vue@^2.7.16",
-    "webpack": "^5.89.0",
+    "webpack": "^5.90.0",
     "webpack-bundle-analyzer": "^4.5.0",
@@ -110,5 +124,5 @@ "webpack-cli": "^5.1.4"
     "@babel/code-frame": "^7.16.7",
-    "@babel/core": "^7.16.12",
+    "@babel/core": "^7.23.9",
     "@babel/generator": "^7.16.8",
-    "@babel/parser": "^7.16.12",
+    "@babel/parser": "^7.23.9",
     "@babel/plugin-proposal-dynamic-import": "^7.16.7",
@@ -121,3 +135,3 @@ "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
-    "@vue/babel-plugin-jsx": "1.1",
+    "@vue/babel-plugin-jsx": "^1.2.1",
     "@vue/babel-preset-jsx": "^1.2.4",
@@ -124,0 +138,0 @@ "@vue/compiler-dom": "^3.4.15",

README.md

@@ -29,3 +29,3 @@ # vue3-sfc-loader
   <div id="app"></div>
-  <script src="https://unpkg.com/vue@next"></script>
+  <script src="https://unpkg.com/vue@latest"></script>
   <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
@@ -89,5 +89,5 @@ <script>
   [![latest bundle version](https://img.shields.io/npm/v/vue3-sfc-loader?label=latest%20version)](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/CHANGELOG.md)
-  [<!--update-min-br-size-->![bundle minified+brotli size](https://img.shields.io/badge/min%2Bbr-385kB-blue)<!--/update-min-br-size-->](#dist)
-  [<!--update-min-gz-size-->![bundle minified+gzip size](https://img.shields.io/badge/min%2Bgz-488kB-blue)<!--/update-min-gz-size-->](#dist)
-  [<!--update-min-size-->![bundle minified size](https://img.shields.io/badge/min-1794kB-blue)<!--/update-min-size-->](#dist)
+  [<!--update-min-br-size-->![bundle minified+brotli size](https://img.shields.io/badge/min%2Bbr-386kB-blue)<!--/update-min-br-size-->](#dist)
+  [<!--update-min-gz-size-->![bundle minified+gzip size](https://img.shields.io/badge/min%2Bgz-490kB-blue)<!--/update-min-gz-size-->](#dist)
+  [<!--update-min-size-->![bundle minified size](https://img.shields.io/badge/min-1799kB-blue)<!--/update-min-size-->](#dist)
   
@@ -94,0 +94,0 @@ [![browser support](https://img.shields.io/github/package-json/browserslist/FranckFreiburger/vue3-sfc-loader)](https://github.com/browserslist/browserslist#query-composition)

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

Obfuscated code

Supply chain risk

Obfuscated files are intentionally packed to hide their behavior. This could be a sign of malware.

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

Environment variable access

Supply chain risk

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

Found 2 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34025005

increased by0.04%

Number of low supply chain risk alerts

6

decreased by-40%

Worsened metrics

Number of package files

47

decreased by-4.08%

Lines of code

36302

decreased by-3.39%

Number of high supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@vue/babel-plugin-jsx@1.2.5(transitive)

• + Added@vue/babel-plugin-resolve-type@1.2.5(transitive)

• - Removed@vue/babel-plugin-jsx@1.1.6(transitive)

• - Removedcamelcase@6.3.0(transitive)

• Updated@babel/core@^7.23.9

• Updated@babel/parser@^7.23.9

• Updated@vue/babel-plugin-jsx@^1.2.1