feat: update generator-td to latest deps (#768)

Author: redonkulus

.changeset/config.json

@@ -5,7 +5,7 @@
   "fixed": [],
   "linked": [],
   "access": "public",
-  "baseBranch": "main",
+  "baseBranch": "master",
   "updateInternalDependencies": "patch",
   "ignore": []
 }

.changeset/new-panthers-sparkle.md

@@ -0,0 +1,5 @@
+---
+'generator-fluxible': major
+---
+
+feat: upgrade to latest yeoman packages

.gitignore

@@ -8,3 +8,4 @@ node_modules
 .jshintrc
 *.sh
 examples/*/build
+temp/

package.json

@@ -40,7 +40,9 @@
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "shelljs": "^0.8.0",
-    "yargs": "^17.1.0"
+    "yargs": "^17.1.0",
+    "yeoman-assert": "^3.1.1",
+    "yeoman-test": "^6.3.0"
   },
   "pre-commit": [
     "dev:lint",

packages/generator-fluxible/README.md

@@ -17,6 +17,7 @@ npm install -g generator-fluxible
 Finally, initiate the generator:
 
 ```bash
+cd new-project
 yo fluxible
 ```
 
@@ -28,18 +29,3 @@ the server will be reloaded and the bundle will be rebuilt.
 
 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.
-
-### 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
-the page. To disable, type the following: `fluxibleDebug.disable();`.

packages/generator-fluxible/app/index.js

@@ -4,28 +4,27 @@
  */
 
 'use strict';
-var yeoman = require('yeoman-generator');
-var chalk = require('chalk');
-var yosay = require('yosay');
-var str = require('underscore.string');
 
