mirror of
https://github.com/sveltejs/svelte.git
synced 2024-12-01 17:30:59 +01:00
Merge branch 'master' into codegen
This commit is contained in:
commit
f87c3328b5
10
package.json
10
package.json
@ -16,12 +16,8 @@
|
||||
"codecov": "codecov",
|
||||
"precodecov": "npm run coverage",
|
||||
"lint": "eslint src test/*.js",
|
||||
"build": "npm run build:main && npm run build:shared && npm run build:ssr",
|
||||
"build:main": "node src/shared/_build.js && rollup -c rollup/rollup.config.main.js",
|
||||
"build:shared": "rollup -c rollup/rollup.config.shared.js",
|
||||
"build:ssr": "rollup -c rollup/rollup.config.ssr.js",
|
||||
"dev": "node src/shared/_build.js && rollup -c rollup/rollup.config.main.js -w",
|
||||
"dev:shared": "rollup -c rollup/rollup.config.shared.js -w",
|
||||
"build": "node src/shared/_build.js && rollup -c",
|
||||
"dev": "node src/shared/_build.js && rollup -c -w",
|
||||
"pretest": "npm run build",
|
||||
"prepublish": "npm run build && npm run lint",
|
||||
"prettier": "prettier --use-tabs --single-quote --trailing-comma es5 --write \"src/**/*.ts\""
|
||||
@ -75,7 +71,7 @@
|
||||
"nyc": "^10.0.0",
|
||||
"prettier": "^1.4.1",
|
||||
"reify": "^0.4.4",
|
||||
"rollup": "^0.39.0",
|
||||
"rollup": "^0.43.0",
|
||||
"rollup-plugin-buble": "^0.15.0",
|
||||
"rollup-plugin-commonjs": "^7.0.0",
|
||||
"rollup-plugin-json": "^2.1.0",
|
||||
|
74
rollup.config.js
Normal file
74
rollup.config.js
Normal file
@ -0,0 +1,74 @@
|
||||
import path from 'path';
|
||||
import nodeResolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import json from 'rollup-plugin-json';
|
||||
import typescript from 'rollup-plugin-typescript';
|
||||
import buble from 'rollup-plugin-buble';
|
||||
|
||||
const src = path.resolve('src');
|
||||
|
||||
export default [
|
||||
/* compiler/svelte.js */
|
||||
{
|
||||
entry: 'src/index.ts',
|
||||
dest: 'compiler/svelte.js',
|
||||
format: 'umd',
|
||||
moduleName: 'svelte',
|
||||
plugins: [
|
||||
{
|
||||
resolveId(importee, importer) {
|
||||
// bit of a hack — TypeScript only really works if it can resolve imports,
|
||||
// but they misguidedly chose to reject imports with file extensions. This
|
||||
// means we need to resolve them here
|
||||
if (
|
||||
importer &&
|
||||
importer.startsWith(src) &&
|
||||
importee[0] === '.' &&
|
||||
path.extname(importee) === ''
|
||||
) {
|
||||
return path.resolve(path.dirname(importer), `${importee}.ts`);
|
||||
}
|
||||
}
|
||||
},
|
||||
nodeResolve({ jsnext: true, module: true }),
|
||||
commonjs(),
|
||||
json(),
|
||||
typescript({
|
||||
include: 'src/**',
|
||||
exclude: 'src/shared/**',
|
||||
typescript: require('typescript')
|
||||
})
|
||||
],
|
||||
sourceMap: true
|
||||
},
|
||||
|
||||
/* ssr/register.js */
|
||||
{
|
||||
entry: 'src/server-side-rendering/register.js',
|
||||
dest: 'ssr/register.js',
|
||||
format: 'cjs',
|
||||
plugins: [
|
||||
nodeResolve({ jsnext: true, module: true }),
|
||||
commonjs(),
|
||||
buble({
|
||||
include: 'src/**',
|
||||
exclude: 'src/shared/**',
|
||||
target: {
|
||||
node: 4
|
||||
}
|
||||
})
|
||||
],
|
||||
external: [path.resolve('src/index.ts'), 'fs', 'path'],
|
||||
paths: {
|
||||
[path.resolve('src/index.ts')]: '../compiler/svelte.js'
|
||||
},
|
||||
sourceMap: true
|
||||
},
|
||||
|
||||
/* shared.js */
|
||||
{
|
||||
entry: 'src/shared/index.js',
|
||||
dest: 'shared.js',
|
||||
format: 'es'
|
||||
}
|
||||
];
|
@ -1,39 +0,0 @@
|
||||
import path from 'path';
|
||||
import nodeResolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import json from 'rollup-plugin-json';
|
||||
import typescript from 'rollup-plugin-typescript';
|
||||
|
||||
const src = path.resolve('src');
|
||||
|
||||
export default {
|
||||
entry: 'src/index.ts',
|
||||
moduleName: 'svelte',
|
||||
targets: [{ dest: 'compiler/svelte.js', format: 'umd' }],
|
||||
plugins: [
|
||||
{
|
||||
resolveId(importee, importer) {
|
||||
// bit of a hack — TypeScript only really works if it can resolve imports,
|
||||
// but they misguidedly chose to reject imports with file extensions. This
|
||||
// means we need to resolve them here
|
||||
if (
|
||||
importer &&
|
||||
importer.startsWith(src) &&
|
||||
importee[0] === '.' &&
|
||||
path.extname(importee) === ''
|
||||
) {
|
||||
return path.resolve(path.dirname(importer), `${importee}.ts`);
|
||||
}
|
||||
}
|
||||
},
|
||||
nodeResolve({ jsnext: true, module: true }),
|
||||
commonjs(),
|
||||
json(),
|
||||
typescript({
|
||||
include: 'src/**',
|
||||
exclude: 'src/shared/**',
|
||||
typescript: require('typescript')
|
||||
})
|
||||
],
|
||||
sourceMap: true
|
||||
};
|
@ -1,5 +0,0 @@
|
||||
export default {
|
||||
entry: 'src/shared/index.js',
|
||||
dest: 'shared.js',
|
||||
format: 'es'
|
||||
};
|
@ -1,26 +0,0 @@
|
||||
import * as path from 'path';
|
||||
import nodeResolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import buble from 'rollup-plugin-buble';
|
||||
|
||||
export default {
|
||||
entry: 'src/server-side-rendering/register.js',
|
||||
moduleName: 'svelte',
|
||||
targets: [{ dest: 'ssr/register.js', format: 'cjs' }],
|
||||
plugins: [
|
||||
nodeResolve({ jsnext: true, module: true }),
|
||||
commonjs(),
|
||||
buble({
|
||||
include: 'src/**',
|
||||
exclude: 'src/shared/**',
|
||||
target: {
|
||||
node: 4
|
||||
}
|
||||
})
|
||||
],
|
||||
external: [path.resolve('src/index.ts'), 'fs', 'path'],
|
||||
paths: {
|
||||
[path.resolve('src/index.ts')]: '../compiler/svelte.js'
|
||||
},
|
||||
sourceMap: true
|
||||
};
|
@ -3,6 +3,6 @@ export default function hash(str: string): number {
|
||||
let hash = 5381;
|
||||
let i = str.length;
|
||||
|
||||
while (i--) hash = (hash * 33) ^ str.charCodeAt(i);
|
||||
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
|
||||
return hash >>> 0;
|
||||
}
|
||||
|
@ -5,37 +5,31 @@ export function linear(t) {
|
||||
return t;
|
||||
}
|
||||
|
||||
export function generateKeyframes(
|
||||
export function generateRule(
|
||||
a,
|
||||
b,
|
||||
delta,
|
||||
duration,
|
||||
ease,
|
||||
fn,
|
||||
node,
|
||||
style
|
||||
fn
|
||||
) {
|
||||
var id = '__svelte' + ~~(Math.random() * 1e9); // TODO make this more robust
|
||||
var keyframes = '@keyframes ' + id + '{\n';
|
||||
var keyframes = '{\n';
|
||||
|
||||
for (var p = 0; p <= 1; p += 16.666 / duration) {
|
||||
var t = a + delta * ease(p);
|
||||
keyframes += p * 100 + '%{' + fn(t) + '}\n';
|
||||
}
|
||||
|
||||
keyframes += '100% {' + fn(b) + '}\n}';
|
||||
style.textContent += keyframes;
|
||||
return keyframes + '100% {' + fn(b) + '}\n}';
|
||||
}
|
||||
|
||||
document.head.appendChild(style);
|
||||
// https://github.com/darkskyapp/string-hash/blob/master/index.js
|
||||
export function hash(str) {
|
||||
var hash = 5381;
|
||||
var i = str.length;
|
||||
|
||||
node.style.animation = (node.style.animation || '')
|
||||
.split(',')
|
||||
.filter(function(anim) {
|
||||
// when introing, discard old animations if there are any
|
||||
return anim && (delta < 0 || !/__svelte/.test(anim));
|
||||
})
|
||||
.concat(id + ' ' + duration + 'ms linear 1 forwards')
|
||||
.join(', ');
|
||||
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
|
||||
return hash >>> 0;
|
||||
}
|
||||
|
||||
export function wrapTransition(node, fn, params, intro, outgroup) {
|
||||
@ -45,8 +39,10 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
|
||||
var cssText;
|
||||
|
||||
// TODO share <style> tag between all transitions?
|
||||
if (obj.css) {
|
||||
if (obj.css && !transitionManager.stylesheet) {
|
||||
var style = createElement('style');
|
||||
document.head.appendChild(style);
|
||||
transitionManager.stylesheet = style.sheet;
|
||||
}
|
||||
|
||||
if (intro) {
|
||||
@ -90,16 +86,26 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
|
||||
|
||||
if (obj.css) {
|
||||
if (obj.delay) node.style.cssText = cssText;
|
||||
generateKeyframes(
|
||||
|
||||
program.rule = generateRule(
|
||||
program.a,
|
||||
program.b,
|
||||
program.delta,
|
||||
program.duration,
|
||||
ease,
|
||||
obj.css,
|
||||
node,
|
||||
style
|
||||
obj.css
|
||||
);
|
||||
|
||||
transitionManager.addRule(program.rule, program.name = '__svelte_' + hash(program.rule));
|
||||
|
||||
node.style.animation = (node.style.animation || '')
|
||||
.split(', ')
|
||||
.filter(function(anim) {
|
||||
// when introing, discard old animations if there are any
|
||||
return anim && (program.delta < 0 || !/__svelte/.test(anim));
|
||||
})
|
||||
.concat(program.name + ' ' + duration + 'ms linear 1 forwards')
|
||||
.join(', ');
|
||||
}
|
||||
|
||||
this.program = program;
|
||||
@ -114,16 +120,17 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
|
||||
if (obj.tick) obj.tick(this.t);
|
||||
},
|
||||
done: function() {
|
||||
this.t = this.program.b;
|
||||
var program = this.program;
|
||||
this.t = program.b;
|
||||
if (obj.tick) obj.tick(this.t);
|
||||
if (obj.css) document.head.removeChild(style);
|
||||
this.program.callback();
|
||||
this.program = null;
|
||||
if (obj.css) transitionManager.deleteRule(node, program.name);
|
||||
program.callback();
|
||||
program = null;
|
||||
this.running = !!this.pending;
|
||||
},
|
||||
abort: function() {
|
||||
if (obj.tick) obj.tick(1);
|
||||
if (obj.css) document.head.removeChild(style);
|
||||
if (obj.css) transitionManager.deleteRule(node, this.program.name);
|
||||
this.program = this.pending = null;
|
||||
this.running = false;
|
||||
}
|
||||
@ -134,6 +141,8 @@ export var transitionManager = {
|
||||
running: false,
|
||||
transitions: [],
|
||||
bound: null,
|
||||
stylesheet: null,
|
||||
activeRules: {},
|
||||
|
||||
add: function(transition) {
|
||||
this.transitions.push(transition);
|
||||
@ -144,6 +153,13 @@ export var transitionManager = {
|
||||
}
|
||||
},
|
||||
|
||||
addRule: function(rule, name) {
|
||||
if (!this.activeRules[name]) {
|
||||
this.activeRules[name] = true;
|
||||
this.stylesheet.insertRule('@keyframes ' + name + ' ' + rule, this.stylesheet.cssRules.length);
|
||||
}
|
||||
},
|
||||
|
||||
next: function() {
|
||||
this.running = false;
|
||||
|
||||
@ -171,6 +187,19 @@ export var transitionManager = {
|
||||
|
||||
if (this.running) {
|
||||
requestAnimationFrame(this.bound || (this.bound = this.next.bind(this)));
|
||||
} else if (this.stylesheet) {
|
||||
var i = this.stylesheet.cssRules.length;
|
||||
while (i--) this.stylesheet.deleteRule(i);
|
||||
this.activeRules = {};
|
||||
}
|
||||
},
|
||||
|
||||
deleteRule: function(node, name) {
|
||||
node.style.animation = node.style.animation
|
||||
.split(', ')
|
||||
.filter(function(anim) {
|
||||
return anim.slice(0, name.length) !== name;
|
||||
})
|
||||
.join(', ');
|
||||
}
|
||||
};
|
||||
|
@ -1,4 +1,4 @@
|
||||
|
||||
div[svelte-281576708], [svelte-281576708] div {
|
||||
div[svelte-2278551596], [svelte-2278551596] div {
|
||||
color: red;
|
||||
}
|
||||
|
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
cascade: false
|
||||
};
|
@ -4,10 +4,10 @@
|
||||
100% { color: blue; }
|
||||
}
|
||||
|
||||
[svelte-2486527405].animated, [svelte-2486527405] .animated {
|
||||
.animated[svelte-90785995] {
|
||||
animation: why 2s;
|
||||
}
|
||||
|
||||
[svelte-2486527405].also-animated, [svelte-2486527405] .also-animated {
|
||||
.also-animated[svelte-90785995] {
|
||||
animation: not-defined-here 2s;
|
||||
}
|
||||
|
3
test/css/samples/cascade-false-keyframes/_config.js
Normal file
3
test/css/samples/cascade-false-keyframes/_config.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
cascade: false
|
||||
};
|
@ -1,13 +1,13 @@
|
||||
|
||||
@keyframes svelte-776829126-why {
|
||||
@keyframes svelte-1647166666-why {
|
||||
0% { color: red; }
|
||||
100% { color: blue; }
|
||||
}
|
||||
|
||||
[svelte-776829126].animated, [svelte-776829126] .animated {
|
||||
animation: svelte-776829126-why 2s;
|
||||
.animated[svelte-1647166666] {
|
||||
animation: svelte-1647166666-why 2s;
|
||||
}
|
||||
|
||||
[svelte-776829126].also-animated, [svelte-776829126] .also-animated {
|
||||
.also-animated[svelte-1647166666] {
|
||||
animation: not-defined-here 2s;
|
||||
}
|
||||
|
@ -1,12 +1,12 @@
|
||||
|
||||
span[svelte-583610229]::after {
|
||||
span[svelte-2146001331]::after {
|
||||
content: 'i am a pseudo-element';
|
||||
}
|
||||
|
||||
span[svelte-583610229]:first-child {
|
||||
span[svelte-2146001331]:first-child {
|
||||
color: red;
|
||||
}
|
||||
|
||||
span[svelte-583610229]:last-child::after {
|
||||
span[svelte-2146001331]:last-child::after {
|
||||
color: blue;
|
||||
}
|
||||
|
@ -1,12 +1,12 @@
|
||||
|
||||
div[svelte-4161687011] {
|
||||
div[svelte-781920915] {
|
||||
color: red;
|
||||
}
|
||||
|
||||
div.foo[svelte-4161687011] {
|
||||
div.foo[svelte-781920915] {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.foo[svelte-4161687011] {
|
||||
.foo[svelte-781920915] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
@ -1,9 +1,9 @@
|
||||
|
||||
@keyframes svelte-4112859982-why {
|
||||
@keyframes svelte-2931302006-why {
|
||||
0% { color: red; }
|
||||
100% { color: blue; }
|
||||
}
|
||||
|
||||
[svelte-4112859982].animated, [svelte-4112859982] .animated {
|
||||
animation: svelte-4112859982-why 2s;
|
||||
[svelte-2931302006].animated, [svelte-2931302006] .animated {
|
||||
animation: svelte-2931302006-why 2s;
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
|
||||
@media (min-width: 400px) {
|
||||
[svelte-2352010302].large-screen, [svelte-2352010302] .large-screen {
|
||||
[svelte-411199634].large-screen, [svelte-411199634] .large-screen {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
@ -145,8 +145,8 @@ var template = (function () {
|
||||
|
||||
function add_css () {
|
||||
var style = createElement( 'style' );
|
||||
style.id = 'svelte-3842350206-style';
|
||||
style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
|
||||
style.id = 'svelte-3590263702-style';
|
||||
style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n";
|
||||
appendNode( style, document.head );
|
||||
}
|
||||
|
||||
@ -161,7 +161,7 @@ function create_main_fragment ( state, component ) {
|
||||
},
|
||||
|
||||
hydrate: function ( nodes ) {
|
||||
setAttribute( p, 'svelte-3842350206', '' );
|
||||
setAttribute( p, 'svelte-3590263702', '' );
|
||||
},
|
||||
|
||||
mount: function ( target, anchor ) {
|
||||
@ -198,7 +198,7 @@ function SvelteComponent ( options ) {
|
||||
this._yield = options._yield;
|
||||
|
||||
this._torndown = false;
|
||||
if ( !document.getElementById( 'svelte-3842350206-style' ) ) add_css();
|
||||
if ( !document.getElementById( 'svelte-3590263702-style' ) ) add_css();
|
||||
|
||||
this._fragment = create_main_fragment( this._state, this );
|
||||
|
||||
|
@ -10,8 +10,8 @@ var template = (function () {
|
||||
|
||||
function add_css () {
|
||||
var style = createElement( 'style' );
|
||||
style.id = 'svelte-3842350206-style';
|
||||
style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
|
||||
style.id = 'svelte-3590263702-style';
|
||||
style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n";
|
||||
appendNode( style, document.head );
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ function create_main_fragment ( state, component ) {
|
||||
},
|
||||
|
||||
hydrate: function ( nodes ) {
|
||||
setAttribute( p, 'svelte-3842350206', '' );
|
||||
setAttribute( p, 'svelte-3590263702', '' );
|
||||
},
|
||||
|
||||
mount: function ( target, anchor ) {
|
||||
@ -63,7 +63,7 @@ function SvelteComponent ( options ) {
|
||||
this._yield = options._yield;
|
||||
|
||||
this._torndown = false;
|
||||
if ( !document.getElementById( 'svelte-3842350206-style' ) ) add_css();
|
||||
if ( !document.getElementById( 'svelte-3590263702-style' ) ) add_css();
|
||||
|
||||
this._fragment = create_main_fragment( this._state, this );
|
||||
|
||||
|
@ -1,14 +1,14 @@
|
||||
|
||||
div[svelte-4188175681], [svelte-4188175681] div {
|
||||
div[svelte-1408461649], [svelte-1408461649] div {
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
div[svelte-146600313], [svelte-146600313] div {
|
||||
div[svelte-54999591], [svelte-54999591] div {
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
div[svelte-1506185237], [svelte-1506185237] div {
|
||||
div[svelte-2385185803], [svelte-2385185803] div {
|
||||
color: blue;
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
<div svelte-4188175681>red</div>
|
||||
<div svelte-146600313>green: foo</div>
|
||||
<div svelte-1506185237>blue: foo</div>
|
||||
<div svelte-146600313>green: bar</div>
|
||||
<div svelte-1506185237>blue: bar</div>
|
||||
<div svelte-1408461649>red</div>
|
||||
<div svelte-54999591>green: foo</div>
|
||||
<div svelte-2385185803>blue: foo</div>
|
||||
<div svelte-54999591>green: bar</div>
|
||||
<div svelte-2385185803>blue: bar</div>
|
@ -1,11 +1,14 @@
|
||||
div[svelte-4188175681], [svelte-4188175681] div {
|
||||
color: red;
|
||||
}
|
||||
|
||||
div[svelte-146600313], [svelte-146600313] div {
|
||||
color: green;
|
||||
}
|
||||
div[svelte-1408461649], [svelte-1408461649] div {
|
||||
color: red;
|
||||
}
|
||||
|
||||
div[svelte-1506185237], [svelte-1506185237] div {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
div[svelte-54999591], [svelte-54999591] div {
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
div[svelte-2385185803], [svelte-2385185803] div {
|
||||
color: blue;
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
<div svelte-4188175681>red</div>
|
||||
<div svelte-146600313>green: foo</div>
|
||||
<div svelte-1506185237>blue: foo</div>
|
||||
<div svelte-146600313>green: bar</div>
|
||||
<div svelte-1506185237>blue: bar</div>
|
||||
<div svelte-1408461649>red</div>
|
||||
<div svelte-54999591>green: foo</div>
|
||||
<div svelte-2385185803>blue: foo</div>
|
||||
<div svelte-54999591>green: bar</div>
|
||||
<div svelte-2385185803>blue: bar</div>
|
@ -1,4 +1,4 @@
|
||||
|
||||
div[svelte-281576708], [svelte-281576708] div {
|
||||
div[svelte-2278551596], [svelte-2278551596] div {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1 +1 @@
|
||||
<div svelte-281576708>red</div>
|
||||
<div svelte-2278551596>red</div>
|
@ -1,3 +1,4 @@
|
||||
div[svelte-281576708], [svelte-281576708] div {
|
||||
color: red;
|
||||
}
|
||||
|
||||
div[svelte-2278551596], [svelte-2278551596] div {
|
||||
color: red;
|
||||
}
|
||||
|
@ -1 +1 @@
|
||||
<div svelte-281576708>red</div>
|
||||
<div svelte-2278551596>red</div>
|
@ -2578,9 +2578,9 @@ rollup-watch@^3.2.2:
|
||||
dependencies:
|
||||
require-relative "0.8.7"
|
||||
|
||||
rollup@^0.39.0:
|
||||
version "0.39.2"
|
||||
resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.39.2.tgz#858cf3020027cf74e0c5d7faa1c18275faf00df4"
|
||||
rollup@^0.43.0:
|
||||
version "0.43.0"
|
||||
resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.43.0.tgz#b36bdb75fa5e0823b6de8aee18ff7b5655520543"
|
||||
dependencies:
|
||||
source-map-support "^0.4.0"
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user