fix react example for HMR, now UI code will only trigger client refresh

remove modules package from dependencies fix webpack client bundle in case of working without middleware
ardatan · Apr 10, 2018 · 48fcf0e · 48fcf0e
1 parent 5d24f57
commit 48fcf0e
Show file tree

Hide file tree

Showing 16 changed files with 222 additions and 108 deletions.
diff --git a/atmosphere-packages/webpack-dev-middleware/.versions b/atmosphere-packages/webpack-dev-middleware/.versions
@@ -1,4 +1,4 @@
-ardatan:[email protected].1
+ardatan:[email protected].2
 [email protected]
 [email protected]
 [email protected]

diff --git a/atmosphere-packages/webpack-dev-middleware/dev-server.js b/atmosphere-packages/webpack-dev-middleware/dev-server.js
@@ -1,8 +1,8 @@
 if (Meteor.isServer && Meteor.isDevelopment) {
     const path = Npm.require('path');
-
-    const webpack = require('webpack');
-    let allWebpackConfigs = Npm.require('../../../../../../webpack.config.js');
+    const projectPath = path.resolve('.').split(path.sep + '.meteor')[0];
+    const webpack = Npm.require(path.join(projectPath, 'node_modules/webpack'))
+    const allWebpackConfigs = Npm.require(path.join(projectPath, 'webpack.config.js'), 'utf8');
 
     if (!(allWebpackConfigs instanceof Array)) {
         allWebpackConfigs = [allWebpackConfigs];
@@ -21,8 +21,8 @@ if (Meteor.isServer && Meteor.isDevelopment) {
     })
 
     if (webpackConfig && webpackConfig.devServer) {
-        const webpackDevMiddleware = require('webpack-dev-middleware');
         const projectPath = path.resolve('.').split(path.sep + '.meteor')[0];
+        const webpackDevMiddleware = Npm.require(path.join(projectPath, 'node_modules/webpack-dev-middleware'))
 
         webpackConfig.mode = 'development';
         webpackConfig.externals = webpackConfig.externals || [];
@@ -88,7 +88,7 @@ if (Meteor.isServer && Meteor.isDevelopment) {
             }, next)
         });
         if (webpackConfig.devServer.hot) {
-            const webpackHotMiddleware = require('webpack-hot-middleware');
+            const webpackHotMiddleware = Npm.require(path.join(projectPath, 'node_modules/webpack-hot-middleware'))
             WebApp.connectHandlers.use(webpackHotMiddleware(compiler));
         }
     }

diff --git a/atmosphere-packages/webpack-dev-middleware/package.js b/atmosphere-packages/webpack-dev-middleware/package.js
@@ -1,14 +1,13 @@
 Package.describe({
     name: 'ardatan:webpack-dev-middleware',
     debugOnly: true,
-    version: '0.0.1',
+    version: '0.0.2',
     summary: 'Webpack Dev Middleware for Meteor',
     git: 'https://github.com/ardatan/meteor-webpack',
     documentation: '../../README.md'
 });
 
 Package.onUse(function (api) {
     api.use('[email protected]', 'server');
-    api.use('[email protected]', 'server');
     api.addFiles('dev-server.js', 'server');
 });
diff --git a/atmosphere-packages/webpack/.versions b/atmosphere-packages/webpack/.versions
@@ -1,4 +1,2 @@
-ardatan:[email protected].1_1
+ardatan:[email protected].2
 [email protected]
