wll8 / redoc-try Goto Github PK

View Code? Open in Web Editor NEW

100.0 5.0 30.0 904 KB

Add `Try it out` function like swagger on redoc.

Home Page: https://wll8.github.io/redoc-try

HTML 7.94% JavaScript 92.06%

redoc swagger try-it-out

redoc-try's Introduction

redoc try

Add Try it out function like swagger on redoc, Compatible with yaml/json/3.0/2.0.

how to use?

<body>
  <div id="redoc-container"></div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/redoc.standalone.min.js"> </script>
  <script src="https://cdn.jsdelivr.net/gh/wll8/[email protected]/dist/try.js"></script>
  <script>
    // initTry(`https://petstore.swagger.io/v2/swagger.json`)
    initTry({
      openApi: `https://petstore.swagger.io/v2/swagger.json`,
      redocOptions: {scrollYOffset: 50},
    })
  </script>
</body>

Note: No need to use <redoc /> anymore.

Options

When the parameter type is a string, the value is openApi.

When the parameter type is an object, you can configure the following:

initTry({
  openApi: `https://petstore.swagger.io/v2/swagger.json`, // openApi address
  // redocVersion: `2.0.0-rc.48`, // Used to handle compatibility issues, if not specified, read from the URL
  // onlySwagger: true,
  // tryText: `try`, // Try button text
  // trySwaggerInApi: true, // Whether to display swagger debugging window under api?
  // redocOptions: {enableConsole: true}, // Or the format is an array: `[specOrSpecUrl?, options?, element?, callback?]`
  // swaggerOptions: {dom_id: `#swagger-ui`},
  // pure: false, // Concise mode, hide some existing elements of redoc
})

Why do you need it?

According to the description of #53, the try function is no longer developed, maybe it has become a paid function.

If you need to simply have this feature, you don't need to redevelop it, because it will consume a lot of time and lack community maintenance.

We chose to transplant Swagger's Try it out function, which is complete, has community maintenance, and is familiar.

Related tools

redoc-try-it-out Close to the visual style of redoc, more options can be configured.

License

WTFPL:

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2004 Sam Hocevar <[email protected]>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.

redoc-try's People

Contributors

Stargazers

Watchers

redoc-try's Issues

How to use in redocstandalone in react component?

Please can you give a easy way or example to use in the react component.

Try it option only works with spec url, it doesn't work when openApi spec is given as json object

Error in the JS

Hi, I am facing this error in the console when I click in any Try button

My template file is config like this

<body>
    <div id="redoc-container"></div>
    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
    <script src="//cdn.jsdelivr.net/gh/wll8/[email protected]/dist/try.js"></script>
    <script>
        initTry({
            openApi: `./openapi.yaml`,
            redocOptions: {
                "untrustedSpec": true,
                    "theme": {
                        "menu": {
                            "backgroundColor": "rgb(195, 241, 211)",
                            "textColor": "rgba(0, 0, 0, 1)",
                        },
                    }
            }
        })
    </script>
</body>

OpenAPI 3.1 support

I am using your library and recently upgraded my file to OpenAPI 3.1. After that I started getting a warning:

Unable to render this definition
The provided definition does not specify a valid version field.
Please indicate a valid Swagger or OpenAPI version field. Supported version fields are swagger: "2.0" and those that match openapi: 3.0.n (for example, openapi: 3.0.0).

Can you tell me if it is possible to enable/add support for version 3.1?

When I click on "Try" button on my endpoint A, the operation block is displayed and I can test the endpoint that returns a response.
Then I don't close the block and when I click on the "Try" button, on my endpoint B, it displays the operation block but the content is the result of my previous test on endpoint A and block is not well sized.
To restore the block I have to close the block and reopen it with "Try" button.

Another thing I've noticed, is that my operations blocks aren't displayed on the right like in your demo (links on your Readme), but in the main part instead. It's not a problem, but I'd rather tell you about it in case it is related.

Thx!

How to use redoc-try as react component?

overlapping other endpoints header

when you open the try it out window first time after the page load and execute the API, and click on clear,
the header section from other endpoint shows up

Please refer the screen shot

https://drive.google.com/file/d/1Rtb61Kcd1q5LJemr7eqnGUslzcAHuf7F/view?usp=sharing

it only happens first time

problem in design

Hello
The download button hides the json response

redoc-try causes wrong menu item highlighting when using anchor

To reproduce:

Go to the online preview: https://wll8.github.io/redoc-try/index.html
Modify the DOM by inserting an anchor link somewhere at the beginning of the doc, such as <a href="#operation/placeOrder">test anchor placeOrder</a> (for example, where it says "This is a sample (...)")
Click the anchor link you just inserted

Actual result: you scroll to the right endpoint ("Place an order for a pet"), but the menu item highlighted on the left is wrong ("Returns pet inventories by status", ie: the menu item for the route just above the expected one). Manually scrolling down a tiny bit highlights the expected menu item.

Expected result: you scroll to the right endpoint ("Place an order for a pet"), and the menu item highlighted on the left is correct ("Place an order for a pet").

Examples not working

So glad I found your project, I especially like your license model.

However, the examples seem to be broken. Is this something you could fix, or is it broken inside swagger-ui also?

My spec is using external examples, which my unit tests also use to validate them automatically:

/yaya:
    post:
      summary: Non-blocking
      requestBody:
        content:
          application/json; charset=UTF-8:
            schema:
              $ref: '#/components/schemas/CoreRequest'
            examples:
              blik1:
                summary: BLIK1
                description: 'yaya1 '
                externalValue: ../blik1.json
              blik2:
                summary: BLIK2
                description: 'yaya2 '
                externalValue: ../blik2.json

Not compatible with Redoc v 2.0-rc.33 or above

