PROOF-OF-CONCEPT: Externalized React, React-DOM to support React Addons

frol · frol · commit 337fcbdb9ff9 · 2016-11-07T16:08:24.000+02:00
diff --git a/gulpfile.js b/gulpfile.js
@@ -101,6 +101,10 @@ gulp.task('build-dev-client', ['compile-lib', 'compile-client'], () => {
   .pipe(webpack({
     quiet: true,
     output: { filename: 'next-dev.bundle.js' },
+    externals: [{
+      'react': 'var React',
+      'react-dom': 'var ReactDOM'
+    }],
     module: {
       loaders: [
         {
@@ -134,6 +138,10 @@ gulp.task('build-client', ['compile-lib', 'compile-client'], () => {
       }),
       new webpack.webpack.optimize.UglifyJsPlugin()
     ],
+    externals: {
+      'react': 'var React',
+      'react-dom': 'var ReactDOM'
+    },
     module: {
       loaders: [
         {
diff --git a/lib/document.js b/lib/document.js
@@ -10,6 +10,12 @@ export default ({ head, css, html, data, dev, staticMarkup, cdn }) => {
     </head>
     <body>
       <div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
+
+      {/* XXX: This has to be configured somehow! */}
+      <script src='https://unpkg.com/react@15/dist/react-with-addons.js' />
+      <script src='https://unpkg.com/react-dom@15/dist/react-dom.js' />
+      <script src='https://unpkg.com/react-md@0.3.7/dist/react-md.js' />
+
       {staticMarkup ? null : <script dangerouslySetInnerHTML={{ __html: '__NEXT_DATA__ = ' + htmlescape(data) }} />}
       {staticMarkup ? null : createClientScript({ dev, cdn })}
     </body>
diff --git a/package.json b/package.json
@@ -64,6 +64,10 @@
     "path-match": "1.2.4",
     "react": "15.3.2",
     "react-dom": "15.3.2",
+    "react-addons-css-transition-group": "^15.3.2",
+    "react-addons-pure-render-mixin": "^15.3.2",
+    "react-addons-transition-group": "^15.3.2",
+    "react-md": "0.3.7",
     "react-hot-loader": "3.0.0-beta.6",
     "send": "0.14.1",
     "strip-ansi": "3.0.1",
diff --git a/server/build/webpack.js b/server/build/webpack.js
@@ -113,7 +113,14 @@ export default async function createCompiler (dir, { hotReload = false } = {}) {
           {
             alias: {
               'babel-runtime': babelRuntimePath,
-              react: require.resolve('react'),
+              'react': require.resolve('react'),
+
+              // XXX: This shouldn't here, but since external Babel config support is missing,
+              // there is no other way to achieve this. (Even though, `.babelrc` and
+              // `package.json/babel` sections are merged, I couldn't make them work correctly.)
+              'react-md': require.resolve('react-md'),
+              'react-md/lib/Buttons': require.resolve('react-md'),
+
               'next/link': require.resolve('../../lib/link'),
               'next/css': require.resolve('../../lib/css'),
               'next/head': require.resolve('../../lib/head')
@@ -139,13 +146,21 @@ export default async function createCompiler (dir, { hotReload = false } = {}) {
       publicPath: hotReload ? 'http://localhost:3030/' : null
     },
     externals: [
-      'react',
-      'react-dom',
       {
-        [require.resolve('react')]: 'react',
+        [require.resolve('react')]: { commonjs: 'react', commonjs2: 'react', amd: 'react', root: 'React' },
+        [require.resolve('react-dom')]: { commonjs: 'react-dom', commonjs2: 'react-dom', amd: 'react-dom', root: 'ReactDOM' },
+        [require.resolve('react-addons-css-transition-group')]: 'var React.addons.CSSTransitionGroup',
+        [require.resolve('react-addons-transition-group')]: 'var React.addons.TransitionGroup',
+        [require.resolve('react-addons-pure-render-mixin')]: 'var React.addons.PureRenderMixin',
         [require.resolve('../../lib/link')]: 'next/link',
         [require.resolve('../../lib/css')]: 'next/css',
         [require.resolve('../../lib/head')]: 'next/head'
+      },
+
+      // XXX: This also shouldn't be here, but missing external Webpack config support forces me
+      // to patch it here.
+      {
+        [require.resolve('react-md')]: 'var ReactMD'
       }
     ],
     resolve: {
