Merge pull request #78 from sveltejs/v3

v3 fixes

Author: Rich-Harris

index.js

@@ -1,7 +1,6 @@
 const { basename, extname, relative } = require('path');
 const { getOptions } = require('loader-utils');
 const VirtualModules = require('./lib/virtual');
-const requireRelative = require('require-relative');
 
 const hotApi = require.resolve('./lib/hot-api.js');
 
@@ -11,6 +10,20 @@ const { compile, preprocess } = major_version >= 3
 	? require('svelte/compiler')
 	: require('svelte');
 
+const pluginOptions = {
+	externalDependencies: true,
+	hotReload: true,
+	hotOptions: true,
+	preprocess: true,
+	emitCss: true,
+
+	// legacy
+	shared: true,
+	style: true,
+	script: true,
+	markup: true
+};
+
 function makeHot(id, code, hotOptions) {
 	const options = JSON.stringify(hotOptions);
 	const replacement = `
@@ -62,7 +75,7 @@ function normalize(compiled) {
 		? compiled.css
 		: { code: compiled.css, map: compiled.cssMap };
 
-	return { js, css, ast: compiled.ast };
+	return { js, css, ast: compiled.ast, warnings: compiled.warnings || compiled.stats.warnings || [] };
 }
 
 const warned = {};
@@ -99,22 +112,27 @@ module.exports = function(source, map) {
 	const isServer = this.target === 'node' || (options.generate && options.generate == 'ssr');
 	const isProduction = this.minimize || process.env.NODE_ENV === 'production';
 
-	options.filename = this.resourcePath;
-	if (!('format' in options)) {
-		options.format = major_version >= 3 ? 'esm' : 'es';
+	const compileOptions = {
+		filename: this.resourcePath,
+		format: options.format || (major_version >= 3 ? 'esm' : 'es')
+	};
+
+	const handleWarning = warning => this.emitWarning(new Error(warning));
+
+	if (major_version >= 3) {
+		// TODO anything?
+	} else {
+		compileOptions.shared = options.shared || 'svelte/shared.js';
+		compileOptions.name = capitalize(sanitize(options.filename));
+		compileOptions.onwarn = options.onwarn || handleWarning;
 	}
-	if (!('shared' in options)) {
-		const shared = (major_version >= 3 ? 'svelte/internal.js' : 'svelte/shared.js');
-		options.shared = (options.format === 'es' || options.format === 'esm') &&
-			requireRelative.resolve(shared, process.cwd());
+
+	for (const option in options) {
+		if (!pluginOptions[option]) compileOptions[option] = options[option];
 	}
-	if (!('name' in options)) options.name = capitalize(sanitize(options.filename));
-	if (!('onwarn' in options)) options.onwarn = warning => this.emitWarning(new Error(warning));
-	if (options.emitCss) options.css = false;
-	if (options.externalDependencies) options.externalDependencies.forEach(dep => this.addDependency(dep));
 
 	deprecatePreprocessOptions(options);
-	options.preprocess.filename = options.filename;
+	options.preprocess.filename = compileOptions.filename;
 
 	preprocess(source, options.preprocess).then(processed => {
 		if (processed.dependencies && this.addDependency) {
@@ -123,16 +141,24 @@ module.exports = function(source, map) {
 			}
 		}
 
-		let { js, css } = normalize(compile(processed.toString(), options));
+		let { js, css, warnings } = normalize(compile(processed.toString(), compileOptions));
+
+		if (major_version >= 3) {
+			warnings.forEach(
+				options.onwarn
+					? warning => options.onwarn(warning, handleWarning)
+					: handleWarning
+			);
+		}
 
 		if (options.hotReload && !isProduction && !isServer) {
 			const hotOptions = Object.assign({}, options.hotOptions);
-			const id = JSON.stringify(relative(process.cwd(), options.filename));
+			const id = JSON.stringify(relative(process.cwd(), compileOptions.filename));
 			js.code = makeHot(id, js.code, hotOptions);
 		}
 
 		if (options.emitCss && css.code) {
-			const cssFilepath = options.filename.replace(
+			const cssFilepath = compileOptions.filename.replace(
 				/\.[^/.]+$/,
 				`.svelte.css`
 			);

package-lock.json

@@ -16,7 +16,6 @@
   ],
   "dependencies": {
     "loader-utils": "^1.1.0",
-    "require-relative": "^0.8.7",
     "svelte-dev-helper": "^1.1.9"
   },
   "devDependencies": {
@@ -26,7 +25,7 @@
     "mocha": "^5.2.0",
     "sinon": "^6.1.5",
     "sinon-chai": "^3.2.0",
-    "svelte": "^2.9.5"
+    "svelte": "^3.0.0-beta.5"
   },
   "peerDependencies": {
     "svelte": ">1.44.0"

package.json

@@ -1,19 +1,13 @@
 <p>Count: {count}</p>
-<button on:click='set({ count: count + 1 })'>+1</button>
+<button on:click="{() => count += 1}">+1</button>
 ​
 <style>
-  button {
-    width: 50px;
-    height: 50px;
-  }
+	button {
+		width: 50px;
+		height: 50px;
+	}
 </style>
 
 <script>
-  export default {
-    data () {
-      return {
-        count: 0
-      };
-    }
-  };
+	let count = 0;
 </script>

test/fixtures/css.html

@@ -1,13 +1,7 @@
 <p>{hi}</p>
 ​
 <script>
-  import { hello } from './utils';
+	import { hello } from './utils';
 
-  export default {
-    data() {
-      return {
-        hi: hello('friend')
-      };
-    }
-  };
+	const hi = hello('friend');
 </script>

test/fixtures/es2015.html

@@ -1,12 +1,6 @@
-<p>Count: {count}</p>
-<button on:click='set({ count: count + 1 })'>+1</button>
-​
 <script>
-  export default {
-    data () {
-      return {
-        count: 0
-      };
-    }
-  };
-</script>
+	let count = 1;
+</script>
+
+<p>Count: {count}</p>
+<button on:click="{() => count += 1}">+1</button>

test/fixtures/good.html

@@ -1,11 +1,5 @@
-<Nested />
-
 <script>
-  import Nested from './nested';
+	import Nested from './nested';
+</script>
 
-  export default {
-    components: {
-      Nested
-    }
-  };
-</script>
+<Nested />

test/fixtures/parent.html

@@ -1,2 +1 @@
-<p>Count: {count}</p>{/if}
-<button on:click='set({ count: count + 1 })'>+1</button>
+<p>Count: {count}</p>{/if}

test/fixtures/parse-error.html

@@ -1,9 +1,5 @@
-<p>Count: {count}</p>
-
 <script>
-  export default {
-    computed: {
-      foo: 'BAR'
-    }
-  };
-</script>
+	export default {};
+</script>
+
+<h1>Hello world</h1>

test/fixtures/validation-error.html

@@ -71,32 +71,7 @@ describe('loader', () => {
 				expect(err.message).to.eql(d`
 					ParseError: Unexpected block closing tag (1:23)
 					1: <p>Count: {count}</p>{/if}
-					                          ^
-					2: <button on:click='set({ count: count + 1 })'>+1</button>`);
-
-				expect(code).not.to.exist;
-				expect(map).not.to.exist;
-			})
-		);
-
-		it(
-			'should handle wrong export',
-			testLoader('test/fixtures/export-error.html', function(
-				err,
-				code,
-				map,
-				context
-			) {
-				expect(err).to.exist;
-
-				expect(err.message).to.eql(d`
-					ParseError: Unexpected token (5:7)
-					3: <script>
-					4:   export {
-					5:     foo: 'BAR'
-					          ^
-					6:   };
-					7: </script>`);
+					                          ^`);
 
 				expect(code).not.to.exist;
 				expect(map).not.to.exist;
