Skip to content

Commit 151a70d

Browse files
emersionemersion
committed
front: upgrade NGE to v2.7.0
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™. 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
1 parent f75f1a1 commit 151a70d

File tree

4 files changed

+41
-14
lines changed

4 files changed

+41
-14
lines changed

‎front/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@
1111
"@nivo/line": "^0.80.0",
1212
"@nivo/tooltip": "^0.80.0",
1313
"@openapi-contrib/openapi-schema-to-json-schema": "^5.1.0",
14-
"@osrd-project/netzgrafik-frontend": "0.0.0-snapshot.23b18bb8c907e3d6d88637617df86829eef7d5b9",
15-
"@osrd-project/ui-manchette": "^0.0.30",
1614
"@osrd-project/ui-core": "^0.0.30",
1715
"@osrd-project/ui-icons": "^0.0.30",
16+
"@osrd-project/ui-manchette": "^0.0.30",
1817
"@osrd-project/ui-speedspacechart": "^0.0.30",
1918
"@react-pdf/renderer": "^3.4.2",
2019
"@redux-devtools/extension": "^3.3.0",
@@ -85,6 +84,7 @@
8584
"lodash": "^4.17.21",
8685
"maplibre-gl": "^4.0.0",
8786
"match-sorter": "^6.3.3",
87+
"netzgrafik-frontend": "^2.7.0",
8888
"openapi-typescript-codegen": "^0.27.0",
8989
"party-js": "^2.2.0",
9090
"prop-types": "^15.8.1",
@@ -183,6 +183,7 @@
183183
"typescript": "~5.3.3",
184184
"vite": "^5.1.7",
185185
"vite-plugin-checker": "^0.6.4",
186+
"vite-plugin-static-copy": "^1.0.6",
186187
"vite-tsconfig-paths": "^4.3.1",
187188
"vitest": "^1.2.2"
188189
},

‎front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import React, { useEffect, useRef } from 'react';
22

33
/* eslint-disable import/extensions, import/no-unresolved */
4-
import ngeMain from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/main.js?url';
5-
import ngePolyfills from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/polyfills.js?url';
6-
import ngeRuntime from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/runtime.js?url';
7-
import ngeStyles from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/styles.css?url';
8-
import ngeVendor from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/vendor.js?url';
4+
import ngeMain from 'netzgrafik-frontend/dist/netzgrafik-frontend/main.js?url';
5+
import ngePolyfills from 'netzgrafik-frontend/dist/netzgrafik-frontend/polyfills.js?url';
6+
import ngeRuntime from 'netzgrafik-frontend/dist/netzgrafik-frontend/runtime.js?url';
7+
import ngeStyles from 'netzgrafik-frontend/dist/netzgrafik-frontend/styles.css?url';
8+
import ngeVendor from 'netzgrafik-frontend/dist/netzgrafik-frontend/vendor.js?url';
99
/* eslint-enable import/extensions, import/no-unresolved */
1010

