npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@frostup/swr-request-generator

v0.7.5

Published

A tool for generating TypeScript code and interface from swagger by using SWR and axios as client.

Downloads

5

Readme

SWR request generator

This tool can generate SWR request and related request params and response interface from swagger.

it will generate all GET request via SWR and others will be axios.

Dependencies

if you want to use this tool, your project should be:

  1. your back end API should use swagger and OpenAPI 3.0 standard
  2. your front end client should be axios
  3. use SWR as data fetching lib for your front end web app

How to use

install

npm install -D @openapi-integration/swr-request-generator

or

yarn add -D @openapi-integration/swr-request-generator

Configuration

script

add a npm script to your package.json file:

{
  "scripts": {
    "codegen": "ts-codegen"
  }
}

config file

create a new json file named ts-codegen.config.json in your project root directory like this

{
  "output": "src/request",
  "fileHeaders": [
    "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */",
    "/* eslint-disable @typescript-eslint/no-explicit-any */",
    "import { ISWRConfig, useRequest } from './useRequest';",
    "import { IResponseError } from \"../../constants/error\";",
    "import { client } from \"./client\";"
  ],
  "clients": ["https://app.swaggerhub.com/apiproxy/registry/teobler/integration-example/1.0.0"],
  "fileName": "api",
  "data": ["./examples/openAPI.json"]
}

fields meaning:

  • output(string): output file dir
  • fileName(string): output filename
  • fileHeaders(string[]): strings in this array will be placed in output file beginning
  • clients(string[]): your swagger urls
  • data(string[]): your local swagger json file dirs

Run it!

  1. Find an address where you can get your back-end API swagger json file (either online or local), it should be an url can get swagger json response
  2. Fill this address into the clients array of the above configuration file. If you have multiple addresses, fill in multiple string addresses.
  3. If you can only download the swagger json file, that's fine, just put the json file into your project and fill in your file path in the data field of the config file.
  4. Run npm run codegen then you can find output file in your output dir

if your swagger url need basic auth, just run npm run codegen -- -a "Basic #basicAuthHeader"

example

all the details can be found in example folder.

clone this repo

run npm i to install all dependency

then run bin/ts-codegen.js can generate api file in example/request/api.ts

how to use this file can be found in page.tsx

changelog

changelog