remove dependency on svg-as-symbol-loader

manual-types.d.ts

@@ -4,6 +4,11 @@ declare module '*.svg' {
   export default SVG;
 }
 
+declare module '*?raw' {
+  const content: string;
+  export default content;
+}
+
 declare module '*.css' {
   const content: any;
   export default content;

package.json

@@ -76,11 +76,9 @@
     "postcss-loader": "8.1.1",
     "postcss-variables-loader": "6.0.0",
     "prettier": "3.3.3",
-    "raw-loader": "4.0.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "style-loader": "4.0.0",
-    "svg-as-symbol-loader": "1.2.4",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",

src/graph/svg-renderer.ts

@@ -1,3 +1,7 @@
+// eslint-disable-next-line import/no-unresolved
+import DeprecatedIconSvg from '../components/icons/deprecated-icon.svg?raw';
+// eslint-disable-next-line import/no-unresolved
+import RelayIconSvg from '../components/icons/relay-icon.svg?raw';
 import { stringToSvg } from '../utils/dom-helpers';
 import { getDot } from './dot';
 import { VizWorker } from './graphviz-worker';
@@ -12,22 +16,21 @@ export async function renderSvg(typeGraph: TypeGraph) {
   return svg;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const RelayIconSvg = require('!!svg-as-symbol-loader?id=RelayIcon!../components/icons/relay-icon.svg');
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const DeprecatedIconSvg = require('!!svg-as-symbol-loader?id=DeprecatedIcon!../components/icons/deprecated-icon.svg');
-
 const svgNS = 'http://www.w3.org/2000/svg';
 const xlinkNS = 'http://www.w3.org/1999/xlink';
 
-function preprocessVizSVG(svgString: string) {
-  //Add Relay and Deprecated icons
-  // eslint-disable-next-line @typescript-eslint/no-base-to-string
-  svgString = svgString.replace(/<svg [^>]*>/, '$&' + RelayIconSvg);
-  svgString = svgString.replace(/<svg [^>]*>/, '$&' + DeprecatedIconSvg);
-
+function preprocessVizSVG(svgString: string): string {
   const svg = stringToSvg(svgString);
 
+  //Add Relay and Deprecated icons
+  let defs = svg.querySelector('defs');
+  if (!defs) {
+    defs = document.createElementNS(svgNS, 'defs');
+    svg.insertBefore(defs, svg.firstChild);
+  }
+  defs.appendChild(svgToSymbol(DeprecatedIconSvg, 'DeprecatedIcon'));
+  defs.appendChild(svgToSymbol(RelayIconSvg, 'RelayIcon'));
+
   for (const $a of svg.querySelectorAll('a')) {
     const $g = $a.parentNode!;
 
@@ -118,3 +121,23 @@ function preprocessVizSVG(svgString: string) {
   const serializer = new XMLSerializer();
   return serializer.serializeToString(svg);
 }
+
+function svgToSymbol(svg: string, id: string): SVGSymbolElement {
+  const $svg = stringToSvg(svg);
+  const $symbol = document.createElementNS(svgNS, 'symbol');
+
+  // Transfer supported attributes <svg> to the <symbol>.
+  const attributes = ['viewBox', 'height', 'width', 'preserveAspectRatio'];
+  attributes.forEach(function (attr) {
+    const value = $svg.getAttribute(attr);
+    if (value != null) {
+      $symbol.setAttribute(attr, value);
+    }
+  });
+  $symbol.setAttribute('id', id);
+
+  // Move all child nodes from <svg> to the <symbol>
+  $symbol.append(...$svg.children);
+
+  return $symbol;
+}

tests/demo.spec.ts

@@ -116,6 +116,26 @@ test('use custom SDL with custom directives', async ({ page }) => {
   );
 });
 
+/* FIXME: need a way to disable "Skip deprecated" (uncheck it in UI) in tests
+test('use custom SDL with deprecated fields', async ({ page }) => {
+  const voyagerPage = await gotoVoyagerPage(page);
+  // TODO: test deprecated args and input fields
+  await voyagerPage.submitSDL(`
+    type Query {
+      foo: String @deprecated
+      bar: Int @deprecated(reason: "Just because")
+    }
+  `);
+
+  expect
+    .soft(await voyagerPage.getGraphSVG())
+    .toMatchSnapshot('custom-sdl-with-deprecated-graph.svg');
+  await expect(voyagerPage.page).toHaveScreenshot(
+    'display-sdl-with-deprecated.png',
+  );
+});
+*/
+
 test('use custom introspection', async ({ page }) => {
   test.slow();