search

grommet / jsx-to-string

Parse your React JSX component to string
MIT License
124 stars 26 forks source link

question: would you be open to `ignoreTag` and/or `replaceTag` options? #5

Closed peter-mouland closed 7 years ago

peter-mouland commented 8 years ago

not sure how it would work just yet, as a prop on the tag to ignore or as an option

as a prop

<Basic>
  <svg ignoreTag>
  <svg ignoreTag>
</Basic>
//outputs: <Basic ></Basic>

as an option

console.log(jsxToString(<Basic><svg /><svg /></Basic>, {
  ignoreTag: 'svg'
})); //outputs: <Basic ></Basic>
alansouzati commented 8 years ago

Yes Im open for that and thanks for bringing this up.

Thinking about it though, I feel we need to refactor the options to be like:

  {
    props: { // every key in this object will affect the entire rendering tree
      test1: {
        ignore: true //this will ignore `test1` prop for the entire rendering tree
      },
      onClick: {
        displayName: 'onClick2' //a different display name for a given property
        value: '_onClick' //a different value for a given property
      }
    },
    components: {
      svg: {
        ignore: true //this will ignore `svg` tags
      },
      img: {
        displayName: 'Image',
        props: { //this configuration is local to img component
          test2: {
            ignore: true
          },
          ...//all other prop config
        }
      }
    }
  }

The reason for the refactor is that I feel options is starting to get a lot of different configuration.

Thoughts?

lucmerceron commented 7 years ago

Hello here,

I like the idea of ignoring some tags and it would be useful for my Front-end documentation at work. I also like the fact that jsx-to-string is really easy to use & to configure so I am afraid @alansouzati refactor idea would bring too much complexity.

For me the best option is to add this another option:

console.log(jsxToString(<Basic><svg /><svg /><img /></Basic>, {
  ignoreTags: ['svg', 'img']
})); //outputs: <Basic ></Basic>

If I can help I'm willing to work on this.

alansouzati commented 7 years ago

Yeah. I agree that it adds extra complexity. I can see ignoreTags working just fine for tags, but when it comes to properties, I believe they have to be component-specify, but we can cross that bridge when we get there.

We just have to keep in mind that ignoreTags is global and affect all children, but I believe this is a minor issue.

I would appreciate contributions as I'm pretty busy with other stuff.

lucmerceron commented 7 years ago

Thanks for the clarification, I agree with you.

I'll do it asap and PR the result.