@vcmap/ui 5.0.0-rc.6

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 virtualcitySYSTEMS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# VC Map
+VC Map is an Open-Source JavaScript framework and API for building dynamic and interactive maps on the web. It can display
+2D data, oblique imagery and massive 3D data including terrain data, vector data, mesh models, and point clouds making it
+easy for users to explore and interact with the data in an integrated and high-performance map application. VC Map apps can
+be rendered in all modern web browsers and on both desktop and mobile devices, bringing the map to where the user is.
+VC Map is built upon open, proven, and reliable GIS and web technologies such as [OpenLayers](https://github.com/openlayers/openlayers)
+and [Cesium](https://github.com/cesiumGS/cesium/) for the visualization of 2D and 3D geo-data. It can load and display data
+from various sources and in different formats including open OGC standards and interfaces. Users can easily switch between
+the 2D, oblique and 3D views and dynamically add map layers to the scene that are accessible in all views. The VC Map
+framework offers ready-to-use map tools and widgets that can be flexibly combined in a VC Map app to meet the needs and demands of end-users and the target audience. Examples are navigation controls, map layers and legends, drawing and editing tools, split screens, camera flights, and GIS tools such as measurements, height profiles, view shed analysis, or real-time shadows.
+VC Map provides a strong programming API for developers that makes it easy to build customized VC Map applications,
+to integrate VC Maps into any web page and to extend its functionalities with own plugins. The VC Map framework and API
+is structured into the following four main architectural layers:
+
+#### [VC Map Core](https://github.com/virtualcitySYSTEMS/map-core)
+The VC Map Core is a thin abstraction layer and wrapper around OpenLayers and Cesium. It provides a common data and feature
+management API and automatically synchronizes data and user actions between the 2D, oblique and 3D views. Map functions and
+tools can be developed against this Core API to make them available in 2D, 3D and the oblique view rather than having to
+develop them redundantly and based on different technologies.
+
+#### Configuration Management
+The VC Map framework offers a flexible and fully customizable map configuration management. All contents of a VC Map application
+such as available layers, views, tools, and plugins are managed in a JSON-based configuration file that is loaded when starting
+the application. Every VC Map application can thus be easily configured according to the end-user needs. Map configurations can
+be dynamically changed, extended, and serialized at runtime through a corresponding API.
+
+#### Modern User Interface
+VC Map comes with a modern UI interface for VC Map applications that provides UI components for all map tools and widgets
+implemented based on Vue.js and HTML5. In addition, the VC Map framework provides pre-built, low-level UI elements that can
+be used by developers to easily build more complex user dialogs from and include them in a map application.
+
+#### [Plugin API](https://github.com/virtualcitySYSTEMS/map-plugin-cli)
+VC Map is easy to customize and extend through a well-defined Plugin API. Plugins allow for adding new functionalities,
+tools, and user dialogs to a VC Map application. Plugins can be added to a VC Map through the configuration file or loaded
+dynamically to an existing map application using the Plugin API. Plugin developers can use the entire VC Map stack
+(VC Map Core, configuration management, UI components) for building their own extensions.
+
+# Components
+### [@vcmap/core](https://github.com/virtualcitySYSTEMS/map-core)
+Provides an abstraction layer around 2D, 3D and oblique Maps. Provides the following components:
+- map abstraction for Cesium, Openlayers and Oblique Images
+- layers
+- interactions
+- styles
+- application and context/config handling
+
+### [@vcsuite/ui-components](https://github.com/virtualcitySYSTEMS/suite-ui-components)
+Collection of reusable dumb ui components. For example textfield, checkbox, lists, icons. The components are build on top of [vuetify](https://github.com/vuetifyjs/vuetify)
+
+### [@vcmap/ui](https://github.com/virtualcitySYSTEMS/map-ui)
+This Project, provides
+- a configurable and extendable ui
+- extends the @vcmap/core application handling with a plugin Concept, see [@vcmap/plugin-cli](https://github.com/virtualcitySYSTEMS/map-plugin-cli)
+- extends the @vcmap/core application with a windowManager 
+
+### [@vcmap/plugin-cli](https://github.com/virtualcitySYSTEMS/map-plugin-cli)
+Provides a tool to create, develop and build Plugins for the @vcmap/ui.
+Plugin Concept documentation can also be found there. 
+
+### [@vcmap/ui webpack5 integration template](https://github.com/virtualcitySYSTEMS/map-ui-webpack5-example)
+Example Template to show how to integrate the @vcmap/ui in a webpack5 project.
+
+### [@vcmap/core demo](https://github.com/virtualcitySYSTEMS/map-core-demo)
+Example demo Application based on the @vcmap/core, shows how to implement a different UI on top of the @vcmap/core
+
+# Project and Component Status
+The Project is currently in Alpha status. Different components have different states. For development check here 
+how safe it is to start developing with these components.
+
+#### States:
+- TODO: not yet usable
+- ALPHA: 1. version, style and API will probably change
+- BETA: Style and API may change, we will provide a changelog from here on.
+- RC: Styles and API are most likely stable for the release / Featurecomplete.
+- STABLE: conforms to SemVer concept. 
+
+### @vcsuite/ui-components
+- VcsTextField BETA
+- VcsCheckbox BETA
+- VcsSelect BETA
+- VcsButton ALPHA
+- VcsFormattedNumber BETA
+- VcsLabel BETA
+- VcsTooltip ALPHA 
+- VcsActionButtonList ALPHA 
+- VcsActionList ALPHA 
+- VcsFormSection ALPHA 
+- VcsTreeView ALPHA 
+- VcsTreeViewItem ALPHA 
+- VcsList TODO 
+- VcsListItem TODO
+- VcsBadge ALPHA 
+- VcsColorPicker TODO 
+- VcsDatePicker TODO
+
+### @vcmap/core
+- Context Concept RC
+- Categories Concept BETA
+- Layers/Maps RC
+- Styles: BETA
+- Interactions: BETA
+- oblique RC
+- FeatureProvider BETA
+- ClassRegistry BETA
+- Editor TODO
+
+### @vcmap/ui
+- contentTree API BETA
+- windowManager API BETA
+- Navbar/ButtonManager/ToolboxManager ALPHA
+- OrientationTools BETA
+- ActionConcept BETA
+- PluginConcept RC
+- SEARCH API TODO
+
+
+# Getting started
+For a first start, clone the repo and call `npm i` `npm run start` This will start a development server. The 
+app can be opened with http://localhost:8080.
+
+Further Information see [Development](documentation/DEVELOPMENT.md) and [Plugin-cli](https://github.com/virtualcitySYSTEMS/map-plugin-cli).
+
+## Included Dataset
+The included datasets for Berlin and Osnabrück in the app configurations in the project can only be used for Development.
+For further usage of the datasets please contact [Virtual City Systems](https://vc.systems).
+
+
+
+
+
+
+

package/build/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": ["@vcsuite/eslint-config/node"],
+  "rules": {
+    "import/no-extraneous-dependencies": "off"
+  }
+}

package/build/build.js

@@ -0,0 +1,165 @@
+import path from 'path';
+import { build } from 'vite';
+import { v4 as uuid } from 'uuid';
+import rollupPluginStripPragma from 'rollup-plugin-strip-pragma';
+import vcsOl from '@vcmap/rollup-plugin-vcs-ol';
+import generateOLLib from './generateOLLib.js';
+import buildCesium from './buildCesium.js';
+import { buildLibrary, libraries } from './buildHelpers.js';
+
+/**
+ * @typedef {Object} LibraryBuildOption
+ * @property {string} lib
+ * @property {string} entry
+ * @property {string} [libraryEntry]
+ * @property {import("rollup").RollupOptions} [rollupOptions]
+ */
+
+/**
+ * @returns {{ libraryBuildOptions: Object<string, LibraryBuildOption>, libraryPaths: Object<string, string> }}
+ */
+function hashLibraries() {
+  /** @type {Object<string, LibraryBuildOption>} */
+  const libraryBuildOptions = {
+    vue: {
+      entry: path.join('lib', 'vue.js'),
+    },
+    '@vue/composition-api': {
+      entry: path.join('lib', 'vue-composition-api.js'),
+    },
+    '@vcmap/cesium': {
+      entry: path.join('lib', 'cesium.js'),
+      rollupOptions: {
+        plugins: [rollupPluginStripPragma({
+          pragmas: ['debug'],
+        })],
+      },
+    },
+    ol: {
+      entry: path.join('lib', 'olLib.js'),
+      libraryEntry: path.join('lib', 'ol.js'), // openlayers special case, the entry to compile is the olLib, but the public entry must be ol.js
+      rollupOptions: {
+        output: {
+          manualChunks: () => 'ol.js', // this is needed, otherwise vitejs will create multiple chunks for openlayers.
+        },
+      },
+    },
+    '@vcmap/core': {
+      entry: path.join('lib', 'core.js'),
+      rollupOptions: {
+        plugins: [vcsOl()],
+      },
+    },
+    '@vcmap/ui': {
+      rollupOptions: {
+        plugins: [
+          vcsOl(),
+          {
+            transform(source, sid) {
+              if (/src(\/|\\)setup.js/.test(sid)) {
+                return source.replace('/node_modules/@vcmap/cesium/Source/', './assets/cesium/');
+              }
+              return source;
+            },
+          },
+        ],
+      },
+      entry: path.join('lib', 'ui.js'),
+    },
+    'vuetify/lib': {
+      entry: path.join('lib', 'vuetify.js'),
+    },
+    '@vcsuite/ui-components': {
+      entry: path.join('lib', 'uicomponents.js'),
+    },
+  };
+
+  const libraryPaths = {};
+  Object.entries(libraryBuildOptions)
+    .forEach(([key, value]) => {
+      if (!libraries[key]) {
+        throw new Error(`Trying to build unexported library ${key}`);
+      }
+      value.lib = libraries[key];
+      value.hash = `${uuid().substring(0, 6)}`;
+      libraryPaths[key] = `./${value.lib}.${value.hash}.js`;
+      value.rollupOptions = value.rollupOptions ? value.rollupOptions : {};
+    });
+
+  return { libraryBuildOptions, libraryPaths };
+}
+
+const { libraryBuildOptions, libraryPaths } = hashLibraries();
+console.log('Building ol dump file');
+await generateOLLib();
+
+console.log('Building app');
+await build({
+  configFile: './build/commonViteConfig.js',
+  base: './',
+  build: {
+    minify: true,
+    emptyOutDir: true,
+    rollupOptions: {
+      external: Object.keys(libraries),
+      output: {
+        paths: libraryPaths,
+      },
+    },
+  },
+});
+
+console.log('Building Libraries');
+await Promise.all(Object.entries(libraryBuildOptions).map(async ([key, value]) => {
+  console.log('Building Library: ', key);
+  const external = Object.keys(libraryBuildOptions).filter((library) => { return key !== library; });
+  const output = {
+    ...value.rollupOptions?.output,
+    paths: libraryPaths,
+  };
+  const libraryConfig = {
+    configFile: './build/commonViteConfig.js',
+    esbuild: {
+      minify: true,
+    },
+    build: {
+      write: false,
+      emptyOutDir: false,
+      lib: {
+        entry: path.resolve(process.cwd(), value.entry),
+        formats: ['es'],
+        fileName: `assets/${value.lib}.${value.hash}`,
+      },
+      rollupOptions: {
+        ...value.rollupOptions,
+        output,
+        external,
+      },
+    },
+  };
+  await buildLibrary(libraryConfig, 'assets', value.lib, value.hash);
+  console.log('Building Library Entry: ', key);
+
+  const libraryEntryConfig = {
+    configFile: false,
+    build: {
+      emptyOutDir: false,
+      lib: {
+        entry: path.resolve(process.cwd(), value.libraryEntry || value.entry),
+        formats: ['es'],
+        fileName: () => { return `assets/${value.lib}.js`; },
+      },
+      rollupOptions: {
+        ...value.rollupOptions,
+        external: [key],
+        output: {
+          paths: libraryPaths,
+        },
+      },
+    },
+  };
+  await build(libraryEntryConfig);
+}));
+
+await buildCesium();
+console.log('Finished Building vcMap');

package/build/buildCesium.js

@@ -0,0 +1,19 @@
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * copies Cesium Assets and Workers to dist folder
+ * @returns {Promise<void>}
+ */
+export default async function buildCesium() {
+  const cesiumPath = path.join(process.cwd(), 'node_modules', '@vcmap', 'cesium', 'Build', 'Cesium');
+  const buildPath = path.join(process.cwd(), 'dist', 'assets', 'cesium');
+  return Promise.all([
+    fs.promises.cp(path.join(cesiumPath, 'Assets'), path.join(buildPath, 'Assets'), {
+      recursive: true,
+    }),
+    fs.promises.cp(path.join(cesiumPath, 'Workers'), path.join(buildPath, 'Workers'), {
+      recursive: true,
+    }),
+  ]);
+}

package/build/buildHelpers.js

@@ -0,0 +1,213 @@
+/* eslint import/no-extraneous-dependencies: ["error", { "devDependencies": false }] */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { build } from 'vite'; // vite is also a plugin-cli dep
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+/**
+ * @param {...string} pathSegments
+ * @returns {string}
+ */
+export function getProjectPath(...pathSegments) {
+  return path.join(path.dirname(fileURLToPath(import.meta.url)), '..', ...pathSegments);
+}
+
+/**
+ * returns the absolute path to the plugin directory
+ * @returns {string}
+ */
+export function getPluginDirectory() {
+  return getProjectPath('plugins');
+}
+
+/**
+ * Gets the names of the plugins defined in the plugins/package.json
+ * @returns {Promise<Array<string>>}
+ */
+export async function getPluginNames() {
+  const pluginsDir = getPluginDirectory();
+  const packageJsonContent = await fs.promises.readFile(path.join(pluginsDir, 'package.json'));
+  const {
+    dependencies: plugins,
+    optionalDependencies: internalPlugins,
+  } = JSON.parse(packageJsonContent.toString());
+  const pluginNames = plugins ? Object.keys(plugins) : [];
+  if (internalPlugins) { // internal plugins are mapped as optional dependencies only add them, if they exist
+    Object.keys(internalPlugins)
+      .forEach((internalPlugin) => {
+        if (fs.existsSync(path.join(pluginsDir, 'node_modules', ...internalPlugin.split('/')))) {
+          pluginNames.push(internalPlugin);
+        }
+      });
+  }
+  return pluginNames;
+}
+
+/**
+ * @returns {Promise<Array<string>>}
+ */
+export async function getInlinePlugins() {
+  const pluginsDirectory = getPluginDirectory();
+  const dirs = await fs.promises.readdir(pluginsDirectory, { withFileTypes: true });
+  const topLevelDirs = dirs
+    .filter(d => d.isDirectory() && d.name !== 'node_modules');
+  const plugins = [];
+  const scopes = [];
+  topLevelDirs.forEach((d) => {
+    if (d.name.startsWith('@')) {
+      scopes.push(d.name);
+    } else {
+      plugins.push(d.name);
+    }
+  });
+
+  await Promise.all(scopes.map(async (scope) => {
+    const scopeDirs = await fs.promises.readdir(path.join(pluginsDirectory, scope), { withFileTypes: true });
+    scopeDirs
+      .filter(d => d.isDirectory() && d.name !== 'node_modules')
+      .forEach((d) => {
+        plugins.push(`${scope}/${d.name}`);
+      });
+  }));
+  return plugins;
+}
+
+/**
+ * builds the given configuration and writes the library to the provided outputFolder. If the build contains css a .css
+ * file will also be written and injected into the .js file.
+ * @param {Object} libraryConfig Vitejs InlineConfig
+ * @param {string} outputFolder
+ * @param {string} library
+ * @param {string} [hash]
+ * @param {boolean} [base64Css = false] inline css. must be true for plugins
+ * @returns {Promise<void>}
+ */
+export async function buildLibrary(libraryConfig, outputFolder, library, hash = '', base64Css = false) {
+  const cssInjectorCode = `
+function loadCss(href) {
+  return new Promise((resolve, reject) => {
+    const elem = document.createElement('link');
+    elem.rel = 'stylesheet';
+    elem.href = href;
+    elem.defer = false;
+    elem.async = false;
+    elem.onload = resolve;
+    elem.onerror = reject;
+    document.head.appendChild(elem);
+  });
+}`;
+
+  const write = async (output) => {
+    const addedHash = hash ? `.${hash}` : '';
+    let css = false;
+    if (output[1] && output[1].type === 'asset') {
+      if (base64Css) {
+        css = `data:text/css;base64,${Buffer.from(output[1].source).toString('base64url')}`;
+      } else {
+        await fs.promises.writeFile(path.join(process.cwd(), 'dist', outputFolder, `${library}${addedHash}.css`), output[1].source);
+        css = `./${outputFolder}/${library}${addedHash}.css`;
+      }
+    }
+    if (output[0] && output[0].type === 'chunk') {
+      let code = css ? `${cssInjectorCode} await loadCss('${css}');` : '';
+      code += output[0].code;
+      await fs.promises.writeFile(path.join(process.cwd(), 'dist', outputFolder, `${library}${addedHash}.js`), code);
+    }
+  };
+
+  const libraryBuilds = await build(libraryConfig);
+  if (Array.isArray(libraryBuilds)) {
+    await write(libraryBuilds[0].output);
+  } else if (libraryBuilds.output) {
+    await write(libraryBuilds.output);
+  } else {
+    libraryBuilds.prependListener('event', async (event) => {
+      // debounce
+      if (event.code === 'BUNDLE_END') {
+        const res = await event.result.generate(libraryConfig?.build?.rollupOptions?.output ?? {});
+        await write(res.output);
+      }
+    });
+  }
+}
+
+/**
+ * A map, mapping external module name to output library name.
+ * @enum {string}
+ */
+export const libraries = {
+  vue: 'vue',
+  '@vue/composition-api': 'vue-composition-api',
+  '@vcmap/cesium': 'cesium',
+  ol: 'ol',
+  '@vcmap/core': 'core',
+  '@vcmap/ui': 'ui',
+  'vuetify/lib': 'vuetify',
+  '@vcsuite/ui-components': 'uicomponents',
+};
+
+/**
+ * Will build a preview of all the current plugins & inline plugins
+ * @param {import("vite").InlineConfig} [baseConfig={}] - the base config to use. build & esbuild will be completely overwritten
+ * @param {boolean} [minify=true]
+ * @returns {Promise<void>}
+ */
+export async function buildPluginsForPreview(baseConfig = {}, minify = true) {
+  const pluginsDirectory = getPluginDirectory();
+  const inlinePlugins = await getInlinePlugins();
+  const dependentPlugins = await getPluginNames();
+
+  const promises = inlinePlugins.map(async (plugin) => {
+    // the relative path between plugins and libraries, is not known beforehand, so we calculate the distance.
+    // posixRelativePath is the relative path between the index.js of the plugin and the specific library.
+    const relativePluginPaths = {};
+    Object.entries(libraries).forEach(([key, value]) => {
+      const libraryPath = path.join('dist', 'assets', `${value}.js`);
+      const pluginPath = path.join(process.cwd(), `dist/plugins/${plugin}/`);
+      const relativePath = path.relative(pluginPath, libraryPath);
+      relativePluginPaths[key] = relativePath.split(path.sep).join(path.posix.sep);
+    });
+
+    const pluginConfig = {
+      ...baseConfig,
+      esbuild: {
+        minify,
+      },
+      build: {
+        write: false,
+        emptyOutDir: false,
+        outDir: `dist/plugins/${plugin}/`,
+        lib: {
+          entry: getProjectPath('plugins', plugin, 'index.js'),
+          formats: ['es'],
+          fileName: 'index',
+        },
+        rollupOptions: {
+          external: Object.keys(libraries),
+          output: {
+            paths: relativePluginPaths,
+          },
+        },
+      },
+    };
+    await fs.promises.mkdir(path.join(process.cwd(), 'dist', 'plugins', plugin), { recursive: true });
+    await buildLibrary(pluginConfig, `plugins/${plugin}`, 'index', '', true);
+  });
+
+  promises.push(...dependentPlugins.map((pluginName) => {
+    let scope = '';
+    let name = pluginName;
+    if (pluginName.startsWith('@')) {
+      [scope, name] = pluginName.split('/');
+    }
+
+    return fs.promises.cp(
+      path.join(pluginsDirectory, 'node_modules', scope, name, 'dist'),
+      path.join(process.cwd(), 'dist', 'plugins', scope, name),
+      { recursive: true },
+    );
+  }));
+
+  await Promise.all(promises);
+}

package/build/buildPreview.js

@@ -0,0 +1,23 @@
+import fs from 'fs';
+import path from 'path';
+import vcsOl from '@vcmap/rollup-plugin-vcs-ol';
+import { buildPluginsForPreview, getProjectPath } from './buildHelpers.js';
+
+console.log('Building Plugins');
+await Promise.all([
+  buildPluginsForPreview({
+    configFile: './build/commonViteConfig.js',
+    plugins: [vcsOl()],
+  }, true),
+  fs.promises.cp(
+    getProjectPath('map.config.json'),
+    path.join(process.cwd(), 'dist', 'map.config.json'),
+  ),
+  fs.promises.cp(
+    getProjectPath('config'),
+    path.join(process.cwd(), 'dist', 'config'),
+    {
+      recursive: true,
+    },
+  ),
+]);

package/build/commonViteConfig.js

@@ -0,0 +1,39 @@
+/* eslint-disable import/extensions */
+import path from 'path';
+import { defineConfig } from 'vite';
+import { createVuePlugin } from 'vite-plugin-vue2';
+import Components from 'unplugin-vue-components/vite';
+import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
+import { libraries } from './buildHelpers.js';
+
+const configMain = defineConfig({
+  resolve: {
+    alias: {
+      '@vcmap/ui': `${path.resolve(process.cwd(), 'index.js')}`,
+      vue: 'vue/dist/vue.esm.js',
+      tinyqueue: 'tinyqueue/tinyqueue.js',
+    },
+    dedupe: Object.keys(libraries),
+    preserveSymlinks: false,
+  },
+  plugins: [
+    createVuePlugin(),
+    Components({
+      resolvers: [
+        VuetifyResolver(),
+      ],
+      dirs: ['src'],
+      include: [],
+      exclude: [],
+    }),
+  ],
+  css: {
+    preprocessorOptions: {
+      sass: {
+        additionalData: "\n@import './node_modules/@vcsuite/ui-components/src/styles/variables.scss'\n",
+      },
+    },
+  },
+});
+
+export default configMain;

package/build/determineHost.js

@@ -0,0 +1,46 @@
+/* eslint import/no-extraneous-dependencies: ["error", { "devDependencies": false }] */
+import os from 'os';
+
+/**
+ * Determine the host based on the _first_ non internal interface. Used if server is started with an empty "--host" flag.
+ * @returns {string|null}
+ */
+export function determineHostIpFromInterfaces() {
+  const interFace = Object.values(os.networkInterfaces())
+    .flatMap(nInterface => nInterface ?? [])
+    .find(detail => detail && detail.address && !detail.internal && detail.family === 'IPv4');
+  return interFace?.address ?? null;
+}
+
+/**
+ * @param {number} [defaultPort=8080]
+ * @param {boolean} [defaultHttps=false]
+ * @param {string} [defaultHost='127.0.0.1']
+ * @returns {string}
+ */
+export function determineHostFromArgv(defaultPort = 8080, defaultHttps = false, defaultHost = '127.0.0.1') {
+  let port = defaultPort;
+  const portIndex = process.argv.indexOf('--port');
+  if (portIndex > -1 && process.argv.length > portIndex + 1) {
+    const portNumber = Number(process.argv[portIndex + 1]);
+    if (Number.isFinite(portNumber)) {
+      port = portNumber;
+    }
+  }
+
+  let protocol = defaultHttps ? 'https' : 'http';
+  if (process.argv.includes('--https')) {
+    protocol = 'https';
+  }
+
+  const hostIndex = process.argv.indexOf('--host');
+  let host = defaultHost;
+  if (hostIndex > -1) {
+    if (process.argv.length > hostIndex + 1 && !process.argv[hostIndex + 1].startsWith('-')) {
+      host = process.argv[hostIndex + 1];
+    } else {
+      host = determineHostIpFromInterfaces() ?? host;
+    }
+  }
+  return `${protocol}://${host}:${port}`;
+}