issue/2824-jsx Changed bundler and added React support

[oliverfoster]

#2824
Will provide an almost seamless migration away from build-side requirejs and AMD modules to ES6 modules and add react support to the framework.

Facilitates

• future proof
  • import and export directives
  • beyond ES8 code
  • react templates
• development improvements
  • much faster compilation and recompilation times on all grunt tasks, this is as a cache is now generated for the build process
  • supports larger code bases
  • move towards supporting intellisense in code editors
• backward-compatibility
  • ES6 modules are reregistered in the browser as AMD modules, so var Adapt = require('core/js/adapt'); etc will still work in the console and for other plugins
  • we can now rework Adapt to ES6 modules whilst retaining support for the existing AMD modules
  • still ie11 compatible

Downsides

• External modules such as libraries/mediaelement-fullscreen-hook.js, which are required by internal modules and require internal modules are now considered circular dependencies and will break the loading process. A temporary fix is included until that module can be moved back into the js folder
• Jumping to class function line numbers from the code inspector in the debugger is out of order as the define/require directive conversions moves the line numbers
• Currently this will only work with transpilation back to ES5 as calling an ES6 constructor function without the new keyword is not allowed - which is an essential part of the way Backbone constructs classes.

Added

• rollup as the bundler
• babel is used as the compiler/transpiler through the rollup plugin
• babel-plugin-transform-amd-to-es6 (custom made) to convert AMD modules to ES6 modules
• rollup compilation cache lives at <%= outputdir %>/.cache to speed up compilation times
• jsconfig.json to support intellisense
• grunt flag --disable-cache to disable the cache and recompile from scratch

These plugins achieve react templating and integration in the same way we have been doing with handlebars:

• babel-plugin-transform-react-templates (custom made) register templates from filenames
• html-react-parser parse html into react nodes, like triples braces in handlebars
• plugin-transform-react-jsx jsx compiler
• react client-side react node handler
• react-dom client-side react node renderer

Removed

• requirejs as bundler in grunt
• babel grunt task is now integrated into the rollup process
• requirejs config.js file has been moved to the javascript grunt task config

Fixed

• QuestionView has two different return statements, so cannot resolve to one export default directive

Testing

• Use master of all plugins and accordion branch issue/2824-jsx by running:

git clone https://github.com/adaptlearning/adapt_framework 2824
cd 2824
git checkout issue/2824-jsx
adapt devinstall && npm install
cd src/components/adapt-contrib-accordion
git checkout issue/2824-jsx
cd ../../../
grunt dev

Example

Shows fast compilation times, import/export, debugging and require functioning with an ES6 module in the client-side:

Templates

Supports react 'templates' as near as I could get it to our current handlebars templates - separate, override-able etc. This change does not require a wholesale switch to React views but instead uses our current Backbone views and React as a templating engine. This means that some of the usual functionality of React views, such as the state object, aren't used to cause view re-render, instead the this.changed() function should be called to re-render a Backbone View with a React template.

Here are a few reasons for using React as a templating engine only:

1. Our entire architecture uses Backbone events heavily - which React views don't support.
2. Many of our bugs arise from jQuery DOM manipulation and using React to manage the DOM manipulation removes those bugs whilst introducing much more flexibility in the view <> state updates, this is as each manipulation is now automated and no longer needs to be coded by hand.
3. Introducting jsx as a templating engine allows the upskilling requirement to be confined to templates only, which should be easier and less daunting for developers to confront.
4. We will be able to convert to React at our leisure by not mandating a wholesale view layer rewrite.
5. As React will be a part of the architecture we can better experiment with dropping Backbone as a large part of the architectural work is already complete.

Usage

A React version of the accordion lives here pr / branch

// This is an example template file in **/templates/**/name.jsx
// It will get registered in Adapt by filename as handlebars templates currently do
// Templates will override from theme, menu, extension, component as usual
// There is no partials distinction with the react templates, they are all just templates which can be called from one another

export default function (model, view) {
  return <div></div> // React component
};

// This is a template file in components/adapt-contrib-accordion/templates/accordion.jsx

