msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into codegen

Browse Source
pull/673/head
Rich Harris 7 years ago committed by GitHub
parent ebae9f9c28 e582691c61
commit f87c3328b5
27 changed files with 200 additions and 161 deletions
Show Stats Download Patch File Download Diff File

10
package.json
Unescape View File

@ -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
Unescape View 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'
}
];

39
rollup/rollup.config.main.js
Unescape View File

@ -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
};

5
rollup/rollup.config.shared.js
Unescape View File

@ -1,5 +0,0 @@
export default {
entry: 'src/shared/index.js',
dest: 'shared.js',
format: 'es'
};

26
rollup/rollup.config.ssr.js
Unescape View File

@ -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
};

2
src/parse/utils/hash.ts
Unescape View File

@ -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;
}

83
src/shared/transitions.js
Unescape View File

@ -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(', ');
}
};

2
test/css/samples/basic/expected.css
Unescape View File

@ -1,4 +1,4 @@
div[svelte-281576708], [svelte-281576708] div {
div[svelte-2278551596], [svelte-2278551596] div {
color: red;
}

3
test/css/samples/cascade-false-global-keyframes/_config.js
Unescape View File

@ -0,0 +1,3 @@
export default {
cascade: false
};

4
test/css/samples/cascade-false-global-keyframes/expected.css
Unescape View File

@ -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
Unescape View File

@ -0,0 +1,3 @@
export default {
cascade: false
};

8
test/css/samples/cascade-false-keyframes/expected.css
Unescape View File

@ -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;
}

6
test/css/samples/cascade-false-pseudo-element/expected.css
Unescape View File

@ -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;
}

6
test/css/samples/cascade-false/expected.css
Unescape View File

@ -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;
}

6
test/css/samples/keyframes/expected.css
Unescape View File

@ -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;
}

2
test/css/samples/media-query/expected.css
Unescape View File

@ -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;
}
}

8
test/js/samples/collapses-text-around-comments/expected-bundle.js
Unescape View File

@ -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 );

8
test/js/samples/collapses-text-around-comments/expected.js
Unescape View File

@ -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 );

6
test/server-side-rendering/samples/styles-nested/_actual.css
Unescape View File

@ -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;
}

10
test/server-side-rendering/samples/styles-nested/_actual.html
Unescape View File

@ -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>

21
test/server-side-rendering/samples/styles-nested/_expected.css
Unescape View File

@ -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;
}

10
test/server-side-rendering/samples/styles-nested/_expected.html
Unescape View File

@ -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>

2
test/server-side-rendering/samples/styles/_actual.css
Unescape View File

@ -1,4 +1,4 @@
div[svelte-281576708], [svelte-281576708] div {
div[svelte-2278551596], [svelte-2278551596] div {
color: red;
}

2
test/server-side-rendering/samples/styles/_actual.html
Unescape View File

@ -1 +1 @@
<div svelte-281576708>red</div>
<div svelte-2278551596>red</div>

7
test/server-side-rendering/samples/styles/_expected.css
Unescape View File

@ -1,3 +1,4 @@
div[svelte-281576708], [svelte-281576708] div {
color: red;
}
div[svelte-2278551596], [svelte-2278551596] div {
color: red;
}

2
test/server-side-rendering/samples/styles/_expected.html
Unescape View File

@ -1 +1 @@
<div svelte-281576708>red</div>
<div svelte-2278551596>red</div>

6
yarn.lock
Unescape View File

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

Write Preview
Loading…
Cancel
Save