From 7ca586f770651776fcf5fb0e3c0e6dd25dcca9f4 Mon Sep 17 00:00:00 2001 From: "Andrey Mikhaylov (lolmaus)" Date: Tue, 28 Nov 2023 13:08:36 +0300 Subject: [PATCH] Make helpers unambiguious with parens aka subexpressions --- transforms/angle-brackets/known-helpers.js | 2 - .../telemetry/mock-invokables.js | 3 + transforms/angle-brackets/transform.js | 45 +++++++---- transforms/angle-brackets/transform.test.js | 77 ++++++++++++++----- 4 files changed, 89 insertions(+), 38 deletions(-) diff --git a/transforms/angle-brackets/known-helpers.js b/transforms/angle-brackets/known-helpers.js index 87a7ee7b9..57d4e18e5 100755 --- a/transforms/angle-brackets/known-helpers.js +++ b/transforms/angle-brackets/known-helpers.js @@ -18,14 +18,12 @@ const KNOWN_HELPERS = [ 'loc', 'log', 'mut', - 'outlet', 'partial', 'query-params', 'readonly', 'unbound', 'unless', 'with', - 'yield', // Glimmer VM 'identity', // glimmer blocks diff --git a/transforms/angle-brackets/telemetry/mock-invokables.js b/transforms/angle-brackets/telemetry/mock-invokables.js index 9715c6ea1..a00d44221 100644 --- a/transforms/angle-brackets/telemetry/mock-invokables.js +++ b/transforms/angle-brackets/telemetry/mock-invokables.js @@ -101,4 +101,7 @@ module.exports = { 'app/helpers/nested/helper': { type: 'Helper', }, + 'app/helpers/fooknownhelper': { + type: 'Helper', + }, }; diff --git a/transforms/angle-brackets/transform.js b/transforms/angle-brackets/transform.js index c4f3e97a9..7d0fb0e43 100755 --- a/transforms/angle-brackets/transform.js +++ b/transforms/angle-brackets/transform.js @@ -326,7 +326,7 @@ function getNonDataAttributesFromParams(params) { return params.filter((it) => !isDataAttrPathExpression(it)); } -function shouldIgnoreMustacheStatement(fullName, config, invokableData) { +function isKnownHelper(fullName, config, invokableData) { let { helpers, components } = invokableData; let isTelemetryData = !!(helpers || components); @@ -337,11 +337,18 @@ function shouldIgnoreMustacheStatement(fullName, config, invokableData) { } if (isTelemetryData) { + let isComponent = + !config.helpers.includes(name) && + [...(components || []), ...BUILT_IN_COMPONENTS].includes(name); + + if (isComponent) { + return false; + } + let mergedHelpers = [...KNOWN_HELPERS, ...(helpers || [])]; let isHelper = mergedHelpers.includes(name) || config.helpers.includes(name); - let isComponent = [...(components || []), ...BUILT_IN_COMPONENTS].includes(name); let strName = `${name}`; // coerce boolean and number to string - return (isHelper || !isComponent) && !strName.includes('.'); + return isHelper && !strName.includes('.'); } else { return KNOWN_HELPERS.includes(name) || config.helpers.includes(name); } @@ -363,7 +370,7 @@ function nodeHasPositionalParameters(node) { return false; } -function transformNode(node, fileInfo, config) { +function transformComponentNode(node, fileInfo, config) { if ( hasValuelessDataParams(node.params) && shouldSkipDataTestParams(node.params, config.includeValuelessDataTestAttributes) @@ -425,6 +432,10 @@ function transformNode(node, fileInfo, config) { ); } +function transformHelperNode(node) { + return b.mustache(b.sexpr(node.path, node.params, node.hash)); +} + function subExpressionToMustacheStatement(subExpression) { return b.mustache(subExpression.path, subExpression.params, subExpression.hash); } @@ -457,22 +468,29 @@ function transformToAngleBracket(fileInfo, config, invokableData) { * Transform the attributes names & values properly */ return { - MustacheStatement(node) { + MustacheStatement(node, walkerPath) { const tagName = `${node.path && node.path.original}`; if (config.components && !config.components.includes(tagName)) return; + const isTagKnownHelper = isKnownHelper(tagName, config, invokableData); + // Don't change attribute statements - const isValidMustache = - node.loc.source !== '(synthetic)' && - !shouldIgnoreMustacheStatement(tagName, config, invokableData); + const isValidMustacheComponent = node.loc.source !== '(synthetic)' && !isTagKnownHelper; const isNestedComponent = isNestedComponentTagName(tagName); if ( - isValidMustache && + isValidMustacheComponent && (node.hash.pairs.length > 0 || node.params.length > 0 || isNestedComponent) ) { - return transformNode(node, fileInfo, config); + return transformComponentNode(node, fileInfo, config); + } else if ( + isTagKnownHelper && + node.path.type !== 'SubExpression' && + walkerPath.parent.node.type !== 'AttrNode' && + walkerPath.parent.node.type !== 'ConcatStatement' + ) { + return transformHelperNode(node, walkerPath); } }, BlockStatement(node) { @@ -480,11 +498,8 @@ function transformToAngleBracket(fileInfo, config, invokableData) { if (config.components && !config.components.includes(tagName)) return; - if ( - !shouldIgnoreMustacheStatement(node.path.original, config, invokableData) || - isWallStreet(tagName) - ) { - return transformNode(node, fileInfo, config); + if (!isKnownHelper(node.path.original, config, invokableData) || isWallStreet(tagName)) { + return transformComponentNode(node, fileInfo, config); } }, AttrNode: { diff --git a/transforms/angle-brackets/transform.test.js b/transforms/angle-brackets/transform.test.js index 86256cf4f..3bd2cc907 100644 --- a/transforms/angle-brackets/transform.test.js +++ b/transforms/angle-brackets/transform.test.js @@ -288,7 +288,6 @@ test('deeply-nested-sub', () => { ) }} `; - /** * NOTE: An issue has been opened in `ember-template-recast` (https://github.com/ember-template-lint/ember-template-recast/issues/82) * regarding to create an API to allow a transform to customize the whitespace for newly created nodes. @@ -477,7 +476,7 @@ test('let', () => { {{#let (capitalize this.person.firstName) (capitalize this.person.lastName) as |firstName lastName| }} - Welcome back {{concat firstName ' ' lastName}} + Welcome back {{(concat firstName ' ' lastName)}} Account Details: First Name: {{firstName}} @@ -555,8 +554,8 @@ test('link-to-inline', () => { Segments Segments {{segment.name}} - {{t \\"show\\"}} - {{t \\"show\\"}} + {{(t \\"show\\")}} + {{(t \\"show\\")}} Show Show Show @@ -840,7 +839,7 @@ test('t-helper', () => { expect(runTest('t-helper.hbs', input)).toMatchInlineSnapshot(` " - {{t \\"some.string\\" param=\\"string\\" another=1}} + {{(t \\"some.string\\" param=\\"string\\" another=1)}} " `); }); @@ -978,7 +977,7 @@ test('skip-default-helpers', () => { expect(runTest('skip-default-helpers.hbs', input, options)).toMatchInlineSnapshot(` "
- {{liquid-outlet}} + {{(liquid-outlet)}}
@@ -998,11 +997,11 @@ test('skip-default-helpers', () => { Two {{/liquid-if}} - {{moment '12-25-1995' 'MM-DD-YYYY'}} - {{moment-from '1995-12-25' '2995-12-25' hideAffix=true}} + {{(moment '12-25-1995' 'MM-DD-YYYY')}} + {{(moment-from '1995-12-25' '2995-12-25' hideAffix=true)}} - {{some-helper1 foo=true}} - {{some-helper2 foo=true}} + {{(some-helper1 foo=true)}} + {{(some-helper2 foo=true)}} " `); }); @@ -1040,7 +1039,7 @@ test('skip-default-helpers (no-config)', () => { expect(runTest('skip-default-helpers.hbs', input)).toMatchInlineSnapshot(` "
- {{liquid-outlet}} + {{(liquid-outlet)}}
@@ -1060,8 +1059,8 @@ test('skip-default-helpers (no-config)', () => { Two {{/liquid-if}} - {{moment '12-25-1995' 'MM-DD-YYYY'}} - {{moment-from '1995-12-25' '2995-12-25' hideAffix=true}} + {{(moment '12-25-1995' 'MM-DD-YYYY')}} + {{(moment-from '1995-12-25' '2995-12-25' hideAffix=true)}} @@ -1087,8 +1086,8 @@ test('custom-options', () => { expect(runTest('custom-options.hbs', input, options)).toMatchInlineSnapshot(` " - {{some-helper1 foo=true}} - {{some-helper2 foo=true}} + {{(some-helper1 foo=true)}} + {{(some-helper2 foo=true)}} {{link-to \\"Title\\" \\"some.route\\"}} {{textarea value=this.model.body}} {{input type=\\"checkbox\\" name=\\"email-opt-in\\" checked=this.model.emailPreference}} @@ -1181,7 +1180,7 @@ test('preserve arguments', () => { " {{foo-bar data-baz class=\\"baz\\"}} - {{t \\"show\\"}} + {{(t \\"show\\")}} " `); }); @@ -1278,7 +1277,6 @@ test('wallstreet-telemetry', () => { let input = ` {{nested$helper}} {{nested::helper}} - {{nested$helper param="cool!"}} {{nested::helper param="yeah!"}} {{helper-1}} `; @@ -1286,10 +1284,27 @@ test('wallstreet-telemetry', () => { expect(runTest('wallstreet-telemetry.hbs', input)).toMatchInlineSnapshot(` " {{nested$helper}} - {{nested::helper}} - {{nested$helper param=\\"cool!\\"}} - {{nested::helper param=\\"yeah!\\"}} - {{helper-1}} + {{(nested::helper)}} + {{(nested::helper param=\\"yeah!\\")}} + {{(helper-1)}} + " + `); +}); + +test('wrapping-helpers-with-parens', () => { + let input = ` + {{fooknownhelper}} + {{(fooknownhelper)}} + {{fooknownhelper data-test-foo foo="bar"}} + {{foounknownhelper}} + `; + + expect(runTest('wrapping-helpers-with-parens.hbs', input)).toMatchInlineSnapshot(` + " + {{(fooknownhelper)}} + {{(fooknownhelper)}} + {{(fooknownhelper data-test-foo foo=\\"bar\\")}} + {{foounknownhelper}} " `); }); @@ -1335,3 +1350,23 @@ test('No telemetry', () => { " `); }); + +test('pipe', () => { + let input = `"}} as |bar|>`; + + expect(runTestWithData('pipe.hbs', input, {}, {})).toMatchInlineSnapshot( + `"\\"}} as |bar|>"` + ); +}); + +test('outlet', () => { + let input = `{{outlet}}`; + + expect(runTestWithData('pipe.hbs', input, {}, {})).toMatchInlineSnapshot(`"{{outlet}}"`); +}); + +test('yield', () => { + let input = `{{yield}}`; + + expect(runTestWithData('pipe.hbs', input, {}, {})).toMatchInlineSnapshot(`"{{yield}}"`); +});