1111
const frameSrc = `
1212
<!DOCTYPE html>
13-
<html class="sbb-lean sbb-light">
13+
<html class="sbb-lean">
1414
<head>
15+
<base href="/netzgrafik-frontend/">
1516
<link rel="stylesheet" href="${ngeStyles}"></link>
1617
<script type="module" src="${ngeRuntime}"></script>
1718
<script type="module" src="${ngePolyfills}"></script>

‎front/vite.config.ts

+15
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
/// <reference types="vitest" />
2+
import { createRequire } from 'node:module';
3+
import * as path from 'node:path';
24
import { defineConfig, loadEnv } from 'vite';
35
import react from '@vitejs/plugin-react-swc';
46
import viteTsconfigPaths from 'vite-tsconfig-paths';
57
import ImportMetaEnvPlugin from '@import-meta-env/unplugin';
68
import checker from 'vite-plugin-checker';
9+
import { viteStaticCopy } from 'vite-plugin-static-copy';
10+
11+
const require = createRequire(import.meta.url);
12+
const ngeBase = path.dirname(require.resolve('netzgrafik-frontend/dist/netzgrafik-frontend/index.html'));
713

814
// https://vitejs.dev/config/
915
export default defineConfig(({ mode }) => {
@@ -26,6 +32,15 @@ export default defineConfig(({ mode }) => {
2632
initialIsOpen: env.OSRD_VITE_OVERLAY_OPEN_BY_DEFAULT === 'true',
2733
},
2834
}),
35+
viteStaticCopy({
36+
targets: [{
37+
src: [
38+
path.join(ngeBase, 'node_modules_angular_common_locales_*_mjs.js'),
39+
path.join(ngeBase, 'src_assets_i18n_*_json.js'),
40+
],
41+
dest: 'netzgrafik-frontend/'
42+
}],
43+
}),
2944
],
3045
build: {
3146
outDir: 'build',

‎front/yarn.lock

+16-6
Original file line numberDiff line numberDiff line change
@@ -2072,11 +2072,6 @@
20722072
openapi-typescript "^5.4.1"
20732073
yargs "^17.7.2"
20742074

2075-
"@osrd-project/netzgrafik-frontend@0.0.0-snapshot.23b18bb8c907e3d6d88637617df86829eef7d5b9":
2076-
version "0.0.0-snapshot.23b18bb8c907e3d6d88637617df86829eef7d5b9"
2077-
resolved "https://registry.yarnpkg.com/@osrd-project/netzgrafik-frontend/-/netzgrafik-frontend-0.0.0-snapshot.23b18bb8c907e3d6d88637617df86829eef7d5b9.tgz#4ae4fd971b28494f053a17316189e5d43342afff"
2078-
integrity sha512-ChE0Mbx8eKdCnpduEqwFW8yqPxPqL+2u4anBXik3Q4v9Q1+otWAfdV0CfBpjxZZztI5DZpI8oPr6x9ScfUNjrA==
2079-
20802075
"@osrd-project/ui-core@^0.0.30":
20812076
version "0.0.30"
20822077
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:
81108105
resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
81118106
integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
81128107

8113-
fast-glob@^3.2.7, fast-glob@^3.2.9, fast-glob@^3.3.0:
8108+
fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9, fast-glob@^3.3.0:
81148109
version "3.3.2"
81158110
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
81168111
integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -11289,6 +11284,11 @@ neo-async@^2.5.0, neo-async@^2.6.2:
1128911284
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
1129011285
integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
1129111286

11287+
netzgrafik-frontend@^2.7.0:
11288+
version "2.7.0"
11289+
resolved "https://registry.yarnpkg.com/netzgrafik-frontend/-/netzgrafik-frontend-2.7.0.tgz#adcae00ed509686321ebced3a917cdc58a2f2e00"
11290+
integrity sha512-/xB47rVt6pm2wmtJQiRX97JXCyKvvEl9VZTrJMavx9zDjAjH/kz89jRM3HPAFoAgKFFnXaPC8WKlqmablE0h5A==
11291+
1129211292
nice-try@^1.0.4:
1129311293
version "1.0.5"
1129411294
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -15206,6 +15206,16 @@ vite-plugin-checker@^0.6.4:
1520615206
vscode-languageserver-textdocument "^1.0.1"
1520715207
vscode-uri "^3.0.2"
1520815208

15209+
vite-plugin-static-copy@^1.0.6:
15210+
version "1.0.6"
15211+
resolved "https://registry.yarnpkg.com/vite-plugin-static-copy/-/vite-plugin-static-copy-1.0.6.tgz#ff457c16e8cfa564472aafd1698790ac89d05508"
15212+
integrity sha512-3uSvsMwDVFZRitqoWHj0t4137Kz7UynnJeq1EZlRW7e25h2068fyIZX4ORCCOAkfp1FklGxJNVJBkBOD+PZIew==
15213+
dependencies:
15214+
chokidar "^3.5.3"
15215+
fast-glob "^3.2.11"
15216+
fs-extra "^11.1.0"
15217+
picocolors "^1.0.0"
15218+
1520915219
vite-tsconfig-paths@^4.3.1:
1521015220
version "4.3.2"
1521115221
resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz#321f02e4b736a90ff62f9086467faf4e2da857a9"

0 commit comments

Comments
 (0)