@vcmap/ui 5.0.0-rc.8 → 5.0.0

package/build/buildHelpers.js

@@ -3,6 +3,7 @@
 import { build } from 'vite'; // vite is also a plugin-cli dep
 import fs from 'fs';
 import path from 'path';
+import { createHash } from 'crypto';
 import { fileURLToPath } from 'url';
 
 /**
@@ -10,7 +11,33 @@ import { fileURLToPath } from 'url';
  * @returns {string}
  */
 export function getProjectPath(...pathSegments) {
-  return path.join(path.dirname(fileURLToPath(import.meta.url)), '..', ...pathSegments);
+  return path.join(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+    ...pathSegments,
+  );
+}
+
+export async function getFileMd5(filePath) {
+  const hash = createHash('md5');
+  const stream = fs.createReadStream(filePath);
+  // eslint-disable-next-line no-restricted-syntax
+  for await (const chunk of stream) {
+    hash.update(chunk);
+  }
+  return hash.digest('hex');
+}
+
+export async function* getFilesInDirectory(filePath) {
+  const entries = await fs.promises.readdir(filePath, { withFileTypes: true });
+  // eslint-disable-next-line no-restricted-syntax
+  for (const file of entries) {
+    if (file.isDirectory()) {
+      yield* getFilesInDirectory(path.join(filePath, file.name));
+    } else if (file.isFile()) {
+      yield path.join(filePath, file.name);
+    }
+  }
 }
 
 /**
@@ -23,23 +50,28 @@ export function getPluginDirectory() {
 
 /**
  * Gets the names of the plugins defined in the plugins/package.json
+ * @param {boolean} [noOptional=false]
  * @returns {Promise<Array<string>>}
  */
-export async function getPluginNames() {
+export async function getPluginNames(noOptional) {
   const pluginsDir = getPluginDirectory();
-  const packageJsonContent = await fs.promises.readFile(path.join(pluginsDir, 'package.json'));
-  const {
-    dependencies: plugins,
-    optionalDependencies: internalPlugins,
-  } = JSON.parse(packageJsonContent.toString());
+  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);
-        }
-      });
+  if (!noOptional && 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;
 }
@@ -49,9 +81,12 @@ export async function getPluginNames() {
  */
 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 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) => {
@@ -62,17 +97,49 @@ export async function getInlinePlugins() {
     }
   });
 
