feat: define template inside $flux magic

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>
 ```
 

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",

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 );
     }

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 );
+    } );
+}

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 );
+            }
+    );
 }