feat: export basic type definitions for swagger editor and props-change-watcher plugin

robert-hebel-sb · robert-hebel-sb · commit ec10f8a0427a · 2025-06-17T15:25:37.000+02:00
diff --git a/.eslintrc b/.eslintrc
@@ -1,13 +1,14 @@
 {
+  "parser": "@typescript-eslint/parser",
   "extends": [
     "react-app",
     "react-app/jest",
     "airbnb",
-    "airbnb-typescript",
     "plugin:cypress/recommended",
     "plugin:jsx-a11y/recommended",
     "prettier",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
   "globals": {
     "File": true,
@@ -20,8 +21,7 @@
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
-    },
-    "project": "tsconfig.json"
+    }
   },
   "plugins": [
     "jsx-a11y",
@@ -38,8 +38,10 @@
     }],
     "no-nested-ternary": "off",
     "prettier/prettier": "error",
+    "no-shadow": "off",
     "react/react-in-jsx-scope": 0,
     "react/require-default-props": "off",
+    "@typescript-eslint/no-empty-function": "off",
     "react/function-component-definition": [1, {
       "namedComponents": ["arrow-function"]
     }],
@@ -55,7 +57,15 @@
         "^@codingame\/monaco-vscode-api",
         "^@swagger-api\/apidom-json-pointer"
       ]