-  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}`);
-      });
-  }));
+  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;
 }
 
+/**
+ * Writes content in the file and replaces references to public assets with the hashed url.
+ * @param {string} filePath
+ * @param {string} content
+ * @param {Map<string, string>?} rewrittenPublicAssets
+ * @param {string?} assetsPrefix prefixes the hashed asset url with this string
+ * @returns {Promise<void>}
+ */
+export async function writeRewrittenFile(
+  filePath,
+  content,
+  rewrittenPublicAssets,
+  assetsPrefix,
+) {
+  let fileContent = content;
+  if (rewrittenPublicAssets) {
+    rewrittenPublicAssets.forEach((hashed, ori) => {
+      const rewrittenUrl = assetsPrefix
+        ? path.posix.join(assetsPrefix, hashed)
+        : hashed;
+      fileContent = fileContent.replaceAll(ori, rewrittenUrl);
+    });
+  }
+  return fs.promises.writeFile(filePath, fileContent);
+}
+
 /**
  * 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.
@@ -81,15 +148,29 @@ export async function getInlinePlugins() {
  * @param {string} library
  * @param {string} [hash]
  * @param {boolean} [base64Css = false] inline css. must be true for plugins
+ * @param {undefined|Map} [rewrittenPublicAssets=undefined] rewrittenPublicAssets Map of original filename to Hashed Filename in public folder
  * @returns {Promise<void>}
  */
-export async function buildLibrary(libraryConfig, outputFolder, library, hash = '', base64Css = false) {
+export async function buildLibrary(
+  libraryConfig,
+  outputFolder,
+  library,
+  hash = '',
+  base64Css = false,
+  rewrittenPublicAssets = undefined,
+) {
+  // Base64 contains the characters '+', '/', and '=', which have a reserved meaning in URLs.
+  // Base64url solves this by replacing '+' with '-' and '/' with '_'.
+  // See https://stackoverflow.com/a/55389212
   const cssInjectorCode = `
 function loadCss(href) {
+  const base64url = href
+    .replace(/-/g, '+')
+    .replace(/_/g, '/');
   return new Promise((resolve, reject) => {
     const elem = document.createElement('link');
     elem.rel = 'stylesheet';
-    elem.href = href;
+    elem.href = base64url;
     elem.defer = false;
     elem.async = false;
     elem.onload = resolve;
@@ -103,16 +184,48 @@ function loadCss(href) {
     let css = false;
     if (output[1] && output[1].type === 'asset') {
       if (base64Css) {
-        css = `data:text/css;base64,${Buffer.from(output[1].source).toString('base64url')}`;
+        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`;
+        await writeRewrittenFile(
+          path.join(
+            process.cwd(),
+            'dist',
+            outputFolder,
+            `${library}${addedHash}.css`,
+          ),
+          output[1].source,
+          rewrittenPublicAssets,
+        );
+        if (outputFolder) {
+          css = `./${outputFolder}/${library}${addedHash}.css`;
+        } else {
+          css = `./${library}${addedHash}.css`;
+        }
       }
     }
     if (output[0] && output[0].type === 'chunk') {
       let code = css ? `${cssInjectorCode} await loadCss('${css}');` : '';
+      // inject materialDesignIcons here. We removed it earlier from the index.html
+      if (library === 'ui') {
+        const hashedPath = rewrittenPublicAssets.get(
+          'assets/@mdi/font/css/materialdesignicons.min.css',
+        );
+        code += `await loadCss('./${path.posix.join('assets', hashedPath)}');`;
+      }
+
       code += output[0].code;
-      await fs.promises.writeFile(path.join(process.cwd(), 'dist', outputFolder, `${library}${addedHash}.js`), code);
+      await writeRewrittenFile(
+        path.join(
+          process.cwd(),
+          'dist',
+          outputFolder,
+          `${library}${addedHash}.js`,
+        ),
+        code,
+        rewrittenPublicAssets,
+      );
     }
   };
 
@@ -122,11 +235,23 @@ function loadCss(href) {
   } 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);
+    /**
+     * This is used by the plugin-cli. If the libraryConfic includes watch: { }
+     * Rollup will start in Watch Mode. So we restart the browser on filechanges in the plugin-cli preview mode.
+     * See: https://rollupjs.org/javascript-api/#rollup-watch
+     * Also we need to add our BUNDLE_END event onCurrentRun, otherwise the bundle is already closed by vitejs.
+     * See: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/build.ts#L674
+     */
+    libraryBuilds.on('event', (event) => {
+      if (event.code === 'START') {
+        libraryBuilds.onCurrentRun('event', async (innerEvent) => {
+          if (innerEvent.code === 'BUNDLE_END') {
+            const res = await innerEvent.result.generate(
+              libraryConfig?.build?.rollupOptions?.output ?? {},
+            );
+            await write(res.output);
+          }
+        });
       }
     });
   }
@@ -138,15 +263,109 @@ function loadCss(href) {
  */
 export const libraries = {
   vue: 'vue',
-  '@vue/composition-api': 'vue-composition-api',
-  '@vcmap/cesium': 'cesium',
+  '@vcmap-cesium/engine': 'cesium',
+  '@cesium/engine': 'cesium',
   ol: 'ol',
   '@vcmap/core': 'core',
   '@vcmap/ui': 'ui',
   'vuetify/lib': 'vuetify',
-  '@vcsuite/ui-components': 'uicomponents',
 };
 
+const toCopy = [
+  'plugin-assets',
+  'package.json',
+  'config.json',
+  'LICENSE.md',
+  'CHANGELOG.md',
+  'README.md',
+];
+
+async function buildInlinePlugin(plugin, baseConfig, minify) {
+  // 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 pluginDir = getProjectPath('plugins', plugin);
+  const pluginConfig = {
+    ...baseConfig,
+    esbuild: {
+      minify,
+    },
+    build: {
+      write: false,
+      emptyOutDir: false,
+      outDir: `dist/plugins/${plugin}/`,
+      lib: {
+        entry: path.join(pluginDir, 'src', 'index.js'),
+        formats: ['es'],
+        fileName: 'index',
+      },
+      rollupOptions: {
+        external: Object.keys(libraries),
+        output: {
+          paths: relativePluginPaths,
+        },
+      },
+    },
+  };
+  const distPath = path.join(process.cwd(), 'dist', 'plugins', plugin);
+  if (!fs.existsSync(distPath)) {
+    await fs.promises.mkdir(distPath, { recursive: true });
+  }
+  await buildLibrary(pluginConfig, `plugins/${plugin}`, 'index', '', true);
+  await Promise.all(
+    toCopy.map(async (entry) => {
+      if (fs.existsSync(path.join(pluginDir, entry))) {
+        await fs.promises.cp(
+          path.join(pluginDir, entry),
+          path.join(distPath, entry),
+          { recursive: true, force: true },
+        );
+      }
+    }),
+  );
+}
+
+async function buildDependentPlugin(pluginName) {
+  const pluginsDirectory = getPluginDirectory();
+  let scope = '';
+  let name = pluginName;
+  if (pluginName.startsWith('@')) {
+    [scope, name] = pluginName.split('/');
+  }
+
+  await fs.promises.cp(
+    path.join(pluginsDirectory, 'node_modules', scope, name, 'dist'),
+    path.join(process.cwd(), 'dist', 'plugins', scope, name),
+    { recursive: true, force: true },
+  );
+
+  // must be copied one after the other to avoid race conditions
+  await Promise.all(
+    toCopy.map(async (entry) => {
+      if (
+        fs.existsSync(
+          path.join(pluginsDirectory, 'node_modules', scope, name, entry),
+        )
+      ) {
+        await fs.promises.cp(
+          path.join(pluginsDirectory, 'node_modules', scope, name, entry),
+          path.join(process.cwd(), 'dist', 'plugins', scope, name, entry),
+          { recursive: true, force: true },
+        );
+      }
+    }),
+  );
+}
+
 /**
  * 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
@@ -154,60 +373,32 @@ export const libraries = {
  * @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 promises = inlinePlugins.map((plugin) =>
+    buildInlinePlugin(plugin, baseConfig, minify),
+  );
 
-    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('/');
-    }
+  promises.push(
+    ...dependentPlugins.map(async (pluginName) =>
+      buildDependentPlugin(pluginName, baseConfig, minify),
+    ),
+  );
+  await Promise.all(promises);
+}
 
-    return fs.promises.cp(
-      path.join(pluginsDirectory, 'node_modules', scope, name, 'dist'),
-      path.join(process.cwd(), 'dist', 'plugins', scope, name),
-      { recursive: true },
-    );
-  }));
+export async function buildPluginsForBundle(baseConfig = {}) {
+  const inlinePlugins = await getInlinePlugins();
+  const dependentPlugins = await getPluginNames(true);
+  const promises = inlinePlugins
+    .filter((plugin) => plugin.startsWith('@vcmap/'))
+    .map((plugin) => buildInlinePlugin(plugin, baseConfig, true));
 
+  promises.push(
+    ...dependentPlugins.map(async (pluginName) =>
+      buildDependentPlugin(pluginName),
+    ),
+  );
   await Promise.all(promises);
 }

package/build/buildPreview.js

@@ -5,13 +5,16 @@ import { buildPluginsForPreview, getProjectPath } from './buildHelpers.js';
 
 console.log('Building Plugins');
 await Promise.all([
-  buildPluginsForPreview({
-    configFile: './build/commonViteConfig.js',
-    plugins: [vcsOl()],
-  }, true),
+  buildPluginsForPreview(
+    {
+      configFile: './build/commonViteConfig.js',
+      plugins: [vcsOl()],
+    },
+    true,
+  ),
   fs.promises.cp(
-    getProjectPath('map.config.json'),
-    path.join(process.cwd(), 'dist', 'map.config.json'),
+    getProjectPath('app.config.json'),
+    path.join(process.cwd(), 'dist', 'app.config.json'),
   ),
   fs.promises.cp(
     getProjectPath('config'),
@@ -20,4 +23,11 @@ await Promise.all([
       recursive: true,
     },
   ),
+  fs.promises.cp(
+    getProjectPath('exampleData'),
+    path.join(process.cwd(), 'dist', 'exampleData'),
+    {
+      recursive: true,
+    },
+  ),
 ]);

package/build/bundle.js

@@ -0,0 +1,57 @@
+import vcsOl from '@vcmap/rollup-plugin-vcs-ol';
+import { join as joinPath } from 'path';
+import tar from 'tar';
+import { cp, rm } from 'fs/promises';
+import { createGzip } from 'zlib';
+import { pipeline } from 'stream';
+import { createReadStream, createWriteStream } from 'fs';
+import { buildPluginsForBundle, getProjectPath } from './buildHelpers.js';
+
+await import('./build.js');
+console.log('ui built');
+
+await buildPluginsForBundle({
+  configFile: './build/commonViteConfig.js',
+  plugins: [vcsOl()],
+});
+
+const distDir = getProjectPath('dist');
+
+const rootFiles = ['package.json', 'README.md', 'CHANGELOG.md'];
+await Promise.all(
+  rootFiles.map((entry) => cp(getProjectPath(entry), joinPath(distDir, entry))),
+);
+
+const file = joinPath(distDir, 'vcmap-bundle.tar');
+
+await tar.c(
+  {
+    file,
+    cwd: distDir,
+    prefix: '@vcmap/ui',
+  },
+  ['index.html', 'assets', ...rootFiles],
+);
+
+await tar.u(
+  {
+    file,
+    cwd: joinPath(distDir, 'plugins', '@vcmap'),
+    prefix: '@vcmap',
+  },
+  ['.'],
+);
+
+await new Promise((res, rej) => {
+  pipeline(
+    [createReadStream(file), createGzip(), createWriteStream(`${file}.gz`)],
+    (err) => {
+      if (err) {
+        rej(err);
+      } else {
+        res();
+      }
+    },
+  );
+});
+await rm(file);

package/build/commonViteConfig.js

@@ -1,36 +1,27 @@
 /* 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 vue2 from '@vitejs/plugin-vue2';
 import { libraries } from './buildHelpers.js';
 
 const configMain = defineConfig({
   resolve: {
     alias: {
       '@vcmap/ui': `${path.resolve(process.cwd(), 'index.js')}`,
+      '@cesium/engine': '@vcmap-cesium/engine',
       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: [],
-    }),
-  ],
+  define: {
+    'process.env.NODE_ENV': '"development"',
+  },
+  plugins: [vue2()],
   css: {
     preprocessorOptions: {
       sass: {
-        additionalData: "\n@import './node_modules/@vcsuite/ui-components/src/styles/variables.scss'\n",
+        additionalData: "\n@import './src/styles/variables.scss'\n",
       },
     },
   },

package/build/determineHost.js

@@ -7,8 +7,14 @@ import os from 'os';
  */
 export function determineHostIpFromInterfaces() {
   const interFace = Object.values(os.networkInterfaces())
-    .flatMap(nInterface => nInterface ?? [])
-    .find(detail => detail && detail.address && !detail.internal && detail.family === 'IPv4');
+    .flatMap((nInterface) => nInterface ?? [])
+    .find(
+      (detail) =>
+        detail &&
+        detail.address &&
+        !detail.internal &&
+        detail.family === 'IPv4',
+    );
   return interFace?.address ?? null;
 }
 
@@ -18,7 +24,11 @@ export function determineHostIpFromInterfaces() {
  * @param {string} [defaultHost='127.0.0.1']
  * @returns {string}
  */
-export function determineHostFromArgv(defaultPort = 8080, defaultHttps = false, defaultHost = '127.0.0.1') {
+export function determineHostFromArgv(
+  defaultPort = 8080,
+  defaultHttps = false,
+  defaultHost = 'localhost',
+) {
   let port = defaultPort;
   const portIndex = process.argv.indexOf('--port');
   if (portIndex > -1 && process.argv.length > portIndex + 1) {
@@ -36,7 +46,10 @@ export function determineHostFromArgv(defaultPort = 8080, defaultHttps = false,
   const hostIndex = process.argv.indexOf('--host');
   let host = defaultHost;
   if (hostIndex > -1) {
-    if (process.argv.length > hostIndex + 1 && !process.argv[hostIndex + 1].startsWith('-')) {
+    if (
+      process.argv.length > hostIndex + 1 &&
+      !process.argv[hostIndex + 1].startsWith('-')
+    ) {
       host = process.argv[hostIndex + 1];
     } else {
       host = determineHostIpFromInterfaces() ?? host;