Skip to content

Commit c7c1209

Browse files
calebporziocalebporzio
committed
Rename project from "Project-X" to "Alpine"
1 parent ce66835 commit c7c1209

23 files changed

+282
-175
lines changed

‎README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
# Project X
1+
# Alpine.js
22

3-
Project X offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.
3+
Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.
44

55
You get to keep your DOM, and sprinkle in behavior as you see fit.
66

77
Think of it like [Tailwind](https://tailwindcss.com/) for JavaScript.
88

9-
> 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.
9+
> 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.
1010
1111
## Install
1212
Add the following script to the end of your `<head>` section.
1313
```html
14-
<script src="https://cdn.jsdelivr.net/gh/calebporzio/project-x@v0.4.4/dist/project-x.min.js" defer></script>
14+
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.0.0/dist/alpine.min.js" defer></script>
1515
```
1616

1717
## Use
@@ -219,7 +219,7 @@ This is a helpful alternative to setting ids and using `document.querySelector`
219219
### `x-cloak`
220220
**Example:** `<div x-data="{}" x-cloak></div>`
221221

222-
`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:
222+
`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:
223223

224224
```html
225225
<style>

dist/project-x.js renamed to dist/alpine.js

Lines changed: 88 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -876,6 +876,7 @@ function () {
876876
var rawData = Object(_utils__WEBPACK_IMPORTED_MODULE_0__["saferEval"])(this.el.getAttribute('x-data'), {});
877877
this.data = this.wrapDataInObservable(rawData);
878878
this.initialize();
879+
this.listenForNewElementsToInitialize();
879880
}
880881

881882
_createClass(Component, [{
@@ -915,73 +916,107 @@ function () {
915916
var _this = this;
916917

917918
Object(_utils__WEBPACK_IMPORTED_MODULE_0__["walkSkippingNestedComponents"])(this.el, function (el) {
918-
Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el).forEach(function (_ref) {
919-
var type = _ref.type,
920-
value = _ref.value,
921-
modifiers = _ref.modifiers,
922-
expression = _ref.expression;
919+
_this.initializeElement(el);
920+
});
921+
}
922+
}, {
923+
key: "initializeElement",
924+
value: function initializeElement(el) {
925+
var _this2 = this;
923926

924-
switch (type) {
925-
case 'on':
926-
var event = value;
927+
Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el).forEach(function (_ref) {
928+
var type = _ref.type,
929+
value = _ref.value,
930+
modifiers = _ref.modifiers,
931+
expression = _ref.expression;
927932

928-
_this.registerListener(el, event, modifiers, expression);
933+
switch (type) {
934+
case 'on':
935+
var event = value;
929936

930-
break;
937+
_this2.registerListener(el, event, modifiers, expression);
931938

932-
case 'model':
933-
// If the element we are binding to is a select, a radio, or checkbox
934-
// we'll listen for the change event instead of the "input" event.
935-
var event = el.tagName.toLowerCase() === 'select' || ['checkbox', 'radio'].includes(el.type) || modifiers.includes('lazy') ? 'change' : 'input';
939+
break;
936940

937-
var listenerExpression = _this.generateExpressionForXModelListener(el, modifiers, expression);
941+
case 'model':
942+
// If the element we are binding to is a select, a radio, or checkbox
943+
// we'll listen for the change event instead of the "input" event.
944+
var event = el.tagName.toLowerCase() === 'select' || ['checkbox', 'radio'].includes(el.type) || modifiers.includes('lazy') ? 'change' : 'input';
938945

939-
_this.registerListener(el, event, modifiers, listenerExpression);
946+
var listenerExpression = _this2.generateExpressionForXModelListener(el, modifiers, expression);
940947

941-
var attrName = 'value';
948+
_this2.registerListener(el, event, modifiers, listenerExpression);
942949

943-
var _this$evaluateReturnE = _this.evaluateReturnExpression(expression),
944-
output = _this$evaluateReturnE.output;
950+
var attrName = 'value';
945951

946-
_this.updateAttributeValue(el, attrName, output);
952+
var _this2$evaluateReturn = _this2.evaluateReturnExpression(expression),
953+
output = _this2$evaluateReturn.output;
947954

948-
break;
955+
_this2.updateAttributeValue(el, attrName, output);
949956

950-
case 'bind':
951-
var attrName = value;
957+
break;
952958

953-
var _this$evaluateReturnE2 = _this.evaluateReturnExpression(expression),
954-
output = _this$evaluateReturnE2.output;
959+
case 'bind':
960+
var attrName = value;
955961

956-
_this.updateAttributeValue(el, attrName, output);
962+
var _this2$evaluateReturn2 = _this2.evaluateReturnExpression(expression),
963+
output = _this2$evaluateReturn2.output;
957964

958-
break;
965+
_this2.updateAttributeValue(el, attrName, output);
959966

960-
case 'text':
961-
var _this$evaluateReturnE3 = _this.evaluateReturnExpression(expression),
962-
output = _this$evaluateReturnE3.output;
967+
break;
963968

964-
_this.updateTextValue(el, output);
969+
case 'text':
970+
var _this2$evaluateReturn3 = _this2.evaluateReturnExpression(expression),
971+
output = _this2$evaluateReturn3.output;
965972

966-
break;
973+
_this2.updateTextValue(el, output);
967974

968-
case 'show':
969-
var _this$evaluateReturnE4 = _this.evaluateReturnExpression(expression),
970-
output = _this$evaluateReturnE4.output;
975+
break;
971976

972-
_this.updateVisibility(el, output);
977+
case 'show':
978+
var _this2$evaluateReturn4 = _this2.evaluateReturnExpression(expression),
979+
output = _this2$evaluateReturn4.output;
973980

974-
break;
981+
_this2.updateVisibility(el, output);
975982

976-
case 'cloak':
977-
el.removeAttribute('x-cloak');
978-
break;
983+
break;
979984

980-
default:
981-
break;
985+
case 'cloak':
986+
el.removeAttribute('x-cloak');
987+
break;
988+
989+
default:
990+
break;
991+
}
992+
});
993+
}
994+
}, {
995+
key: "listenForNewElementsToInitialize",
996+
value: function listenForNewElementsToInitialize() {
997+
var _this3 = this;
998+
999+
var targetNode = this.el;
1000+
var observerOptions = {
1001+
childList: true,
1002+
attributes: false,
1003+
subtree: true
1004+
};
1005+
var observer = new MutationObserver(function (mutations) {
1006+
for (var i = 0; i < mutations.length; i++) {
1007+
if (mutations[i].addedNodes.length > 0) {
1008+
mutations[i].addedNodes.forEach(function (node) {
1009+
if (node.nodeType !== 1) return;
1010+
if (node.matches('[x-data]')) return;
1011+
1012+
if (Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(node).length > 0) {
1013+
_this3.initializeElement(node);
1014+
}
1015+
});
9821016
}
983-
});
1017+
}
9841018
});
1019+
observer.observe(targetNode, observerOptions);
9851020
}
9861021
}, {
9871022
key: "refresh",
@@ -1091,7 +1126,7 @@ function () {
10911126
}, {
10921127
key: "registerListener",
10931128
value: function registerListener(el, event, modifiers, expression) {
1094-
var _this2 = this;
1129+
var _this4 = this;
10951130

10961131
if (modifiers.includes('away')) {
10971132
var handler = function handler(e) {
@@ -1101,7 +1136,7 @@ function () {
11011136
if (el.offsetWidth < 1 && el.offsetHeight < 1) return; // Now that we are sure the element is visible, AND the click
11021137
// is from outside it, let's run the expression.
11031138

1104-
_this2.runListenerHandler(expression, e);
1139+
_this4.runListenerHandler(expression, e);
11051140

11061141
if (modifiers.includes('once')) {
11071142
document.removeEventListener(event, handler);
@@ -1117,7 +1152,7 @@ function () {
11171152
if (modifiers.includes('prevent')) e.preventDefault();
11181153
if (modifiers.includes('stop')) e.stopPropagation();
11191154

1120-
_this2.runListenerHandler(expression, e);
1155+
_this4.runListenerHandler(expression, e);
11211156

11221157
if (modifiers.includes('once')) {
11231158
node.removeEventListener(event, _handler);
@@ -1255,7 +1290,7 @@ function () {
12551290
}, {
12561291
key: "getRefsProxy",
12571292
value: function getRefsProxy() {
1258-
var self = this; // One of the goals of this project is to not hold elements in memory, but rather re-evaluate
1293+
var self = this; // One of the goals of this is to not hold elements in memory, but rather re-evaluate
12591294
// the DOM when the system needs something from it. This way, the framework is flexible and
12601295
// friendly to outside DOM changes from libraries like Vue/Livewire.
12611296
// For this reason, I'm using an "on-demand" proxy to fake a "$refs" object.
@@ -1301,7 +1336,7 @@ __webpack_require__.r(__webpack_exports__);
13011336
/* @flow */
13021337

13031338

1304-
var projectX = {
1339+
var Alpine = {
13051340
start: function start() {
13061341
var _this = this;
13071342

@@ -1380,12 +1415,12 @@ var projectX = {
13801415
}
13811416
};
13821417

1383-
if (!window.projectX && !Object(_utils__WEBPACK_IMPORTED_MODULE_2__["isTesting"])()) {
1384-
window.projectX = projectX;
1385-
window.projectX.start();
1418+
if (!window.Alpine && !Object(_utils__WEBPACK_IMPORTED_MODULE_2__["isTesting"])()) {
1419+
window.Alpine = Alpine;
1420+
window.Alpine.start();
13861421
}
13871422

1388-
/* harmony default export */ __webpack_exports__["default"] = (projectX);
1423+
/* harmony default export */ __webpack_exports__["default"] = (Alpine);
13891424

13901425
/***/ }),
13911426

@@ -1502,7 +1537,7 @@ function getXAttrs(el, type) {
15021537
/*! no static exports found */
15031538
/***/ (function(module, exports, __webpack_require__) {
15041539

1505-
module.exports = __webpack_require__(/*! /Users/calebporzio/Documents/Code/sites/project-x/src/index.js */"./src/index.js");
1540+
module.exports = __webpack_require__(/*! /Users/calebporzio/Documents/Code/sites/alpine/src/index.js */"./src/index.js");
15061541

15071542

15081543
/***/ })

‎dist/alpine.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mix-manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"/project-x.js": "/project-x.js?id=ec509918933bb1813fd2",
3-
"/project-x.min.js": "/project-x.min.js?id=8bba743308e09dcd7d20"
2+
"/alpine.min.js": "/alpine.min.js?id=7adbda4e32b0fe66797a",
3+
"/alpine.js": "/alpine.js?id=6aaefe3b77e1795daab9"
44
}

‎dist/project-x.min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[x-cloak] { display: none; }
66
</style>
77

8-
<script src="https://cdn.jsdelivr.net/gh/calebporzio/project-x@v0.4.4/dist/project-x.min.js" defer></script>
8+
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.0.0/dist/alpine.min.js" defer></script>
99
</head>
1010
<body>
1111
<table>

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"main": "dist/project-x.js",
3-
"name": "project-x",
4-
"version": "0.4.4",
2+
"main": "dist/alpine.js",
3+
"name": "alpinejs",
4+
"version": "1.0.0",
55
"repository": {
66
"type": "git",
7-
"url": "git://github.com/calebporzio/project-x.git"
7+
"url": "git://github.com/alpinejs/alpine.git"
88
},
99
"scripts": {
1010
"test": "npx jest",

0 commit comments

Comments
 (0)