From bc31135c2df6180dee4671230a44d12af52dbae0 Mon Sep 17 00:00:00 2001
From: Malar Kannan <malar@avaz.in>
Date: Tue, 18 Jul 2017 15:54:19 +0530
Subject: [PATCH] using webpack dev server

---
 scripts/flask.js  | 218 ++++++++++++++++++++++++----------------------
 src/LexEdit.tsx   |   6 +-
 src/LexEditor.tsx |   5 +-
 walle-server.py   |   9 ++
 4 files changed, 132 insertions(+), 106 deletions(-)

diff --git a/scripts/flask.js b/scripts/flask.js
index 48826f4..7cbc409 100644
--- a/scripts/flask.js
+++ b/scripts/flask.js
@@ -54,62 +54,76 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 
 // First, read the current file sizes in build directory.
 // This lets us display how much they changed later.
-measureFileSizesBeforeBuild(paths.appBuild)
-  .then(previousFileSizes => {
-    // Remove all content but keep the directory so that
-    // if you're in it, you don't end up in Trash
-    // fs.copySync
-    fs.emptyDirSync(paths.appBuild);
-    fs.ensureSymlink(paths.appPng,path.resolve(paths.appBuild,'png'));
-    // Merge with the public folder
-    copyPublicFolder();
-    // Start the webpack build
-    return build(previousFileSizes);
-  })
-  .then(
-    ({ stats, previousFileSizes, warnings }) => {
-      if (warnings.length) {
-        console.log(chalk.yellow('Compiled with warnings.\n'));
-        console.log(warnings.join('\n\n'));
-        console.log(
-          '\nSearch for the ' +
-            chalk.underline(chalk.yellow('keywords')) +
-            ' to learn more about each warning.'
-        );
-        console.log(
-          'To ignore, add ' +
-            chalk.cyan('// eslint-disable-next-line') +
-            ' to the line before.\n'
-        );
-      } else {
-        console.log(chalk.green('Compiled successfully.\n'));
-      }
-
-      console.log('File sizes after gzip:\n');
-      printFileSizesAfterBuild(stats, previousFileSizes);
-      console.log();
-      child_process.spawn('python',['walle-server.py'],{
-        stdio:'inherit'
-      });
-      const appPackage = require(paths.appPackageJson);
-      const publicUrl = paths.publicUrl;
-      const publicPath = config.output.publicPath;
-      const buildFolder = path.relative(process.cwd(), paths.appBuild);
-      printHostingInstructions(
-        appPackage,
-        publicUrl,
-        publicPath,
-        buildFolder,
-        useYarn
-      );
-    },
-    err => {
-      console.log(chalk.red('Failed to compile.\n'));
-      console.log((err.message || err) + '\n');
-      process.exit(1);
-    }
-  );
-
+// measureFileSizesBeforeBuild(paths.appBuild)
+//   .then(previousFileSizes => {
+//     // Remove all content but keep the directory so that
+//     // if you're in it, you don't end up in Trash
+//     // fs.copySync
+//     fs.emptyDirSync(paths.appBuild);
+//     fs.ensureSymlink(paths.appPng,path.resolve(paths.appBuild,'png'));
+//     // Merge with the public folder
+//     copyPublicFolder();
+//     // Start the webpack build
+//     return build(previousFileSizes);
+//   })
+//   .then(
+//     ({ stats, previousFileSizes, warnings }) => {
+//       if (warnings.length) {
+//         console.log(chalk.yellow('Compiled with warnings.\n'));
+//         console.log(warnings.join('\n\n'));
+//         console.log(
+//           '\nSearch for the ' +
+//             chalk.underline(chalk.yellow('keywords')) +
+//             ' to learn more about each warning.'
+//         );
+//         console.log(
+//           'To ignore, add ' +
+//             chalk.cyan('// eslint-disable-next-line') +
+//             ' to the line before.\n'
+//         );
+//       } else {
+//         console.log(chalk.green('Compiled successfully.\n'));
+//       }
+//
+//       console.log('File sizes after gzip:\n');
+//       printFileSizesAfterBuild(stats, previousFileSizes);
+//       console.log();
+//       startWebPackDevServer(()=>{
+//         child_process.spawn('python',['walle-server.py'],{
+//           stdio:'inherit'
+//         });
+//       });
+//
+//       // const appPackage = require(paths.appPackageJson);
+//       // const publicUrl = paths.publicUrl;
+//       // const publicPath = config.output.publicPath;
+//       // const buildFolder = path.relative(process.cwd(), paths.appBuild);
+//       // printHostingInstructions(
+//       //   appPackage,
+//       //   publicUrl,
+//       //   publicPath,
+//       //   buildFolder,
+//       //   useYarn
+//       // );
+//     },
+//     err => {
+//       console.log(chalk.red('Failed to compile.\n'));
+//       console.log((err.message || err) + '\n');
+//       process.exit(1);
+//     }
+//   );
+fs.emptyDirSync(paths.appBuild);
+fs.ensureSymlink(paths.appPng,path.resolve(paths.appBuild,'png'));
+// Merge with the public folder
+copyPublicFolder();
+startWebPackDevServer(()=>{
+  child_process.spawn('webpack',['--watch','--config','config/webpack.config.flask.js'],{
+    stdio:'inherit'
+  });
+  child_process.spawn('python',['walle-server.py'],{
+    stdio:'inherit'
+  });
+});
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
   console.log('Creating an optimized production build...');
@@ -156,49 +170,49 @@ function copyPublicFolder() {
 
 // Tools like Cloud9 rely on this.
 
-// function startWebPackDevServer(){
-//   const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-//   const HOST = process.env.HOST || '0.0.0.0';
-//
-//   // We attempt to use the default port but if it is busy, we offer the user to
-//   // run on a different port. `detect()` Promise resolves to the next free port.
-//   choosePort(HOST, DEFAULT_PORT)
-//     .then(port => {
-//       if (port == null) {
-//         // We have not found a port.
-//         return;
-//       }
-//       const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-//       const appName = require(paths.appPackageJson).name;
-//       const urls = prepareUrls(protocol, HOST, port);
-//       // Create a webpack compiler that is configured with custom messages.
-//       const compiler = createCompiler(webpack, config, appName, urls, useYarn);
-//       // Load proxy config
-//       const proxySetting = require(paths.appPackageJson).proxy;
-//       const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
-//       // Serve webpack assets generated by the compiler over a web sever.
-//       const serverConfig = createDevServerConfig(
-//         proxyConfig,
-//         urls.lanUrlForConfig
-//       );
-//       const devServer = new WebpackDevServer(compiler, serverConfig);
-//       devServer.listen(port, HOST, err => {
-//         if (err) {
-//           return console.log(err);
-//         }
-//         if (isInteractive) {
-//           clearConsole();
-//         }
-//         child_process.exec('python',['walle-server.py'],{
-//           stdio:'inherit'
-//         });
-//       });
-//       // openBrowser(urls.localUrlForBrowser);
-//     })
-//     .catch(err => {
-//       if (err && err.message) {
-//         console.log(err.message);
-//       }
-//       process.exit(1);
-//     });
-// }
+function startWebPackDevServer(pyServer){
+  const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+  const HOST = process.env.HOST || '0.0.0.0';
+
+  // We attempt to use the default port but if it is busy, we offer the user to
+  // run on a different port. `detect()` Promise resolves to the next free port.
+  choosePort(HOST, DEFAULT_PORT)
+    .then(port => {
+      if (port == null) {
+        // We have not found a port.
+        return;
+      }
+      const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+      const appName = require(paths.appPackageJson).name;
+      const urls = prepareUrls(protocol, HOST, port);
+      // Create a webpack compiler that is configured with custom messages.
+      const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+      // Load proxy config
+      const proxySetting = require(paths.appPackageJson).proxy;
+      const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+      // Serve webpack assets generated by the compiler over a web sever.
+      const serverConfig = createDevServerConfig(
+        proxyConfig,
+        urls.lanUrlForConfig
+      );
+      const devServer = new WebpackDevServer(compiler, serverConfig);
+      devServer.listen(port, HOST, err => {
+        if (err) {
+          return console.log(err);
+        }
+        // if (isInteractive) {
+        //   clearConsole();
+        // }
+        const urls = prepareUrls(protocol, HOST, '5000');
+        pyServer();
+        openBrowser(urls.localUrlForBrowser);
+      });
+      // openBrowser(urls.localUrlForBrowser);
+    })
+    .catch(err => {
+      if (err && err.message) {
+        console.log(err.message);
+      }
+      process.exit(1);
+    });
+}
diff --git a/src/LexEdit.tsx b/src/LexEdit.tsx
index d3b14a6..f392278 100644
--- a/src/LexEdit.tsx
+++ b/src/LexEdit.tsx
@@ -26,7 +26,7 @@ export class LexEdit extends React.Component<any, any> {
       let defaultText = _.get<any>(li, lens, '');
       let originalText = _.get<any>(this.props.lexItem, lens, '');
       let options = this.props.fieldMetaMap[field].options;
-      let changed = defaultText !== originalText;
+      let changed = defaultText !== originalText && this.props.existing;
       // console.log('changed:',changed);
       let sh = (e: any) => {
         let eventData = {};
@@ -54,11 +54,13 @@ export class LexEdit extends React.Component<any, any> {
               <Button
                 floated="right"
                 icon="download"
+                size="tiny"
                 onClick={(e, d) => this.handleOnLoad(d)}
               />
               <Button
                 floated="right"
                 icon="undo"
+                size="tiny"
                 onClick={(e, d) => this.handleOnUndo(d)}
               />
             </Card.Header>
@@ -89,7 +91,7 @@ export class LexEdit extends React.Component<any, any> {
     this.setState({ lexItem });
   }
   private handleOnLoad(event: any) {
-    // this.props.load()
+    // this.props.load(this.state.lexItem)
     console.log('loading from server');
   }
 
diff --git a/src/LexEditor.tsx b/src/LexEditor.tsx
index b6d9085..63c25ff 100644
--- a/src/LexEditor.tsx
+++ b/src/LexEditor.tsx
@@ -53,6 +53,7 @@ class LexSearch extends React.Component<any, any> {
           placeholder="Search input"
           dir="auto"
           value={this.props.searchState.searchValue}
+          icon="filter"
           onChange={(e, d) => this.handleChange(d, false)}
         />
       </div>
@@ -86,7 +87,7 @@ function LexMatches(params: any) {
             key={uniqueKey}
             lexItem={mObj}
             selectionMeta={props.selectionMeta}
-            new_entry={false}
+            existing={true}
           />
         );
       });
@@ -98,7 +99,7 @@ function LexMatches(params: any) {
           key={props.searchText}
           lexItem={addProps}
           selectionMeta={props.selectionMeta}
-          new_entry={true}
+          existing={false}
         />
       );
       editEntries.push(addEntry);
diff --git a/walle-server.py b/walle-server.py
index f669894..fe804e5 100644
--- a/walle-server.py
+++ b/walle-server.py
@@ -1,5 +1,6 @@
 from flask import Flask,send_from_directory
 app = Flask(__name__,static_url_path='',static_folder='build')
+import requests
 
 @app.route('/')
 def walle_index():
@@ -10,5 +11,13 @@ def walle_index():
 def walle_test():
     return "test"
 
+# hmr streaming
+# from flask import Response,stream_with_context
+# @app.route('/sockjs-node/<path:url>',methods=['GET','POST'])
+# def walle_hmr(url):
+#     webpack_server = 'http://localhost:3000/sockjs-node/'
+#     req = requests.get(webpack_server+url, stream = True)
+#     return Response(stream_with_context(req.iter_content()))
+
 if __name__ == '__main__':
     app.run(debug=True)