Fix Svelte plugin SSR bug; add test (#1241)

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;
@@ -47,8 +49,8 @@ module.exports = function plugin(snowpackConfig, pluginOptions = {}) {
       }
 
       const {js, css} = svelte.compile(codeToCompile, {
-        ...svelteOptions,
         generate: isSSR ? 'ssr' : 'dom',
+        ...svelteOptions, // Note(drew) should take precedence over generate above
         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/mocked.test.js

@@ -0,0 +1,43 @@
+const path = require('path');
+
+const mockCompiler = jest.fn().mockImplementation((code) => ({js: {code}}));
+const mockPreprocessor = jest.fn().mockImplementation((code) => code);
+jest.mock('svelte/compiler', () => ({compile: mockCompiler, preprocess: mockPreprocessor})); // important: mock before import
+
+const plugin = require('../plugin');
+
+const mockConfig = {buildOptions: {sourceMaps: false}, installOptions: {rollup: {plugins: []}}};
+const mockComponent = path.join(__dirname, 'Button.svelte');
+
+describe('@snowpack/plugin-svelte (mocked)', () => {
+  afterEach(() => {
+    mockCompiler.mockClear();
+    mockPreprocessor.mockClear();
+  });
+
+  it('passes options to compiler', async () => {
+    const options = {
+      generate: 'ssr',
+      isDev: false,
+    };
+    const sveltePlugin = plugin(mockConfig, options);
+    await 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', async () => {
+    // test-only config option
+    const options = {__config: path.join(__dirname, 'svelte.config.js')};
+
+    const sveltePlugin = plugin(mockConfig, options);
+
+    await sveltePlugin.load({filePath: mockComponent});
+
+    // as long as this function has been called, we can assume success
+    expect(mockPreprocessor).toHaveBeenCalled();
+  });
+});

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

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

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

@@ -0,0 +1,17 @@
+const path = require('path');
+const plugin = require('../plugin');
+
+const mockConfig = {buildOptions: {sourceMaps: false}, installOptions: {rollup: {plugins: []}}};
+const mockComponent = path.join(__dirname, 'Button.svelte');
+
+describe('@snowpack/plugin-svelte (unmocked)', () => {
+  it('generates code', async () => {
+    const options = {};
+    const sveltePlugin = plugin(mockConfig, options);
+    const result = await sveltePlugin.load({filePath: mockComponent});
+
+    // assume if some CSS & JS were returned, it transformed successfully
+    expect(result['.css'].code).toBeTruthy();
+    expect(result['.js'].code).toBeTruthy();
+  });
+});