krausest · krausest · May 17, 2017 · May 17, 2017
diff --git a/svelte-v1.20.2-keyed/index.html b/svelte-v1.20.2-keyed/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Svelte v1.8.1</title>
+    <link href="/css/currentStyle.css" rel="stylesheet"/>
+</head>
+<body >
+    <div id="main" class="container">
+    </div>
+    <script src='dist/main.js'></script>
+</body>
+</html>
diff --git a/svelte-v1.20.2-keyed/package.json b/svelte-v1.20.2-keyed/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "js-framework-benchmark-svelte",
+  "version": "1.0.0",
+  "description": "Boilerplate for Svelte",
+  "scripts": {
+    "build-dev": "rollup -c -w",
+    "build-prod": "rollup -c --environment production"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "author": "Stefan Krause",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/krausest/js-framework-benchmark",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/krausest/js-framework-benchmark.git"
+  },
+  "devDependencies": {
+    "rollup": "0.41.6",
+    "rollup-plugin-buble": "0.15.0",
+    "rollup-plugin-svelte": "1.8.1",
+    "rollup-plugin-uglify": "1.0.2",
+    "svelte": "1.20.2"
+  }
+}
diff --git a/svelte-v1.20.2-keyed/rollup.config.js b/svelte-v1.20.2-keyed/rollup.config.js
@@ -0,0 +1,19 @@
+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 {
+    entry: 'src/main.es6.js',
+    dest: 'dist/main.js',
+    format: 'iife',
+    plugins
+};
diff --git a/svelte-v1.20.2-keyed/src/DataStore.js b/svelte-v1.20.2-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<this.data.length;i+=10) {
+            this.data[i].label += ' !!!';
+        }
+    }
+    delete(id) {
+        const idx = this.data.findIndex(d => 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 > 10) {
+            var a = this.data[4];
+            this.data[4] = this.data[9];
+            this.data[9] = a;
+        }
+    }
+}
diff --git a/svelte-v1.20.2-keyed/src/Main.html b/svelte-v1.20.2-keyed/src/Main.html
@@ -0,0 +1,134 @@
+<div class="jumbotron">
+    <div class="row">
+        <div class="col-md-6">
+            <h1>Svelte v1.8.1</h1>
+        </div>
+        <div class="col-md-6">
+            <div class="row">
+                <div class="col-sm-6 smallpad">
+                    <button type="button" class="btn btn-primary btn-block" id="run" on:click="run()">Create 1,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button type="button" class="btn btn-primary btn-block" id="runlots" on:click="runLots()">Create 10,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button type="button" class="btn btn-primary btn-block" id="add" on:click="add()">Append 1,000 rows</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button type="button" class="btn btn-primary btn-block" id="update" on:click="partialUpdate()">Update every 10th row</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button type="button" class="btn btn-primary btn-block" id="clear" on:click="clear()">Clear</button>
+                </div>
+                <div class="col-sm-6 smallpad">
+                    <button type="button" class="btn btn-primary btn-block" id="swaprows" on:click="swapRows()">Swap Rows</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<table class="table table-hover table-striped test-data">
+    <tbody>
+        {{#each store.data as row, num @id}}
+            <tr class="{{selected === row.id ? 'danger' : ''}}">
+                <td class="col-md-1">{{row.id}}</td>
+                <td class="col-md-4">
+                    <a on:click="select(row.id)">{{row.label}}</a>
+                </td>
+                <td class="col-md-1"><a on:click="remove(num)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
+                <td class="col-md-6"></td>
+            </tr>
+        {{/each}}
+    </tbody>
+</table>
+<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+
+<script>
+    import DataStore from './DataStore.js';
+
+    const store = new DataStore();
+
+    var startTime;
+    var lastMeasure;
+    var startMeasure = function(name) {
+        startTime = performance.now();
+        lastMeasure = name;
+    }
+    var stopMeasure = function() {
+        var last = lastMeasure;
+        if (lastMeasure) {
+            window.setTimeout(function () {
+                lastMeasure = null;
+                var stop = performance.now();
+                console.log(last+" took "+(stop-startTime));
+            }, 0);
+        }
+    }
+
+    export default {
+        data () {
+            return {
+                store: store,
+                selected: undefined
+            };
+        },
+
+        methods: {
+            add () {
+                startMeasure("add");
+                store.add();
+                this.set({ store });
+                stopMeasure();
+            },
+
+            clear () {
+                startMeasure("clear");
+                store.clear();
+                this.set({ store });
+                stopMeasure();
+            },
+
+            partialUpdate () {
+                startMeasure("update");
+                store.update();
+                this.set({ store });
+                stopMeasure();
+            },
+
+            remove( num ) {
+                startMeasure("delete");
+                store.data.splice( num, 1 );
+                this.set({ store });
+                stopMeasure();
+            },
+
+            run () {
+                startMeasure("run");
+                store.run();
+                this.set({ store });
+                stopMeasure();
+            },
+
+            runLots () {
+                startMeasure("runLots");
+                store.runLots();
+                this.set({ store });
+                stopMeasure();
+            },
+
+            select ( id ) {
+                startMeasure("select");
+                store.select(id);
+                this.set({ selected: store.selected });
+                stopMeasure();
+            },
+
+            swapRows () {
+                startMeasure("swapRows");
+                store.swapRows();
+                this.set({ store });
+                stopMeasure();
+            }
+        }
+    };
+</script>
diff --git a/svelte-v1.20.2-keyed/src/main.es6.js b/svelte-v1.20.2-keyed/src/main.es6.js
@@ -0,0 +1,5 @@
+import Main from './Main.html';
+
+window.s = new Main({
+    target: document.querySelector( '#main' )
+});
diff --git a/svelte-v1.20.2-non-keyed/index.html b/svelte-v1.20.2-non-keyed/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Svelte v1.8.1</title>
+    <link href="/css/currentStyle.css" rel="stylesheet"/>
+</head>
+<body >
+    <div id="main" class="container">
+    </div>
+    <script src='dist/main.js'></script>
+</body>
+</html>
diff --git a/svelte-v1.20.2-non-keyed/package.json b/svelte-v1.20.2-non-keyed/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "js-framework-benchmark-svelte",
+  "version": "1.0.0",
+  "description": "Boilerplate for Svelte",
+  "scripts": {
+    "build-dev": "rollup -c -w",
+    "build-prod": "rollup -c --environment production"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "author": "Stefan Krause",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/krausest/js-framework-benchmark",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/krausest/js-framework-benchmark.git"
+  },
+  "devDependencies": {
+    "rollup": "0.41.6",
+    "rollup-plugin-buble": "0.15.0",
+    "rollup-plugin-svelte": "1.8.1",
+    "rollup-plugin-uglify": "1.0.2",
+    "svelte": "1.20.2"
+  }
+}
diff --git a/svelte-v1.20.2-non-keyed/rollup.config.js b/svelte-v1.20.2-non-keyed/rollup.config.js
@@ -0,0 +1,19 @@
+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 {
+    entry: 'src/main.es6.js',
+    dest: 'dist/main.js',
+    format: 'iife',
+    plugins
+};
diff --git a/svelte-v1.20.2-non-keyed/src/DataStore.js b/svelte-v1.20.2-non-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<this.data.length;i+=10) {
+            this.data[i].label += ' !!!';
+        }
+    }
+    delete(id) {
+        const idx = this.data.findIndex(d => 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 > 10) {
+            var a = this.data[4];
+            this.data[4] = this.data[9];
+            this.data[9] = a;
+        }
+    }
+}