use new plugin bundle format

2025-11-02 03:25:56 +01:00 · 2019-10-07 17:06:00 +02:00
parent c05798e254
commit 6e99182b4e
22 changed files with 1239 additions and 3183 deletions
--- a/package.json
+++ b/package.json
@@ -5,22 +5,27 @@
    "scm-plugins/*"
  ],
  "scripts": {
-    "build": "webpack --mode=development --config=scm-ui/config/webpack.config.js"
+    "build": "webpack --mode=development --config=scm-ui/scripts/webpack.config.js",
+    "serve": "webpack-dev-server --config=scm-ui/scripts/webpack.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "flow-bin": "^0.108.0",
+    "mustache": "^3.1.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "script-loader": "^0.7.2",
    "style-loader": "^1.0.0",
    "terser-webpack-plugin": "^2.1.2",
    "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9"
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.2"
  }
 }
--- a/scm-plugins/scm-git-plugin/package.json
+++ b/scm-plugins/scm-git-plugin/package.json
@@ -2,31 +2,7 @@
  "name": "@scm-manager/scm-git-plugin",
  "version": "2.0.0-SNAPSHOT",
  "license": "BSD-3-Clause",
-  "main": "dist/scm-git-plugin.js",
-  "bundle": {
-    "type": "plugin",
-    "entry": "./src/main/js/index.js"
-  },
  "scripts": {
-    "build": "ui-bundler bundle",
-    "lint": "ui-bundler serve",
-    "flow": "flow check"
-  },
-  "dependencies": {
-    "@scm-manager/ui-extensions": "^0.1.2",
-    "@scm-manager/ui-types": "link:../../scm-ui/ui-types",
-    "@scm-manager/ui-vendor": "link:../../scm-ui/ui-vendor",
-    "@scm-manager/ui-components": "link:../../scm-ui/ui-components",
-    "react": "^16.10.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/preset-env": "^7.6.2",
-    "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.6",
-    "react-i18next": "^10.13.1",
-    "react-jss": "^10.0.0"
+    "build": "webpack --mode=development"
  }
 }
--- a/scm-plugins/scm-git-plugin/src/main/resources/META-INF/scm/plugin.xml
+++ b/scm-plugins/scm-git-plugin/src/main/resources/META-INF/scm/plugin.xml
@@ -56,4 +56,8 @@
    <min-version>${project.parent.version}</min-version>
  </conditions>

+  <resources>
+    <script>plugins/scm-git-plugin.bundle.js</script>
+  </resources>
+  
 </plugin>
--- a/scm-plugins/scm-git-plugin/webpack.config.js
+++ b/scm-plugins/scm-git-plugin/webpack.config.js
@@ -0,0 +1,69 @@
+const path = require("path");
+
+module.exports = {
+  entry: {
+    "scm-git-plugin": "./src/main/js/index.js"
+  },
+  devtool: "source-map",
+  target: "web",
+  node: {
+    fs: "empty",
+    net: "empty",
+    tls: "empty"
+  },
+  externals: [
+    "react",
+    "react-dom",
+    // "react-jss",
+    "react-i18next",
+    "@scm-manager/ui-types",
+    "@scm-manager/ui-extensions",
+    "@scm-manager/ui-components"
+  ],
+  module: {
+    rules: [
+      {
+        parser: {
+          system: false,
+          systemjs: false
+        }
+      },
+      {
+        test: /\.(js|jsx)$/,
+        // exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              "@babel/preset-react",
+              "@babel/preset-flow"
+            ],
+            plugins: ["@babel/plugin-proposal-class-properties"]
+          }
+        }
+      },
+      {
+        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(__dirname, "target", "scm-git-plugin-2.0.0-SNAPSHOT", "webapp", "plugins"),
+    filename: "[name].bundle.js",
+    library: "scm-git-plugin",
+    libraryTarget: "amd"
+  }
+};
--- a/scm-plugins/scm-hg-plugin/package.json
+++ b/scm-plugins/scm-hg-plugin/package.json
@@ -4,12 +4,6 @@
  "license": "BSD-3-Clause",
  "main": "src/main/js/index.js",
  "scripts": {
-    "build": "ui-bundler plugin"
-  },
-  "dependencies": {
-    "@scm-manager/ui-extensions": "^0.1.2"
-  },
-  "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.31"
+    "build": "webpack --mode=development"
  }
 }
--- a/scm-plugins/scm-hg-plugin/src/main/resources/META-INF/scm/plugin.xml
+++ b/scm-plugins/scm-hg-plugin/src/main/resources/META-INF/scm/plugin.xml
@@ -56,4 +56,8 @@ jo
    <min-version>${project.parent.version}</min-version>
  </conditions>

