@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.25

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);
+    }
+  }
 }
 
 /**
@@ -27,19 +54,23 @@ export function getPluginDirectory() {
  */
 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 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 (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 +80,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,18 +96,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.
@@ -82,9 +147,17 @@ 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
@@ -110,16 +183,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,
+      );
     }
   };
 
@@ -129,11 +234,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);
+          }
+        });
       }
     });
   }
@@ -153,6 +270,101 @@ export const libraries = {
   'vuetify/lib': 'vuetify',
 };
 
+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, '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
@@ -160,71 +372,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,
-          },
-        },
-      },
-    };
-    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);
-  });
+  promises.push(
+    ...dependentPlugins.map(async (pluginName) =>
+      buildDependentPlugin(pluginName, baseConfig, minify),
+    ),
+  );
+  await Promise.all(promises);
+}
 
-  promises.push(...dependentPlugins.map(async (pluginName) => {
-    let scope = '';
-    let name = pluginName;
-    if (pluginName.startsWith('@')) {
-      [scope, name] = pluginName.split('/');
-    }
+export async function buildPluginsForBundle(baseConfig = {}) {
+  const inlinePlugins = await getInlinePlugins();
+  const dependentPlugins = await getPluginNames();
+  const promises = inlinePlugins
+    .filter((plugin) => plugin.startsWith('@vcmap/'))
+    .map((plugin) => buildInlinePlugin(plugin, baseConfig, true));
 
-    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
-    if (fs.existsSync(path.join(pluginsDirectory, 'node_modules', scope, name, 'plugin-assets'))) {
-      await fs.promises.cp(
-        path.join(pluginsDirectory, 'node_modules', scope, name, 'plugin-assets'),
-        path.join(process.cwd(), 'dist', 'plugins', scope, name, 'plugin-assets'),
-        { recursive: true, force: true },
-      );
-    }
-  }));
+  promises.push(
+    ...dependentPlugins.map(async (pluginName) =>
+      buildDependentPlugin(pluginName),
+    ),
+  );
   await Promise.all(promises);
 }

package/build/buildPreview.js

@@ -5,10 +5,13 @@ 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('app.config.json'),
     path.join(process.cwd(), 'dist', 'app.config.json'),

package/build/bundle.js

@@ -0,0 +1,56 @@
+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'),
+  },
+  ['.'],
+);
+
+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,7 +1,7 @@
 /* eslint-disable import/extensions */
 import path from 'path';
 import { defineConfig } from 'vite';
-import { createVuePlugin } from 'vite-plugin-vue2';
+import vue2 from '@vitejs/plugin-vue2';
 import { libraries } from './buildHelpers.js';
 
 const configMain = defineConfig({
@@ -17,9 +17,7 @@ const configMain = defineConfig({
   define: {
     'process.env.NODE_ENV': '"development"',
   },
-  plugins: [
-    createVuePlugin(),
-  ],
+  plugins: [vue2()],
   css: {
     preprocessorOptions: {
       sass: {

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 = '127.0.0.1',
+) {
   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;

package/build/generateOLLib.js

@@ -19,13 +19,13 @@ function parseOutput(output) {
   try {
     info = JSON.parse(String(output));
   } catch (err) {
-    throw new Error(`Failed to parse output as JSON: ${ output}`);
+    throw new Error(`Failed to parse output as JSON: ${output}`);
   }
   if (!Array.isArray(info.symbols)) {
-    throw new Error(`Expected symbols array: ${ output}`);
+    throw new Error(`Expected symbols array: ${output}`);
   }
   if (!Array.isArray(info.defines)) {
-    throw new Error(`Expected defines array: ${ output}`);
+    throw new Error(`Expected defines array: ${output}`);
   }
 
   return info;
@@ -41,9 +41,7 @@ function getBinaryPath(binaryName) {
 
   const expectedPaths = [
     path.join('node_modules', '.bin', binary),
-    path.resolve(
-      path.join('node_modules', 'jsdoc', '.bin', binary),
-    ),
+    path.resolve(path.join('node_modules', 'jsdoc', '.bin', binary)),
   ];
 
   for (let i = 0; i < expectedPaths.length; i++) {
@@ -54,7 +52,7 @@ function getBinaryPath(binaryName) {
   }
 
   throw Error(
-    `JsDoc binary was not found in any of the expected paths: ${ expectedPaths}`,
+    `JsDoc binary was not found in any of the expected paths: ${expectedPaths}`,
   );
 }
 
@@ -64,11 +62,7 @@ function getBinaryPath(binaryName) {
  *     If provided with an empty list of paths, resolves with null.
  */
 function spawnJSDoc() {
-  const jsdocConfig = path.join(
-    'build',
-    'info',
-    'conf.json',
-  );
+  const jsdocConfig = path.join('build', 'info', 'conf.json');
 
   return new Promise((resolve, reject) => {
     let output = '';
@@ -108,7 +102,7 @@ function spawnJSDoc() {
 async function getSymbols() {
   const info = await spawnJSDoc();
   return info.symbols.filter(
-    symbol => symbol.kind !== 'member' || symbol.exports,
+    (symbol) => symbol.kind !== 'member' || symbol.exports,
   );
 }
 
@@ -131,7 +125,10 @@ function getImport(symbol, member) {
     from = defaultExport[0].replace(/^module:/, '');
     importName = 'default';
     exportName = from.replace(/[./]+/g, '$');
-  } else if (namedExport.length > 1 && (member || (symbol.exports && symbol.exports !== 'default'))) {
+  } else if (
+    namedExport.length > 1 &&
+    (member || (symbol.exports && symbol.exports !== 'default'))
+  ) {
     from = namedExport[0].replace(/^module:/, '');
     importName = member || symbol.exports;
     exportName = `${from.replace(/[./]+/g, '$')}$${importName}`;
@@ -178,8 +175,8 @@ function generateExports(symbols) {
     }
   });
   const source = Object.keys(imports)
-    .map(line => line.replace('from \'ol/', 'from \'ol/'))
-    .map(line => line.replace('from \'ol\'', 'from \'ol/index.js\''))
+    .map((line) => line.replace("from 'ol/", "from 'ol/"))
+    .map((line) => line.replace("from 'ol'", "from 'ol/index.js'"))
     .join('\n');
   return `${source}\nexport * from 'ol/index.js';\n`;
 }