The react-compound-composer's discuss from igoodie

igoodie / react-compound-composer Goto Github PK

View Code? Open in Web Editor NEW

🖇️ Spend less time crafting your complex Compound Components

License: Creative Commons Attribution Share Alike 4.0 International

TypeScript 100.00%

react-compound-composer's Issues

When a SubCompound is reused, its display names are messed

When a SubCompound is reused, its display names are messed.
Consider the following case:

const Ctx0 = contextBuilder();
const Ctx1 = contextBuilder();
const Ctx2 = contextBuilder();

const SubCompound = compoundBuilder({
  name: "SubCompound",
  provider: Ctx0.Provider,
  components: {
    Root: (props) => <div></div>,
    SubTitle: () => <div />,
    SubDesc: () => <div />,
  },
});

const Compound1 = compoundBuilder({
  name: "Compound1",
  provider: Ctx1.Provider,
  components: {
    Root: (props) => <div></div>,
    Title: (props: { a: 1 }) => <div />,
    Desc: () => <div />,
    Subber: SubCompound,
  },
});

const Compound2 = compoundBuilder({
  name: "Compound2",
  provider: Ctx2.Provider,
  flattenRoot: true,
  components: {
    Root: (props) => <div></div>,
    Title: (props: { a: 1 }) => <div />,
    Desc: () => <div />,
    Subber: SubCompound,
  },
});

Compound1 looks like:

{
  Root: [Function: RootElement] { displayName: 'Compound1' },
  Title: [Function: Title] { displayName: 'Compound1Title' },
  Desc: [Function: Desc] { displayName: 'Compound1Desc' },
  Subber: {
    Root: [Function: RootElement] {
      displayName: 'Compound2Compound1SubCompound',
      SubTitle: [Function],
      SubDesc: [Function]
    },
    SubTitle: [Function: SubTitle] {
      displayName: 'Compound2Compound1SubCompoundSubTitle'
    },
    SubDesc: [Function: SubDesc] {
      displayName: 'Compound2Compound1SubCompoundSubDesc'
    }
  }
}
```

Recommend Projects