(Solved) How to make react props to children

[Byeonggak Yu]

as-is

<Button label={"Green"}></Button>

I want to make above code like this.

<Button>{"Green"}</Button>

I wrote gritql like this.

engine marzano(0.1)
      language js
      
      `<$name $props>$body</$name>` where {
          $body <: r"\s*",
          $props <: contains r"label=(.*)"($label) => ``,
      }

Above code removes label property. But I have no idea how to insert ($label) as React Children.
Please help me.

[Morgante Pell]

This should work:

engine marzano(0.1)
      language js
      
      `<$name $props>$body</$name>` where {
          $props <: contains `label={$label}` => ``,
          $newbody = `{$label}`,
      } => `<$name $props>$newbody</$name>`

[Byeonggak Yu]

@morgante Thank you so much.

[Roman O]

@morgante what about if content is plain text?
<Text size={24} content='Some content'/>
https://app.grit.io/studio?key=MTd7mR3taj5k6i2sDL1mZ

[Morgante Pell]

@romanlex It looks like you have it working fine. You can drop the {} from the pattern to make it match a plain text property.

[Roman O]

@morgante its work only when I use regexp for find string
see same link
work

$props <: contains r"content=\'(.*)\'"($children) => .

doesn't work

$props <: contains content='$children'

[Morgante Pell]

This should work instead of a regex:

$props <: contains jsx_attribute(name=`content`, $value) => .,
                or {
                    and {
                        $value <: string($fragment),
                        $value <: contains string_fragment() as $children
                    },
                    $children = $value
                }

[Roman O]

oh, thx
where I can read about jsx_attribute?

And another question. Why I can find components with name wich contain .
For example

<$name $props />` where {
                or {
                    $name <: `Text`,
                    $name <: `Text.Heading`, // not found
                    $name <: `Anchor`,
                    $name <: `Amount`,
                    $name <: `ContextMenu.Item`, // not found
                },
                $props <: contains r"content=\{`(.*)`\}"($children) => .,
                $children = replaceSybmol($children)
            } => `<$name $props>$children</$name>

[Morgante Pell]

jsx_attribute is a syntax tree node: https://docs.grit.io/language/patterns#syntax-tree-nodes

You can inspect the AST by clicking "debug" in the studio.

Text.Heading is technically two identifiers. Try using a string match instead:

                    $name <: "Text.Heading", // not found