@sveltejs/vite-plugin-svelte - npm Package Compare versions

Comparing version 1.0.0-next.5 to 1.0.0-next.6

CHANGELOG.md

 # @sveltejs/vite-plugin-svelte
 
+## 1.0.0-next.6
+
+### Minor Changes
+
+- 1be46f1: improved css hmr
+- a0f5a65: Allow other vite plugins to define preprocessors
+
+### Patch Changes
+
+- 8d9ef96: fix: do not preserve types unless useVitePreprocess option is true
+- 6f4a253: disable svelte-hmr overlay by default
+- 18647aa: improve virtual css module path (fixes #14)
+
 ## 1.0.0-next.5
@@ -4,0 +17,0 @@

dist/index.js

@@ -7,3 +7,16 @@ var __create = Object.create;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __assign = Object.assign;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
+var __assign = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
@@ -251,7 +264,25 @@ var __export = (target, all) => {
 }
+function createInjectScopeEverythingRulePreprocessorGroup() {
+  return {
+    style({content}) {
+      return {
+        code: `${content} *{}`
+      };
+    }
+  };
+}
 function buildExtraPreprocessors(options, config) {
   const extraPreprocessors = [];
   if (options.useVitePreprocess) {
+    log.debug("adding vite preprocessor");
     extraPreprocessors.push(createVitePreprocessorGroup(config, options));
   }
+  const pluginsWithPreprocessors = config.plugins.filter((p) => p == null ? void 0 : p.sveltePreprocess);
+  if (pluginsWithPreprocessors.length > 0) {
+    log.debug(`adding preprocessors from other vite plugins: ${pluginsWithPreprocessors.map((p) => p.name).join(", ")}`);
+    extraPreprocessors.push(...pluginsWithPreprocessors.map((p) => p.sveltePreprocess));
+  }
+  if (options.hot && !options.disableCssHmr) {
+    extraPreprocessors.push(createInjectScopeEverythingRulePreprocessorGroup());
+  }
   return extraPreprocessors;
@@ -272,4 +303,4 @@ }
   if (options.hot) {
-    const hash = `s-${safeBase64Hash(cssId)}`;
-    log.debug(`setting cssHash ${hash} for ${cssId}`);
+    const hash = `s-${safeBase64Hash(normalizedFilename)}`;
+    log.debug(`setting cssHash ${hash} for ${normalizedFilename}`);
     finalCompilerOptions.cssHash = () => hash;
@@ -303,3 +334,3 @@ }
     compiled.js.code += `
-import ${JSON.stringify(svelteRequest.cssId)};
+import ${JSON.stringify(cssId)};
 `;
@@ -337,3 +368,8 @@ }
     const adapter = (_b = options == null ? void 0 : options.hot) == null ? void 0 : _b.adapter;
-    return (0, import_svelte_hmr.createMakeHot)({walk: import_compiler.walk, hotApi, adapter, hotOptions: options.hot});
+    return (0, import_svelte_hmr.createMakeHot)({
+      walk: import_compiler.walk,
+      hotApi,
+      adapter,
+      hotOptions: __assign({noOverlay: true}, options.hot)
+    });
   }
@@ -350,7 +386,13 @@ }
 var import_pluginutils = __toModule(require("@rollup/pluginutils"));
