diff --git a/svelte-v2.1.1-keyed/index.html b/svelte-v2.1.1-keyed/index.html new file mode 100644 index 000000000..d295d5706 --- /dev/null +++ b/svelte-v2.1.1-keyed/index.html @@ -0,0 +1,11 @@ + + + + Svelte + + + + +
+ + diff --git a/svelte-v2.1.1-keyed/package.json b/svelte-v2.1.1-keyed/package.json new file mode 100644 index 000000000..bf624f9d6 --- /dev/null +++ b/svelte-v2.1.1-keyed/package.json @@ -0,0 +1,18 @@ +{ + "name": "svelte-v2.1.1-keyed", + "version": "1.0.0", + "description": "", + "main": "rollup.config.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "rollup": "^0.58.2", + "rollup-plugin-buble": "^0.19.2", + "rollup-plugin-svelte": "^4.1.0", + "rollup-plugin-uglify": "^3.0.0", + "svelte": "^2.1.1" + } +} diff --git a/svelte-v2.1.1-keyed/rollup.config.js b/svelte-v2.1.1-keyed/rollup.config.js new file mode 100644 index 000000000..77b49dc7c --- /dev/null +++ b/svelte-v2.1.1-keyed/rollup.config.js @@ -0,0 +1,21 @@ +import svelte from 'rollup-plugin-svelte'; +import buble from 'rollup-plugin-buble'; +import uglify from 'rollup-plugin-uglify'; + +const plugins = [ + svelte(), + buble() +]; + +if (process.env.production) { + plugins.push(uglify()); +} + +export default { + input: 'src/main.es6.js', + output: { + file: 'dist/main.js', + format: 'iife' + }, + plugins +}; diff --git a/svelte-v2.1.1-keyed/src/DataStore.js b/svelte-v2.1.1-keyed/src/DataStore.js new file mode 100644 index 000000000..d9a38c44c --- /dev/null +++ b/svelte-v2.1.1-keyed/src/DataStore.js @@ -0,0 +1,52 @@ +export default class DataStore { + constructor() { + this.data = []; + this.selected = undefined; + this.id = 1; + } + buildData(count = 1000) { + var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"]; + var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"]; + var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]; + var data = []; + for (var i = 0; i < count; i++) + data.push({ id: this.id++, label: adjectives[this._random(adjectives.length)] + " " + colours[this._random(colours.length)] + " " + nouns[this._random(nouns.length)] }); + return data; + } + _random(max) { + return Math.round(Math.random() * 1000) % max; + } + select(id) { + this.selected = id; + } + update() { + for (let i=0;i d.id==id); + this.data.splice(idx, 1); + } + run() { + this.data = this.buildData(); + } + add() { + this.data.push.apply(this.data, this.buildData(1000)); + } + runLots() { + this.data = this.buildData(10000); + this.selected = undefined; + } + clear() { + this.data = []; + this.selected = undefined; + } + swapRows() { + if(this.data.length > 998) { + var a = this.data[1]; + this.data[1] = this.data[998]; + this.data[998] = a; + } + } +} diff --git a/svelte-v2.1.1-keyed/src/Main.html b/svelte-v2.1.1-keyed/src/Main.html new file mode 100644 index 000000000..cb12e79d7 --- /dev/null +++ b/svelte-v2.1.1-keyed/src/Main.html @@ -0,0 +1,134 @@ +
+
+
+

Svelte (keyed)

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + {#each store.data as row, num (row.id)} + + + + + + + {/each} + +
{row.id} + {row.label} +
+ + + diff --git a/svelte-v2.1.1-keyed/src/main.es6.js b/svelte-v2.1.1-keyed/src/main.es6.js new file mode 100644 index 000000000..1d739ebf4 --- /dev/null +++ b/svelte-v2.1.1-keyed/src/main.es6.js @@ -0,0 +1,5 @@ +import Main from './Main.html'; + +let app = new Main({ + target: document.querySelector('#main') +});