-[email protected]
-[email protected]
diff --git a/atmosphere-packages/webpack/package.js b/atmosphere-packages/webpack/package.js
@@ -1,14 +1,13 @@
 Package.describe({
     name: 'ardatan:webpack',
-    version: '0.0.1_1',
+    version: '0.0.2',
     summary: 'Webpack Integration for Meteor',
     git: 'https://github.com/ardatan/meteor-webpack',
     documentation: '../../README.md'
 });
 
 Package.registerBuildPlugin({
     name: 'webpack',
-    use: ['[email protected]'],
     sources: ['plugin.js'],
     npmDependencies: {
         "jsdom": "11.6.2",

diff --git a/atmosphere-packages/webpack/plugin.js b/atmosphere-packages/webpack/plugin.js
@@ -69,14 +69,14 @@ Plugin.registerCompiler({
             const targetPlatform = targetFile.getArch().includes('web') ? 'web' : 'node';
 
             if (typeof compilerCache[targetPlatform] === 'undefined') {
-                targetFile = inputFiles.find(inputFile => inputFile.getPathInPackage().endsWith('webpack.config.js'));
+                targetFile = inputFiles.find(inputFile => inputFile.getPathInPackage().includes('webpack.config'));
                 this.constructNewCompilerForTarget(targetPlatform, targetFile)
             }
 
             if (compilerCache[targetPlatform] == null) {
                 return;
             } else {
-                targetFile = inputFiles.find(inputFile => inputFile.getPathInPackage().endsWith('webpack.config.js'));
+                targetFile = inputFiles.find(inputFile => inputFile.getPathInPackage().includes('webpack.config.js'));
             }
 
             const compiler = compilerCache[targetPlatform];
@@ -132,26 +132,26 @@ Plugin.registerCompiler({
                 for (const filePath of chunk.files) {
                     const absoluteFilePath = path.join(compiler.outputPath, filePath);
                     let data = '';
-                    if (targetPlatform) {
+                    if (targetPlatform == 'node') {
                         data = 'const require = Npm.require;'
                     }
                     data += outFs.readFileSync(absoluteFilePath, 'utf8');
                     if (chunk.initial && filePath.endsWith('.js')) {
-                        targetFile.addJavaScript({
-                            path: filePath,
-                            hash: chunk.hash,
-                            data,
-                            bare: true
-                        });
-                    } else {
-                        targetFile.addAsset({
-                            path: filePath,
-                            hash: chunk.hash,
-                            data
-                        });
+                            targetFile.addJavaScript({
+                                path: filePath,
+                                hash: chunk.hash,
+                                data,
+                                bare: true
+                            });
+                    } else {                          
+                            targetFile.addAsset({
+                                path: filePath,
+                                hash: chunk.hash,
+                                data
+                            });
+                        }
                     }
                 }
-            }
 
 
         }

diff --git a/examples/react/.babelrc b/examples/react/.babelrc
@@ -3,5 +3,6 @@
     "env",
     "react",
     "stage-2"
-  ]
+  ],
+  "plugins": ["react-hot-loader/babel"]
 }
diff --git a/examples/react/.gitignore b/examples/react/.gitignore
@@ -1 +1,2 @@
 node_modules/
+*.log
diff --git a/examples/react/.meteor/release b/examples/react/.meteor/release
@@ -1 +1 @@
-[email protected]
+[email protected].1
diff --git a/examples/react/.meteor/versions b/examples/react/.meteor/versions
@@ -1,12 +1,12 @@
 [email protected]
 [email protected]
 [email protected]
-[email protected].0
+[email protected].1
 [email protected]
-ardatan:[email protected].1_1
-ardatan:[email protected].1
+ardatan:[email protected].2
+ardatan:[email protected].2
 [email protected]
-[email protected].6
+[email protected].7
 [email protected]
 [email protected]
 [email protected]
@@ -25,7 +25,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-[email protected].6
+[email protected].7
 [email protected]
 [email protected]
 [email protected]
@@ -51,9 +51,9 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-[email protected].5
+[email protected].6
 [email protected]
-[email protected].5
+[email protected].7
 [email protected]
 [email protected]
 [email protected]

diff --git a/examples/react/client/main.jsx b/examples/react/client/main.jsx
@@ -2,11 +2,12 @@ import React from 'react';
 import { Meteor } from 'meteor/meteor';
 import { render } from 'react-dom';
 
-import '../imports/startup/accounts-config';
-import App from '../imports/ui/App';
+import App from './ui/App';
 
 Meteor.startup(() => {
   render(<App />, document.getElementById('render-target'));
 });
 
-module.hot.accept();
+if(module.hot){
+  module.hot.accept();
+}
diff --git a/...es/react/imports/ui/AccountsUIWrapper.jsx → ...les/react/client/ui/AccountsUIWrapper.jsx b/...es/react/imports/ui/AccountsUIWrapper.jsx → ...les/react/client/ui/AccountsUIWrapper.jsx
diff --git a/examples/react/imports/ui/App.jsx → examples/react/client/ui/App.jsx b/examples/react/imports/ui/App.jsx → examples/react/client/ui/App.jsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
 
-import { Tasks } from '../api/tasks';
+import { Tasks } from '../../imports/api/tasks';
 
 import Task from './Task';
 import AccountsUIWrapper from './AccountsUIWrapper';

diff --git a/examples/react/imports/ui/Task.jsx → examples/react/client/ui/Task.jsx b/examples/react/imports/ui/Task.jsx → examples/react/client/ui/Task.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Meteor } from 'meteor/meteor';
 import classnames from 'classnames';
 
-import { Tasks } from '../api/tasks';
+import { Tasks } from '../../imports/api/tasks';
 
 // Task component - represents a single todo item
 export default class Task extends Component {

diff --git a/examples/react/imports/startup/accounts-config.js b/examples/react/imports/startup/accounts-config.js