From d0bc6c8d3fde67502f0abc5e62a50e63460963f1 Mon Sep 17 00:00:00 2001
From: niznet <iniznet@gmail.com>
Date: Thu, 16 Feb 2023 18:42:58 +0700
Subject: [PATCH] A rebuild & feat: dynamic magics

---
 dist/flux.esm.js              |  2 +-
 dist/flux.min.js              |  2 +-
 package.json                  |  7 ++++--
 src/core/applyTransitions.js  | 11 +++++++++
 src/core/parseTransitions.js  | 18 +++++++++++++++
 src/index.js                  | 43 +++++++++++++++++------------------
 src/utils/convertCamelCase.js | 13 +++++++++++
 src/utils/parseArray.js       | 26 ++++++++++-----------
 src/utils/parseObject.js      | 14 ++++++------
 9 files changed, 90 insertions(+), 46 deletions(-)
 create mode 100644 src/core/applyTransitions.js
 create mode 100644 src/core/parseTransitions.js
 create mode 100644 src/utils/convertCamelCase.js

diff --git a/dist/flux.esm.js b/dist/flux.esm.js
index 0525d09..c663c80 100644
--- a/dist/flux.esm.js
+++ b/dist/flux.esm.js
@@ -1 +1 @@
-function c(e){let[r,t,n,s="",o=""]=e,i=`${r} ${s}`.trim(),a=`${r} ${o}`.trim();return{"x-transition:enter":i,"x-transition:enter-start":t,"x-transition:enter-end":n,"x-transition:leave":a,"x-transition:leave-start":n,"x-transition:leave-end":t}}function u(e){let r={};for(let t in e){let n=e[t];r[`x-transition:${t}`]=n}return r}function l(e,r){e.directive("flux",(t,{expression:n},{evaluate:s})=>{let o=s(n),i=(Array.isArray(o)?o:r[o])||null,a={};if(!i)throw new Error("x-flux: No transitions found for "+n);Object.prototype.toString.call(i)==="[object Object]"?a=u(i):a=c(i),Object.entries(a).forEach(([f,x])=>{t.setAttribute(f,x)}),t.removeAttribute("x-flux")}).before("transition")}var O=l;export{O as default};
+function a({templateName:n,transitions:t}){if(!t)throw new Error("x-flux: No transitions found for "+n);for(let r of Object.keys(t))el.setAttribute(r,t[r]);el.removeAttribute("x-flux")}function f(n){let[t,r,e,i="",o=""]=n,s=`${t} ${i}`.trim(),l=`${t} ${o}`.trim();return{"x-transition:enter":s,"x-transition:enter-start":r,"x-transition:enter-end":e,"x-transition:leave":l,"x-transition:leave-start":e,"x-transition:leave-end":r}}function u(n){let t={};for(let r in n){let e=n[r];t[`x-transition:${r}`]=e}return t}function c(n,t=null){if(!t)throw new Error("x-flux: Template "+n+" does not exist in the config.");try{return Array.isArray(t)?f(t):u(t)}catch{throw new Error("x-flux: Only accept array or object.")}}function x(n){let t=n.split("-");if(t.length===1)return n;let r=t.slice(1).map(e=>e.charAt(0).toUpperCase()+e.slice(1));return t[0]+r.join("")}function m(n,t){n.directive("flux",(r,{expression:e},{evaluate:i})=>{let o=i(e),s=(Array.isArray(o)?o:t[o])||null;console.log(r,o,s);let l=c(o,s);a(o,l)}).before("transition"),n.magic("flux",r=>e=>{let i=t[e]||null,o=c(e,i);a(e,o)});for(let r of Object.keys(t)){let e=x(r);n.magic(e,i=>()=>{let o=t[r]||null,s=c(r,o);a(r,s)})}}var T=m;export{T as default};
diff --git a/dist/flux.min.js b/dist/flux.min.js
index d2eabd0..a0708c8 100644
--- a/dist/flux.min.js
+++ b/dist/flux.min.js
@@ -1 +1 @@
-(()=>{function u(e){let[r,t,n,s="",o=""]=e,i=`${r} ${s}`.trim(),a=`${r} ${o}`.trim();return{"x-transition:enter":i,"x-transition:enter-start":t,"x-transition:enter-end":n,"x-transition:leave":a,"x-transition:leave-start":n,"x-transition:leave-end":t}}function f(e){let r={};for(let t in e){let n=e[t];r[`x-transition:${t}`]=n}return r}function l(e,r){e.directive("flux",(t,{expression:n},{evaluate:s})=>{let o=s(n),i=(Array.isArray(o)?o:r[o])||null,a={};if(!i)throw new Error("x-flux: No transitions found for "+n);Object.prototype.toString.call(i)==="[object Object]"?a=f(i):a=u(i),Object.entries(a).forEach(([c,x])=>{t.setAttribute(c,x)}),t.removeAttribute("x-flux")}).before("transition")}document.addEventListener("alpine:init",()=>window.Alpine.plugin(l));})();
+(()=>{function a({templateName:n,transitions:t}){if(!t)throw new Error("x-flux: No transitions found for "+n);for(let r of Object.keys(t))el.setAttribute(r,t[r]);el.removeAttribute("x-flux")}function u(n){let[t,r,e,i="",o=""]=n,s=`${t} ${i}`.trim(),l=`${t} ${o}`.trim();return{"x-transition:enter":s,"x-transition:enter-start":r,"x-transition:enter-end":e,"x-transition:leave":l,"x-transition:leave-start":e,"x-transition:leave-end":r}}function f(n){let t={};for(let r in n){let e=n[r];t[`x-transition:${r}`]=e}return t}function c(n,t=null){if(!t)throw new Error("x-flux: Template "+n+" does not exist in the config.");try{return Array.isArray(t)?u(t):f(t)}catch{throw new Error("x-flux: Only accept array or object.")}}function x(n){let t=n.split("-");if(t.length===1)return n;let r=t.slice(1).map(e=>e.charAt(0).toUpperCase()+e.slice(1));return t[0]+r.join("")}function m(n,t){n.directive("flux",(r,{expression:e},{evaluate:i})=>{let o=i(e),s=(Array.isArray(o)?o:t[o])||null;console.log(r,o,s);let l=c(o,s);a(o,l)}).before("transition"),n.magic("flux",r=>e=>{let i=t[e]||null,o=c(e,i);a(e,o)});for(let r of Object.keys(t)){let e=x(r);n.magic(e,i=>()=>{let o=t[r]||null,s=c(r,o);a(r,s)})}}document.addEventListener("alpine:init",()=>window.Alpine.plugin(m));})();
diff --git a/package.json b/package.json
index 6f2afcb..2c7ceef 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,16 @@
 {
   "name": "alpinejs-flux",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Simplifies x-transition when applying CSS classes",
   "keywords": [
     "Alpine",
     "Alpine JS",
     "Alpine JS Plugin",
-    "Alpine JS Plugins"
+    "Alpine JS Plugins",
+    "Alpine JS Flux"
   ],
+  "author": "Yusuf Fauzan",
+  "license": "MIT",
   "module": "dist/flux.esm.js",
   "unpkg": "dist/flux.min.js",
   "scripts": {
diff --git a/src/core/applyTransitions.js b/src/core/applyTransitions.js
new file mode 100644
index 0000000..f72771c
--- /dev/null
+++ b/src/core/applyTransitions.js
@@ -0,0 +1,11 @@
+export default function ( element, templateName, transitions ) {
+    if ( !transitions ) {
+        throw new Error( "x-flux: No transitions found for " + templateName );
+    }
+
+    for ( const directive of Object.keys( transitions ) ) {
+        element.setAttribute( directive, transitions[directive] );
+    }
+
+    element.removeAttribute( "x-flux" );
+}
diff --git a/src/core/parseTransitions.js b/src/core/parseTransitions.js
new file mode 100644
index 0000000..5a30bb5
--- /dev/null
+++ b/src/core/parseTransitions.js
@@ -0,0 +1,18 @@
+import parseArray from "../utils/parseArray";
+import parseObject from "../utils/parseObject";
+
+export default function (templateName, template = null) {
+    if (!template) {
+        throw new Error("x-flux: Template " + templateName + " does not exist in the config.");
+    }
+     
+    try {
+        if (Array.isArray(template)) {
+            return parseArray(template);
+        }
+
+        return parseObject(template);
+    } catch (error) {
+        throw new Error("x-flux: Only accept array or object.");
+    }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index c261526..d658f0f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,29 +1,28 @@
-import parseArray from "./utils/parseArray";
-import parseObject from "./utils/parseObject";
+import applyTransitions from "./core/applyTransitions";
+import parseTransitions from "./core/parseTransitions";
+import convertCamelCase from "./utils/convertCamelCase";
 
-export default function (Alpine, Config) {
- Alpine.directive("flux", (el, { expression }, { evaluate }) => {
-  const arrayOrString = evaluate(expression);
-  const transitions =
-   (Array.isArray(arrayOrString) ? arrayOrString : Config[arrayOrString]) ||
-   null;
+export default function ( Alpine, Config ) {
+    const magicNames = ['flux', ...Object.keys( Config )];
 
-  let attributes = {};
+    Alpine.directive( "flux", ( el, { expression }, { evaluate } ) => {
+        const arrayOrTemplateName = evaluate( expression );
+        const template =
+            ( Array.isArray( arrayOrTemplateName ) ? arrayOrTemplateName : Config[arrayOrTemplateName] ) ||
+            null;
+        const transitions = parseTransitions( arrayOrTemplateName, template );
 
-  if (!transitions) {
-   throw new Error("x-flux: No transitions found for " + expression);
-  }
+        applyTransitions( el, arrayOrTemplateName, transitions )
+    } ).before( "transition" );
 
-  if (Object.prototype.toString.call(transitions) === "[object Object]") {
-   attributes = parseObject(transitions);
-  } else {
-   attributes = parseArray(transitions);
-  }
+    for ( const templateName of magicNames ) {
+        const validName = convertCamelCase( templateName );
 
-  Object.entries(attributes).forEach(([key, value]) => {
-   el.setAttribute(key, value);
-  });
+        Alpine.magic( validName, ( el ) => () => {
+            const template = Config[templateName] || null;
+            const transitions = parseTransitions( templateName, template );
 
-  el.removeAttribute("x-flux");
- }).before("transition");
+            applyTransitions( el, templateName, transitions )
+        } );
+    }
 }
diff --git a/src/utils/convertCamelCase.js b/src/utils/convertCamelCase.js
new file mode 100644
index 0000000..31a58cc
--- /dev/null
+++ b/src/utils/convertCamelCase.js
@@ -0,0 +1,13 @@
+export default function (templateName) {
+    const words = templateName.split('-');
+
+    if (words.length === 1) {
+        return templateName;
+    }
+
+    const camelCasedWords = words.slice(1).map(word => {
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    });
+
+    return words[0] + camelCasedWords.join('');
+}
\ No newline at end of file
diff --git a/src/utils/parseArray.js b/src/utils/parseArray.js
index 70b2993..e9531da 100644
--- a/src/utils/parseArray.js
+++ b/src/utils/parseArray.js
@@ -1,17 +1,17 @@
-export default function (transitions) {
- const [transition, enterStart, enterEnd, timingsIn = "", timingsOut = ""] = transitions;
+export default function ( transitions ) {
+    const [transition, enterStart, enterEnd, timingsIn = "", timingsOut = ""] = transitions;
 
- const transitionEnter = `${transition} ${timingsIn}`.trim();
- const transitionLeave = `${transition} ${timingsOut}`.trim();
+    const transitionEnter = `${transition} ${timingsIn}`.trim();
+    const transitionLeave = `${transition} ${timingsOut}`.trim();
 
- const attrs = {
-  "x-transition:enter": transitionEnter,
-  "x-transition:enter-start": enterStart,
-  "x-transition:enter-end": enterEnd,
-  "x-transition:leave": transitionLeave,
-  "x-transition:leave-start": enterEnd,
-  "x-transition:leave-end": enterStart,
- };
+    const attrs = {
+        "x-transition:enter": transitionEnter,
+        "x-transition:enter-start": enterStart,
+        "x-transition:enter-end": enterEnd,
+        "x-transition:leave": transitionLeave,
+        "x-transition:leave-start": enterEnd,
+        "x-transition:leave-end": enterStart,
+    };
 
- return attrs;
+    return attrs;
 }
diff --git a/src/utils/parseObject.js b/src/utils/parseObject.js
index d84e7b5..c128045 100644
--- a/src/utils/parseObject.js
+++ b/src/utils/parseObject.js
@@ -1,11 +1,11 @@
-export default function (transitions) {
- let attributes = {};
+export default function ( transitions ) {
+    let attributes = {};
 
- for (const key in transitions) {
-  const classes = transitions[key];
+    for ( const key in transitions ) {
+        const classes = transitions[key];
 
-  attributes[`x-transition:${key}`] = classes;
- }
+        attributes[`x-transition:${key}`] = classes;
+    }
 
- return attributes;
+    return attributes;
 }