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

package/build/build.js

@@ -2,11 +2,19 @@ import path from 'path';
 import fs from 'fs';
 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';
+import {
+  buildLibrary,
+  getFileMd5,
+  getFilesInDirectory,
+  libraries,
+  writeRewrittenFile,
+} from './buildHelpers.js';
 
 /**
  * @typedef {Object} LibraryBuildOption
@@ -92,15 +100,85 @@ const { libraryBuildOptions, libraryPaths } = hashLibraries();
 console.log('Building ol dump file');
 await generateOLLib();
 
+/** Cleaning/recreating Dist Folder */
+if (await fs.existsSync(path.join(process.cwd(), 'dist'))) {
+  await fs.promises.rm(path.join(process.cwd(), 'dist'), { recursive: true });
+}
+const assetsFolder = path.join(process.cwd(), 'dist', 'assets');
+await fs.promises.mkdir(assetsFolder, { recursive: true });
+
+/**
+ * Prepare and Copy Public folder to dist Folder. This Process will also hash the static files using a MD5 File hash.
+ * The renamed fileNames will be saved in the hashedPublicFiles Map. This can be used later to rewrite references
+ * to the public assets to the correct new fileName.
+ */
+
+const publicFolder = path.join(process.cwd(), 'public');
+const publicAssetsFolder = path.join(process.cwd(), 'public', 'assets');
+const fileTypesToHash = ['.png', '.css', '.svg', '.woff2'];
+/**
+ * we exclude the materialDesignIcons font because we do not want to also rewrite the materialDesignIcons.css file.
+ * The .woff2 is loaded with the materialDesignIcons Version number as a query parameter. So this also makes sure,
+ * that the browser can cache the file.
+ */
+const filesToExclude = [
+  path.join(
+    'assets',
+    '@mdi',
+    'font',
+    'fonts',
+    'materialdesignicons-webfont.woff2',
+  ),
+];
+const hashedPublicFiles = new Map();
+const filesToCopy = new Map();
+// eslint-disable-next-line no-restricted-syntax
+for await (const filePath of getFilesInDirectory(publicAssetsFolder)) {
+  const fileType = path.extname(filePath);
+  const relativePath = path.relative(publicFolder, filePath);
+  const relativePathInDist = path.relative(publicAssetsFolder, filePath);
+  if (
+    fileTypesToHash.includes(fileType) &&
+    !filesToExclude.includes(relativePath)
+  ) {
+    const fileHash = await getFileMd5(filePath);
+    const hashedFileUrl = path.posix.join(
+      ...path.dirname(relativePathInDist).split(path.sep),
+      `${path.basename(filePath, fileType)}.${fileHash.slice(0, 6)}${fileType}`,
+    );
+    hashedPublicFiles.set(
+      path.posix.join(...relativePath.split(path.sep)),
+      hashedFileUrl,
+    );
+    const newFilePath = path.join(
+      assetsFolder,
+      path.dirname(relativePathInDist),
+      `${path.basename(relativePath, fileType)}.${fileHash.slice(
+        0,
+        6,
+      )}${fileType}`,
+    );
+    filesToCopy.set(filePath, newFilePath);
+  } else {
+    const newFilePath = path.join(assetsFolder, relativePathInDist);
+    filesToCopy.set(filePath, newFilePath);
+  }
+}
+// eslint-disable-next-line no-restricted-syntax
+for await (const [originalFilePath, newFilePath] of filesToCopy) {
+  await fs.promises.cp(originalFilePath, newFilePath);
+}
+
 console.log('Building app');
