fix: resolve tags within tag argument strings

Author: ryan-willis

packages/insomnia/src/common/templating/liquid-extension-worker.ts

@@ -5,6 +5,7 @@ import { Tag } from 'liquidjs';
 import type { Plugin } from '~/common/plugins/types';
 
 import packageJson from '../../../package.json';
+import { resolveArg } from './resolve-arg';
 import { tokenizeArgs } from './tokenize-args';
 import type {
   BaseRenderContext,
@@ -50,13 +51,6 @@ export const fetchFromTemplateWorkerDatabase = async (path: PluginToMainAPIPaths
   return result;
 };
 
-function resolveArg(arg: ReturnType<typeof tokenizeArgs>[number], scope: Record<string, any>): any {
-  if (arg.type === 'variable') {
-    return scope[arg.value as string];
-  }
-  return arg.value;
-}
-
 export function createLiquidTagWorker(
   ext: PluginTemplateTag,
   plugin: Plugin,
@@ -77,7 +71,7 @@ export function createLiquidTagWorker(
       const renderPurpose = renderContext.getPurpose?.();
 
       const parsedArgs = tokenizeArgs(this.rawArgs);
-      const args = parsedArgs.map(a => resolveArg(a, scope)).map(decodeEncodingWorker);
+      const args = (await Promise.all(parsedArgs.map(a => resolveArg(a, ctx, this.liquid)))).map(decodeEncodingWorker);
 
       const platform = ({ MacIntel: 'darwin', Win32: 'win32' }[globalThis.navigator?.platform ?? ''] ||
         'linux') as NodeJS.Platform;

packages/insomnia/src/common/templating/resolve-arg.ts

@@ -0,0 +1,10 @@
+import type { Context, Liquid } from 'liquidjs';
+
+import type { NunjucksParsedTagArg } from './types';
+
+export async function resolveArg(arg: NunjucksParsedTagArg, ctx: Context, liquid: Liquid): Promise<any> {
+  if (arg.type === 'variable' || arg.type === 'expression') {
+    return liquid.evalValue(arg.value as string, ctx);
+  }
+  return arg.value;
+}

packages/insomnia/src/templating/__tests__/liquid-compat.test.ts

@@ -4,6 +4,28 @@ import { describe, expect, it } from 'vitest';
 
 import { render } from '../index';
 
+describe('template tag arguments', () => {
+  const md5OfVaporeon = 'ec38601e9ebd2fc22c7c476e14c7890d';
+
+  it('evaluates a _.variable argument to its value', async () => {
+    expect(await render("{% hash 'md5', 'hex', _.pokemon %}", { context: { pokemon: 'vaporeon' } })).toBe(md5OfVaporeon);
+  });
+
+  it('evaluates a bare variable argument to its value', async () => {
+    expect(await render("{% hash 'md5', 'hex', pokemon %}", { context: { pokemon: 'vaporeon' } })).toBe(md5OfVaporeon);
+  });
+
+  it('evaluates a bracket-notation argument to its value', async () => {
+    expect(await render("{% hash 'md5', 'hex', _['water-type'] %}", { context: { 'water-type': 'vaporeon' } })).toBe(
+      md5OfVaporeon,
+    );
+  });
+
+  it('hashes a quoted literal argument verbatim', async () => {
+    expect(await render("{% hash 'md5', 'hex', 'vaporeon' %}", { context: { pokemon: 'flareon' } })).toBe(md5OfVaporeon);
+  });
+});
+
 describe('variable interpolation', () => {
   // Basic {{ var }} substitution from a flat context object
   it('renders root-level variables', async () => {

packages/insomnia/src/templating/liquid-extension.ts

@@ -10,6 +10,7 @@ import { Tag } from 'liquidjs';
 
 import { jarFromCookies } from '~/common/cookies';
 import type { Plugin } from '~/common/plugins/types';
+import { resolveArg } from '~/common/templating/resolve-arg';
 import type { BaseRenderContext, PluginTemplateTag, PluginTemplateTagContext } from '~/common/templating/types';
 import { decodeEncoding, tokenizeArgs } from '~/common/templating/utils';
 
@@ -18,13 +19,6 @@ import * as pluginApp from '../plugins/context/app';
 import * as pluginNetwork from '../plugins/context/network';
 import * as pluginStore from '../plugins/context/store';
 
-function resolveArg(arg: ReturnType<typeof tokenizeArgs>[number], scope: Record<string, any>): any {
-  if (arg.type === 'variable') {
-    return scope[arg.value as string];
-  }
-  return arg.value;
-}
-
 export function createLiquidTag(
   ext: PluginTemplateTag,
   plugin: Plugin,
@@ -45,7 +39,7 @@ export function createLiquidTag(
       const renderPurpose = renderContext.getPurpose?.();
 
       const parsedArgs = tokenizeArgs(this.rawArgs);
-      const args = parsedArgs.map(a => resolveArg(a, scope)).map(decodeEncoding);
+      const args = (await Promise.all(parsedArgs.map(a => resolveArg(a, ctx, this.liquid)))).map(decodeEncoding);
 
       const helperContext: PluginTemplateTagContext = {
         ...pluginApp.init(),

packages/insomnia/src/ui/components/templating/tag-editor.tsx

@@ -512,7 +512,7 @@ export const TagEditor: FC<Props> = props => {
                   <DropdownSection aria-label="Input Type Section" title="Input Type">
                     <DropdownItem aria-label="Static Value">
                       <ItemContent
-                        icon={isVariable ? 'check' : ''}
+                        icon={isVariable ? '' : 'check'}
                         label="Static Value"
                         onClick={() => {
                           const { activeTagData, activeTagDefinition, variables } = state;
@@ -532,7 +532,7 @@ export const TagEditor: FC<Props> = props => {
                     </DropdownItem>
                     <DropdownItem aria-label="Environment Variable">
                       <ItemContent
-                        icon={isVariable ? '' : 'check'}
+                        icon={isVariable ? 'check' : ''}
                         label="Environment Variable"
                         onClick={() => {
                           const { activeTagData, activeTagDefinition, variables } = state;

packages/insomnia/src/ui/templating/__tests__/worker.test.ts

@@ -33,6 +33,24 @@ const userPluginTag: TemplateTag = {
   },
 };
 
+describe('worker tag argument resolution', () => {
+  beforeEach(() => {
+    reload();
+    mockFetch.mockReset();
+    mockFetch.mockImplementation(async (path: any) => {
+      if (path === 'plugin.getBundlePluginTemplateTags' || path === 'plugin.getUserPluginTemplateTags') {
+        return [];
+      }
+      return;
+    });
+  });
+
+  it('resolves a _.variable argument to its value rather than the literal reference', async () => {
+    const result = await render("{% jsonpath _.body, '$.id' %}", { context: { body: '{"id":"vaporeon"}' } });
+    expect(result).toBe('vaporeon');
+  });
+});
+
 describe('worker getLiquid plugin tag registration', () => {
   beforeEach(() => {
     reload();