首页 发现 帮助
注册 登录
oleg
/
alpine
镜像自地址 https://github.com/alpinejs/alpine.git
1
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Rename project from "Project-X" to "Alpine"

Caleb Porzio 5 年之前
父节点
ce6683598c
当前提交
c7c1209d3b
共有 23 个文件被更改，包括 281 次插入 和 174 次删除
分列视图 显示文件统计
  1. 5 5
      README.md
  2. 88 53
      dist/alpine.js
  3. 0 0
      dist/alpine.min.js
  4. 2 2
      dist/mix-manifest.json
  5. 0 0
      dist/project-x.min.js
  6. 1 1
      index.html
  7. 1 1
      package-lock.json
  8. 4 4
      package.json
  9. 77 43
      src/component.js
  10. 6 6
      src/index.js
  11. 9 10
      test/bind.spec.js
  12. 2 2
      test/cloak.spec.js
  13. 47 8
      test/constructor.spec.js
  14. 2 2
      test/data.spec.js
  15. 13 13
      test/model.spec.js
  16. 3 3
      test/nesting.spec.js
  17. 8 8
      test/on.spec.js
  18. 2 2
      test/ref.spec.js
  19. 3 3
      test/show.spec.js
  20. 3 3
      test/text.spec.js
  21. 1 1
      turbolinks-manual-test/index.html
  22. 1 1
      turbolinks-manual-test/navigated-away/index.html
  23. 3 3
      webpack.mix.js

+ 5 - 5
README.md
查看文件 

@@ -1,17 +1,17 @@
 
-# Project X
 
+# Alpine.js
 
 
-Project X offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.
 
+Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.
 
 
 You get to keep your DOM, and sprinkle in behavior as you see fit.
 
 
 Think of it like [Tailwind](https://tailwindcss.com/) for JavaScript.
 
 
-> Note: This tool's syntax is almost entirely borrowed from [Vue.js](https://vuejs.org/). I am forever grateful for the gift that it is to the web.
 
+> Note: This tool's syntax is almost entirely borrowed from [Vue.js](https://vuejs.org/)(and by extension [Angular](https://angularjs.org/)). I am forever grateful for the gift they are to the web.
 
 
 ## Install
 
 Add the following script to the end of your `<head>` section.
 
 ```html
 
-<script src="https://cdn.jsdelivr.net/gh/calebporzio/project-x@v0.4.4/dist/project-x.min.js" defer></script>
 
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.0.0/dist/alpine.min.js" defer></script>
 
 ```
 
 
 ## Use
 
@@ -219,7 +219,7 @@ This is a helpful alternative to setting ids and using `document.querySelector`
 
 ### `x-cloak`
 
 **Example:** `<div x-data="{}" x-cloak></div>`
 
 
-`x-cloak` attributes are removed from elements when Project-X initializes. This is useful for hiding pre-initialized DOM. It's typical to add the following global style for this to work:
 
+`x-cloak` attributes are removed from elements when Alpine initializes. This is useful for hiding pre-initialized DOM. It's typical to add the following global style for this to work:
 
 
 ```html
 
 <style>

+ 88 - 53
dist/project-x.js → dist/alpine.js
查看文件 

@@ -876,6 +876,7 @@ function () {
 
     var rawData = Object(_utils__WEBPACK_IMPORTED_MODULE_0__["saferEval"])(this.el.getAttribute('x-data'), {});
 
     this.data = this.wrapDataInObservable(rawData);
 
     this.initialize();
 
+    this.listenForNewElementsToInitialize();
 
   }
 
 
   _createClass(Component, [{
 
@@ -915,73 +916,107 @@ function () {
 
       var _this = this;
 
 
       Object(_utils__WEBPACK_IMPORTED_MODULE_0__["walkSkippingNestedComponents"])(this.el, function (el) {
 
-        Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el).forEach(function (_ref) {
 
-          var type = _ref.type,
 
-              value = _ref.value,
 
-              modifiers = _ref.modifiers,
 
-              expression = _ref.expression;
 
+        _this.initializeElement(el);
 
+      });
 
+    }
 
+  }, {
 
+    key: "initializeElement",
 
+    value: function initializeElement(el) {
 
+      var _this2 = this;
 
 
-          switch (type) {
 
-            case 'on':
 
-              var event = value;
 
+      Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el).forEach(function (_ref) {
 
+        var type = _ref.type,
 
+            value = _ref.value,
 
+            modifiers = _ref.modifiers,
 
+            expression = _ref.expression;
 
 
-              _this.registerListener(el, event, modifiers, expression);
 
+        switch (type) {
 
+          case 'on':
 
+            var event = value;
 
 
-              break;
 
+            _this2.registerListener(el, event, modifiers, expression);
 
 
-            case 'model':
 
-              // If the element we are binding to is a select, a radio, or checkbox
 
-              // we'll listen for the change event instead of the "input" event.
 
-              var event = el.tagName.toLowerCase() === 'select' || ['checkbox', 'radio'].includes(el.type) || modifiers.includes('lazy') ? 'change' : 'input';
 
+            break;
 
 
-              var listenerExpression = _this.generateExpressionForXModelListener(el, modifiers, expression);
 
+          case 'model':
 
+            // If the element we are binding to is a select, a radio, or checkbox
 
+            // we'll listen for the change event instead of the "input" event.
 
+            var event = el.tagName.toLowerCase() === 'select' || ['checkbox', 'radio'].includes(el.type) || modifiers.includes('lazy') ? 'change' : 'input';
 
 
-              _this.registerListener(el, event, modifiers, listenerExpression);
 
+            var listenerExpression = _this2.generateExpressionForXModelListener(el, modifiers, expression);
 
 
-              var attrName = 'value';
 
+            _this2.registerListener(el, event, modifiers, listenerExpression);
 
 
-              var _this$evaluateReturnE = _this.evaluateReturnExpression(expression),
 
-                  output = _this$evaluateReturnE.output;
 
+            var attrName = 'value';
 
 
-              _this.updateAttributeValue(el, attrName, output);
 
+            var _this2$evaluateReturn = _this2.evaluateReturnExpression(expression),
 
+                output = _this2$evaluateReturn.output;
 
 
-              break;
 
+            _this2.updateAttributeValue(el, attrName, output);
 
 
-            case 'bind':
 
-              var attrName = value;
 
+            break;
 
 
-              var _this$evaluateReturnE2 = _this.evaluateReturnExpression(expression),
 
-                  output = _this$evaluateReturnE2.output;
 
+          case 'bind':
 
+            var attrName = value;
 
 
-              _this.updateAttributeValue(el, attrName, output);
 
+            var _this2$evaluateReturn2 = _this2.evaluateReturnExpression(expression),
 
+                output = _this2$evaluateReturn2.output;
 
 
-              break;
 
+            _this2.updateAttributeValue(el, attrName, output);
 
 
-            case 'text':
 
-              var _this$evaluateReturnE3 = _this.evaluateReturnExpression(expression),
 
-                  output = _this$evaluateReturnE3.output;
 
+            break;
 
 
-              _this.updateTextValue(el, output);
 
+          case 'text':
 
+            var _this2$evaluateReturn3 = _this2.evaluateReturnExpression(expression),
 
+                output = _this2$evaluateReturn3.output;
 
 
-              break;
 
+            _this2.updateTextValue(el, output);
 
 
-            case 'show':
 
-              var _this$evaluateReturnE4 = _this.evaluateReturnExpression(expression),
 
-                  output = _this$evaluateReturnE4.output;
 
+            break;
 
 
-              _this.updateVisibility(el, output);
 
+          case 'show':
 
+            var _this2$evaluateReturn4 = _this2.evaluateReturnExpression(expression),
 
+                output = _this2$evaluateReturn4.output;
 
 
-              break;
 
+            _this2.updateVisibility(el, output);
 
 
-            case 'cloak':
 
-              el.removeAttribute('x-cloak');
 
-              break;
 
+            break;
 
 
-            default:
 
-              break;
 
+          case 'cloak':
 
+            el.removeAttribute('x-cloak');
 
+            break;
 
+
 
+          default:
 
+            break;
 
+        }
 
+      });
 
+    }
 
+  }, {
 
+    key: "listenForNewElementsToInitialize",
 
+    value: function listenForNewElementsToInitialize() {
 
+      var _this3 = this;
 
+
 
+      var targetNode = this.el;
 
+      var observerOptions = {
 
+        childList: true,
 
+        attributes: false,
 
+        subtree: true
 
+      };
 
+      var observer = new MutationObserver(function (mutations) {
 
+        for (var i = 0; i < mutations.length; i++) {
 
+          if (mutations[i].addedNodes.length > 0) {
 
+            mutations[i].addedNodes.forEach(function (node) {
 
+              if (node.nodeType !== 1) return;
 
+              if (node.matches('[x-data]')) return;
 
+
 
+              if (Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(node).length > 0) {
 
+                _this3.initializeElement(node);
 
+              }
 
+            });
 
           }
 
-        });
 
+        }
 
       });
 
+      observer.observe(targetNode, observerOptions);
 
     }
 
   }, {
 
     key: "refresh",
 
@@ -1091,7 +1126,7 @@ function () {
 
   }, {
 
     key: "registerListener",
 
     value: function registerListener(el, event, modifiers, expression) {
 
-      var _this2 = this;
 
+      var _this4 = this;
 
 
       if (modifiers.includes('away')) {
 
         var handler = function handler(e) {
 
@@ -1101,7 +1136,7 @@ function () {
 
           if (el.offsetWidth < 1 && el.offsetHeight < 1) return; // Now that we are sure the element is visible, AND the click
 
           // is from outside it, let's run the expression.
 
 
-          _this2.runListenerHandler(expression, e);
 
+          _this4.runListenerHandler(expression, e);
 
 
           if (modifiers.includes('once')) {
 
             document.removeEventListener(event, handler);
 
@@ -1117,7 +1152,7 @@ function () {
 
           if (modifiers.includes('prevent')) e.preventDefault();
 
           if (modifiers.includes('stop')) e.stopPropagation();
 
 
-          _this2.runListenerHandler(expression, e);
 
+          _this4.runListenerHandler(expression, e);
 
 
           if (modifiers.includes('once')) {
 
             node.removeEventListener(event, _handler);
 
@@ -1255,7 +1290,7 @@ function () {
 
   }, {
 
     key: "getRefsProxy",
 
     value: function getRefsProxy() {
 
-      var self = this; // One of the goals of this project is to not hold elements in memory, but rather re-evaluate
 
+      var self = this; // One of the goals of this  is to not hold elements in memory, but rather re-evaluate
 
       // the DOM when the system needs something from it. This way, the framework is flexible and
 
       // friendly to outside DOM changes from libraries like Vue/Livewire.
 
       // For this reason, I'm using an "on-demand" proxy to fake a "$refs" object.
 
@@ -1301,7 +1336,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /* @flow */
 
 
 
-var projectX = {
 
+var Alpine = {
 
   start: function start() {
 
     var _this = this;
 
 
@@ -1380,12 +1415,12 @@ var projectX = {
 
   }
 
 };
 
 
-if (!window.projectX && !Object(_utils__WEBPACK_IMPORTED_MODULE_2__["isTesting"])()) {
 
-  window.projectX = projectX;
 
-  window.projectX.start();
 
+if (!window.Alpine && !Object(_utils__WEBPACK_IMPORTED_MODULE_2__["isTesting"])()) {
 
+  window.Alpine = Alpine;
 
+  window.Alpine.start();
 
 }
 
 
-/* harmony default export */ __webpack_exports__["default"] = (projectX);
 
+/* harmony default export */ __webpack_exports__["default"] = (Alpine);
 
 
 /***/ }),
 
 
@@ -1502,7 +1537,7 @@ function getXAttrs(el, type) {
 
 /*! no static exports found */
 
 /***/ (function(module, exports, __webpack_require__) {
 
 
-module.exports = __webpack_require__(/*! /Users/calebporzio/Documents/Code/sites/project-x/src/index.js */"./src/index.js");
 
+module.exports = __webpack_require__(/*! /Users/calebporzio/Documents/Code/sites/alpine/src/index.js */"./src/index.js");
 
 
 
 /***/ })

文件差异内容过多而无法显示
+ 0 - 0
dist/alpine.min.js


+ 2 - 2
dist/mix-manifest.json
查看文件 

@@ -1,4 +1,4 @@
 
 {
 
-    "/project-x.js": "/project-x.js?id=ec509918933bb1813fd2",
 
-    "/project-x.min.js": "/project-x.min.js?id=8bba743308e09dcd7d20"
 
+    "/alpine.min.js": "/alpine.min.js?id=7adbda4e32b0fe66797a",
 
+    "/alpine.js": "/alpine.js?id=6aaefe3b77e1795daab9"
 
 }

文件差异内容过多而无法显示
+ 0 - 0
dist/project-x.min.js


+ 1 - 1
index.html
查看文件 

@@ -5,7 +5,7 @@
 
             [x-cloak] { display: none; }
 
         </style>
 
 
-        <script src="https://cdn.jsdelivr.net/gh/calebporzio/project-x@v0.4.4/dist/project-x.min.js" defer></script>
 
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.0.0/dist/alpine.min.js" defer></script>
 
     </head>
 
     <body>
 
         <table>

+ 1 - 1
package-lock.json
查看文件 

@@ -1,5 +1,5 @@
 
 {
 
-  "name": "project-x",
 
+  "name": "alpinejs",
 
   "version": "0.4.0",
 
   "lockfileVersion": 1,
 
   "requires": true,

+ 4 - 4
package.json
查看文件 

@@ -1,10 +1,10 @@
 
 {
 
-  "main": "dist/project-x.js",
 
-  "name": "project-x",
 
-  "version": "0.4.4",
 
+  "main": "dist/alpine.js",
 
+  "name": "alpinejs",
 
+  "version": "1.0.0",
 
   "repository": {
 
     "type": "git",
 
-    "url": "git://github.com/calebporzio/project-x.git"
 
+    "url": "git://github.com/alpinejs/alpine.git"
 
   },
 
   "scripts": {
 
     "test": "npx jest",

+ 77 - 43
src/component.js
查看文件 

@@ -9,6 +9,8 @@ export default class Component {
 
         this.data = this.wrapDataInObservable(rawData)
 
 
         this.initialize()
 
+
 
+        this.listenForNewElementsToInitialize()
 
     }
 
 
     wrapDataInObservable(data) {
 
@@ -44,55 +46,87 @@ export default class Component {
 
 
     initialize() {
 
         walkSkippingNestedComponents(this.el, el => {
 
-            getXAttrs(el).forEach(({ type, value, modifiers, expression }) => {
 
-                switch (type) {
 
-                    case 'on':
 
-                        var event = value
 
-                        this.registerListener(el, event, modifiers, expression)
 
-                        break;
 
-
 
-                    case 'model':
 
-                        // If the element we are binding to is a select, a radio, or checkbox
 
-                        // we'll listen for the change event instead of the "input" event.
 
-                        var event = (el.tagName.toLowerCase() === 'select')
 
-                            || ['checkbox', 'radio'].includes(el.type)
 
-                            || modifiers.includes('lazy')
 
-                            ? 'change' : 'input'
 
-
 
-                        const listenerExpression = this.generateExpressionForXModelListener(el, modifiers, expression)
 
+            this.initializeElement(el)
 
+        })
 
+    }
 
 
-                        this.registerListener(el, event, modifiers, listenerExpression)
 
+    initializeElement(el) {
 
+        getXAttrs(el).forEach(({ type, value, modifiers, expression }) => {
 
+            switch (type) {
 
+                case 'on':
 
+                    var event = value
 
+                    this.registerListener(el, event, modifiers, expression)
 
+                    break;
 
+
 
+                case 'model':
 
+                    // If the element we are binding to is a select, a radio, or checkbox
 
+                    // we'll listen for the change event instead of the "input" event.
 
+                    var event = (el.tagName.toLowerCase() === 'select')
 
+                        || ['checkbox', 'radio'].includes(el.type)
 
+                        || modifiers.includes('lazy')
 
+                        ? 'change' : 'input'
 
+
 
+                    const listenerExpression = this.generateExpressionForXModelListener(el, modifiers, expression)
 
+
 
+                    this.registerListener(el, event, modifiers, listenerExpression)
 
+
 
+                    var attrName = 'value'
 
+                    var { output } = this.evaluateReturnExpression(expression)
 
+                    this.updateAttributeValue(el, attrName, output)
 
+                    break;
 
+
 
+                case 'bind':
 
+                    var attrName = value
 
+                    var { output } = this.evaluateReturnExpression(expression)
 
+                    this.updateAttributeValue(el, attrName, output)
 
+                    break;
 
+
 
+                case 'text':
 
+                    var { output } = this.evaluateReturnExpression(expression)
 
+                    this.updateTextValue(el, output)
 
+                    break;
 
+
 
+                case 'show':
 
+                    var { output } = this.evaluateReturnExpression(expression)
 
+                    this.updateVisibility(el, output)
 
+                    break;
 
+
 
+                case 'cloak':
 
+                    el.removeAttribute('x-cloak')
 
+                    break;
 
+
 
+                default:
 
+                    break;
 
+            }
 
+        })
 
+    }
 
 
-                        var attrName = 'value'
 
-                        var { output } = this.evaluateReturnExpression(expression)
 
-                        this.updateAttributeValue(el, attrName, output)
 
-                        break;
 
+    listenForNewElementsToInitialize() {
 
+        var targetNode = this.el
 
 
-                    case 'bind':
 
-                        var attrName = value
 
-                        var { output } = this.evaluateReturnExpression(expression)
 
-                        this.updateAttributeValue(el, attrName, output)
 
-                        break;
 
+        var observerOptions = {
 
+            childList: true,
 
+            attributes: false,
 
+            subtree: true,
 
+        }
 
 
-                    case 'text':
 
-                        var { output } = this.evaluateReturnExpression(expression)
 
-                        this.updateTextValue(el, output)
 
-                        break;
 
+        var observer = new MutationObserver((mutations) => {
 
+            for (var i=0; i < mutations.length; i++){
 
+                if (mutations[i].addedNodes.length > 0) {
 
+                    mutations[i].addedNodes.forEach(node => {
 
+                        if (node.nodeType !== 1) return
 
 
-                    case 'show':
 
-                        var { output } = this.evaluateReturnExpression(expression)
 
-                        this.updateVisibility(el, output)
 
-                        break;
 
-
 
-                    case 'cloak':
 
-                        el.removeAttribute('x-cloak')
 
-                        break;
 
+                        if (node.matches('[x-data]')) return
 
 
-                    default:
 
-                        break;
 
+                        if (getXAttrs(node).length > 0) {
 
+                            this.initializeElement(node)
 
+                        }
 
+                    })
 
                 }
 
-            })
 
-        })
 
+              }
 
+        });
 
+
 
+        observer.observe(targetNode, observerOptions);
 
     }
 
 
     refresh() {
 
@@ -334,7 +368,7 @@ export default class Component {
 
     getRefsProxy() {
 
         var self = this
 
 
-        // One of the goals of this project is to not hold elements in memory, but rather re-evaluate
 
+        // One of the goals of this  is to not hold elements in memory, but rather re-evaluate
 
         // the DOM when the system needs something from it. This way, the framework is flexible and
 
         // friendly to outside DOM changes from libraries like Vue/Livewire.
 
         // For this reason, I'm using an "on-demand" proxy to fake a "$refs" object.

+ 6 - 6
src/index.js
查看文件 

@@ -2,7 +2,7 @@
 
 import Component from './component'
 
 import { domReady, isTesting } from './utils'
 
 
-const projectX = {
 
+const Alpine = {
 
     start: async function () {
 
         if (! isTesting()) {
 
             await domReady()
 
@@ -66,7 +66,7 @@ const projectX = {
 
               }
 
         });
 
 
-        observer.observe(targetNode, observerOptions);
 
+        observer.observe(targetNode, observerOptions)
 
     },
 
 
     initializeElement: function (el) {
 
@@ -74,9 +74,9 @@ const projectX = {
 
     }
 
 }
 
 
-if (! window.projectX && ! isTesting()) {
 
-    window.projectX = projectX
 
-    window.projectX.start()
 
+if (! window.Alpine && ! isTesting()) {
 
+    window.Alpine = Alpine
 
+    window.Alpine.start()
 
 }
 
 
-export default projectX
 
+export default Alpine

+ 9 - 10
test/bind.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-import projectX from 'project-x'
 
+import Alpine from 'alpinejs'
 
 
 global.MutationObserver = class {
 
     observe() {}
 
@@ -11,7 +11,7 @@ test('attribute bindings are set on initialize', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
 
 })
 
@@ -23,7 +23,7 @@ test('class attribute bindings are removed by object syntax', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').classList.contains('foo')).toBeFalsy()
 
 })
 
@@ -35,7 +35,7 @@ test('class attribute bindings are added by object syntax', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
 
 })
 
@@ -47,7 +47,7 @@ test('class attribute bindings are added by nested object syntax', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
 
 })
 
@@ -59,7 +59,7 @@ test('class attribute bindings are removed by array syntax', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').classList.contains('foo')).toBeFalsy()
 
 })
 
@@ -71,7 +71,7 @@ test('class attribute bindings are added by array syntax', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy
 
 })
 
@@ -87,7 +87,7 @@ test('boolean attributes set to false are removed from element', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelectorAll('input')[0].disabled).toBeFalsy()
 
     expect(document.querySelectorAll('input')[1].checked).toBeFalsy()
 
@@ -106,11 +106,10 @@ test('boolean attributes set to true are added to element', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelectorAll('input')[0].disabled).toBeTruthy()
 
     expect(document.querySelectorAll('input')[1].checked).toBeTruthy()
 
     expect(document.querySelectorAll('input')[2].required).toBeTruthy()
 
     expect(document.querySelectorAll('input')[3].readOnly).toBeTruthy()
 
 })
 
-

+ 2 - 2
test/cloak.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-import projectX from 'project-x'
 
+import Alpine from 'alpinejs'
 
 import { wait } from '@testing-library/dom'
 
 
 global.MutationObserver = class {
 
@@ -14,7 +14,7 @@ test('x-cloak is removed', async () => {
 
 
     expect(document.querySelector('span').getAttribute('x-cloak')).not.toBeNull()
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     await wait(() => { expect(document.querySelector('span').getAttribute('x-cloak')).toBeNull() })
 
 })

+ 47 - 8
test/constructor.spec.js
查看文件 

@@ -1,15 +1,12 @@
 
-import projectX from 'project-x'
 
+import Alpine from 'alpinejs'
 
 import { fireEvent, wait } from '@testing-library/dom'
 
 
-global.MutationObserver = class {
 
-    observe() {}
 
-}
 
 
 test('auto-detect new components and dont lose state of existing ones', async () => {
 
-    var runObserver
 
+    var runObservers = []
 
 
     global.MutationObserver = class {
 
-        constructor(callback) { runObserver = callback }
 
+        constructor(callback) { runObservers.push(callback) }
 
         observe() {}
 
     }
 
 
@@ -20,7 +17,7 @@ test('auto-detect new components and dont lose state of existing ones', async ()
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
 
 
@@ -35,7 +32,7 @@ test('auto-detect new components and dont lose state of existing ones', async ()
 
     `
 
     document.body.appendChild(div)
 
 
-    runObserver([
 
+    runObservers[1]([
 
         { addedNodes: [ div ] }
 
     ])
 
 
@@ -44,3 +41,45 @@ test('auto-detect new components and dont lose state of existing ones', async ()
 
         expect(document.querySelector('#B span').innerText).toEqual('baz')
 
     })
 
 })
 