-await build({
+const buildoutput = await build({
   configFile: './build/commonViteConfig.js',
   base: './',
   define: {
     'process.env.NODE_ENV': '"production"',
   },
   build: {
-    minify: true,
+    write: false,
+    modulePreload: false,
     emptyOutDir: true,
     rollupOptions: {
       external: Object.keys(libraries),
@@ -111,6 +189,44 @@ await build({
   },
 });
 
+/**
+ * Building the Main entrypoint (index.html + index.js)
+ * This will ensure that all references to public assets will be rewritten to the hashed filename
+ */
+await Promise.all(
+  buildoutput.output?.map((output) => {
+    if (output.type === 'asset') {
+      const { source, fileName } = output;
+      // remove loading of materialdesignicons from index.html, we will later inject this in the ui.js
+      const fileContent = source.replace(
+        /<link[^>]*href=".*materialdesignicons\.min\.css"[^>]*(>[^<]*<\/link>|\/>)/,
+        '',
+      );
+      return writeRewrittenFile(
+        path.join(process.cwd(), 'dist', fileName),
+        fileContent,
+        hashedPublicFiles,
+        'assets',
+      );
+    }
+    if (output.type === 'chunk') {
+      const { code, fileName } = output;
+      return writeRewrittenFile(
+        path.join(process.cwd(), 'dist', fileName),
+        code,
+        hashedPublicFiles,
+        'assets',
+      );
+    }
+    return undefined;
+  }),
+);
+
+/**
+ * Building the Libraries, (vue, vuetify, openlayers, cesium, core, and ui). This will build one hashed library.hash.js
+ * file and a second one library.js which will reexport all ES6 Modules. All references to these librarys will be
+ * set as externals while building these libraries or later the plugins.
+ */
 console.log('Building Libraries');
 await Promise.all(
   Object.entries(libraryBuildOptions).map(async ([key, value]) => {
@@ -124,9 +240,6 @@ await Promise.all(
     };
     const libraryConfig = {
       configFile: './build/commonViteConfig.js',
-      esbuild: {
-        minify: true,
-      },
       define: {
         'process.env.NODE_ENV': '"production"',
       },
@@ -136,7 +249,7 @@ await Promise.all(
         lib: {
           entry: path.resolve(process.cwd(), value.entry),
           formats: ['es'],
-          fileName: `assets/${value.lib}.${value.hash}`,
+          fileName: `${value.lib}.${value.hash}`,
         },
         rollupOptions: {
           ...value.rollupOptions,
@@ -145,7 +258,14 @@ await Promise.all(
         },
       },
     };
-    await buildLibrary(libraryConfig, 'assets', value.lib, value.hash);
+    await buildLibrary(
+      libraryConfig,
+      'assets',
+      value.lib,
+      value.hash,
+      false,
+      hashedPublicFiles,
+    );
     console.log('Building Library Entry: ', key);
 
     const libraryEntryConfig = {
@@ -155,6 +275,7 @@ await Promise.all(
       },
       build: {
         emptyOutDir: false,
+        copyPublicDir: false,
         lib: {
           entry: path.resolve(process.cwd(), value.libraryEntry || value.entry),
           formats: ['es'],
@@ -172,13 +293,10 @@ await Promise.all(
       },
     };
     await build(libraryEntryConfig);
-    await fs.promises.cp(
-      path.join('src', 'assets', 'font'),
-      path.join('dist', 'assets', 'font'),
-      { recursive: true },
-    );
   }),
 );
-
+/**
+ * Copy Cesium Static Assets to the dist/assets folder
+ */
 await buildCesium();
 console.log('Finished Building vcMap');

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';
 
 /**
@@ -17,6 +18,28 @@ export function getProjectPath(...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);
+    }
+  }
+}
+
 /**
  * returns the absolute path to the plugin directory
  * @returns {string}
@@ -90,6 +113,32 @@ export async function getInlinePlugins() {
   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.
@@ -98,6 +147,7 @@ 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(
@@ -106,6 +156,7 @@ export async function buildLibrary(
   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 '_'.
@@ -136,7 +187,7 @@ function loadCss(href) {
           'base64url',
         )}`;
       } else {
-        await fs.promises.writeFile(
+        await writeRewrittenFile(
           path.join(
             process.cwd(),
             'dist',
@@ -144,14 +195,27 @@ function loadCss(href) {
             `${library}${addedHash}.css`,
           ),
           output[1].source,
+          rewrittenPublicAssets,
         );
-        css = `./${outputFolder}/${library}${addedHash}.css`;
+        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(
+      await writeRewrittenFile(
         path.join(
           process.cwd(),
           'dist',
@@ -159,6 +223,7 @@ function loadCss(href) {
           `${library}${addedHash}.js`,
         ),
         code,
+        rewrittenPublicAssets,
       );
     }
   };
@@ -169,13 +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);
+          }
+        });
       }
     });
   }
@@ -195,105 +270,134 @@ export const libraries = {
   'vuetify/lib': 'vuetify',
 };
 
-/**
- * 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 toCopy = [
+  'plugin-assets',
+  'package.json',
+  'config.json',
+  'LICENSE.md',
+  'CHANGELOG.md',
+  'README.md',
+];
 
-  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);
-    });
+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 pluginConfig = {
-      ...baseConfig,
-      esbuild: {
-        minify,
+  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',
       },
-      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,
-          },
+      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) => {
-      let scope = '';
-      let name = pluginName;
-      if (pluginName.startsWith('@')) {
-        [scope, name] = pluginName.split('/');
+    },
+  };
+  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 },
+        );
       }
+    }),
+  );
+}
 
-      await fs.promises.cp(
-        path.join(pluginsDirectory, 'node_modules', scope, name, 'dist'),
-        path.join(process.cwd(), 'dist', 'plugins', scope, name),
-        { 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
+  // 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,
-            'plugin-assets',
-          ),
+          path.join(pluginsDirectory, 'node_modules', scope, name, entry),
         )
       ) {
         await fs.promises.cp(
-          path.join(
-            pluginsDirectory,
-            'node_modules',
-            scope,
-            name,
-            'plugin-assets',
-          ),
-          path.join(
-            process.cwd(),
-            'dist',
-            'plugins',
-            scope,
-            name,
-            'plugin-assets',
-          ),
+          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
+ * @param {boolean} [minify=true]
+ * @returns {Promise<void>}
+ */
+export async function buildPluginsForPreview(baseConfig = {}, minify = true) {
+  const inlinePlugins = await getInlinePlugins();
+  const dependentPlugins = await getPluginNames();
+
+  const promises = inlinePlugins.map((plugin) =>
+    buildInlinePlugin(plugin, baseConfig, minify),
+  );
+
+  promises.push(
+    ...dependentPlugins.map(async (pluginName) =>
+      buildDependentPlugin(pluginName, baseConfig, minify),
+    ),
+  );
+  await Promise.all(promises);
+}
+
+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));
+
+  promises.push(
+    ...dependentPlugins.map(async (pluginName) =>
+      buildDependentPlugin(pluginName),
+    ),
+  );
   await Promise.all(promises);
 }

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,7 +17,7 @@ const configMain = defineConfig({
   define: {
     'process.env.NODE_ENV': '"development"',
   },
-  plugins: [createVuePlugin()],
+  plugins: [vue2()],
   css: {
     preprocessorOptions: {
       sass: {