front: upgrade NGE to v2.7.0

emersion · emersion · commit 2d5d0042dcf6 · 2024-08-05T07:38:17.000Z
Unfortunately this turned out to be more involved than expected. Let's get the easy stuff out of the way first: - We're now using the official NGE package from NPM, so we can drop the @osrd-project namespace! 🎉 - Thanks to Louis we now have translations and don't need to become fluent in German anymore! - Upstream no longer creates one subdirectory per language, so we can drop "en/" from our import paths. - Upstream has added a proper fix for dark themes, so we can drop our sbb-light class that we applied on the iframe's <html> element. - For reasons detailed below, we need to use vite-plugin-static-copy, and this plugin requires ESM instead of CJS, so we need to add "type": "module" in our package.json [1]. Hopefully this Doesn't Break Stuff™. Edit: oh, of course this caused havoc everywhere, so let's just turn on ESM specifically for vite.config.ts instead of the whole project for now. This is done by renaming it to vite.config.mts. Now onto the real fun. The source of the issue is that NGE now dynamically loads i18n files on startup (e.g. the JSON file containing English translations). Unfortunately this doesn't play well with our bundler, vite. vite doesn't include the NGE translation files in the final build. vite looks at all of the imports, then flattens them inside a single directory with a modified filename. Since NGE source files are immutable assets one does not simply import the i18n files from the React NGE component to make them available to NGE: we need the i18n files to be placed in a well-known directory at build time with a predictable filename. The nicest way to resolve this would be some kind of directory URL import: import ngeBase from 'netzgrafik-frontend/dist/netzgrafik-frontend?url'; However vite doesn't support importing directories like so and it doesn't seem like a plugin exists for this. We can instead instruct vite to copy over the NGE i18n files via a third-party plugin named vite-plugin-static-copy. We need to grab the root directory of the netzgrafik-frontend package somehow, we could hardcode the "mode_modules/" path but that would be quite fragile. Instead, we can leverage require.resolve() but we need to pass the full path to a nested file then compute its dirname because that function doesn't like directories. Now that our i18n files are copied to a directory, we need to convince NGE to pick them up at the correct location. As-is, NGE tries to load them relative to the URL, which results in hilarious paths such as: /operational-studies/projects/2/studies/1/scenarios/1/src_assets_i18n_en_json.js Append a <base> tag to the <iframe> so that anything NGE tries to load is looked up in the special NGE directory we've copied the i18n files into. The cherry on top is: TypeError: __require.resolve is not a function which happens because require.resolve() is only available in CJS, and we just switched to ESM for the sake of the new vite-plugin-static-copy dependency. This can be resolved with a bit of juggling with createRequire from 'node:module'. [1]: https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only
diff --git a/front/package.json b/front/package.json
@@ -10,10 +10,9 @@
     "@nivo/line": "^0.80.0",
     "@nivo/tooltip": "^0.80.0",
     "@openapi-contrib/openapi-schema-to-json-schema": "^5.1.0",
-    "@osrd-project/netzgrafik-frontend": "0.0.0-snapshot.23b18bb8c907e3d6d88637617df86829eef7d5b9",
-    "@osrd-project/ui-manchette": "^0.0.30",
     "@osrd-project/ui-core": "^0.0.30",
     "@osrd-project/ui-icons": "^0.0.30",
+    "@osrd-project/ui-manchette": "^0.0.30",
     "@osrd-project/ui-speedspacechart": "^0.0.30",
     "@react-pdf/renderer": "^3.4.2",
     "@redux-devtools/extension": "^3.3.0",
@@ -84,6 +83,7 @@
     "lodash": "^4.17.21",
     "maplibre-gl": "^4.0.0",
     "match-sorter": "^6.3.3",
+    "netzgrafik-frontend": "^2.7.0",
     "openapi-typescript-codegen": "^0.27.0",
     "party-js": "^2.2.0",
     "prop-types": "^15.8.1",
@@ -182,6 +182,7 @@
     "typescript": "~5.3.3",
     "vite": "^5.1.7",
     "vite-plugin-checker": "^0.6.4",
+    "vite-plugin-static-copy": "^1.0.6",
     "vite-tsconfig-paths": "^4.3.1",
     "vitest": "^1.2.2"
   },
diff --git a/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx b/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx
@@ -1,17 +1,18 @@
 import React, { useEffect, useRef } from 'react';
 
 /* eslint-disable import/extensions, import/no-unresolved */