-var viteVirtualIdPrefix = "/@id/";
-function parseToSvelteRequest(id, root, timestamp, ssr) {
+var import_vite = __toModule(require("vite"));
+var fs = __toModule(require("fs"));
+var VITE_FS_PREFIX = "/@fs/";
+var IS_WINDOWS = process.platform === "win32";
+function splitId(id) {
   const parts = id.split(`?`, 2);
-  let filename = parts[0];
+  const filename = parts[0];
   const rawQuery = parts[1];
+  return {filename, rawQuery};
+}
+function parseToSvelteRequest(id, filename, rawQuery, root, timestamp, ssr) {
   const query = import_querystring.default.parse(rawQuery);
@@ -360,12 +402,9 @@ if (query.svelte != null) {
   }
-  if (query.svelte) {
-    filename = stripVirtualImportId(filename, query.type);
-  }
-  const normalizedFilename = normalizePath(filename, root);
-  const cssId = createVirtualImportId(normalizedFilename, "style", timestamp);
+  const normalizedFilename = normalize(filename, root);
+  const cssId = createVirtualImportId(filename, root, "style");
   return {
     id,
-    cssId,
     filename,
     normalizedFilename,
+    cssId,
     query,
@@ -376,34 +415,38 @@ timestamp,
 }
-function stripVirtualImportId(filename, type) {
-  if (filename.startsWith(viteVirtualIdPrefix)) {
-    filename = filename.substring(viteVirtualIdPrefix.length);
+function createVirtualImportId(filename, root, type) {
+  const parts = ["svelte", `type=${type}`];
+  if (type === "style") {
+    parts.push("lang.css");
   }
-  if (type === "style" && filename.endsWith(".css")) {
-    filename = filename.slice(0, -4);
+  if (existsInRoot(filename, root)) {
+    filename = root + filename;
+  } else if (filename.startsWith(VITE_FS_PREFIX)) {
+    filename = IS_WINDOWS ? filename.slice(VITE_FS_PREFIX.length) : filename.slice(VITE_FS_PREFIX.length - 1);
   }
-  return filename;
+  return `${filename}?${parts.join("&")}`;
 }
-function createVirtualImportId(id, type, timestamp) {
-  if (type === "style") {
-    id = `${id}.css`;
+function normalize(filename, normalizedRoot) {
+  return stripRoot((0, import_vite.normalizePath)(filename), normalizedRoot);
+}
+function existsInRoot(filename, root) {
+  if (filename.startsWith(VITE_FS_PREFIX)) {
+    return false;
   }
-  return `${id}?svelte&type=${type}`;
+  return fs.existsSync(root + filename);
 }
-function normalizePath(filename, root) {
-  return filename.startsWith(root + "/") ? filename.replace(root, "") : filename;
+function stripRoot(normalizedFilename, normalizedRoot) {
+  return normalizedFilename.startsWith(normalizedRoot + "/") ? normalizedFilename.slice(normalizedRoot.length) : normalizedFilename;
 }
 function buildFilter(include, exclude, extensions) {
   const rollupFilter = (0, import_pluginutils.createFilter)(include, exclude);
-  return (svelteRequest) => {
-    var _a;
-    return ((_a = svelteRequest.query) == null ? void 0 : _a.svelte) || rollupFilter(svelteRequest.filename) && extensions.some((ext) => svelteRequest.filename.endsWith(ext));
-  };
+  return (filename) => rollupFilter(filename) && extensions.some((ext) => filename.endsWith(ext));
 }
 function buildIdParser(options) {
   const {include, exclude, extensions, root} = options;
+  const normalizedRoot = (0, import_vite.normalizePath)(root);
   const filter = buildFilter(include, exclude, extensions);
   return (id, ssr, timestamp = Date.now()) => {
-    const svelteRequest = parseToSvelteRequest(id, root, timestamp, ssr);
-    if (filter(svelteRequest)) {
-      return svelteRequest;
+    const {filename, rawQuery} = splitId(id);
+    if (filter(filename)) {
+      return parseToSvelteRequest(id, filename, rawQuery, normalizedRoot, timestamp, ssr);
     }
@@ -551,3 +594,3 @@ };
 
-// src/utils/contants.ts
+// src/utils/constants.ts
 var VITE_RESOLVE_MAIN_FIELDS = ["module", "jsnext:main", "jsnext"];
@@ -589,9 +632,2 @@ var SVELTE_RESOLVE_MAIN_FIELDS = ["svelte", ...VITE_RESOLVE_MAIN_FIELDS];
       const extraViteConfig = {
-        esbuild: {
-          tsconfigRaw: {
-            compilerOptions: {
-              importsNotUsedAsValues: "preserve"
-            }
-          }
-        },
         optimizeDeps: {
@@ -605,2 +641,11 @@ exclude: [...SVELTE_IMPORTS]
       };
+      if (inlineOptions == null ? void 0 : inlineOptions.useVitePreprocess) {
+        extraViteConfig.esbuild = {
+          tsconfigRaw: {
+            compilerOptions: {
+              importsNotUsedAsValues: "preserve"
+            }
+          }
+        };
+      }
       log.debug("additional vite config", extraViteConfig);
@@ -635,6 +680,10 @@ return extraViteConfig;
     },
-    async resolveId(importee, importer, options2, ssr) {
+    async resolveId(importee, importer, customOptions, ssr) {
       const svelteRequest = requestParser(importee, !!ssr);
       log.debug("resolveId", svelteRequest || importee);
       if (svelteRequest == null ? void 0 : svelteRequest.query.svelte) {
+        if (svelteRequest.query.type === "style") {
+          log.debug(`resolveId resolved virtual css module ${svelteRequest.cssId}`);
+          return svelteRequest.cssId;
+        }
         log.debug(`resolveId resolved ${importee}`);
@@ -641,0 +690,0 @@ return importee;

package.json

 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.0.0-next.5",
+  "version": "1.0.0-next.6",
   "license": "MIT",
@@ -15,4 +15,3 @@ "author": "dominikg",
     "build-bundle": "node scripts/build-bundle.js",
-    "build-types": "tsc -p . --emitDeclarationOnly --outDir temp && api-extractor run && rimraf temp",
-    "prepublishOnly": "npm run build"
+    "build-types": "tsc -p . --emitDeclarationOnly --outDir temp && api-extractor run && rimraf temp"
   },
@@ -44,7 +43,7 @@ "engines": {
     "source-map": "^0.7.3",
-    "svelte-hmr": "^0.13.3"
+    "svelte-hmr": "^0.14.0"
   },
   "peerDependencies": {
-    "svelte": "^3.35.0",
-    "vite": "^2.1.2"
+    "svelte": "^3.37.0",
+    "vite": "^2.1.5"
   },
@@ -54,12 +53,12 @@ "devDependencies": {
     "@types/es-module-lexer": "^0.3.0",
-    "@types/estree": "^0.0.46",
+    "@types/estree": "^0.0.47",
     "@types/hash-sum": "^1.0.0",
-    "@windicss/plugin-utils": "^0.9.4",
-    "esbuild": "^0.9.5",
+    "@windicss/plugin-utils": "^0.12.2",
+    "esbuild": "~0.9.7",
     "locate-character": "^2.0.5",
     "magic-string": "^0.25.7",
-    "rollup": "^2.42.0",
-    "svelte": "^3.35.0",
-    "vite": "^2.1.2"
+    "rollup": "^2.44.0",
+    "svelte": "^3.37.0",
+    "vite": "^2.1.5"
   }
 }

README.md

@@ -41,4 +41,23 @@ # @sveltejs/vite-plugin-svelte
 
+## Integrations for other vite plugins
+
+### Add an extra preprocessor
+
+vite-plugin-svelte uses the svelte compiler to split `.svelte` files into js and css and the svelte compiler requires that the css passed to it is already plain css.
+If you are building a plugin for vite that transforms css and want it to work out of the box with vite-plugin-svelte, you can add a `sveltePreprocess: PreprocessorGroup` to your vite plugin definition and vite-plugin-svelte will pick it up and add it to the list of svelte preprocessors used at runtime.
+
+```js
+const vitePluginCoolCss = {
+	name: 'vite-plugin-coolcss',
+	sveltePreprocess: {
+		/* your PreprocessorGroup here */
+	}
+	/*... your cool css plugin implementation here .. */
+};
+```
+
+Check out [windicss](https://github.com/windicss/vite-plugin-windicss/blob/517eca0cebc879d931c6578a08accadfb112157c/packages/vite-plugin-windicss/src/index.ts#L167)
+
 ## License
 
 MIT

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38026

increased by9.29%

Lines of code

951

increased by5.43%

Number of lines in readme file

63

increased by43.18%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low supply chain risk alerts

6

increased by20%

Dependency changes

• + Addedsvelte-hmr@0.14.12(transitive)

• - Removedsvelte-hmr@0.13.5(transitive)

• Updatedsvelte-hmr@^0.14.0