Too many div generation from using ReactWrapper

[josephrexme]

After #18 failed with the VuePlugin I tried to do the same with the alternative ReactWrapper and though the following code works,

<template>
  <div class="hello">
    <react :component="grid">
      <react :component="gridcol">2</react>
      <react :component="gridcol">2</react>
    </react>
  </div>
</template>

<script>
import ScrollIndicator from '@/components/ScrollIndicator.vue'
import { ReactWrapper } from 'vuera'
import { Grid, GridCol } from 'griz'

export default {
  name: 'home',
  data() {
    return {
      msg: 'Test data',
      grid: Grid,
      gridcol: GridCol,
    }
  },
  components: { ScrollIndicator, react: ReactWrapper }
}
</script>

In a React application grid will be a flex container and grid-col its flex items. The problem here is each of them are rendered with extra divs inside of them which breaks the flex layout.

I get:

gridComponentWrapper
   |--grid
           |-- div
                  |-- gridcolComponentWrapper
                           |-- gridcol
                                  |-- div
                                         |-- 2
                  |-- gridcolComponentWrapper
                           |-- gridcol
                                  |-- div
                                         |-- 2

where I expected

grid
  |-- gridcol
          |-- 2
  |-- gridcol
          |-- 2

[akxcv]

Yeah, this library works by creating a <div> in the DOM and rendering React / Vue into that div. I'm not sure how to fix that properly, right now I don't see a good solution. Perpaps, you have some ideas?

[josephrexme]

Thanks for the reply @akxcv . I'll look to see if there's something I can do to help and if there's nothing I'd be making a PR for a new README that contains this as a CON to save the time of people looking to use it with tables or flexbox layouts

[akxcv]

Sounds good! The only thing we could do is make the div wrapper configurable (so that people can specify the exact DOM element type they want), but it won't solve the nesting problem. Also, the component wrapper (gridcolComponentWrapper in your case) is, AFAICT, unavoidable at all.

[phillbaker]

Would it be possible to eliminate the gridcolComponentWrapper by re-using the react object from the gridComponentWrapper parent? For directly nested children, would it be possible to optimize out the intermediate react + wrappers?

[akxcv]

Yeah, I guess it should be possible to optimise vuera such that directly nested children are not getting wrapped more than they need to. I'm not sure how exactly that can be done, though. We would need to somehow know not to wrap direct children of wrapped parents in case components' frameworks match... Someone needs to play around with this.