refactor: remove duplication in projects (#195)

Allow a single CSS import. When possible, fill the HTML with shared code. In all projects, add link to the bundler/tool in the title.
maxGraph · Feb 15, 2025 · 7408ef0 · 7408ef0
1 parent 5de4c50
commit 7408ef0
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 104 deletions.
diff --git a/projects/_shared/css/all.css b/projects/_shared/css/all.css
@@ -0,0 +1,4 @@
+@import url('@maxgraph/core/css/common.css');
+
+@import url('./rubber-band.css');
+@import url('./general-style.css');
diff --git a/projects/_shared/src/fill-html-content.ts b/projects/_shared/src/fill-html-content.ts
@@ -0,0 +1,26 @@
+import {Client} from "@maxgraph/core";
+
+/** Display the maxGraph version in the footer. */
+const fillFooter = (): void => {
+    const footer = document.querySelector<HTMLElement>('footer')!;
+    footer.innerText = `Built with maxGraph ${Client.VERSION}`;
+};
+
+export type FillMainContainerOptions = {
+    toolName: string;
+    toolUrl: string;
+};
+
+export const fillMainContainerInnerHtml = (cssSelector: string, options: FillMainContainerOptions): void => {
+    document.querySelector<HTMLDivElement>(cssSelector)!.innerHTML = `
+    <h1>maxGraph <a href="${options.toolUrl}" target="_blank" rel="noopener noreferrer">${options.toolName}</a> TypeScript example</h1>
+    <p>Display a test graph. Activated behaviours:</p>
+    <ul>
+      <li>Panning: use mouse right button</li>
+      <li>Cells selection with Rubberband: use mouse left button</li>
+    </ul>
+    <div id="graph-container"></div>
+    <footer></footer>
+`;
+    fillFooter();
+};
diff --git a/projects/_shared/src/generate-graph.ts b/projects/_shared/src/generate-graph.ts
@@ -9,7 +9,13 @@ import {
 } from '@maxgraph/core';
 import {registerCustomShapes} from "./custom-shapes";
 
-export const initializeGraph = (container: HTMLElement) => {
+/**
+ * Initializes the graph inside the given container.
+ * @param container if not set, use the element matching the selector '#graph-container'
+ */
+export const initializeGraph = (container?: HTMLElement) => {
+   container ??= document.querySelector<HTMLElement>('#graph-container')!;
+
     // Disables the built-in context menu
     InternalEvent.disableContextMenu(container);
 

diff --git a/projects/_shared/src/index.ts b/projects/_shared/src/index.ts
@@ -1 +1,9 @@
+import { initializeGraph } from './generate-graph';
+import {fillMainContainerInnerHtml, FillMainContainerOptions} from "./fill-html-content";
+
 export {initializeGraph} from './generate-graph';
+
+export const initializeHtmlAndGraph = (cssSelector: string, options: FillMainContainerOptions): void => {
+    fillMainContainerInnerHtml(cssSelector, options);
+    initializeGraph();
+};
diff --git a/projects/farm-ts/src/main.ts b/projects/farm-ts/src/main.ts
@@ -1,23 +1,4 @@
-import '@maxgraph/core/css/common.css';
-import 'maxgraph-examples-shared/css/rubber-band.css'
-import 'maxgraph-examples-shared/css/general-style.css'
+import 'maxgraph-examples-shared/css/all.css';
+import {initializeHtmlAndGraph} from 'maxgraph-examples-shared';
 
-import {Client} from "@maxgraph/core";
-import {initializeGraph} from 'maxgraph-examples-shared';
-
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-    <h1>maxGraph Farm TypeScript example</h1>
-    <p>Display a test graph. Activated behaviours:</p>
-    <ul>
-      <li>Panning: use mouse right button</li>
-      <li>Cells selection with Rubberband: use mouse left button</li>
-    </ul>
-    <div id="graph-container"></div>
-    <footer></footer>
-`;
-
-const footer = document.querySelector<HTMLElement>('footer')!;
-footer.innerText = `Built with maxGraph ${Client.VERSION}`;
-
-// Creates the graph inside the given container
-initializeGraph(<HTMLElement>document.querySelector('#graph-container'));
+initializeHtmlAndGraph('#app', {toolName: 'Farm', toolUrl: 'https://www.farmfe.org/'})
diff --git a/projects/lit-ts/index.html b/projects/lit-ts/index.html
@@ -8,7 +8,7 @@
     <script type="module" src="/src/index.ts"></script>
   </head>
   <body>
-    <h1>maxGraph Lit Typescript example</h1>
+    <h1>maxGraph <a href="https://lit.dev/" target="_blank" rel="noopener noreferrer">Lit</a> Typescript example</h1>
     <p>Display a test graph. Activated behaviours:</p>
     <ul>
       <li>Panning: use mouse right button</li>

diff --git a/projects/parcel-ts/index.html b/projects/parcel-ts/index.html
@@ -8,13 +8,6 @@
     <script type="module" src="src/main.ts"></script>
   </head>
   <body>
-    <h1>maxGraph Parcel TypeScript example</h1>
-    <p>Display a test graph. Activated behaviours:</p>
-    <ul>
-      <li>Panning: use mouse right button</li>
-      <li>Cells selection with Rubberband: use mouse left button</li>
-    </ul>
-    <div id="graph-container"></div>
-    <footer></footer>
+  <div id="app"></div>
   </body>
 </html>
diff --git a/projects/parcel-ts/src/main.ts b/projects/parcel-ts/src/main.ts
@@ -2,12 +2,6 @@ import '@maxgraph/core/css/common.css';
 import 'maxgraph-examples-shared/css/rubber-band.css'
 import 'maxgraph-examples-shared/css/general-style.css'
 
-import {Client} from '@maxgraph/core';
-import {initializeGraph} from 'maxgraph-examples-shared';
+import {initializeHtmlAndGraph} from 'maxgraph-examples-shared';
 
-// display the maxGraph version in the footer
-const footer = document.querySelector<HTMLElement>('footer')!;
-footer.innerText = `Built with maxGraph ${Client.VERSION}`;
-
-// Creates the graph inside the given container
-initializeGraph(<HTMLElement>document.querySelector('#graph-container'));
+initializeHtmlAndGraph('#app', {toolName: 'Parcel', toolUrl: 'https://parceljs.org/'})
diff --git a/projects/rollup-ts/public/index.html b/projects/rollup-ts/public/index.html
@@ -9,13 +9,6 @@
     <script type="module" src='bundle.js'></script>
   </head>
   <body>
-    <h1>maxGraph Rollup TypeScript example</h1>
-    <p>Display a test graph. Activated behaviours:</p>
-    <ul>
-      <li>Panning: use mouse right button</li>
-      <li>Cells selection with Rubberband: mouse left button</li>
-    </ul>
-    <div id="graph-container"></div>
-    <footer></footer>
+  <div id="app"></div>
   </body>
 </html>
diff --git a/projects/rollup-ts/src/main.ts b/projects/rollup-ts/src/main.ts
@@ -1,12 +1,4 @@
 // import './style.css'; currently loaded by the HTML page
-import {Client} from '@maxgraph/core';
-import {initializeGraph} from 'maxgraph-examples-shared';
+import {initializeHtmlAndGraph} from 'maxgraph-examples-shared';
 
-// display the maxGraph version in the footer
-const footer = document.querySelector<HTMLElement>('footer')!;
-footer.innerText = `Built with maxGraph ${Client.VERSION}`;
-
-// Creates the graph inside the given container
-const container = document.querySelector<HTMLElement>('#graph-container')!;
-
-initializeGraph(container);
+initializeHtmlAndGraph('#app', {toolName: 'Rollup', toolUrl: 'https://rollupjs.org/'})
diff --git a/projects/rsbuild-ts/src/index.ts b/projects/rsbuild-ts/src/index.ts
@@ -1,23 +1,4 @@
-import '@maxgraph/core/css/common.css';
-import 'maxgraph-examples-shared/css/rubber-band.css'
-import 'maxgraph-examples-shared/css/general-style.css'
+import 'maxgraph-examples-shared/css/all.css';
+import {initializeHtmlAndGraph} from 'maxgraph-examples-shared';
 
-import {Client} from "@maxgraph/core";
-import {initializeGraph} from 'maxgraph-examples-shared';
-
-document.querySelector('#root')!.innerHTML = `
-    <h1>maxGraph Rsbuild TypeScript example</h1>
-    <p>Display a test graph. Activated behaviours:</p>
-    <ul>
-      <li>Panning: use mouse right button</li>
-      <li>Cells selection with Rubberband: use mouse left button</li>
-    </ul>
-    <div id="graph-container"></div>
-    <footer></footer>
-`;
-
-const footer = document.querySelector<HTMLElement>('footer')!;
-footer.innerText = `Built with maxGraph ${Client.VERSION}`;
-
-// Creates the graph inside the given container
-initializeGraph(<HTMLElement>document.querySelector('#graph-container'));
+initializeHtmlAndGraph('#root', {toolName: 'Rsbuild', toolUrl: 'https://rsbuild.dev/'})
diff --git a/projects/sveltekit-ts/src/routes/+layout.svelte b/projects/sveltekit-ts/src/routes/+layout.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-  import '@maxgraph/core/css/common.css';
-  import 'maxgraph-examples-shared/css/rubber-band.css'
-  import 'maxgraph-examples-shared/css/general-style.css'
+  import 'maxgraph-examples-shared/css/all.css'
   import { Client } from '@maxgraph/core';
 </script>
 
 <svelte:head>
   <title>maxGraph SvelteKit TypeScript example</title>
 </svelte:head>
 
-<h1>maxGraph SvelteKit TypeScript example</h1>
+<h1>maxGraph <a href="https://svelte.dev/tutorial/kit/introducing-sveltekit" target="_blank" rel="noopener noreferrer">SvelteKit</a> TypeScript example</h1>
 <p>Display a test graph. Activated behaviours:</p>
 <ul>
   <li>Panning: use mouse right button</li>

diff --git a/projects/vitejs-ts/index.html b/projects/vitejs-ts/index.html
@@ -8,13 +8,6 @@
     <script type="module" src="/src/main.ts"></script>
   </head>
   <body>
-    <h1>maxGraph Vite TypeScript example</h1>
-    <p>Display a test graph. Activated behaviours:</p>
-    <ul>
-      <li>Panning: use mouse right button</li>
-      <li>Cells selection with Rubberband: use mouse left button</li>
-    </ul>
-    <div id="graph-container"></div>
-    <footer></footer>
+    <div id="app"></div>
   </body>
 </html>
diff --git a/projects/vitejs-ts/src/main.ts b/projects/vitejs-ts/src/main.ts
@@ -1,13 +1,4 @@
-import '@maxgraph/core/css/common.css';
-import 'maxgraph-examples-shared/css/rubber-band.css'
-import 'maxgraph-examples-shared/css/general-style.css'
+import 'maxgraph-examples-shared/css/all.css';
+import {initializeHtmlAndGraph} from 'maxgraph-examples-shared';
 
-import {Client} from '@maxgraph/core';
-import {initializeGraph} from 'maxgraph-examples-shared';
-
-// display the maxGraph version in the footer
-const footer = document.querySelector<HTMLElement>('footer')!;
-footer.innerText = `Built with maxGraph ${Client.VERSION}`;
-
-// Creates the graph inside the given container
-initializeGraph(<HTMLElement>document.querySelector('#graph-container'));
+initializeHtmlAndGraph('#app', {toolName: 'Vite', toolUrl: 'https://vite.dev/'})