From 117ea12b02c7912149353dc9b5b18fb87ee1dd79 Mon Sep 17 00:00:00 2001
From: niznet <iniznet@gmail.com>
Date: Fri, 17 Feb 2023 14:40:25 +0700
Subject: [PATCH] feat: define template inside $flux magic

---
 README.md                    | 20 +++++++++++++----
 dist/flux.esm.js             |  2 +-
 dist/flux.min.js             |  2 +-
 package.json                 |  4 ++--
 src/core/applyTransitions.js |  6 ++++-
 src/core/registerMagic.js    |  7 ++++++
 src/index.js                 | 43 ++++++++++++++++++++++--------------
 7 files changed, 59 insertions(+), 25 deletions(-)
 create mode 100644 src/core/registerMagic.js

diff --git a/README.md b/README.md
index 4c28e78..22027b2 100644
--- a/README.md
+++ b/README.md
@@ -48,12 +48,17 @@ Alpine.plugin(() => {
 Alpine.start()
 ```
 
-## Example
+## Usage
 
-There's three ways to use this plugin.
+There's several ways to use this plugin.
 
 ```html
-<section x-data="{ show: false }">
+<section x-data="{ show: false, template: [
+        'transition duration-300',
+        'opacity-0 scale-90',
+        'opacity-100 scale-100',
+        'ease-out', 'ease-in',
+    ] }">
     <button @click="show = !show">Toggle</button>
 
     <!-- You can call the defined template by calling the name of the config -->
@@ -63,14 +68,21 @@ There's three ways to use this plugin.
     <!-- Or you can use the magic -->
     <div x-show="show" x-init="$translateY2">Array from Config</div>
     <div x-show="show" x-init="$rotate">Object from Config</div>
+    <div x-show="show" x-init="$flux('translate-y-2')">Array from Config</div>
 
-    <!-- Or you can define it inline -->
+    <!-- You can define it inline -->
     <div x-show="show" x-flux="[
         'transition duration-300',
         'opacity-0 scale-90',
         'opacity-100 scale-100',
         'ease-out', 'ease-in',
     ]">Array Expression</div>