@@ -113,14 +88,13 @@ describe('loader', () => {
 			) {
 				expect(err).to.exist;
 
-				expect(err.message).to.eql(d`
-					ValidationError: Computed properties can be function expressions or arrow function expressions (6:11)
-					4:   export default {
-					5:     computed: {
-					6:       foo: 'BAR'
-					              ^
-					7:     }
-					8:   };`);
+				expect(err.message.trim()).to.eql(d`
+					ValidationError: A component cannot have a default export (2:1)
+					1: <script>
+					2:   export default {};
+					     ^
+					3: </script>
+					4:`);
 
 				expect(code).not.to.exist;
 				expect(map).not.to.exist;
@@ -138,8 +112,7 @@ describe('loader', () => {
 				expect(map).to.exist;
 
 				// es2015 statements remain
-				expect(code).to.contain(`import { hello } from './utils';`);
-				expect(code).to.contain('data() {');
+				expect(code).to.contain(`import { hello } from "./utils";`);
 			})
 		);
 
@@ -149,7 +122,7 @@ describe('loader', () => {
 				expect(err).not.to.exist;
 
 				// es2015 statements remain
-				expect(code).to.contain(`import Nested from './nested';`);
+				expect(code).to.contain(`import Nested from "./nested";`);
 
 				expect(code).to.exist;
 				expect(map).to.exist;
@@ -180,33 +153,18 @@ describe('loader', () => {
 			);
 		});
 
-		describe('shared', () => {
-			it(
-				'should configure shared=false (default)',
-				testLoader(
-					'test/fixtures/good.html',
-					function(err, code, map) {
-						expect(err).not.to.exist;
-
-						expect(code).not.to.contain('import {');
-						expect(code).not.to.contain('svelte/shared.js');
-					},
-					{ shared: false },
-					1
-				)
-			);
-
+		describe('sveltePath', () => {
 			it(
-				'should configure shared=true',
+				'should configure sveltePath',
 				testLoader(
 					'test/fixtures/good.html',
 					function(err, code, map) {
 						expect(err).not.to.exist;
 
 						expect(code).to.contain('import {');
-						expect(code).to.contain('svelte/shared.js');
+						expect(code).to.contain('custom-svelte/internal');
 					},
-					{ shared: true }
+					{ sveltePath: 'custom-svelte' }
 				)
 			);
 		});
@@ -230,9 +188,7 @@ describe('loader', () => {
 					function(err, code, map) {
 						expect(err).not.to.exist;
 
-						expect(code).to.contain(
-							'.render = function(state, options = {}) {'
-						);
+						expect(code).to.contain('create_ssr_component');
 					},
 					{ generate: 'ssr' }
 				)