+
 
+test('auto-initialize new elements added to a component', async () => {
 
+    var runObservers = []
 
+
 
+    global.MutationObserver = class {
 
+        constructor(callback) { runObservers.push(callback) }
 
+        observe() {}
 
+    }
 
+
 
+    document.body.innerHTML = `
 
+        <div x-data="{ count: 0 }">
 
+            <span x-text="count"></span>
 
+
 
+            <div id="target">
 
+            </div>
 
+        </div>
 
+    `
 
+
 
+    Alpine.start()
 
+
 
+    expect(document.querySelector('span').innerText).toEqual(0)
 
+
 
+    document.querySelector('#target').innerHTML = `
 
+        <span x-text="count"></span>
 
+
 
+        <button x-on:click="count++"></button>
 
+    `
 
+
 
+    runObservers[0]([
 
+        { addedNodes: [
 
+            document.querySelector('#target span'),
 
+            document.querySelector('#target button'),
 
+        ] }
 
+    ])
 
+
 
+    await wait(() => { expect(document.querySelector('#target span').innerText).toEqual(0) })
 
+
 
+    document.querySelector('button').click()
 
+
 
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
 
+    await wait(() => { expect(document.querySelector('#target span').innerText).toEqual(1) })
 
+})

+ 2 - 2
test/data.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-import projectX from 'project-x'
 
