start implementation of ui-scripts

scm-ui/ui-scripts/src/commands/plugin-watch.js

@@ -0,0 +1,11 @@
+const webpack = require("webpack");
+const createPluginConfig = require("../createPluginConfig");
+
+const config = createPluginConfig("development");
+const compiler = webpack(config);
+
+compiler.watch({}, (err, stats) => {
+  console.log(stats.toString({
+    colors: true
+  }));
+});

scm-ui/ui-scripts/src/commands/plugin.js

@@ -0,0 +1,13 @@
+const webpack = require("webpack");
+const createPluginConfig = require("../createPluginConfig");
+
+const config = createPluginConfig("production");
+
+webpack(config, (err, stats) => {
+  console.log(stats.toString({
+    colors: true
+  }));
+  if (err || stats.hasErrors()) {
+    process.exit(1);
+  }
+});

scm-ui/ui-scripts/src/createPluginConfig.js

@@ -0,0 +1,76 @@
+const path = require("path");
+const fs = require("fs");
+
+const root = process.cwd();
+
+const packageJsonPath = path.join(root, "package.json");
+const packageJSON = JSON.parse(
+  fs.readFileSync(packageJsonPath, { encoding: "UTF-8" })
+);
+
+let name = packageJSON.name;
+const orgaIndex = name.indexOf("/");
+if (orgaIndex > 0) {
+  name = name.substring(orgaIndex + 1);
+}
+
+module.exports = function(mode) {
+  return {
+    context: root,
+    entry: {
+      [name]: "./src/main/js/index.js"
+    },
+    mode,
+    devtool: "source-map",
+    target: "web",
+    node: {
+      fs: "empty",
+      net: "empty",
+      tls: "empty"
+    },
+    externals: [
+      "react",
+      "react-dom",
+      "react-i18next",
+      "react-router-dom",
+      "styled-components",
+      "@scm-manager/ui-types",
+      "@scm-manager/ui-extensions",
+      "@scm-manager/ui-components"
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "babel-loader",
+            options: {
+              presets: ["@scm-manager/babel-preset"]
+            }
+          }
+        },
+        {
+          test: /\.(css|scss|sass)$/i,
+          use: ["style-loader", "css-loader", "sass-loader"]
+        },
+        {
+          test: /\.(png|svg|jpg|gif|woff2?|eot|ttf)$/,
+          use: ["file-loader"]
+        }
+      ]
+    },
+    output: {
+      path: path.join(
+        root,
+        "target",
+        name + "-" + packageJSON.version,
+        "webapp",
+        "assets"
+      ),
+      filename: "[name].bundle.js",
+      library: name,
+      libraryTarget: "amd"
+    }
+  };
+};

scm-ui/ui-scripts/src/middleware/ContextPathMiddleware.js

@@ -0,0 +1,11 @@
+function crateContextPathMiddleware(contextPath) {
+  return function(req, resp, next) {
+    const url = req.url;
+    if (url.indexOf(contextPath) === 0) {
+      req.url = url.substr(contextPath.length);
+    }
+    next();
+  }
+}
+
+module.exports = crateContextPathMiddleware;

scm-ui/ui-scripts/src/middleware/IndexMiddleware.js

@@ -0,0 +1,20 @@
+const mustache = require("mustache");
+const fs = require("fs");
+// disable escaping
+mustache.escape = function(text) {
+  return text;
+};
+
+function createIndexMiddleware(file, params) {
+  const template = fs.readFileSync(file, { encoding: "UTF-8" });
+  return function(req, resp, next) {
+    if (req.url === "/index.html") {
+      const content = mustache.render(template, params);
+      resp.send(content);
+    } else {
+      next();
+    }
+  }
+}
+
+module.exports = createIndexMiddleware;

scm-ui/ui-scripts/src/webpack.config.js

@@ -0,0 +1,124 @@
+const path = require("path");
+const createIndexMiddleware = require("./middleware/IndexMiddleware");
+const createContextPathMiddleware = require("./middleware/ContextPathMiddleware");
+
+const root = path.resolve(process.cwd(), "scm-ui");
+
+module.exports = [
+  {
+    context: root,
+    entry: {
+      webapp: [
+        "./ui-webapp/src/webpack-public-path.js",
+        "./ui-styles/src/scm.scss",
+        "./ui-webapp/src/index.js"
+      ]
+    },
+    devtool: "cheap-module-eval-source-map",
+    target: "web",
+    node: {
+      fs: "empty",
+      net: "empty",
+      tls: "empty"
+    },
+    module: {
+      rules: [
+        {
+          parser: {
+            system: false,
+            systemjs: false
+          }
+        },
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: "cache-loader"
+            },
+            {
+              loader: "thread-loader"
+            },
+            {
+              loader: "babel-loader",
+              options: {
+                cacheDirectory: true,
+                presets: ["@scm-manager/babel-preset"]
+              }
+            }
+          ]
+        },
+        {
+          test: /\.(css|scss|sass)$/i,
+          use: [
+            // Creates `style` nodes from JS strings
+            "style-loader",
+            // Translates CSS into CommonJS
+            "css-loader",
+            // Compiles Sass to CSS
+            "sass-loader"
+          ]
+        },
+        {
+          test: /\.(png|svg|jpg|gif|woff2?|eot|ttf)$/,
+          use: ["file-loader"]
+        }
+      ]
+    },
+    output: {
+      path: path.join(root, "target", "assets"),
+      filename: "[name].bundle.js"
+    },
+    devServer: {
+      contentBase: path.join(root, "ui-webapp", "public"),
+      compress: false,
+      historyApiFallback: true,
+      overlay: true,
+      port: 3000,
+      before: function(app) {
+        app.use(createContextPathMiddleware("/scm"));
+      },
+      after: function(app) {
+        const templatePath = path.join(
+          root,
+          "ui-webapp",
+          "public",
+          "index.mustache"
+        );
+        const renderParams = {
+          contextPath: "/scm"
+        };
+        app.use(createIndexMiddleware(templatePath, renderParams));
+      },
+      publicPath: "/assets/"
+    },
+    optimization: {
+      runtimeChunk: "single",
+      splitChunks: {
+        chunks: "all",
+        cacheGroups: {
+          vendors: {
+            test: /[\\/]node_modules[\\/]/,
+            priority: -10
+            // chunks: chunk => chunk.name !== "polyfill"
+          },
+          default: {
+            minChunks: 2,
+            priority: -20,
+            reuseExistingChunk: true
+          }
+        }
+      }
+    }
+  },
+  {
+    context: path.resolve(root),
+    entry: {
+      polyfills: "./ui-polyfill/src/index.js"
+    },
+    output: {
+      path: path.resolve(root, "target", "assets"),
+      filename: "[name].bundle.js"
+    }
+  }
+];