+
+
+
+
+
+
+
+
+
+
+
+
+
Strix Cloud
-
+
+ your company?
diff --git a/site/src/routes/apps/index.svelte b/site/src/routes/apps/index.svelte
index d85f5681f8..36cd1a904c 100644
--- a/site/src/routes/apps/index.svelte
+++ b/site/src/routes/apps/index.svelte
@@ -4,7 +4,7 @@
let offset = null;
if (user) {
- var url = 'apps.json';
+ let url = 'apps.json';
if (page.query.offset) {
url += `?offset=${encodeURIComponent(page.query.offset)}`;
}
@@ -50,9 +50,9 @@
Your apps
-
+
- {user.name}
+ {user.name || user.username}
(log out )
diff --git a/site/src/routes/auth/_config.js b/site/src/routes/auth/_config.js
index d155e56de8..7d1669cd72 100644
--- a/site/src/routes/auth/_config.js
+++ b/site/src/routes/auth/_config.js
@@ -1,6 +1,6 @@
export const oauth = 'https://github.com/login/oauth';
export const baseurl = process.env.BASEURL;
-export const secure = baseurl.startsWith('https:');
+export const secure = baseurl && baseurl.startsWith('https:');
export const client_id = process.env.GITHUB_CLIENT_ID;
export const client_secret = process.env.GITHUB_CLIENT_SECRET;
\ No newline at end of file
diff --git a/site/src/routes/blog/_posts.js b/site/src/routes/blog/_posts.js
index d180ebd35e..2c86e13656 100644
--- a/site/src/routes/blog/_posts.js
+++ b/site/src/routes/blog/_posts.js
@@ -1,11 +1,10 @@
import fs from 'fs';
import path from 'path';
-import { extract_frontmatter, langs, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
+import { extract_frontmatter, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
import marked from 'marked';
import { makeSlugProcessor } from '../../utils/slug';
+import { highlight } from '../../utils/highlight';
import { SLUG_PRESERVE_UNICODE } from '../../../config';
-import PrismJS from 'prismjs';
-import 'prismjs/components/prism-bash';
const makeSlug = makeSlugProcessor(SLUG_PRESERVE_UNICODE);
@@ -32,16 +31,7 @@ export default function get_posts() {
renderer.link = link_renderer;
- renderer.code = (source, lang) => {
- const plang = langs[lang];
- const highlighted = PrismJS.highlight(
- source,
- PrismJS.languages[plang],
- lang,
- );
-
- return `
${highlighted}`;
- };
+ renderer.code = highlight;
renderer.heading = (text, level, rawtext) => {
const fragment = makeSlug(rawtext);
diff --git a/site/src/routes/docs/_sections.js b/site/src/routes/docs/_sections.js
index b6da2315f0..bb081a050b 100644
--- a/site/src/routes/docs/_sections.js
+++ b/site/src/routes/docs/_sections.js
@@ -1,28 +1,10 @@
import fs from 'fs';
import path from 'path';
import { SLUG_PRESERVE_UNICODE, SLUG_SEPARATOR } from '../../../config';
-import { extract_frontmatter, extract_metadata, langs, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
+import { extract_frontmatter, extract_metadata, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
import { make_session_slug_processor } from '@sveltejs/site-kit/utils/slug';
+import { highlight } from '../../utils/highlight';
import marked from 'marked';
-import PrismJS from 'prismjs';
-import 'prismjs/components/prism-bash';
-
-const escaped = {
- '"': '"',
- "'": ''',
- '&': '&',
- '<': '<',
- '>': '>',
-};
-
-const unescaped = Object.keys(escaped).reduce(
- (unescaped, key) => ((unescaped[escaped[key]] = key), unescaped),
- {}
-);
-
-function unescape(str) {
- return String(str).replace(/&.+?;/g, match => unescaped[match] || match);
-}
const blockTypes = [
'blockquote',
@@ -90,14 +72,7 @@ export default function() {
if (meta && meta.hidden) return '';
- const plang = langs[lang];
- const highlighted = PrismJS.highlight(
- source,
- PrismJS.languages[plang],
- lang
- );
-
- const html = `
`;
+ const html = `
${prefix}${highlight(source, lang)}
`;
if (block_open) {
block_open = false;
diff --git a/site/src/routes/repl/[id]/_components/AppControls/index.svelte b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
index 4cfd5d43b2..007dba3461 100644
--- a/site/src/routes/repl/[id]/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
@@ -140,12 +140,12 @@
if (imports.length > 0) {
const idx = files.findIndex(({ path }) => path === 'package.json');
const pkg = JSON.parse(files[idx].data);
- const deps = {};
+ const { devDependencies } = pkg;
imports.forEach(mod => {
const match = /^(@[^/]+\/)?[^@/]+/.exec(mod);
- deps[match[0]] = 'latest';
+ devDependencies[match[0]] = 'latest';
});
- pkg.dependencies = deps;
+ pkg.devDependencies = devDependencies;
files[idx].data = JSON.stringify(pkg, null, ' ');
}
diff --git a/site/src/routes/repl/[id]/index.json.js b/site/src/routes/repl/[id]/index.json.js
index 8c7dabb14a..e34329a0e2 100644
--- a/site/src/routes/repl/[id]/index.json.js
+++ b/site/src/routes/repl/[id]/index.json.js
@@ -95,7 +95,8 @@ export async function patch(req, res) {
const { user } = req;
if (!user) return;
- let id, uid = req.params.id;
+ let id;
+ const uid = req.params.id;
try {
const [row] = await query(`select * from gists where uid = $1 limit 1`, [uid]);
@@ -110,7 +111,9 @@ export async function patch(req, res) {
try {
const obj = await body(req);
obj.updated_at = 'now()';
- let k, cols=[], vals=[];
+ let k;
+ const cols = [];
+ const vals = [];
for (k in obj) {
cols.push(k);
vals.push(k === 'files' ? JSON.stringify(obj[k]) : obj[k]);
diff --git a/site/src/routes/tutorial/[slug]/index.json.js b/site/src/routes/tutorial/[slug]/index.json.js
index 291760bc6b..26f5d54b31 100644
--- a/site/src/routes/tutorial/[slug]/index.json.js
+++ b/site/src/routes/tutorial/[slug]/index.json.js
@@ -1,9 +1,9 @@
import * as fs from 'fs';
import * as path from 'path';
import marked from 'marked';
-import PrismJS from 'prismjs';
import send from '@polka/send';
-import { extract_frontmatter, extract_metadata, langs, link_renderer } from '@sveltejs/site-kit/utils/markdown';
+import { extract_frontmatter, extract_metadata, link_renderer } from '@sveltejs/site-kit/utils/markdown';
+import { highlight } from '../../../utils/highlight';
const cache = new Map();
@@ -57,14 +57,7 @@ function get_tutorial(slug) {
}
}
- const plang = langs[lang];
- const highlighted = PrismJS.highlight(
- source,
- PrismJS.languages[plang],
- lang
- );
-
- return `
`;
+ return `
${prefix}${highlight(source, lang)}
`;
};
let html = marked(content, { renderer });
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index 20cc34ab6b..be59665970 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -18,7 +18,6 @@
import { getContext } from 'svelte';
import ScreenToggle from '../../../components/ScreenToggle.svelte';
- import { Icon } from '@sveltejs/site-kit';
import TableOfContents from './_TableOfContents.svelte';
import {
@@ -219,17 +218,17 @@
}
.show {
- background: rgba(0,0,0,.4);
+ background: var(--prime);
padding: .3em .7em;
border-radius: var(--border-r);
top: .1em;
position: relative;
font-size: var(--h5);
font-weight: 300;
+ color: rgba(255,255,255,0.7);
}
.show:hover {
- background: rgba(0,0,0,.65);
color: white;
}
diff --git a/site/src/server.js b/site/src/server.js
index 2425b51f54..c7cf93c3b5 100644
--- a/site/src/server.js
+++ b/site/src/server.js
@@ -14,9 +14,11 @@ const app = polka({
}
});
-app.use(
- authenticate(),
+if (process.env.PGHOST) {
+ app.use(authenticate());
+}
+app.use(
sirv('static', {
dev: process.env.NODE_ENV === 'development',
setHeaders(res) {
@@ -32,4 +34,4 @@ app.use(
})
);
-app.listen(PORT);
\ No newline at end of file
+app.listen(PORT);
diff --git a/site/src/utils/db.js b/site/src/utils/db.js
index a4d398e181..069450b0f3 100644
--- a/site/src/utils/db.js
+++ b/site/src/utils/db.js
@@ -1,8 +1,7 @@
import { Pool } from 'pg';
-export const DB = new Pool({
- connectionString: process.env.DATABASE_URL
-});
+// Uses `PG*` ENV vars
+export const DB = process.env.PGHOST ? new Pool() : null;
export function query(text, values=[]) {
return DB.query(text, values).then(r => r.rows);
diff --git a/site/src/utils/highlight.js b/site/src/utils/highlight.js
new file mode 100644
index 0000000000..d8be46b3a6
--- /dev/null
+++ b/site/src/utils/highlight.js
@@ -0,0 +1,14 @@
+import { langs } from '@sveltejs/site-kit/utils/markdown.js';
+import PrismJS from 'prismjs';
+import 'prismjs/components/prism-bash';
+
+export function highlight(source, lang) {
+ const plang = langs[lang] || '';
+ const highlighted = plang ? PrismJS.highlight(
+ source,
+ PrismJS.languages[plang],
+ lang,
+ ) : source.replace(/[&<>]/g, c => ({ '&': '&', '<': '<', '>': '>' })[c]);
+
+ return `
${highlighted}`;
+}
diff --git a/site/static/favicon.png b/site/static/favicon.png
index b8b26e3044..ddbebf3b4f 100644
Binary files a/site/static/favicon.png and b/site/static/favicon.png differ
diff --git a/site/static/images/twitter-card.png b/site/static/images/twitter-card.png
index 5e0a55e570..1e8271f655 100644
Binary files a/site/static/images/twitter-card.png and b/site/static/images/twitter-card.png differ
diff --git a/site/static/logo-mask.svg b/site/static/logo-mask.svg
deleted file mode 100644
index d7919a61ab..0000000000
--- a/site/static/logo-mask.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/site/static/organisations/bekchy.png b/site/static/organisations/bekchy.png
new file mode 100644
index 0000000000..011553cb42
Binary files /dev/null and b/site/static/organisations/bekchy.png differ
diff --git a/site/static/organisations/buydotstar.svg b/site/static/organisations/buydotstar.svg
new file mode 100644
index 0000000000..da0e5c9211
--- /dev/null
+++ b/site/static/organisations/buydotstar.svg
@@ -0,0 +1,12 @@
+
+
+
+
+ buy.*
+
diff --git a/site/static/organisations/dextra.png b/site/static/organisations/dextra.png
new file mode 100644
index 0000000000..725f9bd511
Binary files /dev/null and b/site/static/organisations/dextra.png differ
diff --git a/site/static/organisations/entriwise.png b/site/static/organisations/entriwise.png
new file mode 100644
index 0000000000..be305e1300
Binary files /dev/null and b/site/static/organisations/entriwise.png differ
diff --git a/site/static/organisations/entur.svg b/site/static/organisations/entur.svg
new file mode 100644
index 0000000000..98bb5cc937
--- /dev/null
+++ b/site/static/organisations/entur.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/static/organisations/fusioncharts.svg b/site/static/organisations/fusioncharts.svg
new file mode 100644
index 0000000000..6712115de8
--- /dev/null
+++ b/site/static/organisations/fusioncharts.svg
@@ -0,0 +1,18 @@
+
+
+
+ logo colour
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/site/static/organisations/grainger.svg b/site/static/organisations/grainger.svg
new file mode 100644
index 0000000000..af10fc52fe
--- /dev/null
+++ b/site/static/organisations/grainger.svg
@@ -0,0 +1 @@
+
diff --git a/site/static/organisations/jacoux.png b/site/static/organisations/jacoux.png
new file mode 100644
index 0000000000..6d3f52017c
Binary files /dev/null and b/site/static/organisations/jacoux.png differ
diff --git a/site/static/organisations/metrovias.svg b/site/static/organisations/metrovias.svg
new file mode 100644
index 0000000000..a81394de59
--- /dev/null
+++ b/site/static/organisations/metrovias.svg
@@ -0,0 +1 @@
+
Asset 1
\ No newline at end of file
diff --git a/site/static/organisations/oberonspace.svg b/site/static/organisations/oberonspace.svg
new file mode 100644
index 0000000000..73fd68f8b5
--- /dev/null
+++ b/site/static/organisations/oberonspace.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/static/organisations/ofof.png b/site/static/organisations/ofof.png
new file mode 100644
index 0000000000..5ecde9b0fd
Binary files /dev/null and b/site/static/organisations/ofof.png differ
diff --git a/site/static/organisations/pankod.svg b/site/static/organisations/pankod.svg
new file mode 100644
index 0000000000..34578a7739
--- /dev/null
+++ b/site/static/organisations/pankod.svg
@@ -0,0 +1,33 @@
+
+
+
+ Dark
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/site/static/organisations/sqltribe.svg b/site/static/organisations/sqltribe.svg
new file mode 100644
index 0000000000..2a51dfc0a7
--- /dev/null
+++ b/site/static/organisations/sqltribe.svg
@@ -0,0 +1,106 @@
+
+
image/svg+xml
\ No newline at end of file
diff --git a/site/static/organisations/tokopedia.2x.png b/site/static/organisations/tokopedia.2x.png
deleted file mode 100644
index 5ba45fdb2b..0000000000
Binary files a/site/static/organisations/tokopedia.2x.png and /dev/null differ
diff --git a/site/static/organisations/tokopedia.3x.png b/site/static/organisations/tokopedia.3x.png
deleted file mode 100644
index 52b34a0b91..0000000000
Binary files a/site/static/organisations/tokopedia.3x.png and /dev/null differ
diff --git a/site/static/organisations/tokopedia.png b/site/static/organisations/tokopedia.png
deleted file mode 100644
index 16fef7fe63..0000000000
Binary files a/site/static/organisations/tokopedia.png and /dev/null differ
diff --git a/site/static/organisations/tokopedia.svg b/site/static/organisations/tokopedia.svg
new file mode 100644
index 0000000000..d284f05d7b
--- /dev/null
+++ b/site/static/organisations/tokopedia.svg
@@ -0,0 +1,4 @@
+
+
+
diff --git a/site/static/tutorial/kitten.png b/site/static/tutorial/kitten.png
index 6ef37691bc..6b0cedc945 100644
Binary files a/site/static/tutorial/kitten.png and b/site/static/tutorial/kitten.png differ
diff --git a/site/static/tutorial/music/beethoven.mp3 b/site/static/tutorial/music/beethoven.mp3
deleted file mode 100644
index 3bda3ae676..0000000000
Binary files a/site/static/tutorial/music/beethoven.mp3 and /dev/null differ
diff --git a/site/static/tutorial/music/holst.mp3 b/site/static/tutorial/music/holst.mp3
deleted file mode 100644
index b1ba89f486..0000000000
Binary files a/site/static/tutorial/music/holst.mp3 and /dev/null differ
diff --git a/site/static/tutorial/music/mozart.mp3 b/site/static/tutorial/music/mozart.mp3
deleted file mode 100644
index d9a2d2781f..0000000000
Binary files a/site/static/tutorial/music/mozart.mp3 and /dev/null differ
diff --git a/site/static/tutorial/music/satie.mp3 b/site/static/tutorial/music/satie.mp3
deleted file mode 100644
index c2488d7bb4..0000000000
Binary files a/site/static/tutorial/music/satie.mp3 and /dev/null differ
diff --git a/site/static/tutorial/music/strauss.mp3 b/site/static/tutorial/music/strauss.mp3
deleted file mode 100644
index db433dd35f..0000000000
Binary files a/site/static/tutorial/music/strauss.mp3 and /dev/null differ
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 355ad0c423..2d696ad306 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -1,29 +1,33 @@
-import MagicString, { Bundle } from 'magic-string';
-// @ts-ignore
import { walk, childKeys } from 'estree-walker';
import { getLocator } from 'locate-character';
import Stats from '../Stats';
-import { globals, reserved } from '../utils/names';
+import { globals, reserved, is_valid } from '../utils/names';
import { namespaces, valid_namespaces } from '../utils/namespaces';
import create_module from './create_module';
-import { create_scopes, extract_names, Scope, extract_identifiers } from './utils/scope';
+import {
+ create_scopes,
+ extract_names,
+ Scope,
+ extract_identifiers,
+} from './utils/scope';
import Stylesheet from './css/Stylesheet';
import { test } from '../config';
import Fragment from './nodes/Fragment';
import internal_exports from './internal_exports';
-import { Node, Ast, CompileOptions, Var, Warning } from '../interfaces';
+import { Ast, CompileOptions, Var, Warning } from '../interfaces';
import error from '../utils/error';
import get_code_frame from '../utils/get_code_frame';
import flatten_reference from './utils/flatten_reference';
+import is_used_as_reference from './utils/is_used_as_reference';
import is_reference from 'is-reference';
import TemplateScope from './nodes/shared/TemplateScope';
import fuzzymatch from '../utils/fuzzymatch';
-import { remove_indentation, add_indentation } from '../utils/indentation';
import get_object from './utils/get_object';
-import unwrap_parens from './utils/unwrap_parens';
import Slot from './nodes/Slot';
-import { Node as ESTreeNode } from 'estree';
+import { Node, ImportDeclaration, Identifier, Program, ExpressionStatement, AssignmentExpression, Literal } from 'estree';
import add_to_set from './utils/add_to_set';
+import check_graph_for_cycles from './utils/check_graph_for_cycles';
+import { print, x, b } from 'code-red';
interface ComponentOptions {
namespace?: string;
@@ -40,34 +44,6 @@ childKeys.EachBlock = childKeys.IfBlock = ['children', 'else'];
childKeys.Attribute = ['value'];
childKeys.ExportNamedDeclaration = ['declaration', 'specifiers'];
-function remove_node(code: MagicString, start: number, end: number, body: Node, node: Node) {
- const i = body.indexOf(node);
- if (i === -1) throw new Error('node not in list');
-
- let a;
- let b;
-
- if (body.length === 1) {
- // remove everything, leave {}
- a = start;
- b = end;
- } else if (i === 0) {
- // remove everything before second node, including comments
- a = start;
- while (/\s/.test(code.original[a])) a += 1;
-
- b = body[i].end;
- while (/[\s,]/.test(code.original[b])) b += 1;
- } else {
- // remove the end of the previous node to the end of this one
- a = body[i - 1].end;
- b = node.end;
- }
-
- code.remove(a, b);
- return;
-}
-
export default class Component {
stats: Stats;
warnings: Warning[];
@@ -75,9 +51,9 @@ export default class Component {
ignore_stack: Array
> = [];
ast: Ast;
+ original_ast: Ast;
source: string;
- code: MagicString;
- name: string;
+ name: Identifier;
compile_options: CompileOptions;
fragment: Fragment;
module_scope: Scope;
@@ -92,35 +68,32 @@ export default class Component {
vars: Var[] = [];
var_lookup: Map = new Map();
- imports: Node[] = [];
- module_javascript: string;
- javascript: string;
+ imports: ImportDeclaration[] = [];
hoistable_nodes: Set = new Set();
node_for_declaration: Map = new Map();
- partly_hoisted: string[] = [];
- fully_hoisted: string[] = [];
- reactive_declarations: Array<{ assignees: Set; dependencies: Set; node: Node; declaration: Node }> = [];
+ partly_hoisted: Array<(Node | Node[])> = [];
+ fully_hoisted: Array<(Node | Node[])> = [];
+ reactive_declarations: Array<{
+ assignees: Set;
+ dependencies: Set;
+ node: Node;
+ declaration: Node;
+ }> = [];
reactive_declaration_nodes: Set = new Set();
has_reactive_assignments = false;
injected_reactive_declaration_vars: Set = new Set();
- helpers: Map = new Map();
- globals: Map = new Map();
+ helpers: Map = new Map();
+ globals: Map = new Map();
indirect_dependencies: Map> = new Map();
file: string;
locate: (c: number) => { line: number; column: number };
- // TODO this does the same as component.locate! remove one or the other
- locator: (search: number, startIndex?: number) => {
- line: number;
- column: number;
- };
-
stylesheet: Stylesheet;
- aliases: Map = new Map();
+ aliases: Map = new Map();
used_names: Set = new Set();
globally_used_names: Set = new Set();
@@ -135,7 +108,7 @@ export default class Component {
stats: Stats,
warnings: Warning[]
) {
- this.name = name;
+ this.name = { type: 'Identifier', name };
this.stats = stats;
this.warnings = warnings;
@@ -143,40 +116,66 @@ export default class Component {
this.source = source;
this.compile_options = compile_options;
- this.file = compile_options.filename && (
- // eslint-disable-next-line no-useless-escape
- typeof process !== 'undefined' ? compile_options.filename.replace(process.cwd(), '').replace(/^[\/\\]/, '') : compile_options.filename
- );
- this.locate = getLocator(this.source);
+ // the instance JS gets mutated, so we park
+ // a copy here for later. TODO this feels gross
+ this.original_ast = {
+ html: ast.html,
+ css: ast.css,
+ instance: ast.instance && JSON.parse(JSON.stringify(ast.instance)),
+ module: ast.module
+ };
- this.code = new MagicString(source);
+ this.file =
+ compile_options.filename &&
+ (typeof process !== 'undefined'
+ ? compile_options.filename
+ .replace(process.cwd(), '')
+ .replace(/^[/\\]/, '')
+ : compile_options.filename);
+ this.locate = getLocator(this.source, { offsetLine: 1 });
// styles
- this.stylesheet = new Stylesheet(source, ast, compile_options.filename, compile_options.dev);
+ this.stylesheet = new Stylesheet(
+ source,
+ ast,
+ compile_options.filename,
+ compile_options.dev
+ );
this.stylesheet.validate(this);
- this.component_options = process_component_options(this, this.ast.html.children);
- this.namespace = namespaces[this.component_options.namespace] || this.component_options.namespace;
+ this.component_options = process_component_options(
+ this,
+ this.ast.html.children
+ );
+ this.namespace =
+ namespaces[this.component_options.namespace] ||
+ this.component_options.namespace;
if (compile_options.customElement) {
- if (this.component_options.tag === undefined && compile_options.tag === undefined) {
- const svelteOptions = ast.html.children.find(child => child.name === 'svelte:options') || { start: 0, end: 0 };
+ if (
+ this.component_options.tag === undefined &&
+ compile_options.tag === undefined
+ ) {
+ const svelteOptions = ast.html.children.find(
+ child => child.name === 'svelte:options'
+ ) || { start: 0, end: 0 };
this.warn(svelteOptions, {
code: 'custom-element-no-tag',
- message: `No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. `
+ message: `No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. `,
});
}
this.tag = this.component_options.tag || compile_options.tag;
} else {
- this.tag = this.name;
+ this.tag = this.name.name;
}
- this.walk_module_js();
+ this.walk_module_js_pre_template();
this.walk_instance_js_pre_template();
this.fragment = new Fragment(this, ast.html);
this.name = this.get_unique_name(name);
+ this.walk_module_js_post_template();
this.walk_instance_js_post_template();
if (!compile_options.customElement) this.stylesheet.reify();
@@ -198,7 +197,7 @@ export default class Component {
this.add_var({
name,
injected: true,
- referenced: true
+ referenced: true,
});
} else if (name[0] === '$') {
this.add_var({
@@ -206,7 +205,7 @@ export default class Component {
injected: true,
referenced: true,
mutated: true,
- writable: true
+ writable: true,
});
const subscribable_name = name.slice(1);
@@ -219,15 +218,6 @@ export default class Component {
}
}
- add_sourcemap_locations(node: Node) {
- walk(node, {
- enter: (node: Node) => {
- this.code.addSourcemapLocation(node.start);
- this.code.addSourcemapLocation(node.end);
- },
- });
- }
-
alias(name: string) {
if (!this.aliases.has(name)) {
this.aliases.set(name, this.get_unique_name(name));
@@ -236,19 +226,13 @@ export default class Component {
return this.aliases.get(name);
}
- helper(name: string) {
- const alias = this.alias(name);
- this.helpers.set(name, alias);
- return alias;
- }
-
global(name: string) {
const alias = this.alias(name);
this.globals.set(name, alias);
return alias;
}
- generate(result: string) {
+ generate(result?: Node[]) {
let js = null;
let css = null;
@@ -256,38 +240,65 @@ export default class Component {
const { compile_options, name } = this;
const { format = 'esm' } = compile_options;
- const banner = `/* ${this.file ? `${this.file} ` : ``}generated by Svelte v${"__VERSION__"} */`;
+ const banner = `${this.file ? `${this.file} ` : ``}generated by Svelte v${'__VERSION__'}`;
- result = result
- .replace(/__svelte:self__/g, this.name)
- .replace(compile_options.generate === 'ssr' ? /(@+|#+)(\w*(?:-\w*)?)/g : /(@+)(\w*(?:-\w*)?)/g, (_match: string, sigil: string, name: string) => {
- if (sigil === '@') {
- if (name[0] === '_') {
- return this.global(name.slice(1));
- }
+ const program: any = { type: 'Program', body: result };
- if (!internal_exports.has(name)) {
- throw new Error(`compiler error: this shouldn't happen! generated code is trying to use inexistent internal '${name}'`);
- }
+ walk(program, {
+ enter: (node, parent, key) => {
+ if (node.type === 'Identifier') {
+ if (node.name[0] === '@') {
+ if (node.name[1] === '_') {
+ const alias = this.global(node.name.slice(2));
+ node.name = alias.name;
+ } else {
+ let name = node.name.slice(1);
- if (compile_options.dev && internal_exports.has(`${name}Dev`)) {
- name = `${name}Dev`;
+ if (compile_options.dev) {
+ if (internal_exports.has(`${name}_dev`)) {
+ name += '_dev';
+ } else if (internal_exports.has(`${name}Dev`)) {
+ name += 'Dev';
+ }
+ }
+
+ const alias = this.alias(name);
+ this.helpers.set(name, alias);
+ node.name = alias.name;
+ }
}
- return this.helper(name);
- }
+ else if (node.name[0] !== '#' && !is_valid(node.name)) {
+ // this hack allows x`foo.${bar}` where bar could be invalid
+ const literal: Literal = { type: 'Literal', value: node.name };
- return sigil.slice(1) + name;
- });
+ if (parent.type === 'Property' && key === 'key') {
+ parent.key = literal;
+ }
+
+ else if (parent.type === 'MemberExpression' && key === 'property') {
+ parent.property = literal;
+ parent.computed = true;
+ }
+ }
+ }
+ }
+ });
- const referenced_globals = Array.from(this.globals, ([name, alias]) => name !== alias && ({ name, alias })).filter(Boolean);
+ const referenced_globals = Array.from(
+ this.globals,
+ ([name, alias]) => name !== alias.name && { name, alias }
+ ).filter(Boolean);
if (referenced_globals.length) {
- this.helper('globals');
+ this.helpers.set('globals', this.alias('globals'));
}
- const imported_helpers = Array.from(this.helpers, ([name, alias]) => ({ name, alias }));
+ const imported_helpers = Array.from(this.helpers, ([name, alias]) => ({
+ name,
+ alias,
+ }));
- const module = create_module(
- result,
+ create_module(
+ program,
format,
name,
banner,
@@ -295,86 +306,54 @@ export default class Component {
imported_helpers,
referenced_globals,
this.imports,
- this.vars.filter(variable => variable.module && variable.export_name).map(variable => ({
- name: variable.name,
- as: variable.export_name
- })),
- this.source
+ this.vars
+ .filter(variable => variable.module && variable.export_name)
+ .map(variable => ({
+ name: variable.name,
+ as: variable.export_name,
+ }))
);
- const parts = module.split('✂]');
- const final_chunk = parts.pop();
-
- const compiled = new Bundle({ separator: '' });
-
- function add_string(str: string) {
- compiled.addSource({
- content: new MagicString(str),
- });
- }
-
- const { filename } = compile_options;
-
- // special case — the source file doesn't actually get used anywhere. we need
- // to add an empty file to populate map.sources and map.sourcesContent
- if (!parts.length) {
- compiled.addSource({
- filename,
- content: new MagicString(this.source).remove(0, this.source.length),
- });
- }
-
- const pattern = /\[✂(\d+)-(\d+)$/;
-
- parts.forEach((str: string) => {
- const chunk = str.replace(pattern, '');
- if (chunk) add_string(chunk);
-
- const match = pattern.exec(str);
+ css = compile_options.customElement
+ ? { code: null, map: null }
+ : this.stylesheet.render(compile_options.cssOutputFilename, true);
- const snippet = this.code.snip(+match[1], +match[2]);
-
- compiled.addSource({
- filename,
- content: snippet,
- });
+ js = print(program, {
+ sourceMapSource: compile_options.filename
});
- add_string(final_chunk);
+ js.map.sources = [
+ compile_options.filename ? get_relative_path(compile_options.outputFilename || '', compile_options.filename) : null
+ ];
- css = compile_options.customElement ?
- { code: null, map: null } :
- this.stylesheet.render(compile_options.cssOutputFilename, true);
-
- js = {
- code: compiled.toString(),
- map: compiled.generateMap({
- includeContent: true,
- file: compile_options.outputFilename,
- })
- };
+ js.map.sourcesContent = [
+ this.source
+ ];
}
return {
js,
css,
- ast: this.ast,
+ ast: this.original_ast,
warnings: this.warnings,
- vars: this.vars.filter(v => !v.global && !v.internal).map(v => ({
- name: v.name,
- export_name: v.export_name || null,
- injected: v.injected || false,
- module: v.module || false,
- mutated: v.mutated || false,
- reassigned: v.reassigned || false,
- referenced: v.referenced || false,
- writable: v.writable || false
- })),
- stats: this.stats.render()
+ vars: this.vars
+ .filter(v => !v.global && !v.internal)
+ .map(v => ({
+ name: v.name,
+ export_name: v.export_name || null,
+ injected: v.injected || false,
+ module: v.module || false,
+ mutated: v.mutated || false,
+ reassigned: v.reassigned || false,
+ referenced: v.referenced || false,
+ writable: v.writable || false,
+ referenced_from_script: v.referenced_from_script || false,
+ })),
+ stats: this.stats.render(),
};
}
- get_unique_name(name: string) {
+ get_unique_name(name: string): Identifier {
if (test) name = `${name}$`;
let alias = name;
for (
@@ -386,7 +365,7 @@ export default class Component {
alias = `${name}_${i++}`
);
this.used_names.add(alias);
- return alias;
+ return { type: 'Identifier', name: alias };
}
get_unique_name_maker() {
@@ -400,18 +379,21 @@ export default class Component {
internal_exports.forEach(add);
this.var_lookup.forEach((_value, key) => add(key));
- return (name: string) => {
+ return (name: string): Identifier => {
if (test) name = `${name}$`;
let alias = name;
for (
let i = 1;
- this.used_names.has(alias) ||
- local_used_names.has(alias);
+ this.used_names.has(alias) || local_used_names.has(alias);
alias = `${name}_${i++}`
);
local_used_names.add(alias);
this.globally_used_names.add(alias);
- return alias;
+
+ return {
+ type: 'Identifier',
+ name: alias
+ };
};
}
@@ -431,7 +413,7 @@ export default class Component {
source: this.source,
start: pos.start,
end: pos.end,
- filename: this.compile_options.filename
+ filename: this.compile_options.filename,
});
}
@@ -449,12 +431,8 @@ export default class Component {
return;
}
- if (!this.locator) {
- this.locator = getLocator(this.source, { offsetLine: 1 });
- }
-
- const start = this.locator(pos.start);
- const end = this.locator(pos.end);
+ const start = this.locate(pos.start);
+ const end = this.locate(pos.end);
const frame = get_code_frame(this.source, start.line - 1, start.column);
@@ -466,110 +444,88 @@ export default class Component {
end,
pos: pos.start,
filename: this.compile_options.filename,
- toString: () => `${warning.message} (${start.line + 1}:${start.column})\n${frame}`,
+ toString: () =>
+ `${warning.message} (${start.line}:${start.column})\n${frame}`,
});
}
- extract_imports(content) {
- const { code } = this;
-
- content.body.forEach(node => {
- if (node.type === 'ImportDeclaration') {
- // imports need to be hoisted out of the IIFE
- remove_node(code, content.start, content.end, content.body, node);
- this.imports.push(node);
- }
- });
+ extract_imports(node) {
+ this.imports.push(node);
}
- extract_exports(content) {
- const { code } = this;
+ extract_exports(node) {
+ if (node.type === 'ExportDefaultDeclaration') {
+ this.error(node, {
+ code: `default-export`,
+ message: `A component cannot have a default export`,
+ });
+ }
- content.body.forEach(node => {
- if (node.type === 'ExportDefaultDeclaration') {
+ if (node.type === 'ExportNamedDeclaration') {
+ if (node.source) {
this.error(node, {
- code: `default-export`,
- message: `A component cannot have a default export`
+ code: `not-implemented`,
+ message: `A component currently cannot have an export ... from`,
});
}
-
- if (node.type === 'ExportNamedDeclaration') {
- if (node.source) {
- this.error(node, {
- code: `not-implemented`,
- message: `A component currently cannot have an export ... from`
+ if (node.declaration) {
+ if (node.declaration.type === 'VariableDeclaration') {
+ node.declaration.declarations.forEach(declarator => {
+ extract_names(declarator.id).forEach(name => {
+ const variable = this.var_lookup.get(name);
+ variable.export_name = name;
+ if (variable.writable && !(variable.referenced || variable.referenced_from_script)) {
+ this.warn(declarator, {
+ code: `unused-export-let`,
+ message: `${this.name.name} has unused export property '${name}'. If it is for external reference only, please consider using \`export const '${name}'\``
+ });
+ }
+ });
});
+ } else {
+ const { name } = node.declaration.id;
+
+ const variable = this.var_lookup.get(name);
+ variable.export_name = name;
}
- if (node.declaration) {
- if (node.declaration.type === 'VariableDeclaration') {
- node.declaration.declarations.forEach(declarator => {
- extract_names(declarator.id).forEach(name => {
- const variable = this.var_lookup.get(name);
- variable.export_name = name;
- });
- });
- } else {
- const { name } = node.declaration.id;
- const variable = this.var_lookup.get(name);
- variable.export_name = name;
- }
+ return node.declaration;
+ } else {
+ node.specifiers.forEach(specifier => {
+ const variable = this.var_lookup.get(specifier.local.name);
- code.remove(node.start, node.declaration.start);
- } else {
- remove_node(code, content.start, content.end, content.body, node);
- node.specifiers.forEach(specifier => {
- const variable = this.var_lookup.get(specifier.local.name);
+ if (variable) {
+ variable.export_name = specifier.exported.name;
- if (variable) {
- variable.export_name = specifier.exported.name;
- } else {
- // TODO what happens with `export { Math }` or some other global?
+ if (variable.writable && !(variable.referenced || variable.referenced_from_script)) {
+ this.warn(specifier, {
+ code: `unused-export-let`,
+ message: `${this.name.name} has unused export property '${specifier.exported.name}'. If it is for external reference only, please consider using \`export const '${specifier.exported.name}'\``
+ });
}
- });
- }
+ }
+ });
+
+ return null;
}
- });
+ }
}
extract_javascript(script) {
- const nodes_to_include = script.content.body.filter(node => {
+ if (!script) return null;
+
+ return script.content.body.filter(node => {
+ if (!node) return false;
if (this.hoistable_nodes.has(node)) return false;
if (this.reactive_declaration_nodes.has(node)) return false;
if (node.type === 'ImportDeclaration') return false;
- if (node.type === 'ExportDeclaration' && node.specifiers.length > 0) return false;
+ if (node.type === 'ExportDeclaration' && node.specifiers.length > 0)
+ return false;
return true;
});
-
- if (nodes_to_include.length === 0) return null;
-
- let a = script.content.start;
- while (/\s/.test(this.source[a])) a += 1;
-
- let b = a;
-
- let result = '';
-
- script.content.body.forEach((node) => {
- if (this.hoistable_nodes.has(node) || this.reactive_declaration_nodes.has(node)) {
- if (a !== b) result += `[✂${a}-${b}✂]`;
- a = node.end;
- }
-
- b = node.end;
- });
-
- // while (/\s/.test(this.source[a - 1])) a -= 1;
-
- b = script.content.end;
- while (/\s/.test(this.source[b - 1])) b -= 1;
-
- if (a < b) result += `[✂${a}-${b}✂]`;
-
- return result || null;
}
- walk_module_js() {
+ walk_module_js_pre_template() {
const component = this;
const script = this.ast.module;
if (!script) return;
@@ -577,67 +533,61 @@ export default class Component {
walk(script.content, {
enter(node) {
if (node.type === 'LabeledStatement' && node.label.name === '$') {
- component.warn(node, {
+ component.warn(node as any, {
code: 'module-script-reactive-declaration',
- message: '$: has no effect in a module script'
+ message: '$: has no effect in a module script',
});
}
- }
+ },
});
- this.add_sourcemap_locations(script.content);
-
const { scope, globals } = create_scopes(script.content);
this.module_scope = scope;
scope.declarations.forEach((node, name) => {
if (name[0] === '$') {
- this.error(node, {
+ this.error(node as any, {
code: 'illegal-declaration',
- message: `The $ prefix is reserved, and cannot be used for variable and import names`
+ message: `The $ prefix is reserved, and cannot be used for variable and import names`,
});
}
+ const writable = node.type === 'VariableDeclaration' && (node.kind === 'var' || node.kind === 'let');
+
this.add_var({
name,
module: true,
hoistable: true,
- writable: node.kind === 'var' || node.kind === 'let'
+ writable
});
});
globals.forEach((node, name) => {
if (name[0] === '$') {
- this.error(node, {
+ this.error(node as any, {
code: 'illegal-subscription',
- message: `Cannot reference store value inside ';
-function get_context(parser: Parser, attributes: Node[], start: number) {
+function get_context(parser: Parser, attributes: any[], start: number): string {
const context = attributes.find(attribute => attribute.name === 'context');
if (!context) return 'default';
@@ -28,7 +29,7 @@ function get_context(parser: Parser, attributes: Node[], start: number) {
return value;
}
-export default function read_script(parser: Parser, start: number, attributes: Node[]) {
+export default function read_script(parser: Parser, start: number, attributes: Node[]): Script {
const script_start = parser.index;
const script_end = parser.template.indexOf(script_closing_tag, script_start);
@@ -41,16 +42,19 @@ export default function read_script(parser: Parser, start: number, attributes: N
repeat(' ', script_start) + parser.template.slice(script_start, script_end);
parser.index = script_end + script_closing_tag.length;
- let ast;
+ let ast: Program;
try {
- ast = acorn.parse(source);
+ ast = acorn.parse(source) as any as Program;
} catch (err) {
parser.acorn_error(err);
}
- ast.start = script_start;
+ // TODO is this necessary?
+ (ast as any).start = script_start;
+
return {
+ type: 'Script',
start,
end: parser.index,
context: get_context(parser, attributes, start),
diff --git a/src/compiler/parse/read/style.ts b/src/compiler/parse/read/style.ts
index a14356e05b..dd9d1286f2 100644
--- a/src/compiler/parse/read/style.ts
+++ b/src/compiler/parse/read/style.ts
@@ -1,9 +1,10 @@
import parse from 'css-tree/lib/parser/index.js';
import { walk } from 'estree-walker';
import { Parser } from '../index';
-import { Node } from '../../interfaces';
+import { Node } from 'estree';
+import { Style } from '../../interfaces';
-export default function read_style(parser: Parser, start: number, attributes: Node[]) {
+export default function read_style(parser: Parser, start: number, attributes: Node[]): Style {
const content_start = parser.index;
const styles = parser.read_until(/<\/style>/);
const content_end = parser.index;
@@ -30,7 +31,7 @@ export default function read_style(parser: Parser, start: number, attributes: No
// tidy up AST
walk(ast, {
- enter: (node: Node) => {
+ enter: (node: any) => { // `any` because this isn't an ESTree node
// replace `ref:a` nodes
if (node.type === 'Selector') {
for (let i = 0; i < node.children.length; i += 1) {
@@ -46,6 +47,13 @@ export default function read_style(parser: Parser, start: number, attributes: No
}
}
+ if (node.type === 'Declaration' && node.value.type === 'Value' && node.value.children.length === 0) {
+ parser.error({
+ code: `invalid-declaration`,
+ message: `Declaration cannot be empty`
+ }, node.start);
+ }
+
if (node.loc) {
node.start = node.loc.start.offset;
node.end = node.loc.end.offset;
@@ -58,6 +66,7 @@ export default function read_style(parser: Parser, start: number, attributes: No
const end = parser.index;
return {
+ type: 'Style',
start,
end,
attributes,
@@ -65,12 +74,12 @@ export default function read_style(parser: Parser, start: number, attributes: No
content: {
start: content_start,
end: content_end,
- styles,
- },
+ styles
+ }
};
}
-function is_ref_selector(a: Node, b: Node) {
+function is_ref_selector(a: any, b: any) { // TODO add CSS node types
if (!b) return false;
return (
diff --git a/src/compiler/parse/state/mustache.ts b/src/compiler/parse/state/mustache.ts
index 4abd506984..140e722b10 100644
--- a/src/compiler/parse/state/mustache.ts
+++ b/src/compiler/parse/state/mustache.ts
@@ -1,11 +1,12 @@
import read_context from '../read/context';
import read_expression from '../read/expression';
+import { closing_tag_omitted } from '../utils/html';
import { whitespace } from '../../utils/patterns';
import { trim_start, trim_end } from '../../utils/trim';
import { Parser } from '../index';
-import { Node } from '../../interfaces';
+import { TemplateNode } from '../../interfaces';
-function trim_whitespace(block: Node, trim_before: boolean, trim_after: boolean) {
+function trim_whitespace(block: TemplateNode, trim_before: boolean, trim_after: boolean) {
if (!block.children || block.children.length === 0) return; // AwaitBlock
const first_child = block.children[0];
@@ -41,6 +42,12 @@ export default function mustache(parser: Parser) {
let block = parser.current();
let expected;
+ if (closing_tag_omitted(block.name)) {
+ block.end = start;
+ parser.stack.pop();
+ block = parser.current();
+ }
+
if (block.type === 'ElseBlock' || block.type === 'PendingBlock' || block.type === 'ThenBlock' || block.type === 'CatchBlock') {
block.end = start;
parser.stack.pop();
@@ -153,57 +160,47 @@ export default function mustache(parser: Parser) {
parser.stack.push(block.else);
}
- } else if (parser.eat(':then')) {
- // TODO DRY out this and the next section
- const pending_block = parser.current();
- if (pending_block.type === 'PendingBlock') {
- pending_block.end = start;
- parser.stack.pop();
- const await_block = parser.current();
+ } else if (parser.match(':then') || parser.match(':catch')) {
+ const block = parser.current();
+ const is_then = parser.eat(':then') || !parser.eat(':catch');
- if (!parser.eat('}')) {
- parser.require_whitespace();
- await_block.value = parser.read_identifier();
- parser.allow_whitespace();
- parser.eat('}', true);
+ if (is_then) {
+ if (block.type !== 'PendingBlock') {
+ parser.error({
+ code: `invalid-then-placement`,
+ message: 'Cannot have an {:then} block outside an {#await ...} block'
+ });
}
-
- const then_block: Node = {
- start,
- end: null,
- type: 'ThenBlock',
- children: [],
- skip: false
- };
-
- await_block.then = then_block;
- parser.stack.push(then_block);
- }
- } else if (parser.eat(':catch')) {
- const then_block = parser.current();
- if (then_block.type === 'ThenBlock') {
- then_block.end = start;
- parser.stack.pop();
- const await_block = parser.current();
-
- if (!parser.eat('}')) {
- parser.require_whitespace();
- await_block.error = parser.read_identifier();
- parser.allow_whitespace();
- parser.eat('}', true);
+ } else {
+ if (block.type !== 'ThenBlock' && block.type !== 'PendingBlock') {
+ parser.error({
+ code: `invalid-catch-placement`,
+ message: 'Cannot have an {:catch} block outside an {#await ...} block'
+ });
}
+ }
- const catch_block: Node = {
- start,
- end: null,
- type: 'CatchBlock',
- children: [],
- skip: false
- };
+ block.end = start;
+ parser.stack.pop();
+ const await_block = parser.current();
- await_block.catch = catch_block;
- parser.stack.push(catch_block);
+ if (!parser.eat('}')) {
+ parser.require_whitespace();
+ await_block[is_then ? 'value': 'error'] = parser.read_identifier();
+ parser.allow_whitespace();
+ parser.eat('}', true);
}
+
+ const new_block: TemplateNode = {
+ start,
+ end: null,
+ type: is_then ? 'ThenBlock': 'CatchBlock',
+ children: [],
+ skip: false
+ };
+
+ await_block[is_then ? 'then' : 'catch'] = new_block;
+ parser.stack.push(new_block);
} else if (parser.eat('#')) {
// {#if foo}, {#each foo} or {#await foo}
let type;
@@ -225,7 +222,7 @@ export default function mustache(parser: Parser) {
const expression = read_expression(parser);
- const block: Node = type === 'AwaitBlock' ?
+ const block: TemplateNode = type === 'AwaitBlock' ?
{
start,
end: null,
diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
index 03735f67be..c7e761afc2 100644
--- a/src/compiler/parse/state/tag.ts
+++ b/src/compiler/parse/state/tag.ts
@@ -1,10 +1,10 @@
import read_expression from '../read/expression';
import read_script from '../read/script';
import read_style from '../read/style';
-import { decode_character_references } from '../utils/html';
+import { decode_character_references, closing_tag_omitted } from '../utils/html';
import { is_void } from '../../utils/names';
import { Parser } from '../index';
-import { Directive, DirectiveType, Node, Text } from '../../interfaces';
+import { Directive, DirectiveType, TemplateNode, Text } from '../../interfaces';
import fuzzymatch from '../../utils/fuzzymatch';
import list from '../../utils/list';
@@ -37,35 +37,8 @@ const specials = new Map([
],
]);
-// eslint-disable-next-line no-useless-escape
-const SELF = /^svelte:self(?=[\s\/>])/;
-// eslint-disable-next-line no-useless-escape
-const COMPONENT = /^svelte:component(?=[\s\/>])/;
-
-// based on http://developers.whatwg.org/syntax.html#syntax-tag-omission
-const disallowed_contents = new Map([
- ['li', new Set(['li'])],
- ['dt', new Set(['dt', 'dd'])],
- ['dd', new Set(['dt', 'dd'])],
- [
- 'p',
- new Set(
- 'address article aside blockquote div dl fieldset footer form h1 h2 h3 h4 h5 h6 header hgroup hr main menu nav ol p pre section table ul'.split(
- ' '
- )
- ),
- ],
- ['rt', new Set(['rt', 'rp'])],
- ['rp', new Set(['rt', 'rp'])],
- ['optgroup', new Set(['optgroup'])],
- ['option', new Set(['option', 'optgroup'])],
- ['thead', new Set(['tbody', 'tfoot'])],
- ['tbody', new Set(['tbody', 'tfoot'])],
- ['tfoot', new Set(['tbody'])],
- ['tr', new Set(['tr', 'tbody'])],
- ['td', new Set(['td', 'th', 'tr'])],
- ['th', new Set(['td', 'th', 'tr'])],
-]);
+const SELF = /^svelte:self(?=[\s/>])/;
+const COMPONENT = /^svelte:component(?=[\s/>])/;
function parent_is_head(stack) {
let i = stack.length;
@@ -108,7 +81,7 @@ export default function tag(parser: Parser) {
parser.current().children.length
) {
parser.error({
- code: `invalid-${name.slice(7)}-content`,
+ code: `invalid-${slug}-content`,
message: `<${name}> cannot have children`
}, parser.current().children[0].start);
}
@@ -137,7 +110,7 @@ export default function tag(parser: Parser) {
: name === 'title' && parent_is_head(parser.stack) ? 'Title'
: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
- const element: Node = {
+ const element: TemplateNode = {
start,
end: null, // filled in later
type,
@@ -176,13 +149,9 @@ export default function tag(parser: Parser) {
parser.stack.pop();
return;
- } else if (disallowed_contents.has(parent.name)) {
- // can this be a child of the parent element, or does it implicitly
- // close it, like `one two`?
- if (disallowed_contents.get(parent.name).has(name)) {
- parent.end = start;
- parser.stack.pop();
- }
+ } else if (closing_tag_omitted(parent.name, name)) {
+ parent.end = start;
+ parser.stack.pop();
}
const unique_names: Set = new Set();
@@ -435,7 +404,7 @@ function read_attribute(parser: Parser, unique_names: Set) {
end: directive.end,
type: 'Identifier',
name: directive.name
- };
+ } as any;
}
return directive;
@@ -476,7 +445,7 @@ function read_attribute_value(parser: Parser) {
return value;
}
-function read_sequence(parser: Parser, done: () => boolean): Node[] {
+function read_sequence(parser: Parser, done: () => boolean): TemplateNode[] {
let current_chunk: Text = {
start: parser.index,
end: null,
@@ -493,7 +462,7 @@ function read_sequence(parser: Parser, done: () => boolean): Node[] {
}
}
- const chunks: Node[] = [];
+ const chunks: TemplateNode[] = [];
while (parser.index < parser.template.length) {
const index = parser.index;
diff --git a/src/compiler/parse/utils/html.ts b/src/compiler/parse/utils/html.ts
index 13ff553a3f..2b8c4213b7 100644
--- a/src/compiler/parse/utils/html.ts
+++ b/src/compiler/parse/utils/html.ts
@@ -112,3 +112,40 @@ function validate_code(code: number) {
return NUL;
}
+
+// based on http://developers.whatwg.org/syntax.html#syntax-tag-omission
+const disallowed_contents = new Map([
+ ['li', new Set(['li'])],
+ ['dt', new Set(['dt', 'dd'])],
+ ['dd', new Set(['dt', 'dd'])],
+ [
+ 'p',
+ new Set(
+ 'address article aside blockquote div dl fieldset footer form h1 h2 h3 h4 h5 h6 header hgroup hr main menu nav ol p pre section table ul'.split(
+ ' '
+ )
+ ),
+ ],
+ ['rt', new Set(['rt', 'rp'])],
+ ['rp', new Set(['rt', 'rp'])],
+ ['optgroup', new Set(['optgroup'])],
+ ['option', new Set(['option', 'optgroup'])],
+ ['thead', new Set(['tbody', 'tfoot'])],
+ ['tbody', new Set(['tbody', 'tfoot'])],
+ ['tfoot', new Set(['tbody'])],
+ ['tr', new Set(['tr', 'tbody'])],
+ ['td', new Set(['td', 'th', 'tr'])],
+ ['th', new Set(['td', 'th', 'tr'])],
+]);
+
+// can this be a child of the parent element, or does it implicitly
+// close it, like `one two`?
+export function closing_tag_omitted(current: string, next?: string) {
+ if (disallowed_contents.has(current)) {
+ if (!next || disallowed_contents.get(current).has(next)) {
+ return true;
+ }
+ }
+
+ return false;
+}
diff --git a/src/compiler/preprocess/index.ts b/src/compiler/preprocess/index.ts
index 2faa3b97f2..4549517fbd 100644
--- a/src/compiler/preprocess/index.ts
+++ b/src/compiler/preprocess/index.ts
@@ -94,8 +94,12 @@ export default async function preprocess(
for (const fn of script) {
source = await replace_async(
source,
- /([^]*?)<\/script>/gi,
+ /|([^]*?)<\/script>/gi,
async (match, attributes = '', content) => {
+ if (!attributes && !content) {
+ return match;
+ }
+ attributes = attributes || '';
const processed = await fn({
content,
attributes: parse_attributes(attributes),
@@ -110,8 +114,11 @@ export default async function preprocess(
for (const fn of style) {
source = await replace_async(
source,
- /([^]*?)<\/style>/gi,
+ /|([^]*?)<\/style>/gi,
async (match, attributes = '', content) => {
+ if (!attributes && !content) {
+ return match;
+ }
const processed: Processed = await fn({
content,
attributes: parse_attributes(attributes),
diff --git a/src/compiler/utils/indentation.ts b/src/compiler/utils/indentation.ts
deleted file mode 100644
index 54ededc37d..0000000000
--- a/src/compiler/utils/indentation.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import MagicString from 'magic-string';
-import { Node } from '../interfaces';
-import { walk } from 'estree-walker';
-import repeat from './repeat';
-
-export function remove_indentation(code: MagicString, node: Node) {
- const indent = code.getIndentString();
- const pattern = new RegExp(`^${indent}`, 'gm');
-
- const excluded = [];
-
- walk(node, {
- enter(node) {
- if (node.type === 'TemplateElement') {
- excluded.push(node);
- }
- }
- });
-
- const str = code.original.slice(node.start, node.end);
-
- let match;
- while (match = pattern.exec(str)) {
- const index = node.start + match.index;
- while (excluded[0] && excluded[0].end < index) excluded.shift();
- if (excluded[0] && excluded[0].start < index) continue;
-
- code.remove(index, index + indent.length);
- }
-}
-
-export function add_indentation(code: MagicString, node: Node, levels = 1) {
- const base_indent = code.getIndentString();
- const indent = repeat(base_indent, levels);
- const pattern = /\n/gm;
-
- const excluded = [];
-
- walk(node, {
- enter(node) {
- if (node.type === 'TemplateElement') {
- excluded.push(node);
- }
- }
- });
-
- const str = code.original.slice(node.start, node.end);
-
- let match;
- while (match = pattern.exec(str)) {
- const index = node.start + match.index;
- while (excluded[0] && excluded[0].end < index) excluded.shift();
- if (excluded[0] && excluded[0].start < index) continue;
-
- code.appendLeft(index + 1, indent);
- }
-}
diff --git a/src/compiler/utils/names.ts b/src/compiler/utils/names.ts
index 8d9150bc18..88d4d4a319 100644
--- a/src/compiler/utils/names.ts
+++ b/src/compiler/utils/names.ts
@@ -15,6 +15,7 @@ export const globals = new Set([
'encodeURIComponent',
'Error',
'EvalError',
+ 'Event',
'history',
'Infinity',
'InternalError',
@@ -23,6 +24,7 @@ export const globals = new Set([
'isNaN',
'JSON',
'localStorage',
+ 'location',
'Map',
'Math',
'NaN',
@@ -104,7 +106,7 @@ export function is_void(name: string) {
return void_element_names.test(name) || name.toLowerCase() === '!doctype';
}
-function is_valid(str: string): boolean {
+export function is_valid(str: string): boolean {
let i = 0;
while (i < str.length) {
@@ -117,16 +119,6 @@ function is_valid(str: string): boolean {
return true;
}
-export function quote_name_if_necessary(name: string) {
- if (!is_valid(name)) return `"${name}"`;
- return name;
-}
-
-export function quote_prop_if_necessary(name: string) {
- if (!is_valid(name)) return `["${name}"]`;
- return `.${name}`;
-}
-
export function sanitize(name: string) {
return name
.replace(/[^a-zA-Z0-9_]+/g, '_')
diff --git a/src/runtime/ambient.ts b/src/runtime/ambient.ts
index b094056c59..09cd9b72f2 100644
--- a/src/runtime/ambient.ts
+++ b/src/runtime/ambient.ts
@@ -1,19 +1,3 @@
declare module '*.svelte' {
- type Props = Record;
-
- export default class {
- constructor(options: {
- target: Element;
- anchor?: Element;
- props?: Props;
- hydrate?: boolean;
- intro?: boolean;
- });
-
- $set(props: Props): void;
- $on(event: string, callback: (event: CustomEvent) => void): () => void;
- $destroy(): void;
-
- [accessor: string]: any;
- }
+ export { SvelteComponentDev as default } from 'svelte/internal';
}
diff --git a/src/runtime/animate/index.ts b/src/runtime/animate/index.ts
index d00d23c98d..087c0f7141 100644
--- a/src/runtime/animate/index.ts
+++ b/src/runtime/animate/index.ts
@@ -19,15 +19,17 @@ interface FlipParams {
export function flip(node: Element, animation: { from: DOMRect; to: DOMRect }, params: FlipParams): AnimationConfig {
const style = getComputedStyle(node);
const transform = style.transform === 'none' ? '' : style.transform;
+ const scaleX = animation.from.width / node.clientWidth;
+ const scaleY = animation.from.height / node.clientHeight;
- const dx = animation.from.left - animation.to.left;
- const dy = animation.from.top - animation.to.top;
+ const dx = (animation.from.left - animation.to.left) / scaleX;
+ const dy = (animation.from.top - animation.to.top) / scaleY;
const d = Math.sqrt(dx * dx + dy * dy);
const {
delay = 0,
- duration = d => Math.sqrt(d) * 120,
+ duration = (d: number) => Math.sqrt(d) * 120,
easing = cubicOut
} = params;
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
index 0973b93f1e..e6c0c916f2 100644
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -8,5 +8,6 @@ export {
setContext,
getContext,
tick,
- createEventDispatcher
+ createEventDispatcher,
+ SvelteComponentDev as SvelteComponent
} from 'svelte/internal';
diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index 92e227e57c..0ce3b3209b 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -1,9 +1,24 @@
import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler';
import { current_component, set_current_component } from './lifecycle';
-import { blank_object, is_function, run, run_all, noop } from './utils';
+import { blank_object, is_function, run, run_all, noop, has_prop } from './utils';
import { children } from './dom';
import { transition_in } from './transitions';
+interface Fragment {
+ key: string|null;
+ first: null;
+ /* create */ c: () => void;
+ /* claim */ l: (nodes: any) => void;
+ /* hydrate */ h: () => void;
+ /* mount */ m: (target: HTMLElement, anchor: any) => void;
+ /* update */ p: (changed: any, ctx: any) => void;
+ /* measure */ r: () => void;
+ /* fix */ f: () => void;
+ /* animate */ a: () => void;
+ /* intro */ i: (local: any) => void;
+ /* outro */ o: (local: any) => void;
+ /* destroy */ d: (detaching: 0|1) => void;
+}
// eslint-disable-next-line @typescript-eslint/class-name-casing
interface T$$ {
dirty: null;
@@ -12,8 +27,8 @@ interface T$$ {
update: () => void;
callbacks: any;
after_update: any[];
- props: any;
- fragment: null|any;
+ props: Record;
+ fragment: null|false|Fragment;
not_equal: any;
before_update: any[];
context: Map;
@@ -22,15 +37,25 @@ interface T$$ {
}
export function bind(component, name, callback) {
- if (component.$$.props.indexOf(name) === -1) return;
- component.$$.bound[name] = callback;
- callback(component.$$.ctx[name]);
+ if (has_prop(component.$$.props, name)) {
+ name = component.$$.props[name] || name;
+ component.$$.bound[name] = callback;
+ callback(component.$$.ctx[name]);
+ }
+}
+
+export function create_component(block) {
+ block && block.c();
+}
+
+export function claim_component(block, parent_nodes) {
+ block && block.l(parent_nodes);
}
export function mount_component(component, target, anchor) {
const { fragment, on_mount, on_destroy, after_update } = component.$$;
- fragment.m(target, anchor);
+ fragment && fragment.m(target, anchor);
// onMount happens before the initial afterUpdate
add_render_callback(() => {
@@ -49,15 +74,16 @@ export function mount_component(component, target, anchor) {
}
export function destroy_component(component, detaching) {
- if (component.$$.fragment) {
- run_all(component.$$.on_destroy);
+ const $$ = component.$$;
+ if ($$.fragment !== null) {
+ run_all($$.on_destroy);
- component.$$.fragment.d(detaching);
+ $$.fragment && $$.fragment.d(detaching);
// TODO null out other refs, including component.$$ (but need to
// preserve final state?)
- component.$$.on_destroy = component.$$.fragment = null;
- component.$$.ctx = {};
+ $$.on_destroy = $$.fragment = null;
+ $$.ctx = {};
}
}
@@ -70,18 +96,18 @@ function make_dirty(component, key) {
component.$$.dirty[key] = true;
}
-export function init(component, options, instance, create_fragment, not_equal, prop_names) {
+export function init(component, options, instance, create_fragment, not_equal, props) {
const parent_component = current_component;
set_current_component(component);
- const props = options.props || {};
+ const prop_values = options.props || {};
const $$: T$$ = component.$$ = {
fragment: null,
ctx: null,
// state
- props: prop_names,
+ props,
update: noop,
not_equal,
bound: blank_object(),
@@ -101,26 +127,29 @@ export function init(component, options, instance, create_fragment, not_equal, p
let ready = false;
$$.ctx = instance
- ? instance(component, props, (key, value) => {
+ ? instance(component, prop_values, (key, ret, value = ret) => {
if ($$.ctx && not_equal($$.ctx[key], $$.ctx[key] = value)) {
if ($$.bound[key]) $$.bound[key](value);
if (ready) make_dirty(component, key);
}
+ return ret;
})
- : props;
+ : prop_values;
$$.update();
ready = true;
run_all($$.before_update);
- $$.fragment = create_fragment($$.ctx);
+
+ // `false` as a special case of no DOM component
+ $$.fragment = create_fragment ? create_fragment($$.ctx) : false;
if (options.target) {
if (options.hydrate) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- $$.fragment!.l(children(options.target));
+ $$.fragment && $$.fragment!.l(children(options.target));
} else {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- $$.fragment!.c();
+ $$.fragment && $$.fragment!.c();
}
if (options.intro) transition_in(component.$$.fragment);
@@ -132,7 +161,7 @@ export function init(component, options, instance, create_fragment, not_equal, p
}
export let SvelteElement;
-if (typeof HTMLElement !== 'undefined') {
+if (typeof HTMLElement === 'function') {
SvelteElement = class extends HTMLElement {
$$: T$$;
constructor() {
@@ -196,20 +225,3 @@ export class SvelteComponent {
// overridden by instance, if it has props
}
}
-
-export class SvelteComponentDev extends SvelteComponent {
- constructor(options) {
- if (!options || (!options.target && !options.$$inline)) {
- throw new Error(`'target' is a required option`);
- }
-
- super();
- }
-
- $destroy() {
- super.$destroy();
- this.$destroy = () => {
- console.warn(`Component was already destroyed`); // eslint-disable-line no-console
- };
- }
-}
diff --git a/src/runtime/internal/await_block.ts b/src/runtime/internal/await_block.ts
index 4037caa98e..6cd7ee5cb4 100644
--- a/src/runtime/internal/await_block.ts
+++ b/src/runtime/internal/await_block.ts
@@ -14,6 +14,8 @@ export function handle_promise(promise, info) {
const child_ctx = assign(assign({}, info.ctx), info.resolved);
const block = type && (info.current = type)(child_ctx);
+ let needs_flush = false;
+
if (info.block) {
if (info.blocks) {
info.blocks.forEach((block, i) => {
@@ -33,11 +35,15 @@ export function handle_promise(promise, info) {
transition_in(block, 1);
block.m(info.mount(), info.anchor);
- flush();
+ needs_flush = true;
}
info.block = block;
if (info.blocks) info.blocks[index] = block;
+
+ if (needs_flush) {
+ flush();
+ }
}
if (is_promise(promise)) {
diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
new file mode 100644
index 0000000000..cb60131166
--- /dev/null
+++ b/src/runtime/internal/dev.ts
@@ -0,0 +1,122 @@
+import { custom_event, append, insert, detach, listen, attr } from './dom';
+import { SvelteComponent } from './Component';
+
+export function dispatch_dev(type: string, detail?: T) {
+ document.dispatchEvent(custom_event(type, detail));
+}
+
+export function append_dev(target: Node, node: Node) {
+ dispatch_dev("SvelteDOMInsert", { target, node });
+ append(target, node);
+}
+
+export function insert_dev(target: Node, node: Node, anchor?: Node) {
+ dispatch_dev("SvelteDOMInsert", { target, node, anchor });
+ insert(target, node, anchor);
+}
+
+export function detach_dev(node: Node) {
+ dispatch_dev("SvelteDOMRemove", { node });
+ detach(node);
+}
+
+export function detach_between_dev(before: Node, after: Node) {
+ while (before.nextSibling && before.nextSibling !== after) {
+ detach_dev(before.nextSibling);
+ }
+}
+
+export function detach_before_dev(after: Node) {
+ while (after.previousSibling) {
+ detach_dev(after.previousSibling);
+ }
+}
+
+export function detach_after_dev(before: Node) {
+ while (before.nextSibling) {
+ detach_dev(before.nextSibling);
+ }
+}
+
+export function listen_dev(node: Node, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions, has_prevent_default?: boolean, has_stop_propagation?: boolean) {
+ const modifiers = options === true ? [ "capture" ] : options ? Array.from(Object.keys(options)) : [];
+ if (has_prevent_default) modifiers.push('preventDefault');
+ if (has_stop_propagation) modifiers.push('stopPropagation');
+
+ dispatch_dev("SvelteDOMAddEventListener", { node, event, handler, modifiers });
+
+ const dispose = listen(node, event, handler, options);
+ return () => {
+ dispatch_dev("SvelteDOMRemoveEventListener", { node, event, handler, modifiers });
+ dispose();
+ };
+}
+
+export function attr_dev(node: Element, attribute: string, value?: string) {
+ attr(node, attribute, value);
+
+ if (value == null) dispatch_dev("SvelteDOMRemoveAttribute", { node, attribute });
+ else dispatch_dev("SvelteDOMSetAttribute", { node, attribute, value });
+}
+
+export function prop_dev(node: Element, property: string, value?: any) {
+ node[property] = value;
+
+ dispatch_dev("SvelteDOMSetProperty", { node, property, value });
+}
+
+export function dataset_dev(node: HTMLElement, property: string, value?: any) {
+ node.dataset[property] = value;
+
+ dispatch_dev("SvelteDOMSetDataset", { node, property, value });
+}
+
+export function set_data_dev(text, data) {
+ data = '' + data;
+ if (text.data === data) return;
+
+ dispatch_dev("SvelteDOMSetData", { node: text, data });
+ text.data = data;
+}
+
+
+type Props = Record;
+export interface SvelteComponentDev {
+ $set(props?: Props): void;
+ $on(event: string, callback: (event: CustomEvent) => void): () => void;
+ $destroy(): void;
+ [accessor: string]: any;
+}
+
+export class SvelteComponentDev extends SvelteComponent {
+ constructor(options: {
+ target: Element;
+ anchor?: Element;
+ props?: Props;
+ hydrate?: boolean;
+ intro?: boolean;
+ $$inline?: boolean;
+ }) {
+ if (!options || (!options.target && !options.$$inline)) {
+ throw new Error(`'target' is a required option`);
+ }
+
+ super();
+ }
+
+ $destroy() {
+ super.$destroy();
+ this.$destroy = () => {
+ console.warn(`Component was already destroyed`); // eslint-disable-line no-console
+ };
+ }
+}
+
+export function loop_guard(timeout) {
+ const start = Date.now();
+ return () => {
+ if (Date.now() - start > timeout) {
+ throw new Error(`Infinite loop detected`);
+ }
+ };
+}
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index ed5d90547b..96a76444a1 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -1,3 +1,5 @@
+import { has_prop } from "./utils";
+
export function append(target: Node, node: Node) {
target.appendChild(node);
}
@@ -29,7 +31,7 @@ export function object_without_properties(obj: T, exclude:
const target = {} as Pick>;
for (const k in obj) {
if (
- Object.prototype.hasOwnProperty.call(obj, k)
+ has_prop(obj, k)
// @ts-ignore
&& exclude.indexOf(k) === -1
) {
@@ -86,14 +88,18 @@ export function self(fn) {
export function attr(node: Element, attribute: string, value?: string) {
if (value == null) node.removeAttribute(attribute);
- else node.setAttribute(attribute, value);
+ else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value);
}
export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
+ // @ts-ignore
+ const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
for (const key in attributes) {
- if (key === 'style') {
+ if (attributes[key] == null) {
+ node.removeAttribute(key);
+ } else if (key === 'style') {
node.style.cssText = attributes[key];
- } else if (key in node) {
+ } else if (descriptors[key] && descriptors[key].set) {
node[key] = attributes[key];
} else {
attr(node, key, attributes[key]);
@@ -101,6 +107,12 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes
}
}
+export function set_svg_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
+ for (const key in attributes) {
+ attr(node, key, attributes[key]);
+ }
+}
+
export function set_custom_element_data(node, prop, value) {
if (prop in node) {
node[prop] = value;
@@ -156,7 +168,7 @@ export function claim_text(nodes, data) {
for (let i = 0; i < nodes.length; i += 1) {
const node = nodes[i];
if (node.nodeType === 3) {
- node.data = data;
+ node.data = '' + data;
return nodes.splice(i, 1)[0];
}
}
@@ -164,6 +176,10 @@ export function claim_text(nodes, data) {
return text(data);
}
+export function claim_space(nodes) {
+ return claim_text(nodes, ' ');
+}
+
export function set_data(text, data) {
data = '' + data;
if (text.data !== data) text.data = data;
diff --git a/src/runtime/internal/index.ts b/src/runtime/internal/index.ts
index 0d0a6fd90f..e1dd2a1fcf 100644
--- a/src/runtime/internal/index.ts
+++ b/src/runtime/internal/index.ts
@@ -12,3 +12,4 @@ export * from './ssr';
export * from './transitions';
export * from './utils';
export * from './Component';
+export * from './dev';
diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts
index 0ca3e4306d..a8e37e9632 100644
--- a/src/runtime/internal/lifecycle.ts
+++ b/src/runtime/internal/lifecycle.ts
@@ -28,9 +28,9 @@ export function onDestroy(fn) {
}
export function createEventDispatcher() {
- const component = current_component;
+ const component = get_current_component();
- return (type, detail) => {
+ return (type: string, detail?: any) => {
const callbacks = component.$$.callbacks[type];
if (callbacks) {
diff --git a/src/runtime/internal/scheduler.ts b/src/runtime/internal/scheduler.ts
index e3d7181fcb..7cb00c085b 100644
--- a/src/runtime/internal/scheduler.ts
+++ b/src/runtime/internal/scheduler.ts
@@ -70,10 +70,10 @@ export function flush() {
}
function update($$) {
- if ($$.fragment) {
+ if ($$.fragment !== null) {
$$.update($$.dirty);
run_all($$.before_update);
- $$.fragment.p($$.dirty, $$.ctx);
+ $$.fragment && $$.fragment.p($$.dirty, $$.ctx);
$$.dirty = null;
$$.after_update.forEach(add_render_callback);
diff --git a/src/runtime/internal/spread.ts b/src/runtime/internal/spread.ts
index 0075c947cd..203b0b11e9 100644
--- a/src/runtime/internal/spread.ts
+++ b/src/runtime/internal/spread.ts
@@ -35,3 +35,7 @@ export function get_spread_update(levels, updates) {
return update;
}
+
+export function get_spread_object(spread_props) {
+ return typeof spread_props === 'object' && spread_props !== null ? spread_props : {};
+}
\ No newline at end of file
diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts
index d8fbf15f0a..274006f243 100644
--- a/src/runtime/internal/ssr.ts
+++ b/src/runtime/internal/ssr.ts
@@ -1,26 +1,34 @@
import { set_current_component, current_component } from './lifecycle';
import { run_all, blank_object } from './utils';
+import { boolean_attributes } from '../../compiler/compile/render_ssr/handlers/shared/boolean_attributes';
export const invalid_attribute_name_character = /[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
// https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
// https://infra.spec.whatwg.org/#noncharacter
-export function spread(args) {
+export function spread(args, classes_to_add) {
const attributes = Object.assign({}, ...args);
+ if (classes_to_add) {
+ if (attributes.class == null) {
+ attributes.class = classes_to_add;
+ } else {
+ attributes.class += ' ' + classes_to_add;
+ }
+ }
let str = '';
Object.keys(attributes).forEach(name => {
if (invalid_attribute_name_character.test(name)) return;
const value = attributes[name];
- if (value === undefined) return;
if (value === true) str += " " + name;
-
- const escaped = String(value)
- .replace(/"/g, '"')
- .replace(/'/g, ''');
-
- str += " " + name + "=" + JSON.stringify(escaped);
+ else if (boolean_attributes.has(name.toLowerCase())) {
+ if (value) str += " " + name;
+ } else if (value != null) {
+ str += " " + name + "=" + JSON.stringify(String(value)
+ .replace(/"/g, '"')
+ .replace(/'/g, '''));
+ }
});
return str;
diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts
index e457eb0505..6816f8684a 100644
--- a/src/runtime/internal/utils.ts
+++ b/src/runtime/internal/utils.ts
@@ -100,3 +100,10 @@ export function once(fn) {
export function null_to_empty(value) {
return value == null ? '' : value;
}
+
+export function set_store_value(store, ret, value = ret) {
+ store.set(value);
+ return ret;
+}
+
+export const has_prop = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
\ No newline at end of file
diff --git a/src/runtime/motion/spring.ts b/src/runtime/motion/spring.ts
index 7742dd4106..1804ff43a5 100644
--- a/src/runtime/motion/spring.ts
+++ b/src/runtime/motion/spring.ts
@@ -65,7 +65,7 @@ interface Spring extends Readable{
stiffness: number;
}
-export function spring(value: T, opts: SpringOpts = {}): Spring {
+export function spring(value?: T, opts: SpringOpts = {}): Spring {
const store = writable(value);
const { stiffness = 0.15, damping = 0.8, precision = 0.01 } = opts;
@@ -84,12 +84,12 @@ export function spring(value: T, opts: SpringOpts = {}): Spring {
target_value = new_value;
const token = current_token = {};
- if (opts.hard || (spring.stiffness >= 1 && spring.damping >= 1)) {
+ if (value == null || opts.hard || (spring.stiffness >= 1 && spring.damping >= 1)) {
cancel_task = true; // cancel any running animation
last_time = now();
- last_value = value;
+ last_value = new_value;
store.set(value = target_value);
- return new Promise(f => f()); // fulfil immediately
+ return Promise.resolve();
} else if (opts.soft) {
const rate = opts.soft === true ? .5 : +opts.soft;
inv_mass_recovery_rate = 1 / (rate * 60);
diff --git a/src/runtime/motion/tweened.ts b/src/runtime/motion/tweened.ts
index 7159c17eb5..e33f0f79f9 100644
--- a/src/runtime/motion/tweened.ts
+++ b/src/runtime/motion/tweened.ts
@@ -69,13 +69,18 @@ interface Tweened extends Readable {
update(updater: Updater, opts: Options): Promise;
}
-export function tweened(value: T, defaults: Options = {}): Tweened {
+export function tweened(value?: T, defaults: Options = {}): Tweened {
const store = writable(value);
let task: Task;
let target_value = value;
function set(new_value: T, opts: Options) {
+ if (value == null) {
+ store.set(value = new_value);
+ return Promise.resolve();
+ }
+
target_value = new_value;
let previous_task = task;
diff --git a/src/runtime/store/index.ts b/src/runtime/store/index.ts
index eb2eda5779..64a63d4179 100644
--- a/src/runtime/store/index.ts
+++ b/src/runtime/store/index.ts
@@ -122,16 +122,30 @@ type StoresValues = T extends Readable ? U :
/**
* Derived value store by synchronizing one or more readable stores and
* applying an aggregation function over its input values.
- * @param {Stores} stores input stores
- * @param {function(Stores=, function(*)=):*}fn function callback that aggregates the values
- * @param {*=}initial_value when used asynchronously
+ *
+ * @param stores - input stores
+ * @param fn - function callback that aggregates the values
*/
-export function derived(
+export function derived(
stores: S,
- fn: (values: StoresValues, set?: Subscriber) => T | Unsubscriber | void,
- initial_value?: T,
-): Readable {
+ fn: (values: StoresValues) => T
+): Readable;
+/**
+ * Derived value store by synchronizing one or more readable stores and
+ * applying an aggregation function over its input values.
+ *
+ * @param stores - input stores
+ * @param fn - function callback that aggregates the values
+ * @param initial_value - when used asynchronously
+ */
+export function derived(
+ stores: S,
+ fn: (values: StoresValues, set: (value: T) => void) => Unsubscriber | void,
+ initial_value?: T
+): Readable;
+
+export function derived(stores: Stores, fn: Function, initial_value?: T): Readable {
const single = !Array.isArray(stores);
const stores_array: Array> = single
? [stores as Readable]
@@ -141,7 +155,7 @@ export function derived(
return readable(initial_value, (set) => {
let inited = false;
- const values: StoresValues = [] as StoresValues;
+ const values = [];
let pending = 0;
let cleanup = noop;
diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts
index d89730fd6b..0a20c81b1f 100644
--- a/src/runtime/transition/index.ts
+++ b/src/runtime/transition/index.ts
@@ -1,28 +1,62 @@
-import { cubicOut, cubicInOut } from 'svelte/easing';
+import { cubicOut, cubicInOut, linear } from 'svelte/easing';
import { assign, is_function } from 'svelte/internal';
+type EasingFunction = (t: number) => number;
+
export interface TransitionConfig {
delay?: number;
duration?: number;
- easing?: (t: number) => number;
+ easing?: EasingFunction;
css?: (t: number, u: number) => string;
tick?: (t: number, u: number) => void;
}
+interface BlurParams {
+ delay: number;
+ duration: number;
+ easing?: EasingFunction;
+ amount: number;
+ opacity: number;
+}
+
+export function blur(node: Element, {
+ delay = 0,
+ duration = 400,
+ easing = cubicInOut,
+ amount = 5,
+ opacity = 0
+}: BlurParams): TransitionConfig {
+ const style = getComputedStyle(node);
+ const target_opacity = +style.opacity;
+ const f = style.filter === 'none' ? '' : style.filter;
+
+ const od = target_opacity * (1 - opacity);
+
+ return {
+ delay,
+ duration,
+ easing,
+ css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);`
+ };
+}
+
interface FadeParams {
delay: number;
duration: number;
+ easing: EasingFunction;
}
export function fade(node: Element, {
delay = 0,
- duration = 400
+ duration = 400,
+ easing = linear
}: FadeParams): TransitionConfig {
const o = +getComputedStyle(node).opacity;
return {
delay,
duration,
+ easing,
css: t => `opacity: ${t * o}`
};
}
@@ -30,7 +64,7 @@ export function fade(node: Element, {
interface FlyParams {
delay: number;
duration: number;
- easing: (t: number) => number;
+ easing: EasingFunction;
x: number;
y: number;
opacity: number;
@@ -63,7 +97,7 @@ export function fly(node: Element, {
interface SlideParams {
delay: number;
duration: number;
- easing: (t: number) => number;
+ easing: EasingFunction;
}
export function slide(node: Element, {
@@ -101,7 +135,7 @@ export function slide(node: Element, {
interface ScaleParams {
delay: number;
duration: number;
- easing: (t: number) => number;
+ easing: EasingFunction;
start: number;
opacity: number;
}
@@ -135,7 +169,7 @@ interface DrawParams {
delay: number;
speed: number;
duration: number | ((len: number) => number);
- easing: (t: number) => number;
+ easing: EasingFunction;
}
export function draw(node: SVGElement & { getTotalLength(): number }, {
@@ -167,7 +201,7 @@ export function draw(node: SVGElement & { getTotalLength(): number }, {
interface CrossfadeParams {
delay: number;
duration: number | ((len: number) => number);
- easing: (t: number) => number;
+ easing: EasingFunction;
}
type ClientRectMap = Map;
diff --git a/test/css/index.js b/test/css/index.js
index be2a10bef1..dc17314597 100644
--- a/test/css/index.js
+++ b/test/css/index.js
@@ -1,6 +1,6 @@
import * as assert from 'assert';
import * as fs from 'fs';
-import { env, normalizeHtml, svelte } from '../helpers.js';
+import { env, svelte, setupHtmlEqual, shouldUpdateExpected } from '../helpers.js';
function try_require(file) {
try {
@@ -37,7 +37,11 @@ function create(code) {
}
describe('css', () => {
- fs.readdirSync('test/css/samples').forEach(dir => {
+ before(() => {
+ setupHtmlEqual();
+ });
+
+ fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
if (dir[0] === '.') return;
// add .solo to a sample directory name to only run that test
@@ -51,7 +55,7 @@ describe('css', () => {
(solo ? it.only : skip ? it.skip : it)(dir, () => {
const config = try_require(`./samples/${dir}/_config.js`) || {};
const input = fs
- .readFileSync(`test/css/samples/${dir}/input.svelte`, 'utf-8')
+ .readFileSync(`${__dirname}/samples/${dir}/input.svelte`, 'utf-8')
.replace(/\s+$/, '');
const expected_warnings = (config.warnings || []).map(normalize_warning);
@@ -74,18 +78,42 @@ describe('css', () => {
assert.deepEqual(dom_warnings, ssr_warnings);
assert.deepEqual(dom_warnings.map(normalize_warning), expected_warnings);
- fs.writeFileSync(`test/css/samples/${dir}/_actual.css`, dom.css.code);
+ fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.css`, dom.css.code);
const expected = {
- html: read(`test/css/samples/${dir}/expected.html`),
- css: read(`test/css/samples/${dir}/expected.css`)
+ html: read(`${__dirname}/samples/${dir}/expected.html`),
+ css: read(`${__dirname}/samples/${dir}/expected.css`)
};
- assert.equal(dom.css.code.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz'), expected.css);
+ const actual_css = dom.css.code.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz');
+ try {
+ assert.equal(actual_css, expected.css);
+ } catch (error) {
+ if (shouldUpdateExpected()) {
+ fs.writeFileSync(`${__dirname}/samples/${dir}/expected.css`, actual_css);
+ console.log(`Updated ${dir}/expected.css.`);
+ } else {
+ throw error;
+ }
+ }
+
+ let ClientComponent;
+ let ServerComponent;
// we do this here, rather than in the expected.html !== null
// block, to verify that valid code was generated
- const ClientComponent = create(dom.js.code);
- const ServerComponent = create(ssr.js.code);
+ try {
+ ClientComponent = create(dom.js.code);
+ } catch (err) {
+ console.log(dom.js.code);
+ throw err;
+ }
+
+ try {
+ ServerComponent = create(ssr.js.code);
+ } catch (err) {
+ console.log(dom.js.code);
+ throw err;
+ }
// verify that the right elements have scoping selectors
if (expected.html !== null) {
@@ -98,12 +126,10 @@ describe('css', () => {
new ClientComponent({ target, props: config.props });
const html = target.innerHTML;
- fs.writeFileSync(`test/css/samples/${dir}/_actual.html`, html);
+ fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.html`, html);
- assert.equal(
- normalizeHtml(window, html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz')),
- normalizeHtml(window, expected.html)
- );
+ const actual_html = html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz');
+ assert.htmlEqual(actual_html, expected.html);
window.document.head.innerHTML = ''; // remove added styles
} catch (err) {
@@ -113,13 +139,8 @@ describe('css', () => {
// ssr
try {
- assert.equal(
- normalizeHtml(
- window,
- ServerComponent.render(config.props).html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz')
- ),
- normalizeHtml(window, expected.html)
- );
+ const actual_ssr = ServerComponent.render(config.props).html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz');
+ assert.htmlEqual(actual_ssr, expected.html);
} catch (err) {
console.log(ssr.js.code);
throw err;
diff --git a/test/css/samples/omit-scoping-attribute-global-children/expected.css b/test/css/samples/omit-scoping-attribute-global-children/expected.css
new file mode 100644
index 0000000000..2a7a510449
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-children/expected.css
@@ -0,0 +1 @@
+.root.svelte-xyz p{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global-children/expected.html b/test/css/samples/omit-scoping-attribute-global-children/expected.html
new file mode 100644
index 0000000000..f7ee02fd83
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-children/expected.html
@@ -0,0 +1,4 @@
+
+
+
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global-children/input.svelte b/test/css/samples/omit-scoping-attribute-global-children/input.svelte
new file mode 100644
index 0000000000..5e52d48738
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-children/input.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
diff --git a/test/css/samples/omit-scoping-attribute-global-descendants/expected.css b/test/css/samples/omit-scoping-attribute-global-descendants/expected.css
new file mode 100644
index 0000000000..c1fd7da897
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-descendants/expected.css
@@ -0,0 +1 @@
+html body .root.svelte-xyz p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global-descendants/expected.html b/test/css/samples/omit-scoping-attribute-global-descendants/expected.html
new file mode 100644
index 0000000000..3750091bc7
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-descendants/expected.html
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global-descendants/input.svelte b/test/css/samples/omit-scoping-attribute-global-descendants/input.svelte
new file mode 100644
index 0000000000..7c9782ebad
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-descendants/input.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.css b/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.css
new file mode 100644
index 0000000000..5452f68073
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.css
@@ -0,0 +1 @@
+.root.svelte-xyz p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.html b/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.html
new file mode 100644
index 0000000000..3750091bc7
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.html
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-multiple-descendants/input.svelte b/test/css/samples/omit-scoping-attribute-multiple-descendants/input.svelte
new file mode 100644
index 0000000000..dc77a6c794
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-multiple-descendants/input.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/test/css/samples/supports-charset/expected.css b/test/css/samples/supports-charset/expected.css
new file mode 100644
index 0000000000..55cfd4ea2d
--- /dev/null
+++ b/test/css/samples/supports-charset/expected.css
@@ -0,0 +1 @@
+@charset "utf-8";
\ No newline at end of file
diff --git a/test/css/samples/supports-charset/input.svelte b/test/css/samples/supports-charset/input.svelte
new file mode 100644
index 0000000000..25704d3eb4
--- /dev/null
+++ b/test/css/samples/supports-charset/input.svelte
@@ -0,0 +1,3 @@
+
diff --git a/test/css/samples/supports-font-face/expected.css b/test/css/samples/supports-font-face/expected.css
new file mode 100644
index 0000000000..652ecb1dc2
--- /dev/null
+++ b/test/css/samples/supports-font-face/expected.css
@@ -0,0 +1 @@
+@font-face{font-family:MyHelvetica;src:local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), url(MgOpenModernaBold.ttf);font-weight:bold}
\ No newline at end of file
diff --git a/test/css/samples/supports-font-face/input.svelte b/test/css/samples/supports-font-face/input.svelte
new file mode 100644
index 0000000000..3ed82008bf
--- /dev/null
+++ b/test/css/samples/supports-font-face/input.svelte
@@ -0,0 +1,7 @@
+
diff --git a/test/css/samples/supports-import/expected.css b/test/css/samples/supports-import/expected.css
new file mode 100644
index 0000000000..485d9d272f
--- /dev/null
+++ b/test/css/samples/supports-import/expected.css
@@ -0,0 +1 @@
+@import 'custom.css';@import "common.css" screen;@import url(chrome://communicator/skin/);@import url(fineprint.css) print;@import url(landscape.css) screen and (orientation:landscape);@import url(red.css) (min-width:400px);
\ No newline at end of file
diff --git a/test/css/samples/supports-import/input.svelte b/test/css/samples/supports-import/input.svelte
new file mode 100644
index 0000000000..dccfc4cb95
--- /dev/null
+++ b/test/css/samples/supports-import/input.svelte
@@ -0,0 +1,8 @@
+
diff --git a/test/css/samples/supports-namespace/expected.css b/test/css/samples/supports-namespace/expected.css
new file mode 100644
index 0000000000..7ca9f4f23d
--- /dev/null
+++ b/test/css/samples/supports-namespace/expected.css
@@ -0,0 +1 @@
+@namespace url(http://www.w3.org/1999/xhtml);@namespace svg url(http://www.w3.org/2000/svg);a{color:blue}svg|a{color:green}*|a{color:red}
\ No newline at end of file
diff --git a/test/css/samples/supports-namespace/input.svelte b/test/css/samples/supports-namespace/input.svelte
new file mode 100644
index 0000000000..6322ac6310
--- /dev/null
+++ b/test/css/samples/supports-namespace/input.svelte
@@ -0,0 +1,19 @@
+
diff --git a/test/css/samples/supports-nested-page/expected.css b/test/css/samples/supports-nested-page/expected.css
new file mode 100644
index 0000000000..d526b57989
--- /dev/null
+++ b/test/css/samples/supports-nested-page/expected.css
@@ -0,0 +1 @@
+@page vertical{size:A4 portrait;@top-center{content:"Vertical"}}@page :right{@top-center{content:"Preliminary edition"}@bottom-center{content:counter(page)}}@page :first{color:green;font-size:20pt;@top-left{content:"foo";color:blue}@top-right{content:"bar"}}
\ No newline at end of file
diff --git a/test/css/samples/supports-nested-page/input.svelte b/test/css/samples/supports-nested-page/input.svelte
new file mode 100644
index 0000000000..a36c8263ce
--- /dev/null
+++ b/test/css/samples/supports-nested-page/input.svelte
@@ -0,0 +1,32 @@
+
diff --git a/test/css/samples/supports-page/expected.css b/test/css/samples/supports-page/expected.css
new file mode 100644
index 0000000000..6978c3ecec
--- /dev/null
+++ b/test/css/samples/supports-page/expected.css
@@ -0,0 +1 @@
+@page{margin:1cm;size:A4;bleed:7pt}
\ No newline at end of file
diff --git a/test/css/samples/supports-page/input.svelte b/test/css/samples/supports-page/input.svelte
new file mode 100644
index 0000000000..70c089c356
--- /dev/null
+++ b/test/css/samples/supports-page/input.svelte
@@ -0,0 +1,7 @@
+
diff --git a/test/css/samples/undefined-with-scope/expected.css b/test/css/samples/undefined-with-scope/expected.css
new file mode 100644
index 0000000000..5d8d69ac33
--- /dev/null
+++ b/test/css/samples/undefined-with-scope/expected.css
@@ -0,0 +1 @@
+p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/undefined-with-scope/expected.html b/test/css/samples/undefined-with-scope/expected.html
new file mode 100644
index 0000000000..ddb9429bc8
--- /dev/null
+++ b/test/css/samples/undefined-with-scope/expected.html
@@ -0,0 +1 @@
+Foo
\ No newline at end of file
diff --git a/test/css/samples/undefined-with-scope/input.svelte b/test/css/samples/undefined-with-scope/input.svelte
new file mode 100644
index 0000000000..c68fb40dea
--- /dev/null
+++ b/test/css/samples/undefined-with-scope/input.svelte
@@ -0,0 +1,3 @@
+
+
+Foo
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-string-concat/_config.js b/test/css/samples/unused-selector-string-concat/_config.js
new file mode 100644
index 0000000000..81318fd3ac
--- /dev/null
+++ b/test/css/samples/unused-selector-string-concat/_config.js
@@ -0,0 +1,143 @@
+export default {
+ warnings: [
+ {
+ code: 'css-unused-selector',
+ message: 'Unused CSS selector',
+ frame:
+ ` 9: `,
+ start: { line: 28, column: 2, character: 595 },
+ end: { line: 28, column: 9, character: 602 },
+ pos: 595,
+ },
+ ],
+};
diff --git a/test/css/samples/unused-selector-string-concat/expected.css b/test/css/samples/unused-selector-string-concat/expected.css
new file mode 100644
index 0000000000..756c2eecae
--- /dev/null
+++ b/test/css/samples/unused-selector-string-concat/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}.foocc.svelte-xyz{color:red}.aa.svelte-xyz{color:red}.bb.svelte-xyz{color:red}.cc.svelte-xyz{color:red}.dd.svelte-xyz{color:red}.aabar.svelte-xyz{color:red}.fooddbar.svelte-xyz{color:red}.baz.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-string-concat/input.svelte b/test/css/samples/unused-selector-string-concat/input.svelte
new file mode 100644
index 0000000000..0f69463e78
--- /dev/null
+++ b/test/css/samples/unused-selector-string-concat/input.svelte
@@ -0,0 +1,29 @@
+
+
+
+ some stuff
+
+
+
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-bailed/_config.js b/test/css/samples/unused-selector-ternary-bailed/_config.js
new file mode 100644
index 0000000000..e5f82e4a85
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-bailed/_config.js
@@ -0,0 +1,3 @@
+export default {
+ warnings: [],
+};
diff --git a/test/css/samples/unused-selector-ternary-bailed/expected.css b/test/css/samples/unused-selector-ternary-bailed/expected.css
new file mode 100644
index 0000000000..042d33f3cc
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-bailed/expected.css
@@ -0,0 +1 @@
+.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}.hover.svelte-xyz{color:blue}.hover.unused.svelte-xyz{color:blue}.unused.svelte-xyz{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-bailed/input.svelte b/test/css/samples/unused-selector-ternary-bailed/input.svelte
new file mode 100644
index 0000000000..f9af44ec8b
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-bailed/input.svelte
@@ -0,0 +1,18 @@
+
+
+
+ some stuff
+
+
+
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-concat/_config.js b/test/css/samples/unused-selector-ternary-concat/_config.js
new file mode 100644
index 0000000000..5015fccb25
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-concat/_config.js
@@ -0,0 +1,25 @@
+export default {
+ warnings: [
+ {
+ code: 'css-unused-selector',
+ end: {
+ character: 205,
+ column: 9,
+ line: 14,
+ },
+ frame: `
+ 12: .thing.active {color: blue;}
+ 13:
+ 14: .unused {color: blue;}
+ ^
+ 15: `,
+ message: 'Unused CSS selector',
+ pos: 198,
+ start: {
+ character: 198,
+ column: 2,
+ line: 14,
+ },
+ },
+ ],
+};
diff --git a/test/css/samples/unused-selector-ternary-concat/expected.css b/test/css/samples/unused-selector-ternary-concat/expected.css
new file mode 100644
index 0000000000..8142a20e83
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-concat/expected.css
@@ -0,0 +1 @@
+.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-concat/input.svelte b/test/css/samples/unused-selector-ternary-concat/input.svelte
new file mode 100644
index 0000000000..8db417c928
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-concat/input.svelte
@@ -0,0 +1,15 @@
+
+
+
+ some stuff
+
+
+
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-nested/_config.js b/test/css/samples/unused-selector-ternary-nested/_config.js
new file mode 100644
index 0000000000..afee5ac822
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-nested/_config.js
@@ -0,0 +1,31 @@
+export default {
+ warnings: [
+ {
+ code: 'css-unused-selector',
+ message: 'Unused CSS selector',
+ frame: `
+ 13: .thing.active {color: blue;}
+ 14: .hover { color: blue; }
+ 15: .hover.unused { color: blue; }
+ ^
+ 16:
+ 17: .unused {color: blue;}`,
+ start: { line: 15, column: 2, character: 261 },
+ end: { line: 15, column: 15, character: 274 },
+ pos: 261,
+ },
+ {
+ code: 'css-unused-selector',
+ message: 'Unused CSS selector',
+ frame: `
+ 15: .hover.unused { color: blue; }
+ 16:
+ 17: .unused {color: blue;}
+ ^
+ 18: `,
+ start: { line: 17, column: 2, character: 295 },
+ end: { line: 17, column: 9, character: 302 },
+ pos: 295,
+ },
+ ],
+};
diff --git a/test/css/samples/unused-selector-ternary-nested/expected.css b/test/css/samples/unused-selector-ternary-nested/expected.css
new file mode 100644
index 0000000000..85a95ad23e
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-nested/expected.css
@@ -0,0 +1 @@
+.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}.hover.svelte-xyz{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-nested/input.svelte b/test/css/samples/unused-selector-ternary-nested/input.svelte
new file mode 100644
index 0000000000..a7a8f0e02a
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-nested/input.svelte
@@ -0,0 +1,18 @@
+
+
+
+ some stuff
+
+
+
\ No newline at end of file
diff --git a/test/css/samples/weird-selectors/expected.css b/test/css/samples/weird-selectors/expected.css
new file mode 100644
index 0000000000..d4ead16751
--- /dev/null
+++ b/test/css/samples/weird-selectors/expected.css
@@ -0,0 +1 @@
+.-foo.svelte-xyz{color:red}[title='['].svelte-xyz{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/weird-selectors/input.svelte b/test/css/samples/weird-selectors/input.svelte
new file mode 100644
index 0000000000..65db029bbd
--- /dev/null
+++ b/test/css/samples/weird-selectors/input.svelte
@@ -0,0 +1,12 @@
+foo
+
+bar
+
+
diff --git a/test/custom-elements/assert.js b/test/custom-elements/assert.js
index 79aba6c736..0edbd31124 100644
--- a/test/custom-elements/assert.js
+++ b/test/custom-elements/assert.js
@@ -1,3 +1,29 @@
+export function deepEqual(a, b, message) {
+ if (!is_equal(a, b)) {
+ throw new Error(message || `Expected ${JSON.stringify(a)} to equal ${JSON.stringify(b)}`);
+ }
+}
+
+function is_equal(a, b) {
+ if (a && typeof a === 'object') {
+ const is_array = Array.isArray(a);
+ if (Array.isArray(b) !== is_array) return false;
+
+ if (is_array) {
+ if (a.length !== b.length) return false;
+ return a.every((value, i) => is_equal(value, b[i]));
+ }
+
+ const a_keys = Object.keys(a).sort();
+ const b_keys = Object.keys(b).sort();
+ if (a_keys.join(',') !== b_keys.join(',')) return false;
+
+ return a_keys.every(key => is_equal(a[key], b[key]));
+ }
+
+ return a === b;
+}
+
export function equal(a, b, message) {
if (a != b) throw new Error(message || `Expected ${a} to equal ${b}`);
}
diff --git a/test/custom-elements/index.js b/test/custom-elements/index.js
index 9255d33c0e..5d2847bfab 100644
--- a/test/custom-elements/index.js
+++ b/test/custom-elements/index.js
@@ -14,7 +14,7 @@ const page = `