generator: update generated app dependencies (#690)

packages/generator-fluxible/README.md

@@ -20,28 +20,26 @@ Finally, initiate the generator:
 yo fluxible
 ```
 
-During development, execute `npm run dev` to initiate webpack-dev-server 
-(with react-hot-loader support) and your application's server using nodemon. 
-Browse to `http://localhost:3000` to see a very simple Fluxible site with 
+During development, execute `npm run dev` to initiate webpack-dev-server
+(with react-hot-loader support) and your application's server using nodemon.
+Browse to `http://localhost:3000` to see a very simple Fluxible site with
 server-side rendering and client-side navigation. When you change files,
-the client will be hot-reloaded (with the exception of stores) and your
-application server will restart so that you can see the server-side changes
-on the next refresh.
+the server will be reloaded and the bundle will be rebuilt.
 
-For other environments, make sure your application is built using 
+For other environments, make sure your application is built using
 `npm run build` and then run `npm start`.
 
 ## Debugging
 
-Fluxible uses [debug](https://www.npmjs.com/package/debug) to expose debugging 
-information on the server and client. 
+Fluxible uses [debug](https://www.npmjs.com/package/debug) to expose debugging
+information on the server and client.
 
 ### Server
 
 Start the application with the `DEBUG` environment variable: `DEBUG=* grunt`.
 
 ### Client
 
-`fluxibleDebug` is exposed to the `window` object to manage debugging. You can 
-enable it via the browser console: `fluxibleDebug.enable('*');` then refresh 
+`fluxibleDebug` is exposed to the `window` object to manage debugging. You can
+enable it via the browser console: `fluxibleDebug.enable('*');` then refresh
 the page. To disable, type the following: `fluxibleDebug.disable();`.

packages/generator-fluxible/app/index.js

@@ -41,28 +41,21 @@ module.exports = yeoman.generators.Base.extend({
 
     writing: {
         config: function () {
-            this.template('.babelrc', '.babelrc', this.context);
-            this.template('.editorconfig', '.editorconfig', this.context);
+            this.template('babel.config.js', 'babel.config.js', this.context);
             // .gitignore is renamed by npm to .npmignore, so use underscore
             this.template('_gitignore', '.gitignore', this.context);
-            this.template('.eslintrc', '.eslintrc', this.context);
             this.template('package.json', 'package.json', this.context);
         },
 
         projectfiles: function () {
             this.template('app.js', 'app.js', this.context);
             this.template('client.js', 'client.js', this.context);
             this.template('server.js', 'server.js', this.context);
-            this.template('start.js', 'start.js', this.context);
             this.template('webpack.config.js', 'webpack.config.js', this.context);
-            this.template('webpack.config.production.js', 'webpack.config.production.js', this.context);
-            this.template('webpack-dev-server.js', 'webpack-dev-server.js', this.context);
             this.directory('actions', 'actions', this.context);
             this.directory('components', 'components', this.context);
             this.directory('configs', 'configs', this.context);
             this.directory('stores', 'stores', this.context);
-            // Webpack dev server needs this folder to exist before starting
-            this.template('_buildgitignore', 'build/js/.gitignore', this.context);
         }
     },
 

packages/generator-fluxible/app/templates/_gitignore

@@ -1,2 +1,3 @@
+dist
 node_modules
 *.log

packages/generator-fluxible/app/templates/app.js

@@ -5,11 +5,11 @@ import RouteStore from './stores/RouteStore';
 
 // create new fluxible instance
 const app = new Fluxible({
-    component: Application
+    component: Application,
 });
 
 // register stores
 app.registerStore(RouteStore);
 app.registerStore(ApplicationStore);
 
-module.exports = app;
+export default app;

packages/generator-fluxible/app/templates/babel.config.js

@@ -0,0 +1,14 @@
+const isNodeTarget = (api) =>
+    api.caller((caller) => caller && caller.target === 'node');
+
+module.exports = (api) => ({
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                targets: isNodeTarget(api) ? { node: 'current' } : 'defaults',
+            },
+        ],
+        '@babel/preset-react',
+    ],
+});

packages/generator-fluxible/app/templates/client.js

@@ -25,9 +25,7 @@ app.rehydrate(dehydratedState, (err, context) => {
     const mountNode = document.getElementById('app');
 
     debugClient('React Rendering');
-    ReactDOM.render(
-        createElementWithContext(context),
-        mountNode,
-        () => debugClient('React Rendered')
+    ReactDOM.hydrate(createElementWithContext(context), mountNode, () =>
+        debugClient('React Rendered')
     );
 });

packages/generator-fluxible/app/templates/components/Html.js

@@ -2,29 +2,33 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ApplicationStore from '../stores/ApplicationStore';
 
-function Html(props) {
-    return (
-        <html>
-            <head>
-                <meta charSet="utf-8" />
-                <title>{props.context.getStore(ApplicationStore).getPageTitle()}</title>
-                <meta name="viewport" content="width=device-width, user-scalable=no" />
-                <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css" />
-            </head>
-            <body>
-                <div id="app" dangerouslySetInnerHTML={{__html: props.markup}}></div>
-                <script dangerouslySetInnerHTML={{__html: props.state}}></script>
-                <script src={'/public/js/' + props.clientFile}></script>
-            </body>
-        </html>
-    );
-}
+const Html = ({ context, markup, state, clientFile }) => (
+    <html>
+        <head>
+            <meta charSet="utf-8" />
+            <title>{context.getStore(ApplicationStore).getPageTitle()}</title>
+            <meta
+                name="viewport"
+                content="width=device-width, user-scalable=no"
+            />
+            <link
+                rel="stylesheet"
+                href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"
+            />
+        </head>
+        <body>
+            <div id="app" dangerouslySetInnerHTML={{ __html: markup }}></div>
+            <script dangerouslySetInnerHTML={{ __html: state }}></script>
+            <script src={`/public/${clientFile}`}></script>
+        </body>
+    </html>
+);
 
 Html.propTypes = {
     clientFile: PropTypes.string,
     context: PropTypes.object,
     markup: PropTypes.string,
-    state: PropTypes.string
+    state: PropTypes.string,
 };
 
 export default Html;

packages/generator-fluxible/app/templates/package.json

@@ -1,48 +1,36 @@
 {
-  "name": "<%= name %>",
-  "version": "0.0.0",
-  "private": true,
-  "main": "start.js",
-  "scripts": {
-    "build": "webpack & webpack --config webpack.config.production.js",
-    "dev": "node webpack-dev-server.js",
-    "lint": "eslint ./*.js ./**/*.js",
-    "start": "node start.js"
-  },
-  "dependencies": {
-    "babel": "^6.5.2",
-    "babel-core": "^6.6.4",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-register": "^6.6.0",
-    "body-parser": "^1.6.4",
-    "compression": "^1.5.1",
-    "cookie-parser": "^1.3.3",
-    "csurf": "^1.6.3",
-    "debug": "^2.0.0",
-    "express": "^4.3.2",
-    "express-state": "^1.2.0",
-    "fluxible": "^1.0.0",
-    "fluxible-addons-react": "^0.2.0",
-    "fluxible-plugin-fetchr": "^0.3.0",
-    "fluxible-router": "^0.4.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "serialize-javascript": "^4.0.0",
-    "serve-favicon": "^2.1.6"
-  },
-  "devDependencies": {
-    "babel-eslint": "^10.0.0",
-    "babel-loader": "^6.2.4",
-    "bundle-loader": "^0.5.0",
-    "eslint": "^6.0.0",
-    "eslint-plugin-babel": "^5.0.0",
-    "eslint-plugin-react": "^7.0.0",
-    "json-loader": "^0.5.1",
-    "nodemon": "^1.2.1",
-    "react-hot-loader": "^1.2.8",
-    "shelljs": "^0.6.0",
-    "webpack": "^1.12.4",
-    "webpack-dev-server": "^1.6.5"
-  }
+    "name": "<%= name %>",
+    "version": "0.0.0",
+    "private": true,
+    "main": "dist/server.js",
+    "scripts": {
+        "build": "NODE_ENV=production webpack",
+        "dev": "npm run dev:browser & npm run dev:server",
+        "dev:browser": "NODE_ENV=development webpack --watch --no-stats",
+        "dev:server": "NODE_ENV=development nodemon",
+        "start": "node ."
+    },
+    "dependencies": {
+        "body-parser": "^1.19.0",
+        "compression": "^1.7.4",
+        "debug": "^4.3.1",
+        "express": "^4.17.1",
+        "fluxible": "^1.0.0",
+        "fluxible-addons-react": "^1.0.0-beta.1",
+        "fluxible-plugin-fetchr": "^0.3.11",
+        "fluxible-router": "^2.0.0-beta.9.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "serialize-javascript": "^5.0.1"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.13.16",
+        "@babel/preset-env": "^7.13.15",
+        "@babel/preset-react": "^7.13.13",
+        "babel-loader": "^8.2.2",
+        "nodemon": "^2.0.7",
+        "webpack": "^5.36.1",
+        "webpack-cli": "^4.6.0",
+        "webpack-node-externals": "^3.0.0"
+    }
 }

packages/generator-fluxible/app/templates/server.js

@@ -10,10 +10,10 @@ import compression from 'compression';
 import bodyParser from 'body-parser';
 import path from 'path';
 import serialize from 'serialize-javascript';
-import {navigateAction} from 'fluxible-router';
+import { navigateAction } from 'fluxible-router';
 import debugLib from 'debug';
 import React from 'react';
-import ReactDOM from 'react-dom/server';
+import ReactDOMServer from 'react-dom/server';
 import app from './app';
 import HtmlComponent from './components/Html';
 import { createElementWithContext } from 'fluxible-addons-react';
@@ -22,45 +22,52 @@ const env = process.env.NODE_ENV;
 const debug = debugLib('<%= name %>');
 
 const server = express();
-server.use('/public', express['static'](path.join(__dirname, '/build')));
+server.use('/public', express['static'](path.join(__dirname, 'public')));
 server.use(compression());
 server.use(bodyParser.json());
 
 server.use((req, res, next) => {
     const context = app.createContext();
 
     debug('Executing navigate action');
-    context.getActionContext().executeAction(navigateAction, {
-        url: req.url
-    }, (err) => {
-        if (err) {
-            if (err.statusCode && err.statusCode === 404) {
-                // Pass through to next middleware
-                next();
-            } else {
-                next(err);
+    context.getActionContext().executeAction(
+        navigateAction,
+        {
+            url: req.url,
+        },
+        (err) => {
+            if (err) {
+                if (err.statusCode && err.statusCode === 404) {
+                    // Pass through to next middleware
+                    next();
+                } else {
+                    next(err);
+                }
+                return;
             }
-            return;
-        }
 
-        debug('Exposing context state');
-        const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';
+            debug('Exposing context state');
+            const exposed =
+                'window.App=' + serialize(app.dehydrate(context)) + ';';
 
-        debug('Rendering Application component into html');
-        const markup = ReactDOM.renderToString(createElementWithContext(context));
-        const htmlElement = React.createElement(HtmlComponent, {
-            clientFile: env === 'production' ? 'main.min.js' : 'main.js',
-            context: context.getComponentContext(),
-            state: exposed,
-            markup: markup
-        });
-        const html = ReactDOM.renderToStaticMarkup(htmlElement);
+            debug('Rendering Application component into html');
+            const markup = ReactDOMServer.renderToString(
+                createElementWithContext(context)
+            );
+            const htmlElement = React.createElement(HtmlComponent, {
+                clientFile: env === 'production' ? 'main.min.js' : 'main.js',
+                context: context.getComponentContext(),
+                state: exposed,
+                markup: markup,
+            });
+            const html = ReactDOMServer.renderToStaticMarkup(htmlElement);
 
-        debug('Sending markup');
-        res.type('html');
-        res.write('<!DOCTYPE html>' + html);
-        res.end();
-    });
+            debug('Sending markup');
+            res.type('html');
+            res.write('<!DOCTYPE html>' + html);
+            res.end();
+        }
+    );
 });
 
 const port = process.env.PORT || 3000;