Alternative to extract mode for Vue / HTML files

[leipert]

Is your feature request related to a problem? Please describe.

We have been using the experimental extract mode which was removed with #9891 and planned on using it more.

For example: https://gitlab.com/gitlab-org/frontend/playground/gitlab-code-scanner/-/blob/0d1e562a6769281b99f995cbe6a85ced801f1772/rules/dateFormatting/dateFormatting.yml

The use case for us, is Vue single file components which are a template language (more or less HTML) which can contain script (and other) tags. Inside the script tags e.g. JavaScript and TypeScript can be used:

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

Describe the solution you'd like

• A convenient way to declare a sub-pattern as a different language (e.g. script inside HTML / vue SFC being JavaScript)

Describe alternatives you've considered

• generic pattern matching, but that lacks the advanced pattern syntax
  N/A?

Use case

• using function calls or other semantic pattern syntax to match inside those parts of a file

Additional context
Add any other context or screenshots about the feature request here.

[leipert]

Oh, I guess the metavariable pattern could be an alternative?

https://semgrep.dev/docs/writing-rules/rule-syntax/#example-match-javascript-code-inside-html

[emjin]

Oh, I guess the metavariable pattern could be an alternative?

https://semgrep.dev/docs/writing-rules/rule-syntax/#example-match-javascript-code-inside-html

Yes, for your use case, I believe metavariable-pattern will work just fine!