Try it out does not work with Redoc v 2.0-rc.33 or above. The current Redoc version is rc-48. Any possibility you could make it compatible with the latest version?

Authorization doesn't have the expand icon to show auth details

Authorization doesn't have the expand icon to show auth details like in redoc as shown in screen shot

use modal

Hi,
I think it is better to have a modal to have a full-width swagger box. and scrolling wouldn't affect document's scroll position.

When trying an API, normally, the rest of the page is useless.

Overlapping the try it window with the response details in Mobile view

https://drive.google.com/file/d/1pT75UC7SBQL5lgA98cOnyclGOMU5T_6B/view?usp=sharing

Please find the above link for the screen video reference.

License?

Please add licensing information. Is it OK to be used in a commercial documentation site? Thanks.

reading json from static file

Hello,
I want to readthe json file from a static file not from url
I used this :
openApi: ./api-docs.json

but it did not work

Try it out opened window disappear on screen resize

Click on the Try it out button
When try it out window is opened then resize the browser window

Expected Results: Try it out window remains open

Actual Result: Try it out the window is closed and have to click twice to open it again.

FailureURL scheme must be "http" or "https" for CORS request

I am testing this on my own API When I hit Execute and then I get the follow error. Any ideas what might be going on or could you provide any further debugging steps?

Failed to fetch.
Possible Reasons:CORSNetwork 
FailureURL scheme must be "http" or "https" for CORS request.

Support openAPI relative path

Hello!
Thanks for creating this project!

I was curious if we are able to extend the openApi param to support a relative file system url and not only a url.

Example:

 openApi: `./swagger.json`

Does this tool supports both openAPI 3 and swagger 2.0 json specifications?

Authorization

Hi there,

I'm using your modifications with great success and really like the integration :)

The problem is, I've now added an authorization requirement to the API which means you need to provide an Authorization: Bearer xxx header.

In the default Swagger UI, it shows the following:

And when you click on it:

After you have done this, the try out now will add the correct headers.

Would you have any suggestions on how to get this working in your solution as well?

Thanks in advance,
Gerard.

How to use

This feature is exactly what I am looking for but I am having trouble figuring out how to use it. I cloned the repot and opened index.html but the page doesn't load. Does this need to be passed through the redoc-cli tool? Can you please help me with what I am missing?

Multiple Try it out buttons

I get multiple try it out buttons instead of one. When clicked, receive the following error.

try.js?v=1:251 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
at HTMLButtonElement. (try.js?v=1:251)
at HTMLButtonElement.dispatch (VM12181 jquery.min.js:3)
at HTMLButtonElement.q.handle (VM12181 jquery.min.js:3)

Something went wrong.

hi,
i am using https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js and i tried using the one given in readme but its giving me the error

utils.js:50 Fetch finished loading: GET "https://crada.dev/doc/crada-doc.yaml".
(anonymous) @ utils.js:50
(anonymous) @ utils.js:8
r @ utils.js:4
t.readFileFromUrl @ utils.js:42
(anonymous) @ resolve.js:94
(anonymous) @ resolve.js:8
r @ resolve.js:4
loadExternalRef @ resolve.js:91
(anonymous) @ resolve.js:132
(anonymous) @ resolve.js:8
r @ resolve.js:4
resolveDocument @ resolve.js:126
(anonymous) @ bundle.js:31
(anonymous) @ bundle.js:8
r @ bundle.js:4
t.bundle @ bundle.js:26
(anonymous) @ loadAndBundleSpec.ts:33
(anonymous) @ tslib.es6.js:102
(anonymous) @ tslib.es6.js:83
(anonymous) @ tslib.es6.js:76
u @ tslib.es6.js:72
l @ redoc.standalone.js:37
(anonymous) @ StoreBuilder.ts:86
(anonymous) @ tslib.es6.js:102
(anonymous) @ tslib.es6.js:83
(anonymous) @ tslib.es6.js:76
u @ tslib.es6.js:72
t.load @ redoc.standalone.js:100
t.componentDidMount @ StoreBuilder.ts:67
is @ react-dom.production.min.js:212
dl @ react-dom.production.min.js:255
t.unstable_runWithPriority @ scheduler.production.min.js:19
qo @ react-dom.production.min.js:122
fl @ react-dom.production.min.js:248
Zs @ react-dom.production.min.js:239
Qs @ react-dom.production.min.js:230
Dl @ react-dom.production.min.js:281
(anonymous) @ react-dom.production.min.js:284
tl @ react-dom.production.min.js:240
Bl @ react-dom.production.min.js:284
t.render @ react-dom.production.min.js:290
xf @ standalone.tsx:53
(anonymous) @ standalone.tsx:86
(anonymous) @ standalone.tsx:90
n @ bootstrap:19
(anonymous) @ redoc.standalone.js:56
n @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ redoc.standalone.js:7
(anonymous) @ universalModuleDefinition:9
(anonymous) @ universalModuleDefinition:1
Show 21 more frames
try.js:formatted:153 Something went wrong.
(anonymous) @ try.js:formatted:153
Promise.catch (async)
initTry @ try.js:formatted:152
(anonymous) @ api:27
DevTools failed to load source map: Could not load content for https://crada.dev/6d3017e92bb2b2c03e6b.worker.js.map: Fetch through target failed: Target not supported; Fallback: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

<body>
<redoc spec-url='{{ asset('doc/crada-doc.yaml') }}'></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
<script src="{{ asset('js/try.js') }}"></script>
<script>
    initTry("{{ asset('doc/crada-doc.yaml') }}")
  </script>
</body>

FastApi integration

Hello,
I'm currently using python's library FastAPI to make the endpoints and generate its Redoc documentation, is there any way to integrate your project using FastApi library?