// These functions help handlebars integration
import Adapt from 'core/js/adapt';
import { 
  compile, // Compile handlebars into html: compile(template, data);
  classes, // Helper for joining and filtering classes
  templates, // Lookup other react templates: templates[name](model, view);
  html, // Render html as react html:  html(`<div>new div</div>`); or html(compile('{{#if _prop}}<div>new div</div>{{/if}'));
  partial // Use a handlebars partial: partial(name, data);
} from 'core/js/reactHelpers';

export default function (model, view) {
  const data = model.toJSON();
  data._globals = Adapt.course.get('_globals');
  return <div className="component__inner accordion__inner">
    {templates.component(model, view)}
    <div className="component__widget accordion__widget">
      {data._items.map(({ _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => {
        return <div key={_index} className={classes([
              "accordion__item",
              _graphic.src && 'has-image',
              _classes && _classes
          ])} data-index={_index}>
          <button onClick={view.onClick.bind(view)} id={`${data._id}-${index}-accordion-button`} className={classes([
            'accordion__item-btn',
            'js-toggle-item',
            _isVisited && 'is-visited',
            _isActive ? 'is-open is-selected' : 'is-closed'
          ])} aria-expanded={_isActive ? 'true' : 'false'}>
            <div className="accordion__item-btn-inner">
              <div className="accordion__item-icon">
                <div className="icon"></div>
              </div>
              <div className="accordion__item-title">
                <div className="accordion__item-title-inner">
                  {html(title)}
                </div>
              </div>
            </div>
          </button>
          <div className="accordion__item-content" role="region" aria-labelledby={`${data._id}-${index}-accordion-button`}>
            <div className="accordion__item-content-inner">
              {body &&
              <div className="accordion__item-body">
                <div className="accordion__item-body-inner">
                  {html(compile(body))}
                </div>
              </div>
              }
              {_graphic.src &&
              <div className={classes([
                  'accordion__item-image-container',
                  _graphic.attribution && 'has-attribution'
              ])}>
                <img className="accordion__item-image" src={_graphic.src} aria-label={_graphic.alt} aria-hidden={_graphic.alt ? 'true' : 'false'} />
                {_graphic.attribution &&
                <div className="component__attribution accordion__attribution">
                  <div className="component__attribution-inner accordion__attribution-inner">
                    {html(_graphic.attribution)}
                  </div>
                </div>
                }
              </div>
              }
            </div>
          </div>
        </div>
      })}
    </div>
  </div>
}

// Example from accordion.
// adaptView is extended to support react templates, so all Adapt views can use react template as below.

import ComponentView from 'core/js/views/componentView';

class AccordionView extends ComponentView {

  preRender() {
    this.listenTo(this.model.getChildren(), {
      'all': this.changed // call changed to rerender
    });
  }

  /** missing code */

}

AccordionView.template = 'accordion.jsx'; // Just update the template name to use the react template

export default AccordionView;

You can see the core templates are using react versions https://github.com/adaptlearning/adapt_framework/tree/issue/2824-jsx/src/core/templates which means you can update the models for page, article and block on the fly and the views will update on the page:

var Adapt = require('core/js/adapt'); 
Adapt.findById('co-05').set('displayTitle', 'new title');
Adapt.findById('a-05').set('displayTitle', 'testing');
Adapt.findById('b-35').set('body', 'testing');

Release note

Remove page.jsx, article.jsx and block.jsx before merging as these are likely to have larger impacts on course content that should be avoided in the short-term. We should aim for component level react views to start.

[brian-learningpool]

Great work!

[tomgreenfield]

As discussed, please fix when undefined is passed.

[oliverfoster]

done in 9b3a7b0

[tomgreenfield]

Could this accept an array?

[oliverfoster]

done in 9b3a7b0

[oliverfoster]

updated core classes to match in 327a793

[lc-alexanderbenesch]

code 👍
testing 👍

[oliverfoster]

@tomgreenfield Just waiting on you before I remove the page, article and block react templates.

[chucklorenz]

@olivermartinfoster per our 16/09 chat,
Console error after running grunt build and grunt server:
HTMLReactParser is not defined

[oliverfoster]

Will rebase this against #2923 once that pr is accepted

[oliverfoster]

Replaced with #2963