A rebuild & feat: dynamic magics

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": {

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

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

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

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

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

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