dist

Author: weaverryan

src/LiveComponent/assets/dist/Directive/directives_parser.d.ts

@@ -5,6 +5,7 @@ export interface DirectiveModifier {
 export interface Directive {
     action: string;
     args: string[];
+    named: any;
     modifiers: DirectiveModifier[];
     getString: {
         (): string;

src/LiveComponent/assets/dist/live_controller.js

@@ -6,8 +6,9 @@ function parseDirectives(content) {
         return directives;
     }
     let currentActionName = '';
-    let currentArgumentValue = '';
+    let currentArgumentsString = '';
     let currentArguments = [];
+    let currentNamedArguments = {};
     let currentModifiers = [];
     let state = 'action';
     const getLastActionName = function () {
@@ -19,29 +20,39 @@ function parseDirectives(content) {
         }
         return directives[directives.length - 1].action;
     };
-    const pushInstruction = function () {
+    const pushDirective = function () {
         directives.push({
             action: currentActionName,
             args: currentArguments,
+            named: currentNamedArguments,
             modifiers: currentModifiers,
             getString: () => {
                 return content;
             }
         });
         currentActionName = '';
-        currentArgumentValue = '';
         currentArguments = [];
+        currentNamedArguments = {};
         currentModifiers = [];
         state = 'action';
     };
     const pushArgument = function () {
-        currentArguments.push(currentArgumentValue.trim());
-        currentArgumentValue = '';
+        const urlParams = new URLSearchParams('?' + currentArgumentsString);
+        if (currentArgumentsString.indexOf('=') === -1) {
+            currentArguments = currentArgumentsString.split(',').map((arg) => arg.trim());
+        }
+        else {
+            currentNamedArguments = Object.fromEntries(urlParams);
+        }
+        currentArgumentsString = '';
     };
     const pushModifier = function () {
         if (currentArguments.length > 1) {
             throw new Error(`The modifier "${currentActionName}()" does not support multiple arguments.`);
         }
+        if (Object.keys(currentNamedArguments).length > 0) {
+            throw new Error(`The modifier "${currentActionName}()" does not support named arguments.`);
+        }
         currentModifiers.push({
             name: currentActionName,
             value: currentArguments.length > 0 ? currentArguments[0] : null,
@@ -60,7 +71,7 @@ function parseDirectives(content) {
                 }
                 if (char === ' ') {
                     if (currentActionName) {
-                        pushInstruction();
+                        pushDirective();
                     }
                     break;
                 }
@@ -76,11 +87,7 @@ function parseDirectives(content) {
                     state = 'after_arguments';
                     break;
                 }
-                if (char === ',') {
-                    pushArgument();
-                    break;
-                }
-                currentArgumentValue += char;
+                currentArgumentsString += char;
                 break;
             case 'after_arguments':
                 if (char === '|') {
@@ -90,15 +97,15 @@ function parseDirectives(content) {
                 if (char !== ' ') {
                     throw new Error(`Missing space after ${getLastActionName()}()`);
                 }
-                pushInstruction();
+                pushDirective();
                 break;
         }
     }
     switch (state) {
         case 'action':
         case 'after_arguments':
             if (currentActionName) {
-                pushInstruction();
+                pushDirective();
             }
             break;
         default:
@@ -212,7 +219,7 @@ function getAllModelDirectiveFromElements(element) {
     }
     const directives = parseDirectives(element.dataset.model);
     directives.forEach((directive) => {
-        if (directive.args.length > 0) {
+        if (directive.args.length > 0 || directive.named.length > 0) {
             throw new Error(`The data-model="${element.dataset.model}" format is invalid: it does not support passing arguments to the model.`);
         }
         directive.action = normalizeModelName(directive.action);
@@ -229,7 +236,7 @@ function getModelDirectiveFromElement(element, throwOnMissing = true) {
         if (formElement && 'model' in formElement.dataset) {
             const directives = parseDirectives(formElement.dataset.model || '*');
             const directive = directives[0];
-            if (directive.args.length > 0) {
+            if (directive.args.length > 0 || directive.named.length > 0) {
                 throw new Error(`The data-model="${formElement.dataset.model}" format is invalid: it does not support passing arguments to the model.`);
             }
             directive.action = normalizeModelName(element.getAttribute('name'));
@@ -2867,8 +2874,6 @@ class LiveControllerDefault extends Controller {
             throw new Error(`No action name provided on element: ${getElementAsTagText(event.currentTarget)}. Did you forget to add the "data-live-action-param" attribute?`);
         }
         const rawAction = params.action;
-        const actionArgs = Object.assign({}, params);
-        delete actionArgs.action;
         const directives = parseDirectives(rawAction);
         let debounce = false;
         directives.forEach((directive) => {
@@ -2908,7 +2913,7 @@ class LiveControllerDefault extends Controller {
                 }
                 delete this.pendingFiles[key];
             }
-            this.component.action(directive.action, actionArgs, debounce);
+            this.component.action(directive.action, directive.named, debounce);
             if (getModelDirectiveFromElement(event.currentTarget, false)) {
                 this.pendingActionTriggerModelElement = event.currentTarget;
             }