@gondel/plugin-react

React Lazy Plugin

This tiny plugin bootstraps React widgets and apps using Gondel.

Usage

html

  <div data-g-name="DemoWidget">Loading..</div>

js

import { GondelReactComponent } from '@gondel/plugin-react';
import { Component } from '@gondel/core';
import { App } from './App';
import React from 'react';

@Component('DemoWidget')
export class DemoWidget extends GondelReactComponent {
  render() {
    return (
      <App />
    )
  }
}

App configuration

Most apps need some specific configuration e.g. Api enpoints.
The following pattern allows you to pass a basic configuration from the dom to your app.

html

  <div data-g-name="DemoWidget">
    <script type="text/json">{ "foo":"bar" }</script>
    Loading..
  </div>

js

import { GondelReactComponent } from '@gondel/plugin-react';
import { Component } from '@gondel/core';
import React from 'react';
import { App } from './App';

@Component('DemoWidget')
export class DemoWidget extends GondelReactComponent {
  render(config) {
    return (
      <App config={config} />
    )
  }
}

Lazy loading

To load the javascript of your react widget only if the matching HTML Element is present you can use the following pattern:

html

  <div data-g-name="DemoWidget">
    <script type="text/json">{ "foo":"bar" }</script>
    Loading..
  </div>

js

import {GondelReactComponent} from '@gondel/plugin-react';
import {Component} from '@gondel/core';
import React from 'react';

@Component('DemoWidget')
export class DemoWidget extends GondelReactComponent {
  async start() {
      this.App = await import('./App').App;
  }

  render(config) {
    const App = this.App;
    return 
      <App config={config} />
    ));
  }
}

Changelog

0.0.4 (2018-09-17)

Bug Fixes

• @gondel/core: Rethrow caught errors from promises for better dev tool output (6de6c5f)
• core: Allow to overwrite the stop method (83946fd)
• Update path for HtmlWebpackPlugin template in typescript example (9ee3ae2)
• core: Fix Element is undefined in jest (ba71f7c)
• plugin-jquery: Fix a typo in the classname (5b3a447)
• plugin-react: Fix a possible invalid type error (9622d7d)

Features

• Upgrade dependencies (#13) (228c287)
• core: Start all components on dom ready (12f4b64)
• dom-utils: add the possibility of generic params for dom utils (63d3785)
• dom-utils: refactor getComponentByDomNode for strict typings (deaf717)
• events: Set event.currentTarget to the selected element of the listener (03a0152)
• plugin-jquery: Provide a mixin and a baseClass (504bdf4)
• plugin-media-query: create media-queries gondel plugin (#2) (5c36e04)
• plugin-media-query: Export the event name as variable name (4af8458), closes #4
• plugin-react: Release the gondel react plugin (d7c14dd)

BREAKING CHANGES

• events: Set event.currentTarget to the selected element of the listener
• dom-utils: getComponentByDomNode will now throw an error if no component can be found
• plugin-media-query: The event named viewportChange was removed and is now only accessible using the exported VIEWPORT_ENTERED constant

<a name="0.0.2"></a>