Import V3 source

alpinejs · Jun 11, 2021 · b46c41f · b46c41f
1 parent ffba225
commit b46c41f
Show file tree

Hide file tree

Showing 241 changed files with 67,961 additions and 52,095 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
-/node_modules/
-SCRATCH.md
-COMMIT_MSG.aim.txt
+node_modules
+scratch.md
+package-lock.json
+dist/
diff --git a/README.ar.md b/README.ar.md
diff --git a/README.ckb.md b/README.ckb.md
diff --git a/README.de.md b/README.de.md
diff --git a/README.es.md b/README.es.md
diff --git a/README.fa.md b/README.fa.md
diff --git a/README.fr.md b/README.fr.md
diff --git a/README.id.md b/README.id.md
diff --git a/README.ja.md b/README.ja.md
diff --git a/README.ko.md b/README.ko.md
diff --git a/README.md b/README.md
diff --git a/README.no.md b/README.no.md
diff --git a/README.pt.md b/README.pt.md
diff --git a/README.ru.md b/README.ru.md
diff --git a/README.tr.md b/README.tr.md
diff --git a/README.zh-CN.md b/README.zh-CN.md
diff --git a/README.zh-TW.md b/README.zh-TW.md
diff --git a/babel.config.js b/babel.config.js
diff --git a/benchmarks/giant.html b/benchmarks/giant.html
diff --git a/benchmarks/init.html b/benchmarks/init.html
diff --git a/benchmarks/loop.html b/benchmarks/loop.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Alpine-3-keyed</title>
+    <link href="/css/currentStyle.css" rel="stylesheet" />
+    <script src="http://alpine-next.test/packages/alpinejs/dist/cdn.js" defer></script>
+    <!-- <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script> -->
+  </head>
+  <body>
+    <div class="container" id="main" x-data="{ data: []}">
+      <div class="jumbotron">
+        <div class="row">
+          <div class="col-md-6">
+            <h1>Alpine-3-keyed</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"
+                  @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"
+                  @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"
+                  @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"
+                  @click="update"
+                >
+                  Update every 10th row
+                </button>
+              </div>
+              <div class="col-sm-6 smallpad">
+                <button
+                  type="button"
+                  class="btn btn-primary btn-block"
+                  id="clear"
+                  @click="clear"
+                >
+                  Clear
+                </button>
+              </div>
+              <div class="col-sm-6 smallpad">
+                <button
+                  type="button"
+                  class="btn btn-primary btn-block"
+                  id="swaprows"
+                  @click="swapRows"
+                >
+                  Swap Rows
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <table class="table table-hover table-striped test-data">
+        <tbody>
+          <template x-for="item in data" :key="item.id">
+            <tr :class="item.id === selected ? 'danger' : ''">
+              <td class="col-md-1" x-text="item.id"></td>
+              <td class="col-md-4">
+                <a @click="select(item.id)" x-text="item.label"></a>
+              </td>
+              <td class="col-md-1">
+                <a @click="remove(item.id)" >x</a>
+              </td>
+              <td class="col-md-6"></td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+
+      <span
+        class="preloadicon glyphicon glyphicon-remove"
+        aria-hidden="true"
+      ></span>
+    </div>
+
+    <script>
+            let idCounter = 1;
+            const 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"],
+            colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
+            nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
+
+            function _random (max) { return Math.round(Math.random() * 1000) % max; };
+
+            function buildData(count) {
+            let data = new Array(count);
+            for (let i = 0; i < count; i++) {
+                data[i] = {
+                id: idCounter++,
+                label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`
+                }
+            }
+            return data;
+            }
+
+            function app() {
+                return {
+                    data: [],
+                    selected: undefined,
+
+                    add() {
+                        let start = performance.now()
+                        this.data = this.data.concat(buildData(1000))
+                        setTimeout(() => {
+                            console.log(performance.now() - start);
+                        }, 0)
+                    },
+                    clear() {
+                        let start = performance.now()
+                        this.data = [];
+                        this.selected = undefined;
+                        setTimeout(() => {
+                            console.log(performance.now() - start);
+                        }, 0)
+                    },
+                    update() {
+                        let start = performance.now()
+                        for (let i = 0; i < this.data.length; i += 10) {
+                            this.data[i].label += ' !!!';
+                        }
+                        setTimeout(() => {
+                            console.log(performance.now() - start);
+                        }, 0)
+                    },
+                    remove(id) {
+                        let start = performance.now()
+                        const idx = this.data.findIndex(d => d.id === id);
+                        this.data.splice(idx, 1);
+                        setTimeout(() => {
+                            console.log(performance.now() - start);
+                        }, 0)
+                    },
+                    run() {
+                        let start = performance.now()
+                        this.data = buildData(100);
+                        this.selected = undefined;
+                        setTimeout(() => {
+                            console.log(performance.now() - start);
+                        }, 0)
+                    },
+                    runLots() {
+                        let start = performance.now()
+                        this.data = buildData(10000);
+                        this.selected = undefined;
+                        setTimeout(() => {
+                            console.log(performance.now() - start);
+                        }, 0)
+                    },
+                    select(id) {
+                        let start = performance.now()
+                        this.selected = id
+                        setTimeout(() => {
+                            console.log(performance.now() - start);
+                        }, 0)
+                    },
+                    swapRows() {
+                        let start = performance.now()
+                        const d = this.data;
+                        if (d.length > 998) {
+                            const tmp = d[998];
+                            d[998] = d[1];
+                            d[1] = tmp;
+                        }
+                        setTimeout(() => {
+                            console.log(performance.now() - start);
+                        }, 0)
+                    }
+                }
+            }
+    </script>
+  </body>
+</html>
diff --git a/benchmarks/memory.html b/benchmarks/memory.html
@@ -0,0 +1,17 @@
+<html>
+    <script src="http://alpine-next.test/packages/alpinejs/dist/cdn.js" defer></script>
+
+    <div x-data="{ items: [] }">
+        <template x-for="item in items">
+            <h1>hi</h1>
+        </template>
+
+        <button @click="items.length === 0 ? items.push('ggoo') : items = []" x-text="'ghjghj'">delete</button>
+    </div>
+
+    <script>
+        function remove() {
+            document.querySelector('span').remove()
+        }
+    </script>
+</html>
diff --git a/benchmarks/mutation_observer.html b/benchmarks/mutation_observer.html
@@ -0,0 +1,65 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script>
+        let mutations = []
+
+        let pauseCollection = false
+
+        function reverseMutation(mutation) {
+            let table = {
+                characterData: () => {
+                    mutation.target.textContent = mutation.oldValue
+                },
+                attributes: () => {
+                    if (! mutation.oldValue) {
+                        mutation.target.removeAttribute(mutation.attributeName)
+                        return
+                    }
+
+                    mutation.target.setAttribute(mutation.attributeName, mutation.oldValue)
+                },
+                childList: () => {
+                    if (mutation.removedNodes) {
+                        let parent = mutation.target
+                    }
+                }
+            }
+
+            console.log(mutation);
+            table[mutation.type]()
+        }
+
+        function reverse() {
+            pauseCollection = true
+
+            while (mutations.length > 0) reverseMutation(mutations.pop())
+
+            pauseCollection = false
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            let observer = new MutationObserver(imutations => {
+                if (pauseCollection) return
+
+                imutations.forEach(i => mutations.push(i))
+
+                console.log(imutations);
+            })
+
+            observer.observe(document.body, { characterData: true, attributeOldValue: true, characterDataOldValue: true, childList: true, subtree: true, attributes: true })
+        })
+    </script>
+</head>
+<body>
+    <div>
+        <h1 foo="bar">yo</h1>
+        <h1>there</h1>
+
+        <button>this is cool</button>
+    </div>
+</body>
+</html>
diff --git a/cypress.json b/cypress.json
@@ -0,0 +1,11 @@
+{
+    "ignoreTestFiles": "*.html",
+    "screenshotOnRunFailure": false,
+    "video": false,
+    "fixturesFolder": "tests/cypress/fixtures",
+    "integrationFolder": "tests/cypress/integration",
+    "pluginsFile": "tests/cypress/plugins/index.js",
+    "screenshotsFolder": "tests/cypress/screenshots",
+    "videosFolder": "tests/cypress/videos",
+    "supportFile": "tests/cypress/support/index.js"
+}