feat(gnoweb): add params:changed

gno.land/pkg/gnoweb/frontend/js/controller-action-function.ts

@@ -9,6 +9,17 @@ export class ActionFunctionController extends BaseController {
 	protected sendValue: string | null = null;
 	declare _funcName: string | null;
 	declare _pkgPath: string | null;
+	declare _paramInputsCache: HTMLInputElement[];
+
+	// Cached params inputs
+	private get _paramInputs(): HTMLInputElement[] {
+		if (!this._paramInputsCache) {
+			this._paramInputsCache = this.getTargets(
+				"param-input",
+			) as HTMLInputElement[];
+		}
+		return this._paramInputsCache;
+	}
 
 	protected connect(): void {
 		this.initializeDOM({
@@ -23,6 +34,9 @@ export class ActionFunctionController extends BaseController {
 
 		// Some functions may have no params, or all params already have values
 		this._updateQEvalResult();
+
+		// Dispatch initial params state for wallet integration
+		this._dispatchParamsChanged();
 	}
 
 	// listen for events from action-header controller
@@ -83,9 +97,9 @@ export class ActionFunctionController extends BaseController {
 	// get current value for a param name (handles checkbox multiple values)
 	private _getParamCurrentValue(paramName: string): string {
 		// radio or checkbox multiple values
-		const inputs = this.getTargets("param-input")
-			.filter((inp) => this.getValue("param", inp) === paramName)
-			.map((inp) => inp as HTMLInputElement);
+		const inputs = this._paramInputs.filter(
+			(inp) => this.getValue("param", inp) === paramName,
+		);
 
 		if (!inputs.length) return "";
 
@@ -115,8 +129,7 @@ export class ActionFunctionController extends BaseController {
 		const processed = new Set<string>();
 
 		// initialize the args
-		this.getTargets("param-input").forEach((paramInput) => {
-			const input = paramInput as HTMLInputElement;
+		this._paramInputs.forEach((input) => {
 			const paramName = this.getValue("param", input) || "";
 
 			if (!paramName || processed.has(paramName)) return;
@@ -134,11 +147,35 @@ export class ActionFunctionController extends BaseController {
 			if (paramName) {
 				this._updateArgInDOM(paramName, paramValue);
 				this._updateQEvalResult();
+				this._dispatchParamsChanged();
 			}
 		},
 		50,
 	);
 
+	// Dispatch params:changed event uppon parameter updates.
+	private _dispatchParamsChanged(): void {
+		if (!this._funcName || !this._pkgPath) return;
+
+		const params: Record<string, string> = {};
+		const processed = new Set<string>();
+
+		this._paramInputs.forEach((input) => {
+			const paramName = this.getValue("param", input) || "";
+			if (!paramName || processed.has(paramName)) return;
+
+			params[paramName] = this._getParamCurrentValue(paramName);
+			processed.add(paramName);
+		});
+
+		this.dispatch("params:changed", {
+			pkgPath: this._pkgPath,
+			funcName: this._funcName,
+			params: params,
+			send: this.sendValue || undefined,
+		});
+	}
+
 	// push args in DOM (in func code)
 	private _updateArgInDOM(paramName: string, paramValue: string): void {
 		const escapedValue = escapeShellSpecialChars(paramValue);
@@ -239,8 +276,10 @@ export class ActionFunctionController extends BaseController {
 		event: Event & { params?: Record<string, unknown> },
 	): void {
 		const send = (event.params?.send as boolean) || false;
+		this.sendValue = send ? this.getValue("send") : null;
 		this.getDOMArray("send-code").forEach((sendElement) => {
-			sendElement.textContent = send ? this.getValue("send") : "";
+			sendElement.textContent = this.sendValue || "";
 		});
+		this._dispatchParamsChanged();
 	}
 }

gno.land/pkg/gnoweb/markdown/ext_forms.go

@@ -478,7 +478,8 @@ func (r *FormRenderer) render(w util.BufWriter, source []byte, node ast.Node, en
 `, HTMLEscapeString(n.RealmName), headerLabel, HTMLEscapeString(n.RealmName))
 
 	if n.ExecFunc != "" {
-		fmt.Fprintf(w, `<div data-controller="action-function" data-action-function-name-value="%s">`+"\n", HTMLEscapeString(n.ExecFunc))
+		pkgPath := n.Domain + n.RealmName
+		fmt.Fprintf(w, `<div data-controller="action-function" data-action-function-name-value="%s" data-action-function-pkgpath-value="%s">`+"\n", HTMLEscapeString(n.ExecFunc), HTMLEscapeString(pkgPath))
 	}
 
 	// Track select elements that have been rendered

gno.land/pkg/gnoweb/markdown/golden/ext_forms/exec_create_post_with_fields.md.txtar

@@ -12,7 +12,7 @@
 <span><span class="font-bold">/r/test</span> Exec: Createpost</span>
 <span class="tooltip" data-tooltip="Processed securely by /r/test"><svg class="w-3 h-3"><use href="#ico-info"></use></svg></span>
 </div>
-<div data-controller="action-function" data-action-function-name-value="CreatePost">
+<div data-controller="action-function" data-action-function-name-value="CreatePost" data-action-function-pkgpath-value="/r/test">
 <div class="gno-form_input"><label for="title">Post title</label>
 <input type="text" id="title" name="title" placeholder="Post title" data-action-function-target="param-input" data-action="input->action-function#updateAllArgs" data-action-function-param-value="title" />
 </div>

gno.land/pkg/gnoweb/markdown/golden/ext_forms/exec_empty_no_args.md.txtar

@@ -9,7 +9,7 @@
 <span><span class="font-bold">/r/test</span> Exec: Transfer</span>
 <span class="tooltip" data-tooltip="Processed securely by /r/test"><svg class="w-3 h-3"><use href="#ico-info"></use></svg></span>
 </div>
-<div data-controller="action-function" data-action-function-name-value="Transfer">
+<div data-controller="action-function" data-action-function-name-value="Transfer" data-action-function-pkgpath-value="/r/test">
 <div class="command u-hidden" data-form-exec-target="command"><div data-controller="action-header" class="c-between">
   <span class="title">Command</span>
   <div class="c-inline">

gno.land/pkg/gnoweb/markdown/golden/ext_forms/exec_transfer_with_fields.md.txtar

@@ -11,7 +11,7 @@
 <span><span class="font-bold">/r/test</span> Exec: Transfer</span>
 <span class="tooltip" data-tooltip="Processed securely by /r/test"><svg class="w-3 h-3"><use href="#ico-info"></use></svg></span>
 </div>
-<div data-controller="action-function" data-action-function-name-value="Transfer">
+<div data-controller="action-function" data-action-function-name-value="Transfer" data-action-function-pkgpath-value="/r/test">
 <div class="gno-form_input"><label for="to">Recipient address</label>
 <input type="text" id="to" name="to" placeholder="Recipient address" data-action-function-target="param-input" data-action="input->action-function#updateAllArgs" data-action-function-param-value="to" />
 </div>

gno.land/pkg/gnoweb/markdown/golden/ext_forms/exec_update_profile_complex.md.txtar

@@ -17,7 +17,7 @@
 <span><span class="font-bold">/r/test</span> Exec: Updateprofile</span>
 <span class="tooltip" data-tooltip="Processed securely by /r/test"><svg class="w-3 h-3"><use href="#ico-info"></use></svg></span>
 </div>
-<div data-controller="action-function" data-action-function-name-value="UpdateProfile">
+<div data-controller="action-function" data-action-function-name-value="UpdateProfile" data-action-function-pkgpath-value="/r/test">
 <div class="gno-form_input"><label for="username">Username</label>
 <input type="text" id="username" name="username" placeholder="Username" data-action-function-target="param-input" data-action="input->action-function#updateAllArgs" data-action-function-param-value="username" />
 </div>

gno.land/pkg/gnoweb/markdown/golden/ext_forms/exec_vote_with_select.md.txtar

@@ -15,7 +15,7 @@
 <span><span class="font-bold">/r/test</span> Exec: Vote</span>
 <span class="tooltip" data-tooltip="Processed securely by /r/test"><svg class="w-3 h-3"><use href="#ico-info"></use></svg></span>
 </div>
-<div data-controller="action-function" data-action-function-name-value="Vote">
+<div data-controller="action-function" data-action-function-name-value="Vote" data-action-function-pkgpath-value="/r/test">
 <div class="gno-form_input"><label for="proposalId">Proposal ID</label>
 <input type="number" id="proposalId" name="proposalId" placeholder="Proposal ID" data-action-function-target="param-input" data-action="input->action-function#updateAllArgs" data-action-function-param-value="proposalId" />
 </div>

gno.land/pkg/gnoweb/markdown/golden/ext_forms/exec_with_duplicate_field_names.md.txtar

@@ -12,7 +12,7 @@
 <span><span class="font-bold">/r/test</span> Exec: Transfer</span>
 <span class="tooltip" data-tooltip="Processed securely by /r/test"><svg class="w-3 h-3"><use href="#ico-info"></use></svg></span>
 </div>
-<div data-controller="action-function" data-action-function-name-value="Transfer">
+<div data-controller="action-function" data-action-function-name-value="Transfer" data-action-function-pkgpath-value="/r/test">
 <div class="gno-form_input"><label for="to">First to</label>
 <input type="text" id="to" name="to" placeholder="First to" data-action-function-target="param-input" data-action="input->action-function#updateAllArgs" data-action-function-param-value="to" />
 </div>

gno.land/pkg/gnoweb/markdown/golden/ext_forms/exec_with_invalid_field_attribute.md.txtar

@@ -11,7 +11,7 @@
 <span><span class="font-bold">/r/test</span> Exec: Transfer</span>
 <span class="tooltip" data-tooltip="Processed securely by /r/test"><svg class="w-3 h-3"><use href="#ico-info"></use></svg></span>
 </div>
-<div data-controller="action-function" data-action-function-name-value="Transfer">
+<div data-controller="action-function" data-action-function-name-value="Transfer" data-action-function-pkgpath-value="/r/test">
 <!-- Error: missing &#39;name&#39; attribute -->
 <div class="gno-form_input"><label for="amount">Amount</label>
 <input type="number" id="amount" name="amount" placeholder="Amount" data-action-function-target="param-input" data-action="input->action-function#updateAllArgs" data-action-function-param-value="amount" />

gno.land/pkg/gnoweb/markdown/golden/ext_forms/exec_with_markdown_content.md.txtar

@@ -11,7 +11,7 @@
 <span><span class="font-bold">/r/test</span> Exec: Transfer</span>
 <span class="tooltip" data-tooltip="Processed securely by /r/test"><svg class="w-3 h-3"><use href="#ico-info"></use></svg></span>
 </div>
-<div data-controller="action-function" data-action-function-name-value="Transfer">
+<div data-controller="action-function" data-action-function-name-value="Transfer" data-action-function-pkgpath-value="/r/test">
 <!-- Error: unexpected or invalid tag -->
 <div class="gno-form_input"><label for="to">Recipient</label>
 <input type="text" id="to" name="to" placeholder="Recipient" data-action-function-target="param-input" data-action="input->action-function#updateAllArgs" data-action-function-param-value="to" />

gno.land/pkg/gnoweb/markdown/golden/ext_forms/exec_with_nested_invalid.md.txtar

@@ -13,7 +13,7 @@
 <span><span class="font-bold">/r/test</span> Exec: Outer</span>
 <span class="tooltip" data-tooltip="Processed securely by /r/test"><svg class="w-3 h-3"><use href="#ico-info"></use></svg></span>
 </div>
-<div data-controller="action-function" data-action-function-name-value="Outer">
+<div data-controller="action-function" data-action-function-name-value="Outer" data-action-function-pkgpath-value="/r/test">
 <div class="gno-form_input"><label for="field1">Enter value</label>
 <input type="text" id="field1" name="field1" placeholder="Enter value" data-action-function-target="param-input" data-action="input->action-function#updateAllArgs" data-action-function-param-value="field1" />
 </div>

gno.land/pkg/gnoweb/markdown/golden/ext_forms/exec_with_self_closing_error.md.txtar

@@ -11,7 +11,7 @@
 <span><span class="font-bold">/r/test</span> Exec: Createpost</span>
 <span class="tooltip" data-tooltip="Processed securely by /r/test"><svg class="w-3 h-3"><use href="#ico-info"></use></svg></span>
 </div>
-<div data-controller="action-function" data-action-function-name-value="CreatePost">
+<div data-controller="action-function" data-action-function-name-value="CreatePost" data-action-function-pkgpath-value="/r/test">
 <div class="gno-form_input"><label for="title">Enter value</label>
 <input type="text" id="title" name="title" placeholder="Enter value" data-action-function-target="param-input" data-action="input->action-function#updateAllArgs" data-action-function-param-value="title" />
 </div>