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

alpinejs · Dec 18, 2019 · c7c1209 · c7c1209 · jtrod · Oct 28, 2020
1 parent ce66835
commit c7c1209
Show file tree

Hide file tree

Showing 23 changed files with 282 additions and 175 deletions.
diff --git a/README.md b/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/[email protected]/dist/project-x.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/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>

diff --git a/dist/project-x.js → dist/alpine.js b/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");
 
 
 /***/ })

diff --git a/dist/alpine.min.js b/dist/alpine.min.js
diff --git a/dist/mix-manifest.json b/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"
 }
diff --git a/dist/project-x.min.js b/dist/project-x.min.js
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
             [x-cloak] { display: none; }
         </style>
 
-        <script src="https://cdn.jsdelivr.net/gh/calebporzio/[email protected]/dist/project-x.min.js" defer></script>
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
     </head>
     <body>
         <table>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",