-    }]
+    }],
+    "react/jsx-filename-extension": [2,
+      {
+        "extensions": [
+          ".tsx",
+          ".jsx"
+        ]
+      }
+    ]
   },
   "overrides": [
     {
@@ -72,7 +82,7 @@
       }
     },
     {
-      "files": ["globals.d.ts"],
+      "files": ["*.d.ts"],
       "rules": {
         "vars-on-top": "off",
         "no-var": "off"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,15 +14,17 @@
   "module": "./dist/esm/swagger-editor.js",
   "browser": "./dist/esm/swagger-editor.js",
   "jsnext:main": "./dist/esm/swagger-editor.js",
-  "types": "./dist/types/app.d.ts",
+  "types": "./dist/types/App.d.ts",
   "exports": {
     "./package.json": "./package.json",
     "./swagger-editor.css": "./dist/swagger-editor.css",
     ".": {
-      "browser": "./dist/esm/swagger-editor.js"
+      "browser": "./dist/esm/swagger-editor.js",
+      "types": "./dist/types/App.d.ts"
     },
     "./plugins/*": {
-      "browser": "./dist/esm/plugins/*/index.js"
+      "browser": "./dist/esm/plugins/*/index.js",
+      "types": "./dist/types/plugins/*/index.d.ts"
     },
     "./presets/*": {
       "browser": "./dist/esm/presets/*/index.js"
@@ -34,6 +36,13 @@
       "browser": "./dist/esm/editor.worker.js"
     }
   },
+  "typesVersions": {
+    "*": {
+      "plugins/*": [
+        "./dist/types/plugins/*/index.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "start": "cross-env DISABLE_ESLINT_PLUGIN=false ENABLE_PROGRESS_PLUGIN=true react-scripts start",
     "build": "npm run build:app && npm run build:bundle:esm && npm run build:bundle:umd && npm run build:definitions",
@@ -52,8 +61,8 @@
     "cy:run:chrome": "cross-env BROWSERSLIST_ENV=production cypress run --browser chrome",
     "cy:run:firefox": "cross-env BROWSERSLIST_ENV=production cypress run --browser firefox",
     "cy:run:electron": "cross-env BROWSERSLIST_ENV=production cypress run --browser electron",
-    "lint": "eslint . --ext .jsx,.js",
-    "lint:fix": "eslint . --ext .jsx,.js --fix",
+    "lint": "eslint . --ext .jsx,.js,.tsx,.ts",
+    "lint:fix": "eslint . --ext .jsx,.js,.tsx,.ts --fix",
     "clean": "rimraf ./build ./dist",
     "link:apidom": "npm link @swagger-api/apidom-ast @swagger-api/apidom-core @swagger-api/apidom-error @swagger-api/apidom-json-path @swagger-api/apidom-json-pointer @swagger-api/apidom-ls @swagger-api/apidom-ns-api-design-systems @swagger-api/apidom-ns-asyncapi-2 @swagger-api/apidom-ns-json-schema-draft-4 @swagger-api/apidom-ns-json-schema-draft-6 @swagger-api/apidom-ns-json-schema-draft-7 @swagger-api/apidom-ns-openapi-2 @swagger-api/apidom-ns-openapi-3-0 @swagger-api/apidom-ns-openapi-3-1 @swagger-api/apidom-parser-adapter-api-design-systems-json @swagger-api/apidom-parser-adapter-api-design-systems-yaml @swagger-api/apidom-parser-adapter-asyncapi-json-2 @swagger-api/apidom-parser-adapter-asyncapi-yaml-2 @swagger-api/apidom-parser-adapter-json @swagger-api/apidom-parser-adapter-openapi-json-2 @swagger-api/apidom-parser-adapter-openapi-json-3-0 @swagger-api/apidom-parser-adapter-openapi-json-3-1 @swagger-api/apidom-parser-adapter-openapi-yaml-2 @swagger-api/apidom-parser-adapter-openapi-yaml-3-0 @swagger-api/apidom-parser-adapter-openapi-yaml-3-1 @swagger-api/apidom-parser-adapter-yaml-1-2 @swagger-api/apidom-parser @swagger-api/apidom-reference",
     "link:apidom-ls": "npm link @swagger-api/apidom-ls"
@@ -140,12 +149,12 @@
     "@types/lodash": "^4.17.17",
     "@types/swagger-ui-react": "^5.18.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "cypress": "^13.15.2",
     "cypress-file-upload": "^5.0.8",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-prettier": "^5.4.0",
diff --git a/src/App.tsx b/src/App.tsx
@@ -30,7 +30,7 @@ import EditorContentFixturesPlugin from 'plugins/editor-content-fixtures/index.j
 import EditorContentFromFilePlugin from 'plugins/editor-content-from-file/index.js';
 import EditorSafeRenderPlugin from 'plugins/editor-safe-render/index.js';
 import SwaggerUIAdapterPlugin from 'plugins/swagger-ui-adapter/index.js';
-import PropsChangeWatcherPlugin from 'plugins/props-change-watcher/index.ts';
+import PropsChangeWatcherPlugin from 'plugins/props-change-watcher/index';
 import UtilPlugin from 'plugins/util/index.js';
 /**
  * Presets
@@ -40,7 +40,7 @@ import MonacoPreset from 'presets/monaco/index.js';
 /**
  * Types
  */
-import { SwaggerEditorType } from 'types/swagger-editor.ts';
+import { SwaggerEditorType } from 'types/swagger-editor';
 
 import './styles/main.scss';
 
diff --git a/src/index.d.ts b/src/index.d.ts
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import 'swagger-ui-react/swagger-ui.css';
 
-import SwaggerEditor from './App.tsx';
+import SwaggerEditor from './App';
 
 const root = createRoot(document.getElementById('swagger-editor') as HTMLElement);
 
diff --git a/src/plugins/props-change-watcher/hooks/index.ts b/src/plugins/props-change-watcher/hooks/index.ts
@@ -1,2 +1,2 @@
-export { default as usePropChange } from './use-prop-change.ts';
-export { default as useMountPlugin } from './use-mount-plugin.ts';
+export { default as usePropChange } from './use-prop-change';
+export { default as useMountPlugin } from './use-mount-plugin';
diff --git a/src/plugins/props-change-watcher/hooks/use-mount-plugin.ts b/src/plugins/props-change-watcher/hooks/use-mount-plugin.ts
@@ -1,7 +1,7 @@
 import { useRef } from 'react';
-import { GetSystemValues, System } from 'types/system.ts';
+import { GetSystemValues, System } from 'types/system';
 
-import pluginImpl from '../plugin-impl.ts';
+import pluginImpl from '../plugin-impl';
 
 const useMountPlugin = () => {
   const system = useRef<null | GetSystemValues>(null);
diff --git a/src/plugins/props-change-watcher/index.ts b/src/plugins/props-change-watcher/index.ts
@@ -1,5 +1,5 @@
-import pluginImpl from './plugin-impl.ts';
-import { usePropChange, useMountPlugin } from './hooks/index.ts';
+import pluginImpl from './plugin-impl';
+import { usePropChange, useMountPlugin } from './hooks/index';
 
 /**
  * This plugin is meant to be utilized via the `useMountPlugin` hook.
diff --git a/src/plugins/props-change-watcher/plugin-impl.ts b/src/plugins/props-change-watcher/plugin-impl.ts
@@ -1,4 +1,4 @@
-import { propChanged } from './actions.ts';
+import { propChanged } from './actions';
 
 export default {
   statePlugins: {
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -1,6 +1,6 @@
-import { Root } from 'react-dom/client.ts';
+import { Root } from 'react-dom/client';
 
-import { SwaggerEditorType } from './swagger-editor.ts';
+import { SwaggerEditorType } from './swagger-editor';
 
 declare global {
   var root: Root;
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -1,11 +1,11 @@
 declare module 'swagger-ui-react' {
   interface Request {
-    [k: string]: any;
+    [k: string]: unknown;
   }
   interface Response {
-    [k: string]: any;
+    [k: string]: unknown;
   }
-  type System = any;
+  type System = unknown;
 
   type PluginGenerator = (system: System) => object;
 
@@ -53,7 +53,7 @@ declare module 'swagger-ui-react' {
       };
     };
 
-    static presets: any;
+    static presets: unknown;
   }
 
   export default SwaggerUI;
diff --git a/src/types/swagger-editor.ts b/src/types/swagger-editor.ts
@@ -1,15 +1,54 @@
 import React from 'react';
 import { Preset, SwaggerUIProps } from 'swagger-ui-react';
+import { System } from 'types/system';
+
+type PluginGenerator = (system: System) => object;
+
+type Plugin = object | PluginGenerator;
+
+enum presetNames {
+  textarea = 'textarea',
+  monaco = 'monaco',
+  default = 'default',
+}
+
+enum pluginNames {
+  Util = 'Util',
+  Modals = 'Modals',
+  Dialogs = 'Dialogs',
+  DropdownMenu = 'DropdownMenu',
+  Dropzone = 'Dropzone',
+  Versions = 'Versions',
+  EditorTextarea = 'EditorTextarea',
+  EditorMonaco = 'EditorMonaco',
+  EditorMonacoLanguageApiDOM = 'EditorMonacoLanguageApiDOM',
+  EditorMonacoYamlPaste = 'EditorMonacoYamlPaste',
+  EditorContentReadOnly = 'EditorContentReadOnly',
+  EditorContentOrigin = 'EditorContentOrigin',
+  EditorContentType = 'EditorContentType',
+  EditorContentPersistence = 'EditorContentPersistence',
+  EditorContentFixtures = 'EditorContentFixtures',
+  EditorContentFromFile = 'EditorContentFromFile',
+  EditorPreview = 'EditorPreview',
+  EditorPreviewSwaggerUI = 'EditorPreviewSwaggerUI',
+  EditorPreviewAsyncAPI = 'EditorPreviewAsyncAPI',
+  EditorPreviewApiDesignSystems = 'EditorPreviewApiDesignSystems',
+  EditorSafeRender = 'EditorSafeRender',
+  TopBar = 'TopBar',
+  SplashScreenPlugin = 'SplashScreenPlugin',
+  Layout = 'Layout',
+  SwaggerUIAdapter = 'SwaggerUIAdapter',
+}
 
 interface SwaggerEditorPlugins {
   plugins?: {
-    [key: string]: Preset;
+    [key in pluginNames]: Plugin;
   };
 }
 
 interface SwaggerEditorPresets {
   presets?: {
-    [key: string]: Preset;
+    [key in presetNames]: Preset;
   };
 }
 
diff --git a/test/cypress/support/setup-node-events.js b/test/cypress/support/setup-node-events.js
@@ -24,6 +24,7 @@ const setupNodeEvents = (on, config) => {
       console.error('\x1b[31m', 'ERROR:', message, '\x1b[0m');
       return null;
     },
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     warn(message) {
       // default: disabling warnings to reduce ci pollution
       // console.warn('\x1b[33m', 'WARNING:', message, '\x1b[0m');
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,9 +1,8 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "module": "nodenext",
-    "moduleResolution": "nodenext",
-    "allowImportingTsExtensions": true,
+    "module": "esnext",
+    "moduleResolution": "node",
     "baseUrl": "./",
     "allowJs": false,
     "declaration": true,
@@ -13,7 +12,7 @@
     "isolatedModules": true,
     "outDir": "dist/types",
     "sourceMap": true,
-    "composite": true,
+    "incremental": false,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "paths": {
@@ -26,12 +25,8 @@
         "name": "typescript-strict-plugin"
       }
     ],
-    "typeRoots": ["./node_modules/@types"],
-    "types": [
-      "node"
-    ],
     "jsx": "react"
   },
-  "exclude": ["node_modules", "**/*.js", "**/*.jsx"],
-  "include": ["src/plugins/**/*.ts", "src/plugins/**/*.tsx", "src/index.tsx", "src/App.tsx", "src/index.d.ts", "src/types"]
+  "exclude": ["node_modules", "src/reportWebVitals.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/*.ts", "src/*.tsx"]
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { propChanged } from './actions.ts';`
	`1`	`+import { propChanged } from './actions';`
`2`	`2`
`3`	`3`	`export default {`
`4`	`4`	`statePlugins: {`