Support additional source paths and entries in webpack build

package.json

@@ -12,6 +12,10 @@
   "scripts": {
     "bootstrap": "lerna bootstrap"
   },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
   "devDependencies": {
     "@babel/cli": "^7.10.5",
     "@babel/core": "^7.10.5",

silk-react-components/package.json

@@ -49,11 +49,11 @@
     "lodash": "^4.17.4",
     "mark.js": "^8.11.1",
     "mdl-selectfield": "1.0.3",
-    "react": "^16.13.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
     "react-beautiful-dnd": "^13.0.0",
     "react-codemirror2": "^7.2.1",
-    "react-dom": "^16.13.0",
     "react-flow-renderer": "^9.6.7",
     "gui-elements": "0.0.1"
   },

workspace/config/paths.js

@@ -91,6 +91,30 @@ const silkConfig = buildConfig()
 
 const configValue = (key, defaultValue) => silkConfig[key] ? silkConfig[key] : defaultValue
 
+// Allow to add additional source paths, e.g. proprietary code that will be bundled together with the core code.
+// Paths are separated by ';' and are relative to the 'workspace' folder.
+const additionalSourcePaths = () => {
+    const pathsString = silkConfig.additionalSources ? silkConfig.additionalSources : process.env.ADDITIONAL_SOURCE_PATHS
+    if(pathsString) {
+        return pathsString.split(";")
+            .map(path => resolveApp(path))
+    } else {
+        return []
+    }
+}
+
+// Allow to add additional entry points, e.g. from proprietary code that will be bundled together with the core code.
+// Entries are separated by ';' and are relative to the 'workspace' folder.
+const additionalEntries = () => {
+    const entriesString = silkConfig.additionalEntries ? silkConfig.additionalEntries : process.env.ADDITIONAL_ENTRIES
+    if(entriesString) {
+        return entriesString.split(";")
+            .map(path => resolveApp(path))
+    } else {
+        return []
+    }
+}
+
 // config after eject: we're in ./config/
 module.exports = {
     dotenv: resolveApp(".env"),
@@ -114,7 +138,9 @@ module.exports = {
     servedPath: getServedPath(resolveApp("package.json")),
     ducksFolder: resolveApp("src/app/store/ducks"),
     guiElements: resolveApp("../libs/gui-elements"),
-    silkConfig
+    silkConfig,
+    additionalSourcePaths,
+    additionalEntries
 };
 
 module.exports.moduleFileExtensions = moduleFileExtensions;

workspace/config/webpack.di.config.js

@@ -414,7 +414,6 @@ module.exports = function (webpackEnv, isWatch) {
                         // extensions .module.scss or .module.sass
                         {
                             test: sassRegex,
-                            include: [paths.appSrc, paths.guiElements],
                             exclude: sassModuleRegex,
                             use: getStyleLoaders(
                                 {

workspace/package.json

@@ -52,9 +52,7 @@
         "mousetrap": "^1.6.5",
         "qs": "^6.7.0",
         "query-string": "^6.13.7",
-        "react": "^16.13.1",
         "react-app-polyfill": "^1.0.6",
-        "react-dom": "^16.13.1",
         "react-flow-renderer": "^9.6.1",
         "react-helmet": "^6.0.0",
         "react-hook-form": "^5.1.3",

workspace/scripts/build-di.dev.js

@@ -21,6 +21,7 @@ const webpack = require("webpack");
 const bfj = require("bfj");
 const configFactory = require("../config/webpack.di.config");
 const paths = require("../config/paths");
+const utils = require("./build.utils")
 const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
 const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
 const printBuildError = require("react-dev-utils/printBuildError");
@@ -120,7 +121,8 @@ function runCallback(err, stats) {
 
 // Create the production build and print the deployment instructions.
 function run() {
-    const compiler = webpack(config);
+    const adaptedConfig = utils.adaptWebpackConfig(config)
+    const compiler = webpack(adaptedConfig);
     if (isWatch) {
         return compiler.watch(
             {

workspace/scripts/build-di.prod.js

@@ -69,6 +69,7 @@ function logSpentTime() {
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
 const { checkBrowsers } = require("react-dev-utils/browsersHelper");
+const utils = require("./build.utils");
 const { startLog, stopLog } = logSpentTime();
 
 checkBrowsers(paths.appPath, isInteractive)
@@ -130,7 +131,8 @@ checkBrowsers(paths.appPath, isInteractive)
 
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
-    const compiler = webpack(config);
+    const adaptedConfig = utils.adaptWebpackConfig(config)
+    const compiler = webpack(adaptedConfig);
 
     return new Promise((resolve, reject) => {
         compiler.run((err, stats) => {

workspace/scripts/build.utils.js

@@ -0,0 +1,31 @@
+/**
+ * Build utility functions that are shared among multiple files.
+ **/
+const paths = require("../config/paths");
+
+const adaptWebpackConfig = (config) => {
+    let adaptedConf = {...config}
+    if (paths.additionalSourcePaths().length > 0 || paths.additionalEntries().length > 0) {
+        paths.additionalEntries().length > 0 && console.log("Add additional entry point/s: " + paths.additionalEntries().join(", "))
+        adaptedConf.entry = adaptedConf.entry.concat(paths.additionalEntries())
+        paths.additionalSourcePaths().length > 0 && adaptedConf.module.rules.forEach(rule => {
+            if (Array.isArray(rule.include)) {
+                console.log("Adding additional source path/s: " + paths.additionalSourcePaths().join(", "))
+                rule.include = rule.include.concat(paths.additionalSourcePaths())
+            }
+            if (rule.oneOf) {
+                rule.oneOf.forEach(oneOfRule => {
+                    if (Array.isArray(oneOfRule.include)) {
+                        console.log("Adding additional source path/s to module: " + oneOfRule.loader)
+                        oneOfRule.include = oneOfRule.include.concat(paths.additionalSourcePaths())
+                    }
+                })
+            }
+        })
+    }
+    return adaptedConf
+}
+
+module.exports = {
+    adaptWebpackConfig
+}

workspace/src/app/views/layout/Header/Header.tsx

@@ -36,6 +36,7 @@ import { CONTEXT_PATH, SERVE_PATH } from "../../../constants/path";
 import { APP_VIEWHEADER_ID } from "../../shared/PageHeader/PageHeader";
 import { fetchStoredLang } from "../../../../language";
 import { SUPPORTED_PLUGINS, pluginRegistry } from "../../plugins/PluginRegistry";
+import {UserMenuFooterProps} from "../../plugins/plugin.types";
 
 interface IProps {
     onClickApplicationSidebarExpand: any;
@@ -53,7 +54,7 @@ export function Header({ onClickApplicationSidebarExpand, isApplicationSidebarEx
     const [t] = useTranslation();
     const [displayUserMenu, toggleUserMenuDisplay] = useState<boolean>(false);
     const diUserMenuItems = pluginRegistry.pluginComponent(SUPPORTED_PLUGINS.DI_USER_MENU_ITEMS);
-    const diUserMenuFooter = pluginRegistry.pluginComponent(SUPPORTED_PLUGINS.DI_USER_MENU_FOOTER);
+    const diUserMenuFooter = pluginRegistry.pluginComponent<UserMenuFooterProps>(SUPPORTED_PLUGINS.DI_USER_MENU_FOOTER);
 
     const handleCreateDialog = () => {
         dispatch(commonOp.setSelectedArtefactDType(appliedFilters.itemType));

workspace/src/app/views/pages/Dataset/Dataset.tsx

@@ -53,7 +53,7 @@ export function Dataset() {
 
     const showPreviewAutomatically = automaticallyPreviewedDatasets.includes(taskData?.data?.type ?? "");
     const showPreview = !noDataPreviewDatasets.includes(taskData?.data?.type ?? "");
-    const dataPreviewComponent = pluginRegistry.pluginComponent<DataPreviewProps>(SUPPORTED_PLUGINS.DATA_PREVIEW);
+    const DataPreviewComponent = pluginRegistry.pluginComponent<DataPreviewProps>(SUPPORTED_PLUGINS.DATA_PREVIEW);
 
     useEffect(() => {
         if (taskId && projectId) {
@@ -67,8 +67,8 @@ export function Dataset() {
         } else {
             return (
                 showPreview &&
-                dataPreviewComponent && (
-                    <dataPreviewComponent.Component
+                DataPreviewComponent && (
+                    <DataPreviewComponent.Component
                         id={"datasetPageDataPreview"}
                         title={t("pages.dataset.title", "Data preview")}
                         preview={{ project: projectId, dataset: taskId }}

workspace/src/app/views/plugins/plugin.types.ts

@@ -43,6 +43,7 @@ export interface IDatasetPreview {
     typeUri?: string;
 }
 
+/** Parameters of the data preview component. */
 export interface DataPreviewProps {
     // The title of the widget
     title: string;
@@ -58,3 +59,8 @@ export interface DataPreviewProps {
     // An optional ID for the preview widget
     id?: string;
 }
+
+/** User menu footer component. */
+export interface UserMenuFooterProps {
+    version?: string
+}

workspace/src/app/views/shared/modals/CreateArtefactModal/ArtefactForms/TaskForm.tsx

@@ -5,13 +5,13 @@ import { DATA_TYPES, INPUT_TYPES } from "../../../../../constants";
 import { FieldItem, Spacing, TextArea, TextField } from "gui-elements";
 import { AdvancedOptionsArea } from "../../../AdvancedOptionsArea/AdvancedOptionsArea";
 import { errorMessage, ParameterWidget } from "./ParameterWidget";
-import { IDatasetConfigPreview } from "@ducks/shared/typings";
 import { defaultValueAsJs, existingTaskValuesToFlatParameters } from "../../../../../utils/transformers";
 import { useTranslation } from "react-i18next";
 import CustomIdentifierInput, { handleCustomIdValidation } from "./CustomIdentifierInput";
 import useErrorHandler from "../../../../../hooks/useErrorHandler";
 import Loading from "../../../Loading";
 import { SUPPORTED_PLUGINS, pluginRegistry } from "../../../../plugins/PluginRegistry";
+import {DataPreviewProps, IDatasetConfigPreview} from "../../../../plugins/plugin.types";
 
 export interface IProps {
     form: any;
@@ -64,7 +64,7 @@ export function TaskForm({ form, projectId, artefact, updateTask, taskId, detect
     const initialValues = existingTaskValuesToFlatParameters(updateTask);
     const [t] = useTranslation();
     const { label, description } = form.watch([LABEL, DESCRIPTION]);
-    const dataPreviewPlugin = pluginRegistry.pluginComponent(SUPPORTED_PLUGINS.DATA_PREVIEW);
+    const dataPreviewPlugin = pluginRegistry.pluginComponent<DataPreviewProps>(SUPPORTED_PLUGINS.DATA_PREVIEW);
 
     // addition restriction for the hook form parameter values
     const valueRestrictions = (param: IArtefactItemProperty) => {