+
+    <!-- You can define template with $flux magic, the name should be kebab-case when defining -->
+    <div x-show="show" x-init="$flux('opacity-scale', template)">Array Expression</div>
+
+    <!-- by default after defining it will applied to the element automatically, you can pass false as third argument to only register -->
+    <div x-show="show" x-init="$flux('opacity-scale', template, false)">Array Expression</div>
 </section>
 ```
 
diff --git a/dist/flux.esm.js b/dist/flux.esm.js
index 826c64b..e36a2ae 100644
--- a/dist/flux.esm.js
+++ b/dist/flux.esm.js
@@ -1 +1 @@
-function a(o,t,r){if(!r)throw new Error("x-flux: No transitions found for "+t);for(let n of Object.keys(r))o.setAttribute(n,r[n]);o.removeAttribute("x-flux")}function u(o){let[t,r,n,i="",e=""]=o,s=`${t} ${i}`.trim(),f=`${t} ${e}`.trim();return{"x-transition:enter":s,"x-transition:enter-start":r,"x-transition:enter-end":n,"x-transition:leave":f,"x-transition:leave-start":n,"x-transition:leave-end":r}}function l(o){let t={};for(let r in o){let n=o[r];t[`x-transition:${r}`]=n}return t}function c(o,t=null){if(!t)throw new Error("x-flux: Template "+o+" does not exist in the config.");try{return Array.isArray(t)?u(t):l(t)}catch{throw new Error("x-flux: Only accept array or object.")}}function x(o){let t=o.split("-");if(t.length===1)return o;let r=t.slice(1).map(n=>n.charAt(0).toUpperCase()+n.slice(1));return t[0]+r.join("")}function m(o,t){o.directive("flux",(r,{expression:n},{evaluate:i})=>{let e=i(n),s=(Array.isArray(e)?e:t[e])||null,f=c(e,s);a(r,e,f)}).before("transition");for(let r of Object.keys(t)){let n=x(r);o.magic(n,i=>()=>{let e=t[r]||null,s=c(r,e);a(i,r,s)})}o.magic("flux",r=>(n="")=>{let i=t[n]||null,e=c(n,i);a(r,n,e)})}var g=m;export{g as default};
+function l(o){let[t,n,r,i="",e=""]=o,s=`${t} ${i}`.trim(),c=`${t} ${e}`.trim();return{"x-transition:enter":s,"x-transition:enter-start":n,"x-transition:enter-end":r,"x-transition:leave":c,"x-transition:leave-start":r,"x-transition:leave-end":n}}function x(o){let t={};for(let n in o){let r=o[n];t[`x-transition:${n}`]=r}return t}function p(o,t=null){if(!t)throw new Error("x-flux: Template "+o+" does not exist in the config.");try{return Array.isArray(t)?l(t):x(t)}catch{throw new Error("x-flux: Only accept array or object.")}}function a(o,t,n){let r=p(t,n);if(!r)throw new Error("x-flux: No transitions found for "+t);for(let i of Object.keys(r))o.setAttribute(i,r[i]);o.removeAttribute("x-flux")}function u(o,t,n,r=null){o.magic(t,i=>()=>{a(i,n,r)})}function f(o){let t=o.split("-");if(t.length===1)return o;let n=t.slice(1).map(r=>r.charAt(0).toUpperCase()+r.slice(1));return t[0]+n.join("")}function d(o,t){o.directive("flux",(n,{expression:r},{evaluate:i})=>{let e=i(r),s=(Array.isArray(e)?e:t[e])||null;a(n,e,s)}).before("transition");for(let n of Object.keys(t)){let r=f(n),i=t[n]||null;u(o,r,n,i)}o.magic("flux",n=>(r="",i=null,e=!0)=>{if(i){let c=f(r);t[r]=i,u(o,c,r,i)}if(!e)return;let s=t[r]||null;a(n,r,s)})}var M=d;export{M as default};
diff --git a/dist/flux.min.js b/dist/flux.min.js
index a41caac..256a25f 100644
--- a/dist/flux.min.js
+++ b/dist/flux.min.js
@@ -1 +1 @@
-(()=>{function a(e,t,r){if(!r)throw new Error("x-flux: No transitions found for "+t);for(let n of Object.keys(r))e.setAttribute(n,r[n]);e.removeAttribute("x-flux")}function f(e){let[t,r,n,i="",o=""]=e,s=`${t} ${i}`.trim(),u=`${t} ${o}`.trim();return{"x-transition:enter":s,"x-transition:enter-start":r,"x-transition:enter-end":n,"x-transition:leave":u,"x-transition:leave-start":n,"x-transition:leave-end":r}}function l(e){let t={};for(let r in e){let n=e[r];t[`x-transition:${r}`]=n}return t}function c(e,t=null){if(!t)throw new Error("x-flux: Template "+e+" does not exist in the config.");try{return Array.isArray(t)?f(t):l(t)}catch{throw new Error("x-flux: Only accept array or object.")}}function x(e){let t=e.split("-");if(t.length===1)return e;let r=t.slice(1).map(n=>n.charAt(0).toUpperCase()+n.slice(1));return t[0]+r.join("")}function p(e,t){e.directive("flux",(r,{expression:n},{evaluate:i})=>{let o=i(n),s=(Array.isArray(o)?o:t[o])||null,u=c(o,s);a(r,o,u)}).before("transition");for(let r of Object.keys(t)){let n=x(r);e.magic(n,i=>()=>{let o=t[r]||null,s=c(r,o);a(i,r,s)})}e.magic("flux",r=>(n="")=>{let i=t[n]||null,o=c(n,i);a(r,n,o)})}document.addEventListener("alpine:init",()=>window.Alpine.plugin(p));})();
+(()=>{function l(o){let[t,n,r,i="",e=""]=o,s=`${t} ${i}`.trim(),c=`${t} ${e}`.trim();return{"x-transition:enter":s,"x-transition:enter-start":n,"x-transition:enter-end":r,"x-transition:leave":c,"x-transition:leave-start":r,"x-transition:leave-end":n}}function x(o){let t={};for(let n in o){let r=o[n];t[`x-transition:${n}`]=r}return t}function d(o,t=null){if(!t)throw new Error("x-flux: Template "+o+" does not exist in the config.");try{return Array.isArray(t)?l(t):x(t)}catch{throw new Error("x-flux: Only accept array or object.")}}function a(o,t,n){let r=d(t,n);if(!r)throw new Error("x-flux: No transitions found for "+t);for(let i of Object.keys(r))o.setAttribute(i,r[i]);o.removeAttribute("x-flux")}function u(o,t,n,r=null){o.magic(t,i=>()=>{a(i,n,r)})}function f(o){let t=o.split("-");if(t.length===1)return o;let n=t.slice(1).map(r=>r.charAt(0).toUpperCase()+r.slice(1));return t[0]+n.join("")}function p(o,t){o.directive("flux",(n,{expression:r},{evaluate:i})=>{let e=i(r),s=(Array.isArray(e)?e:t[e])||null;a(n,e,s)}).before("transition");for(let n of Object.keys(t)){let r=f(n),i=t[n]||null;u(o,r,n,i)}o.magic("flux",n=>(r="",i=null,e=!0)=>{if(i){let c=f(r);t[r]=i,u(o,c,r,i)}if(!e)return;let s=t[r]||null;a(n,r,s)})}document.addEventListener("alpine:init",()=>window.Alpine.plugin(p));})();
diff --git a/package.json b/package.json
index 2c7ceef..c533b02 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "alpinejs-flux",
-  "version": "1.1.0",
-  "description": "Simplifies x-transition when applying CSS classes",
+  "version": "1.2.0",
+  "description": "Simplifies the process of applying CSS classes with x-transition as a template and makes them reusable within single attribute.",
   "keywords": [
     "Alpine",
     "Alpine JS",
diff --git a/src/core/applyTransitions.js b/src/core/applyTransitions.js
index f72771c..b07de0c 100644
--- a/src/core/applyTransitions.js
+++ b/src/core/applyTransitions.js
@@ -1,4 +1,8 @@
-export default function ( element, templateName, transitions ) {
+import parseTransitions from "./parseTransitions";
+
+export default function ( element, templateName, template ) {
+    const transitions = parseTransitions( templateName, template );
+
     if ( !transitions ) {
         throw new Error( "x-flux: No transitions found for " + templateName );
     }
diff --git a/src/core/registerMagic.js b/src/core/registerMagic.js
new file mode 100644
index 0000000..334657a
--- /dev/null
+++ b/src/core/registerMagic.js
@@ -0,0 +1,7 @@
+import applyTransitions from "./applyTransitions";
+
+export default function (Alpine, validName, templateName, template = null) {
+    Alpine.magic( validName, ( el ) => () => {
+        applyTransitions( el, templateName, template );
+    } );
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f34d485..cfa8c7c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,33 +1,44 @@
 import applyTransitions from "./core/applyTransitions";
-import parseTransitions from "./core/parseTransitions";
+import registerMagic from "./core/registerMagic";
 import convertCamelCase from "./utils/convertCamelCase";
 
 export default function ( Alpine, Config ) {
+
     Alpine.directive( "flux", ( el, { expression }, { evaluate } ) => {
         const arrayOrTemplateName = evaluate( expression );
         const template =
-            ( Array.isArray( arrayOrTemplateName ) ? arrayOrTemplateName : Config[arrayOrTemplateName] ) ||
-            null;
-        const transitions = parseTransitions( arrayOrTemplateName, template );
+            ( Array.isArray( arrayOrTemplateName )
+                ? arrayOrTemplateName
+                : Config[arrayOrTemplateName] ) || null;
 
-        applyTransitions( el, arrayOrTemplateName, transitions )
+        applyTransitions( el, arrayOrTemplateName, template );
     } ).before( "transition" );
 
     for ( const templateName of Object.keys( Config ) ) {
         const validName = convertCamelCase( templateName );
+        const template = Config[templateName] || null;
 
-        Alpine.magic( validName, ( el ) => () => {
-            const template = Config[templateName] || null;
-            const transitions = parseTransitions( templateName, template );
-
-            applyTransitions( el, templateName, transitions )
-        } );
+        registerMagic( Alpine, validName, templateName, template );
     }
 
-    Alpine.magic( 'flux', ( el ) => ( templateName = '' ) => {
-        const template = Config[templateName] || null;
-        const transitions = parseTransitions( templateName, template );
+    Alpine.magic(
+        "flux",
+        ( el ) =>
+            ( templateName = "", newTemplate = null, applyToElement = true ) => {
+                if ( newTemplate ) {
+                    const validName = convertCamelCase( templateName );
+
+                    Config[templateName] = newTemplate;
+                    registerMagic( Alpine, validName, templateName, newTemplate );
+                }
 
-        applyTransitions( el, templateName, transitions )
-    } );
+                if ( !applyToElement ) {
+                    return;
+                }
+                
+                const template = Config[templateName] || null;
+                
+                applyTransitions( el, templateName, template );
+            }
+    );
 }