Fix Svelte plugin SSR bug; add test

plugins/plugin-svelte/package.json

@@ -18,5 +18,9 @@
   "gitHead": "a01616bb0787d56cd782f94cecf2daa12c7594e4",
   "dependencies": {
     "rollup-plugin-svelte": "^5.2.3"
+  },
+  "devDependencies": {
+    "node-sass": "^4.14.1",
+    "svelte-preprocess-sass": "^0.2.0"
   }
 }

plugins/plugin-svelte/plugin.js

@@ -13,7 +13,9 @@ module.exports = function plugin(snowpackConfig, pluginOptions = {}) {
 
   let svelteOptions;
   let preprocessOptions;
-  const userSvelteConfigLoc = path.join(process.cwd(), 'svelte.config.js');
+  // Note(drew): __config is for internal testing use; maybe we should make this public at some point?
+  const userSvelteConfigLoc =
+    pluginOptions.__config || path.join(process.cwd(), 'svelte.config.js');
   if (fs.existsSync(userSvelteConfigLoc)) {
     const userSvelteConfig = require(userSvelteConfigLoc);
     const {preprocess, ..._svelteOptions} = userSvelteConfig;
@@ -48,7 +50,7 @@ module.exports = function plugin(snowpackConfig, pluginOptions = {}) {
 
       const {js, css} = svelte.compile(codeToCompile, {
         ...svelteOptions,
-        generate: isSSR ? 'ssr' : 'dom',
+        generate: svelteOptions.generate || (isSSR ? 'ssr' : 'dom'), // let user-defined option take precedence
         outputFilename: filePath,
         filename: filePath,
       });

plugins/plugin-svelte/test/Button.svelte

@@ -0,0 +1,8 @@
+<style lang="scss">
+  button {
+    color: rgb(blue, 0.7);
+    font-size: 16px;
+  }
+</style>
+
+<button>I’m a button!</button>

plugins/plugin-svelte/test/__snapshots__/plugin.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@snowpack/plugin-svelte unmocked generates code 1`] = `Promise {}`;

plugins/plugin-svelte/test/plugin.test.js

@@ -0,0 +1,69 @@
+const mockCompiler = jest.fn().mockImplementation(() => ({js: ''}));
+const mockPreprocessor = jest.fn();
+
+const path = require('path');
+
+const mockConfig = {buildOptions: {sourceMaps: false}, installOptions: {rollup: {plugins: []}}};
+const mockComponent = path.join(__dirname, 'Button.svelte');
+
+describe('@snowpack/plugin-svelte', () => {
+  describe('mocked ', () => {
+    let plugin;
+
+    beforeAll(() => {
+      jest.mock('svelte/compiler', () => ({compile: mockCompiler, preprocess: mockPreprocessor})); // important: mock before import
+      plugin = require('../plugin');
+    });
+
+    afterAll(() => {
+      jest.unmock('svelte/compiler');
+    });
+
+    afterEach(() => {
+      mockCompiler.mockClear();
+      mockPreprocessor.mockClear();
+    });
+
+    it('passes options to compiler', () => {
+      const options = {
+        generate: 'ssr',
+        isDev: false,
+      };
+      const sveltePlugin = plugin(mockConfig, options);
+      sveltePlugin.load({filePath: mockComponent});
+      const passedOptions = mockCompiler.mock.calls[0][1];
+
+      // this tests that all options passed above made it to the compiler
+      // objectContaining() allows additional options to be passed, but we only care that our options have been preserved
+      expect(passedOptions).toEqual(expect.objectContaining(options));
+    });
+
+    it('handles preprocessing', () => {
+      // test-only config option
+      const options = {__config: path.join(__dirname, 'svelte.config.js')};
+
+      const sveltePlugin = plugin(mockConfig, options);
+
+      sveltePlugin.load({filePath: mockComponent});
+      jest.mock('svelte/compiler', () => ({compile: jest.fn(), preprocess: mockPreprocessor}));
+
+      // as long as this function has been called, we can assume success
+      expect(mockPreprocessor).toHaveBeenCalled();
+    });
+  });
+
+  describe('unmocked', () => {
+    let plugin;
+
+    beforeAll(() => {
+      plugin = require('../plugin');
+    });
+
+    it('generates code', () => {
+      const options = {};
+      const sveltePlugin = plugin(mockConfig, options);
+      const result = sveltePlugin.load({filePath: mockComponent});
+      expect(result).toMatchSnapshot();
+    });
+  });
+});

plugins/plugin-svelte/test/svelte.config.js

@@ -0,0 +1,7 @@
+const {sass} = require('svelte-preprocess-sass');
+
+module.exports = {
+  preprocess: {
+    style: sass({}, {name: 'css'}),
+  },
+};