@archibara/react-rewraper

Motivation

https://www.reddit.com/r/ProgrammerHumor/comments/1bb637f/reactisfine/

Example:

<Provider store={store}>
  <PersistGate loading={<Loader block size={100} />} persistor={persistor}>
    <ErrorBoundary FallbackComponent={ErrorHandler}>
      <HelmetProvider>
        <BrowserRouter>
          <ThemeProvider theme={theme}>
            <div className='app'>
              <App />
            </div>
          </ThemeProvider>
        </BrowserRouter>
      </HelmetProvider>
    </ErrorBoundary>
    <GlobalStyles />
  </PersistGate>
</Provider>

Just wrap this hell by Rewraper:

<Rewraper>
  <Provider store={store} />
  <PersistGate loading={<Loader block size={100} />} persistor={persistor} />
  <ErrorBoundary FallbackComponent={ErrorHandler} />
  <HelmetProvider />
  <BrowserRouter />
  <ThemeProvider theme={theme} />
  <div className='app' />
  <App />
</Rewraper>

Or combine your components & props:

<>
  {rewrapComponents([
    [Provider, { store }],
    [PersistGate, { loading: <Loader block size={100} />, persistor }],
    [ErrorBoundary, { FallbackComponent: ErrorHandler }],
    [HelmetProvider][BrowserRouter][(ThemeProvider, { theme })],
    ['div', { className: 'app' }],
    [App],
  ])}
</>

API:

Rewraper

A component that wraps all children into a nested structure.

import { Rewraper } from '@archibara/react-rewraper';

<Rewraper>
  <ComponentLevel1 description={'root'} />
  <ComponentLevel2 description={'This componet is wrapped by ComponentLevel1'} />
  <LastComponet description={'This componet is wrapped by ComponentLevel2'} />
</Rewraper>;

rewrapComponents

A function that wraps all components into a nested structure. Accepts an array of components with props. You can use any component or string as a tag. Children will be replaced by the next component in the array. So you cant use render function as a child.

import { rewrapComponents } from '@archibara/react-rewraper';

{
  rewrapComponents([
    [ComponentLevel1, { description: 'root' }],
    [ComponentLevel2, { description: 'This componet is wrapped by ComponentLevel1' }],
    [LastComponet, { description: 'This componet is wrapped by ComponentLevel2' }],
  ]);
}

No more "This branch has conflicts that must be resolved"

100% TypeScript safety... almost

Roadmap:

• Step 1: Test this on real project
• Step 2: Profit

---