SwaggerEditor

If you are migrating from legacy versions (v3 or v4) to the current version of Swagger Editor, note the following major architectural and feature shifts:

Editor & UI Changes

• Editor Engine: The Ace Editor has been replaced by the Monaco Editor.
• Validation: Internal validation from v3/v4 has been removed and replaced by validation from the apidom-ls library. Results are displayed in a validation pane.
• File Handling: Supports drag-and-drop for local files (via react-dropzone) and persists definitions in localStorage on browser refresh.
• UI Components: Uses react-modal for consistent styled modals instead of native window.alert or window.confirm popups.
• Visuals: Uses SwaggerUI v4 and React 17.

Feature Changes

• Menu Relocation: Clear Editor has moved from the File Menu to the Edit Menu.
• Plugin Deprecation: Plugins that previously handled direct implementations like Convert to OAS3 and Import File are deprecated.
• Removed Features: The topbar-insert plugin has been removed and has no planned replacement.

Implementation Changes

• Architecture: Logic has been reorganized to separate Actions from Components. Menu action methods and logic helpers have been extracted into Actions or utils/editor-converter.
• HTTP Client: fetch has been replaced with axios helpers in utils/topbar-http.
• Dependencies: The swagger-client library dependency has been removed.

To bundle WASM binaries correctly in ESM/UMD builds, use the inlineAllWasms plugin. This plugin must be added to the Vite plugins array, not the rollupOptions.plugins array, to ensure it runs with enforce: 'pre' and bypasses downstream WASM plugins (like @rollup/plugin-wasm) that might otherwise convert .wasm imports into incompatible loader functions.

The plugin uses three hooks:

• resolveId: Redirects .wasm imports to a virtual ID (\0wasm-inline:...:inline) to bypass downstream .wasm checks.
• load: Converts the virtual ID back to a file path and exports the raw bytes as a Uint8Array.
• renderChunk: Injects tree-sitter.wasm directly into the Emscripten Module['wasmBinary'] property to prevent Emscripten from attempting a fetch() call.

const inlineAllWasms = () => {
  const treeSitterBase64 = readFileSync('node_modules/web-tree-sitter/tree-sitter.wasm').toString('base64');
  return {
    name: 'inline-all-wasms',
    enforce: 'pre',

    // Redirect every .wasm import to a virtual id that does NOT end with '.wasm'
    async resolveId(id, importer) {
      if (!id.endsWith('.wasm')) return null;
      const resolved = await this.resolve(id, importer, { skipSelf: true });
      if (!resolved) return null;
      return '\0wasm-inline:' + resolved.id + ':inline';
    },

    // Export the raw bytes as a Uint8Array.
    load(id) {
      if (!id.startsWith('\0wasm-inline:')) return null;
      const filePath = id.slice('\0wasm-inline:'.length, -':inline'.length);
      const base64 = readFileSync(filePath).toString('base64');
      return `const bytes=new Uint8Array(atob("${base64}").split("").map(function(c){return c.charCodeAt(0)}));export default bytes;`;
    },

    // Inject Module['wasmBinary'] into the final bundle
    renderChunk(code) {
      const updated = code.replace(
        /var Module\s*=\s*typeof Module\s*!=\s*["']undefined["']\s*\?\s*Module\s*:\s*\{\}/,
        (match) => `${match};Module['wasmBinary']=new Uint8Array(atob("${treeSitterBase64}").split("").map(function(c){return c.charCodeAt(0)}))`
      );
      return updated !== code ? { code: updated } : null;
    },
  };
};

The project uses npm test for unit tests and playwright for End-to-End (E2E) tests.

Unit Tests

• Watch mode: npm test
• Single run (CI): npm run test:run
• With coverage report: npm run test:coverage

E2E Tests (Playwright)

In development (with UI/Debug options):

• Headed mode: npx playwright test --headed
• Playwright UI: npx playwright test --ui
• Debug mode: npx playwright test --debug

In CI (Headless):

• npx playwright test

To view the Playwright test report, use: npx playwright show-report test/playwright/report

$ npm test              # watch mode
$ npm run test:run      # single run (CI)
$ npm run test:coverage # with coverage report

$ npx playwright test --headed    # Run with browser visible
$ npx playwright test --ui        # Run with Playwright UI
$ npx playwright test --debug     # Run in debug mode

$ npx playwright show-report test/playwright/report