Merge branch 'loader2' into dev-corpus-document

8956227d · Przemyslaw Kaminski · b928fd92 · 3c163dc8 · 8956227d · 8956227d
Commit 8956227d authored Jul 04, 2019 by Przemyslaw Kaminski
17 changed files
--- a/.gitignore
+++ b/.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
--- a/README.md
+++ b/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


--- a/bower.json
+++ b/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"
-  }
-}
--- a/build
+++ b/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
--- a/dist/index.html
+++ b/dist/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>

--- a/dist/index.js
+++ b/dist/index.js
+// This file is just a wrapper so that webpack will call our main function
+require('./Main.purs').main();
--- a/install
+++ b/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
-
--- a/package.json
+++ b/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"
+    }
 }
--- a/rebuild
+++ b/rebuild
-#!/bin/bash
-
-rm -rf .psc-package output bower_components node_modules
-./build
--- a/repl
+++ b/repl
-#!/bin/bash
-yarn repl
--- a/src/Gargantext/Components/Loader2.purs
+++ b/src/Gargantext/Components/Loader2.purs
+module Gargantext.Components.Loader2 where
+
+import Data.Maybe (Maybe(..), isNothing)
+import Data.Tuple.Nested ((/\))
+import Gargantext.Prelude
+import Effect.Aff (Aff, launchAff, launchAff_, killFiber)
+import Effect.Class (liftEffect)
+import Effect.Exception (error)
+import Reactix as R
+
+type State path loaded = { currentPath :: path, loaded :: Maybe loaded }
+
+useLoader
+  :: forall path loaded
+  .  Eq path
+  => Show path
+  => path
+  -> (path -> Aff loaded)
+  -> (path -> loaded -> R.Element)
+  -> R.Hooks R.Element
+useLoader newPath loader render = do
+  {currentPath, loaded} /\ setState <- R.useState' { currentPath: newPath, loaded: Nothing }
+
+  R.useEffect $
+    if (isNothing loaded || newPath /= currentPath) then do
+      logs $ "useLoader " <> show {newPath, currentPath, loadedIsNothing: isNothing loaded}
+
+      fiber <- launchAff do
+        freshlyLoaded <- loader newPath
+        liftEffect $ setState $ const { currentPath: newPath, loaded: Just freshlyLoaded }
+      pure $ launchAff_ $ killFiber (error "useLoader") fiber
+    else do
+      pure $ pure $ unit
+
+  pure case loaded of
+    Nothing ->
+      -- TODO load spinner
+      R.fragment []
+    Just loadedData ->
+      render currentPath loadedData
--- a/src/Gargantext/Components/Tree.purs
+++ b/src/Gargantext/Components/Tree.purs
@@ -18,7 +18,7 @@ import Effect.Aff (Aff, runAff)
 import Effect.Class (liftEffect)
 import Effect.Uncurried (mkEffectFn1)
 import FFI.Simple ((..))
-import Gargantext.Components.Loader as Loader
+import Gargantext.Components.Loader2 (useLoader)
 import Gargantext.Config (toUrl, End(..), NodeType(..), readNodeType)
 import Gargantext.Config.REST (get, put, post, postWwwUrlencoded, delete)
 import Gargantext.Types (class ToQuery, toQuery)
@@ -185,12 +185,12 @@ nodeOptionsRename d activated  id =  case activated of
                                 ]
                         false -> []

-type LoadedTreeViewProps = Loader.InnerProps Int FTree ()
+type TreeViewProps = { tree :: FTree }

-loadedTreeview :: Spec State LoadedTreeViewProps Action
+loadedTreeview :: Spec State TreeViewProps Action
 loadedTreeview = simpleSpec performAction render
  where
-    render :: Render State LoadedTreeViewProps Action
+    render :: Render State TreeViewProps Action
    render dispatch _ {state, currentNode} _ =
      [ div [className "tree"]
        [ --toHtml dispatch state currentNode
@@ -198,23 +198,29 @@ loadedTreeview = simpleSpec performAction render
        ]
      ]

