[WIP] start:dev script with HMR and lint using local librairies

README.md

@@ -6,6 +6,15 @@ To launch the app type `npm install` then `npm start` .
 
 If you are a developer and you want to update / enhance components used from the gridsuite commons-ui library
 click [here](https://github.com/gridsuite/commons-ui) and follow instructions.
+This app uses @powsybl/network-viewer library which released in the npmjs packages.
+
+If you are a developer and you want to update both source code of this project
+and the library, enoying HMR and lint throught those packages,
+You will need to :
+* Define the env variable POWSYBL_NETWORK_VIEWER_PATH with your local path
+* launch the app with `npm run start:dev`
+
+Modified code in the library will be instantly took in your app without further commands.
 
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 

package.json

@@ -65,6 +65,7 @@
     },
     "scripts": {
         "start": "vite",
+        "start:dev": "POWSYBL_NETWORK_VIEWER_PATH=/home/bouzolssyl/Projects/Powsybl/powsybl-network-viewer vite --config vite.config_dev.ts",
         "start:open": "vite --open",
         "build": "tsc && vite build",
         "serve": "vite preview",
@@ -119,6 +120,7 @@
         "jest-environment-jsdom": "^29.7.0",
         "license-checker": "^25.0.1",
         "prettier": "^3.5.3",
+        "prettier-plugin-glsl": "^0.2.1",
         "prettier-plugin-properties": "^0.3.0",
         "svgo": "^3.3.2",
         "ts-node": "^10.9.2",

prettier.config.js

@@ -19,12 +19,17 @@ const config = {
     printWidth: 120,
     singleQuote: true,
     keySeparator: '=', // format of separator in .properties
-    plugins: ['prettier-plugin-properties'],
+    plugins: ['prettier-plugin-properties', 'prettier-plugin-glsl'],
     overrides: [
         {
             files: ['.env', '.env.*'],
             options: { parser: 'dot-properties' },
         },
+        {
+            // .frag files are recognized as JavaScript files by default
+            files: ['*.frag'],
+            options: { parser: 'glsl-parser' },
+        },
         {
             files: ['.github/**/*'],
             options: { tabWidth: 2 },

vite.config_dev.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { defineConfig, loadEnv, mergeConfig } from 'vite';
+import defaultConfig from './vite.config.ts';
+import react from '@vitejs/plugin-react';
+// @ts-expect-error See https://github.com/gxmari007/vite-plugin-eslint/issues/79
+import eslint from 'vite-plugin-eslint';
+import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import * as path from 'node:path';
+
+export default defineConfig((configEnv) => {
+    // Load env file based on `mode` in the current working directory.
+    // Set the third parameter to '' to load all env regardless of the
+    // `VITE_` prefix.
+    const env = loadEnv(configEnv.mode, process.cwd(), '');
+    const baseConfig = defaultConfig(configEnv);
+    baseConfig.plugins = []; // remove existing plugins
+    return mergeConfig(baseConfig, {
+        plugins: [
+            react(),
+            eslint({
+                failOnWarning: true,
+                lintOnStart: false,
+            }),
+            svgr(), // works on every import with the pattern "**/*.svg?react"
+            tsconfigPaths(), // to resolve absolute path via tsconfig cf https://stackoverflow.com/a/68250175/5092999
+        ],
+        resolve: {
+            alias: {
+                // Use source files from the workspace package during demo dev for HMR
+                '@powsybl/network-map-layers': path.resolve(env.POWSYBL_NETWORK_VIEWER_PATH, 'packages/network-map-layers/src'),
+                // Also allow importing the library src directly from the demo if needed
+                '@powsybl/network-viewer': path.resolve(env.POWSYBL_NETWORK_VIEWER_PATH, 'src'),
+            },
+            // Ensure symlinks from the outside dependency don't confuse module resolution
+            preserveSymlinks: true,
+        },
+        optimizeDeps: {
+            // Do not prebundle the outside dependency package; we want it treated as source for HMR
+            exclude: ['@powsybl/network-map-layers', '@powsybl/network-viewer'],
+        },
+    });
+});