-import ngeMain from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/main.js?url';
-import ngePolyfills from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/polyfills.js?url';
-import ngeRuntime from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/runtime.js?url';
-import ngeStyles from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/styles.css?url';
-import ngeVendor from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/vendor.js?url';
+import ngeMain from 'netzgrafik-frontend/dist/netzgrafik-frontend/main.js?url';
+import ngePolyfills from 'netzgrafik-frontend/dist/netzgrafik-frontend/polyfills.js?url';
+import ngeRuntime from 'netzgrafik-frontend/dist/netzgrafik-frontend/runtime.js?url';
+import ngeStyles from 'netzgrafik-frontend/dist/netzgrafik-frontend/styles.css?url';
+import ngeVendor from 'netzgrafik-frontend/dist/netzgrafik-frontend/vendor.js?url';
 /* eslint-enable import/extensions, import/no-unresolved */
 
 const frameSrc = `
 <!DOCTYPE html>
-<html class="sbb-lean sbb-light">
+<html class="sbb-lean">
   <head>
+    <base href="/netzgrafik-frontend/">
     <link rel="stylesheet" href="${ngeStyles}"></link>
     <script type="module" src="${ngeRuntime}"></script>
     <script type="module" src="${ngePolyfills}"></script>
diff --git a/front/vite.config.mts b/front/vite.config.mts
@@ -1,9 +1,17 @@
 /// <reference types="vitest" />
+import { createRequire } from 'node:module';
+import * as path from 'node:path';
 import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 import ImportMetaEnvPlugin from '@import-meta-env/unplugin';
 import checker from 'vite-plugin-checker';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+const require = createRequire(import.meta.url);
+const ngeBase = path.dirname(
+  require.resolve('netzgrafik-frontend/dist/netzgrafik-frontend/index.html')
+);
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -26,6 +34,17 @@ export default defineConfig(({ mode }) => {
           initialIsOpen: env.OSRD_VITE_OVERLAY_OPEN_BY_DEFAULT === 'true',
         },
       }),
+      viteStaticCopy({
+        targets: [
+          {
+            src: [
+              path.join(ngeBase, 'node_modules_angular_common_locales_*_mjs.js'),
+              path.join(ngeBase, 'src_assets_i18n_*_json.js'),
+            ],
+            dest: 'netzgrafik-frontend/',
+          },
+        ],
+      }),
     ],
     build: {
       outDir: 'build',
diff --git a/front/yarn.lock b/front/yarn.lock
@@ -2072,11 +2072,6 @@
     openapi-typescript "^5.4.1"
     yargs "^17.7.2"
 
-"@osrd-project/netzgrafik-frontend@0.0.0-snapshot.23b18bb8c907e3d6d88637617df86829eef7d5b9":
-  version "0.0.0-snapshot.23b18bb8c907e3d6d88637617df86829eef7d5b9"
-  resolved "https://registry.yarnpkg.com/@osrd-project/netzgrafik-frontend/-/netzgrafik-frontend-0.0.0-snapshot.23b18bb8c907e3d6d88637617df86829eef7d5b9.tgz#4ae4fd971b28494f053a17316189e5d43342afff"
-  integrity sha512-ChE0Mbx8eKdCnpduEqwFW8yqPxPqL+2u4anBXik3Q4v9Q1+otWAfdV0CfBpjxZZztI5DZpI8oPr6x9ScfUNjrA==
-
 "@osrd-project/ui-core@^0.0.30":
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@osrd-project/ui-core/-/ui-core-0.0.30.tgz#ea3d89bc47f2f1de57200b4bd2333d6beb231dfb"
@@ -8110,7 +8105,7 @@ fast-fifo@^1.1.0:
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
   integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
-fast-glob@^3.2.7, fast-glob@^3.2.9, fast-glob@^3.3.0:
+fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9, fast-glob@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -11289,6 +11284,11 @@ neo-async@^2.5.0, neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+netzgrafik-frontend@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/netzgrafik-frontend/-/netzgrafik-frontend-2.7.0.tgz#adcae00ed509686321ebced3a917cdc58a2f2e00"
+  integrity sha512-/xB47rVt6pm2wmtJQiRX97JXCyKvvEl9VZTrJMavx9zDjAjH/kz89jRM3HPAFoAgKFFnXaPC8WKlqmablE0h5A==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -15206,6 +15206,16 @@ vite-plugin-checker@^0.6.4:
     vscode-languageserver-textdocument "^1.0.1"
     vscode-uri "^3.0.2"
 
+vite-plugin-static-copy@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/vite-plugin-static-copy/-/vite-plugin-static-copy-1.0.6.tgz#ff457c16e8cfa564472aafd1698790ac89d05508"
+  integrity sha512-3uSvsMwDVFZRitqoWHj0t4137Kz7UynnJeq1EZlRW7e25h2068fyIZX4ORCCOAkfp1FklGxJNVJBkBOD+PZIew==
+  dependencies:
+    chokidar "^3.5.3"
+    fast-glob "^3.2.11"
+    fs-extra "^11.1.0"
+    picocolors "^1.0.0"
+
 vite-tsconfig-paths@^4.3.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz#321f02e4b736a90ff62f9086467faf4e2da857a9"
