├── dist
├── emit.esm.js
└── emit.min.js
├── src
├── handleData.js
└── index.js
├── .gitignore
├── scripts
└── build.js
├── package.json
├── LICENSE
└── README.md
/dist/emit.esm.js:
--------------------------------------------------------------------------------
1 | function r(e,f){let c=typeof e=="object"?e:document.querySelector(e),t=Alpine.$data(c);Object.keys(f).forEach(o=>{t[o]=f[o]==="!!"?t[o]=!t[o]:f[o]})}function i(e){e.magic("emit",({Alpine:f})=>(c,t=!1)=>{if(typeof c=="object"){c.forEach(n=>r(n[0],n[1]));return}document.querySelectorAll(c).forEach(n=>r(n,t))})}var s=i;export{s as default};
2 |
--------------------------------------------------------------------------------
/dist/emit.min.js:
--------------------------------------------------------------------------------
1 | (()=>{function r(e,t){let n=typeof e=="object"?e:document.querySelector(e),i=Alpine.$data(n);Object.keys(t).forEach(o=>{i[o]=t[o]==="!!"?i[o]=!i[o]:t[o]})}function f(e){e.magic("emit",({Alpine:t})=>(n,i=!1)=>{if(typeof n=="object"){n.forEach(c=>r(c[0],c[1]));return}document.querySelectorAll(n).forEach(c=>r(c,i))})}document.addEventListener("alpine:init",()=>window.Alpine.plugin(f));})();
2 |
--------------------------------------------------------------------------------
/src/handleData.js:
--------------------------------------------------------------------------------
1 | export function handleData(targetEl, newData) {
2 | const foundEl =
3 | typeof targetEl === 'object' ? targetEl : document.querySelector(targetEl)
4 | const alpineEl = Alpine.$data(foundEl)
5 |
6 | Object.keys(newData).forEach((dataKey) => {
7 | alpineEl[dataKey] =
8 | newData[dataKey] === '!!'
9 | ? (alpineEl[dataKey] = !alpineEl[dataKey])
10 | : newData[dataKey]
11 | })
12 | }
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # misc
9 | .DS_Store
10 | *.pem
11 |
12 | # debug
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 |
17 | # local env files
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 |
23 | # testing
24 | index.html
25 |
--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
1 | buildPlugin({
2 | entryPoints: ['builds/cdn.js'],
3 | outfile: 'dist/emit.min.js',
4 | })
5 |
6 | buildPlugin({
7 | entryPoints: ['builds/module.js'],
8 | outfile: 'dist/emit.esm.js',
9 | platform: 'neutral',
10 | mainFields: ['main', 'module'],
11 | })
12 |
13 | function buildPlugin(buildOptions) {
14 | return require('esbuild').buildSync({
15 | ...buildOptions,
16 | minify: true,
17 | bundle: true,
18 | })
19 | }
20 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { handleData } from './handleData'
2 |
3 | export default function (Alpine) {
4 | Alpine.magic('emit', ({ Alpine }) => (targetEl, newData = false) => {
5 | if (typeof targetEl === 'object') {
6 | targetEl.forEach((elItem) => handleData(elItem[0], elItem[1]))
7 |
8 | return
9 | }
10 |
11 | const targetEls = document.querySelectorAll(targetEl)
12 |
13 | targetEls.forEach((elItem) => handleData(elItem, newData))
14 | })
15 | }
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "alpinejs-emit",
3 | "version": "1.0.5",
4 | "description": "Emit `x-data` changes to other Alpine JS elements 📣",
5 | "keywords": [
6 | "Alpine",
7 | "Alpine JS",
8 | "Alpine JS Plugin",
9 | "Alpine JS Plugins",
10 | "Alpine JS Emit",
11 | "Alpine JS Emitter",
12 | "JavaScript Emit",
13 | "JavaScript Emitter"
14 | ],
15 | "module": "dist/emit.esm.js",
16 | "unpkg": "dist/emit.min.js",
17 | "scripts": {
18 | "build": "node scripts/build.js"
19 | },
20 | "devDependencies": {
21 | "esbuild": "^0.25.0"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Mark Mead
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Alpine JS Emit
2 |
3 | Emit data changes to other Alpine JS elements 📣
4 |
5 | ## Install
6 |
7 | ### With a CDN
8 |
9 | ```html
10 |
14 |
15 |
16 | ```
17 |
18 | ### With a Package Manager
19 |
20 | ```shell
21 | yarn add -D alpinejs-emit
22 |
23 | npm install -D alpinejs-emit
24 | ```
25 |
26 | ```js
27 | import Alpine from 'alpinejs'
28 | import emit from 'alpinejs-emit'
29 |
30 | Alpine.plugin(emit)
31 |
32 | Alpine.start()
33 | ```
34 |
35 | ## Example
36 |
37 | ### Single Target
38 |
39 | ```html
40 |
43 |
44 |
45 |
46 |
47 | Checked
48 |
49 | ```
50 |
51 | The `$emit` will change the value of `isChecked` on the `TargetEl` element.
52 |
53 | You'll notice within the `TargetEl` element it has its own method of changing
54 | the `isChecked` value, this will still work.
55 |
56 | If you wanted to toggle the value of `isChecked` you can do so with
57 | `{ isChecked: '!!' }`, this will check for `!!` and if found, toggle the value
58 | based on the `isChecked` value on the `TargetEl` element.
59 |
60 | #### Multiple Targets with a Shared Selector
61 |
62 | This has been handled before you behind the scenes.
63 |
64 | _`isChecked` is just an example, you don't need to call your Alpine JS data
65 | that_
66 |
67 | ### Multiple Targets
68 |
69 | ```html
70 |
77 |
78 |
79 | Checked
80 |
81 |
82 |
83 |
84 |
85 | Checked
86 |
87 |
88 |
89 |
90 |
91 | ```
92 |
93 | This works exactly the same as the above but you pass an array of arrays
94 | instead.
95 |
96 | ```js
97 | $emit([
98 | ['.select1', {}],
99 | ['#select2', {}],
100 | ])
101 | ```
102 |
103 | ## Stats
104 |
105 | 
106 | 
107 | 
108 | 
109 |
--------------------------------------------------------------------------------