Error When Accessing Subproperty of Bracketed Reference

[gtowne]

I'm seeing what appears to be a parsing error when trying to access a subproperty of an object where the top-level key is wrapped in brackets. Here a minimal repro in the LiquidJS playground that demonstrates the error.

Template Value

{{ ["Key String with Spaces"].subproperty_key }}

Scope Object

{
    "Key String with Spaces": {
      "subproperty_key": "subproperty-value"
    }
}

Expected Result

subproperty-value

Actual Result

expected "|" before filter, line:1, col:30, line:1, col:1
>> 1| {{ ["Key String with Spaces"].subproperty_key }}
      ^
ParseError: expected "|" before filter, line:1, col:30, line:1, col:1
    at ae.te [as constructor] (https://liquidjs.com/js/liquid.browser.min.js:1:5364)
    at new ae (https://liquidjs.com/js/liquid.browser.min.js:1:5755)
    at Nr.parseToken (https://liquidjs.com/js/liquid.browser.min.js:1:42812)
    at Nr.parseTokens (https://liquidjs.com/js/liquid.browser.min.js:1:42552)
    at Nr.parse (https://liquidjs.com/js/liquid.browser.min.js:1:42459)
    at P.parse (https://liquidjs.com/js/liquid.browser.min.js:1:72666)
    at P._parseAndRender (https://liquidjs.com/js/liquid.browser.min.js:1:73244)
    at P.<anonymous> (https://liquidjs.com/js/liquid.browser.min.js:1:73405)
    at Object.next (https://liquidjs.com/js/liquid.browser.min.js:1:2090)
    at https://liquidjs.com/js/liquid.browser.min.js:1:1136
From expected "|" before filter, line:1, col:30
>> 1| {{ ["Key String with Spaces"].subproperty_key }}
                                   ^
TokenizationError: expected "|" before filter, line:1, col:30
    at ie.te [as constructor] (https://liquidjs.com/js/liquid.browser.min.js:1:5364)
    at new ie (https://liquidjs.com/js/liquid.browser.min.js:1:5623)
    at F.error (https://liquidjs.com/js/liquid.browser.min.js:1:32131)
    at F.assert (https://liquidjs.com/js/liquid.browser.min.js:1:32232)
    at F.readFilter (https://liquidjs.com/js/liquid.browser.min.js:1:29186)
    at F.readFilters (https://liquidjs.com/js/liquid.browser.min.js:1:29053)
    at F.readFilteredValue (https://liquidjs.com/js/liquid.browser.min.js:1:28926)
    at new Fr (https://liquidjs.com/js/liquid.browser.min.js:1:39501)
    at Nr.parseToken (https://liquidjs.com/js/liquid.browser.min.js:1:42738)
    at Nr.parseTokens (https://liquidjs.com/js/liquid.browser.min.js:1:42552)

[harttle]

Seems this works fine on shopify liquid. I'll treat this as a bug.

BTW, I noticed another problem: line:1, col:30, line:1, col:1 , it's output twice by different level of code.

[gtowne]

Great, thanks for confirming! We have a workaround right now, but our workaround is a little ugly, so we'll be eagerly awaiting a fix. Let me know if there's anything more we can do to help with that.

[github-actions]

🎉 This issue has been resolved in version 10.9.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[harttle]

Try the latest version. I created a test case for this scenario:

liquidjs/test/e2e/issues.spec.ts

Lines 457 to 466 in 942944e

	it('#643 Error When Accessing Subproperty of Bracketed Reference', () => {
	const engine = new Liquid()
	const tpl = '{{ ["Key String with Spaces"].subpropertyKey }}'
	const ctx = {
	'Key String with Spaces': {
	subpropertyKey: 'FOO'
	}
	}
	expect(engine.parseAndRenderSync(tpl, ctx)).toEqual('FOO')
	})

[gtowne]

This looks like it resolves our issue! Thank you for such a quick turnaround!