feat(react plugin): provide a factory function to connect Gondel and React

[jantimon]

This enhancement will:

• add a new util helper so we don't have to use generics anymore
• stop mounted react apps when calling stop
• adds unit tests

The name createGondelReactLoader is still open for discussion - we could also turn it into a static function e.g. GondelReactComponent.create

base syntax

for default export:

const GondelReactLoaderComponent = createGondelReactLoader(() => import('./App'));
@Component("Greeter")
class Greeter extends GondelReactLoaderComponent {

for named export:

const GondelReactLoaderComponent = createGondelReactLoader(() => import('./App'), 'App');
@Component("Greeter")
class Greeter extends GondelReactLoaderComponent {

emphasize the loader

for default export:

const loader = () => import('./App');
@Component("Greeter")
class Greeter extends createGondelReactLoader(loader) {

for named export:

const loader = () => import('./App');
@Component("Greeter")
class Greeter extends createGondelReactLoader(loader, 'App') {

compact syntax

for default export:

@Component("Greeter")
class Greeter extends createGondelReactLoader(() => import('./App')) {

for named export:

@Component("Greeter")
class Greeter extends createGondelReactLoader(() => import('./App'), 'App') {

[janbiasi]

Implication / downside if we use a static function would be that we would loose the capability of minification from GondelReactLoaderComponent.create into eg. c (minified function name) but C.create , that would be 7 characters per usage which could not get minified. Imo we can ignore these 5 characters as they won't blow up the bundle size compared to libraries or any other code we possibly have which isn't optimized for minification.

Providing examples for the static version:

base syntax

for default export:

const GondelReactLoaderComponent = GondelReactLoaderComponent.create(() => import('./App'));
@Component("Greeter")
class Greeter extends GondelReactLoaderComponent {

for named export:

const GondelReactLoaderComponent = GondelReactLoaderComponent.create(() => import('./App'), 'App');
@Component("Greeter")
class Greeter extends GondelReactLoaderComponent {

emphasize the loader

for default export:

const loader = () => import('./App');
@Component("Greeter")
class Greeter extends GondelReactLoaderComponent.create(loader) {

for named export:

const loader = () => import('./App');
@Component("Greeter")
class Greeter extends GondelReactLoaderComponent.create(loader, 'App') {

compact syntax

for default export:

@Component("Greeter")
class Greeter extends GondelReactLoaderComponent.create(() => import('./App')) {

for named export:

@Component("Greeter")
class Greeter extends GondelReactLoaderComponent.create(() => import('./App'), 'App') {

[jantimon]

@ernscht and @smollweide prefer GondelReactComponent.create too

[janbiasi]

@jantimon should we finalize this in this week? :)

[janwidmer]

would be cool, then I could update the examples.. :-)