RollUp Config Improvements for magic-script-components

[joseph-engelmajer]

When building a magic-script-components app, the rollup.config is not well optimized for a react project.

Env:

    "magic-script-components": "2.0.0",
    "magic-script-components-lumin": "1.0.0",
    "magic-script-polyfills": "^2.4.2",
    "rollup": "^1.1.2",
    "rollup-plugin-babel": "^4.3.2",
    "rollup-plugin-commonjs": "https://github.com/creationix/rollup-plugin-commonjs.git",
    "rollup-plugin-node-resolve": "^4.0.0",

Current rollup.config.js:

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

const common = {
  plugins: [
    babel({ exclude: 'node_modules/**' }),
    resolve(),
    commonjs()
  ]
};
 ...
 ...

Steps To Reproduce:

• init new components project using $ magic-script init
• Change lines 2 and 5 of app.js to the following:

import React, { Component } from "react";
import { View, Text } from "magic-script-components";

export default class MyApp extends Component {
  ...
}

• run $ magic-script build -i
• You receive the following error: Error: 'Component' is not exported by node_modules/react/index.js

Why is this important?

It is a very common pattern to use React's named exports. (ie. import React, { Component, CreateRef, Fragment, etc... } from 'react')

The current rollup.config does not allow for such use of React's named exports. This is not only detrimental to the DevX, but many react specific packages make use of this syntax. Adding any of those packages the project with the current rollup.config will cause the build error above.

As an example, you can add react-router to the project ($ npm install --save react-router). Then in app.js, add import { Router } from 'react-router'. Running magic-script install -i will produce the same error as above.

How to resolve

I think the simplest approach is to export all of React's named exports by default in the rollup.config. This is easily accomplished as follows:

import React from 'react'
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

const common = {
  plugins: [
    babel({ exclude: 'node_modules/**' }),
    resolve(),
    commonjs({
      include: 'node_modules/**',
      namedExports: {
        react: Object.keys(React),
      },
    }),
  ],
}
...
...