Svelte 3 support (#38)

* import svelte 2 or 3

* cleanup the config parser

* not sure why this isn't working?

* parcel is so clever

* fix gitignore

* only run svelte 3 test

* Found a hacky solution

* fix hmr for es6 modules

* try to fix travis

* idk what went wrong, but travis is becoming a pain in the ass. Might switch to Azure DevOps for this repo as well...

* switch to azure devops

* drop windows in test

* update build status badge

* comment out node 6 as it's broken in latest parcel release

azure-pipelines-template.yml

@@ -4,8 +4,8 @@ jobs:
       vmImage: ${{ parameters.vmImage }}
     strategy:
       matrix:
-        node_6_x:
-          node_version: 6.x
+        #node_6_x:
+        #  node_version: 6.x
         node_8_x:
           node_version: 8.x
         node_10_x:

azure-pipelines.yml

@@ -7,7 +7,3 @@ jobs:
     parameters:
       name: Linux
       vmImage: ubuntu-16.04
-  - template: azure-pipelines-template.yml
-    parameters:
-      name: Windows
-      vmImage: vs2017-win2016

lerna.json

@@ -0,0 +1,4 @@
+{
+  "packages": ["packages/*"],
+  "version": "2.0.0"
+}

package.json

@@ -1,14 +1,26 @@
 {
   "name": "parcel-plugin-svelte",
   "version": "2.0.0",
-  "description": "Parcel plugin to support svelte",
-  "main": "./dist.js",
+  "license": "MIT",
+  "private": true,
   "scripts": {
-    "test": "NODE_ENV=test mocha --require @babel/register --timeout 50000",
-    "build": "babel src -d lib",
+    "bootstrap": "lerna bootstrap",
+    "test": "yarn test:2 && yarn test:3",
+    "test:2": "yarn add svelte@2.16.1 --exact -OW && lerna run test:2",
+    "test:3": "yarn add svelte@3.0.0-alpha1 --exact -OW && lerna run test:3",
+    "format": "prettier --write \"./packages/**/*.{js,json,md}\"",
+    "build": "lerna run build",
     "prepublish": "yarn build",
-    "format": "prettier --write \"./{src,test,example}/**/*.{js,json,md}\"",
-    "clean": "rm -rf node_modules lib test/dist"
+    "clean": "lerna run clean && lerna clean -y"
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "devDependencies": {
+    "husky": "^1.3.1",
+    "lerna": "^3.13.0",
+    "lint-staged": "^8.1.4",
+    "prettier": "^1.16.4"
   },
   "husky": {
     "hooks": {
@@ -21,34 +33,7 @@
       "git add"
     ]
   },
-  "keywords": [
-    "parcel",
-    "svelte"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/DeMoorJasper/parcel-plugin-svelte.git"
-  },
-  "author": "Jasper De Moor",
-  "license": "ISC",
-  "peerDependencies": {
-    "parcel-bundler": "^1.11.0",
-    "svelte": "^2.0.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/register": "^7.0.0",
-    "husky": "^1.3.1",
-    "lint-staged": "^8.1.4",
-    "mocha": "^5.1.1",
-    "parcel-assert-bundle-tree": "^1.0.0",
-    "parcel-bundler": "^1.11.0",
-    "prettier": "^1.16.4",
-    "svelte": "^2.16.1"
-  },
-  "dependencies": {
-    "svelte-dev-helper": "^1.1.7"
+  "optionalDependencies": {
+    "svelte": "3.0.0-alpha1"
   }
 }

packages/parcel-plugin-svelte/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-present Jasper De Moor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/parcel-plugin-svelte/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "parcel-plugin-svelte",
+  "version": "2.0.0",
+  "description": "Parcel plugin to support svelte",
+  "main": "./dist.js",
+  "scripts": {
+    "build": "babel src -d lib",
+    "prepublish": "yarn build",
+    "clean": "rm -rf lib"
+  },
+  "keywords": [
+    "parcel",
+    "svelte"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/DeMoorJasper/parcel-plugin-svelte.git"
+  },
+  "author": "Jasper De Moor",
+  "license": "ISC",
+  "peerDependencies": {
+    "parcel-bundler": "^1.11.0",
+    "svelte": "^2.0.0 || ^3.0.0"
+  },
+  "dependencies": {
+    "svelte-dev-helper": "^1.1.7"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1"
+  }
+}

packages/parcel-plugin-svelte/readme.md

@@ -0,0 +1,48 @@
+# parcel-plugin-svelte
+
+[![Build Status](https://dev.azure.com/DeMoorJasper/parcel-plugin-svelte/_apis/build/status/DeMoorJasper.parcel-plugin-svelte?branchName=master)](https://dev.azure.com/DeMoorJasper/parcel-plugin-svelte/_build/latest?definitionId=3&branchName=master)
+
+A parcel plugin that enables svelte support [[CHANGELOG]](https://github.com/DeMoorJasper/parcel-plugin-svelte/blob/master/CHANGELOG.md)
+
+## Installation
+
+```bash
+yarn add parcel-plugin-svelte -D
+```
+
+or
+
+```bash
+npm install parcel-plugin-svelte -D
+```
+
+## Configuration
+
+The default configuration should work for most people but for anyone who would like to change the way svelte compiles the files there is the possibility to configure it.
+
+This can be done though a `svelte.config.js` file, `.svelterc` file or `svelte` field in `package.json`.
+
+For documentation on which parameters u can set and use look at the official [svelte docs](https://github.com/sveltejs/svelte)
+
+```Javascript
+// Used by svelte.compile
+compilerOptions: {
+  ...
+},
+// Used by svelte.preprocess
+preprocess: {
+  ...
+}
+```
+
+### CSS CompilerOptions
+
+If you set `compilerOptions.css` to `false`, CSS will be bundled in a separate file. It also enables post-transformations provided by Parcel such as PostCSS and file resolution for `url()`.
+
+## How does it work?
+
+If you want to know how it works have a look at [my article](https://medium.com/@jasperdemoor/writing-a-parcel-plugin-3936271cbaaa) about this plugin, might help if you wanna fix a bug or write your own parcel-plugin.
+
+## License
+
+MIT License

src/svelte-asset.js → packages/parcel-plugin-svelte/src/svelte-asset.js

@@ -1,5 +1,10 @@
 const path = require('path');
-const { compile, preprocess } = require('svelte');
+
+const { version } = require('svelte/package.json');
+const major_version = +version[0];
+
+const { compile, preprocess } = major_version >= 3 ? require('svelte/compiler.js') : require('svelte');
+
 const { Asset } = require('./parcel-adapter');
 const { sanitize, capitalize } = require('./utils');
 
@@ -15,17 +20,17 @@ function makeHot(id, code, asset) {
       if (!module.hot.data) {
         // initial load
         configure({});
-        $2 = register('${id}', $2);
+        $3 = register('${id}', $3);
       } else {
         // hot update
-        $2 = reload('${id}', $2);
+        $3 = reload('${id}', $3);
       }
     }
 
-    module.exports = $2;
+    module.exports = $3;
   `;
 
-  return code.replace(/(module.exports = ([^;]*));/, replacement);
+  return code.replace(/((module.exports =|export default) ([^;]*));/, replacement);
 }
 
 class SvelteAsset extends Asset {
@@ -34,40 +39,46 @@ class SvelteAsset extends Asset {
     this.type = 'js';
   }
 
-  async generate() {
-    let compilerOptions = {
+  async getConfig() {
+    let config = (await super.getConfig(['.svelterc', 'svelte.config.js', 'package.json'])) || {};
+    config = config.svelte || config;
+
+    let defaultOptions = {
       generate: 'dom',
-      format: 'cjs',
       store: true,
-      css: true
+      css: true,
+      format: major_version >= 3 ? 'esm' : 'es'
     };
-    let preprocessOptions;
 
-    const fixedCompilerOptions = {
+    let customCompilerOptions = config.compilerOptions || {};
+
+    let fixedCompilerOptions = {
       filename: this.relativeName,
       // The name of the constructor. Required for 'iife' and 'umd' output,
       // but otherwise mostly useful for debugging. Defaults to 'SvelteComponent'
-      name: capitalize(sanitize(this.relativeName))
+      name: capitalize(sanitize(this.relativeName)),
+      shared: customCompilerOptions.shared || major_version >= 3 ? 'svelte/internal.js' : 'svelte/shared.js'
     };
 
-    let customConfig = (await this.getConfig(['.svelterc', 'svelte.config.js', 'package.json'])) || {};
-    customConfig = customConfig.svelte || customConfig;
-    if (customConfig.preprocess) {
-      preprocessOptions = customConfig.preprocess;
-    }
+    config.compilerOptions = Object.assign({}, defaultOptions, customCompilerOptions, fixedCompilerOptions);
 
-    compilerOptions = Object.assign(compilerOptions, customConfig.compilerOptions || {}, fixedCompilerOptions);
+    return config;
+  }
+
+  async generate() {
+    let config = await this.getConfig();
+    let compilerOptions = config.compilerOptions;
 
-    if (preprocessOptions) {
-      const preprocessed = await preprocess(this.contents, preprocessOptions);
+    if (config.preprocess) {
+      const preprocessed = await preprocess(this.contents, config.preprocess);
       this.contents = preprocessed.toString();
     }
 
     let { css, js } = compile(this.contents, compilerOptions);
     let { map, code } = js;
 
     if (process.env.NODE_ENV !== 'production') {
-      code = makeHot(fixedCompilerOptions.filename, code, this);
+      code = makeHot(compilerOptions.filename, code, this);
     }
 
     css = css.code;

packages/svelte-2-example/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "svelte-2-example",
+  "main": "index.html",
+  "version": "2.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "start": "parcel index.html --no-cache"
+  },
+  "dependencies": {
+    "parcel-bundler": "^1.11.0",
+    "parcel-plugin-svelte": "^2.0.0",
+    "svelte": "^2.16.1"
+  }
+}

packages/svelte-2-tests/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "svelte-2-tests",
+  "version": "2.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "test:2": "yarn clean && NODE_ENV=test mocha --require @babel/register --timeout 50000",
+    "clean": "rm -rf test/dist"
+  },
+  "dependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/register": "^7.0.0",
+    "mocha": "^5.1.1",
+    "parcel-assert-bundle-tree": "^1.0.0",
+    "parcel-bundler": "^1.11.0",
+    "parcel-plugin-svelte": "^2.0.0",
+    "svelte": "^2.16.1"
+  }
+}

test/basic.js → packages/svelte-2-tests/test/basic.js

@@ -9,7 +9,16 @@ describe('basic', function() {
 
     assertBundleTree(bundle, {
       type: 'js',
-      assets: ['index.js', 'Demo.svelte', 'Header.svelte', 'hot-api.js', 'index.js', 'proxy.js', 'registry.js'],
+      assets: [
+        'index.js',
+        'Demo.svelte',
+        'Header.svelte',
+        'hot-api.js',
+        'index.js',
+        'proxy.js',
+        'registry.js',
+        'shared.js'
+      ],
       childBundles: [
         {
           type: 'map'

test/styles.js → packages/svelte-2-tests/test/styles.js

@@ -11,7 +11,7 @@ describe('styles', function() {
 
     assertBundleTree(bundle, {
       name: 'main.js',
-      assets: ['main.js', 'component.svelte', 'hot-api.js', 'index.js', 'proxy.js', 'registry.js']
+      assets: ['main.js', 'component.svelte', 'hot-api.js', 'index.js', 'proxy.js', 'registry.js', 'shared.js']
     });
 
     let bundleContent = await new Promise(resolve =>

test/utils.js → packages/svelte-2-tests/test/utils.js

@@ -1,6 +1,6 @@
 const Bundler = require('parcel-bundler');
 const path = require('path');
-const SveltePlugin = require('../dist');
+const SveltePlugin = require('parcel-plugin-svelte');
 
 async function setupBundler(input, options) {
   const bundler = new Bundler(

test/with_config.js → packages/svelte-2-tests/test/with_config.js

@@ -11,7 +11,7 @@ describe('with config', function() {
 
     assertBundleTree(bundle, {
       type: 'js',
-      assets: ['run.js', 'AppWithConfig.svelte'],
+      assets: ['AppWithConfig.svelte', 'hot-api.js', 'index.js', 'proxy.js', 'registry.js', 'run.js', 'shared.js'],
       childBundles: [
         {
           type: 'map'