Examples
+ + {#each groups as group} +{group.title}
+ +
+ {#each group.examples as example}
+
+
+ {example.title}
+
+ {/each}
+
+ The answer is {answer}
\ No newline at end of file diff --git a/site/content/examples/02-props/00-declaring-props/meta.json b/site/content/examples/02-props/00-declaring-props/meta.json new file mode 100644 index 0000000000..485c2708bd --- /dev/null +++ b/site/content/examples/02-props/00-declaring-props/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Declaring props" +} \ No newline at end of file diff --git a/site/content/examples/02-props/01-default-values/App.svelte b/site/content/examples/02-props/01-default-values/App.svelte new file mode 100644 index 0000000000..f9d63b30d6 --- /dev/null +++ b/site/content/examples/02-props/01-default-values/App.svelte @@ -0,0 +1,6 @@ + + +The answer is {answer}
\ No newline at end of file diff --git a/site/content/examples/02-props/01-default-values/meta.json b/site/content/examples/02-props/01-default-values/meta.json new file mode 100644 index 0000000000..f690d64349 --- /dev/null +++ b/site/content/examples/02-props/01-default-values/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Default values" +} \ No newline at end of file diff --git a/site/content/examples/02-props/02-spread-props/App.svelte b/site/content/examples/02-props/02-spread-props/App.svelte new file mode 100644 index 0000000000..f40d3b89c8 --- /dev/null +++ b/site/content/examples/02-props/02-spread-props/App.svelte @@ -0,0 +1,12 @@ + + +
+ The {name} package is {speed} fast.
+ Download version {version} from npm
+ and learn more here
+
{x} is greater than 10
+{:else if 5 > x} +{x} is less than 5
+{:else} +{x} is between 5 and 10
+{/if} \ No newline at end of file diff --git a/site/content/examples/03-logic/02-else-if-blocks/meta.json b/site/content/examples/03-logic/02-else-if-blocks/meta.json new file mode 100644 index 0000000000..c778d9f48b --- /dev/null +++ b/site/content/examples/03-logic/02-else-if-blocks/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Else-if blocks" +} \ No newline at end of file diff --git a/site/content/examples/03-logic/03-each-blocks/App.svelte b/site/content/examples/03-logic/03-each-blocks/App.svelte new file mode 100644 index 0000000000..6ea5097be2 --- /dev/null +++ b/site/content/examples/03-logic/03-each-blocks/App.svelte @@ -0,0 +1,17 @@ + + +The Famous Cats of YouTube
+ +-
+ {#each cats as { id, name }, i}
+
- + {i + 1}: {name} + + {/each} +
{valueAtStart} / {value}
\ No newline at end of file diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/meta.json b/site/content/examples/03-logic/04-keyed-each-blocks/meta.json new file mode 100644 index 0000000000..faee8bff8d --- /dev/null +++ b/site/content/examples/03-logic/04-keyed-each-blocks/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Keyed each blocks" +} \ No newline at end of file diff --git a/site/content/examples/03-logic/05-await-blocks/App.svelte b/site/content/examples/03-logic/05-await-blocks/App.svelte new file mode 100644 index 0000000000..8c8036c0f1 --- /dev/null +++ b/site/content/examples/03-logic/05-await-blocks/App.svelte @@ -0,0 +1,30 @@ + + + + +{#await promise} +...waiting
+{:then number} +The number is {number}
+{:catch error} +{error.message}
+{/await} \ No newline at end of file diff --git a/site/content/examples/03-logic/05-await-blocks/meta.json b/site/content/examples/03-logic/05-await-blocks/meta.json new file mode 100644 index 0000000000..c7a809f5ed --- /dev/null +++ b/site/content/examples/03-logic/05-await-blocks/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Await blocks" +} \ No newline at end of file diff --git a/site/content/examples/03-logic/meta.json b/site/content/examples/03-logic/meta.json new file mode 100644 index 0000000000..3ecf1ccee2 --- /dev/null +++ b/site/content/examples/03-logic/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Logic" +} \ No newline at end of file diff --git a/site/content/examples/04-events/00-dom-events/App.svelte b/site/content/examples/04-events/00-dom-events/App.svelte new file mode 100644 index 0000000000..f26112f06c --- /dev/null +++ b/site/content/examples/04-events/00-dom-events/App.svelte @@ -0,0 +1,16 @@ + + + + +
+ The mouse position is {m.x} x {m.y}
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/00-dom-events/meta.json b/site/content/examples/04-events/00-dom-events/meta.json
new file mode 100644
index 0000000000..5b3e37e41f
--- /dev/null
+++ b/site/content/examples/04-events/00-dom-events/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "DOM events"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/01-inline-handlers/App.svelte b/site/content/examples/04-events/01-inline-handlers/App.svelte
new file mode 100644
index 0000000000..f0fd6ff17a
--- /dev/null
+++ b/site/content/examples/04-events/01-inline-handlers/App.svelte
@@ -0,0 +1,11 @@
+
+
+
+
+
+ The mouse position is {m.x} x {m.y}
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/01-inline-handlers/meta.json b/site/content/examples/04-events/01-inline-handlers/meta.json
new file mode 100644
index 0000000000..575b9ab2b6
--- /dev/null
+++ b/site/content/examples/04-events/01-inline-handlers/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Inline handlers"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/02-event-modifiers/App.svelte b/site/content/examples/04-events/02-event-modifiers/App.svelte
new file mode 100644
index 0000000000..94df49cb2d
--- /dev/null
+++ b/site/content/examples/04-events/02-event-modifiers/App.svelte
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/02-event-modifiers/meta.json b/site/content/examples/04-events/02-event-modifiers/meta.json
new file mode 100644
index 0000000000..322bb5ba5e
--- /dev/null
+++ b/site/content/examples/04-events/02-event-modifiers/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Event modifiers"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/03-component-events/App.svelte b/site/content/examples/04-events/03-component-events/App.svelte
new file mode 100644
index 0000000000..a8d14a368a
--- /dev/null
+++ b/site/content/examples/04-events/03-component-events/App.svelte
@@ -0,0 +1,9 @@
+
+
+Hello {name || 'stranger'}!
\ No newline at end of file diff --git a/site/content/examples/05-bindings/00-text-inputs/meta.json b/site/content/examples/05-bindings/00-text-inputs/meta.json new file mode 100644 index 0000000000..45577af5be --- /dev/null +++ b/site/content/examples/05-bindings/00-text-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Text inputs" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/01-numeric-inputs/App.svelte b/site/content/examples/05-bindings/01-numeric-inputs/App.svelte new file mode 100644 index 0000000000..798d57e021 --- /dev/null +++ b/site/content/examples/05-bindings/01-numeric-inputs/App.svelte @@ -0,0 +1,16 @@ + + + + + + +{a} + {b} = {a + b}
\ No newline at end of file diff --git a/site/content/examples/05-bindings/01-numeric-inputs/meta.json b/site/content/examples/05-bindings/01-numeric-inputs/meta.json new file mode 100644 index 0000000000..72f8579704 --- /dev/null +++ b/site/content/examples/05-bindings/01-numeric-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Numeric inputs" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte new file mode 100644 index 0000000000..b82d31e783 --- /dev/null +++ b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte @@ -0,0 +1,18 @@ + + + + +{#if yes} +Thank you. We will bombard your inbox and sell your personal details.
+{:else} +You must opt in to continue. If you're not paying, you're the product.
+{/if} + + \ No newline at end of file diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/meta.json b/site/content/examples/05-bindings/02-checkbox-inputs/meta.json new file mode 100644 index 0000000000..723312a3d9 --- /dev/null +++ b/site/content/examples/05-bindings/02-checkbox-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Checkbox inputs" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/03-group-inputs/App.svelte b/site/content/examples/05-bindings/03-group-inputs/App.svelte new file mode 100644 index 0000000000..a46c61c7e7 --- /dev/null +++ b/site/content/examples/05-bindings/03-group-inputs/App.svelte @@ -0,0 +1,52 @@ + + +Size
+ + + + + + + +Flavours
+ +{#each menu as flavour} + +{/each} + +{#if flavours.length === 0} +Please select at least one flavour
+{:else if flavours.length > scoops} +Can't order more flavours than scoops!
+{:else} ++ You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} + of {join(flavours)} +
+{/if} diff --git a/site/content/examples/05-bindings/03-group-inputs/meta.json b/site/content/examples/05-bindings/03-group-inputs/meta.json new file mode 100644 index 0000000000..2203d6e6fa --- /dev/null +++ b/site/content/examples/05-bindings/03-group-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Group inputs" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/04-textarea-inputs/App.svelte b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte new file mode 100644 index 0000000000..be338bf47f --- /dev/null +++ b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte @@ -0,0 +1,12 @@ + + + + + + +{@html marked(value)} \ No newline at end of file diff --git a/site/content/examples/05-bindings/04-textarea-inputs/meta.json b/site/content/examples/05-bindings/04-textarea-inputs/meta.json new file mode 100644 index 0000000000..01adf6b5cf --- /dev/null +++ b/site/content/examples/05-bindings/04-textarea-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Textarea inputs" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/05-select-bindings/App.svelte b/site/content/examples/05-bindings/05-select-bindings/App.svelte new file mode 100644 index 0000000000..3f1e7fa7e1 --- /dev/null +++ b/site/content/examples/05-bindings/05-select-bindings/App.svelte @@ -0,0 +1,39 @@ + + + + +Insecurity questions
+ + + +selected question {selected ? selected.id : '[waiting...]'}
\ No newline at end of file diff --git a/site/content/examples/05-bindings/05-select-bindings/meta.json b/site/content/examples/05-bindings/05-select-bindings/meta.json new file mode 100644 index 0000000000..fe170eb0fc --- /dev/null +++ b/site/content/examples/05-bindings/05-select-bindings/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Select bindings" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte b/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte new file mode 100644 index 0000000000..d808850158 --- /dev/null +++ b/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte @@ -0,0 +1,53 @@ + + +Size
+ + + + + + + +Flavours
+ + + +{#if flavours.length === 0} +Please select at least one flavour
+{:else if flavours.length > scoops} +Can't order more flavours than scoops!
+{:else} ++ You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} + of {join(flavours)} +
+{/if} diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json b/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json new file mode 100644 index 0000000000..abf7635407 --- /dev/null +++ b/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Select multiple" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/07-each-block-bindings/App.svelte b/site/content/examples/05-bindings/07-each-block-bindings/App.svelte new file mode 100644 index 0000000000..92bdc7754f --- /dev/null +++ b/site/content/examples/05-bindings/07-each-block-bindings/App.svelte @@ -0,0 +1,39 @@ + + +Todos
+ +{#each todos as todo} +
+
+
+
+
+{/each}
+
+
+
+
diff --git a/site/content/examples/05-bindings/07-each-block-bindings/meta.json b/site/content/examples/05-bindings/07-each-block-bindings/meta.json
new file mode 100644
index 0000000000..2d27051b49
--- /dev/null
+++ b/site/content/examples/05-bindings/07-each-block-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Each block bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/08-media-elements/App.svelte b/site/content/examples/05-bindings/08-media-elements/App.svelte
new file mode 100644
index 0000000000..2cf819fca0
--- /dev/null
+++ b/site/content/examples/05-bindings/08-media-elements/App.svelte
@@ -0,0 +1,130 @@
+
+
+
+
+Caminandes: Llamigos
+From Blender Open Projects. CC-BY
+ +
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/08-media-elements/meta.json b/site/content/examples/05-bindings/08-media-elements/meta.json
new file mode 100644
index 0000000000..4e40a6acee
--- /dev/null
+++ b/site/content/examples/05-bindings/08-media-elements/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Media elements"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/09-dimensions/App.svelte b/site/content/examples/05-bindings/09-dimensions/App.svelte
new file mode 100644
index 0000000000..ca992599c1
--- /dev/null
+++ b/site/content/examples/05-bindings/09-dimensions/App.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {format(time)}
+ click anywhere to {paused ? 'play' : 'pause'} / drag to seek
+ {format(duration)}
+
+ size: {w}px x {h}px
+ +
+ {text}
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/09-dimensions/meta.json b/site/content/examples/05-bindings/09-dimensions/meta.json
new file mode 100644
index 0000000000..9f8b6602c7
--- /dev/null
+++ b/site/content/examples/05-bindings/09-dimensions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Dimensions"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/10-bind-this/App.svelte b/site/content/examples/05-bindings/10-bind-this/App.svelte
new file mode 100644
index 0000000000..eacd203629
--- /dev/null
+++ b/site/content/examples/05-bindings/10-bind-this/App.svelte
@@ -0,0 +1,59 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/10-bind-this/meta.json b/site/content/examples/05-bindings/10-bind-this/meta.json
new file mode 100644
index 0000000000..da5ce399ab
--- /dev/null
+++ b/site/content/examples/05-bindings/10-bind-this/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "bind:this={canvas}"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-component-bindings/App.svelte b/site/content/examples/05-bindings/11-component-bindings/App.svelte
new file mode 100644
index 0000000000..67fec4a5ad
--- /dev/null
+++ b/site/content/examples/05-bindings/11-component-bindings/App.svelte
@@ -0,0 +1,14 @@
+
+
+{view}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-component-bindings/meta.json b/site/content/examples/05-bindings/11-component-bindings/meta.json
new file mode 100644
index 0000000000..4c921d0e8a
--- /dev/null
+++ b/site/content/examples/05-bindings/11-component-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Component bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/meta.json b/site/content/examples/05-bindings/meta.json
new file mode 100644
index 0000000000..8bb0142ecc
--- /dev/null
+++ b/site/content/examples/05-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte
new file mode 100644
index 0000000000..1b83727627
--- /dev/null
+++ b/site/content/examples/06-lifecycle/00-onmount/App.svelte
@@ -0,0 +1,38 @@
+
+
+
+
+Photo album
+ +
+ {#each photos as photo}
+
+ 
+ {photo.title}
+
+ {:else}
+
+
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/00-onmount/meta.json b/site/content/examples/06-lifecycle/00-onmount/meta.json
new file mode 100644
index 0000000000..3b2799c5bc
--- /dev/null
+++ b/site/content/examples/06-lifecycle/00-onmount/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "onMount"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/01-ondestroy/App.svelte b/site/content/examples/06-lifecycle/01-ondestroy/App.svelte
new file mode 100644
index 0000000000..93a721ef44
--- /dev/null
+++ b/site/content/examples/06-lifecycle/01-ondestroy/App.svelte
@@ -0,0 +1,11 @@
+
+
+loading...
+ {/each} ++ The page has been open for + {seconds} {seconds === 1 ? 'second' : 'seconds'} +
\ No newline at end of file diff --git a/site/content/examples/06-lifecycle/01-ondestroy/meta.json b/site/content/examples/06-lifecycle/01-ondestroy/meta.json new file mode 100644 index 0000000000..d87febd1a5 --- /dev/null +++ b/site/content/examples/06-lifecycle/01-ondestroy/meta.json @@ -0,0 +1,3 @@ +{ + "title": "onDestroy" +} \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/01-ondestroy/utils.js b/site/content/examples/06-lifecycle/01-ondestroy/utils.js new file mode 100644 index 0000000000..0f75f29e2a --- /dev/null +++ b/site/content/examples/06-lifecycle/01-ondestroy/utils.js @@ -0,0 +1,9 @@ +import { onDestroy } from 'svelte'; + +export function onInterval(callback, milliseconds) { + const interval = setInterval(callback, milliseconds); + + onDestroy(() => { + clearInterval(interval); + }); +} \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/02-update/App.svelte b/site/content/examples/06-lifecycle/02-update/App.svelte new file mode 100644 index 0000000000..373b6dcb6a --- /dev/null +++ b/site/content/examples/06-lifecycle/02-update/App.svelte @@ -0,0 +1,106 @@ + + + + +
+
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/02-update/meta.json b/site/content/examples/06-lifecycle/02-update/meta.json
new file mode 100644
index 0000000000..c92a6db8dc
--- /dev/null
+++ b/site/content/examples/06-lifecycle/02-update/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "beforeUpdate and afterUpdate"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/03-tick/App.svelte b/site/content/examples/06-lifecycle/03-tick/App.svelte
new file mode 100644
index 0000000000..c9cb6de420
--- /dev/null
+++ b/site/content/examples/06-lifecycle/03-tick/App.svelte
@@ -0,0 +1,37 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/03-tick/meta.json b/site/content/examples/06-lifecycle/03-tick/meta.json
new file mode 100644
index 0000000000..0a406e13aa
--- /dev/null
+++ b/site/content/examples/06-lifecycle/03-tick/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "tick"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/meta.json b/site/content/examples/06-lifecycle/meta.json
new file mode 100644
index 0000000000..2f833e2a4a
--- /dev/null
+++ b/site/content/examples/06-lifecycle/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Lifecycle"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/App.svelte b/site/content/examples/07-stores/00-writable-stores/App.svelte
new file mode 100644
index 0000000000..ee542f789d
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/App.svelte
@@ -0,0 +1,18 @@
+
+
+Eliza
+ +
+ {#each comments as comment}
+
+ {comment.text}
+
+ {/each}
+
+
+
+The count is {count_value}
+ +The count is {$count}
+ +The time is {formatter.format($time)}
\ No newline at end of file diff --git a/site/content/examples/07-stores/02-readable-stores/meta.json b/site/content/examples/07-stores/02-readable-stores/meta.json new file mode 100644 index 0000000000..3f420cafd8 --- /dev/null +++ b/site/content/examples/07-stores/02-readable-stores/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Readable stores" +} \ No newline at end of file diff --git a/site/content/examples/07-stores/02-readable-stores/stores.js b/site/content/examples/07-stores/02-readable-stores/stores.js new file mode 100644 index 0000000000..015de5ad45 --- /dev/null +++ b/site/content/examples/07-stores/02-readable-stores/stores.js @@ -0,0 +1,11 @@ +import { readable } from 'svelte/store'; + +export const time = readable(function start(set) { + const interval = setInterval(() => { + set(new Date()); + }, 1000); + + return function stop() { + clearInterval(interval); + }; +}, new Date()); \ No newline at end of file diff --git a/site/content/examples/07-stores/03-derived-stores/App.svelte b/site/content/examples/07-stores/03-derived-stores/App.svelte new file mode 100644 index 0000000000..8182ecd671 --- /dev/null +++ b/site/content/examples/07-stores/03-derived-stores/App.svelte @@ -0,0 +1,17 @@ + + +The time is {formatter.format($time)}
+ ++ This page has been open for + {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'} +
\ No newline at end of file diff --git a/site/content/examples/07-stores/03-derived-stores/meta.json b/site/content/examples/07-stores/03-derived-stores/meta.json new file mode 100644 index 0000000000..23105b0bfa --- /dev/null +++ b/site/content/examples/07-stores/03-derived-stores/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Derived stores" +} \ No newline at end of file diff --git a/site/content/examples/07-stores/03-derived-stores/stores.js b/site/content/examples/07-stores/03-derived-stores/stores.js new file mode 100644 index 0000000000..2f3af1247a --- /dev/null +++ b/site/content/examples/07-stores/03-derived-stores/stores.js @@ -0,0 +1,18 @@ +import { readable, derive } from 'svelte/store'; + +export const time = readable(function start(set) { + const interval = setInterval(() => { + set(new Date()); + }, 1000); + + return function stop() { + clearInterval(interval); + }; +}, new Date()); + +const start = new Date(); + +export const elapsed = derive( + time, + $time => Math.round(($time - start) / 1000) +); \ No newline at end of file diff --git a/site/content/examples/07-stores/04-custom-stores/App.svelte b/site/content/examples/07-stores/04-custom-stores/App.svelte new file mode 100644 index 0000000000..a320cc052f --- /dev/null +++ b/site/content/examples/07-stores/04-custom-stores/App.svelte @@ -0,0 +1,9 @@ + + +The count is {$count}
+ + + + \ No newline at end of file diff --git a/site/content/examples/07-stores/04-custom-stores/meta.json b/site/content/examples/07-stores/04-custom-stores/meta.json new file mode 100644 index 0000000000..7394c55f28 --- /dev/null +++ b/site/content/examples/07-stores/04-custom-stores/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Custom stores" +} \ No newline at end of file diff --git a/site/content/examples/07-stores/04-custom-stores/stores.js b/site/content/examples/07-stores/04-custom-stores/stores.js new file mode 100644 index 0000000000..5a26025b03 --- /dev/null +++ b/site/content/examples/07-stores/04-custom-stores/stores.js @@ -0,0 +1,14 @@ +import { writable } from 'svelte/store'; + +function createCount() { + const { subscribe, set, update } = writable(0); + + return { + subscribe, + increment: () => update(n => n + 1), + decrement: () => update(n => n - 1), + reset: () => set(0) + }; +} + +export const count = createCount(); \ No newline at end of file diff --git a/site/content/examples/07-stores/meta.json b/site/content/examples/07-stores/meta.json new file mode 100644 index 0000000000..ad974de0d9 --- /dev/null +++ b/site/content/examples/07-stores/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Stores" +} \ No newline at end of file diff --git a/site/content/examples/08-motion/00-tweened/App.svelte b/site/content/examples/08-motion/00-tweened/App.svelte new file mode 100644 index 0000000000..83f3b50a04 --- /dev/null +++ b/site/content/examples/08-motion/00-tweened/App.svelte @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/content/examples/08-motion/00-tweened/meta.json b/site/content/examples/08-motion/00-tweened/meta.json new file mode 100644 index 0000000000..39d3af7f38 --- /dev/null +++ b/site/content/examples/08-motion/00-tweened/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Tweened" +} \ No newline at end of file diff --git a/site/content/examples/motion-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte similarity index 53% rename from site/content/examples/motion-spring/App.svelte rename to site/content/examples/08-motion/01-spring/App.svelte index ae90d7cc8d..2cb0fd1eb7 100644 --- a/site/content/examples/motion-spring/App.svelte +++ b/site/content/examples/08-motion/01-spring/App.svelte @@ -1,43 +1,20 @@ -
+
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/site/content/examples/08-motion/01-spring/meta.json b/site/content/examples/08-motion/01-spring/meta.json
new file mode 100644
index 0000000000..f871fea53e
--- /dev/null
+++ b/site/content/examples/08-motion/01-spring/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Spring"
+}
\ No newline at end of file
diff --git a/site/content/examples/08-motion/meta.json b/site/content/examples/08-motion/meta.json
new file mode 100644
index 0000000000..e6fa83cd7f
--- /dev/null
+++ b/site/content/examples/08-motion/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Motion"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/00-transition/App.svelte b/site/content/examples/09-transitions/00-transition/App.svelte
new file mode 100644
index 0000000000..b7909fb86e
--- /dev/null
+++ b/site/content/examples/09-transitions/00-transition/App.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+{#if visible}
+
diff --git a/site/src/components/TopNav.svelte b/site/src/components/TopNav.svelte
index c9945b912b..d1e4db6d31 100644
--- a/site/src/components/TopNav.svelte
+++ b/site/src/components/TopNav.svelte
@@ -156,23 +156,6 @@
height: 2rem;
}
- .menu-link {
- cursor: pointer;
- -webkit-tap-highlight-color: transparent;
- -webkit-touch-callout: none;
- }
-
- .logo {
- position: relative;
- top: .3rem;
- width: 18rem;
- color: var(--second);
- -webkit-tap-highlight-color: transparent;
- -webkit-touch-callout: none;
- z-index: 11;
- padding: 0.5em 0;
- }
-
.home {
position: relative;
top: 0;
@@ -190,7 +173,7 @@
color: var(--prime)
}
- @media (min-width: 768px) {
+ @media (min-width: 840px) {
ul {
padding: 0;
background: none;
@@ -244,7 +227,9 @@
on:mouseleave="{() => open = false}"
>
- Guide
+ Tutorial
+ API Docs
+ Examples
REPL
Blog
Sapper
diff --git a/site/src/routes/_layout.svelte b/site/src/routes/_layout.svelte
index b9cc668e95..386c27ac39 100644
--- a/site/src/routes/_layout.svelte
+++ b/site/src/routes/_layout.svelte
@@ -1,18 +1,19 @@
-
+
+
-
-
-
-{:elseif embedded}
-
-
-
-
-
-{/if}
diff --git a/site/src/routes/repl/_components/Repl.svelte b/site/src/routes/repl/_components/Repl.svelte
deleted file mode 100644
index 318ba0d5e8..0000000000
--- a/site/src/routes/repl/_components/Repl.svelte
+++ /dev/null
@@ -1,321 +0,0 @@
-
-
-
-
-
diff --git a/site/src/routes/repl/_utils/process_example.js b/site/src/routes/repl/_utils/process_example.js
new file mode 100644
index 0000000000..fc61d79ad3
--- /dev/null
+++ b/site/src/routes/repl/_utils/process_example.js
@@ -0,0 +1,16 @@
+export function process_example(files) {
+ return files
+ .map(file => {
+ const [name, type] = file.name.split('.');
+ return { name, type, source: file.source };
+ })
+ .sort((a, b) => {
+ if (a.name === 'App' && a.type === 'svelte') return -1;
+ if (b.name === 'App' && b.type === 'svelte') return 1;
+
+ if (a.type === b.type) return a.name < b.name ? -1 : 1;
+
+ if (a.type === 'svelte') return -1;
+ if (b.type === 'svelte') return 1;
+ });
+}
\ No newline at end of file
diff --git a/site/src/routes/repl/_utils/replProxy.js b/site/src/routes/repl/_utils/replProxy.js
deleted file mode 100644
index 4025dffe6b..0000000000
--- a/site/src/routes/repl/_utils/replProxy.js
+++ /dev/null
@@ -1,90 +0,0 @@
-export default class ReplProxy {
- constructor(iframe) {
- this.iframe = iframe;
- this.cmdId = 1;
- this.pendingCmds = new Map();
- this.onPropUpdate = null;
- this.onFetchProgress = null;
- this.handle_event = (ev) => this.handleReplMessage(ev);
- window.addEventListener("message", this.handle_event, false);
- }
-
- destroy() {
- window.removeEventListener("message", this.handle_event);
- }
-
- iframeCommand(command, args) {
- return new Promise( (resolve, reject) => {
- this.cmdId = this.cmdId + 1;
- this.pendingCmds.set(this.cmdId, { resolve: resolve, reject: reject });
- this.iframe.contentWindow.postMessage({
- action: command,
- cmdId: this.cmdId,
- args: args
- }, '*')
- });
- }
-
- handleCommandMessage(cmdData) {
- let action = cmdData.action;
- let id = cmdData.cmdId;
- let handler = this.pendingCmds.get(id);
- if (handler) {
-
- this.pendingCmds.delete(id);
- if (action == "cmdError") {
- let { message, stack } = cmdData;
- let e = new Error(message);
- e.stack = stack;
- console.log("repl cmd fail");
- handler.reject(e)
- }
-
- if (action == "cmdOk") {
- handler.resolve(cmdData.args)
- }
- } else {
- console.error("command not found", id, cmdData, [...this.pendingCmds.keys()]);
- }
- }
-
- handleReplMessage(ev) {
-
- let action = ev.data.action;
- if ( action == "cmdError" || action == "cmdOk" ) {
- this.handleCommandMessage(ev.data);
- }
-
- if (action == "prop_update") {
- let { prop, value } = ev.data.args;
- if (this.onPropUpdate)
- this.onPropUpdate(prop, value)
- }
-
- if (action == "fetch_progress") {
- if (this.onFetchProgress)
- this.onFetchProgress(ev.data.args.remaining)
- }
- }
-
- eval(script) {
- return this.iframeCommand("eval", { script: script });
- }
-
- setProp(prop, value) {
- return this.iframeCommand("set_prop", {prop, value})
- }
-
- bindProps(props) {
- return this.iframeCommand("bind_props", { props: props })
- }
-
- handleLinks() {
- return this.iframeCommand("catch_clicks", {});
- }
-
- fetchImports(bundle) {
- return this.iframeCommand("fetch_imports", { bundle })
- }
-
-}
\ No newline at end of file
diff --git a/site/src/routes/repl/embed.svelte b/site/src/routes/repl/embed.svelte
index c9eb0a08ea..9cc680afb0 100644
--- a/site/src/routes/repl/embed.svelte
+++ b/site/src/routes/repl/embed.svelte
@@ -3,23 +3,19 @@
return {
version: query.version || 'beta',
gist: query.gist,
- demo: query.demo
+ example: query.example
};
}
+
+
\ No newline at end of file
diff --git a/site/src/routes/tutorial/[slug]/index.json.js b/site/src/routes/tutorial/[slug]/index.json.js
new file mode 100644
index 0000000000..a44685530d
--- /dev/null
+++ b/site/src/routes/tutorial/[slug]/index.json.js
@@ -0,0 +1,111 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import marked from 'marked';
+import PrismJS from 'prismjs';
+import { extract_frontmatter, extract_metadata, langs } from '../../../utils/markdown';
+
+const cache = new Map();
+
+function find_tutorial(slug) {
+ const sections = fs.readdirSync(`content/tutorial`);
+
+ for (const section of sections) {
+ const chapters = fs.readdirSync(`content/tutorial/${section}`).filter(dir => /^\d+/.test(dir));
+ for (const chapter of chapters) {
+ if (slug === chapter.replace(/^\d+-/, '')) {
+ return { section, chapter };
+ }
+ }
+ }
+}
+
+function get_tutorial(slug) {
+ const found = find_tutorial(slug);
+ if (!found) return found;
+
+ const dir = `content/tutorial/${found.section}/${found.chapter}`;
+
+ const markdown = fs.readFileSync(`${dir}/text.md`, 'utf-8');
+ const app_a = fs.readdirSync(`${dir}/app-a`);
+ const app_b = fs.existsSync(`${dir}/app-b`) && fs.readdirSync(`${dir}/app-b`);
+
+ const { content } = extract_frontmatter(markdown);
+
+ const renderer = new marked.Renderer();
+
+ renderer.code = (source, lang) => {
+ source = source.replace(/^ +/gm, match =>
+ match.split(' ').join('\t')
+ );
+
+ const lines = source.split('\n');
+
+ const meta = extract_metadata(lines[0], lang);
+
+ let prefix = '';
+ let className = 'code-block';
+
+ if (meta) {
+ source = lines.slice(1).join('\n');
+ const filename = meta.filename || (lang === 'html' && 'App.svelte');
+ if (filename) {
+ prefix = `${prefix} ${filename}`;
+ className += ' named';
+ }
+ }
+
+ const plang = langs[lang];
+ const highlighted = PrismJS.highlight(
+ source,
+ PrismJS.languages[plang],
+ lang
+ );
+
+ return `
+ {selected.section.title} / {selected.chapter.title} • Svelte Tutorial
+
+
+ tag to see compiled CSS */`
+ }
+ };
} catch (err) {
- let result = `/* Error compiling component\n\n${err.message}`;
- if (err.frame) result += `\n${err.frame}`;
- result += `\n\n*/`;
- return { code: result, props: null };
+ let message = `/* Error compiling component\n\n${err.message}`;
+ if (err.frame) message += `\n${err.frame}`;
+ message += `\n\n*/`;
+
+ return {
+ id,
+ result: {
+ js: message,
+ css: message
+ }
+ };
}
}
diff --git a/src/cli/compile.ts b/src/cli/compile.ts
deleted file mode 100644
index f8928c29cf..0000000000
--- a/src/cli/compile.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import * as path from 'path';
-import * as fs from 'fs';
-import * as svelte from 'svelte';
-import error from './error.js';
-
-function mkdirp(dir) {
- const parent = path.dirname(dir);
- if (dir === parent) return;
-
- mkdirp(parent);
- if (!fs.existsSync(dir)) fs.mkdirSync(dir);
-}
-
-export function compile(input, opts) {
- if (opts._.length > 0) {
- error(`Can only compile a single file or directory`);
- }
-
- const output = opts.output;
-
- const stats = fs.statSync(input);
- const isDir = stats.isDirectory();
-
- if (isDir) {
- if (!output) {
- error(`You must specify an --output (-o) option when compiling a directory of files`);
- }
-
- if (opts.name || opts.amdId) {
- error(`Cannot specify --${opts.name ? 'name' : 'amdId'} when compiling a directory`);
- }
- }
-
- const options = {
- name: opts.name,
- format: opts.format,
- css: opts.css !== false,
- dev: opts.dev,
- immutable: opts.immutable,
- generate: opts.generate || 'dom',
- customElement: opts.customElement,
- sveltePath: opts.sveltePath
- };
-
- if (isDir) {
- mkdirp(output);
- compileDirectory(input, output, options, opts.sourcemap);
- } else {
- compileFile(input, output, options, opts.sourcemap);
- }
-}
-
-function compileDirectory(input, output, options, sourcemap) {
- fs.readdirSync(input).forEach(file => {
- const src = path.resolve(input, file);
- const dest = path.resolve(output, file);
-
- if (path.extname(file) === '.html') {
- compileFile(
- src,
- dest.substring(0, dest.lastIndexOf('.html')) + '.js',
- options,
- sourcemap
- );
- } else {
- const stats = fs.statSync(src);
- if (stats.isDirectory()) {
- compileDirectory(src, dest, options, sourcemap);
- }
- }
- });
-}
-
-let SOURCEMAPPING_URL = 'sourceMa';
-SOURCEMAPPING_URL += 'ppingURL';
-
-function compileFile(input, output, options, sourcemap) {
- console.error(`compiling ${path.relative(process.cwd(), input)}...`); // eslint-disable-line no-console
-
- options = Object.assign({}, options);
- if (!options.name) options.name = getName(input);
-
- options.filename = input;
- options.outputFilename = output;
-
- const inline = sourcemap === 'inline';
-
- let source = fs.readFileSync(input, 'utf-8');
- if (source[0] === 0xfeff) source = source.slice(1);
-
- let compiled;
-
- try {
- compiled = svelte.compile(source, options);
- } catch (err) {
- error(err);
- }
-
- const { js, warnings } = compiled;
-
- warnings.forEach(warning => console.warn(warning.toString()));
-
- if (sourcemap) {
- js.code += `\n//# ${SOURCEMAPPING_URL}=${inline || !output
- ? js.map.toUrl()
- : `${path.basename(output)}.map`}\n`;
- }
-
- if (output) {
- const outputDir = path.dirname(output);
- mkdirp(outputDir);
- fs.writeFileSync(output, js.code);
- console.error(`wrote ${path.relative(process.cwd(), output)}`); // eslint-disable-line no-console
- if (sourcemap && !inline) {
- fs.writeFileSync(`${output}.map`, js.map);
- console.error(`wrote ${path.relative(process.cwd(), `${output}.map`)}`); // eslint-disable-line no-console
- }
- } else {
- process.stdout.write(js.code);
- }
-}
-
-function getName(input) {
- return path
- .basename(input)
- .replace(path.extname(input), '')
- .replace(/[^a-zA-Z_$0-9]+/g, '_')
- .replace(/^_/, '')
- .replace(/_$/, '')
- .replace(/^(\d)/, '_$1');
-}
diff --git a/src/cli/error.ts b/src/cli/error.ts
deleted file mode 100644
index 2413ab9ee5..0000000000
--- a/src/cli/error.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import c from 'kleur';
-
-function stderr(msg) {
- console.error(msg); // eslint-disable-line no-console
-}
-
-export default function error(err) {
- stderr(c.red(err.message || err));
-
- if (err.frame) {
- stderr(err.frame);
- } else if (err.stack) {
- stderr(c.gray(err.stack));
- }
-
- process.exit(1);
-}
diff --git a/src/cli/index.ts b/src/cli/index.ts
deleted file mode 100644
index 309d23acda..0000000000
--- a/src/cli/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import sade from 'sade';
-import * as pkg from '../../package.json';
-
-const prog = sade('svelte').version(pkg.version);
-
-prog
- .command('compile ')
-
- .option('-o, --output', 'Output (if absent, prints to stdout)')
- .option('-f, --format', 'Type of output (cjs or esm)', 'esm')
- .option('-n, --name', 'Name for IIFE/UMD export (inferred from filename by default)')
- .option('-m, --sourcemap', 'Generate sourcemap (`-m inline` for inline map)')
- .option('-d, --dev', 'Add dev mode warnings and errors')
- .option('--generate', 'Change generate format between `dom` and `ssr`')
- .option('--no-css', `Don't include CSS (useful with SSR)`)
- .option('--immutable', 'Support immutable data structures')
- .option('--shared', 'Don\'t include shared helpers')
- .option('--customElement', 'Generate a custom element')
-
- .example('compile App.html > App.js')
- .example('compile src -o dest')
- .example('compile -f umd MyComponent.html > MyComponent.js')
-
- .action((input, opts) => {
- import('./compile').then(({ compile }) => {
- compile(input, opts);
- });
- })
-
- .parse(process.argv);
\ No newline at end of file
diff --git a/src/compile/Component.ts b/src/compile/Component.ts
index 5ba5e223e4..9dbfb3b41c 100644
--- a/src/compile/Component.ts
+++ b/src/compile/Component.ts
@@ -26,9 +26,6 @@ type ComponentOptions = {
namespace?: string;
tag?: string;
immutable?: boolean;
- props?: string;
- props_object?: string;
- props_node?: Node;
};
// We need to tell estree-walker that it should always
@@ -132,33 +129,8 @@ export default class Component {
this.walk_module_js();
this.walk_instance_js_pre_template();
- if (this.componentOptions.props) {
- this.has_reactive_assignments = true;
-
- const name = this.componentOptions.props_object;
-
- if (!this.ast.module && !this.ast.instance) {
- this.add_var({
- name,
- export_name: name,
- implicit: true
- });
- }
-
- const variable = this.var_lookup.get(name);
-
- if (!variable) {
- this.error(this.componentOptions.props_node, {
- code: 'missing-declaration',
- message: `'${name}' is not defined`
- });
- }
-
- variable.reassigned = true;
- }
-
- this.name = this.getUniqueName(name);
this.fragment = new Fragment(this, ast.html);
+ this.name = this.getUniqueName(name);
this.walk_instance_js_post_template();
@@ -177,6 +149,12 @@ export default class Component {
if (variable) {
variable.referenced = true;
+ } else if (name === '$$props') {
+ this.add_var({
+ name,
+ injected: true,
+ referenced: true
+ });
} else if (name[0] === '$') {
this.add_var({
name,
@@ -200,6 +178,8 @@ export default class Component {
referenced: true,
writable: true
});
+ } else {
+ this.usedNames.add(name);
}
}
@@ -235,19 +215,20 @@ export default class Component {
const banner = `/* ${this.file ? `${this.file} ` : ``}generated by Svelte v${"__VERSION__"} */`;
- // TODO use same regex for both
- result = result.replace(compileOptions.generate === 'ssr' ? /(@+|#+)(\w*(?:-\w*)?)/g : /(@+)(\w*(?:-\w*)?)/g, (match: string, sigil: string, name: string) => {
- if (sigil === '@') {
- if (internal_exports.has(name)) {
- if (compileOptions.dev && internal_exports.has(`${name}Dev`)) name = `${name}Dev`;
- this.helpers.add(name);
- }
+ result = result
+ .replace(/__svelte:self__/g, this.name)
+ .replace(compileOptions.generate === 'ssr' ? /(@+|#+)(\w*(?:-\w*)?)/g : /(@+)(\w*(?:-\w*)?)/g, (match: string, sigil: string, name: string) => {
+ if (sigil === '@') {
+ if (internal_exports.has(name)) {
+ if (compileOptions.dev && internal_exports.has(`${name}Dev`)) name = `${name}Dev`;
+ this.helpers.add(name);
+ }
- return this.alias(name);
- }
+ return this.alias(name);
+ }
- return sigil.slice(1) + name;
- });
+ return sigil.slice(1) + name;
+ });
const importedHelpers = Array.from(this.helpers)
.sort()
@@ -330,7 +311,7 @@ export default class Component {
css,
ast: this.ast,
warnings: this.warnings,
- vars: this.vars.filter(v => !v.global && !v.implicit && !v.internal).map(v => ({
+ vars: this.vars.filter(v => !v.global && !v.internal).map(v => ({
name: v.name,
export_name: v.export_name || null,
injected: v.injected || false,
@@ -623,6 +604,11 @@ export default class Component {
reassigned: true,
initialised: true
});
+ } else if (name === '$$props') {
+ this.add_var({
+ name,
+ injected: true
+ });
} else if (name[0] === '$') {
this.add_var({
name,
@@ -770,7 +756,7 @@ export default class Component {
extractNames(declarator.id).forEach(name => {
const variable = component.var_lookup.get(name);
- if (variable.export_name || name === componentOptions.props_object) {
+ if (variable.export_name) {
component.error(declarator, {
code: 'destructured-prop',
message: `Cannot declare props in destructured declaration`
@@ -796,47 +782,37 @@ export default class Component {
const { name } = declarator.id;
const variable = component.var_lookup.get(name);
- if (name === componentOptions.props_object) {
- if (variable.export_name) {
- component.error(declarator, {
- code: 'exported-options-props',
- message: `Cannot export props binding`
- });
+ if (variable.export_name) {
+ if (current_group && current_group.kind !== node.kind) {
+ current_group = null;
}
- // can't use the @ trick here, because we're
- // manipulating the underlying magic string
- const exclude_internal_props = component.helper('exclude_internal_props');
-
- const suffix = code.original[declarator.end] === ';'
- ? ` = ${exclude_internal_props}($$props)`
- : ` = ${exclude_internal_props}($$props);`
+ const insert = variable.subscribable
+ ? get_insert(variable)
+ : null;
- if (declarator.id.end === declarator.end) {
- code.appendLeft(declarator.end, suffix);
+ if (!current_group || (current_group.insert && insert)) {
+ current_group = { kind: node.kind, declarators: [declarator], insert };
+ coalesced_declarations.push(current_group);
+ } else if (insert) {
+ current_group.insert = insert
+ current_group.declarators.push(declarator);
} else {
- code.overwrite(declarator.id.end, declarator.end, suffix);
+ current_group.declarators.push(declarator);
}
- }
- if (variable.export_name) {
- if (variable.subscribable) {
- coalesced_declarations.push({
- kind: node.kind,
- declarators: [declarator],
- insert: get_insert(variable)
- });
- } else {
- if (current_group && current_group.kind !== node.kind) {
- current_group = null;
- }
+ if (variable.name !== variable.export_name) {
+ code.prependRight(declarator.id.start, `${variable.export_name}:`)
+ }
- if (!current_group) {
- current_group = { kind: node.kind, declarators: [], insert: null };
- coalesced_declarations.push(current_group);
- }
+ if (next) {
+ const next_variable = component.var_lookup.get(next.id.name)
+ const new_declaration = !next_variable.export_name
+ || (current_group.insert && next_variable.subscribable)
- current_group.declarators.push(declarator);
+ if (new_declaration) {
+ code.overwrite(declarator.end, next.start, ` ${node.kind} `);
+ }
}
} else {
current_group = null;
@@ -911,6 +887,11 @@ export default class Component {
const all_hoistable = node.declarations.every(d => {
if (!d.init) return false;
if (d.init.type !== 'Literal') return false;
+
+ const v = this.var_lookup.get(d.id.name)
+ if (v.reassigned) return false
+ if (v.export_name && v.export_name !== v.name) return false
+
if (this.var_lookup.get(d.id.name).reassigned) return false;
if (this.vars.find(variable => variable.name === d.id.name && variable.module)) return false;
@@ -1029,6 +1010,7 @@ export default class Component {
this.reactive_declaration_nodes.add(node);
const assignees = new Set();
+ const assignee_nodes = new Set();
const dependencies = new Set();
let scope = this.instance_scope;
@@ -1041,16 +1023,20 @@ export default class Component {
}
if (node.type === 'AssignmentExpression') {
- assignees.add(getObject(node.left).name);
+ const identifier = getObject(node.left)
+ assignee_nodes.add(identifier);
+ assignees.add(identifier.name);
} else if (node.type === 'UpdateExpression') {
- assignees.add(getObject(node.argument).name);
+ const identifier = getObject(node.argument);
+ assignees.add(identifier.name);
} else if (isReference(node, parent)) {
- const object = getObject(node);
- const { name } = object;
-
- const owner = scope.findOwner(name);
- if ((!owner || owner === component.instance_scope) && (name[0] === '$' || component.var_lookup.has(name))) {
- dependencies.add(name);
+ const identifier = getObject(node);
+ if (!assignee_nodes.has(identifier)) {
+ const { name } = identifier;
+ const owner = scope.findOwner(name);
+ if ((!owner || owner === component.instance_scope) && (name[0] === '$' || component.var_lookup.has(name))) {
+ dependencies.add(name);
+ }
}
this.skip();
@@ -1134,6 +1120,8 @@ export default class Component {
}
qualify(name) {
+ if (name === `$$props`) return `ctx.$$props`;
+
const variable = this.var_lookup.get(name);
if (!variable) return name;
@@ -1257,26 +1245,10 @@ function process_component_options(component: Component, nodes) {
}
}
- else if (attribute.type === 'Binding') {
- if (attribute.name !== 'props') {
- component.error(attribute, {
- code: `invalid-options-binding`,
- message: ` only supports bind:props`
- });
- }
-
- const { start, end } = attribute.expression;
- const { name } = flattenReference(attribute.expression);
-
- componentOptions.props = `[✂${start}-${end}✂]`;
- componentOptions.props_node = attribute.expression;
- componentOptions.props_object = name;
- }
-
else {
component.error(attribute, {
code: `invalid-options-attribute`,
- message: ` can only have static 'tag', 'namespace' and 'immutable' attributes, or a bind:props directive`
+ message: ` can only have static 'tag', 'namespace' and 'immutable' attributes`
});
}
});
diff --git a/src/compile/nodes/Action.ts b/src/compile/nodes/Action.ts
index 80d8f215c5..761738ac79 100644
--- a/src/compile/nodes/Action.ts
+++ b/src/compile/nodes/Action.ts
@@ -14,6 +14,7 @@ export default class Action extends Node {
component.warn_if_undefined(info, scope);
this.name = info.name;
+ component.qualify(info.name);
this.expression = info.expression
? new Expression(component, this, scope, info.expression)
diff --git a/src/compile/nodes/Animation.ts b/src/compile/nodes/Animation.ts
index faf964b06c..68ebfd3828 100644
--- a/src/compile/nodes/Animation.ts
+++ b/src/compile/nodes/Animation.ts
@@ -13,6 +13,7 @@ export default class Animation extends Node {
component.warn_if_undefined(info, scope);
this.name = info.name;
+ component.qualify(info.name);
if (parent.animation) {
component.error(this, {
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index 24378b180c..9f0bc6cb10 100644
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -18,7 +18,7 @@ import TemplateScope from './shared/TemplateScope';
const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
-const ariaAttributes = 'activedescendant atomic autocomplete busy checked controls current describedby details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
+const ariaAttributes = 'activedescendant atomic autocomplete busy checked colindex controls current describedby details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowindex selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
const ariaAttributeSet = new Set(ariaAttributes);
const ariaRoles = 'alert alertdialog application article banner button cell checkbox columnheader combobox command complementary composite contentinfo definition dialog directory document feed figure form grid gridcell group heading img input landmark link list listbox listitem log main marquee math menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option presentation progressbar radio radiogroup range region roletype row rowgroup rowheader scrollbar search searchbox section sectionhead select separator slider spinbutton status structure switch tab table tablist tabpanel term textbox timer toolbar tooltip tree treegrid treeitem widget window'.split(' ');
@@ -101,7 +101,7 @@ export default class Element extends Node {
if (!this.namespace && svg.test(this.name)) {
this.component.warn(this, {
code: `missing-namespace`,
- message: `<${this.name}> is an SVG element – did you forget to add { namespace: 'svg' } ?`
+ message: `<${this.name}> is an SVG element – did you forget to add ';
- if (!options || (!options.target && !options.root)) {
- throw new Error("'target' is a required option");
- }
-
- init(this, options);
- this._state = assign({}, options.data);
- this._intro = true;
-
- this._fragment = create_main_fragment(this, this._state);
-
- if (options.target) {
- if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
- this._fragment.c();
- this._mount(options.target, options.anchor);
- }
-}
-
-assign(Main.prototype, {
- destroy: destroyDev,
- get: get,
- fire: fire,
- on: on,
- set: setDev,
- _set: _set,
- _stage: _stage,
- _mount: _mount,
- _differs: _differs
- });
-
-Main.prototype._checkReadOnly = function _checkReadOnly(newState) {
-};
-
-Main.prototype._recompute = noop;
-
-function createElement(name) {
- return document.createElement(name);
-}
-
-function addLoc(element, file, line, column, char) {
- element.__svelte_meta = {
- loc: { file, line, column, char }
- };
-}
-
-function insert(target, node, anchor) {
- target.insertBefore(node, anchor);
-}
-
-function noop() {}
-
-function detachNode(node) {
- node.parentNode.removeChild(node);
-}
-
-function init(component, options) {
- component._handlers = blankObject();
- component._slots = blankObject();
- component._bind = options._bind;
- component._staged = {};
-
- component.options = options;
- component.root = options.root || component;
- component.store = options.store || component.root.store;
-
- if (!options.root) {
- component._beforecreate = [];
- component._oncreate = [];
- component._aftercreate = [];
- }
-}
-
-function assign(tar, src) {
- for (var k in src) tar[k] = src[k];
- return tar;
-}
-
-function destroyDev(detach) {
- destroy.call(this, detach);
- this.destroy = function() {
- console.warn('Component was already destroyed');
- };
-}
-
-function get() {
- return this._state;
-}
-
-function fire(eventName, data) {
- var handlers =
- eventName in this._handlers && this._handlers[eventName].slice();
- if (!handlers) return;
-
- for (var i = 0; i < handlers.length; i += 1) {
- var handler = handlers[i];
-
- if (!handler.__calling) {
- try {
- handler.__calling = true;
- handler.call(this, data);
- } finally {
- handler.__calling = false;
- }
- }
- }
-}
-
-function on(eventName, handler) {
- var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
- handlers.push(handler);
-
- return {
- cancel: function() {
- var index = handlers.indexOf(handler);
- if (~index) handlers.splice(index, 1);
- }
- };
-}
-
-function setDev(newState) {
- if (typeof newState !== 'object') {
- throw new Error(
- this._debugName + '.set was called without an object of data key-values to update.'
- );
- }
-
- this._checkReadOnly(newState);
- set.call(this, newState);
-}
-
-function _set(newState) {
- var oldState = this._state,
- changed = {},
- dirty = false;
-
- newState = assign(this._staged, newState);
- this._staged = {};
-
- for (var key in newState) {
- if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
- }
- if (!dirty) return;
-
- this._state = assign(assign({}, oldState), newState);
- this._recompute(changed, this._state);
- if (this._bind) this._bind(changed, this._state);
-
- if (this._fragment) {
- this.fire("state", { changed: changed, current: this._state, previous: oldState });
- this._fragment.p(changed, this._state);
- this.fire("update", { changed: changed, current: this._state, previous: oldState });
- }
-}
-
-function _stage(newState) {
- assign(this._staged, newState);
-}
-
-function _mount(target, anchor) {
- this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
-}
-
-function _differs(a, b) {
- return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
-}
-
-function blankObject() {
- return Object.create(null);
-}
-
-function destroy(detach) {
- this.destroy = noop;
- this.fire('destroy');
- this.set = noop;
-
- this._fragment.d(detach !== false);
- this._fragment = null;
- this._state = {};
-}
-
-function set(newState) {
- this._set(assign({}, newState));
- if (this.root._lock) return;
- flush(this.root);
-}
-
-function flush(component) {
- component._lock = true;
- callAll(component._beforecreate);
- callAll(component._oncreate);
- callAll(component._aftercreate);
- component._lock = false;
-}
-
-function callAll(fns) {
- while (fns && fns.length) fns.shift()();
-}
-export default Main;
\ No newline at end of file
diff --git a/test/cli/samples/dev/src/Main.svelte b/test/cli/samples/dev/src/Main.svelte
deleted file mode 100644
index aa994ea13e..0000000000
--- a/test/cli/samples/dev/src/Main.svelte
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-named-c/Nested.svelte b/test/runtime/samples/component-slot-named-c/Nested.svelte
new file mode 100644
index 0000000000..a94392ce5d
--- /dev/null
+++ b/test/runtime/samples/component-slot-named-c/Nested.svelte
@@ -0,0 +1 @@
+
+ Hello
+
+
+
+ world
+
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-slot/main.svelte b/test/runtime/samples/dynamic-component-slot/main.svelte
index 99bcf9e64f..ed357f4302 100644
--- a/test/runtime/samples/dynamic-component-slot/main.svelte
+++ b/test/runtime/samples/dynamic-component-slot/main.svelte
@@ -17,7 +17,7 @@
{#if foo}
-
-
-
- is an SVG element – did you forget to add { namespace: 'svg' } ?",
+ "message": " is an SVG element – did you forget to add ?",
"start": {
"line": 1,
"column": 0,
diff --git a/test/vars/index.js b/test/vars/index.js
index d8da8e4778..66ffd94c70 100644
--- a/test/vars/index.js
+++ b/test/vars/index.js
@@ -14,47 +14,41 @@ describe('vars', () => {
throw new Error('Forgot to remove `solo: true` from test');
}
- (solo ? it.only : skip ? it.skip : it)(dir, () => {
- const config = loadConfig(`./vars/samples/${dir}/_config.js`);
- const filename = `test/vars/samples/${dir}/input.svelte`;
- const input = fs.readFileSync(filename, 'utf-8').replace(/\s+$/, '');
-
- const expectedError = tryToLoadJson(
- `test/vars/samples/${dir}/error.json`
- );
-
- let result;
- let error;
-
- try {
- result = svelte.compile(input, config.options);
- config.test(assert, result.vars);
- } catch (e) {
- error = e;
- }
-
- if (error || expectedError) {
- if (error && !expectedError) {
- throw error;
+ for (const generate of ['dom', 'ssr', false]) {
+ (solo ? it.only : skip ? it.skip : it)(`${dir}, generate: ${generate}`, () => {
+ const config = loadConfig(`./vars/samples/${dir}/_config.js`);
+ const filename = `test/vars/samples/${dir}/input.svelte`;
+ const input = fs.readFileSync(filename, 'utf-8').replace(/\s+$/, '');
+
+ const expectedError = tryToLoadJson(
+ `test/vars/samples/${dir}/error.json`
+ );
+
+ let result;
+ let error;
+
+ try {
+ result = svelte.compile(input, { ...config.options, generate });
+ config.test(assert, result.vars);
+ } catch (e) {
+ error = e;
}
- if (expectedError && !error) {
- throw new Error(`Expected an error: ${expectedError.message}`);
- }
-
- assert.equal(error.message, expectedError.message);
- assert.deepEqual(error.start, expectedError.start);
- assert.deepEqual(error.end, expectedError.end);
- assert.equal(error.pos, expectedError.pos);
- }
- });
- });
+ if (error || expectedError) {
+ if (error && !expectedError) {
+ throw error;
+ }
- it('returns a vars object when options.generate is false', () => {
- const { vars } = svelte.compile('', {
- generate: false
- });
+ if (expectedError && !error) {
+ throw new Error(`Expected an error: ${expectedError.message}`);
+ }
- assert.ok(Array.isArray(vars));
+ assert.equal(error.message, expectedError.message);
+ assert.deepEqual(error.start, expectedError.start);
+ assert.deepEqual(error.end, expectedError.end);
+ assert.equal(error.pos, expectedError.pos);
+ }
+ });
+ }
});
});
diff --git a/test/vars/samples/$$props-logicless/_config.js b/test/vars/samples/$$props-logicless/_config.js
new file mode 100644
index 0000000000..b0d76bebbd
--- /dev/null
+++ b/test/vars/samples/$$props-logicless/_config.js
@@ -0,0 +1,16 @@
+export default {
+ test(assert, vars) {
+ assert.deepEqual(vars, [
+ {
+ name: '$$props',
+ export_name: null,
+ injected: true,
+ module: false,
+ mutated: false,
+ reassigned: false,
+ referenced: true,
+ writable: false
+ }
+ ]);
+ }
+};
\ No newline at end of file
diff --git a/test/vars/samples/$$props-logicless/input.svelte b/test/vars/samples/$$props-logicless/input.svelte
new file mode 100644
index 0000000000..3615fcde44
--- /dev/null
+++ b/test/vars/samples/$$props-logicless/input.svelte
@@ -0,0 +1 @@
+
+ Fades in and out +
+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/00-transition/meta.json b/site/content/examples/09-transitions/00-transition/meta.json new file mode 100644 index 0000000000..e07975554f --- /dev/null +++ b/site/content/examples/09-transitions/00-transition/meta.json @@ -0,0 +1,3 @@ +{ + "title": "The transition directive" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte new file mode 100644 index 0000000000..01047f5e37 --- /dev/null +++ b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte @@ -0,0 +1,15 @@ + + + + +{#if visible} ++ Flies in and out +
+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json new file mode 100644 index 0000000000..517bc54c3c --- /dev/null +++ b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Adding parameters" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/02-in-and-out/App.svelte b/site/content/examples/09-transitions/02-in-and-out/App.svelte new file mode 100644 index 0000000000..36d36664e6 --- /dev/null +++ b/site/content/examples/09-transitions/02-in-and-out/App.svelte @@ -0,0 +1,15 @@ + + + + +{#if visible} ++ Flies in, fades out +
+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/02-in-and-out/meta.json b/site/content/examples/09-transitions/02-in-and-out/meta.json new file mode 100644 index 0000000000..627f409fa4 --- /dev/null +++ b/site/content/examples/09-transitions/02-in-and-out/meta.json @@ -0,0 +1,3 @@ +{ + "title": "In and out" +} \ No newline at end of file diff --git a/site/content/examples/transitions-custom/App.svelte b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte similarity index 62% rename from site/content/examples/transitions-custom/App.svelte rename to site/content/examples/09-transitions/03-custom-css-transitions/App.svelte index bee159e4c5..6e8dfcaf08 100644 --- a/site/content/examples/transitions-custom/App.svelte +++ b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte @@ -1,14 +1,14 @@ - visible - -{#if visible} -
- wheeee!!!!!
-
-{/if}
-
+
+
+
+{#if visible}
+
+ transitions!
+
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/03-custom-css-transitions/meta.json b/site/content/examples/09-transitions/03-custom-css-transitions/meta.json
new file mode 100644
index 0000000000..8b70464ca8
--- /dev/null
+++ b/site/content/examples/09-transitions/03-custom-css-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Custom CSS transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
new file mode 100644
index 0000000000..3b3fb94d1c
--- /dev/null
+++ b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+{#if visible}
+ + The quick brown fox jumps over the lazy dog +
+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/meta.json b/site/content/examples/09-transitions/04-custom-js-transitions/meta.json new file mode 100644 index 0000000000..1ec11d90f9 --- /dev/null +++ b/site/content/examples/09-transitions/04-custom-js-transitions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Custom JS transitions" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/05-transition-events/App.svelte b/site/content/examples/09-transitions/05-transition-events/App.svelte new file mode 100644 index 0000000000..da79897365 --- /dev/null +++ b/site/content/examples/09-transitions/05-transition-events/App.svelte @@ -0,0 +1,25 @@ + + +status: {status}
+ + + +{#if visible} ++ Flies in and out +
+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/05-transition-events/meta.json b/site/content/examples/09-transitions/05-transition-events/meta.json new file mode 100644 index 0000000000..b46e28feed --- /dev/null +++ b/site/content/examples/09-transitions/05-transition-events/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Transition events" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/06-deferred-transitions/App.svelte b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte new file mode 100644 index 0000000000..c46096c204 --- /dev/null +++ b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte @@ -0,0 +1,146 @@ + + + + +
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js b/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js
new file mode 100644
index 0000000000..e11e18b60e
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js
@@ -0,0 +1,65 @@
+import { quintOut } from 'svelte/easing';
+
+export default function crossfade({ send, receive, fallback }) {
+ let requested = new Map();
+ let provided = new Map();
+
+ function crossfade(from, node) {
+ const to = node.getBoundingClientRect();
+ const dx = from.left - to.left;
+ const dy = from.top - to.top;
+
+ const style = getComputedStyle(node);
+ const transform = style.transform === 'none' ? '' : style.transform;
+
+ return {
+ duration: 400,
+ easing: quintOut,
+ css: (t, u) => `
+ opacity: ${t};
+ transform: ${transform} translate(${u * dx}px,${u * dy}px);
+ `
+ };
+ }
+
+ return {
+ send(node, params) {
+ provided.set(params.key, {
+ rect: node.getBoundingClientRect()
+ });
+
+ return () => {
+ if (requested.has(params.key)) {
+ const { rect } = requested.get(params.key);
+ requested.delete(params.key);
+
+ return crossfade(rect, node);
+ }
+
+ // if the node is disappearing altogether
+ // (i.e. wasn't claimed by the other list)
+ // then we need to supply an outro
+ provided.delete(params.key);
+ return fallback(node, params);
+ };
+ },
+
+ receive(node, params) {
+ requested.set(params.key, {
+ rect: node.getBoundingClientRect()
+ });
+
+ return () => {
+ if (provided.has(params.key)) {
+ const { rect } = provided.get(params.key);
+ provided.delete(params.key);
+
+ return crossfade(rect, node);
+ }
+
+ requested.delete(params.key);
+ return fallback(node, params);
+ };
+ }
+ };
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/meta.json b/site/content/examples/09-transitions/06-deferred-transitions/meta.json
new file mode 100644
index 0000000000..b9fc7da898
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Deferred transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/meta.json b/site/content/examples/09-transitions/meta.json
new file mode 100644
index 0000000000..cb9291d73f
--- /dev/null
+++ b/site/content/examples/09-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/App.svelte b/site/content/examples/10-animations/00-animate/App.svelte
new file mode 100644
index 0000000000..c46096c204
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/App.svelte
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+ todo
+ {#each todos.filter(t => !t.done) as todo (todo.id)} + + {/each} +
+
+done
+ {#each todos.filter(t => t.done) as todo (todo.id)} + + {/each} +
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/crossfade.js b/site/content/examples/10-animations/00-animate/crossfade.js
new file mode 100644
index 0000000000..e11e18b60e
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/crossfade.js
@@ -0,0 +1,65 @@
+import { quintOut } from 'svelte/easing';
+
+export default function crossfade({ send, receive, fallback }) {
+ let requested = new Map();
+ let provided = new Map();
+
+ function crossfade(from, node) {
+ const to = node.getBoundingClientRect();
+ const dx = from.left - to.left;
+ const dy = from.top - to.top;
+
+ const style = getComputedStyle(node);
+ const transform = style.transform === 'none' ? '' : style.transform;
+
+ return {
+ duration: 400,
+ easing: quintOut,
+ css: (t, u) => `
+ opacity: ${t};
+ transform: ${transform} translate(${u * dx}px,${u * dy}px);
+ `
+ };
+ }
+
+ return {
+ send(node, params) {
+ provided.set(params.key, {
+ rect: node.getBoundingClientRect()
+ });
+
+ return () => {
+ if (requested.has(params.key)) {
+ const { rect } = requested.get(params.key);
+ requested.delete(params.key);
+
+ return crossfade(rect, node);
+ }
+
+ // if the node is disappearing altogether
+ // (i.e. wasn't claimed by the other list)
+ // then we need to supply an outro
+ provided.delete(params.key);
+ return fallback(node, params);
+ };
+ },
+
+ receive(node, params) {
+ requested.set(params.key, {
+ rect: node.getBoundingClientRect()
+ });
+
+ return () => {
+ if (provided.has(params.key)) {
+ const { rect } = provided.get(params.key);
+ provided.delete(params.key);
+
+ return crossfade(rect, node);
+ }
+
+ requested.delete(params.key);
+ return fallback(node, params);
+ };
+ }
+ };
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/meta.json b/site/content/examples/10-animations/00-animate/meta.json
new file mode 100644
index 0000000000..dd7e345443
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "The animate directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/meta.json b/site/content/examples/10-animations/meta.json
new file mode 100644
index 0000000000..c71301495e
--- /dev/null
+++ b/site/content/examples/10-animations/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Animations"
+}
\ No newline at end of file
diff --git a/site/content/examples/svg-clock/App.svelte b/site/content/examples/11-svg/01-clock/App.svelte
similarity index 85%
rename from site/content/examples/svg-clock/App.svelte
rename to site/content/examples/11-svg/01-clock/App.svelte
index 3e406b5d65..49d3a7f809 100644
--- a/site/content/examples/svg-clock/App.svelte
+++ b/site/content/examples/11-svg/01-clock/App.svelte
@@ -1,16 +1,13 @@
+
+
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/site/content/examples/11-svg/01-clock/meta.json b/site/content/examples/11-svg/01-clock/meta.json
new file mode 100644
index 0000000000..ec7137feb6
--- /dev/null
+++ b/site/content/examples/11-svg/01-clock/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Clock"
+}
\ No newline at end of file
diff --git a/site/content/examples/bar-chart/App.svelte b/site/content/examples/11-svg/02-bar-chart/App.svelte
similarity index 84%
rename from site/content/examples/bar-chart/App.svelte
rename to site/content/examples/11-svg/02-bar-chart/App.svelte
index 82af1834a8..e0f27586c3 100644
--- a/site/content/examples/bar-chart/App.svelte
+++ b/site/content/examples/11-svg/02-bar-chart/App.svelte
@@ -1,7 +1,14 @@
+
+
+ todo
+ {#each todos.filter(t => !t.done) as todo (todo.id)} + + {/each} +
+
+done
+ {#each todos.filter(t => t.done) as todo (todo.id)} + + {/each} +
-
\ No newline at end of file
diff --git a/site/src/components/Repl/Input/ComponentSelector.svelte b/site/src/components/Repl/Input/ComponentSelector.svelte
new file mode 100644
index 0000000000..7933306b0a
--- /dev/null
+++ b/site/src/components/Repl/Input/ComponentSelector.svelte
@@ -0,0 +1,231 @@
+
+
+
+
+US birthrate by year {width}/{height}
+US birthrate by year
+ {#if $components.length}
+
diff --git a/site/src/components/Repl/Input/ModuleEditor.svelte b/site/src/components/Repl/Input/ModuleEditor.svelte
new file mode 100644
index 0000000000..bf1716e373
--- /dev/null
+++ b/site/src/components/Repl/Input/ModuleEditor.svelte
@@ -0,0 +1,63 @@
+
+
+
+
+
+ {#each $components as component}
+
+ {/if}
+
+ {#if component.name == 'App'}
+
+
+
+ {/if}
+ {/if}
+
+ {/each}
+
+
+
+ App.svelte
+
+ {:else}
+ {#if component === editing}
+ {editing.name + (/\./.test(editing.name) ? '' : `.${editing.type}`)}
+
+
+ {:else}
+
+ {component.name}.{component.type}
+
+
+
+
+
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/InputOutputToggle.svelte b/site/src/components/Repl/InputOutputToggle.svelte
similarity index 100%
rename from site/src/routes/repl/_components/InputOutputToggle.svelte
rename to site/src/components/Repl/InputOutputToggle.svelte
diff --git a/site/src/components/Repl/Message.svelte b/site/src/components/Repl/Message.svelte
new file mode 100644
index 0000000000..6a9183dfb3
--- /dev/null
+++ b/site/src/components/Repl/Message.svelte
@@ -0,0 +1,80 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/site/src/components/Repl/Output/Compiler.js b/site/src/components/Repl/Output/Compiler.js
new file mode 100644
index 0000000000..b6d13e53bd
--- /dev/null
+++ b/site/src/components/Repl/Output/Compiler.js
@@ -0,0 +1,38 @@
+export default class Compiler {
+ constructor(version) {
+ this.worker = new Worker('/workers/compiler.js');
+ this.worker.postMessage({ type: 'init', version });
+
+ this.uid = 1;
+ this.handlers = new Map();
+
+ this.worker.onmessage = event => {
+ const handler = this.handlers.get(event.data.id);
+ handler(event.data.result);
+ this.handlers.delete(event.data.id);
+ };
+ }
+
+ compile(component, options) {
+ return new Promise(fulfil => {
+ const id = this.uid++;
+
+ this.handlers.set(id, fulfil);
+
+ this.worker.postMessage({
+ id,
+ type: 'compile',
+ source: component.source,
+ options: Object.assign({
+ name: component.name,
+ filename: `${component.name}.svelte`
+ }, options),
+ entry: component.name === 'App'
+ });
+ });
+ }
+
+ destroy() {
+ this.worker.terminate();
+ }
+}
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Output/CompilerOptions.svelte b/site/src/components/Repl/Output/CompilerOptions.svelte
similarity index 100%
rename from site/src/routes/repl/_components/Output/CompilerOptions.svelte
rename to site/src/components/Repl/Output/CompilerOptions.svelte
diff --git a/site/src/components/Repl/Output/ReplProxy.js b/site/src/components/Repl/Output/ReplProxy.js
new file mode 100644
index 0000000000..7ae56e35b7
--- /dev/null
+++ b/site/src/components/Repl/Output/ReplProxy.js
@@ -0,0 +1,76 @@
+export default class ReplProxy {
+ constructor(iframe, handlers) {
+ this.iframe = iframe;
+ this.handlers = handlers;
+
+ this.cmdId = 1;
+ this.pendingCmds = new Map();
+
+ this.handle_event = e => this.handleReplMessage(e);
+ window.addEventListener('message', this.handle_event, false);
+ }
+
+ destroy() {
+ window.removeEventListener('message', this.handle_event);
+ }
+
+ iframeCommand(command, args) {
+ return new Promise( (resolve, reject) => {
+ this.cmdId += 1;
+ this.pendingCmds.set(this.cmdId, { resolve, reject });
+
+ this.iframe.contentWindow.postMessage({
+ action: command,
+ cmdId: this.cmdId,
+ args
+ }, '*')
+ });
+ }
+
+ handleCommandMessage(cmdData) {
+ let action = cmdData.action;
+ let id = cmdData.cmdId;
+ let handler = this.pendingCmds.get(id);
+
+ if (handler) {
+ this.pendingCmds.delete(id);
+ if (action === 'cmdError') {
+ let { message, stack } = cmdData;
+ let e = new Error(message);
+ e.stack = stack;
+ console.log('repl cmd fail');
+ handler.reject(e)
+ }
+
+ if (action === 'cmdOk') {
+ handler.resolve(cmdData.args)
+ }
+ } else {
+ console.error('command not found', id, cmdData, [...this.pendingCmds.keys()]);
+ }
+ }
+
+ handleReplMessage(event) {
+ const { action, args } = event.data;
+
+ if (action === 'cmdError' || action === 'cmdOk') {
+ this.handleCommandMessage(event.data);
+ }
+
+ if (action === 'fetch_progress') {
+ this.handlers.onFetchProgress(args.remaining)
+ }
+ }
+
+ eval(script) {
+ return this.iframeCommand('eval', { script });
+ }
+
+ handleLinks() {
+ return this.iframeCommand('catch_clicks', {});
+ }
+
+ fetchImports(imports, import_map) {
+ return this.iframeCommand('fetch_imports', { imports, import_map })
+ }
+}
\ No newline at end of file
diff --git a/site/src/components/Repl/Output/Viewer.svelte b/site/src/components/Repl/Output/Viewer.svelte
new file mode 100644
index 0000000000..f5fcb0295e
--- /dev/null
+++ b/site/src/components/Repl/Output/Viewer.svelte
@@ -0,0 +1,155 @@
+
+
+
+
+
+
+
+
+ {#if $bundle}
+ {#if $bundle.error}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/site/src/routes/repl/_utils/getLocationFromStack.js b/site/src/components/Repl/Output/getLocationFromStack.js
similarity index 100%
rename from site/src/routes/repl/_utils/getLocationFromStack.js
rename to site/src/components/Repl/Output/getLocationFromStack.js
diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte
new file mode 100644
index 0000000000..ae648cde9d
--- /dev/null
+++ b/site/src/components/Repl/Output/index.svelte
@@ -0,0 +1,177 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if embedded}
+
+
+
+
+
+ {/if}
+
+
+
+
+
+
+ Compiler options
+ +
+
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/SplitPane.svelte b/site/src/components/Repl/SplitPane.svelte
similarity index 99%
rename from site/src/routes/repl/_components/SplitPane.svelte
rename to site/src/components/Repl/SplitPane.svelte
index a79ef8b775..d7106553f3 100644
--- a/site/src/routes/repl/_components/SplitPane.svelte
+++ b/site/src/components/Repl/SplitPane.svelte
@@ -71,6 +71,7 @@
}
.pane {
+ position: relative;
float: left;
width: 100%;
height: 100%;
diff --git a/site/src/routes/repl/_components/_codemirror.js b/site/src/components/Repl/_codemirror.js
similarity index 100%
rename from site/src/routes/repl/_components/_codemirror.js
rename to site/src/components/Repl/_codemirror.js
diff --git a/site/src/routes/repl/_components/codemirror.css b/site/src/components/Repl/codemirror.css
similarity index 100%
rename from site/src/routes/repl/_components/codemirror.css
rename to site/src/components/Repl/codemirror.css
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte
new file mode 100644
index 0000000000..aa9a9fed93
--- /dev/null
+++ b/site/src/components/Repl/index.svelte
@@ -0,0 +1,230 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/each}
+
\ No newline at end of file
diff --git a/site/src/routes/gist/create.js b/site/src/routes/gist/create.js
index 601f21d466..1f55a51498 100644
--- a/site/src/routes/gist/create.js
+++ b/site/src/routes/gist/create.js
@@ -13,7 +13,7 @@ export async function post(req, res) {
}
try {
- const { name, components, json5 } = await body(req);
+ const { name, components } = await body(req);
const files = {
'meta.json': {
@@ -33,10 +33,6 @@ export async function post(req, res) {
files[file] = { content: component.source };
});
- if (json5) {
- files['data.json5'] = { content: json5 };
- }
-
const r = await fetch(`https://api.github.com/gists`, {
method: 'POST',
headers: {
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index 75488610a6..edde4372c6 100644
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@@ -107,11 +107,6 @@
top: 0.6em;
}
- h6 {
- max-width: 25em;
- padding: 2.4rem;
- }
-
.example {
background: var(--second);
color: white;
@@ -238,7 +233,7 @@ npm run dev & open http://localhost:5000
@@ -250,7 +245,7 @@ npm run dev & open http://localhost:5000
@@ -262,7 +257,7 @@ npm run dev & open http://localhost:5000
@@ -274,7 +269,7 @@ npm run dev & open http://localhost:5000
diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte
index af4a0cf2e8..f02cdc8fd2 100644
--- a/site/src/routes/repl/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/_components/AppControls/index.svelte
@@ -1,17 +1,15 @@
-
-
-
-
-
diff --git a/site/src/routes/repl/_components/Input/ModuleEditor.svelte b/site/src/routes/repl/_components/Input/ModuleEditor.svelte
deleted file mode 100644
index 1b72f3aa31..0000000000
--- a/site/src/routes/repl/_components/Input/ModuleEditor.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
-
-
- {#each $component_store as component}
-
- {/each}
-
-
-
-
- {#if component}
-
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Input/index.svelte b/site/src/routes/repl/_components/Input/index.svelte
deleted file mode 100644
index d858257b3d..0000000000
--- a/site/src/routes/repl/_components/Input/index.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Output/Viewer.svelte b/site/src/routes/repl/_components/Output/Viewer.svelte
deleted file mode 100644
index f4e9f868fa..0000000000
--- a/site/src/routes/repl/_components/Output/Viewer.svelte
+++ /dev/null
@@ -1,330 +0,0 @@
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Output/index.svelte b/site/src/routes/repl/_components/Output/index.svelte
deleted file mode 100644
index b97ec17aa6..0000000000
--- a/site/src/routes/repl/_components/Output/index.svelte
+++ /dev/null
@@ -1,196 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-{#if view === 'result'}
-
- {#if bundle}
-
-
- Props editor
- - {#if props} - {#if props.length > 0} -
- {#each props.sort() as prop (prop)}
-
- {:else}
- {prop}
-
-
-
-
-
-
- {/if}
- {/if}
- This component has no props — declare props with the export keyword
-
-
-
- Compiler options
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-${prefix}
`;
+ };
+
+ let html = marked(content, { renderer });
+ if (found.chapter.startsWith('01')) {
+ const meta = JSON.parse(fs.readFileSync(`content/tutorial/${found.section}/meta.json`));
+ html = `${highlighted}${meta.title}
\n${html}`; + } + + function get_file(stage, file) { + const ext = path.extname(file); + const name = file.slice(0, -ext.length); + const type = ext.slice(1); + + return { + name, + type, + source: fs.readFileSync(`${dir}/${stage}/${file}`, 'utf-8') + }; + } + + return { + html, + app_a: app_a.map(file => get_file('app-a', file)), + app_b: app_b && app_b.map(file => get_file('app-b', file)) + }; +} + +export function get(req, res) { + const { slug } = req.params; + + if (!cache.has(slug) || process.env.NODE_ENV !== 'production') { + cache.set(slug, JSON.stringify(get_tutorial(slug))); + } + + const json = cache.get(slug); + + res.set({ + 'Content-Type': 'application/json' + }); + + if (json) { + res.end(json); + } else { + res.statusCode = 404; + res.end(JSON.stringify({ message: 'not found' })); + } +} \ No newline at end of file diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte new file mode 100644 index 0000000000..eca5686270 --- /dev/null +++ b/site/src/routes/tutorial/[slug]/index.svelte @@ -0,0 +1,261 @@ + + + + + + +
+
diff --git a/site/src/routes/tutorial/_layout.svelte b/site/src/routes/tutorial/_layout.svelte
new file mode 100644
index 0000000000..c424fac2e6
--- /dev/null
+++ b/site/src/routes/tutorial/_layout.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+ {@html chapter.html}
+
+
+
+ {#if chapter.app_b}
+
+
+ {/if}
+
+ {#if selected.next}
+ Next
+
+
+
+
+
+Hello world!
\ No newline at end of file diff --git a/test/cli/samples/custom-element/command.sh b/test/cli/samples/custom-element/command.sh deleted file mode 100644 index ee9f854e9b..0000000000 --- a/test/cli/samples/custom-element/command.sh +++ /dev/null @@ -1 +0,0 @@ -svelte compile src/Main.svelte --customElement > actual/Main.js diff --git a/test/cli/samples/custom-element/expected/Main.js b/test/cli/samples/custom-element/expected/Main.js deleted file mode 100644 index f6befc4e3b..0000000000 --- a/test/cli/samples/custom-element/expected/Main.js +++ /dev/null @@ -1,212 +0,0 @@ -/* src/Main.svelte generated by Svelte vx.y.z */ - -function create_main_fragment(component, ctx) { - var p; - - return { - c() { - p = createElement("p"); - p.textContent = "Hello world!"; - this.c = noop; - }, - - m(target, anchor) { - insert(target, p, anchor); - }, - - p: noop, - - d(detach) { - if (detach) { - detachNode(p); - } - } - }; -} - -class Main extends HTMLElement { - constructor(options = {}) { - super(); - init(this, options); - this._state = assign({}, options.data); - this._intro = true; - - this.attachShadow({ mode: 'open' }); - - this._fragment = create_main_fragment(this, this._state); - - this._fragment.c(); - this._fragment.m(this.shadowRoot, null); - - if (options.target) this._mount(options.target, options.anchor); - } - - static get observedAttributes() { - return []; - } - - attributeChangedCallback(attr, oldValue, newValue) { - this.set({ [attr]: newValue }); - } -} - -assign(Main.prototype, { - destroy: destroy, - get: get, - fire: fire, - on: on, - set: set, - _set: _set, - _stage: _stage, - _mount: _mount, - _differs: _differs - }); -assign(Main.prototype, { - _mount(target, anchor) { - target.insertBefore(this, anchor); - } -}); - -customElements.define("my-element", Main); - -Main.prototype._recompute = noop; - -function createElement(name) { - return document.createElement(name); -} - -function noop() {} - -function insert(target, node, anchor) { - target.insertBefore(node, anchor); -} - -function detachNode(node) { - node.parentNode.removeChild(node); -} - -function init(component, options) { - component._handlers = blankObject(); - component._slots = blankObject(); - component._bind = options._bind; - component._staged = {}; - - component.options = options; - component.root = options.root || component; - component.store = options.store || component.root.store; - - if (!options.root) { - component._beforecreate = []; - component._oncreate = []; - component._aftercreate = []; - } -} - -function assign(tar, src) { - for (var k in src) tar[k] = src[k]; - return tar; -} - -function destroy(detach) { - this.destroy = noop; - this.fire('destroy'); - this.set = noop; - - this._fragment.d(detach !== false); - this._fragment = null; - this._state = {}; -} - -function get() { - return this._state; -} - -function fire(eventName, data) { - var handlers = - eventName in this._handlers && this._handlers[eventName].slice(); - if (!handlers) return; - - for (var i = 0; i < handlers.length; i += 1) { - var handler = handlers[i]; - - if (!handler.__calling) { - try { - handler.__calling = true; - handler.call(this, data); - } finally { - handler.__calling = false; - } - } - } -} - -function on(eventName, handler) { - var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); - handlers.push(handler); - - return { - cancel: function() { - var index = handlers.indexOf(handler); - if (~index) handlers.splice(index, 1); - } - }; -} - -function set(newState) { - this._set(assign({}, newState)); - if (this.root._lock) return; - flush(this.root); -} - -function _set(newState) { - var oldState = this._state, - changed = {}, - dirty = false; - - newState = assign(this._staged, newState); - this._staged = {}; - - for (var key in newState) { - if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; - } - if (!dirty) return; - - this._state = assign(assign({}, oldState), newState); - this._recompute(changed, this._state); - if (this._bind) this._bind(changed, this._state); - - if (this._fragment) { - this.fire("state", { changed: changed, current: this._state, previous: oldState }); - this._fragment.p(changed, this._state); - this.fire("update", { changed: changed, current: this._state, previous: oldState }); - } -} - -function _stage(newState) { - assign(this._staged, newState); -} - -function _mount(target, anchor) { - this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); -} - -function _differs(a, b) { - return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); -} - -function blankObject() { - return Object.create(null); -} - -function flush(component) { - component._lock = true; - callAll(component._beforecreate); - callAll(component._oncreate); - callAll(component._aftercreate); - component._lock = false; -} - -function callAll(fns) { - while (fns && fns.length) fns.shift()(); -} -export default Main; \ No newline at end of file diff --git a/test/cli/samples/custom-element/src/Main.svelte b/test/cli/samples/custom-element/src/Main.svelte deleted file mode 100644 index 6323e9e8d1..0000000000 --- a/test/cli/samples/custom-element/src/Main.svelte +++ /dev/null @@ -1,3 +0,0 @@ -Hello world!
diff --git a/test/cli/samples/dev/command.sh b/test/cli/samples/dev/command.sh deleted file mode 100644 index b9dc99e7d1..0000000000 --- a/test/cli/samples/dev/command.sh +++ /dev/null @@ -1 +0,0 @@ -svelte compile src/Main.svelte -d > actual/Main.js \ No newline at end of file diff --git a/test/cli/samples/dev/expected/Main.js b/test/cli/samples/dev/expected/Main.js deleted file mode 100644 index db75c4a5c1..0000000000 --- a/test/cli/samples/dev/expected/Main.js +++ /dev/null @@ -1,227 +0,0 @@ -/* src/Main.svelte generated by Svelte v2.13.4 */ - -const file = "src/Main.svelte"; - -function create_main_fragment(component, ctx) { - var p; - - return { - c: function create() { - p = createElement("p"); - p.textContent = "Hello world!"; - addLoc(p, file, 0, 0, 0); - }, - - m: function mount(target, anchor) { - insert(target, p, anchor); - }, - - p: noop, - - d: function destroy(detach) { - if (detach) { - detachNode(p); - } - } - }; -} - -function Main(options) { - this._debugName = 'Hello world!
\ No newline at end of file diff --git a/test/cli/samples/dir-sourcemap/command.sh b/test/cli/samples/dir-sourcemap/command.sh deleted file mode 100644 index 37089f3f44..0000000000 --- a/test/cli/samples/dir-sourcemap/command.sh +++ /dev/null @@ -1 +0,0 @@ -svelte compile src -m -o actual \ No newline at end of file diff --git a/test/cli/samples/dir-sourcemap/expected/Main.js b/test/cli/samples/dir-sourcemap/expected/Main.js deleted file mode 100644 index e164569e1c..0000000000 --- a/test/cli/samples/dir-sourcemap/expected/Main.js +++ /dev/null @@ -1,186 +0,0 @@ -/* src/Main.svelte generated by Svelte vx.y.z */ -import Widget from './Widget.svelte'; - - - -function create_main_fragment(component, ctx) { - - var widget = new Widget({ - root: component.root, - store: component.store - }); - - return { - c() { - widget._fragment.c(); - }, - - m(target, anchor) { - widget._mount(target, anchor); - }, - - p: noop, - - d(detach) { - widget.destroy(detach); - } - }; -} - -function Main(options) { - init(this, options); - this._state = assign({}, options.data); - this._intro = true; - - this._fragment = create_main_fragment(this, this._state); - - if (options.target) { - this._fragment.c(); - this._mount(options.target, options.anchor); - - flush(this); - } -} - -assign(Main.prototype, { - destroy: destroy, - get: get, - fire: fire, - on: on, - set: set, - _set: _set, - _stage: _stage, - _mount: _mount, - _differs: _differs - }); - -Main.prototype._recompute = noop; - -function noop() {} - -function init(component, options) { - component._handlers = blankObject(); - component._slots = blankObject(); - component._bind = options._bind; - component._staged = {}; - - component.options = options; - component.root = options.root || component; - component.store = options.store || component.root.store; - - if (!options.root) { - component._beforecreate = []; - component._oncreate = []; - component._aftercreate = []; - } -} - -function assign(tar, src) { - for (var k in src) tar[k] = src[k]; - return tar; -} - -function flush(component) { - component._lock = true; - callAll(component._beforecreate); - callAll(component._oncreate); - callAll(component._aftercreate); - component._lock = false; -} - -function destroy(detach) { - this.destroy = noop; - this.fire('destroy'); - this.set = noop; - - this._fragment.d(detach !== false); - this._fragment = null; - this._state = {}; -} - -function get() { - return this._state; -} - -function fire(eventName, data) { - var handlers = - eventName in this._handlers && this._handlers[eventName].slice(); - if (!handlers) return; - - for (var i = 0; i < handlers.length; i += 1) { - var handler = handlers[i]; - - if (!handler.__calling) { - try { - handler.__calling = true; - handler.call(this, data); - } finally { - handler.__calling = false; - } - } - } -} - -function on(eventName, handler) { - var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); - handlers.push(handler); - - return { - cancel: function() { - var index = handlers.indexOf(handler); - if (~index) handlers.splice(index, 1); - } - }; -} - -function set(newState) { - this._set(assign({}, newState)); - if (this.root._lock) return; - flush(this.root); -} - -function _set(newState) { - var oldState = this._state, - changed = {}, - dirty = false; - - newState = assign(this._staged, newState); - this._staged = {}; - - for (var key in newState) { - if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; - } - if (!dirty) return; - - this._state = assign(assign({}, oldState), newState); - this._recompute(changed, this._state); - if (this._bind) this._bind(changed, this._state); - - if (this._fragment) { - this.fire("state", { changed: changed, current: this._state, previous: oldState }); - this._fragment.p(changed, this._state); - this.fire("update", { changed: changed, current: this._state, previous: oldState }); - } -} - -function _stage(newState) { - assign(this._staged, newState); -} - -function _mount(target, anchor) { - this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); -} - -function _differs(a, b) { - return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); -} - -function blankObject() { - return Object.create(null); -} - -function callAll(fns) { - while (fns && fns.length) fns.shift()(); -} -export default Main; -//# sourceMappingURL=Main.js.map diff --git a/test/cli/samples/dir-sourcemap/expected/Main.js.map b/test/cli/samples/dir-sourcemap/expected/Main.js.map deleted file mode 100644 index a0f4cf48c7..0000000000 --- a/test/cli/samples/dir-sourcemap/expected/Main.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"Main.js","sources":["../src/Main.svelte"],"sourcesContent":["widget
"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} \ No newline at end of file diff --git a/test/cli/samples/dir-sourcemap/src/Main.svelte b/test/cli/samples/dir-sourcemap/src/Main.svelte deleted file mode 100644 index 0a9d5bba87..0000000000 --- a/test/cli/samples/dir-sourcemap/src/Main.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - -widget
\ No newline at end of file diff --git a/test/cli/samples/dir-subdir/command.sh b/test/cli/samples/dir-subdir/command.sh deleted file mode 100644 index 10067cb1f9..0000000000 --- a/test/cli/samples/dir-subdir/command.sh +++ /dev/null @@ -1 +0,0 @@ -svelte compile src -o actual \ No newline at end of file diff --git a/test/cli/samples/dir-subdir/expected/Main.js b/test/cli/samples/dir-subdir/expected/Main.js deleted file mode 100644 index 3026a122e2..0000000000 --- a/test/cli/samples/dir-subdir/expected/Main.js +++ /dev/null @@ -1,185 +0,0 @@ -/* src/Main.svelte generated by Svelte vx.y.z */ -import Widget from './widget/Widget.svelte'; - - - -function create_main_fragment(component, ctx) { - - var widget = new Widget({ - root: component.root, - store: component.store - }); - - return { - c() { - widget._fragment.c(); - }, - - m(target, anchor) { - widget._mount(target, anchor); - }, - - p: noop, - - d(detach) { - widget.destroy(detach); - } - }; -} - -function Main(options) { - init(this, options); - this._state = assign({}, options.data); - this._intro = true; - - this._fragment = create_main_fragment(this, this._state); - - if (options.target) { - this._fragment.c(); - this._mount(options.target, options.anchor); - - flush(this); - } -} - -assign(Main.prototype, { - destroy: destroy, - get: get, - fire: fire, - on: on, - set: set, - _set: _set, - _stage: _stage, - _mount: _mount, - _differs: _differs - }); - -Main.prototype._recompute = noop; - -function noop() {} - -function init(component, options) { - component._handlers = blankObject(); - component._slots = blankObject(); - component._bind = options._bind; - component._staged = {}; - - component.options = options; - component.root = options.root || component; - component.store = options.store || component.root.store; - - if (!options.root) { - component._beforecreate = []; - component._oncreate = []; - component._aftercreate = []; - } -} - -function assign(tar, src) { - for (var k in src) tar[k] = src[k]; - return tar; -} - -function flush(component) { - component._lock = true; - callAll(component._beforecreate); - callAll(component._oncreate); - callAll(component._aftercreate); - component._lock = false; -} - -function destroy(detach) { - this.destroy = noop; - this.fire('destroy'); - this.set = noop; - - this._fragment.d(detach !== false); - this._fragment = null; - this._state = {}; -} - -function get() { - return this._state; -} - -function fire(eventName, data) { - var handlers = - eventName in this._handlers && this._handlers[eventName].slice(); - if (!handlers) return; - - for (var i = 0; i < handlers.length; i += 1) { - var handler = handlers[i]; - - if (!handler.__calling) { - try { - handler.__calling = true; - handler.call(this, data); - } finally { - handler.__calling = false; - } - } - } -} - -function on(eventName, handler) { - var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); - handlers.push(handler); - - return { - cancel: function() { - var index = handlers.indexOf(handler); - if (~index) handlers.splice(index, 1); - } - }; -} - -function set(newState) { - this._set(assign({}, newState)); - if (this.root._lock) return; - flush(this.root); -} - -function _set(newState) { - var oldState = this._state, - changed = {}, - dirty = false; - - newState = assign(this._staged, newState); - this._staged = {}; - - for (var key in newState) { - if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; - } - if (!dirty) return; - - this._state = assign(assign({}, oldState), newState); - this._recompute(changed, this._state); - if (this._bind) this._bind(changed, this._state); - - if (this._fragment) { - this.fire("state", { changed: changed, current: this._state, previous: oldState }); - this._fragment.p(changed, this._state); - this.fire("update", { changed: changed, current: this._state, previous: oldState }); - } -} - -function _stage(newState) { - assign(this._staged, newState); -} - -function _mount(target, anchor) { - this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); -} - -function _differs(a, b) { - return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); -} - -function blankObject() { - return Object.create(null); -} - -function callAll(fns) { - while (fns && fns.length) fns.shift()(); -} -export default Main; \ No newline at end of file diff --git a/test/cli/samples/dir-subdir/expected/widget/Widget.js b/test/cli/samples/dir-subdir/expected/widget/Widget.js deleted file mode 100644 index e63ac2dad7..0000000000 --- a/test/cli/samples/dir-subdir/expected/widget/Widget.js +++ /dev/null @@ -1,191 +0,0 @@ -/* src/widget/Widget.svelte generated by Svelte vx.y.z */ - -function create_main_fragment(component, ctx) { - var p; - - return { - c() { - p = createElement("p"); - p.textContent = "widget"; - }, - - m(target, anchor) { - insert(target, p, anchor); - }, - - p: noop, - - d(detach) { - if (detach) { - detachNode(p); - } - } - }; -} - -function Widget(options) { - init(this, options); - this._state = assign({}, options.data); - this._intro = true; - - this._fragment = create_main_fragment(this, this._state); - - if (options.target) { - this._fragment.c(); - this._mount(options.target, options.anchor); - } -} - -assign(Widget.prototype, { - destroy: destroy, - get: get, - fire: fire, - on: on, - set: set, - _set: _set, - _stage: _stage, - _mount: _mount, - _differs: _differs - }); - -Widget.prototype._recompute = noop; - -function createElement(name) { - return document.createElement(name); -} - -function insert(target, node, anchor) { - target.insertBefore(node, anchor); -} - -function noop() {} - -function detachNode(node) { - node.parentNode.removeChild(node); -} - -function init(component, options) { - component._handlers = blankObject(); - component._slots = blankObject(); - component._bind = options._bind; - component._staged = {}; - - component.options = options; - component.root = options.root || component; - component.store = options.store || component.root.store; - - if (!options.root) { - component._beforecreate = []; - component._oncreate = []; - component._aftercreate = []; - } -} - -function assign(tar, src) { - for (var k in src) tar[k] = src[k]; - return tar; -} - -function destroy(detach) { - this.destroy = noop; - this.fire('destroy'); - this.set = noop; - - this._fragment.d(detach !== false); - this._fragment = null; - this._state = {}; -} - -function get() { - return this._state; -} - -function fire(eventName, data) { - var handlers = - eventName in this._handlers && this._handlers[eventName].slice(); - if (!handlers) return; - - for (var i = 0; i < handlers.length; i += 1) { - var handler = handlers[i]; - - if (!handler.__calling) { - try { - handler.__calling = true; - handler.call(this, data); - } finally { - handler.__calling = false; - } - } - } -} - -function on(eventName, handler) { - var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); - handlers.push(handler); - - return { - cancel: function() { - var index = handlers.indexOf(handler); - if (~index) handlers.splice(index, 1); - } - }; -} - -function set(newState) { - this._set(assign({}, newState)); - if (this.root._lock) return; - flush(this.root); -} - -function _set(newState) { - var oldState = this._state, - changed = {}, - dirty = false; - - newState = assign(this._staged, newState); - this._staged = {}; - - for (var key in newState) { - if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; - } - if (!dirty) return; - - this._state = assign(assign({}, oldState), newState); - this._recompute(changed, this._state); - if (this._bind) this._bind(changed, this._state); - - if (this._fragment) { - this.fire("state", { changed: changed, current: this._state, previous: oldState }); - this._fragment.p(changed, this._state); - this.fire("update", { changed: changed, current: this._state, previous: oldState }); - } -} - -function _stage(newState) { - assign(this._staged, newState); -} - -function _mount(target, anchor) { - this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); -} - -function _differs(a, b) { - return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); -} - -function blankObject() { - return Object.create(null); -} - -function flush(component) { - component._lock = true; - callAll(component._beforecreate); - callAll(component._oncreate); - callAll(component._aftercreate); - component._lock = false; -} - -function callAll(fns) { - while (fns && fns.length) fns.shift()(); -} -export default Widget; \ No newline at end of file diff --git a/test/cli/samples/dir-subdir/src/Main.svelte b/test/cli/samples/dir-subdir/src/Main.svelte deleted file mode 100644 index ac663b4338..0000000000 --- a/test/cli/samples/dir-subdir/src/Main.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - -widget
\ No newline at end of file diff --git a/test/cli/samples/dir/command.sh b/test/cli/samples/dir/command.sh deleted file mode 100644 index 10067cb1f9..0000000000 --- a/test/cli/samples/dir/command.sh +++ /dev/null @@ -1 +0,0 @@ -svelte compile src -o actual \ No newline at end of file diff --git a/test/cli/samples/dir/expected/Main.js b/test/cli/samples/dir/expected/Main.js deleted file mode 100644 index d87ac37939..0000000000 --- a/test/cli/samples/dir/expected/Main.js +++ /dev/null @@ -1,185 +0,0 @@ -/* src/Main.svelte generated by Svelte vx.y.z */ -import Widget from './Widget.svelte'; - - - -function create_main_fragment(component, ctx) { - - var widget = new Widget({ - root: component.root, - store: component.store - }); - - return { - c() { - widget._fragment.c(); - }, - - m(target, anchor) { - widget._mount(target, anchor); - }, - - p: noop, - - d(detach) { - widget.destroy(detach); - } - }; -} - -function Main(options) { - init(this, options); - this._state = assign({}, options.data); - this._intro = true; - - this._fragment = create_main_fragment(this, this._state); - - if (options.target) { - this._fragment.c(); - this._mount(options.target, options.anchor); - - flush(this); - } -} - -assign(Main.prototype, { - destroy: destroy, - get: get, - fire: fire, - on: on, - set: set, - _set: _set, - _stage: _stage, - _mount: _mount, - _differs: _differs - }); - -Main.prototype._recompute = noop; - -function noop() {} - -function init(component, options) { - component._handlers = blankObject(); - component._slots = blankObject(); - component._bind = options._bind; - component._staged = {}; - - component.options = options; - component.root = options.root || component; - component.store = options.store || component.root.store; - - if (!options.root) { - component._beforecreate = []; - component._oncreate = []; - component._aftercreate = []; - } -} - -function assign(tar, src) { - for (var k in src) tar[k] = src[k]; - return tar; -} - -function flush(component) { - component._lock = true; - callAll(component._beforecreate); - callAll(component._oncreate); - callAll(component._aftercreate); - component._lock = false; -} - -function destroy(detach) { - this.destroy = noop; - this.fire('destroy'); - this.set = noop; - - this._fragment.d(detach !== false); - this._fragment = null; - this._state = {}; -} - -function get() { - return this._state; -} - -function fire(eventName, data) { - var handlers = - eventName in this._handlers && this._handlers[eventName].slice(); - if (!handlers) return; - - for (var i = 0; i < handlers.length; i += 1) { - var handler = handlers[i]; - - if (!handler.__calling) { - try { - handler.__calling = true; - handler.call(this, data); - } finally { - handler.__calling = false; - } - } - } -} - -function on(eventName, handler) { - var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); - handlers.push(handler); - - return { - cancel: function() { - var index = handlers.indexOf(handler); - if (~index) handlers.splice(index, 1); - } - }; -} - -function set(newState) { - this._set(assign({}, newState)); - if (this.root._lock) return; - flush(this.root); -} - -function _set(newState) { - var oldState = this._state, - changed = {}, - dirty = false; - - newState = assign(this._staged, newState); - this._staged = {}; - - for (var key in newState) { - if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; - } - if (!dirty) return; - - this._state = assign(assign({}, oldState), newState); - this._recompute(changed, this._state); - if (this._bind) this._bind(changed, this._state); - - if (this._fragment) { - this.fire("state", { changed: changed, current: this._state, previous: oldState }); - this._fragment.p(changed, this._state); - this.fire("update", { changed: changed, current: this._state, previous: oldState }); - } -} - -function _stage(newState) { - assign(this._staged, newState); -} - -function _mount(target, anchor) { - this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); -} - -function _differs(a, b) { - return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); -} - -function blankObject() { - return Object.create(null); -} - -function callAll(fns) { - while (fns && fns.length) fns.shift()(); -} -export default Main; \ No newline at end of file diff --git a/test/cli/samples/dir/expected/Widget.js b/test/cli/samples/dir/expected/Widget.js deleted file mode 100644 index eeb37e3cfa..0000000000 --- a/test/cli/samples/dir/expected/Widget.js +++ /dev/null @@ -1,191 +0,0 @@ -/* src/Widget.svelte generated by Svelte vx.y.z */ - -function create_main_fragment(component, ctx) { - var p; - - return { - c() { - p = createElement("p"); - p.textContent = "widget"; - }, - - m(target, anchor) { - insert(target, p, anchor); - }, - - p: noop, - - d(detach) { - if (detach) { - detachNode(p); - } - } - }; -} - -function Widget(options) { - init(this, options); - this._state = assign({}, options.data); - this._intro = true; - - this._fragment = create_main_fragment(this, this._state); - - if (options.target) { - this._fragment.c(); - this._mount(options.target, options.anchor); - } -} - -assign(Widget.prototype, { - destroy: destroy, - get: get, - fire: fire, - on: on, - set: set, - _set: _set, - _stage: _stage, - _mount: _mount, - _differs: _differs - }); - -Widget.prototype._recompute = noop; - -function createElement(name) { - return document.createElement(name); -} - -function insert(target, node, anchor) { - target.insertBefore(node, anchor); -} - -function noop() {} - -function detachNode(node) { - node.parentNode.removeChild(node); -} - -function init(component, options) { - component._handlers = blankObject(); - component._slots = blankObject(); - component._bind = options._bind; - component._staged = {}; - - component.options = options; - component.root = options.root || component; - component.store = options.store || component.root.store; - - if (!options.root) { - component._beforecreate = []; - component._oncreate = []; - component._aftercreate = []; - } -} - -function assign(tar, src) { - for (var k in src) tar[k] = src[k]; - return tar; -} - -function destroy(detach) { - this.destroy = noop; - this.fire('destroy'); - this.set = noop; - - this._fragment.d(detach !== false); - this._fragment = null; - this._state = {}; -} - -function get() { - return this._state; -} - -function fire(eventName, data) { - var handlers = - eventName in this._handlers && this._handlers[eventName].slice(); - if (!handlers) return; - - for (var i = 0; i < handlers.length; i += 1) { - var handler = handlers[i]; - - if (!handler.__calling) { - try { - handler.__calling = true; - handler.call(this, data); - } finally { - handler.__calling = false; - } - } - } -} - -function on(eventName, handler) { - var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); - handlers.push(handler); - - return { - cancel: function() { - var index = handlers.indexOf(handler); - if (~index) handlers.splice(index, 1); - } - }; -} - -function set(newState) { - this._set(assign({}, newState)); - if (this.root._lock) return; - flush(this.root); -} - -function _set(newState) { - var oldState = this._state, - changed = {}, - dirty = false; - - newState = assign(this._staged, newState); - this._staged = {}; - - for (var key in newState) { - if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; - } - if (!dirty) return; - - this._state = assign(assign({}, oldState), newState); - this._recompute(changed, this._state); - if (this._bind) this._bind(changed, this._state); - - if (this._fragment) { - this.fire("state", { changed: changed, current: this._state, previous: oldState }); - this._fragment.p(changed, this._state); - this.fire("update", { changed: changed, current: this._state, previous: oldState }); - } -} - -function _stage(newState) { - assign(this._staged, newState); -} - -function _mount(target, anchor) { - this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); -} - -function _differs(a, b) { - return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); -} - -function blankObject() { - return Object.create(null); -} - -function flush(component) { - component._lock = true; - callAll(component._beforecreate); - callAll(component._oncreate); - callAll(component._aftercreate); - component._lock = false; -} - -function callAll(fns) { - while (fns && fns.length) fns.shift()(); -} -export default Widget; \ No newline at end of file diff --git a/test/cli/samples/dir/src/Main.svelte b/test/cli/samples/dir/src/Main.svelte deleted file mode 100644 index 0a9d5bba87..0000000000 --- a/test/cli/samples/dir/src/Main.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - -widget
\ No newline at end of file diff --git a/test/cli/samples/globals/command.sh b/test/cli/samples/globals/command.sh deleted file mode 100644 index 9e1a2de74a..0000000000 --- a/test/cli/samples/globals/command.sh +++ /dev/null @@ -1 +0,0 @@ -svelte compile src/Main.svelte -f iife -g the-answer:theAnswer > actual/Main.js \ No newline at end of file diff --git a/test/cli/samples/globals/expected/Main.js b/test/cli/samples/globals/expected/Main.js deleted file mode 100644 index 8e526b08bf..0000000000 --- a/test/cli/samples/globals/expected/Main.js +++ /dev/null @@ -1,219 +0,0 @@ -/* src/Main.svelte generated by Svelte vx.y.z */ -var Main = (function(answer) { "use strict"; - answer = (answer && answer.__esModule) ? answer["default"] : answer; - - function data() { - return { - answer: answer - }; -}; - - function create_main_fragment(component, ctx) { - var p, text0, text1; - - return { - c() { - p = createElement("p"); - text0 = createText("The answer is "); - text1 = createText(ctx.answer); - }, - - m(target, anchor) { - insert(target, p, anchor); - append(p, text0); - append(p, text1); - }, - - p(changed, ctx) { - if (changed.answer) { - setData(text1, ctx.answer); - } - }, - - d(detach) { - if (detach) { - detachNode(p); - } - } - }; - } - - function Main(options) { - init(this, options); - this._state = assign(data(), options.data); - this._intro = true; - - this._fragment = create_main_fragment(this, this._state); - - if (options.target) { - this._fragment.c(); - this._mount(options.target, options.anchor); - } - } - - assign(Main.prototype, { - destroy: destroy, - get: get, - fire: fire, - on: on, - set: set, - _set: _set, - _stage: _stage, - _mount: _mount, - _differs: _differs - }); - - Main.prototype._recompute = noop; - - function createElement(name) { - return document.createElement(name); - } - - function createText(data) { - return document.createTextNode(data); - } - - function insert(target, node, anchor) { - target.insertBefore(node, anchor); - } - - function append(target, node) { - target.appendChild(node); - } - - function setData(text, data) { - text.data = '' + data; - } - - function detachNode(node) { - node.parentNode.removeChild(node); - } - - function init(component, options) { - component._handlers = blankObject(); - component._slots = blankObject(); - component._bind = options._bind; - component._staged = {}; - - component.options = options; - component.root = options.root || component; - component.store = options.store || component.root.store; - - if (!options.root) { - component._beforecreate = []; - component._oncreate = []; - component._aftercreate = []; - } - } - - function assign(tar, src) { - for (var k in src) tar[k] = src[k]; - return tar; - } - - function destroy(detach) { - this.destroy = noop; - this.fire('destroy'); - this.set = noop; - - this._fragment.d(detach !== false); - this._fragment = null; - this._state = {}; - } - - function get() { - return this._state; - } - - function fire(eventName, data) { - var handlers = - eventName in this._handlers && this._handlers[eventName].slice(); - if (!handlers) return; - - for (var i = 0; i < handlers.length; i += 1) { - var handler = handlers[i]; - - if (!handler.__calling) { - try { - handler.__calling = true; - handler.call(this, data); - } finally { - handler.__calling = false; - } - } - } - } - - function on(eventName, handler) { - var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); - handlers.push(handler); - - return { - cancel: function() { - var index = handlers.indexOf(handler); - if (~index) handlers.splice(index, 1); - } - }; - } - - function set(newState) { - this._set(assign({}, newState)); - if (this.root._lock) return; - flush(this.root); - } - - function _set(newState) { - var oldState = this._state, - changed = {}, - dirty = false; - - newState = assign(this._staged, newState); - this._staged = {}; - - for (var key in newState) { - if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; - } - if (!dirty) return; - - this._state = assign(assign({}, oldState), newState); - this._recompute(changed, this._state); - if (this._bind) this._bind(changed, this._state); - - if (this._fragment) { - this.fire("state", { changed: changed, current: this._state, previous: oldState }); - this._fragment.p(changed, this._state); - this.fire("update", { changed: changed, current: this._state, previous: oldState }); - } - } - - function _stage(newState) { - assign(this._staged, newState); - } - - function _mount(target, anchor) { - this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); - } - - function _differs(a, b) { - return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); - } - - function noop() {} - - function blankObject() { - return Object.create(null); - } - - function flush(component) { - component._lock = true; - callAll(component._beforecreate); - callAll(component._oncreate); - callAll(component._aftercreate); - component._lock = false; - } - - function callAll(fns) { - while (fns && fns.length) fns.shift()(); - } - return Main; -}(theAnswer)); \ No newline at end of file diff --git a/test/cli/samples/globals/src/Main.svelte b/test/cli/samples/globals/src/Main.svelte deleted file mode 100644 index 2fc0383a67..0000000000 --- a/test/cli/samples/globals/src/Main.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - -The answer is {answer}
\ No newline at end of file diff --git a/test/cli/samples/sourcemap-inline/command.sh b/test/cli/samples/sourcemap-inline/command.sh deleted file mode 100644 index 073fa7d259..0000000000 --- a/test/cli/samples/sourcemap-inline/command.sh +++ /dev/null @@ -1 +0,0 @@ -svelte compile src/Main.svelte -m inline -o actual/Main.js \ No newline at end of file diff --git a/test/cli/samples/sourcemap-inline/expected/Main.js b/test/cli/samples/sourcemap-inline/expected/Main.js deleted file mode 100644 index 534c6734f2..0000000000 --- a/test/cli/samples/sourcemap-inline/expected/Main.js +++ /dev/null @@ -1,192 +0,0 @@ -/* src/Main.svelte generated by Svelte vx.y.z */ - -function create_main_fragment(component, ctx) { - var p; - - return { - c() { - p = createElement("p"); - p.textContent = "Hello world!"; - }, - - m(target, anchor) { - insert(target, p, anchor); - }, - - p: noop, - - d(detach) { - if (detach) { - detachNode(p); - } - } - }; -} - -function Main(options) { - init(this, options); - this._state = assign({}, options.data); - this._intro = true; - - this._fragment = create_main_fragment(this, this._state); - - if (options.target) { - this._fragment.c(); - this._mount(options.target, options.anchor); - } -} - -assign(Main.prototype, { - destroy: destroy, - get: get, - fire: fire, - on: on, - set: set, - _set: _set, - _stage: _stage, - _mount: _mount, - _differs: _differs - }); - -Main.prototype._recompute = noop; - -function createElement(name) { - return document.createElement(name); -} - -function insert(target, node, anchor) { - target.insertBefore(node, anchor); -} - -function noop() {} - -function detachNode(node) { - node.parentNode.removeChild(node); -} - -function init(component, options) { - component._handlers = blankObject(); - component._slots = blankObject(); - component._bind = options._bind; - component._staged = {}; - - component.options = options; - component.root = options.root || component; - component.store = options.store || component.root.store; - - if (!options.root) { - component._beforecreate = []; - component._oncreate = []; - component._aftercreate = []; - } -} - -function assign(tar, src) { - for (var k in src) tar[k] = src[k]; - return tar; -} - -function destroy(detach) { - this.destroy = noop; - this.fire('destroy'); - this.set = noop; - - this._fragment.d(detach !== false); - this._fragment = null; - this._state = {}; -} - -function get() { - return this._state; -} - -function fire(eventName, data) { - var handlers = - eventName in this._handlers && this._handlers[eventName].slice(); - if (!handlers) return; - - for (var i = 0; i < handlers.length; i += 1) { - var handler = handlers[i]; - - if (!handler.__calling) { - try { - handler.__calling = true; - handler.call(this, data); - } finally { - handler.__calling = false; - } - } - } -} - -function on(eventName, handler) { - var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); - handlers.push(handler); - - return { - cancel: function() { - var index = handlers.indexOf(handler); - if (~index) handlers.splice(index, 1); - } - }; -} - -function set(newState) { - this._set(assign({}, newState)); - if (this.root._lock) return; - flush(this.root); -} - -function _set(newState) { - var oldState = this._state, - changed = {}, - dirty = false; - - newState = assign(this._staged, newState); - this._staged = {}; - - for (var key in newState) { - if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; - } - if (!dirty) return; - - this._state = assign(assign({}, oldState), newState); - this._recompute(changed, this._state); - if (this._bind) this._bind(changed, this._state); - - if (this._fragment) { - this.fire("state", { changed: changed, current: this._state, previous: oldState }); - this._fragment.p(changed, this._state); - this.fire("update", { changed: changed, current: this._state, previous: oldState }); - } -} - -function _stage(newState) { - assign(this._staged, newState); -} - -function _mount(target, anchor) { - this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); -} - -function _differs(a, b) { - return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); -} - -function blankObject() { - return Object.create(null); -} - -function flush(component) { - component._lock = true; - callAll(component._beforecreate); - callAll(component._oncreate); - callAll(component._aftercreate); - component._lock = false; -} - -function callAll(fns) { - while (fns && fns.length) fns.shift()(); -} -export default Main; -//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTWFpbi5qcyIsInNvdXJjZXMiOlsiLi4vc3JjL01haW4uaHRtbCJdLCJzb3VyY2VzQ29udGVudCI6WyI8cD5IZWxsbyB3b3JsZCE8L3A+XG5cbjxzY3JpcHQ+XG5cdGV4cG9ydCBkZWZhdWx0IHtcblx0XHRvbnJlbmRlciAoKSB7XG5cdFx0XHRjb25zb2xlLmxvZyggJ2hlcmUnICk7XG5cdFx0fVxuXHR9O1xuPC9zY3JpcHQ+Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0= diff --git a/test/cli/samples/sourcemap-inline/src/Main.svelte b/test/cli/samples/sourcemap-inline/src/Main.svelte deleted file mode 100644 index 6f3f80bbff..0000000000 --- a/test/cli/samples/sourcemap-inline/src/Main.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - -Hello world!
\ No newline at end of file diff --git a/test/cli/samples/sourcemap/command.sh b/test/cli/samples/sourcemap/command.sh deleted file mode 100644 index 9164b1760c..0000000000 --- a/test/cli/samples/sourcemap/command.sh +++ /dev/null @@ -1 +0,0 @@ -svelte compile src/Main.svelte -m -o actual/Main.js \ No newline at end of file diff --git a/test/cli/samples/sourcemap/expected/Main.js b/test/cli/samples/sourcemap/expected/Main.js deleted file mode 100644 index 59059aadcb..0000000000 --- a/test/cli/samples/sourcemap/expected/Main.js +++ /dev/null @@ -1,192 +0,0 @@ -/* src/Main.svelte generated by Svelte vx.y.z */ - -function create_main_fragment(component, ctx) { - var p; - - return { - c() { - p = createElement("p"); - p.textContent = "Hello world!"; - }, - - m(target, anchor) { - insert(target, p, anchor); - }, - - p: noop, - - d(detach) { - if (detach) { - detachNode(p); - } - } - }; -} - -function Main(options) { - init(this, options); - this._state = assign({}, options.data); - this._intro = true; - - this._fragment = create_main_fragment(this, this._state); - - if (options.target) { - this._fragment.c(); - this._mount(options.target, options.anchor); - } -} - -assign(Main.prototype, { - destroy: destroy, - get: get, - fire: fire, - on: on, - set: set, - _set: _set, - _stage: _stage, - _mount: _mount, - _differs: _differs - }); - -Main.prototype._recompute = noop; - -function createElement(name) { - return document.createElement(name); -} - -function insert(target, node, anchor) { - target.insertBefore(node, anchor); -} - -function noop() {} - -function detachNode(node) { - node.parentNode.removeChild(node); -} - -function init(component, options) { - component._handlers = blankObject(); - component._slots = blankObject(); - component._bind = options._bind; - component._staged = {}; - - component.options = options; - component.root = options.root || component; - component.store = options.store || component.root.store; - - if (!options.root) { - component._beforecreate = []; - component._oncreate = []; - component._aftercreate = []; - } -} - -function assign(tar, src) { - for (var k in src) tar[k] = src[k]; - return tar; -} - -function destroy(detach) { - this.destroy = noop; - this.fire('destroy'); - this.set = noop; - - this._fragment.d(detach !== false); - this._fragment = null; - this._state = {}; -} - -function get() { - return this._state; -} - -function fire(eventName, data) { - var handlers = - eventName in this._handlers && this._handlers[eventName].slice(); - if (!handlers) return; - - for (var i = 0; i < handlers.length; i += 1) { - var handler = handlers[i]; - - if (!handler.__calling) { - try { - handler.__calling = true; - handler.call(this, data); - } finally { - handler.__calling = false; - } - } - } -} - -function on(eventName, handler) { - var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); - handlers.push(handler); - - return { - cancel: function() { - var index = handlers.indexOf(handler); - if (~index) handlers.splice(index, 1); - } - }; -} - -function set(newState) { - this._set(assign({}, newState)); - if (this.root._lock) return; - flush(this.root); -} - -function _set(newState) { - var oldState = this._state, - changed = {}, - dirty = false; - - newState = assign(this._staged, newState); - this._staged = {}; - - for (var key in newState) { - if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; - } - if (!dirty) return; - - this._state = assign(assign({}, oldState), newState); - this._recompute(changed, this._state); - if (this._bind) this._bind(changed, this._state); - - if (this._fragment) { - this.fire("state", { changed: changed, current: this._state, previous: oldState }); - this._fragment.p(changed, this._state); - this.fire("update", { changed: changed, current: this._state, previous: oldState }); - } -} - -function _stage(newState) { - assign(this._staged, newState); -} - -function _mount(target, anchor) { - this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); -} - -function _differs(a, b) { - return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); -} - -function blankObject() { - return Object.create(null); -} - -function flush(component) { - component._lock = true; - callAll(component._beforecreate); - callAll(component._oncreate); - callAll(component._aftercreate); - component._lock = false; -} - -function callAll(fns) { - while (fns && fns.length) fns.shift()(); -} -export default Main; -//# sourceMappingURL=Main.js.map diff --git a/test/cli/samples/sourcemap/expected/Main.js.map b/test/cli/samples/sourcemap/expected/Main.js.map deleted file mode 100644 index a31dec16ab..0000000000 --- a/test/cli/samples/sourcemap/expected/Main.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"Main.js","sources":["../src/Main.svelte"],"sourcesContent":["Hello world!
\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} \ No newline at end of file diff --git a/test/cli/samples/sourcemap/src/Main.svelte b/test/cli/samples/sourcemap/src/Main.svelte deleted file mode 100644 index 6f3f80bbff..0000000000 --- a/test/cli/samples/sourcemap/src/Main.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - -Hello world!
\ No newline at end of file diff --git a/test/cli/samples/ssr/command.sh b/test/cli/samples/ssr/command.sh deleted file mode 100644 index 878f6038ab..0000000000 --- a/test/cli/samples/ssr/command.sh +++ /dev/null @@ -1 +0,0 @@ -svelte compile --generate ssr src/Main.svelte > actual/Main.js diff --git a/test/cli/samples/ssr/expected/Main.js b/test/cli/samples/ssr/expected/Main.js deleted file mode 100644 index b7a4f4addf..0000000000 --- a/test/cli/samples/ssr/expected/Main.js +++ /dev/null @@ -1,48 +0,0 @@ -"use strict"; - -var Main = {}; - -Main.filename = "src/Main.svelte"; - -Main.data = function() { - return {}; -}; - -Main.render = function(state, options = {}) { - var components = new Set(); - - function addComponent(component) { - components.add(component); - } - - var result = { head: '', addComponent }; - var html = Main._render(result, state, options); - - var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\n'); - - return { - html, - head: result.head, - css: { code: cssCode, map: null }, - toString() { - return html; - } - }; -} - -Main._render = function(__result, ctx, options) { - __result.addComponent(Main); - - ctx = Object.assign({}, ctx); - - return `Hello world!
`; -}; - -Main.css = { - code: '', - map: null -}; - -var warned = false; - -module.exports = Main; \ No newline at end of file diff --git a/test/cli/samples/ssr/src/Main.svelte b/test/cli/samples/ssr/src/Main.svelte deleted file mode 100644 index aa994ea13e..0000000000 --- a/test/cli/samples/ssr/src/Main.svelte +++ /dev/null @@ -1 +0,0 @@ -Hello world!
\ No newline at end of file diff --git a/test/cli/samples/store/command.sh b/test/cli/samples/store/command.sh deleted file mode 100644 index dedeae05ef..0000000000 --- a/test/cli/samples/store/command.sh +++ /dev/null @@ -1 +0,0 @@ -svelte compile src/Main.svelte --store > actual/Main.js diff --git a/test/cli/samples/store/expected/Main.js b/test/cli/samples/store/expected/Main.js deleted file mode 100644 index 28bc62b786..0000000000 --- a/test/cli/samples/store/expected/Main.js +++ /dev/null @@ -1,217 +0,0 @@ -/* src/Main.svelte generated by Svelte vx.y.z */ - -function create_main_fragment(component, ctx) { - var h1, text0, text1; - - return { - c() { - h1 = createElement("h1"); - text0 = createText("Hello "); - text1 = createText(ctx.$name); - }, - - m(target, anchor) { - insert(target, h1, anchor); - append(h1, text0); - append(h1, text1); - }, - - p(changed, ctx) { - if (changed.$name) { - setData(text1, ctx.$name); - } - }, - - d(detach) { - if (detach) { - detachNode(h1); - } - } - }; -} - -function Main(options) { - init(this, options); - this._state = assign(this.store._init(["name"]), options.data); - this.store._add(this, ["name"]); - this._intro = true; - - this._handlers.destroy = [removeFromStore]; - - this._fragment = create_main_fragment(this, this._state); - - if (options.target) { - this._fragment.c(); - this._mount(options.target, options.anchor); - } -} - -assign(Main.prototype, { - destroy: destroy, - get: get, - fire: fire, - on: on, - set: set, - _set: _set, - _stage: _stage, - _mount: _mount, - _differs: _differs - }); - -Main.prototype._recompute = noop; - -function createElement(name) { - return document.createElement(name); -} - -function createText(data) { - return document.createTextNode(data); -} - -function insert(target, node, anchor) { - target.insertBefore(node, anchor); -} - -function append(target, node) { - target.appendChild(node); -} - -function setData(text, data) { - text.data = '' + data; -} - -function detachNode(node) { - node.parentNode.removeChild(node); -} - -function init(component, options) { - component._handlers = blankObject(); - component._slots = blankObject(); - component._bind = options._bind; - component._staged = {}; - - component.options = options; - component.root = options.root || component; - component.store = options.store || component.root.store; - - if (!options.root) { - component._beforecreate = []; - component._oncreate = []; - component._aftercreate = []; - } -} - -function assign(tar, src) { - for (var k in src) tar[k] = src[k]; - return tar; -} - -function removeFromStore() { - this.store._remove(this); -} - -function destroy(detach) { - this.destroy = noop; - this.fire('destroy'); - this.set = noop; - - this._fragment.d(detach !== false); - this._fragment = null; - this._state = {}; -} - -function get() { - return this._state; -} - -function fire(eventName, data) { - var handlers = - eventName in this._handlers && this._handlers[eventName].slice(); - if (!handlers) return; - - for (var i = 0; i < handlers.length; i += 1) { - var handler = handlers[i]; - - if (!handler.__calling) { - try { - handler.__calling = true; - handler.call(this, data); - } finally { - handler.__calling = false; - } - } - } -} - -function on(eventName, handler) { - var handlers = this._handlers[eventName] || (this._handlers[eventName] = []); - handlers.push(handler); - - return { - cancel: function() { - var index = handlers.indexOf(handler); - if (~index) handlers.splice(index, 1); - } - }; -} - -function set(newState) { - this._set(assign({}, newState)); - if (this.root._lock) return; - flush(this.root); -} - -function _set(newState) { - var oldState = this._state, - changed = {}, - dirty = false; - - newState = assign(this._staged, newState); - this._staged = {}; - - for (var key in newState) { - if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true; - } - if (!dirty) return; - - this._state = assign(assign({}, oldState), newState); - this._recompute(changed, this._state); - if (this._bind) this._bind(changed, this._state); - - if (this._fragment) { - this.fire("state", { changed: changed, current: this._state, previous: oldState }); - this._fragment.p(changed, this._state); - this.fire("update", { changed: changed, current: this._state, previous: oldState }); - } -} - -function _stage(newState) { - assign(this._staged, newState); -} - -function _mount(target, anchor) { - this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null); -} - -function _differs(a, b) { - return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); -} - -function noop() {} - -function blankObject() { - return Object.create(null); -} - -function flush(component) { - component._lock = true; - callAll(component._beforecreate); - callAll(component._oncreate); - callAll(component._aftercreate); - component._lock = false; -} - -function callAll(fns) { - while (fns && fns.length) fns.shift()(); -} -export default Main; \ No newline at end of file diff --git a/test/cli/samples/store/src/Main.svelte b/test/cli/samples/store/src/Main.svelte deleted file mode 100644 index 3010a856fb..0000000000 --- a/test/cli/samples/store/src/Main.svelte +++ /dev/null @@ -1 +0,0 @@ -Hello {$name}
\ No newline at end of file diff --git a/test/cli/update.js b/test/cli/update.js deleted file mode 100644 index 468fe51f15..0000000000 --- a/test/cli/update.js +++ /dev/null @@ -1,20 +0,0 @@ -const sander = require('sander'); -const glob = require('tiny-glob/sync'); - -process.chdir(__dirname); - -sander.readdirSync('samples').forEach(dir => { - if (dir[0] === '.') return; - - sander.rimrafSync(`samples/${dir}/expected`); - - const files = glob(`**`, { cwd: `samples/${dir}/actual`, filesOnly: true }); - files.forEach(file => { - const source = sander.readFileSync(`samples/${dir}/actual/${file}`, { encoding: 'utf-8' }); - - sander.writeFileSync( - `samples/${dir}/expected/${file}`, - source.replace(/generated by Svelte v(\d+\.\d+\.\d+)/, 'generated by Svelte vx.y.z') - ); - }); -}); \ No newline at end of file diff --git a/test/custom-elements/index.js b/test/custom-elements/index.js index d2641cb5b0..32e95266ec 100644 --- a/test/custom-elements/index.js +++ b/test/custom-elements/index.js @@ -3,7 +3,7 @@ import * as path from 'path'; import * as http from 'http'; import { rollup } from 'rollup'; import * as virtual from 'rollup-plugin-virtual'; -import * as Nightmare from 'nightmare'; +import * as puppeteer from 'puppeteer'; import { addLineNumbers, loadConfig, loadSvelte } from "../helpers.js"; const page = ` @@ -20,30 +20,36 @@ describe('custom-elements', function() { let svelte; let server; - let bundle; - - before(() => { - svelte = loadSvelte(); + let browser; + let code; + function create_server() { return new Promise((fulfil) => { - server = http.createServer((req, res) => { + const server = http.createServer((req, res) => { if (req.url === '/') { res.end(page); } if (req.url === '/bundle.js') { - res.end(bundle); + res.end(code); } }); server.listen('6789', () => { - fulfil(); + fulfil(server); }); }); + } + + before(async () => { + svelte = loadSvelte(); + server = await create_server(); + browser = await puppeteer.launch(); }); - after(() => { + after(async () => { server.close(); + await browser.close(); }); fs.readdirSync('test/custom-elements/samples').forEach(dir => { @@ -54,10 +60,10 @@ describe('custom-elements', function() { const internal = path.resolve('internal.mjs'); const index = path.resolve('index.mjs'); - (solo ? it.only : skip ? it.skip : it)(dir, () => { + (solo ? it.only : skip ? it.skip : it)(dir, async () => { const config = loadConfig(`./custom-elements/samples/${dir}/_config.js`); - return rollup({ + const bundle = await rollup({ input: `test/custom-elements/samples/${dir}/test.js`, plugins: [ { @@ -87,35 +93,26 @@ describe('custom-elements', function() { assert }) ] - }) - .then(bundle => bundle.generate({ format: 'iife', name: 'test' })) - .then(result => { - bundle = result.output[0].code; - - const nightmare = new Nightmare({ show: false }); - - nightmare.on('console', (type, ...args) => { - console[type](...args); - }); - - return nightmare - .goto('http://localhost:6789') - .evaluate(() => { - return test(document.querySelector('main')); - }) - .then(result => { - if (result) console.log(result); - return nightmare.end(); - }) - .catch(message => { - console.log(addLineNumbers(bundle)); - return nightmare.end().then(() => { - throw new Error(message); - }); - }); - }); + }); + + const result = await bundle.generate({ format: 'iife', name: 'test' }); + code = result.output[0].code; + + const page = await browser.newPage(); + + page.on('console', (type, ...args) => { + console[type](...args); + }); + try { + await page.goto('http://localhost:6789'); + const result = await page.evaluate(() => test(document.querySelector('main'))); + if (result) console.log(result); + } catch (err) { + console.log(addLineNumbers(code)); + throw err; + } }); }); }); diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js index e3dff9649d..dcd1078a6d 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -56,8 +56,8 @@ function instance($$self, $$props, $$invalidate) { if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo); }; - $$self.$$.update = ($$dirty = { bar: 1, foo: 1 }) => { - if ($$dirty.bar || $$dirty.foo) { + $$self.$$.update = ($$dirty = { foo: 1 }) => { + if ($$dirty.foo) { bar = foo * 2; $$invalidate('bar', bar); } }; diff --git a/test/js/samples/dont-invalidate-this/expected.js b/test/js/samples/dont-invalidate-this/expected.js new file mode 100644 index 0000000000..db21ccdd64 --- /dev/null +++ b/test/js/samples/dont-invalidate-this/expected.js @@ -0,0 +1,42 @@ +/* generated by Svelte vX.Y.Z */ +import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal"; + +function create_fragment(ctx) { + var input, dispose; + + return { + c() { + input = createElement("input"); + dispose = addListener(input, "input", make_uppercase); + }, + + m(target, anchor) { + insert(target, input, anchor); + }, + + p: noop, + i: noop, + o: noop, + + d(detach) { + if (detach) { + detachNode(input); + } + + dispose(); + } + }; +} + +function make_uppercase() { + this.value = this.value.toUpperCase(); +} + +class SvelteComponent extends SvelteComponent_1 { + constructor(options) { + super(); + init(this, options, null, create_fragment, safe_not_equal); + } +} + +export default SvelteComponent; diff --git a/test/js/samples/dont-invalidate-this/input.svelte b/test/js/samples/dont-invalidate-this/input.svelte new file mode 100644 index 0000000000..5b0a565a3a --- /dev/null +++ b/test/js/samples/dont-invalidate-this/input.svelte @@ -0,0 +1,6 @@ + + diff --git a/test/js/samples/each-block-array-literal/expected.js b/test/js/samples/each-block-array-literal/expected.js new file mode 100644 index 0000000000..b5499707c3 --- /dev/null +++ b/test/js/samples/each-block-array-literal/expected.js @@ -0,0 +1,168 @@ +/* generated by Svelte vX.Y.Z */ +import { SvelteComponent as SvelteComponent_1, append, createComment, createElement, createText, destroyEach, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; + +function get_each_context(ctx, list, i) { + const child_ctx = Object.create(ctx); + child_ctx.num = list[i]; + return child_ctx; +} + +// (1:0) {#each [a, b, c, d, e] as num} +function create_each_block(ctx) { + var span, text_value = ctx.num, text; + + return { + c() { + span = createElement("span"); + text = createText(text_value); + }, + + m(target, anchor) { + insert(target, span, anchor); + append(span, text); + }, + + p(changed, ctx) { + if ((changed.a || changed.b || changed.c || changed.d || changed.e) && text_value !== (text_value = ctx.num)) { + setData(text, text_value); + } + }, + + d(detach) { + if (detach) { + detachNode(span); + } + } + }; +} + +function create_fragment(ctx) { + var each_anchor; + + var each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e]; + + var each_blocks = []; + + for (var i = 0; i < 5; i += 1) { + each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); + } + + return { + c() { + for (var i = 0; i < 5; i += 1) { + each_blocks[i].c(); + } + + each_anchor = createComment(); + }, + + m(target, anchor) { + for (var i = 0; i < 5; i += 1) { + each_blocks[i].m(target, anchor); + } + + insert(target, each_anchor, anchor); + }, + + p(changed, ctx) { + if (changed.a || changed.b || changed.c || changed.d || changed.e) { + each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e]; + + for (var i = 0; i < each_value.length; i += 1) { + const child_ctx = get_each_context(ctx, each_value, i); + + if (each_blocks[i]) { + each_blocks[i].p(changed, child_ctx); + } else { + each_blocks[i] = create_each_block(child_ctx); + each_blocks[i].c(); + each_blocks[i].m(each_anchor.parentNode, each_anchor); + } + } + + for (; i < 5; i += 1) { + each_blocks[i].d(1); + } + } + }, + + i: noop, + o: noop, + + d(detach) { + destroyEach(each_blocks, detach); + + if (detach) { + detachNode(each_anchor); + } + } + }; +} + +function instance($$self, $$props, $$invalidate) { + let { a, b, c, d, e } = $$props; + + $$self.$set = $$props => { + if ('a' in $$props) $$invalidate('a', a = $$props.a); + if ('b' in $$props) $$invalidate('b', b = $$props.b); + if ('c' in $$props) $$invalidate('c', c = $$props.c); + if ('d' in $$props) $$invalidate('d', d = $$props.d); + if ('e' in $$props) $$invalidate('e', e = $$props.e); + }; + + return { a, b, c, d, e }; +} + +class SvelteComponent extends SvelteComponent_1 { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal); + } + + get a() { + return this.$$.ctx.a; + } + + set a(a) { + this.$set({ a }); + flush(); + } + + get b() { + return this.$$.ctx.b; + } + + set b(b) { + this.$set({ b }); + flush(); + } + + get c() { + return this.$$.ctx.c; + } + + set c(c) { + this.$set({ c }); + flush(); + } + + get d() { + return this.$$.ctx.d; + } + + set d(d) { + this.$set({ d }); + flush(); + } + + get e() { + return this.$$.ctx.e; + } + + set e(e) { + this.$set({ e }); + flush(); + } +} + +export default SvelteComponent; \ No newline at end of file diff --git a/test/js/samples/each-block-array-literal/input.svelte b/test/js/samples/each-block-array-literal/input.svelte new file mode 100644 index 0000000000..aba508f711 --- /dev/null +++ b/test/js/samples/each-block-array-literal/input.svelte @@ -0,0 +1,3 @@ +{#each [a, b, c, d, e] as num} + {num} +{/each} \ No newline at end of file diff --git a/test/js/samples/reactive-values-non-topologically-ordered/expected.js b/test/js/samples/reactive-values-non-topologically-ordered/expected.js index de1a4cdc8c..edf98e9613 100644 --- a/test/js/samples/reactive-values-non-topologically-ordered/expected.js +++ b/test/js/samples/reactive-values-non-topologically-ordered/expected.js @@ -22,11 +22,11 @@ function instance($$self, $$props, $$invalidate) { if ('x' in $$props) $$invalidate('x', x = $$props.x); }; - $$self.$$.update = ($$dirty = { b: 1, x: 1, a: 1 }) => { - if ($$dirty.b || $$dirty.x) { + $$self.$$.update = ($$dirty = { x: 1, b: 1 }) => { + if ($$dirty.x) { b = x; $$invalidate('b', b); } - if ($$dirty.a || $$dirty.b) { + if ($$dirty.b) { a = b; $$invalidate('a', a); } }; diff --git a/test/js/samples/reactive-values-non-writable-dependencies/expected.js b/test/js/samples/reactive-values-non-writable-dependencies/expected.js index fc2ca37d31..42f57a0037 100644 --- a/test/js/samples/reactive-values-non-writable-dependencies/expected.js +++ b/test/js/samples/reactive-values-non-writable-dependencies/expected.js @@ -17,12 +17,12 @@ let a = 1; let b = 2; function instance($$self, $$props, $$invalidate) { - + let max; - $$self.$$.update = ($$dirty = { max: 1, Math: 1, a: 1, b: 1 }) => { - if ($$dirty.max || $$dirty.a || $$dirty.b) { + $$self.$$.update = ($$dirty = { Math: 1, a: 1, b: 1 }) => { + if ($$dirty.a || $$dirty.b) { max = Math.max(a, b); $$invalidate('max', max); } }; diff --git a/test/parser/samples/if-block-elseif/input.svelte b/test/parser/samples/if-block-elseif/input.svelte index a3bd474af7..2566aef258 100644 --- a/test/parser/samples/if-block-elseif/input.svelte +++ b/test/parser/samples/if-block-elseif/input.svelte @@ -1,5 +1,5 @@ {#if x > 10}x is greater than 10
-{:elseif x < 5} +{:else if x < 5}x is less than 5
{/if} diff --git a/test/parser/samples/if-block-elseif/output.json b/test/parser/samples/if-block-elseif/output.json index 426e1f7fbc..188b57aaad 100644 --- a/test/parser/samples/if-block-elseif/output.json +++ b/test/parser/samples/if-block-elseif/output.json @@ -1,12 +1,12 @@ { "html": { "start": 0, - "end": 88, + "end": 89, "type": "Fragment", "children": [ { "start": 0, - "end": 88, + "end": 89, "type": "IfBlock", "expression": { "type": "BinaryExpression", @@ -45,45 +45,45 @@ } ], "else": { - "start": 57, - "end": 83, + "start": 58, + "end": 84, "type": "ElseBlock", "children": [ { - "start": 57, - "end": 88, + "start": 58, + "end": 89, "type": "IfBlock", "elseif": true, "expression": { "type": "BinaryExpression", - "start": 51, - "end": 56, + "start": 52, + "end": 57, "left": { "type": "Identifier", - "start": 51, - "end": 52, + "start": 52, + "end": 53, "name": "x" }, "operator": "<", "right": { "type": "Literal", - "start": 55, - "end": 56, + "start": 56, + "end": 57, "value": 5, "raw": "5" } }, "children": [ { - "start": 59, - "end": 82, + "start": 60, + "end": 83, "type": "Element", "name": "p", "attributes": [], "children": [ { - "start": 62, - "end": 78, + "start": 63, + "end": 79, "type": "Text", "data": "x is less than 5" } @@ -95,8 +95,5 @@ } } ] - }, - "css": null, - "instance": null, - "module": null + } } \ No newline at end of file diff --git a/test/parser/samples/raw-mustaches-whitespace-error/error.json b/test/parser/samples/raw-mustaches-whitespace-error/error.json new file mode 100644 index 0000000000..abb9f8ed0f --- /dev/null +++ b/test/parser/samples/raw-mustaches-whitespace-error/error.json @@ -0,0 +1,10 @@ +{ + "code": "missing-whitespace", + "message": "Expected whitespace", + "start": { + "line": 1, + "column": 6, + "character": 6 + }, + "pos": 6 +} diff --git a/test/parser/samples/raw-mustaches-whitespace-error/input.svelte b/test/parser/samples/raw-mustaches-whitespace-error/input.svelte new file mode 100644 index 0000000000..94e75fda09 --- /dev/null +++ b/test/parser/samples/raw-mustaches-whitespace-error/input.svelte @@ -0,0 +1 @@ +{@htmlfoo} diff --git a/test/runtime/samples/binding-store-deep/_config.js b/test/runtime/samples/binding-store-deep/_config.js index e43df6cfae..8bdd41818b 100644 --- a/test/runtime/samples/binding-store-deep/_config.js +++ b/test/runtime/samples/binding-store-deep/_config.js @@ -1,5 +1,41 @@ export default { - error(assert, err) { - assert.equal(err.message, `Cannot bind to a nested property of a store`); - } + html: ` + +hello world
+ `, + + ssrHtml: ` + +hello world
+ `, + + async test({ assert, component, target, window }) { + const input = target.querySelector('input'); + assert.equal(input.value, 'world'); + + const event = new window.Event('input'); + + const names = []; + const unsubscribe = component.user.subscribe(user => { + names.push(user.name); + }); + + input.value = 'everybody'; + await input.dispatchEvent(event); + + assert.htmlEqual(target.innerHTML, ` + +hello everybody
+ `); + + await component.user.set({ name: 'goodbye' }); + assert.equal(input.value, 'goodbye'); + assert.htmlEqual(target.innerHTML, ` + +hello goodbye
+ `); + + assert.deepEqual(names, ['world', 'everybody', 'goodbye']); + unsubscribe(); + }, }; diff --git a/test/runtime/samples/component-name-deconflicted-globals/Countdown.svelte b/test/runtime/samples/component-name-deconflicted-globals/Countdown.svelte new file mode 100644 index 0000000000..0f04fa119a --- /dev/null +++ b/test/runtime/samples/component-name-deconflicted-globals/Countdown.svelte @@ -0,0 +1,10 @@ + + +{count} + +{#if count > 1} + +foo
- {:elseif bar} + {:else if bar}bar
{:else}neither foo nor bar
diff --git a/test/runtime/samples/event-handler-destructured/_config.js b/test/runtime/samples/event-handler-destructured/_config.js new file mode 100644 index 0000000000..b32fe76c0a --- /dev/null +++ b/test/runtime/samples/event-handler-destructured/_config.js @@ -0,0 +1,15 @@ +export default { + html: ` + + `, + + async test({ assert, component, target, window }) { + const button = target.querySelector('button'); + const event = new window.MouseEvent('click'); + + await button.dispatchEvent(event); + assert.htmlEqual(target.innerHTML, ` + + `); + } +}; diff --git a/test/runtime/samples/event-handler-destructured/main.svelte b/test/runtime/samples/event-handler-destructured/main.svelte new file mode 100644 index 0000000000..d80c7ed15c --- /dev/null +++ b/test/runtime/samples/event-handler-destructured/main.svelte @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/test/runtime/samples/if-block-elseif-no-else/main.svelte b/test/runtime/samples/if-block-elseif-no-else/main.svelte index a3bd474af7..2566aef258 100644 --- a/test/runtime/samples/if-block-elseif-no-else/main.svelte +++ b/test/runtime/samples/if-block-elseif-no-else/main.svelte @@ -1,5 +1,5 @@ {#if x > 10}x is greater than 10
-{:elseif x < 5} +{:else if x < 5}x is less than 5
{/if} diff --git a/test/runtime/samples/if-block-elseif-text/main.svelte b/test/runtime/samples/if-block-elseif-text/main.svelte index 43ac545677..ea1e1aac43 100644 --- a/test/runtime/samples/if-block-elseif-text/main.svelte +++ b/test/runtime/samples/if-block-elseif-text/main.svelte @@ -1 +1 @@ -before-{#if x > 10}if{:elseif x < 5}elseif{:else}else{/if}-after +before-{#if x > 10}if{:else if x < 5}elseif{:else}else{/if}-after diff --git a/test/runtime/samples/if-block-elseif/main.svelte b/test/runtime/samples/if-block-elseif/main.svelte index ffa5879943..d4833c7aeb 100644 --- a/test/runtime/samples/if-block-elseif/main.svelte +++ b/test/runtime/samples/if-block-elseif/main.svelte @@ -1,6 +1,6 @@ {#if x > 10}x is greater than 10
-{:elseif x < 5} +{:else if x < 5}x is less than 5
{:else}x is between 5 and 10
diff --git a/test/runtime/samples/if-block-outro-nested-else/main.svelte b/test/runtime/samples/if-block-outro-nested-else/main.svelte index 3937998c40..8b8f599e4f 100644 --- a/test/runtime/samples/if-block-outro-nested-else/main.svelte +++ b/test/runtime/samples/if-block-outro-nested-else/main.svelte @@ -7,7 +7,7 @@ {#if foo} {#if false}{JSON.stringify(props)}
\ No newline at end of file diff --git a/test/runtime/samples/props-implicit/_config.js b/test/runtime/samples/props-implicit/_config.js deleted file mode 100644 index 354aa1bcee..0000000000 --- a/test/runtime/samples/props-implicit/_config.js +++ /dev/null @@ -1,17 +0,0 @@ -export default { - props: { - x: 1 - }, - - html: ` -{"x":1}
- `,
-
- async test({ assert, component, target }) {
- await component.$set({ x: 2 });
-
- assert.htmlEqual(target.innerHTML, `
- {"x":2}
- `);
- }
-};
\ No newline at end of file
diff --git a/test/runtime/samples/props-implicit/main.svelte b/test/runtime/samples/props-implicit/main.svelte
deleted file mode 100644
index 0beafd3f07..0000000000
--- a/test/runtime/samples/props-implicit/main.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-{JSON.stringify(foo)}
\ No newline at end of file
diff --git a/test/runtime/samples/props-undeclared/_config.js b/test/runtime/samples/props-undeclared/_config.js
deleted file mode 100644
index e7d09b76bf..0000000000
--- a/test/runtime/samples/props-undeclared/_config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
- error: `'foo' is not defined`
-};
\ No newline at end of file
diff --git a/test/runtime/samples/props-undeclared/main.svelte b/test/runtime/samples/props-undeclared/main.svelte
deleted file mode 100644
index a05b8985a6..0000000000
--- a/test/runtime/samples/props-undeclared/main.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-{JSON.stringify(foo)}
\ No newline at end of file
diff --git a/test/runtime/samples/props/RenderProps.svelte b/test/runtime/samples/props/RenderProps.svelte
new file mode 100644
index 0000000000..ce3fc9abce
--- /dev/null
+++ b/test/runtime/samples/props/RenderProps.svelte
@@ -0,0 +1 @@
+{JSON.stringify($$props)}
\ No newline at end of file diff --git a/test/runtime/samples/props-excludes-external/_config.js b/test/runtime/samples/props/_config.js similarity index 100% rename from test/runtime/samples/props-excludes-external/_config.js rename to test/runtime/samples/props/_config.js diff --git a/test/runtime/samples/props-excludes-external/main.svelte b/test/runtime/samples/props/main.svelte similarity index 100% rename from test/runtime/samples/props-excludes-external/main.svelte rename to test/runtime/samples/props/main.svelte diff --git a/test/runtime/samples/reactive-values-readonly/_config.js b/test/runtime/samples/reactive-values-overwrite/_config.js similarity index 76% rename from test/runtime/samples/reactive-values-readonly/_config.js rename to test/runtime/samples/reactive-values-overwrite/_config.js index bf5c9dbb67..644a49ec0d 100644 --- a/test/runtime/samples/reactive-values-readonly/_config.js +++ b/test/runtime/samples/reactive-values-overwrite/_config.js @@ -11,11 +11,11 @@ export default {doubled: 4
`); - component.doubled = 6; + component.doubled = 3; - assert.equal(component.doubled, 4); + assert.equal(component.doubled, 3); assert.htmlEqual(target.innerHTML, ` -doubled: 4
+doubled: 3
`); } }; diff --git a/test/runtime/samples/reactive-values-readonly/main.svelte b/test/runtime/samples/reactive-values-overwrite/main.svelte similarity index 100% rename from test/runtime/samples/reactive-values-readonly/main.svelte rename to test/runtime/samples/reactive-values-overwrite/main.svelte diff --git a/test/runtime/samples/reactive-values-self-dependency-b/_config.js b/test/runtime/samples/reactive-values-self-dependency-b/_config.js new file mode 100644 index 0000000000..9b2b5a2dd6 --- /dev/null +++ b/test/runtime/samples/reactive-values-self-dependency-b/_config.js @@ -0,0 +1,19 @@ +export default { + html: ` +count: 0
+ `, + + test({ assert, component, target }) { + component.count = 5; + + assert.htmlEqual(target.innerHTML, ` +count: 5
+ `); + + component.count = 50; + + assert.htmlEqual(target.innerHTML, ` +count: 9
+ `); + } +}; diff --git a/test/runtime/samples/reactive-values-self-dependency-b/main.svelte b/test/runtime/samples/reactive-values-self-dependency-b/main.svelte new file mode 100644 index 0000000000..c429097c09 --- /dev/null +++ b/test/runtime/samples/reactive-values-self-dependency-b/main.svelte @@ -0,0 +1,9 @@ + + +count: {count}
\ No newline at end of file diff --git a/test/runtime/samples/reactive-values-subscript-assignment/_config.js b/test/runtime/samples/reactive-values-subscript-assignment/_config.js new file mode 100644 index 0000000000..e29fe2c676 --- /dev/null +++ b/test/runtime/samples/reactive-values-subscript-assignment/_config.js @@ -0,0 +1,11 @@ +export default { + test({ assert, component }) { + assert.deepEqual(component.foo, {}); + component.bar = 'hello'; + assert.deepEqual(component.foo, { hello: true }); + component.bar = 'world'; + assert.deepEqual(component.foo, { hello: true, world: true }); + component.bar = false; + assert.deepEqual(component.foo, { hello: true, world: true }); + } +}; diff --git a/test/runtime/samples/reactive-values-subscript-assignment/main.svelte b/test/runtime/samples/reactive-values-subscript-assignment/main.svelte new file mode 100644 index 0000000000..9753032618 --- /dev/null +++ b/test/runtime/samples/reactive-values-subscript-assignment/main.svelte @@ -0,0 +1,7 @@ + diff --git a/test/runtime/samples/spread-own-props/main.svelte b/test/runtime/samples/spread-own-props/main.svelte index 5fbd75d663..4c9338ffea 100644 --- a/test/runtime/samples/spread-own-props/main.svelte +++ b/test/runtime/samples/spread-own-props/main.svelte @@ -1,11 +1,7 @@ -
-
diff --git a/test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte b/test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte
index 462e073bd7..99c535dca2 100644
--- a/test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte
+++ b/test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte
@@ -17,6 +17,6 @@
{#if x}
yes
-{:elseif y}
+{:else if y}
no
{/if}
\ No newline at end of file
diff --git a/test/store/index.js b/test/store/index.js
index f4f89bf9a8..f993c3a253 100644
--- a/test/store/index.js
+++ b/test/store/index.js
@@ -1,5 +1,5 @@
import * as assert from 'assert';
-import { readable, writable, derive } from '../../store.js';
+import { readable, writable, derive, get } from '../../store.js';
describe('store', () => {
describe('writable', () => {
@@ -42,6 +42,23 @@ describe('store', () => {
unsubscribe2();
assert.equal(called, 0);
});
+
+ it('does not assume immutable data', () => {
+ const obj = {};
+ let called = 0;
+
+ const store = writable(obj);
+
+ store.subscribe(value => {
+ called += 1;
+ });
+
+ store.set(obj);
+ assert.equal(called, 2);
+
+ store.update(obj => obj);
+ assert.equal(called, 3);
+ });
});
describe('readable', () => {
@@ -172,4 +189,11 @@ describe('store', () => {
unsubscribe();
});
});
+
+ describe('get', () => {
+ it('gets the current value of a store', () => {
+ const store = readable(() => {}, 42);
+ assert.equal(get(store), 42);
+ });
+ });
});
diff --git a/test/validator/samples/svg-child-component-undeclared-namespace/warnings.json b/test/validator/samples/svg-child-component-undeclared-namespace/warnings.json
index dce19a77cf..fc3d19a487 100644
--- a/test/validator/samples/svg-child-component-undeclared-namespace/warnings.json
+++ b/test/validator/samples/svg-child-component-undeclared-namespace/warnings.json
@@ -1,6 +1,6 @@
[{
"code": "missing-namespace",
- "message": "