8000 feat(api-reference): render specification extensions with React by hanspagel · Pull Request #5479 · scalar/scalar · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat(api-reference): render specification extensions with React #5479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 16 commits into from
May 12, 2025
Merged

feat(api-reference): render specification extensions with React #5479

merged 16 commits into from
May 12, 2025

Conversation

hanspagel
Copy link
Member
@hanspagel hanspagel commented Apr 24, 2025 •
edited
Loading

Problem

Currently, we support to register custom Vue components to render specification extensions. But what about React? 😰

Solution

With this PR we’re introducing a new React renderer, that you can use to render custom React components for your specification extensions. 🤯

Usage

Install the React renderer (a Vue component to mount React components):

npm install @scalar/react-renderer react react-dom

Register the React component and the React renderer:

import { ReactRenderer } from '@scalar/react-renderer'
import type { ApiReferencePlugin } from '@scalar/types/api-reference'
import { CustomReactComponent } from './components/CustomReactComponent'

export const XCustomExtensionPlugin = (): ApiReferencePlugin => {
  return () => {
    return {
      name: 'my-custom-plugin',
      extensions: [
        // React
        {
          name: 'x-defaultPlanet',
          /** This is a React component. 🤯 */
          component: CustomReactComponent,
          /** Pass a custom renderer to make it work. */
          renderer: ReactRenderer,
        },
      ],
    }
  }
}

Preview

image

Checklist

I’ve gone through the following:

  • I’ve added an explanation why this change is needed.
  • I’ve added a changeset (pnpm changeset).
  • I’ve added tests for the regression or new feature.
  • I’ve updated the documentation.

@hanspagel hanspagel self-assigned this Apr 24, 2025
@changeset-bot changeset-bot
Copy link
changeset-bot bot commented Apr 24, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 430dacb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 27 packages
Name Type
@scalar/api-reference Patch
@scalar/types Patch
@scalar/react-renderer Minor
@scalar/aspnetcore Patch
@scalar/fastify-api-reference Patch
@scalar/nestjs-api-reference Patch
@scalar/nextjs-api-reference Patch
@scalar/nuxt Patch
@scalar/api-reference-react Patch
@scalar/docusaurus Patch
@scalar/sveltekit Patch
@scalar/api-client-react Patch
@scalar/api-client Patch
@scalar/core Patch
@scalar/nextjs-openapi Patch
@scalar/oas-utils Patch
@scalar/themes Patch
scalar-app Patch
@scalar/express-api-reference Patch
@scalar/hono-api-reference Patch
@scalar/import Patch
@scalar/mock-server Patch
@scalar/postman-to-openapi Patch
@scalar/components Patch
@scalar/use-codemirror Patch
@scalar/use-hooks Patch
@scalar/icons Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@relativeci RelativeCI
Copy link
relativeci bot commented Apr 24, 2025 •
edited
Loading

#9739 Bundle Size — 2.45MiB (~+0.01%).

430dacb(current) vs ac16fca main#9737(baseline)

Warning

Bundle contains 6 duplicate packages – View duplicate packages

Bundle metrics  Change 1 change Regression 1 regression
                 Current
#9739		      Baseline
#9737
Regression  Initial JS 2.45MiB(~+0.01%) 2.45MiB
No change  Initial CSS 0B 0B
No change  Cache Invalidation 100% 100%
No change  Chunks 1 1
No change  Assets 1 1
No change  Modules 1493 1493
No change  Duplicate Modules 0 0
No change  Duplicate Code 0% 0%
No change  Packages 172 172
No change  Duplicate Packages 6 6
Bundle size by type  Change 1 change Regression 1 regression
                 Current
#9739		      Baseline
#9737
Regression  JS 2.45MiB (~+0.01%) 2.45MiB

Bundle analysis report Branch feat/react-rendering Project dashboard

Generated by RelativeCI Documentation Report issue

@github-actions GitHub Actions
Copy link
Contributor
github-actions bot commented Apr 24, 2025 •
edited
Loading

Preview Examples

https://3d14629d-8ba6-4b3f-bf63-7c755015fd04--scalar-deploy-preview.netlify.app

@hanspagel hanspagel force-pushed the feat/react-rendering branch from 44968f3 to 15c79cb Compare April 24, 2025 11:20
@hanspagel hanspagel marked this pull request as ready for review April 24, 2025 11:23
@hanspagel hanspagel requested a review from marclave April 24, 2025 12:15
@hanspagel hanspagel force-pushed the feat/react-rendering branch 4 times, most recently from 6de7e4e to 2ac3d62 Compare April 30, 2025 13:17
@hanspagel hanspagel force-pushed the feat/react-rendering branch 2 times, most recently from da7f210 to c2f7320 Compare May 6, 2025 13:44
marclave
marclave approved these changes
View reviewed changes
Copy link
Member
@marclave marclave left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AWESOME work @hanspagel 🤯

tested and this is incredible, lets get it merged

@hanspagel hanspagel force-pushed the feat/react-rendering branch from c2f7320 to 72b8573 Compare May 7, 2025 07:42
amritk
amritk reviewed May 8, 2025
View reviewed changes
packages/react-renderer/src/components/ReactConnector.tsx
@@ -0,0 +1,32 @@
import type { ComponentType } from 'react'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

back to classes? why not functional component?

amritk
amritk approved these changes May 8, 2025
View reviewed changes
Copy link
Member
@amritk amritk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Insane! Code looks good except the class based component (old school) and the additional dependencies. Still approving anyway

@hanspagel hanspagel enabled auto-merge (squash) May 12, 2025 08:39
@hanspagel hanspagel force-pushed the feat/react-rendering branch from 72b8573 to 430dacb Compare May 12, 2025 08:39
@hanspagel hanspagel merged commit 0222ad4 into main May 12, 2025
33 checks passed
@hanspagel hanspagel deleted the feat/react-rendering branch May 12, 2025 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@amritk amritk amritk approved these changes

@marclave marclave marclave approved these changes

@geoffgscott geoffgscott Awaiting requested review from geoffgscott geoffgscott is a code owner

Assignees

@hanspagel hanspagel

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@hanspagel @amritk @marclave
0