+  <resources>
+    <script>plugins/scm-hg-plugin.bundle.js</script>
+  </resources>
+
 </plugin>
--- a/scm-plugins/scm-hg-plugin/webpack.config.js
+++ b/scm-plugins/scm-hg-plugin/webpack.config.js
@@ -1,16 +1,25 @@
 const path = require("path");

 module.exports = {
-  context: path.resolve(__dirname, ".."),
  entry: {
-    webapp: "./ui-webapp/src/index.js"
+    "scm-hg-plugin": "./src/main/js/index.js"
  },
+  devtool: "source-map",
  target: "web",
  node: {
    fs: "empty",
    net: "empty",
    tls: "empty"
  },
+  externals: [
+    "react",
+    "react-dom",
+    // "react-jss",
+    "react-i18next",
+    "@scm-manager/ui-types",
+    "@scm-manager/ui-extensions",
+    "@scm-manager/ui-components"
+  ],
  module: {
    rules: [
      {
@@ -52,7 +61,9 @@ module.exports = {
    ]
  },
  output: {
-    path: path.resolve(__dirname, "..", "target"),
-    filename: "[name].bundle.js"
+    path: path.join(__dirname, "target", "scm-hg-plugin-2.0.0-SNAPSHOT", "webapp", "plugins"),
+    filename: "[name].bundle.js",
+    library: "scm-hg-plugin",
+    libraryTarget: "amd"
  }
 };
--- a/scm-plugins/scm-legacy-plugin/package.json
+++ b/scm-plugins/scm-legacy-plugin/package.json
@@ -4,17 +4,6 @@
  "license": "BSD-3-Clause",
  "main": "src/main/js/index.js",
  "scripts": {
-    "build": "ui-bundler plugin",
-    "watch": "ui-bundler plugin -w",
-    "lint": "ui-bundler lint",
-    "flow": "flow check"
-  },
-  "dependencies": {
-    "@scm-manager/ui-components": "latest",
-    "@scm-manager/ui-extensions": "^0.1.1",
-    "@scm-manager/ui-types": "latest"
-  },
-  "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.31"
+    "build": "webpack --mode=development"
  }
 }
--- a/scm-plugins/scm-legacy-plugin/src/main/resources/META-INF/scm/plugin.xml
+++ b/scm-plugins/scm-legacy-plugin/src/main/resources/META-INF/scm/plugin.xml
@@ -55,4 +55,8 @@
    <min-version>${project.parent.version}</min-version>
  </conditions>

+  <resources>
+    <script>plugins/scm-legacy-plugin.bundle.js</script>
+  </resources>
+
 </plugin>
--- a/scm-plugins/scm-legacy-plugin/webpack.config.js
+++ b/scm-plugins/scm-legacy-plugin/webpack.config.js
@@ -0,0 +1,69 @@
+const path = require("path");
+
+module.exports = {
+  entry: {
+    "scm-legacy-plugin": "./src/main/js/index.js"
+  },
+  devtool: "source-map",
+  target: "web",
+  node: {
+    fs: "empty",
+    net: "empty",
+    tls: "empty"
+  },
+  externals: [
+    "react",
+    "react-dom",
+    // "react-jss",
+    "react-i18next",
+    "@scm-manager/ui-types",
+    "@scm-manager/ui-extensions",
+    "@scm-manager/ui-components"
+  ],
+  module: {
+    rules: [
+      {
+        parser: {
+          system: false,
+          systemjs: false
+        }
+      },
+      {
+        test: /\.(js|jsx)$/,
+        // exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              "@babel/preset-react",
+              "@babel/preset-flow"
+            ],
+            plugins: ["@babel/plugin-proposal-class-properties"]
+          }
+        }
+      },
+      {
+        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(__dirname, "target", "scm-legacy-plugin-2.0.0-SNAPSHOT", "webapp", "plugins"),
+    filename: "[name].bundle.js",
+    library: "scm-legacy-plugin",
+    libraryTarget: "amd"
+  }
+};
--- a/scm-plugins/scm-svn-plugin/package.json
+++ b/scm-plugins/scm-svn-plugin/package.json
@@ -4,12 +4,6 @@
  "version": "2.0.0-SNAPSHOT",
  "license": "BSD-3-Clause",
  "scripts": {
-    "build": "ui-bundler plugin"
-  },
-  "dependencies": {
-    "@scm-manager/ui-extensions": "^0.1.2"
-  },
-  "devDependencies": {
-    "@scm-manager/ui-bundler": "^0.0.31"
+    "build": "webpack --mode=development"
  }
 }
