Build and test react components

[oxyc]

@taromorimoto @henritukiainen we want this right https://stenciljs.com/docs/react#bindings?

@silentnoodlemaster you could also have a look at this and try and test it out in a project.

npm install generoi/genero-design-system#<branch> and you can install your own PR in some project where you try and hook up react to see if it just works™.

[henritukiainen]

Yep, looks like a nice convenience to avoid manually wrapping the components.

[silentnoodlemaster]

seems like doing the react bindings as documented it would make more sense to have a monorepo that has the components as one package and the react wrapper as another

[oxyc]

Would it not work to just publish all? Except you'd import { Button} from 'genero-digital-system/dist/reactishpath';

[silentnoodlemaster]

there are some auto generated files that try to import from the component package.

---

also, it does run in react with no special steps, but seemingly there are some caveats that i don't fully understand

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { applyPolyfills, defineCustomElements } from 'genero-design-system/loader';

ReactDOM.render(
  <React.StrictMode>
    <gds-button>Button</gds-button>
  </React.StrictMode>,
  document.getElementById('root')
);

applyPolyfills().then(() => {
  defineCustomElements();
}); 

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

output:

[silentnoodlemaster]

yeah like this import { GdsButton } from 'genero-design-system/path-to-react-output'

would import from a file like this:

/* eslint-disable */
/* tslint:disable */
/* auto-generated react proxies */
import { createReactComponent } from './react-component-lib'

import { JSX } from 'genero-design-system'

import { defineCustomElements, applyPolyfills } from 'genero-design-system/loader'

applyPolyfills().then(() => defineCustomElements())
export const GdsButton = /*@__PURE__*/ createReactComponent<JSX.GdsButton, HTMLGdsButtonElement>('gds-button')