feat: svelte v2 support

BREAKING CHANGE: svelte template syntax changed in v2, and it is now the only supported syntax.
tivac · Apr 25, 2018 · 9c48aef · 9c48aef
1 parent bde57ba
commit 9c48aef
Show file tree

Hide file tree

Showing 9 changed files with 385 additions and 104 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,15 +37,15 @@
     "husky": "^0.14.3",
     "jest": "^22.4.3",
     "lerna": "^3.0.0-beta.18",
-    "lint-staged": "^6.1.1",
+    "lint-staged": "^7.0.4",
     "locater": "^1.3.0",
     "modular-css-core": "file:./packages/core",
     "pegjs": "^0.10.0",
     "pinpoint": "^1.1.0",
-    "rollup": "^0.56.1",
+    "rollup": "^0.58.2",
     "rollup-plugin-svelte": "^4.1.0",
     "shelljs": "^0.8.1",
-    "svelte": "^1.64.1",
+    "svelte": "^2.1.1",
     "test-utils": "file:./packages/test-utils",
     "watchify": "^3.9.0",
     "webpack": "^4.6.0"

diff --git a/packages/rollup/rollup.js b/packages/rollup/rollup.js
@@ -13,7 +13,7 @@ const output    = require("modular-css-core/lib/output.js");
 // sourcemaps for css-to-js don't make much sense, so always return nothing
 // https://github.com/rollup/rollup/wiki/Plugins#conventions
 const map = {
-    mappings : ""
+    mappings : "",
 };
 
 module.exports = function(opts) {
@@ -44,7 +44,7 @@ module.exports = function(opts) {
         },
 
         transform : function(code, id) {
-            var removed;
+            let removed;
 
             if(!filter(id) || id.slice(slice) !== options.ext) {
                 return null;
@@ -67,11 +67,12 @@ module.exports = function(opts) {
                 )
             )
             .then((results) => {
-                var result   = results[0],
-                    exported = output.join(result.exports),
-                    out      = [
-                        `export default ${JSON.stringify(exported, null, 4)};`
-                    ];
+                const [ result ] = results;
+                const exported = output.join(result.exports);
+
+                let out = [
+                    `export default ${JSON.stringify(exported, null, 4)};`
+                ];
 
                 // Add dependencies
                 out = out.concat(

diff --git a/packages/rollup/test/__snapshots__/rollup.test.js.snap b/packages/rollup/test/__snapshots__/rollup.test.js.snap
@@ -87,8 +87,8 @@ console.log(css, fooga);
 `;
 
 exports[`/rollup.js shouldn't disable sourcemap generation 1`] = `
-Object {
-  "file": "simple.js",
+SourceMap {
+  "file": undefined,
   "mappings": ";;;;;AAEA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC",
   "names": Array [],
   "sourcesContent": Array [

diff --git a/packages/svelte/methods.js b/packages/svelte/methods.js
@@ -21,9 +21,9 @@ exports.markup = (processor) => ({ content, filename }) => {
 
             return {
                 code : content
-                    // Replace simple {{css.<key>}} values first
+                    // Replace simple {css.<key>} values first
                     .replace(
-                        new RegExp(`{{css.(${Object.keys(exported).join("|")})}}`, "gm"),
+                        new RegExp(`{css.(${Object.keys(exported).join("|")})}`, "gm"),
                         (match, key) => exported[key].join(" ")
                     )
                     // Then any remaining bare css.<key> values

diff --git a/packages/svelte/test/__snapshots__/rollup.test.js.snap b/packages/svelte/test/__snapshots__/rollup.test.js.snap
@@ -35,11 +35,12 @@ function blankObject() {
 function destroy(detach) {
 	this.destroy = noop;
 	this.fire('destroy');
-	this.set = this.get = noop;
+	this.set = noop;
 
 	if (detach !== false) this._fragment.u();
 	this._fragment.d();
-	this._fragment = this._state = null;
+	this._fragment = null;
+	this._state = {};
 }
 
 function _differs(a, b) {
@@ -62,8 +63,8 @@ function fire(eventName, data) {
 	}
 }
 
-function get(key) {
-	return key ? this._state[key] : this._state;
+function get() {
+	return this._state;
 }
 
 function init(component, options) {
@@ -75,21 +76,7 @@ function init(component, options) {
 	component.store = component.root.store || options.store;
 }
 
-function observe(key, callback, options) {
-	var fn = callback.bind(this);
-
-	if (!options || options.init !== false) {
-		fn(this.get()[key], undefined);
-	}
-
-	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-	});
-}
-
 function on(eventName, handler) {
-	if (eventName === 'teardown') return this.on('destroy', handler);
-
 	var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
 	handlers.push(handler);
 
@@ -145,18 +132,16 @@ function _unmount() {
 }
 
 var proto = {
-	destroy: destroy,
-	get: get,
-	fire: fire,
-	observe: observe,
-	on: on,
-	set: set,
-	teardown: destroy,
+	destroy,
+	get,
+	fire,
+	on,
+	set,
 	_recompute: noop,
-	_set: _set,
-	_mount: _mount,
-	_unmount: _unmount,
-	_differs: _differs
+	_set,
+	_mount,
+	_unmount,
+	_differs
 };
 
 

diff --git a/packages/svelte/test/__snapshots__/svelte.test.js.snap b/packages/svelte/test/__snapshots__/svelte.test.js.snap
@@ -4,7 +4,7 @@ exports[`/svelte.js should generate exports 1`] = `
 "<div class=\\"flex wrapper\\">
     <h1 class=\\"flex fooga hd\\">Head</h1>
     <div class=\\"fooga wooga bd\\">
-        <p class=\\"{{true ? \\"text\\" : \\"active\\" }}\\">Text</p>
+        <p class=\\"{true ? \\"text\\" : \\"active\\" }\\">Text</p>
     </div>
 </div>
 
@@ -42,8 +42,8 @@ exports[`/svelte.js should ignore files without <style> blocks 1`] = `
 
 exports[`/svelte.js should ignore files without <style> blocks 2`] = `""`;
 
-exports[`/svelte.js should ignore invalid {{css.<key>}} 1`] = `
-"<h1 class=\\"{{css.nope}}\\">Hello</h1>
+exports[`/svelte.js should ignore invalid {css.<key>} 1`] = `
+"<h1 class=\\"{css.nope}\\">Hello</h1>
 <h2 class=\\"yup\\">World</h2>
 <style>/* replaced by modular-css */</style>"
 `;
diff --git a/packages/svelte/test/specimens/svelte.html b/packages/svelte/test/specimens/svelte.html
@@ -1,7 +1,7 @@
-<div class="{{css.wrapper}}">
-    <h1 class="{{css.hd}}">Head</h1>
-    <div class="{{css.bd}}">
-        <p class="{{true ? css.text : css.active }}">Text</p>
+<div class="{css.wrapper}">
+    <h1 class="{css.hd}">Head</h1>
+    <div class="{css.bd}">
+        <p class="{true ? css.text : css.active }">Text</p>
     </div>
 </div>
 

diff --git a/packages/svelte/test/svelte.test.js b/packages/svelte/test/svelte.test.js
@@ -54,15 +54,15 @@ describe("/svelte.js", () => {
         );
     });
 
-    it("should ignore invalid {{css.<key>}}", () => {
+    it("should ignore invalid {css.<key>}", () => {
         const { preprocess } = plugin({
             namer
         });
 
         return svelte.preprocess(
             dedent(`
-                <h1 class="{{css.nope}}">Hello</h1>
-                <h2 class="{{css.yup}}">World</h2>
+                <h1 class="{css.nope}">Hello</h1>
+                <h2 class="{css.yup}">World</h2>
                 <style>.yup { color: red; }</style>
             `),
             Object.assign({}, preprocess, { filename : require.resolve("./specimens/svelte.html") })