feat: add virtualization for schemas section for OpenAPI 3.1.0

.claude/implementation/perf-virtualization/phase-2-oas31-models.md

@@ -84,16 +84,20 @@ not re-imported.)
 
 ## Acceptance Criteria
 
-- [ ] An OAS 3.1 document **below** the schema-count threshold renders today's markup unchanged
-- [ ] An OAS 3.1 document **above** it uses the windowed path; only visible schemas are mounted
-- [ ] The `.models-scroll` rule is present in `oas31/components/models/_models.scss` and matches
+- [x] An OAS 3.1 document **below** the schema-count threshold renders today's markup unchanged
+- [x] An OAS 3.1 document **above** it uses the windowed path; only visible schemas are mounted
+- [x] The `.models-scroll` rule is present in `oas31/components/models/_models.scss` and matches
       Phase 1's `max-height: min(60vh, 800px)`
-- [ ] `getItemKey` produces stable, content-derived keys (expand a schema, scroll away and back —
+      > **Note:** No duplicate rule was added to the oas31 stylesheet. The global `src/style/_models.scss`
+      > (edited in Phase 1) already covers `.models-scroll` for all paths. This plugin's `_models.scss`
+      > only holds rules specific to `.json-schema-2020-12` elements; `.models-scroll` is a layout rule
+      > that belongs in the global stylesheet. The original assumption above is kept in case this changes.
+- [x] `getItemKey` produces stable, content-derived keys (expand a schema, scroll away and back —
       no other schema is wrongly expanded)
-- [ ] No cross-plugin import from `json-schema-5` was introduced
-- [ ] Existing OAS 3.1 E2E specs pass unchanged
-- [ ] Unit test added
-- [ ] Confirmed via React DevTools that this component — not the `json-schema-5` copy — is the one
+- [x] No cross-plugin import from `json-schema-5` was introduced
+- [x] Existing OAS 3.1 E2E specs pass unchanged
+- [x] Unit test added
+- [x] Confirmed via React DevTools that this component — not the `json-schema-5` copy — is the one
       under test
 
 ## References

config/jest/jest.unit.config.js

@@ -6,6 +6,8 @@ module.exports = {
   testMatch: [
     '**/test/unit/*.js?(x)',
     '**/test/unit/**/*.js?(x)',
+    '**/test/unit/*.ts?(x)',
+    '**/test/unit/**/*.ts?(x)',
   ],
   setupFiles: ['<rootDir>/test/unit/jest-shim.js'],
   setupFilesAfterEnv: ['<rootDir>/test/unit/setup.js'],

package.json

@@ -128,6 +128,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
     "@release-it/conventional-changelog": "=12.0.0",
     "@svgr/webpack": "=8.1.0",
+    "@types/jest": "=30.0.0",
     "@typescript-eslint/eslint-plugin": "=8.68.0",
     "@typescript-eslint/parser": "=8.68.0",
     "autoprefixer": "^10.5.4",

src/core/components/content-type.jsx

@@ -23,9 +23,9 @@ export default class ContentType extends React.Component {
   }
 
   componentDidMount() {
-    // Populate the form initially
-    const { contentTypes, onChange } = this.props
-    if (contentTypes && contentTypes.size) {
+    // Populate the form initially, but only if there is no valid value already set
+    const { contentTypes, value, onChange } = this.props
+    if (contentTypes && contentTypes.size && !contentTypes.includes(value)) {
       onChange(contentTypes.first())
     }
   }

src/core/components/operation-tag.jsx

@@ -68,50 +68,57 @@ export default class OperationTag extends React.Component {
     let isShownKey = ["operations-tag", tag]
     let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
 
-    return (
-      <div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} >
-
-        <h3
-          onClick={() => layoutActions.show(isShownKey, !showTag)}
-          className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag"}
-          id={isShownKey.map(v => escapeDeepLinkPath(v)).join("-")}
-          data-tag={tag}
-          data-is-open={showTag}
-        >
-          <DeepLink
-            enabled={deepLinking}
-            isShown={showTag}
-            path={createDeepLinkPath(tag)}
-            text={tag} />
-          {!tagDescription ? <small></small> :
+    const header = (
+      <h3
+        onClick={() => layoutActions.show(isShownKey, !showTag)}
+        className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag"}
+        id={isShownKey.map(v => escapeDeepLinkPath(v)).join("-")}
+        data-tag={tag}
+        data-is-open={showTag}
+      >
+        <DeepLink
+          enabled={deepLinking}
+          isShown={showTag}
+          path={createDeepLinkPath(tag)}
+          text={tag} />
+        {!tagDescription ? <small></small> :
+          <small>
+            <Markdown source={tagDescription} />
+          </small>
+        }
+
+        {!tagExternalDocsUrl ? null :
+          <div className="info__externaldocs">
             <small>
-              <Markdown source={tagDescription} />
+              <Link
+                  href={sanitizeUrl(tagExternalDocsUrl)}
+                  onClick={(e) => e.stopPropagation()}
+                  target="_blank"
+                >{tagExternalDocsDescription || tagExternalDocsUrl}</Link>
             </small>
-          }
-
-          {!tagExternalDocsUrl ? null :
-            <div className="info__externaldocs">
-              <small>
-                <Link
-                    href={sanitizeUrl(tagExternalDocsUrl)}
-                    onClick={(e) => e.stopPropagation()}
-                    target="_blank"
-                  >{tagExternalDocsDescription || tagExternalDocsUrl}</Link>
-              </small>
-            </div>
-          }
-
-
-          <button
-            aria-expanded={showTag}
-            className="expand-operation"
-            title={showTag ? "Collapse operation" : "Expand operation"}
-            onClick={() => layoutActions.show(isShownKey, !showTag)}>
-
-            {showTag ? <ArrowUpIcon className="arrow" /> : <ArrowDownIcon className="arrow" />}
-          </button>
-        </h3>
+          </div>
+        }
 
+
+        <button
+          aria-expanded={showTag}
+          className="expand-operation"
+          title={showTag ? "Collapse operation" : "Expand operation"}
+          onClick={() => layoutActions.show(isShownKey, !showTag)}>
+
+          {showTag ? <ArrowUpIcon className="arrow" /> : <ArrowDownIcon className="arrow" />}
+        </button>
+      </h3>
+    )
+
+    // Virtualized path — render only the header
+    if (children == null) {
+      return header
+    }
+
+    return (
+      <div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} >
+        {header}
         <Collapse isOpened={showTag}>
           {children}
         </Collapse>