add svelte-preprocess default support in plugin-svelte

FredKSchott · Oct 30, 2020 · 2fb2e96 · 2fb2e96 · vercel · Oct 30, 2020
1 parent 7a48a6f
commit 2fb2e96
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/plugins/plugin-svelte/README.md b/plugins/plugin-svelte/README.md
@@ -1,6 +1,6 @@
 # @snowpack/plugin-svelte
 
-Use the [Svelte compiler](https://svelte.dev/docs#Compile_time) to build your `.svelte` files from source.
+Use the [Svelte compiler](https://svelte.dev/docs#Compile_time) to build your `.svelte` files from source. Supports TypeScript and Sass out-of-the-box via [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).
 
 ```
 npm install --save-dev @snowpack/plugin-svelte
@@ -19,10 +19,10 @@ npm install --save-dev @snowpack/plugin-svelte
 
 By default, this plugin will look for a `svelte.config.js` file in your project directory to load `preprocess` and `compilerOptions` configuration from. However, you can also customize Svelte directly via the plugin options below.
 
-| Name              |                                  Type                                  | Description                                                                                                         |
-| :---------------- | :--------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------ |
-| `configFilePath`  |                                `string`                                | Relative path to a Svelte config file. Defaults to load `svelte.config.js` from the current project root directory. |
-| `input`           |                               `string[]`                               | Array of file extensions to process. Uses `svelte.config.js` `extensions` if available. Defaults to `['.svelte']`.  |
-| `preprocess`      | [svelte.preprocess options](https://svelte.dev/docs#svelte_preprocess) | Configure the Svelte pre-processor. If this option is given, the config file `preprocess` option will be ignored.   |
-| `compilerOptions` |    [svelte.compile options](https://svelte.dev/docs#svelte_compile)    | Configure the Svelte compiler.If this option is given, the config file `preprocess` option will be ignored.         |
-| `hmrOptions`      |    [svelte-hmr options](https://github.com/rixo/svelte-hmr#options)    | Configure HMR & "fast refresh" behavior for Svelte.                                                                 |
+| Name              |                                  Type                                  | Description                                                                                                                                                                                                                                                                                                                                                            |
+| :---------------- | :--------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `configFilePath`  |                                `string`                                | Relative path to a Svelte config file. Defaults to load `svelte.config.js` from the current project root directory.                                                                                                                                                                                                                                                    |
+| `input`           |                               `string[]`                               | Array of file extensions to process. Uses `svelte.config.js` `extensions` if available. Defaults to `['.svelte']`.                                                                                                                                                                                                                                                     |
+| `preprocess`      | [svelte.preprocess options](https://svelte.dev/docs#svelte_preprocess) | Configure the Svelte pre-processor. If this option is given, the config file `preprocess` option will be ignored. If any `preprocess` option is set to `false`, preprocessing will be skipped entirely regardless of file content. If no `preprocess` option is given, this plugin defaults to use [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess). |
+| `compilerOptions` |    [svelte.compile options](https://svelte.dev/docs#svelte_compile)    | Configure the Svelte compiler.If this option is given, the config file `preprocess` option will be ignored.                                                                                                                                                                                                                                                            |
+| `hmrOptions`      |    [svelte-hmr options](https://github.com/rixo/svelte-hmr#options)    | Configure HMR & "fast refresh" behavior for Svelte.                                                                                                                                                                                                                                                                                                                    |
diff --git a/plugins/plugin-svelte/package.json b/plugins/plugin-svelte/package.json
@@ -18,7 +18,8 @@
   "gitHead": "a01616bb0787d56cd782f94cecf2daa12c7594e4",
   "dependencies": {
     "rollup-plugin-svelte": "^6.0.0",
-    "svelte-hmr": "^0.11.2"
+    "svelte-hmr": "^0.11.2",
+    "svelte-preprocess": "^4.5.2"
   },
   "devDependencies": {
     "node-sass": "^4.14.1",

diff --git a/plugins/plugin-svelte/plugin.js b/plugins/plugin-svelte/plugin.js
@@ -53,7 +53,12 @@ module.exports = function plugin(snowpackConfig, pluginOptions = {}) {
 
   if (fs.existsSync(configFilePath)) {
     const configFileConfig = require(configFilePath);
-    preprocessOptions = preprocessOptions || configFileConfig.preprocess;
+    preprocessOptions =
+      typeof preprocessOptions !== 'undefined'
+        ? preprocessOptions
+        : typeof configFileConfig.preprocess !== 'undefined'
+        ? configFileConfig.preprocess
+        : require('svelte-preprocess');
     compilerOptions = compilerOptions || configFileConfig.compilerOptions;
     resolveInputOption = resolveInputOption || configFileConfig.extensions;
   } else {
@@ -77,7 +82,7 @@ module.exports = function plugin(snowpackConfig, pluginOptions = {}) {
     async load({filePath, isHmrEnabled, isSSR}) {
       let codeToCompile = await fs.promises.readFile(filePath, 'utf-8');
       // PRE-PROCESS
-      if (preprocessOptions) {
+      if (preprocessOptions !== false) {
         codeToCompile = (
           await svelte.preprocess(codeToCompile, preprocessOptions, {
             filename: filePath,

diff --git a/yarn.lock b/yarn.lock
@@ -14013,6 +14013,16 @@ svelte-preprocess@^4.0.8:
     detect-indent "^6.0.0"
     strip-indent "^3.0.0"
 
+svelte-preprocess@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.5.2.tgz#37976d1e0d866eb382411d486f7468d2275087e9"
+  integrity sha512-ClUX5NecnGBwI+nJnnBvKKy0XutCq5uHTIKe6cPhpvuOj9AAnyvef9wOZAE93yr85OKPutGCNIJa/X1TrJ7O0Q==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    strip-indent "^3.0.0"
+
 svelte-preprocess@~4.3.0:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.3.2.tgz#a05a98e59c64044e835b1401346be41665f19971"