-module.exports = yeoman.generators.Base.extend({
-    initializing: function () {
-        this.pkg = require('../package.json');
-    },
+const Generator = require('yeoman-generator');
+const chalk = require('chalk');
+const yosay = require('yosay');
+const str = require('underscore.string');
 
-    prompting: function () {
-        var done = this.async();
+module.exports = class extends Generator {
+    constructor(args, opts) {
+        super(args, opts);
+        this.pkg = require('../package.json');
+    }
 
+    async prompting() {
         this.log(
             yosay(
                 'Welcome to the riveting ' +
                     chalk.red('Fluxible') +
                     ' generator!'
             )
         );
-
-        var prompts = [
+        this.answers = await this.prompt([
             {
                 type: 'input',
                 name: 'name',
@@ -35,48 +34,20 @@ module.exports = yeoman.generators.Base.extend({
                     return !!input;
                 },
             },
-        ];
-
-        this.prompt(
-            prompts,
-            function (props) {
-                this.displayName = props.name;
-                this.name = str.slugify(props.name);
-                this.buildSystem = str.slugify(props.buildSystem);
-                done();
-            }.bind(this)
+        ]);
+
+        this.displayName = this.answers.name;
+        this.name = str.slugify(this.answers.name);
+        this.buildSystem = str.slugify(this.answers.buildSystem);
+    }
+
+    writing() {
+        this.fs.copyTpl(
+            this.templatePath(),
+            this.destinationRoot(),
+            this,
+            null,
+            { globOptions: { dot: true } }
         );
-    },
-
-    writing: {
-        config: function () {
-            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('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(
-                'webpack.config.js',
-                'webpack.config.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);
-        },
-    },
-
-    install: function () {
-        this.installDependencies({
-            npm: true,
-            bower: false,
-            skipInstall: this.options['skip-install'],
-        });
-    },
-});
+    }
+};

packages/generator-fluxible/app/templates/_gitignore

@@ -1,21 +1,13 @@
 /*global document, window */
 
 import ReactDOM from 'react-dom';
-import debug from 'debug';
 import { createElementWithContext } from 'fluxible-addons-react';
 import app from './app';
 
-const debugClient = debug('<%= name %>');
 const dehydratedState = window.App; // Sent from the server
 
 window.React = ReactDOM; // For chrome dev tool support
 
-// expose debug object to browser, so that it can be enabled/disabled from browser:
-// https://github.com/visionmedia/debug#browser-support
-window.fluxibleDebug = debug;
-
-debugClient('rehydrating app');
-
 // pass in the dehydrated server state from server.js
 app.rehydrate(dehydratedState, (err, context) => {
     if (err) {
@@ -24,8 +16,5 @@ app.rehydrate(dehydratedState, (err, context) => {
     window.context = context;
     const mountNode = document.getElementById('app');
 
-    debugClient('React Rendering');
-    ReactDOM.hydrate(createElementWithContext(context), mountNode, () =>
-        debugClient('React Rendered')
-    );
+    ReactDOM.hydrate(createElementWithContext(context), mountNode);
 });

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

@@ -13,7 +13,6 @@
     "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",

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

@@ -11,16 +11,13 @@ import bodyParser from 'body-parser';
 import path from 'path';
 import serialize from 'serialize-javascript';
 import { navigateAction } from 'fluxible-router';
-import debugLib from 'debug';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import app from './app';
 import HtmlComponent from './components/Html';
 import { createElementWithContext } from 'fluxible-addons-react';
 const env = process.env.NODE_ENV;
 
-const debug = debugLib('<%= name %>');
-
 const server = express();
 server.use('/public', express.static(path.join(__dirname, 'public')));
 server.use(compression());
@@ -29,7 +26,6 @@ server.use(bodyParser.json());
 server.use((req, res, next) => {
     const context = app.createContext();
 
-    debug('Executing navigate action');
     context.getActionContext().executeAction(
         navigateAction,
         {
@@ -46,11 +42,9 @@ server.use((req, res, next) => {
                 return;
             }
 
-            debug('Exposing context state');
             const exposed =
                 'window.App=' + serialize(app.dehydrate(context)) + ';';
 
-            debug('Rendering Application component into html');
             const markup = ReactDOMServer.renderToString(
                 createElementWithContext(context)
             );
@@ -62,7 +56,6 @@ server.use((req, res, next) => {
             });
             const html = ReactDOMServer.renderToStaticMarkup(htmlElement);
 
-            debug('Sending markup');
             res.type('html');
             res.write('<!DOCTYPE html>' + html);
             res.end();

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

@@ -27,14 +27,14 @@
     "fluxible"
   ],
   "dependencies": {
-    "chalk": "^1.0.0",
+    "chalk": "^4.0.0",
     "prop-types": "^15.7.2",
     "underscore.string": "^3.0.2",
-    "yeoman-generator": "^0.20.1",
-    "yo": ">=1.0.0",
+    "yeoman-generator": "^5.7.0",
+    "yo": "^4.0.0",
     "yosay": "^2.0.2"
   },
   "peerDependencies": {
-    "yo": ">=1.0.0"
+    "yo": "^4.0.0"
   }
 }

packages/generator-fluxible/package.json

@@ -2,30 +2,43 @@
  * Copyright 2015, Yahoo! Inc.
  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
  */
-/*globals describe,before,it*/
 
-var path = require('path');
-var assert = require('yeoman-generator').assert;
-var helpers = require('yeoman-generator').test;
-var os = require('os');
+const path = require('path');
+const helpers = require('yeoman-test');
+const assert = require('yeoman-assert');
+const TMP_DIR = process.env.TMP_DIR || __dirname;
+const tempDir = path.join(TMP_DIR, 'temp');
 
 describe('generator-fluxible', function () {
-    describe('app', function () {
-        beforeAll(function (done) {
-            helpers
-                .run(path.join(__dirname, '../../app'))
-                .inDir(path.join(os.tmpdir(), './temp-test'))
-                .withOptions({ 'skip-install': true })
-                .on('end', done);
-        });
+    beforeAll(function (done) {
+        helpers.testDirectory(tempDir, (err) => {
+            if (err) {
+                return done(err);
+            }
 
-        it('creates files', function () {
-            assert.file([
-                'package.json',
-                'babel.config.js',
-                'app.js',
-                'components/Application.js',
-            ]);
+            this.lib = helpers.createGenerator(
+                'fluxible',
+                [[require('../../app'), 'fluxible']],
+                'fluxy',
+                { 'skip-install': true }
+            );
+            done();
         });
     });
+
+    it('creates files', function () {
+        return helpers
+            .run(path.join(__dirname, '../../app'))
+            .withOptions(test.options)
+            .withArguments(['fluxy'])
+            .withPrompts(Object.assign({}, test.prompts, { name: true }))
+            .then(function () {
+                assert.file([
+                    'package.json',
+                    'babel.config.js',
+                    'app.js',
+                    'components/Application.js',
+                ]);
+            });
+    });
 });