Add a CellDL Editor view

.gitignore

@@ -32,4 +32,5 @@ out
 src/renderer/components.d.ts
 
 # Generated by Vite
+src/renderer/public/celldl
 src/renderer/public/libopencor

electron.vite.config.ts

@@ -9,6 +9,7 @@ import * as fs from 'node:fs';
 import path from 'node:path';
 import vitePlugin from 'unplugin-vue-components/vite';
 
+import { scopeCellDLEditorCssPlugin } from './src/renderer/scripts/celldl.plugin.ts';
 import { downloadLibopencorJsIfNeeded } from './src/renderer/scripts/download.libopencor.js.ts';
 import { libopencorVersion, opencorVersion } from './src/renderer/scripts/libopencor.version.ts';
 import { stripPrimeIconsFontFacePlugin } from './src/renderer/scripts/primeicons.plugin.ts';
@@ -31,19 +32,42 @@ export default electronVite.defineConfig({
   preload: {},
   renderer: {
     build: {
+      rolldownOptions: {
+        // Note: libCellML is built for both the Web and Node.js, and it only imports node:module when running in
+        //       Node.js (which our renderer never is, see ENVIRONMENT_IS_NODE in libcellml.js), so there is no need for
+        //       Vite to replace it with an empty module (and to warn us about it).
+
+        external: ['node:module']
+      },
       target: 'esnext',
       copyPublicDir: false
-      // Note: our renderer's public folder only contains libOpenCOR's glue (see downloadLibopencorJsIfNeeded()) and our
-      //       Web app's .htaccess file, which are only needed by our Web app (OpenCOR uses our C++ API, see
-      //       initialiseLocApi(), and isn't served by Apache), so there is no need to ship them.
+      // Note: our renderer's public folder only contains libOpenCOR's glue (see downloadLibopencorJsIfNeeded()), our
+      //       CellDL runtime (see buildCellDLRuntime()), and our Web app's .htaccess file, which are only needed by our
+      //       Web app (OpenCOR uses our C++ API, see initialiseLocApi(), includes our CellDL runtime, and isn't served
+      //       by Apache), so there is no need to ship them.
     },
     define: {
+      // Note: unlike OpenCOR's Web app, OpenCOR includes our CellDL runtime (see src/common/celldlRuntime.ts).
+
+      __CELLDL_RUNTIME_BUNDLED__: JSON.stringify(true),
+      __CELLDL_RUNTIME_PATH__: JSON.stringify(''),
       __LIBOPENCOR_VERSION__: JSON.stringify(libopencorVersion),
       __OPENCOR_VERSION__: JSON.stringify(opencorVersion)
     },
     envDir: path.join(import.meta.dirname, 'src/renderer'),
+    optimizeDeps: {
+      // Note: CellDL Editor is only loaded when needed, so Vite would only discover (and optimise) it and its
+      //       dependencies at that point, before reloading our renderer, hence we ask Vite to optimise them upfront.
+
+      include: ['@celldl/editor', '@celldl/rdf', '@physiomelinks/bg2cellml'],
+
+      // Note: libCellML and Oxigraph locate their WASM file relative to their own URL, so they must not be optimised.
+
+      exclude: ['libcellml.js', 'oxigraph']
+    },
     plugins: [
-      // Note: this must be in sync with src/renderer/vite.config.ts, except for the download-libopencor-js plugin.
+      // Note: this must be in sync with src/renderer/vite.config.ts, except for the download-libopencor-js plugin and
+      //       the scope-celldl-editor-css plugin (OpenCOR's Web app doesn't include our CellDL runtime).
 
       {
         // Plugin to download libOpenCOR's glue, so that our renderer can also be used as our Web app (e.g., at
@@ -61,6 +85,7 @@ export default electronVite.defineConfig({
       },
       tailwindcssPlugin(),
       stripPrimeIconsFontFacePlugin(),
+      scopeCellDLEditorCssPlugin(),
       vuePlugin({
         script: {
           fs: {
@@ -75,6 +100,12 @@ export default electronVite.defineConfig({
       })
     ],
     publicDir: rendererPublicDir,
+    resolve: {
+      // Note: CellDL Editor depends on a specific version of Vue, which may therefore get installed alongside ours, yet
+      //       there must only be one copy of Vue in our bundle.
+
+      dedupe: ['vue']
+    },
     server: {
       fs: {
         allow: [path.join(import.meta.dirname, '..')]

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "1.20261027.0",
+  "version": "1.20261031.0",
   "engines": {
     "bun": ">=1.2.0"
   },
@@ -53,28 +53,33 @@
     "xxhash-wasm": "^1.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.6.3",
+    "@biomejs/biome": "^2.6.4",
+    "@celldl/editor": "^0.20261029.0",
+    "@celldl/rdf": "^1.20260822.0",
     "@electron-toolkit/tsconfig": "^2.0.0",
     "@electron-toolkit/utils": "^4.0.0",
-    "@opencor/libopencor-types": "^1.20261020.0",
+    "@opencor/libopencor-types": "^1.20261029.0",
+    "@physiomelinks/bg2cellml": "^0.6.2",
     "@primeuix/themes": "2.0.3",
     "@primevue/auto-import-resolver": "4.5.5",
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
     "@types/bun": "^1.4.4",
-    "@types/node": "^26.6.5",
+    "@types/node": "^26.6.6",
     "@vitejs/plugin-vue": "^6.0.10",
     "@vue/tsconfig": "^0.9.1",
     "@vueuse/core": "^15.0.0",
     "@wasm-fmt/clang-format": "^23.1.1",
     "autoprefixer": "^10.6.2",
     "cmake-js": "^8.0.0",
-    "electron": "^45.0.0",
+    "electron": "^45.2.1",
     "electron-builder": "^26.18.0",
     "electron-conf": "^1.3.0",
     "electron-updater": "^6.8.11",
     "electron-vite": "^6.0.0",
+    "libcellml.js": "^0.7.2",
     "node-addon-api": "^8.9.2",
+    "oxigraph": "^0.5.13",
     "postcss": "^8.5.32",
     "primeicons": "7.0.0",
     "primevue": "4.5.5",
@@ -90,6 +95,6 @@
     "uplot": "1.6.32",
     "vite": "^8.3.5",
     "vue": "^3.5.44",
-    "vue-tsc": "^3.3.13"
+    "vue-tsc": "^3.3.14"
   }
 }

src/renderer/README.md

@@ -86,7 +86,11 @@ In addition, you will need to update the `locateFile` callback in `src/renderer/
 
 ### Embedding the `@opencor/opencor` package
 
-The `@opencor/opencor` package does **not** ship `libopencor.js`. At runtime, OpenCOR first tries to import it from your application, using the following URL (relative to your page's base URL):
+The `@opencor/opencor` package does **not** ship libOpenCOR or CellDL Editor. Instead, OpenCOR loads them at runtime, either from your application or from `https://opencor.ws`.
+
+#### libOpenCOR
+
+At runtime, OpenCOR first tries to import `libopencor.js` from your application, using the following URL (relative to your page's base URL):
 
 ```
 libopencor/downloads/wasm/<version>/libopencor.js
@@ -99,6 +103,18 @@ where `<version>` is the value of the `libopencorVersion` field in the package's
 
 If you would rather not fetch `libopencor.js` from `https://opencor.ws`, then you can self-host it by downloading it from `https://opencor.ws/libopencor/downloads/wasm/<version>/libopencor.js` and serving it, as a JavaScript file, from the above URL. Note that `worker-src` must still allow `blob:` since, on the Web, `libopencor.js` always spawns its pthread workers from blob URLs. Make sure to do this again whenever you update the `@opencor/opencor` package, since `<version>` will then change.
 
+#### CellDL Editor
+
+CellDL Editor is big, so OpenCOR only loads it the first time that a CellDL file is opened. It first tries to import it from your application, using the following URL (relative to your page's base URL):
+
+```
+celldl/<hash>/celldl.js
+```
+
+where `<hash>` identifies the build of CellDL Editor used by your version of the `@opencor/opencor` package. If your application doesn't serve it, then OpenCOR imports it from `https://opencor.ws/app/celldl/<hash>/celldl.js`, along with the other JavaScript and WASM files that it needs from the same folder. If your application uses a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP), then this requires `script-src` and `connect-src` to allow `https://opencor.ws`. Also, whether or not CellDL Editor is imported from `https://opencor.ws`, `connect-src` must allow `data:` since CellDL Editor fetches one of its WASM files from a data URL.
+
+If you would rather not import CellDL Editor from `https://opencor.ws`, then you can self-host it by serving the `celldl/<hash>/` folder of OpenCOR's Web app from the above URL. That folder can be found in the archive of OpenCOR's Web app that comes with the [release](https://github.com/opencor/webapp/releases) matching your version of the `@opencor/opencor` package. Make sure to do this again whenever you update the `@opencor/opencor` package, since `<hash>` may then change.
+
 ## Usage
 
 OpenCOR accepts the following props: