Webpack development config, remove old dev shell scripts and replace with yarn...

Webpack development config, remove old dev shell scripts and replace with yarn scripts. Add config entries for 'demo' instance of gargantext

.gitignore

@@ -8,11 +8,15 @@
 /.purs*
 /.psa*
 /.spago
-
+bundle.js
+# webpack splays purescript modules in dist. we don't want these to be
+# added, but we do want static assets to be added
 /dist/*
 !/dist/styles/
+/dist/styles/*map
 !/dist/examples/
 !/dist/fonts/
 !/dist/images/
 !/dist/js/
-/dist/styles/*map
\ No newline at end of file
+# css source maps
+/dist/styles/*map

README.md

@@ -93,7 +93,67 @@ And run a repl:
 yarn repl
 ```
 
-## Note to the contributors
+```shell
+yarn install && yarn ps-deps
+```
+
+### Running a dev server
+
+```shell
+yarn dev
+```
+
+This will launch a hot-reloading development server with
+webpack-dev-server.  Visit [localhost:9000](http://localhost:9000/) to
+see the result when the output shows a line like this:
+
+```
+ℹ ｢wdm｣: Compiled successfully.
+```
+
+#### Purescript IDE integration
+
+A `purs ide` connection will be available on port 9002 while the
+development server is running.
+
+A guide to getting set up with the IDE integration is beyond the scope
+of this document.
+
+#### Source maps
+
+Currently broken. Someone please fix them.
+
+### Getting a purescript repl
+
+```shell
+yarn repl
+```
+
+### Building for production
+
+```shell
+yarn build
+```
+
+Note that a production build takes a little while.
+
+### How do I?
+
+#### Change which backend to connect to?
+
+Edit `Config.purs`. Find the function `endConfig'` just after the
+imports and edit `back`. The definitions are not far below, just after
+the definitions of the various `front` options.
+
+Example (using `demo.gargantext.org` as backend):
+
+```
+endConfig' :: ApiVersion -> EndConfig
+endConfig' v = { front : frontRelative
+               , back  : backDemo v  }
+```
+
+### Contributor notes
 
 Please follow CONTRIBUTING.md
 

bower.json

-{
-  "name": "purescript-gargantext",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "output"
-  ],
-  "dependencies": {
-    "purescript-console": "^4.1.0",
-    "purescript-thermite": "https://github.com/np/purescript-thermite.git#cf194360c8ee440978a2b342382fc3fddc65b39e",
-    "purescript-affjax": "^7.0.0",
-    "purescript-routing": "^8.0.0",
-    "purescript-argonaut": "^4.0.1",
-    "purescript-random": "^4.0.0",
-    "purescript-css": "^4.0.0"
-  },
-  "devDependencies": {
-    "purescript-psci-support": "^4.0.0"
-  },
-  "resolutions": {
-    "purescript-react": "exports",
-    "purescript-profunctor-lenses": "^4.0.0"
-  }
-}

build

-#!/bin/bash
-
-yarn install && yarn rebuild-set && yarn install-ps && yarn pulp --psc-package build && yarn pulp --psc-package browserify --to dist/bundle.js

install

-#!/bin/bash
-
-echo "Upgrading nodeJS"
-sudo npm cache clean -f
-sudo npm install -g n
-sudo n stable
-sudo n latest
-
-echo "Installing yarn"
-curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
-echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
-sudo apt update
-sudo apt install yarn
-
-./build
-

package.json

@@ -4,6 +4,7 @@
         "rebuild-set": "spago psc-package-insdhall",
         "install-ps": "psc-package install",
         "build": "pulp --psc-package browserify -t dist/bundle.js",
+        "dev": "webpack-dev-server --env dev --mode development",
         "repl": "pulp --psc-package repl",
         "clean": "rm -Rf output"
     },
@@ -19,6 +20,9 @@
         "react-dom": "^16.8.2",
         "react-sigma": "git://github.com/np/react-sigma.git#shouldComponentUpdate"
     },
+    "eslintConfig": {
+        "extends": "react-app"
+    },
     "devDependencies": {
         "@babel/cli": "^7.1.5",
         "@babel/core": "^7.1.6",
@@ -26,13 +30,30 @@
         "@babel/preset-react": "^7.0.0",
         "@babel/preset-stage-2": "^7.0.0",
         "babel-core": "^7.0.0-bridge",
+        "babel-loader": "^8.0.4",
+        "clean-webpack-plugin": "^1.0.0",
+        "css-loader": "^2.1.0",
         "envify": "^4.1.0",
+        "executive": "^1.6.3",
+        "file-loader": "^3.0.1",
+        "html-loader": "^0.5.5",
+        "html-webpack-plugin": "^4.0.0-beta.5",
         "http-server": "^0.11.1",
+        "mini-css-extract-plugin": "^0.5.0",
         "psc-package": "^3.0.1",
         "pulp": "^12.4.0",
         "purescript": "^0.12.4",
+        "purs-loader": "^3.3.0",
         "react-testing-library": "^6.1.2",
-        "spago": "^0.7.5"
-    },
-    "version": "0.0.0"
+        "source-map-loader": "^0.2.4",
+        "spago": "^0.7.5",
+        "style-loader": "^0.23.1",
+        "uglify-js": "^3.4.9",
+        "uglifyify": "^5.0.1",
+        "webpack": "^4.26.0",
+        "webpack-cli": "^3.1.2",
+        "webpack-dev-server": "^3.1.10",
+        "webpack-node-externals": "^1.7.2",
+        "xhr2": "^0.1.4"
+    }
 }

rebuild

-#!/bin/bash
-
-rm -rf .psc-package output bower_components node_modules
-./build

repl

-#!/bin/bash
-yarn repl

src/Gargantext/Config.purs

@@ -14,13 +14,10 @@ import Data.Argonaut (class DecodeJson, decodeJson, class EncodeJson, encodeJson
 import Data.Foldable (foldMap)
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
-import Data.Map (Map)
-import Data.Map as DM
 import Data.Maybe (Maybe(..), maybe)
-import Data.Tuple (Tuple(..))
 import Gargantext.Router as R
 
-import Gargantext.Types
+import Gargantext.Types (TermList, TermSize(..))
 
 urlPlease :: End -> String -> String
 urlPlease end path = theEnd.baseUrl <> theEnd.prePath <> path
@@ -62,6 +59,11 @@ frontDev = { baseUrl: "https://dev.gargantext.org"
            , prePath: "/#/"
            }
 
+frontDemo :: Config
+frontDemo = { baseUrl: "https://demo.gargantext.org"
+           , prePath: "/#/"
+           }
+
 frontProd :: Config
 frontProd = { baseUrl: "https://gargantext.org"
             , prePath: "/#/"

dist/index.html → src/index.html

@@ -4,13 +4,12 @@
         <meta charset="utf-8"/>
         <title>CNRS GarganText</title>
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-        <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
+        <link href="https://use.fontawesome.com/releases/v5.0.8/styles/all.css" rel="stylesheet">
         <link href="styles/login.min.css" rel="stylesheet">
         <link href="styles/bootstrap.min.css" rel="stylesheet">
-        <!-- <link href="css/lavish-bootstrap.css" rel="stylesheet"> -->
-        <link rel="stylesheet" type="text/css" href="styles/menu.css"/>
+        <!-- <link href="styles/lavish-bootstrap.css" rel="stylesheet"> -->
         <link rel="stylesheet" type="text/css" href="styles/context-menu.css"/>
-        <link rel="stylesheet" type="text/css" href="styles/annotation.css"/>
+        <link rel="stylesheet" type="text/css" href="styles/menu.css"/>
         <link href="styles/Login.css" rel="stylesheet">
         <style>
          * {margin: 0; padding: 0; list-style: none;}
@@ -54,7 +53,7 @@
              background-color: "#000";
              top: 12px;
          }
-	      </style>
+              </style>
     </head>
     <body>
         <div id="app" class ="container-fluid"></div>

src/index.js

+// This file is just a wrapper so that webpack will call our main function
+require('./Main.purs').main();

webpack.config.js

+'use strict';
+let webpack = require('webpack');
+let path = require('path');
+let exec = require('executive');
+let nodeExternals = require('webpack-node-externals');
+let isWebpackDevServer = process.argv.some(a => path.basename(a) === 'webpack-dev-server');
+let HtmlWebpackPlugin = require('html-webpack-plugin');
+let CleanWebpackPlugin = require('clean-webpack-plugin');
+let isWatch = process.argv.some(a => a === '--watch');
+
+// TODO: We have agreed to move to spago, but not done it yet
+// let spago_sources = async () =>
+//   exec.quiet(
+//     "psc-package sources",
+//     { options: 'strict' }
+//   ).then(function (res) {
+//     let sources = res.stdout.split(/\r?\n/);
+//     sources.pop(); // extra newline at the end of output
+//     return sources;
+//   });
+
+let dist = path.join(__dirname, 'dist');
+let src = path.join(__dirname, 'src');
+let test = path.join(__dirname, 'test');
+
+// kill when spago
+let futured = async () => new Promise((resolve, _) => resolve([]));
+
+module.exports = (env) =>
+  // spago_sources()
+  futured()
+  .then(function (ps_sources) {
+
+    ps_sources.push('src/**/*.purs');
+    // TODO: testing in browser and headless
+    // if (env === "browser" || env === "headless")
+    //   ps_sources.push('test/Main.purs');
+    let config = {
+      cache: true,
+      mode: 'development',
+      target: "web",
+      devtool: 'inline-source-map',
+      devServer: {
+        disableHostCheck: true,
+        contentBase: dist,
+        compress: true,
+        port: 9000
+      },
+      output: {
+        path: dist,
+        filename: 'bundle.js'
+      },
+      module: {
+        rules: [
+          {test: /\.purs$/,
+           exclude: /(node_modules)/,
+           use: [
+             {loader: "purs-loader",
+              options: {
+                src: ps_sources,
+                output: dist,
+                pscIde: true,
+                pscIdeClientArgs: {port: 4002},
+                pscIdeServerArgs: {port: 4002},
+                pscArgs: {codegen: "js,sourcemaps"},
+                pscPackage: true,
+                bundle: false,
+                watch: isWatch}},
+             {loader: "source-map-loader"},
+           ]},
+          {test: /\.css$/,
+           exclude: /(node_modules)/,
+           use: ["style-loader", "css-loader"]},
+          {test: /\.(png|jpg|gif|svg)$/,
+           exclude: /(node_modules)/,
+           use: [ "file-loader" ]},
+          {test: /\.js$/,
+           exclude: /(node_modules)/,
+           use: ["babel-loader", "source-map-loader"]}
+        ]
+      },
+      resolve: {
+        modules: [ 'node_modules' ],
+        extensions: [ '.purs', '.js']
+      },
+      plugins: [
+      // TODO: can we put the checked-in assets in dist somewhere else
+      // and move them into place so we can clean?
+      //   new CleanWebpackPlugin(['dist']),
+        new webpack.LoaderOptionsPlugin({debug: true})
+      ],
+      entry: path.join(src, "index.js")
+    };
+    switch(env) {
+    case 'dev':
+      console.log("Serving index.html from template src/index.html")
+      config.plugins.push(new HtmlWebpackPlugin({
+        template: path.join(src, "index.html")
+      }));
+      break;
+    // TODO: testing environments - browser and headless
+    // case 'browser':
+    //   config.plugins.push(new HtmlWebpackPlugin({
+    //     title: "Reactix",
+    //     template: path.join(test, "browser.html")
+    //   }));
+    //   break;
+    // case 'headless': break;
+    default:
+      console.log("unknown env: ", env);
+    }
+    return config;
+  });