fix: close final viewer integration gaps (#5)

apps/viewer-2d-sample/package.json

@@ -6,7 +6,10 @@
   "scripts": {
     "dev": "vite --host 127.0.0.1 --port 5173 --strictPort",
     "build": "tsc --noEmit && vite build",
+    "build:subpath:e2e": "vite build --base=/viewer-2d/ --outDir=dist-subpath",
     "preview": "vite preview",
+    "preview:subpath:e2e": "vite preview --base=/viewer-2d/ --outDir=dist-subpath --host 127.0.0.1 --port 45173 --strictPort",
+    "serve:subpath:e2e": "npm run build:subpath:e2e && npm run preview:subpath:e2e",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

apps/viewer-2d-sample/src/main.ts

@@ -23,8 +23,8 @@
 import {
   createViewer2D,
   isCad2DFile,
-  parseCad,
+  loadCad,
-  type CadParseResult,
+  type CadLoadSummary,
 } from '@hmwebviewer/viewer2d';
 import {
   assertCadByteLength,
@@ -71,11 +71,8 @@ viewer.onSelect((entity: unknown) => {
 });
 
 // ── ④ 파서 조합 ─────────────────────────────────────────────────
-async function loadAndRender(buf: ArrayBuffer, name: string): Promise<CadParseResult> {
+async function loadAndRender(buf: ArrayBuffer, name: string): Promise<CadLoadSummary> {
-  const result = await parseCad({ data: buf, name });
+  return loadCad(viewer, { data: buf, name });
-  viewer.load(result);
-  viewer.resize();
-  return result;
 }
 
 async function loadUrl(url: string, nameHint?: string) {
@@ -117,13 +114,13 @@ function fillLayers() {
   }
 }
 
-async function afterLoad(name: string, result: CadParseResult) {
+async function afterLoad(name: string, result: CadLoadSummary) {
-  setStatus(`✓ ${name} · ${result.entities?.length ?? 0} entities`);
+  setStatus(`✓ ${name} · ${result.entityCount} entities`);
   fillLayers();
   viewer.fit();
 }
 
-async function run(label: string, job: () => Promise<CadParseResult>) {
+async function run(label: string, job: () => Promise<CadLoadSummary>) {
   setStatus(`loading ${label}…`);
   try {
     await afterLoad(label, await job());

apps/viewer-3d/src/viewer/ThreeDViewer.ts

@@ -29,6 +29,7 @@ export class ThreeDViewer {
   private readonly onError;
   private readonly fps = createFpsMeter();
   private readonly adaptive;
+  private disposed = false;
   private raf = 0;
   private current: THREE.Object3D | null = null;
   private outline: THREE.Group | null = null;
@@ -323,6 +324,7 @@ export class ThreeDViewer {
   };
 
   private animate = (now: number = performance.now()): void => {
+    if (this.disposed) return;
     this.raf = requestAnimationFrame(this.animate);
     this.fps.sample(now);
     this.adaptive.update(this.fps.fps());
@@ -331,14 +333,20 @@ export class ThreeDViewer {
   };
 
   dispose(): void {
+    if (this.disposed) return;
+    this.disposed = true;
     cancelAnimationFrame(this.raf);
+    this.raf = 0;
     window.removeEventListener('resize', this.onResize);
     this.controls.dispose();
     this.clearOutline();
     if (this.current) this.disposeObject(this.current);
+    this.current = null;
     this.fps.el.remove();
     this.renderer.dispose();
+    this.renderer.forceContextLoss();
     this.renderer.domElement.remove();
+    this.scene.clear();
   }
 
   /** Orbit the camera to azimuth (radians) around the model — used by tools/prerender.mjs. */

packages/viewer2d/src/index.ts

@@ -6,13 +6,15 @@ import { is2D, isDwg } from './ext2d';
 import { parseDxfBuffer } from './parseDxf';
 import { setDefaultFontUrl } from './slugText';
 
-export type { CadParseResult } from './dwgParser';
-
 export type CadInput = {
   name: string;
   data: ArrayBuffer | Uint8Array;
 };
 
+export type CadLoadSummary = {
+  entityCount: number;
+};
+
 export type Viewer2DOptions = {
   fontUrl?: string;
 };
@@ -26,7 +28,7 @@ export function isCad2DFile(name: string): boolean {
   return is2D(name);
 }
 
-export async function parseCad(input: CadInput): Promise<CadParseResult> {
+async function parseCad(input: CadInput): Promise<CadParseResult> {
   const buffer = toArrayBuffer(input.data);
   if (isDwg(input.name)) return parseDwgBuffer(new Uint8Array(buffer));
   if (is2D(input.name)) return parseDxfBuffer(buffer);
@@ -38,6 +40,16 @@ export async function parseCad(input: CadInput): Promise<CadParseResult> {
   return parseDxfBuffer(buffer);
 }
 
+export async function loadCad(
+  viewer: Pick<Viewer2D, 'load' | 'resize'>,
+  input: CadInput,
+): Promise<CadLoadSummary> {
+  const result = await parseCad(input);
+  viewer.load(result);
+  viewer.resize();
+  return { entityCount: result.entities?.length ?? 0 };
+}
+
 export function createViewer2D(container: HTMLElement, options: Viewer2DOptions = {}): Viewer2D {
   if (options.fontUrl) setDefaultFontUrl(options.fontUrl);
   return new Viewer2D(container);

playwright.config.ts

@@ -30,6 +30,12 @@ export default defineConfig({
           reuseExistingServer: true,
           timeout: 30_000,
         },
+        {
+          command: 'npm --workspace @hmwebviewer/viewer-2d-sample run serve:subpath:e2e',
+          port: 45173,
+          reuseExistingServer: true,
+          timeout: 60_000,
+        },
         {
           command: 'npm --workspace @hmwebviewer/viewer-3d run serve:subpath:e2e',
           port: 43174,

tests/e2e/viewer2d.lifecycle.spec.ts

@@ -1,6 +1,82 @@
-import { expect, test } from '@playwright/test';
+import { expect, type Page, test } from '@playwright/test';
+
+async function installLifecycleProbe(page: Page) {
+  await page.addInitScript(() => {
+    const activeAnimationFrames = new Set<number>();
+    const contexts: WebGLRenderingContext[] = [];
+    const listeners: Array<{
+      listener: EventListenerOrEventListenerObject | null;
+      target: EventTarget;
+      type: string;
+    }> = [];
+
+    const requestAnimationFrameOriginal = window.requestAnimationFrame.bind(window);
+    const cancelAnimationFrameOriginal = window.cancelAnimationFrame.bind(window);
+    window.requestAnimationFrame = (callback) => {
+      let id = 0;
+      id = requestAnimationFrameOriginal((time) => {
+        activeAnimationFrames.delete(id);
+        callback(time);
+      });
+      activeAnimationFrames.add(id);
+      return id;
+    };
+    window.cancelAnimationFrame = (id) => {
+      activeAnimationFrames.delete(id);
+      cancelAnimationFrameOriginal(id);
+    };
+
+    const addEventListenerOriginal = EventTarget.prototype.addEventListener;
+    const removeEventListenerOriginal = EventTarget.prototype.removeEventListener;
+    EventTarget.prototype.addEventListener = function (type, listener, options) {
+      listeners.push({ listener, target: this, type });
+      return addEventListenerOriginal.call(this, type, listener, options);
+    };
+    EventTarget.prototype.removeEventListener = function (type, listener, options) {
+      const index = listeners.findIndex(
+        (entry) => entry.target === this && entry.type === type && entry.listener === listener,
+      );
+      if (index >= 0) listeners.splice(index, 1);
+      return removeEventListenerOriginal.call(this, type, listener, options);
+    };
+
+    const getContextOriginal = HTMLCanvasElement.prototype.getContext;
+    HTMLCanvasElement.prototype.getContext = function (...args) {
+      const context = getContextOriginal.apply(this, args as never);
+      if (
+        context &&
+        (args[0] === 'webgl' || args[0] === 'webgl2' || args[0] === 'experimental-webgl') &&
+        !contexts.includes(context as WebGLRenderingContext)
+      ) {
+        contexts.push(context as WebGLRenderingContext);
+      }
+      return context;
+    } as typeof HTMLCanvasElement.prototype.getContext;
+
+    Object.defineProperty(window, '__lifecycleProbe', {
+      value: {
+        snapshot: () => ({
+          activeAnimationFrames: activeAnimationFrames.size,
+          canvasListeners: listeners.filter(
+            (entry) => entry.target instanceof HTMLCanvasElement,
+          ).length,
+          contexts: contexts.length,
+          contextsLost:
+            contexts.length > 0 && contexts.every((context) => context.isContextLost()),
+          keydownListeners: listeners.filter(
+            (entry) => entry.target === window && entry.type === 'keydown',
+          ).length,
+          resizeListeners: listeners.filter(
+            (entry) => entry.target === window && entry.type === 'resize',
+          ).length,
+        }),
+      },
+    });
+  });
+}
 
 test('viewer2d releases its canvas when disposed', async ({ page }) => {
+  await installLifecycleProbe(page);
   await page.goto('/');
   await page.getByRole('button', { name: 'Sample DXF' }).click();
   await expect(page.locator('#status')).toContainText('✓ simple.dxf');
@@ -35,9 +111,25 @@ test('viewer2d releases its canvas when disposed', async ({ page }) => {
     ).__viewer2d?.dispose?.();
   });
   await expect(page.locator('canvas')).toHaveCount(0);
+  const resources = await page.evaluate(() =>
+    (
+      window as Window & {
+        __lifecycleProbe: { snapshot: () => Record<string, number | boolean> };
+      }
+    ).__lifecycleProbe.snapshot(),
+  );
+  expect(resources).toEqual({
+    activeAnimationFrames: 0,
+    canvasListeners: 0,
+    contexts: 1,
+    contextsLost: true,
+    keydownListeners: 0,
+    resizeListeners: 0,
+  });
 });
 
 test('viewer3d releases its canvas on pagehide and remains disposable', async ({ page }) => {
+  await installLifecycleProbe(page);
   await page.goto('http://127.0.0.1:3333/?model=/samples/Box.glb');
   await page.waitForFunction(
     () =>
@@ -54,13 +146,30 @@ test('viewer3d releases its canvas on pagehide and remains disposable', async ({
     window.dispatchEvent(new PageTransitionEvent('pagehide'));
     const exposed = (window as Window & { __viewer?: { dispose: () => void } }).__viewer;
     exposed?.dispose();
+    const resources = (
+      window as Window & {
+        __lifecycleProbe: { snapshot: () => Record<string, number | boolean> };
+      }
+    ).__lifecycleProbe.snapshot();
     return {
       canvases: document.querySelectorAll('canvas').length,
       exposed: Boolean(exposed),
+      resources,
     };
   });
 
-  expect(result).toEqual({ canvases: 0, exposed: false });
+  expect(result).toEqual({
+    canvases: 0,
+    exposed: false,
+    resources: {
+      activeAnimationFrames: 0,
+      canvasListeners: 0,
+      contexts: 1,
+      contextsLost: true,
+      keydownListeners: 0,
+      resizeListeners: 0,
+    },
+  });
 });
 
 test('viewer2d and viewer3d survive ten mount transitions without duplicate canvases', async ({

tests/e2e/viewer2d.subpath.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+
+test('viewer2d resolves DWG WASM, font, and sample under a production subpath', async ({
+  page,
+}) => {
+  const failedRequests: string[] = [];
+  const responseUrls: string[] = [];
+  page.on('requestfailed', (request) => failedRequests.push(request.url()));
+  page.on('response', (response) => responseUrls.push(response.url()));
+
+  await page.goto(
+    'http://127.0.0.1:45173/viewer-2d/?model=/viewer-2d/samples/BasicSample.dwg',
+  );
+  await expect(page.locator('#status')).toContainText('7309 entities', { timeout: 20_000 });
+  await expect.poll(
+    () =>
+      ({
+        font: responseUrls.some((url) =>
+          url.endsWith('/viewer-2d/fonts/NanumGothic-Regular.ttf'),
+        ),
+        sample: responseUrls.some((url) =>
+          url.endsWith('/viewer-2d/samples/BasicSample.dwg'),
+        ),
+        wasm: responseUrls.some(
+          (url) => url.includes('/viewer-2d/assets/') && url.endsWith('.wasm'),
+        ),
+      }),
+    { timeout: 20_000 },
+  ).toEqual({ font: true, sample: true, wasm: true });
+  expect(failedRequests).toEqual([]);
+});

tests/viewer2d.contract.test.ts

@@ -1,28 +1,26 @@
 import { readFile } from 'node:fs/promises';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
-import { isCad2DFile, parseCad } from '@hmwebviewer/viewer2d';
+import { isCad2DFile, loadCad } from '@hmwebviewer/viewer2d';
 
 describe('viewer2d package interface', () => {
-  it('parses the sample DXF through the public package interface', async () => {
+  it('parses and loads the sample DXF without exposing the parser result', async () => {
     const file = await readFile(
       new URL('../apps/viewer-2d-sample/public/samples/simple.dxf', import.meta.url),
     );
-    const result = await parseCad({
+    const viewer = {
+      load: vi.fn(),
+      resize: vi.fn(),
+    };
+    const summary = await loadCad(viewer, {
       name: 'simple.dxf',
       data: file.buffer.slice(file.byteOffset, file.byteOffset + file.byteLength),
     });
-    const entities = result.entities as Array<{ layer?: string; type?: string }>;
 
     expect(isCad2DFile('drawing.DWG')).toBe(true);
     expect(isCad2DFile('drawing.dxf')).toBe(true);
     expect(isCad2DFile('drawing.pdf')).toBe(false);
-    expect(entities.map(({ type, layer }) => [type, layer])).toEqual([
+    expect(summary).toEqual({ entityCount: 6 });
-      ['LINE', 'OUTLINE'],
+    expect(viewer.load).toHaveBeenCalledOnce();
-      ['LINE', 'OUTLINE'],
+    expect(viewer.resize).toHaveBeenCalledOnce();
-      ['LINE', 'OUTLINE'],
-      ['LINE', 'OUTLINE'],
-      ['CIRCLE', '0'],
-      ['TEXT', '0'],
-    ]);
   });
 });

tools/run-e2e.mjs

@@ -6,6 +6,10 @@ const projectRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 const serverSpecs = [
   { name: 'viewer-2d', args: ['run', 'dev:2d'] },
   { name: 'viewer-3d', args: ['run', 'dev:3d'] },
+  {
+    name: 'viewer-2d-subpath',
+    args: ['--workspace', '@hmwebviewer/viewer-2d-sample', 'run', 'serve:subpath:e2e'],
+  },
   {
     name: 'viewer-3d-subpath',
     args: ['--workspace', '@hmwebviewer/viewer-3d', 'run', 'serve:subpath:e2e'],