as-is <div class="highlight highlight-source-tsx notranslate position-relative ove

This should work: <div class="snippet-clipboard-content notranslate position-relat

jsx_attribute is a syntax tree node: <a href="https:/

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

This should work instead of a regex: <div class="snippet-clipboard-content notrans

(Solved) How to make react props to children about gritql HOT 8 CLOSED

gaki2 commented on June 12, 2024

(Solved) How to make react props to children

from gritql.

Comments (8)

morgante commented on June 12, 2024 2

This should work:

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

from gritql.

morgante commented on June 12, 2024 1

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

from gritql.

gaki2 commented on June 12, 2024

@morgante Thank you so much.

from gritql.

romanlex commented on June 12, 2024

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

from gritql.

morgante commented on June 12, 2024

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

from gritql.

romanlex commented on June 12, 2024

@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'

from gritql.

morgante commented on June 12, 2024

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
                }

from gritql.

romanlex commented on June 12, 2024

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>

from gritql.

Recommend Projects