--- a/scm-plugins/scm-svn-plugin/src/main/resources/META-INF/scm/plugin.xml
+++ b/scm-plugins/scm-svn-plugin/src/main/resources/META-INF/scm/plugin.xml
@@ -56,4 +56,8 @@
    <min-version>${project.parent.version}</min-version>
  </conditions>

+  <resources>
+    <script>plugins/scm-svn-plugin.bundle.js</script>
+  </resources>
+
 </plugin>
--- a/scm-plugins/scm-svn-plugin/webpack.config.js
+++ b/scm-plugins/scm-svn-plugin/webpack.config.js
@@ -0,0 +1,69 @@
+const path = require("path");
+
+module.exports = {
+  entry: {
+    "scm-svn-plugin": "./src/main/js/index.js"
+  },
+  devtool: "source-map",
+  target: "web",
+  node: {
+    fs: "empty",
+    net: "empty",
+    tls: "empty"
+  },
+  externals: [
+    "react",
+    "react-dom",
+    //"react-jss",
+    "react-i18next",
+    "@scm-manager/ui-types",
+    "@scm-manager/ui-extensions",
+    "@scm-manager/ui-components"
+  ],
+  module: {
+    rules: [
+      {
+        parser: {
+          system: false,
+          systemjs: false
+        }
+      },
+      {
+        test: /\.(js|jsx)$/,
+        // exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              "@babel/preset-react",
+              "@babel/preset-flow"
+            ],
+            plugins: ["@babel/plugin-proposal-class-properties"]
+          }
+        }
+      },
+      {
+        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(__dirname, "target", "scm-svn-plugin-2.0.0-SNAPSHOT", "webapp", "plugins"),
+    filename: "[name].bundle.js",
+    library: "scm-svn-plugin",
+    libraryTarget: "amd"
+  }
+};
--- a/scm-ui/pom.xml
+++ b/scm-ui/pom.xml
@@ -47,6 +47,7 @@
        <groupId>com.github.sdorra</groupId>
        <artifactId>buildfrontend-maven-plugin</artifactId>
        <configuration>
+          <workingDirectory>${basedir}/..</workingDirectory>
          <node>
            <version>${nodejs.version}</version>
          </node>
@@ -96,11 +97,7 @@
          <failOnMissingWebXml>false</failOnMissingWebXml>
          <webResources>
            <resource>
-              <directory>ui-webapp/dist</directory>
-              <targetPath>bundles</targetPath>
-            </resource>
-            <resource>
-              <directory>ui-vendor/dist</directory>
+              <directory>target/bundles</directory>
              <targetPath>bundles</targetPath>
            </resource>
            <resource>
--- a/scm-ui/scripts/ContextPathMiddleware.js
+++ b/scm-ui/scripts/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;
--- a/scm-ui/scripts/IndexMiddleware.js
+++ b/scm-ui/scripts/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;
--- a/scm-ui/scripts/webpack.config.js
+++ b/scm-ui/scripts/webpack.config.js
@@ -0,0 +1,82 @@
+const path = require("path");
+const createIndexMiddleware = require("./IndexMiddleware");
+const createContextPathMiddleware = require("./ContextPathMiddleware");
+
+module.exports = {
+  context: path.resolve(__dirname, ".."),
+  entry: {
+    webapp: [
+      "./ui-webapp/src/webpack-public-path.js",
+      "./ui-webapp/src/index.js"
+    ]
+  },
+  devtool: "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: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              "@babel/preset-react",
+              "@babel/preset-flow"
+            ],
+            plugins: ["@babel/plugin-proposal-class-properties"]
+          }
+        }
+      },
+      {
+        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.resolve(__dirname, "..", "target", "bundles"),
+    filename: "[name].bundle.js"
+  },
+  devServer: {
+    contentBase: path.join(__dirname, '..', "ui-webapp", "public"),
+    compress: true,
+    historyApiFallback: true,
+    overlay: true,
+    port: 3000,
+    before: function(app) {
+      app.use(createContextPathMiddleware("/scm"));
+    },
+    after: function(app) {
+      const templatePath = path.join(__dirname, '..', "ui-webapp", "public", "index.mustache");
+      const renderParams = {
+        contextPath: "/scm"
+      };
+      app.use(createIndexMiddleware(templatePath, renderParams));
+    },
+    publicPath: '/bundles/'
+  }
+};
--- a/scm-ui/ui-webapp/public/index.mustache
+++ b/scm-ui/ui-webapp/public/index.mustache
@@ -12,8 +12,6 @@
    <link rel="shortcut icon" href="{{ contextPath }}/favicon.ico">

    <base href="{{ contextPath }}">
