Pattern match on multiple language document (e.g., Vue SFC file)

[hitochan777]

I am sorry for another question in a short time.
I want to match a pattern in Javascript code inside script tag in Vue SFC file.
Because ast-grep does not seem to have built-in support for Vue SFC, I am considering registering tree-sitter-vue in sgconfig.yml as described in the documentation.
Unfortunately tree-sitter-vue parses everything inside script tag as raw-text, making it impossible to match a pattern syntactically.

After some investigation, I found there is a tree-sitter feature called language injection, but I am not sure if this can be used in ast-grep.

How can I match patterns inside script tag syntactically in Vue SFC files?

[HerringtonDarkholme]

thanks for using ast-grep!
Sadly the tool does not support multiple language at the moment. Using language injection requires extra setup that I have not come up with a good solution yet.

Any idea or suggestion is welcome!

[HerringtonDarkholme]

cc @zhiyuanzmj do you have any suggestions on how to support multiple language?

[hitochan777]

I am not sure if this is a good idea, but
inspired by the idea from @zhiyuanzmj , it would be nice if I can define pre/post processing script or rewrite logic in a rule config file.

[hitochan777]

But I will try @zhiyuanzmj 's idea for now. Thank you so much for your help!

[zhiyuanzmj]

You can comment <style> and <template> block first.

id: setup-sfc start comment
language: html
rule:
  kind: script_element
  has:
    kind: start_tag
    pattern: $START
    precedes:
      kind: raw_text
      pattern: $RAW
      precedes:
        kind: end_tag
        pattern: $END
  inside:
    kind: fragment
fix: |-
  $START*/
  $RAW/*$END

id: setup-sfc end comment
language: html
rule:
  kind: fragment
  pattern: $A
  has:
    kind: script_element
fix: /*$A*/

Result

/*<script setup>*/

defineProps<{
  foo: string
}>()

/*</script>
<template>
  <div>{foo}<div>
</template>*/

---

After conversion, clean these comments.

id: setup-sfc clean comment
language: tsx
rule:
  kind: comment
  regex: /\*</?script|<script.*>\*/$
  pattern: $A
  inside:
    kind: program
transform:
  B:
    substring:
      startChar: 2
      endChar: -2
      source: $A
  C:
    replace:
      replace: \*\\/
      by: '*/'
      source: $B
fix: $C

Example

https://github.com/vue-macros/vue-macros-cli/blob/a8f0fa804224467a315e60a1a8c994114dae35ff/src/sg/index.ts#L59

[hitochan777]

Thank you! This is a very easy-to-understand approach. I will try this!
I wish I did not have to programatically call ast-grep to do setup-and-clean procedure.

[HerringtonDarkholme]

Thanks! This is a nice workaround for now! But I would think ast-grep can provide better API for embedded language usage. Let me know what's your thoughts and desired API!

[hitochan777]

I created the following rule file, following #978 (comment).

id: setup-sfc start comment
language: html
rule:
  kind: script_element
  has:
    kind: start_tag
    pattern: $START
    precedes:
      kind: raw_text
      pattern: $RAW
      precedes:
        kind: end_tag
        pattern: $END
  inside:
    kind: fragment
fix: |-
  $START*/
  $RAW/*$END

---

id: setup-sfc end comment
language: html
rule:
  kind: fragment
  pattern: $A
  has:
    kind: script_element
fix: /*$A*/

Then I ran ast-grep scan --filter setup-sfc **/*.vue.
But only the fix of the second rule was applied.
From this behavior I guessed that if there are conflicts the last rule is applied but it seems it is not the case because even if I move the second rule to the first the result does not change.
Is there any order in which fixes are applied?
If I want both of them to be applied, is it better to sequentially call ast-grep for each rule as done by vue-macros?

Also I don't know why but the first rule does not match script tags on playground but when run locally it matches.
https://ast-grep.github.io/playground.html#eyJtb2RlIjoiQ29uZmlnIiwibGFuZyI6Imh0bWwiLCJxdWVyeSI6ImEgPSAxMjMiLCJyZXdyaXRlIjoibG9nZ2VyLmxvZygkTUFUQ0gpIiwiY29uZmlnIjoiaWQ6IHNldHVwLXNmYyBzdGFydCBjb21tZW50XG5sYW5ndWFnZTogaHRtbFxucnVsZTpcbiAga2luZDogc2NyaXB0X2VsZW1lbnRcbiAgaGFzOlxuICAgIGtpbmQ6IHN0YXJ0X3RhZ1xuICAgIHBhdHRlcm46ICRTVEFSVFxuICAgIHByZWNlZGVzOlxuICAgICAga2luZDogcmF3X3RleHRcbiAgICAgIHBhdHRlcm46ICRSQVdcbiAgICAgIHByZWNlZGVzOlxuICAgICAgICBraW5kOiBlbmRfdGFnXG4gICAgICAgIHBhdHRlcm46ICRFTkRcbmZpeDogfC1cbiAgJFNUQVJUKi9cbiAgJFJBVy8qJEVORFxuIiwic291cmNlIjoiPHRlbXBsYXRlPlxuPC90ZW1wbGF0ZT5cbjxzY3JpcHQ+XG5cbjwvc2NyaXB0PlxuIn0=

I am so sorry for posting a lot of questions these days.