Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

alpinejs

Package Overview
Dependencies
Maintainers
1
Versions
134
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

alpinejs - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

alpine.js

3

dist/alpine.js

@@ -1,2 +0,1 @@

function e(){return navigator.userAgent.includes("Node.js")||navigator.userAgent.includes("jsdom")}function t(e,n,r){if(void 0===r&&(r=!0),!e.hasAttribute("x-data")||r){n(e);for(var i=e.firstElementChild;i;)t(i,n,!1),i=i.nextElementSibling}}function n(e,t,n){return void 0===n&&(n={}),new Function(["$data"].concat(Object.keys(n)),"var result; with($data) { result = "+e+" }; return result").apply(void 0,[t].concat(Object.values(n)))}function r(e){return/x-(on|bind|data|text|model|if|show|cloak|ref)/.test(e.name)}function i(e,t){return Array.from(e.attributes).filter(r).map(function(e){var t=e.name.match(/x-(on|bind|data|text|model|if|show|cloak|ref)/),n=e.name.match(/:([a-zA-Z\-]+)/),r=e.name.match(/\.[^.\]]+(?=[^\]]*$)/g)||[];return{type:t?t[1]:null,value:n?n[1]:null,modifiers:r.map(function(e){return e.replace(".","")}),expression:e.value}}).filter(function(e){return!t||e.type===name})}var o=function(e){this.el=e;var t=n(this.el.getAttribute("x-data"),{});this.data=this.wrapDataInObservable(t),this.initialize(),this.listenForNewElementsToInitialize()};o.prototype.wrapDataInObservable=function(e){this.concernedData=[];var t=this,n=function(e){return{set:function(n,r,i){var o=e?e+"."+r:r,a=Reflect.set(n,r,i);return-1===t.concernedData.indexOf(o)&&t.concernedData.push(o),t.refresh(),a},get:function(t,r){return"object"==typeof t[r]&&null!==t[r]?new Proxy(t[r],n(e?e+"."+r:r)):t[r]}}};return new Proxy(e,n())},o.prototype.initialize=function(){var e=this;t(this.el,function(t){e.initializeElement(t)})},o.prototype.initializeElement=function(e){var t=this;i(e).forEach(function(n){var r=n.value,i=n.modifiers,o=n.expression;switch(n.type){case"on":t.registerListener(e,a=r,i,o);break;case"model":var a="select"===e.tagName.toLowerCase()||["checkbox","radio"].includes(e.type)||i.includes("lazy")?"change":"input",u=t.generateExpressionForXModelListener(e,i,o);t.registerListener(e,a,i,u);var s="value",c=t.evaluateReturnExpression(o);t.updateAttributeValue(e,s,c.output);break;case"bind":s=r;var l=t.evaluateReturnExpression(o);t.updateAttributeValue(e,s,l.output);break;case"text":var d=t.evaluateReturnExpression(o);t.updateTextValue(e,d.output);break;case"show":var p=t.evaluateReturnExpression(o);t.updateVisibility(e,p.output);break;case"if":var f=t.evaluateReturnExpression(o);t.updatePresence(e,f.output);break;case"cloak":e.removeAttribute("x-cloak")}})},o.prototype.listenForNewElementsToInitialize=function(){var e=this,t=this.el;new MutationObserver(function(t){for(var r=0;r<t.length;r++){if(!t[r].target.closest("[x-data]").isSameNode(e.el))return;if("attributes"===t[r].type&&"x-data"===t[r].attributeName){var o=n(t[r].target.getAttribute("x-data"),{});Object.keys(o).forEach(function(t){e.data[t]!==o[t]&&(e.data[t]=o[t])})}t[r].addedNodes.length>0&&t[r].addedNodes.forEach(function(t){1===t.nodeType&&(t.matches("[x-data]")||i(t).length>0&&e.initializeElement(t))})}}).observe(t,{childList:!0,attributes:!0,subtree:!0})},o.prototype.refresh=function(){var e,n,r=this,o={model:function(e){r.updateAttributeValue(e.el,"value",e.output)},bind:function(e){r.updateAttributeValue(e.el,e.attrName,e.output)},text:function(e){r.updateTextValue(e.el,e.output)},show:function(e){r.updateVisibility(e.el,e.output)},if:function(e){r.updatePresence(e.el,e.output)}};(e=function(e,n){t(e,n),r.concernedData=[]},function(){var t=this,r=arguments;clearTimeout(n),n=setTimeout(function(){n=null,e.apply(t,r)},5)})(this.el,function(e){i(e).forEach(function(t){var n=t.type,i=t.value;if(o[n]){var a=r.evaluateReturnExpression(t.expression),u=a.output,s=a.deps;r.concernedData.filter(function(e){return s.includes(e)}).length>0&&o[n]({el:e,attrName:i,output:u})}})})},o.prototype.generateExpressionForXModelListener=function(e,t,n){var r;return r="checkbox"===e.type?Array.isArray(this.data[n])?"$event.target.checked ? "+n+".concat([$event.target.value]) : "+n+".filter(i => i !== $event.target.value)":"$event.target.checked":"select"===e.tagName.toLowerCase()&&e.multiple?t.includes("number")?"Array.from($event.target.selectedOptions).map(option => { return parseFloat(option.value || option.text) })":"Array.from($event.target.selectedOptions).map(option => { return option.value || option.text })":t.includes("number")?"parseFloat($event.target.value)":t.includes("trim")?"$event.target.value.trim()":"$event.target.value","radio"===e.type&&(e.hasAttribute("name")||e.setAttribute("name",n)),n+" = "+r},o.prototype.registerListener=function(e,t,n,r){var i=this;if(n.includes("away")){var o=function(a){e.contains(a.target)||e.offsetWidth<1&&e.offsetHeight<1||(i.runListenerHandler(r,a),n.includes("once")&&document.removeEventListener(t,o))};document.addEventListener(t,o)}else{var a=n.includes("window")?window:e,u=function(e){var o=n.filter(function(e){return"window"!==e});"keydown"===t&&o.length>0&&!o.includes(e.key.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase())||(n.includes("prevent")&&e.preventDefault(),n.includes("stop")&&e.stopPropagation(),i.runListenerHandler(r,e),n.includes("once")&&a.removeEventListener(t,u))};a.addEventListener(t,u)}},o.prototype.runListenerHandler=function(e,t){this.evaluateCommandExpression(e,{$event:t,$refs:this.getRefsProxy()})},o.prototype.evaluateReturnExpression=function(e){var t=[],r=function(e){return{get:function(n,i){if("symbol"!=typeof i){var o=e?e+"."+i:i;return"object"!=typeof n[i]||null===n[i]||Array.isArray(n[i])?(t.push(o),n[i]):new Proxy(n[i],r(o))}}}};return{output:n(e,new Proxy(this.data,r())),deps:t}},o.prototype.evaluateCommandExpression=function(e,t){!function(e,t,n){void 0===n&&(n={}),new Function(["$data"].concat(Object.keys(n)),"with($data) { "+e+" }").apply(void 0,[t].concat(Object.values(n)))}(e,this.data,t)},o.prototype.updateTextValue=function(e,t){e.innerText=t},o.prototype.updateVisibility=function(e,t){t?1===e.style.length&&""!==e.style.display?e.removeAttribute("style"):e.style.removeProperty("display"):e.style.display="none"},o.prototype.updatePresence=function(e,t){"template"!==e.nodeName.toLowerCase()&&console.warn("Alpine: [x-if] directive should only be added to <template> tags.");var n=e.nextElementSibling&&!0===e.nextElementSibling.__x_inserted_me;if(t&&!n){var r=document.importNode(e.content,!0);e.parentElement.insertBefore(r,e.nextElementSibling),e.nextElementSibling.__x_inserted_me=!0}else!t&&n&&e.nextElementSibling.remove()},o.prototype.updateAttributeValue=function(e,t,n){if("value"===t)if("radio"===e.type)e.checked=e.value==n;else if("checkbox"===e.type)if(Array.isArray(n)){var r=!1;n.forEach(function(t){t==e.value&&(r=!0)}),e.checked=r}else e.checked=!!n;else"SELECT"===e.tagName?this.updateSelect(e,n):e.value=n;else"class"===t?Array.isArray(n)?e.setAttribute("class",n.join(" ")):Object.keys(n).forEach(function(t){n[t]?t.split(" ").forEach(function(t){return e.classList.add(t)}):t.split(" ").forEach(function(t){return e.classList.remove(t)})}):["disabled","readonly","required","checked","hidden"].includes(t)?n?e.setAttribute(t,""):e.removeAttribute(t):e.setAttribute(t,n)},o.prototype.updateSelect=function(e,t){var n=[].concat(t).map(function(e){return e+""});Array.from(e.options).forEach(function(e){e.selected=n.includes(e.value||e.text)})},o.prototype.getRefsProxy=function(){var e=this;return new Proxy({},{get:function(n,r){var i;return t(e.el,function(e){e.hasAttribute("x-ref")&&e.getAttribute("x-ref")===r&&(i=e)}),i}})};var a={start:function(){try{var t=this;function n(){t.discoverComponents(function(e){t.initializeComponent(e)}),document.addEventListener("turbolinks:load",function(){t.discoverUninitializedComponents(function(e){t.initializeComponent(e)})}),t.listenForNewUninitializedComponentsAtRunTime(function(e){t.initializeComponent(e)})}var r=function(){if(!e())return Promise.resolve(new Promise(function(e){"loading"==document.readyState?document.addEventListener("DOMContentLoaded",e):e()})).then(function(){})}();return Promise.resolve(r&&r.then?r.then(n):n())}catch(e){return Promise.reject(e)}},discoverComponents:function(e){document.querySelectorAll("[x-data]").forEach(function(t){e(t)})},discoverUninitializedComponents:function(e){var t=document.querySelectorAll("[x-data]");Array.from(t).filter(function(e){return void 0===e.__x}).forEach(function(t){e(t)})},listenForNewUninitializedComponentsAtRunTime:function(e){var t=document.querySelector("body");new MutationObserver(function(t){for(var n=0;n<t.length;n++)t[n].addedNodes.length>0&&t[n].addedNodes.forEach(function(t){1===t.nodeType&&t.matches("[x-data]")&&e(t)})}).observe(t,{childList:!0,attributes:!0,subtree:!0})},initializeComponent:function(e){e.__x=new o(e)}};e()||(window.Alpine=a,window.Alpine.start()),module.exports=a;
//# sourceMappingURL=alpine.js.map
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Alpine=t()}(this,(function(){"use strict";function e(){return navigator.userAgent.includes("Node.js")||navigator.userAgent.includes("jsdom")}function t(e,n,i=!0){if(e.hasAttribute("x-data")&&!i)return;n(e);let a=e.firstElementChild;for(;a;)t(a,n,!1),a=a.nextElementSibling}function n(e,t,n={}){return new Function(["$data",...Object.keys(n)],`var result; with($data) { result = ${e} }; return result`)(t,...Object.values(n))}function i(e){return/x-(on|bind|data|text|model|if|show|cloak|ref)/.test(e.name)}function a(e,t){return Array.from(e.attributes).filter(i).map(e=>{const t=e.name.match(/x-(on|bind|data|text|model|if|show|cloak|ref)/),n=e.name.match(/:([a-zA-Z\-]+)/),i=e.name.match(/\.[^.\]]+(?=[^\]]*$)/g)||[];return{type:t?t[1]:null,value:n?n[1]:null,modifiers:i.map(e=>e.replace(".","")),expression:e.value}}).filter(e=>!t||e.type===name)}class r{constructor(e){this.el=e;const t=n(this.el.getAttribute("x-data"),{});t.$refs=this.getRefsProxy(),this.data=this.wrapDataInObservable(t),this.initialize(),this.listenForNewElementsToInitialize()}wrapDataInObservable(e){this.concernedData=[];var t=this;const n=e=>({set(n,i,a){const r=e?`${e}.${i}`:i,s=Reflect.set(n,i,a);return-1===t.concernedData.indexOf(r)&&t.concernedData.push(r),t.refresh(),s},get(t,i){if("object"==typeof t[i]&&null!==t[i]){const a=e?`${e}.${i}`:i;return new Proxy(t[i],n(a))}return t[i]}});return new Proxy(e,n())}initialize(){t(this.el,e=>{this.initializeElement(e)})}initializeElement(e){a(e).forEach(({type:t,value:n,modifiers:i,expression:a})=>{switch(t){case"on":var r=n;this.registerListener(e,r,i,a);break;case"model":r="select"===e.tagName.toLowerCase()||["checkbox","radio"].includes(e.type)||i.includes("lazy")?"change":"input";const t=this.generateExpressionForXModelListener(e,i,a);this.registerListener(e,r,i,t);var s="value",{output:o}=this.evaluateReturnExpression(a);this.updateAttributeValue(e,s,o);break;case"bind":s=n;var{output:o}=this.evaluateReturnExpression(a);this.updateAttributeValue(e,s,o);break;case"text":var{output:o}=this.evaluateReturnExpression(a);this.updateTextValue(e,o);break;case"show":var{output:o}=this.evaluateReturnExpression(a);this.updateVisibility(e,o);break;case"if":var{output:o}=this.evaluateReturnExpression(a);this.updatePresence(e,o);break;case"cloak":e.removeAttribute("x-cloak")}})}listenForNewElementsToInitialize(){const e=this.el;new MutationObserver(e=>{for(let t=0;t<e.length;t++){if(!e[t].target.closest("[x-data]").isSameNode(this.el))return;if("attributes"===e[t].type&&"x-data"===e[t].attributeName){const i=n(e[t].target.getAttribute("x-data"),{});Object.keys(i).forEach(e=>{this.data[e]!==i[e]&&(this.data[e]=i[e])})}e[t].addedNodes.length>0&&e[t].addedNodes.forEach(e=>{1===e.nodeType&&(e.matches("[x-data]")||a(e).length>0&&this.initializeElement(e))})}}).observe(e,{childList:!0,attributes:!0,subtree:!0})}refresh(){var e=this;const n={model:({el:t,output:n})=>{e.updateAttributeValue(t,"value",n)},bind:({el:t,attrName:n,output:i})=>{e.updateAttributeValue(t,n,i)},text:({el:t,output:n})=>{e.updateTextValue(t,n)},show:({el:t,output:n})=>{e.updateVisibility(t,n)},if:({el:t,output:n})=>{e.updatePresence(t,n)}};var i,r,s,o;(i=(n,i)=>{t(n,i),e.concernedData=[]},r=5,function(){var e=this,t=arguments,n=function(){o=null,s||i.apply(e,t)},a=s&&!o;clearTimeout(o),o=setTimeout(n,r),a&&i.apply(e,t)})(this.el,(function(t){a(t).forEach(({type:i,value:a,expression:r})=>{if(n[i]){var{output:s,deps:o}=e.evaluateReturnExpression(r);e.concernedData.filter(e=>o.includes(e)).length>0&&n[i]({el:t,attrName:a,output:s})}})}))}generateExpressionForXModelListener(e,t,n){var i="";return i="checkbox"===e.type?Array.isArray(this.data[n])?`$event.target.checked ? ${n}.concat([$event.target.value]) : ${n}.filter(i => i !== $event.target.value)`:"$event.target.checked":"select"===e.tagName.toLowerCase()&&e.multiple?t.includes("number")?"Array.from($event.target.selectedOptions).map(option => { return parseFloat(option.value || option.text) })":"Array.from($event.target.selectedOptions).map(option => { return option.value || option.text })":t.includes("number")?"parseFloat($event.target.value)":t.includes("trim")?"$event.target.value.trim()":"$event.target.value","radio"===e.type&&(e.hasAttribute("name")||e.setAttribute("name",n)),`${n} = ${i}`}registerListener(e,t,n,i){if(n.includes("away")){const a=r=>{e.contains(r.target)||e.offsetWidth<1&&e.offsetHeight<1||(this.runListenerHandler(i,r),n.includes("once")&&document.removeEventListener(t,a))};document.addEventListener(t,a)}else{const a=n.includes("window")?window:n.includes("document")?document:e,r=e=>{const s=n.filter(e=>"window"!==e).filter(e=>"document"!==e);"keydown"===t&&s.length>0&&!s.includes(e.key.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase())||(n.includes("prevent")&&e.preventDefault(),n.includes("stop")&&e.stopPropagation(),this.runListenerHandler(i,e),n.includes("once")&&a.removeEventListener(t,r))};a.addEventListener(t,r)}}runListenerHandler(e,t){this.evaluateCommandExpression(e,{$event:t})}evaluateReturnExpression(e){var t=[];const i=e=>({get(n,a){if("symbol"==typeof a)return;const r=e?`${e}.${a}`:a;return"object"!=typeof n[a]||null===n[a]||Array.isArray(n[a])?(t.push(r),n[a]):new Proxy(n[a],i(r))}});return{output:n(e,new Proxy(this.data,i())),deps:t}}evaluateCommandExpression(e,t){!function(e,t,n={}){new Function(["$data",...Object.keys(n)],`with($data) { ${e} }`)(t,...Object.values(n))}(e,this.data,t)}updateTextValue(e,t){e.innerText=t}updateVisibility(e,t){t?1===e.style.length&&""!==e.style.display?e.removeAttribute("style"):e.style.removeProperty("display"):e.style.display="none"}updatePresence(e,t){"template"!==e.nodeName.toLowerCase()&&console.warn("Alpine: [x-if] directive should only be added to <template> tags.");const n=e.nextElementSibling&&!0===e.nextElementSibling.__x_inserted_me;if(t&&!n){const t=document.importNode(e.content,!0);e.parentElement.insertBefore(t,e.nextElementSibling),e.nextElementSibling.__x_inserted_me=!0}else!t&&n&&e.nextElementSibling.remove()}updateAttributeValue(e,t,n){if("value"===t)if("radio"===e.type)e.checked=e.value==n;else if("checkbox"===e.type)if(Array.isArray(n)){let t=!1;n.forEach(n=>{n==e.value&&(t=!0)}),e.checked=t}else e.checked=!!n;else"SELECT"===e.tagName?this.updateSelect(e,n):e.value=n;else"class"===t?Array.isArray(n)?e.setAttribute("class",n.join(" ")):Object.keys(n).forEach(t=>{n[t]?t.split(" ").forEach(t=>e.classList.add(t)):t.split(" ").forEach(t=>e.classList.remove(t))}):["disabled","readonly","required","checked","hidden"].includes(t)?n?e.setAttribute(t,""):e.removeAttribute(t):e.setAttribute(t,n)}updateSelect(e,t){const n=[].concat(t).map(e=>e+"");Array.from(e.options).forEach(e=>{e.selected=n.includes(e.value||e.text)})}getRefsProxy(){var e=this;return new Proxy({},{get(n,i){var a;return t(e.el,e=>{e.hasAttribute("x-ref")&&e.getAttribute("x-ref")===i&&(a=e)}),a}})}}const s={start:async function(){e()||await new Promise(e=>{"loading"==document.readyState?document.addEventListener("DOMContentLoaded",e):e()}),this.discoverComponents(e=>{this.initializeComponent(e)}),document.addEventListener("turbolinks:load",()=>{this.discoverUninitializedComponents(e=>{this.initializeComponent(e)})}),this.listenForNewUninitializedComponentsAtRunTime(e=>{this.initializeComponent(e)})},discoverComponents:function(e){document.querySelectorAll("[x-data]").forEach(t=>{e(t)})},discoverUninitializedComponents:function(e){const t=document.querySelectorAll("[x-data]");Array.from(t).filter(e=>void 0===e.__x).forEach(t=>{e(t)})},listenForNewUninitializedComponentsAtRunTime:function(e){const t=document.querySelector("body");new MutationObserver(t=>{for(let n=0;n<t.length;n++)t[n].addedNodes.length>0&&t[n].addedNodes.forEach(t=>{1===t.nodeType&&t.matches("[x-data]")&&e(t)})}).observe(t,{childList:!0,attributes:!0,subtree:!0})},initializeComponent:function(e){e.__x=new r(e)}};return e()||(window.Alpine=s,window.Alpine.start()),s}));
{
"main": "dist/alpine.js",
"name": "alpinejs",
"version": "1.1.2",
"version": "1.1.3",
"repository": {

@@ -10,4 +10,4 @@ "type": "git",

"scripts": {
"watch": "npx microbundle watch src/index.js",
"build": "npx microbundle build src/index.js",
"watch": "npx rollup -c -w",
"build": "npx rollup -c",
"test": "npx jest",

@@ -19,2 +19,3 @@ "test:debug": "node --inspect node_modules/.bin/jest --runInBand"

"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/preset-env": "^7.7.7",

@@ -26,6 +27,8 @@ "@testing-library/dom": "^6.11.0",

"jsdom-simulant": "^1.1.2",
"microbundle": "^0.11.0",
"mock-echo": "^1.1.0"
"rollup": "^1.27.14",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^5.1.3"
},
"dependencies": {}
}

@@ -229,2 +229,4 @@ # Alpine.js

>Note: You can also use the `.document` modifier to attach listeners to `document` instead of `window`
**`.once` modifier**

@@ -277,2 +279,4 @@ **Example:** `<button x-on:mouseenter.once="fetchSomething()"></button>`

> Note: `x-if` must have a single element root inside the `<template></template>` tag.
---

@@ -279,0 +283,0 @@

@@ -9,2 +9,4 @@ import { walkSkippingNestedComponents, kebabCase, saferEval, saferEvalNoReturn, getXAttrs, debounce } from './utils'

rawData.$refs = this.getRefsProxy()
this.data = this.wrapDataInObservable(rawData)

@@ -233,8 +235,10 @@

} else {
const listenerTarget = modifiers.includes('window') ? window : el
const listenerTarget = modifiers.includes('window')
? window : (modifiers.includes('document') ? document : el)
const handler = e => {
const modifiersWithoutWindow = modifiers.filter(i => i !== 'window')
const modifiersWithoutWindowOrDocument = modifiers
.filter(i => i !== 'window').filter(i => i !== 'document')
if (event === 'keydown' && modifiersWithoutWindow.length > 0 && ! modifiersWithoutWindow.includes(kebabCase(e.key))) return
if (event === 'keydown' && modifiersWithoutWindowOrDocument.length > 0 && ! modifiersWithoutWindowOrDocument.includes(kebabCase(e.key))) return

@@ -258,3 +262,2 @@ if (modifiers.includes('prevent')) e.preventDefault()

'$event': e,
'$refs': this.getRefsProxy(),
})

@@ -261,0 +264,0 @@ }

@@ -100,2 +100,20 @@ import Alpine from 'alpinejs'

test('.document modifier', async () => {
document.body.innerHTML = `
<div x-data="{ foo: 'bar' }">
<div x-on:click.document="foo = 'baz'"></div>
<span x-bind:foo="foo"></span>
</div>
`
Alpine.start()
expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
document.body.click()
await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
})
test('.once modifier', async () => {

@@ -102,0 +120,0 @@ document.body.innerHTML = `

@@ -25,1 +25,19 @@ import Alpine from 'alpinejs'

})
test('can reference elements from data object methods', async () => {
document.body.innerHTML = `
<div x-data="{ foo() { this.$refs.bob.innerText = 'lob' } }">
<span x-ref="bob"></span>
<button x-on:click="foo()"></button>
</div>
`
Alpine.start()
expect(document.querySelector('span').innerText).toEqual(undefined)
document.querySelector('button').click()
await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') })
})

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc