@fmsim/builder 0.0.49

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+<!-- ## [Unreleased] -->

package/controller/entries-builder.js

@@ -0,0 +1,43 @@
+/*
+ * 모든 클라이언트 모듈의 entries 파일들에 오버라이드를 적용해서 최종에 entries 파일로 병합될 파일리스트를 선정하는 기능.
+ */
+
+const path = require('path')
+const glob = require('glob')
+
+module.exports = function () {
+  const { orderedModuleNames, appRootPath } = require('@things-factory/env')
+
+  const AppPackage = require(path.resolve(appRootPath, 'package.json'))
+
+  var appname = AppPackage.name
+
+  var reversedModuleNames = [...orderedModuleNames, appname].reverse()
+  var entryFiles = {}
+
+  /* 최상위 모듈부터 복사한다. 하위 모듈에서는 중복 여부에 따라 복사여부를 결정한다. */
+  reversedModuleNames.forEach(m => {
+    var modulePackage = appname === m ? AppPackage : require(`${m}/package.json`)
+    var browserPath = modulePackage.browser
+
+    if (!browserPath) {
+      return
+    }
+
+    var modulePath = appname === m ? appRootPath : path.dirname(require.resolve(`${m}/package.json`))
+    modulePath = path.dirname(path.join(modulePath, browserPath))
+
+    var files = glob.sync(`${path.join(modulePath, 'entries', '**', '*.js')}`)
+    var idx = path.join(modulePath, 'entries').length
+
+    files.forEach(filepath => {
+      let filename = filepath.substring(idx + 1, filepath.length - 3)
+
+      if (!entryFiles[filename]) {
+        entryFiles[filename] = [filepath]
+      }
+    })
+  })
+
+  return entryFiles
+}

package/docker/nginx/Dockerfile

@@ -0,0 +1,15 @@
+FROM nginx
+
+# 기본 설정 파일을 지우고, 새로운 파일로 대체합니다.
+RUN rm -rf /etc/nginx/conf.d/default.conf
+
+COPY ./app.conf  /etc/nginx/conf.d/app.conf
+COPY ./nginx.conf  /etc/nginx/nginx.conf
+
+VOLUME ["/data", "/etc/nginx", "/var/log/nginx"]
+
+WORKDIR /etc/nginx
+
+CMD ["nginx"]
+
+EXPOSE 80

package/docker/nginx/app.conf

@@ -0,0 +1,19 @@
+server {
+    listen       80;
+    listen      [::]:80;
+
+    server_name  "";
+
+    access_log off;
+
+    location / {
+      proxy_pass http://app:3000;
+    	proxy_set_header Host $host:$server_port;
+      proxy_set_header X-Forwarded-Host $server_name;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_http_version 1.1;
+    }
+}

package/docker/nginx/nginx.conf

@@ -0,0 +1,47 @@
+#nginx.conf
+daemon off;
+user  www-data;
+worker_processes  2;
+
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+    use epoll;
+    accept_mutex off;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  65;
+
+    client_max_body_size 300m;
+    client_body_buffer_size 128k;
+
+    gzip  on;
+    gzip_http_version 1.0;
+    gzip_comp_level 6;
+    gzip_min_length 0;
+    gzip_buffers 16 8k;
+    gzip_proxied any;
+    gzip_types text/plain text/css text/xml text/javascript application/xml application/xml+rss application/javascript application/json;
+    gzip_disable "MSIE [1-6]\.";
+    gzip_vary on;
+
+    include /etc/nginx/conf.d/*.conf;
+}

package/docker/nginx/operato-nginx-create.sh

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+VERSION=latest
+
+if [ $# -eq 0 ] ; then
+  echo "Default Version latest"
+else
+  VERSION=$1
+fi
+
+echo "VERSION : ${VERSION}"
+
+docker image build -t hatiolab/operato-nginx:${VERSION} -f Dockerfile --platform ${PLATFORM} .

package/docker/operato-env/Dockerfile

@@ -0,0 +1,47 @@
+# Use an official node image
+FROM node:18.12
+
+ARG DEBIAN_FRONTEND=noninteractive
+
+# Install the required packages
+
+RUN echo "deb http://ftp.de.debian.org/debian stable main" > /etc/apt/sources.list
+
+RUN apt-get update
+
+RUN apt-get install -y --no-install-recommends apt-utils
+RUN apt-get install -y chromium
+RUN apt-get install -y libcups2-dev 
+RUN apt-get install -y libavahi-compat-libdnssd-dev 
+RUN apt-get install -y gconf-service libasound2 libatk1.0-0 libcairo2 libcups2 libfontconfig1 libgdk-pixbuf2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libxss1 fonts-liberation libnss3 lsb-release xdg-utils libaio1
+
+RUN apt update
+RUN apt-get install -y ghostscript
+RUN apt-get install -y curl
+RUN apt-get install -y git
+
+# install chrome
+RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+RUN dpkg -i google-chrome-stable_current_amd64.deb; apt-get -fy install
+RUN rm google-chrome-stable_current_amd64.deb
+
+
+
+# make oracle path
+RUN mkdir -p /opt/oracle
+WORKDIR /opt/oracle
+
+# download newest oracle cilent for connect to Oracle Database
+RUN wget https://download.oracle.com/otn_software/linux/instantclient/instantclient-basiclite-linuxx64.zip && \
+  unzip instantclient-basiclite-linuxx64.zip && \ 
+  rm -f instantclient-basiclite-linuxx64.zip && \
+  cd /opt/oracle/instantclient* && \
+  rm -f *jdbc* *occi* *mysql* *mql1* *ipc1* *jar uidrvci genezi adrci && \
+  echo /opt/oracle/instantclient* > /etc/ld.so.conf.d/oracle-instantclient.conf &&\
+  ldconfig
+
+# fix the font issue of headless control
+RUN apt-get update && apt-get install -y fonts-unfonts-core
+
+RUN apt-get clean \
+  && rm -rf /var/lib/apt/lists/*

package/docker/operato-env/operato-env-create.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+IMAGE_LASTEST=latest
+PLATFORM=linux/amd64
+VERSION=18
+
+if [ $# -eq 0 ] ; then
+  echo "Default Version ${VERSION}"
+  echo "Default Platform ${PLATFORM}"
+else
+  VERSION=$1
+  IMAGE_LASTEST=$2
+  PLATFORM=$3
+fi
+
+docker image build -t hatiolab/operato-env:${VERSION} -t hatiolab/operato-env:${IMAGE_LASTEST} -f Dockerfile --platform ${PLATFORM} .
+
+docker image push hatiolab/operato-env:${VERSION} && docker image push hatiolab/operato-env:${IMAGE_LASTEST}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@fmsim/builder",
+  "version": "0.0.49",
+  "description": "Layout View 어플리케이션 빌드를 위해 구성된 모듈입니다.",
+  "main": "index.js",
+  "author": "Hearty Oh <heartyoh@hatiolab.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "@things-factory:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hatiolab/fmsim.git",
+    "directory": "packages/integrator"
+  },
+  "dependencies": {
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.18.13",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/plugin-proposal-decorators": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/register": "^7.18.9",
+    "@types/jest": "^29.2.1",
+    "@types/lodash": "^4.14.139",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.11",
+    "babel-jest": "^29.2.2",
+    "babel-loader": "^9.1.2",
+    "concurrently": "^8.0.1",
+    "copy-webpack-plugin": "^11.0.0",
+    "copyfiles": "^2.4.1",
+    "cross-fetch": "^3.0.4",
+    "css-loader": "^6.7.3",
+    "docdash": "^2.0.1",
+    "documentation": "^14.0.0",
+    "element-closest": "^3.0.2",
+    "eslint": "^8.39.0",
+    "faker": "^6.6.6",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^11.1.1",
+    "full-icu": "^1.3.0",
+    "get-port": "^6.1.2",
+    "graphql": "^16.5.0",
+    "html-webpack-plugin": "^5.5.0",
+    "intl-pluralrules": "^2.0.0",
+    "jest": "^29.2.2",
+    "lerna": "^6.6.1",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.5.2",
+    "node-polyfill-webpack-plugin": "^2.0.1",
+    "plop": "^3.1.1",
+    "postcss-loader": "^7.3.0",
+    "prettier": "^2.5.1",
+    "raw-loader": "^4.0.2",
+    "replace-in-file-webpack-plugin": "^1.0.6",
+    "rimraf": "^5.0.0",
+    "saddle-up": "^0.5.1",
+    "sass-loader": "^13.2.2",
+    "terser": "^5.1.0",
+    "text-loader": "^0.0.1",
+    "ts-jest": "^29.1.0",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths": "^4.1.0",
+    "typescript": "^5.0.4",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.0",
+    "workbox-webpack-plugin": "^6.5.4"
+  },
+  "gitHead": "59b7cd248a3b0e637d4e124a28829441c4b258b2"
+}

package/web-loaders/things-factory-module-loader.js

@@ -0,0 +1,56 @@
+const debug = require('debug')('things-factory:builder:things-factory-module-loader')
+
+const path = require('path')
+const { orderedModuleNames } = require('@things-factory/env')
+
+const appRootPath = path.resolve('.')
+const selfModulePackage = require(path.resolve(appRootPath, 'package.json'))
+const selfModuleName = selfModulePackage.name
+
+function pkgLoader(moduleName) {
+  try {
+    if (selfModuleName == moduleName) {
+      return selfModulePackage
+    } else {
+      return require(moduleName)
+    }
+  } catch (e) {
+    console.error('load error', e)
+  }
+}
+
+module.exports = function (content) {
+  debug('Module Configuration Begin')
+
+  const moduleConfigMap = orderedModuleNames.reduce((sum, name) => {
+    const pkg = pkgLoader(name + '/package.json')
+    const thingsFactoryConfig = pkg.thingsFactoryConfig ?? 'things-factory.config.js'
+    const config = `${name}/${thingsFactoryConfig}`
+
+    sum[name] = { pkg, config }
+    return sum
+  }, {})
+
+  var result = `
+export var modules = [];
+
+  ${orderedModuleNames
+    .filter(name => moduleConfigMap[name])
+    .map((module, idx) => {
+      return `
+import v${idx} from "${moduleConfigMap[module].config}"
+modules.push({
+  ...v${idx},
+  name: "${moduleConfigMap[module].pkg.name}",
+  version: "${moduleConfigMap[module].pkg.version}",
+  license: "${moduleConfigMap[module].pkg.license}"
+})
+`
+    })
+    .join('')}
+  `
+
+  debug('Module Configuration End.')
+
+  return result
+}

package/web-loaders/things-scene-config-webpack-loader.js

@@ -0,0 +1,18 @@
+const debug = require('debug')('things-factory:builder:things-scene-config-webpack-loader')
+
+const { sceneModuleNames } = require('@things-factory/env')
+
+module.exports = function (content) {
+  const script =
+    'var metas = []\n' +
+    sceneModuleNames
+      .map((name, idx) => {
+        return `import v${idx} from "${name}/things-scene.config.js"\nmetas[${idx}] = v${idx}`
+      })
+      .join('\n') +
+    '\nexport default metas\n'
+
+  debug('Things Scene Components for Modeller\n', script)
+
+  return script
+}

package/web-loaders/things-scene-webpack-loader.js

@@ -0,0 +1,12 @@
+const debug = require('debug')('things-factory:builder:things-scene-webpack-loader')
+
+const { sceneModuleNames } = require('@things-factory/env')
+
+module.exports = function (content) {
+
+  const script = sceneModuleNames.map(component => `import '${component}'\n`).join('')
+
+  debug('Things Scene Components', '\n' + script)
+
+  return script
+}

package/webpack-plugins/folder-override-plugin.js

@@ -0,0 +1,112 @@
+/*
+ * 모든 모듈의 특정 폴더(특히, assets)를 모듈 디펜던시 순서에 따라 오버라이드 및 병합한다.
+ */
+
+const path = require('path')
+const fs = require('fs-extra')
+const glob = require('glob')
+const loaderUtils = require('loader-utils')
+const debug = require('debug')('things-factory:builder:folder-override-plugin')
+
+const { orderedModuleNames, sceneModuleNames, appRootPath } = require('@things-factory/env')
+
+const AppPackage = require(path.resolve(appRootPath, 'package.json'))
+
+class FolderOverridePlugin {
+  constructor(options = {}) {
+    this.options = options
+    this.writtenFrom = {}
+    this.writtenTo = {}
+  }
+
+  apply(compiler) {
+    var contexts = []
+
+    compiler.hooks.thisCompilation.tap({ name: 'FolderOverridePlugin' }, compilation => {
+      /* contexts 초기화 */
+      contexts = []
+      var { target: targetDir } = this.options
+
+      var appname = AppPackage.name
+      var modules = [...orderedModuleNames, ...sceneModuleNames].filter(modulename => modulename !== appname)
+      modules.push(appname)
+      var reversedModuleNames = modules.reverse()
+
+      /* 최상위 모듈부터 복사한다. 하위 모듈에서는 중복 여부에 따라 복사여부를 결정한다. */
+      reversedModuleNames.forEach(m => {
+        if (appname == m) {
+          var modulePath = appRootPath
+        } else {
+          var modulePath = path.dirname(require.resolve(`${m}/package.json`))
+        }
+
+        var sourcePath = path.resolve(modulePath, targetDir)
+        contexts.push(sourcePath)
+
+        var files = glob.sync(`${sourcePath}/**/*`)
+
+        files.forEach(filepath => {
+          let relativePath = path.relative(modulePath, filepath)
+
+          this.write(compilation, filepath, relativePath)
+        })
+      })
+    })
+
+    compiler.hooks.afterEmit.tap({ name: 'FolderOverridePlugin' }, compilation => {
+      // Add context dependencies if they're not already tracked
+      contexts.forEach(context => {
+        if (!compilation.contextDependencies.has(context)) {
+          compilation.contextDependencies.add(context)
+        }
+      })
+    })
+  }
+
+  write(compilation, filepath, relativePath) {
+    var stat = fs.statSync(filepath)
+    if (stat.isDirectory()) {
+      return
+    }
+
+    var content = fs.readFileSync(filepath)
+    const hash = loaderUtils.getHashDigest(content)
+    const webpackTo = loaderUtils.interpolateName(
+      {
+        resourcePath: filepath
+      },
+      relativePath,
+      {
+        content
+      }
+    )
+
+    if (this.writtenTo[webpackTo] && this.writtenTo[webpackTo] !== filepath) {
+      return
+    }
+
+    if (this.writtenFrom[filepath] && this.writtenFrom[filepath][hash]) {
+      // debug(`skipping '${filepath}', because it hasn't changed`)
+      return
+    }
+
+    // debug(`writing '${webpackTo}' from '${filepath}'`)
+    this.writtenTo[webpackTo] = filepath
+    this.writtenFrom[filepath] = {
+      [hash]: true
+    }
+
+    this.writtenFrom[filepath].webpackTo = webpackTo
+
+    compilation.assets[webpackTo] = {
+      size() {
+        return stat.size
+      },
+      source() {
+        return content
+      }
+    }
+  }
+}
+
+module.exports = FolderOverridePlugin

package/webpack-plugins/i18n-bundler-plugin.js

@@ -0,0 +1,100 @@
+/*
+ * 모든 모듈의 translations에 정의된 locale 리소스들을 모두 모아서 하나의 translations로 병합한다.
+ */
+
+const fs = require('fs-extra')
+const path = require('path')
+const glob = require('glob')
+const debug = require('debug')('things-factory:builder:i18n-bundler-plugin')
+
+const { orderedModuleNames, sceneModuleNames, appRootPath } = require('@things-factory/env')
+
+const AppPackage = require(path.resolve(appRootPath, 'package.json'))
+
+function merge(target, source) {
+  for (let key of Object.keys(source)) {
+    if (source[key] instanceof Object) Object.assign(source[key], merge(target[key], source[key]))
+  }
+
+  Object.assign(target || {}, source)
+  return target
+}
+
+class I18nBundlerPlugin {
+  constructor(options = {}) {
+    this.options = options
+  }
+
+  apply(compiler) {
+    var contexts = []
+    var files = []
+
+    compiler.hooks.thisCompilation.tap({ name: 'I18nBundlerPlugin' }, compilation => {
+      /* dependencies 초기화 */
+      contexts = []
+      files = []
+
+      var appname = AppPackage.name
+      var modules = [...orderedModuleNames, ...sceneModuleNames].filter(modulename => modulename !== appname)
+      modules.push(appname)
+
+      var translationsDir = this.options.output || 'translations'
+
+      var translations = modules.reduce((summary, m) => {
+        if (appname == m) {
+          var modulePath = appRootPath
+        } else {
+          var modulePath = path.dirname(require.resolve(`${m}/package.json`))
+        }
+        var translationsPath = path.resolve(modulePath, translationsDir)
+        contexts.push(translationsPath)
+
+        files = glob.sync(`${translationsPath}/*.json`)
+
+        return files.reduce((summary, file) => {
+          try {
+            var contents = fs.readFileSync(file)
+            var json = JSON.parse(contents)
+
+            var filename = file.replace(/^.*[\\\/]/, '')
+            var locale = filename.substring(0, filename.length - 5)
+
+            summary[locale] = merge(summary[locale] || {}, json)
+          } catch (e) {
+            console.error(e)
+          } finally {
+            return summary
+          }
+        }, summary)
+      }, {})
+
+      /* 각 locale 별로 file을 저장한다. */
+      for (let locale in translations) {
+        let localePath = path.join(translationsDir, `${locale}.json`)
+        let content = JSON.stringify(translations[locale], null, 2)
+
+        // debug(`Restoring locale '${locale}' resource into '${localePath}'`)
+
+        compilation.assets[localePath] = {
+          source: function () {
+            return content
+          },
+          size: function () {
+            return content.length
+          }
+        }
+      }
+    })
+
+    compiler.hooks.afterEmit.tap({ name: 'I18nBundlerPlugin' }, compilation => {
+      // Add context dependencies if they're not already tracked
+      contexts.forEach(context => {
+        if (!compilation.contextDependencies.has(context)) {
+          compilation.contextDependencies.add(context)
+        }
+      })
+    })
+  }
+}
+
+module.exports = I18nBundlerPlugin

package/webpack-plugins/theme-override-plugin.js

@@ -0,0 +1,56 @@
+/*
+ * 모든 모듈의 theme 파일들에 오버라이드를 적용해서 최종에 theme css파일로 병합될 파일리스트를 선정하여, webpack의 inputOption에 추가한다.
+ */
+
+const path = require('path')
+const glob = require('glob')
+
+const { orderedModuleNames, appRootPath } = require('@things-factory/env')
+
+const AppPackage = require(`${appRootPath}/package.json`)
+
+class ThemeOverridePlugin {
+  constructor(options = {}) {
+    this.options = options
+    this.writtenFrom = {}
+    this.writtenTo = {}
+  }
+
+  apply(compiler) {
+    compiler.hooks.entryOption.tap({ name: 'ThemeOverridePlugin' }, (context, entry) => {
+      var appname = AppPackage.name
+
+      var { chunk = 'theme', themeFolder = path.join('client', 'themes') } = this.options
+
+      var reversedModuleNames = [...orderedModuleNames, appname].reverse()
+      var themeFiles = {}
+
+      /* 최상위 모듈부터 복사한다. 하위 모듈에서는 중복 여부에 따라 복사여부를 결정한다. */
+      reversedModuleNames.forEach(m => {
+        if (appname == m) {
+          var modulePath = appRootPath
+        } else {
+          var modulePath = path.dirname(require.resolve(`${m}/package.json`))
+        }
+
+        var sourcePath = path.join(modulePath, themeFolder)
+
+        var files = glob.sync(path.join(sourcePath, '*.?(sass|scss|css)'))
+
+        files.forEach(filepath => {
+          let filename = path.basename(filepath)
+
+          if (!themeFiles[filename]) {
+            themeFiles[filename] = filepath
+          }
+        })
+      })
+
+      entry[chunk] = {
+        import: Object.values(themeFiles)
+      }
+    })
+  }
+}
+
+module.exports = ThemeOverridePlugin

package/webpack.config.dev.js

@@ -0,0 +1,268 @@
+const path = require('path')
+const fs = require('fs')
+const webpack = require('webpack')
+const HTMLWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const I18nBundlerPlugin = require('./webpack-plugins/i18n-bundler-plugin')
+const FolderOverridePlugin = require('./webpack-plugins/folder-override-plugin')
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const ThemeOverridePlugin = require('./webpack-plugins/theme-override-plugin')
+const EntryBuilder = require('./controller/entries-builder')
+
+const glob = require('glob')
+const debug = require('debug')('things-factory:builder:webpack.config.dev')
+
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+
+const { appRootPath } = require('@things-factory/env')
+const AppPackage = require(path.resolve(appRootPath, 'package.json'))
+
+const OUTPUT_PATH = path.resolve(appRootPath, 'dist-app')
+
+debug('Output Path: ', OUTPUT_PATH)
+
+const module_resolve = require('resolve')
+
+try {
+  let pathName = module_resolve.sync('@things-factory/shell', {
+    basedir: process.cwd()
+  })
+  var ShellModulePath = path.resolve(pathName, '../..')
+  var NodeModulePath = path.resolve(pathName, '../../../..')
+  var NodeModuleParentPath = path.resolve(NodeModulePath, '..')
+} catch (e) {
+  throw new Error('@things-factory/shell module not found.', e)
+}
+
+try {
+  var BuilderModulePath = path.resolve(
+    module_resolve.sync('@things-factory/builder', {
+      basedir: process.cwd()
+    }),
+    '..'
+  )
+} catch (e) {
+  throw new Error('@things-factory/builder module not found.', e)
+}
+
+debug('FactoryShell Module Path', ShellModulePath)
+debug('External Module Path', NodeModulePath)
+debug('External Module Parent Path', NodeModuleParentPath)
+debug('Builder Module Path', BuilderModulePath)
+
+const ShellPackage = require(path.resolve(ShellModulePath, 'package.json'))
+
+/* check if application root has _index.html for override template */
+try {
+  if (fs.existsSync(path.resolve(appRootPath, '_index.html'))) {
+    var TemplatePath = path.resolve(appRootPath, '_index.html')
+  } else {
+    var TemplatePath = path.resolve(ShellModulePath, '_index.html')
+  }
+} catch (e) {
+  var TemplatePath = path.resolve(ShellModulePath, '_index.html')
+}
+
+let entries = Object.assign({}, EntryBuilder(), {
+  main: [
+    path.resolve(ShellModulePath, 'client', 'index.js'),
+    '@hatiolab/webpack-hot-client/client?path=/__webpack_hmr&timeout=20000&reload=true'
+  ],
+  'headless-scene-components': [path.resolve(ShellModulePath, '.', 'client', 'scene', 'scene-components.js')],
+  'scene-viewer': [path.resolve(ShellModulePath, '.', 'client', 'scene', 'scene-viewer.js')]
+})
+
+module.exports = {
+  mode: 'development',
+  entry: entries,
+  resolve: {
+    aliasFields: ['browser'],
+    alias: {
+      [AppPackage.name]:
+        AppPackage.name == '@hatiolab/things-scene' ? path.resolve(appRootPath, 'src', 'index.js') : appRootPath
+    },
+    extensions: ['.ts', '.js', '.jsx', '.tsx', '.json'],
+    modules: [NodeModulePath]
+  },
+  resolveLoader: {
+    modules: [path.resolve(BuilderModulePath, 'web-loaders'), NodeModulePath]
+  },
+  externals:
+    AppPackage.name == '@hatiolab/things-scene'
+      ? {}
+      : {
+          '@hatiolab/things-scene': 'scene'
+        },
+  output: {
+    path: OUTPUT_PATH,
+    filename: 'fmsim/[name].js',
+    chunkFilename: 'fmsim/[name].js',
+    publicPath: '/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)x?$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              rootMode: 'upward',
+              cacheDirectory: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.mjs$/,
+        type: 'javascript/auto'
+      },
+      {
+        test: /\.(gif|jpe?g|png|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'fmsim/[hash][ext][query]'
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.less$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
+      },
+      {
+        test: /\.bpmn$/,
+        use: 'raw-loader'
+      },
+      {
+        test: /module-importer.import$/,
+        use: {
+          loader: 'things-factory-module-loader',
+          options: {
+            module_path: NodeModulePath
+          }
+        }
+      },
+      {
+        test: /things-scene-components.import$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              rootMode: 'upward',
+              cacheDirectory: true
+            }
+          },
+          {
+            loader: 'things-scene-webpack-loader',
+            options: {
+              module_path: NodeModulePath
+            }
+          }
+        ]
+      },
+      {
+        test: /things-scene-components-with-tools.import$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              rootMode: 'upward',
+              cacheDirectory: true
+            }
+          },
+          {
+            loader: 'things-scene-config-webpack-loader',
+            options: {
+              module_path: NodeModulePath
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new ThemeOverridePlugin({
+      chunk: 'theme',
+      themeFolder: path.join('client', 'themes')
+    }),
+    new HTMLWebpackPlugin({
+      template: TemplatePath,
+      /*
+      Allows to control how chunks should be sorted before they are included to the HTML.
+      Allowed values are 'none' | 'auto' | 'dependency' | 'manual' | {Function}
+      */
+      chunksSortMode: 'none',
+      chunks: ['main', 'theme']
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[name].[hash].css',
+      ignoreOrder: false
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'node_modules/@material-design-icons/font/*',
+          to: OUTPUT_PATH,
+          context: NodeModuleParentPath
+        },
+        {
+          from: 'node_modules/@fontsource/roboto/**/*',
+          to: OUTPUT_PATH,
+          context: NodeModuleParentPath
+        },
+        {
+          from: 'node_modules/@webcomponents/webcomponentsjs/*',
+          to: OUTPUT_PATH,
+          context: NodeModuleParentPath
+        },
+        {
+          from: 'node_modules/web-animations-js/web-animations-next.min.js*',
+          to: OUTPUT_PATH,
+          context: NodeModuleParentPath
+        },
+        {
+          from: 'node_modules/@hatiolab/things-scene/*.js*',
+          to: OUTPUT_PATH,
+          noErrorOnMissing: true,
+          context: NodeModuleParentPath
+        }
+      ]
+    }),
+    new FolderOverridePlugin({
+      target: 'views'
+    }),
+    new FolderOverridePlugin({
+      target: 'assets'
+    }),
+    new FolderOverridePlugin({
+      target: 'helps'
+    }),
+    new I18nBundlerPlugin({
+      output: 'translations'
+    }),
+    new WorkboxWebpackPlugin.InjectManifest({
+      swSrc: path.resolve(ShellModulePath, 'client/serviceworker/sw-src.js'),
+      swDest: 'service-worker.js',
+      maximumFileSizeToCacheInBytes: 50000000,
+      exclude: [/^helps\//, /headless/, /openapi/] // exclude help files, headless files
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE-ENV': JSON.stringify('development'),
+        'SHELL-VERSION': JSON.stringify(ShellPackage.version),
+        'SHELL-LICENSE': JSON.stringify(ShellPackage.license),
+        'APP-VERSION': JSON.stringify(AppPackage.version),
+        'APP-LICENSE': JSON.stringify(AppPackage.license),
+        'APP-NAME': JSON.stringify(AppPackage.name),
+        'APP-DESCRIPTION': JSON.stringify(AppPackage.description),
+        'APP-TAGLINE': JSON.stringify(AppPackage.tagline)
+      }
+    })
+  ],
+  devtool: 'eval-cheap-module-source-map'
+}

package/webpack.config.js

@@ -0,0 +1,265 @@
+const path = require('path')
+const fs = require('fs')
+const webpack = require('webpack')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HTMLWebpackPlugin = require('html-webpack-plugin')
+const I18nBundlerPlugin = require('./webpack-plugins/i18n-bundler-plugin')
+const FolderOverridePlugin = require('./webpack-plugins/folder-override-plugin')
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const ThemeOverridePlugin = require('./webpack-plugins/theme-override-plugin')
+const EntryBuilder = require('./controller/entries-builder')
+
+const glob = require('glob')
+const debug = require('debug')('things-factory:builder:webpack.config')
+
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+
+const { appRootPath } = require('@things-factory/env')
+const AppPackage = require(path.resolve(appRootPath, 'package.json'))
+
+const OUTPUT_PATH = path.resolve(appRootPath, 'dist-app')
+
+debug('Output Path: ', OUTPUT_PATH)
+
+const module_resolve = require('resolve')
+
+try {
+  let pathName = module_resolve.sync('@things-factory/shell', {
+    basedir: process.cwd()
+  })
+  var ShellModulePath = path.resolve(pathName, '../..')
+  var NodeModulePath = path.resolve(pathName, '../../../..')
+  var NodeModuleParentPath = path.resolve(NodeModulePath, '..')
+} catch (e) {
+  throw new Error('@things-factory/shell module not found.', e)
+}
+
+try {
+  var BuilderModulePath = path.resolve(
+    module_resolve.sync('@things-factory/builder', {
+      basedir: process.cwd()
+    }),
+    '..'
+  )
+} catch (e) {
+  throw new Error('@things-factory/builder module not found.', e)
+}
+
+debug('FactoryShell Module Path', ShellModulePath)
+debug('External Module Path', NodeModulePath)
+debug('External Module Parent Path', NodeModuleParentPath)
+debug('Builder Module Path', BuilderModulePath)
+
+const ShellPackage = require(path.resolve(ShellModulePath, 'package.json'))
+
+/* check if application root has _index.html for override template */
+try {
+  if (fs.existsSync(path.resolve(appRootPath, '_index.html'))) {
+    var TemplatePath = path.resolve(appRootPath, '_index.html')
+  } else {
+    var TemplatePath = path.resolve(ShellModulePath, '_index.html')
+  }
+} catch (e) {
+  var TemplatePath = path.resolve(ShellModulePath, '_index.html')
+}
+
+debug('Index.html TemplatePath', TemplatePath)
+
+let entries = Object.assign({}, EntryBuilder(), {
+  main: path.resolve(ShellModulePath, 'client', 'index.js'),
+  'headless-scene-components': [path.resolve(ShellModulePath, '.', 'client', 'scene', 'scene-components.js')],
+  'scene-viewer': [path.resolve(ShellModulePath, '.', 'client', 'scene', 'scene-viewer.js')]
+})
+
+module.exports = {
+  mode: 'production',
+  entry: entries,
+  resolve: {
+    aliasFields: ['browser'],
+    alias: {
+      [AppPackage.name]:
+        AppPackage.name == '@hatiolab/things-scene' ? path.resolve(appRootPath, 'src', 'index.js') : appRootPath
+    },
+    extensions: ['.ts', '.js', '.jsx', '.tsx', '.json'],
+    modules: [NodeModulePath]
+  },
+  resolveLoader: {
+    modules: [path.resolve(BuilderModulePath, 'web-loaders'), NodeModulePath]
+  },
+  externals:
+    AppPackage.name == '@hatiolab/things-scene'
+      ? {}
+      : {
+          '@hatiolab/things-scene': 'scene'
+        },
+  output: {
+    path: OUTPUT_PATH,
+    filename: 'fmsim/[name].js',
+    chunkFilename: 'fmsim/[name].js',
+    publicPath: '/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)x?$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              rootMode: 'upward',
+              cacheDirectory: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.mjs$/,
+        type: 'javascript/auto'
+      },
+      {
+        test: /\.(gif|jpe?g|png|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'fmsim/[hash][ext][query]'
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.less$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
+      },
+      {
+        test: /module-importer.import$/,
+        use: {
+          loader: 'things-factory-module-loader',
+          options: {
+            module_path: NodeModulePath
+          }
+        }
+      },
+      {
+        test: /things-scene-components.import$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              rootMode: 'upward',
+              cacheDirectory: true
+            }
+          },
+          {
+            loader: 'things-scene-webpack-loader',
+            options: {
+              module_path: NodeModulePath
+            }
+          }
+        ]
+      },
+      {
+        test: /things-scene-components-with-tools.import$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              rootMode: 'upward',
+              cacheDirectory: true
+            }
+          },
+          {
+            loader: 'things-scene-config-webpack-loader',
+            options: {
+              module_path: NodeModulePath
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new ThemeOverridePlugin({
+      chunk: 'theme',
+      themeFolder: path.join('client', 'themes')
+    }),
+    new HTMLWebpackPlugin({
+      template: TemplatePath,
+      /*
+      Allows to control how chunks should be sorted before they are included to the HTML.
+      Allowed values are 'none' | 'auto' | 'dependency' | 'manual' | {Function}
+      */
+      chunksSortMode: 'none',
+      chunks: ['main', 'theme']
+    }),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // all options are optional
+      filename: 'fmsim/[name].css',
+      chunkFilename: 'fmsim/[name].[hash].css',
+      ignoreOrder: false // Enable to remove warnings about conflicting order
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'node_modules/@material-design-icons/font/*',
+          to: OUTPUT_PATH + '/fmsim',
+          context: NodeModuleParentPath
+        },
+        {
+          from: 'node_modules/@fontsource/roboto/**/*',
+          to: OUTPUT_PATH + '/fmsim',
+          context: NodeModuleParentPath
+        },
+        {
+          from: 'node_modules/@webcomponents/webcomponentsjs/*',
+          to: OUTPUT_PATH + '/fmsim',
+          context: NodeModuleParentPath
+        },
+        {
+          from: 'node_modules/web-animations-js/web-animations-next.min.js*',
+          to: OUTPUT_PATH + '/fmsim',
+          context: NodeModuleParentPath
+        },
+        {
+          from: 'node_modules/@hatiolab/things-scene/*.js*',
+          to: OUTPUT_PATH + '/fmsim',
+          noErrorOnMissing: true,
+          context: NodeModuleParentPath
+        }
+      ]
+    }),
+    new FolderOverridePlugin({
+      target: 'views'
+    }),
+    new FolderOverridePlugin({
+      target: 'assets'
+    }),
+    new FolderOverridePlugin({
+      target: 'helps'
+    }),
+    new I18nBundlerPlugin({
+      output: 'translations'
+    }),
+    new WorkboxWebpackPlugin.InjectManifest({
+      swSrc: path.resolve(ShellModulePath, 'client/serviceworker/sw-src.js'),
+      swDest: 'service-worker.js',
+      maximumFileSizeToCacheInBytes: 50000000,
+      exclude: [/^helps\//, /headless/, /openapi/] // exclude help files, headless files
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE-ENV': JSON.stringify('production'),
+        'SHELL-VERSION': JSON.stringify(ShellPackage.version),
+        'SHELL-LICENSE': JSON.stringify(ShellPackage.license),
+        'APP-VERSION': JSON.stringify(AppPackage.version),
+        'APP-LICENSE': JSON.stringify(AppPackage.license),
+        'APP-NAME': JSON.stringify(AppPackage.name),
+        'APP-DESCRIPTION': JSON.stringify(AppPackage.description),
+        'APP-TAGLINE': JSON.stringify(AppPackage.tagline)
+      }
+    }),
+    new NodePolyfillPlugin()
+  ]
+}