-    <link rel="stylesheet" type="text/css" href="{{ contextPath }}/styles/scm.css">
-
    <title>SCM-Manager</title>
  </head>
  <body>
@@ -36,9 +34,7 @@
    <script>
      window.ctxPath = "{{ contextPath }}";
    </script>
-    <script src="{{ contextPath }}/bundles/polyfills.bundle.js"></script>
-    <script src="{{ contextPath }}/bundles/vendor-{{mode}}.bundle.js"></script>
-    <script src="{{ contextPath }}/bundles/ui-webapp.js"></script>
+    <script src="{{ contextPath }}/bundles/webapp.bundle.js"></script>

    {{#liveReloadURL}}
    <script src="{{liveReloadURL}}"></script>
--- a/scm-ui/ui-webapp/src/containers/PluginLoader.js
+++ b/scm-ui/ui-webapp/src/containers/PluginLoader.js
@@ -3,6 +3,7 @@ import * as React from "react";
 import { apiClient, Loading } from "@scm-manager/ui-components";
 import { getUiPluginsLink } from "../modules/indexResource";
 import { connect } from "react-redux";
+import loadBundle from "./loadBundle";

 type Props = {
  loaded: boolean,
@@ -73,30 +74,11 @@ class PluginLoader extends React.Component<Props, State> {

    const promises = [];
    for (let bundle of plugin.bundles) {
-      promises.push(this.loadBundle(bundle));
+      promises.push(loadBundle(bundle));
    }
    return Promise.all(promises);
  };

-  loadBundle = (bundle: string) => {
-    return fetch(bundle, {
-      credentials: "same-origin",
-      headers: {
-        Cache: "no-cache",
-        // identify the request as ajax request
-        "X-Requested-With": "XMLHttpRequest"
-      }
-    })
-      .then(response => {
-        return response.text();
-      })
-      .then(script => {
-        // TODO is this safe???
-        // eslint-disable-next-line no-eval
-        eval(script); // NOSONAR
-      });
-  };
-
  render() {
    const { loaded } = this.props;
    const { message } = this.state;
--- a/scm-ui/ui-webapp/src/containers/loadBundle.js
+++ b/scm-ui/ui-webapp/src/containers/loadBundle.js
@@ -0,0 +1,47 @@
+import "script-loader!../../../../node_modules/systemjs/dist/system.js";
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import * as ReactRouterDom from "react-router-dom";
+import * as ReactRedux from "react-redux";
+import {default as injectSheets } from "react-jss";
+import * as ReactJSS from "react-jss";
+import * as ReactI18Next from "react-i18next";
+import * as ClassNames from "classnames";
+import * as UIExtensions from "@scm-manager/ui-extensions";
+import * as UIComponents from "@scm-manager/ui-components";
+
+/**
+ credentials: "same-origin",
+ headers: {
+    Cache: "no-cache",
+    // identify the request as ajax request
+    "X-Requested-With": "XMLHttpRequest"
+  }
+*/
+
+SystemJS.config({
+  baseURL: "/plugins",
+  meta: {
+    "/*": {
+      esModule: true,
+      authorization: true
+    }
+  }
+});
+
+const expose = (name, cmp) => {
+  SystemJS.set(name, SystemJS.newModule(cmp));
+};
+
+expose("react", React);
+expose("react-dom", ReactDOM);
+expose("react-router-dom", ReactRouterDom);
+expose("react-jss", {...ReactJSS, default: injectSheets});
+expose("react-redux", ReactRedux);
+expose("react-i18next", ReactI18Next);
+expose("classnames", ClassNames);
+expose("@scm-manager/ui-extensions", UIExtensions);
+expose("@scm-manager/ui-components", UIComponents);
+
+export default (plugin: string) => SystemJS.import(plugin);
--- a/scm-ui/ui-webapp/src/webpack-public-path.js
+++ b/scm-ui/ui-webapp/src/webpack-public-path.js
@@ -0,0 +1,4 @@
+// setup webpack public path:
+// https://stackoverflow.com/questions/39879680/example-of-setting-webpack-public-path-at-runtime
+// https://github.com/coryhouse/react-slingshot/pull/207/files
+__webpack_public_path__ = window.ctxPath + "/bundles/";
--- a/yarn.lock
+++ b/yarn.lock