+import Alpine from 'alpinejs'
 
 import { fireEvent, wait } from '@testing-library/dom'
 
 
 global.MutationObserver = class {
 
@@ -12,7 +12,7 @@ test('data manipulated on component object is reactive', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     document.querySelector('div').__x.data.foo = 'baz'

+ 13 - 13
test/model.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-import projectX from 'project-x'
 
+import Alpine from 'alpinejs'
 
 import { wait, fireEvent } from '@testing-library/dom'
 
 
 global.MutationObserver = class {
 
@@ -12,7 +12,7 @@ test('x-model has value binding when initialized', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('input').value).toEqual('bar')
 
 })
 
@@ -24,7 +24,7 @@ test('x-model updates value when updated via input event', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'baz' }})
 
 
@@ -40,7 +40,7 @@ test('x-model reflects data changed elsewhere', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     document.querySelector('button').click()
 
 
@@ -54,7 +54,7 @@ test('x-model casts value to number if number modifier is present', async () =>
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     fireEvent.input(document.querySelector('input'), { target: { value: '123' }})
 
 
@@ -70,7 +70,7 @@ test('x-model trims value if trim modifier is present', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'bar   ' }})
 
 
@@ -84,7 +84,7 @@ test('x-model updates value when updated via changed event when lazy modifier is
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     fireEvent.change(document.querySelector('input'), { target: { value: 'baz' }})
 
 
@@ -100,7 +100,7 @@ test('x-model binds checkbox value', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('input').checked).toEqual(true)
 
     expect(document.querySelector('span').getAttribute('bar')).toEqual("true")
 
@@ -120,7 +120,7 @@ test('x-model binds checkbox value to array', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelectorAll('input')[0].checked).toEqual(true)
 
     expect(document.querySelectorAll('input')[1].checked).toEqual(false)
 
@@ -145,7 +145,7 @@ test('x-model binds radio value', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelectorAll('input')[0].checked).toEqual(true)
 
     expect(document.querySelectorAll('input')[1].checked).toEqual(false)
 
@@ -173,7 +173,7 @@ test('x-model binds select dropdown', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelectorAll('option')[0].selected).toEqual(false)
 
     expect(document.querySelectorAll('option')[1].selected).toEqual(true)
 
@@ -203,7 +203,7 @@ test('x-model binds multiple select dropdown', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelectorAll('option')[0].selected).toEqual(false)
 
     expect(document.querySelectorAll('option')[1].selected).toEqual(true)
 
@@ -229,7 +229,7 @@ test('x-model binds nested keys', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('input').value).toEqual('foo')
 
     expect(document.querySelector('span').innerText).toEqual('foo')

+ 3 - 3
test/nesting.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-import projectX from 'project-x'
 
+import Alpine from 'alpinejs'
 
 import { wait } from '@testing-library/dom'
 
 const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 
@@ -17,7 +17,7 @@ test('can nest components', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').innerText).toEqual('bar')
 
 
@@ -39,7 +39,7 @@ test('can access parent properties after nested components', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').innerText).toEqual('bar')
 
 })

+ 8 - 8
test/on.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-import projectX from 'project-x'
 
+import Alpine from 'alpinejs'
 
 import { wait } from '@testing-library/dom'
 
 const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 
@@ -15,7 +15,7 @@ test('data modified in event listener updates effected attribute bindings', asyn
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
 
 
@@ -33,7 +33,7 @@ test('nested data modified in event listener updates effected attribute bindings
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
 
 
@@ -52,7 +52,7 @@ test('.stop modifier', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('div').__x.data.foo).toEqual('bar')
 
 
@@ -70,7 +70,7 @@ test('.prevent modifier', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('input').checked).toEqual(false)
 
 
@@ -88,7 +88,7 @@ test('.window modifier', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
 
 
@@ -106,7 +106,7 @@ test('.once modifier', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').getAttribute('foo')).toEqual('0')
 
 
@@ -145,7 +145,7 @@ test('click away', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('ul').classList.contains('hidden')).toEqual(false)

+ 2 - 2
test/ref.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-import projectX from 'project-x'
 
+import Alpine from 'alpinejs'
 
 import { wait } from '@testing-library/dom'
 
 
 global.MutationObserver = class {
 
@@ -14,7 +14,7 @@ test('can reference elements from event listeners', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').innerText).toEqual(undefined)

+ 3 - 3
test/show.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-import projectX from 'project-x'
 
+import Alpine from 'alpinejs'
 
 import { wait } from '@testing-library/dom'
 
 
 global.MutationObserver = class {
 
@@ -14,7 +14,7 @@ test('x-show toggles display: none; with no other style attributes', async () =>
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').getAttribute('style')).toEqual(null)
 
 
@@ -32,7 +32,7 @@ test('x-show toggles display: none; with no other style attributes', async () =>
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     expect(document.querySelector('span').getAttribute('style')).toEqual('color: blue;')

+ 3 - 3
test/text.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-import projectX from 'project-x'
 
+import Alpine from 'alpinejs'
 
 import { wait } from '@testing-library/dom'
 
 
 global.MutationObserver = class {
 
@@ -12,7 +12,7 @@ test('x-text on init', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 
 })
 
@@ -26,7 +26,7 @@ test('x-text on triggered update', async () => {
 
         </div>
 
     `
 
 
-    projectX.start()
 
+    Alpine.start()
 
 
     await wait(() => { expect(document.querySelector('span').innerText).toEqual('') })

+ 1 - 1
turbolinks-manual-test/index.html
查看文件 

@@ -1,7 +1,7 @@
 
 <html>
 
     <head>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
 
-        <script src="/dist/project-x.js" defer></script>
 
+        <script src="/dist/alpine.js" defer></script>
 
     </head>
 
     <body>
 
         <h1>First Page</h1>

+ 1 - 1
turbolinks-manual-test/navigated-away/index.html
查看文件 

@@ -1,7 +1,7 @@
 
 <html>
 
     <head>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
 
-        <script src="/dist/project-x.js" defer></script>
 
+        <script src="/dist/alpine.js" defer></script>
 
     </head>
 
     <body>
 
         <h1>Second Page</h1>

+ 3 - 3
webpack.mix.js
查看文件 

@@ -1,12 +1,12 @@
 
 let mix = require('laravel-mix');
 
 
-// Allow both "project-x.js" && "project-x.min.js"
 
+// Allow both "alpine.js" && "alpine.min.js"
 
 // to both exist in the mix.manifest file.
 
 require('laravel-mix-merge-manifest');
 
 
 const outputFileName = process.env.NODE_ENV === 'production'
 
-    ? 'project-x.min.js'
 
-    : 'project-x.js'
 
+    ? 'alpine.min.js'
 
+    : 'alpine.js'
 
 
 mix
 
     .js('src/index.js', outputFileName)

部分文件因为文件数量过多而无法显示