-treeViewClass :: ReactClass (Loader.InnerProps Int FTree (children :: React.Children))
-treeViewClass = createClass "TreeView" loadedTreeview (\{loaded: t} -> {state: t, currentNode: Nothing})
+treeViewClass :: ReactClass { tree :: FTree, children :: React.Children }
+treeViewClass = createClass "TreeView" loadedTreeview (\{tree} -> {state: tree, currentNode: Nothing})

-treeLoaderClass :: Loader.LoaderClass Int FTree
-treeLoaderClass = Loader.createLoaderClass "TreeLoader" loadNode
+-- loadedTreeView p = R.createElement el p []
+--   where
+--     el = R.hooksComponent "LoadedTreeView" cpt
+--     cpt {tree} _ = do
+--       setTree <- R.useState' tree

-treeLoader :: Loader.Props' Int FTree -> ReactElement
-treeLoader props = React.createElement treeLoaderClass props []
+--       pure $ H.div {className: "tree"}
+--         [ toHtml setTree tree Nothing ]

 treeview :: Spec {} Props Void
 treeview = simpleSpec defaultPerformAction render
  where
    render :: Render {} Props Void
-    render _ {root} _ _ =
-      [ treeLoader { path: root
-                   , component: treeViewClass
-                   } ]
+    render _ props _ _ = [R2.scuff $ R.createElement cpt props []]
+
+    cpt =
+      R.hooksComponent "TreeView" \{root} _children ->
+        useLoader root loadNode \currentPath loaded ->
+          R2.buff $ React.createElement treeViewClass {tree: loaded} []
+          --R2.scuff $ loadedTreeView {tree: loaded}


 -- START Popup View
@@ -637,6 +643,7 @@ nodeText p = R.createElement el p []
 -- END node text

 loadNode :: ID -> Aff FTree
+-- loadNode a = lift ((get <<< toUrl Back Tree <<< Just) a)
 loadNode = get <<< toUrl Back Tree <<< Just

 ----- TREE CRUD Operations

--- a/src/Gargantext/Config.purs
+++ b/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: "/#/"

--- a/src/index.html
+++ b/src/index.html
+<!doctype>
+<html>
+    <head>
+        <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/styles/all.css" rel="stylesheet">
+        <link href="styles/login.min.css" rel="stylesheet">
+        <link href="styles/bootstrap.min.css" rel="stylesheet">
+        <!-- <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/menu.css"/>
+        <link href="styles/Login.css" rel="stylesheet">
+        <style>
+         * {margin: 0; padding: 0; list-style: none;}
+         .tree ul li {
+             margin-left: 15px;
+             position: relative;
+             padding-left: 5px;
+         }
+         #toolbar {display : inline;}
+         #toolbar ul li {display : inline }
+         #toolbar ul li form {display : inline}
+         .tree { margin-top : 20px;}
+         .tree ul li::before {
+             content: " ";
+             position: absolute;
+             width: 1px;
+             background-color: #000;
+             top: 5px;
+             bottom: -12px;
+             left: -10px;
+         }
+         body > .tree ul > li:first-child::before {top: 12px;}
+         .tree ul li:not(:first-child):last-child::before {display: none;}
+         .tree ul li:only-child::before {
+             display: list-item;
+             content: " ";
+             position: absolute;
+             width: 1px;
+             background-color: "#000";
+             top: 5px;
+             bottom: 7px;
+             height: 7px;
+             left: -10px;
+         }
+         .tree ul li::after {
+             content: " ";
+             position: absolute;
+             left: -10px;
+             width: 10px;
+             height: 1px;
+             background-color: "#000";
+             top: 12px;
+         }
+              </style>
+    </head>
+    <body>
+        <div id="app" class ="container-fluid"></div>
+        <div id="menu-portal"></div>
+        <script src="bundle.js"></script>
+        <script src="js/bootstrap-native.min.js"></script>
+    </body>
+</html>
--- a/src/index.js
+++ b/src/index.js
+// This file is just a wrapper so that webpack will call our main function
+require('./Main.purs').main();
--- a/webpack.config.js
+++ b/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: 8000
+      },
+      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;
+  });
--- a/yarn.lock
+++ b/yarn.lock