@vcmap/ui 6.0.0-rc.2 → 6.0.0-rc.3

package/build/build.js

@@ -1,5 +1,6 @@
 import path from 'path';
 import fs from 'fs';
+import { readFile, writeFile } from 'node:fs/promises';
 import { build } from 'vite';
 import { v4 as uuid } from 'uuid';
 
@@ -13,7 +14,6 @@ import {
   getFileMd5,
   getFilesInDirectory,
   libraries,
-  writeRewrittenFile,
 } from './buildHelpers.js';
 
 /**
@@ -97,8 +97,8 @@ function hashLibraries() {
       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.hash = `${uuid().substring(0, 8)}`;
+    libraryPaths[key] = `./${value.lib}-${value.hash}.js`;
     value.rollupOptions = value.rollupOptions ? value.rollupOptions : {};
   });
 
@@ -121,11 +121,13 @@ const { libraryBuildOptions, libraryPaths } = hashLibraries();
 console.log('Building ol dump file');
 await generateOLLib();
 
+const distFolder = path.join(process.cwd(), 'dist');
+const assetsFolder = path.join(distFolder, 'assets');
+
 /** Cleaning/recreating Dist Folder */
-if (await fs.existsSync(path.join(process.cwd(), 'dist'))) {
-  await fs.promises.rm(path.join(process.cwd(), 'dist'), { recursive: true });
+if (await fs.existsSync(distFolder)) {
+  await fs.promises.rm(distFolder, { recursive: true });
 }
-const assetsFolder = path.join(process.cwd(), 'dist', 'assets');
 await fs.promises.mkdir(assetsFolder, { recursive: true });
 
 /**
@@ -141,6 +143,8 @@ 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.
+ *
+ * we also exclude favicons from hashing, to just use the index.html as is.
  */
 const filesToExclude = [
   path.join(
@@ -150,6 +154,11 @@ const filesToExclude = [
     'fonts',
     'materialdesignicons-webfont.woff2',
   ),
+  path.join('assets', 'favicon-4c4ce5df.svg'),
+  path.join('assets', 'favicon-32-4c4ce5df.png'),
+  path.join('assets', 'favicon-128-4c4ce5df.png'),
+  path.join('assets', 'favicon-180-4c4ce5df.png'),
+  path.join('assets', 'favicon-192-4c4ce5df.png'),
 ];
 const hashedPublicFiles = new Map();
 const filesToCopy = new Map();
@@ -165,7 +174,7 @@ for await (const filePath of getFilesInDirectory(publicAssetsFolder)) {
     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}`,
+      `${path.basename(filePath, fileType)}-${fileHash.slice(0, 8)}${fileType}`,
     );
     hashedPublicFiles.set(
       path.posix.join(...relativePath.split(path.sep)),
@@ -174,9 +183,9 @@ for await (const filePath of getFilesInDirectory(publicAssetsFolder)) {
     const newFilePath = path.join(
       assetsFolder,
       path.dirname(relativePathInDist),
-      `${path.basename(relativePath, fileType)}.${fileHash.slice(
+      `${path.basename(relativePath, fileType)}-${fileHash.slice(
         0,
-        6,
+        8,
       )}${fileType}`,
     );
     filesToCopy.set(filePath, newFilePath);
@@ -191,57 +200,28 @@ for await (const [originalFilePath, newFilePath] of filesToCopy) {
 }
 
 console.log('Building app');
-const buildoutput = await build({
-  configFile: './build/commonViteConfig.js',
-  base: './',
-  define: {
-    'process.env.NODE_ENV': '"production"',
-  },
-  build: {
-    write: false,
-    modulePreload: false,
-    emptyOutDir: true,
-    rollupOptions: {
-      external: Object.keys(libraries),
-      output: {
-        paths: libraryPaths,
-      },
-    },
-  },
-});
-
-/**
- * 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;
-  }),
+let indexHTMLContent = await readFile('./index.html', { encoding: 'utf8' });
+// remove mdi icons link, will be later loaded from the ui.js
+indexHTMLContent = indexHTMLContent.replace(
+  /<link[^>]*href=".*materialdesignicons\.min\.css"[^>]*>/,
+  '',
 );
+// replace @vcmap/ui with './assets/ui.js'
+indexHTMLContent = indexHTMLContent.replace(/@vcmap\/ui/, './assets/ui.js');
+await writeFile(path.join(distFolder, 'index.html'), indexHTMLContent, {
+  encoding: 'utf8',
+});
+const htaccessContent = `
+    <FilesMatch "-[\\w\\d]{8}\\.(js|css)$">
+        Header set Cache-Control "public, max-age=31540000, immutable"
+    </FilesMatch>
+    <FilesMatch "(index\\.html|config\\.json|ui\\.js|vue\\.js|vuetify\\.js|ol\\.js|cesium\\.js|core\\.js)$">
+        Header set Cache-Control "no-store, max-age=0"
+    </FilesMatch>
+`;
+await writeFile(path.join(distFolder, '.htaccess'), htaccessContent, {
+  encoding: 'utf8',
+});
 
 /**
  * Building the Libraries, (vue, vuetify, openlayers, cesium, core, and ui). This will build one hashed library.hash.js
@@ -271,7 +251,7 @@ await Promise.all(
         lib: {
           entry: path.resolve(process.cwd(), value.entry),
           formats: ['es'],
-          fileName: `${value.lib}.${value.hash}`,
+          fileName: `${value.lib}-${value.hash}`,
         },
         rollupOptions: {
           ...value.rollupOptions,

package/build/buildHelpers.js

@@ -159,18 +159,12 @@ export async function buildLibrary(
   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 = base64url;
+    elem.href = href;
     elem.defer = false;
     elem.async = false;
     elem.onload = resolve;
@@ -180,7 +174,7 @@ function loadCss(href) {
 }`;
 
   const write = async (output) => {
-    const addedHash = hash ? `.${hash}` : '';
+    const addedHash = hash ? `-${hash}` : '';
     let css = false;
     if (output[1] && output[1].type === 'asset') {
       if (base64Css) {

package/build/info/conf.json

@@ -8,7 +8,7 @@
   },
   "source": {
     "includePattern": "\\.js$",
-    "exclude": ["dist"]
+    "exclude": ["dist", "node_modules/ol/node_modules"]
   },
   "plugins": [
     "jsdoc-plugin-intersection",

package/config/projects.config.json

@@ -22,7 +22,8 @@
       "modules": [
         "config/dev.config.json",
         "config/codes.config.json",
-        "config/graphFeatureInfo.config.json"
+        "config/graphFeatureInfo.config.json",
+        "config/splashscreen.config.json"
       ]
     }
   ]

package/config/splashscreen.config.json

@@ -0,0 +1,45 @@
+{
+  "name": "SplashScreen Examples",
+  "uiConfig": [
+    {
+      "name": "splashScreen",
+      "value": {
+        "name": "MyCustomScreen.name",
+        "title": "MyCustomScreen.tooltip",
+        "icon": "mdi-information-slab-circle-outline",
+        "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\nSplash Screen Template\n-------------------\nErste Schritte\n-------------------\n\nDies ist ein <em> Beispieltext</em>, der Ihnen den Einstieg erleichtern soll. **Marked** wird verwendet, um Ihren Text <u>von Markdown nach HTML</u> zu konvertieren. Um mehr über die <u><em>korrekte Syntax</em></u>zu erfahren, besuchen Sie bitte diesen [Link](https://marked.js.org/demo/) für eine Demo.  \n\nWie man Listen hinzufügt\n\n1. Punkt 1 einer Aufzählung\n2. Punkt 2 einer Aufzählung.\n\nWenn Sie Aufzählungen nicht mögen, wie wäre es mit Aufzählungspunkten?  \n- Punkt 1: einer Liste mit Aufzählungspunkten. \n- Punkt 2: einer Aufzählungsliste.",
+        "acceptInput": true,
+        "menuEntry": false,
+        "checkBoxText": "components.splashScreen.checkBoxText",
+        "buttonTitle": "components.splashScreen.buttonTitle",
+        "position": {
+          "width": "800px",
+          "height": "500px",
+          "maxWidth": "800px",
+          "maxHeight": "500px"
+        }
+      },
+      "properties": {
+        "title": "appConfigurator.editors.uiConfig.splashScreen"
+      }
+    },
+    {
+      "name": "customScreen",
+      "value": {
+        "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n<br/>Projekt: \n--------\n\nErste Schritte\n\nZusammenfassung:\n--------\nDies ist ein <em> Beispieltext</em>, der Ihnen den Einstieg erleichtern soll. **Marked** wird verwendet, um Ihren Text <u>von Markdown nach HTML</u> zu konvertieren. Um mehr über die <u><em>korrekte Syntax</em></u>zu erfahren, besuchen Sie bitte diesen [Link](https://marked.js.org/demo/) für eine Demo.  \n \nInhalt:\n-------\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n \nHow to add lists:\n-----------------\n\n<br/>1. Enumeration, lorem ipsum dolor sit amet.\n2. Enumeration, lorem ipsum dolor sit amet.\n\n\n- Punkt 1: einer Liste mit Aufzählungspunkten.\n- Punkt 2: einer Liste mit Aufzählungspunkten.\n\n<br/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.",
+        "icon": "mdi-information",
+        "name": "MyCustomScreen.name",
+        "title": "MyCustomScreen.tooltip",
+        "windowPosition": {
+          "left": "30%",
+          "right": "30%",
+          "top": "10%",
+          "bottom": "20%"
+        }
+      },
+      "properties": {
+        "title": "appConfigurator.editors.uiConfig.customScreen"
+      }
+    }
+  ]
+}

package/dist/.htaccess

@@ -0,0 +1,7 @@
+
+    <FilesMatch "-[\w\d]{8}\.(js|css)$">
+        Header set Cache-Control "public, max-age=31540000, immutable"
+    </FilesMatch>
+    <FilesMatch "(index\.html|config\.json|ui\.js|vue\.js|vuetify\.js|ol\.js|cesium\.js|core\.js)$">
+        Header set Cache-Control "no-store, max-age=0"
+    </FilesMatch>

package/dist/assets/@mdi/font/README.md

@@ -0,0 +1,25 @@
+> *Note:* Please use the main [MaterialDesign](https://github.com/Templarian/MaterialDesign/issues) repo to report issues. This repo is for distribution of the Webfont files only.
+
+# Webfont - Material Design Icons
+
+Webfont distribution for the [Material Design Icons](https://materialdesignicons.com).
+
+```
+npm install @mdi/font
+```
+
+> Package built with [@mdi/font-build](https://github.com/Templarian/MaterialDesign-Font-Build).
+
+## Related Packages
+
+[NPM @MDI Organization](https://npmjs.com/org/mdi)
+
+- JavaScript/Typescript: [MaterialDesign-JS](https://github.com/Templarian/MaterialDesign-JS)
+- SVG: [MaterialDesign-SVG](https://github.com/Templarian/MaterialDesign-SVG)
+- Font-Build [MaterialDesign-Font-Build](https://github.com/Templarian/MaterialDesign-Font-Build)
+- Desktop Font: [MaterialDesign-Font](https://github.com/Templarian/MaterialDesign-Font)
+
+## Learn More
+
+- [MaterialDesignIcons.com](https://materialdesignicons.com)
+- https://github.com/Templarian/MaterialDesign