Skip to content
Permalink
Browse files

feat: svelte v2 support

BREAKING CHANGE:

svelte template syntax changed in v2, and it is now the only supported syntax.
  • Loading branch information...
tivac committed Apr 25, 2018
1 parent bde57ba commit 9c48aefc42b3f94294e2921d671eb9d6e120e96e

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -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"
@@ -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(
@@ -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 [
@@ -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
@@ -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
};


@@ -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>"
`;
@@ -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>

@@ -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") })

0 comments on commit 9c48aef

Please sign in to comment.
You can’t perform that action at this time.