Coder Social home page Coder Social logo

data-analisis / tssg-editor Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tauqeernasir/tssg-editor

0.0 1.0 0.0 4.54 MB

Generate Swagger Schemas in easy and short way

Home Page: https://tauqeernasir.github.io/tssg-editor/

License: MIT License

HTML 8.05% TypeScript 87.10% CSS 4.85%

tssg-editor's Introduction

TSSG - The Swagger Schema Generator

Write schema in an easy, concise and short way.

Current Version Current Version Current Version


Vision and Motivation

Writing OpenAPI Schema can be tiresome and time wasting task if you write a lot of API Documentation. Updating existing Schema can also be cumbersome and confusing especially when project grows to hundreds of APIs. TSSG is here to help you write schema in an easy, clean and concise way. We have proposed a new and easy to understand Syntax/Grammar for this. It allows you to write less and get full OpenAPI Schema without writing and repeating same line again and again.

Project Roadmap

Our aim is to build a tool that helps you in splitting your APIs Schemas and Endpoints Definitions into separate files so that it's easy to maintain and update/edit the target APIs.

Below is our roadmap:

  • TSSG Syntax Parser (Alpha Version released)
  • TSSG to OpenAPI Transformer (Alpha Version released)
  • TSSG Editor (Alpha Version released)
  • OpenAPI to TSSG Syntax Transformer (WIP)
  • TSSG CLI (WIP)

How to use?

Consider the following object Schema of User:

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "age": {
      "type": "number"
    },
    "email": {
      "type": "string"
    },
    "address": {
      "type": "object",
      "properties": {
        "street": {
          "type": "string"
        },
        "city": {
          "type": "string"
        },
        "country": {
          "type": "string"
        },
        "zipcode": {
          "type": "string"
        }
      }
    }
  }
}

The above schema has a lot of repetition and if the schema is more complex that have nested object or array of object, it gets more complex to write.

On the other hand, with TSSG, above schema can be written as:

{
    name: string,
    age: number,
    email: string,
    address: {
        street: string,
        city: string,
        country: string,
        zipcode: string,
    }
}

We hope, we don't need to explain above syntax. It's already understandable and easy to type and read.

You only need to mention the type of the property and it will be tranformed to { "type": "string" } form.

Supported Types

Following data types are support as of now:

  • string
  • number
  • integer
  • boolean
  • {} (shorthand for object type)
  • [] (shorthand for array)

More Examples

Required Properties

Let's take the above example again, and add some properties as required.

{
  "type": "object",
  "required": ["name", "email", "address"],
  "properties": {
    "name": {
      "type": "string"
    },
    "age": {
      "type": "number"
    },
    "email": {
      "type": "string"
    },
    "address": {
      "type": "object",
      "required": ["country"],
      "properties": {
        "street": {
          "type": "string"
        },
        "city": {
          "type": "string"
        },
        "country": {
          "type": "string"
        },
        "zipcode": {
          "type": "string"
        }
      }
    }
  }
}

In the above schema, we have name, email and address as required property and inside the address object we have country as required.

To write the above schema, you can simply do the following:

{
    name: !string,
    age: number,
    email: !string,
    address: !{
        street: string,
        city: string,
        country: !string,
        zipcode: string,
    }
}

You can mark a property as required by using ! (exclamation mark) in front of data type. Above mentioned syntax will produce the exact same OpenAPI Schema shown above example.

Notice ! in the start of address value.

Arrays

Consider this simple example which accepts data property of type array of string.

{
  "type": "object",
  "properties": {
    "data": {
      "type": "array",
      "items": {
        "type": "string"
      }
    }
  }
}

Above schema can be written in TSSG as follows:

{
    data: [string]
}

Look, how simple it is to define array of string in one simple line.

You can also mark data property as required using ! sign.

{
    data: ![string]
}

Above TSSG syntax will produce following Schema:

{
  "type": "object",
  "required": ["data"],
  "properties": {
    "data": {
      "type": "array",
      "items": {
        "type": "string"
      }
    }
  }
}

Array of Objects

Consider the following schema:

{
  "type": "object",
  "properties": {
    "data": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": {
            "type": "string"
          },
          "age": {
            "type": "number"
          },
          "email": {
            "type": "string"
          },
          "address": {
            "type": "object",
            "required": ["country"],
            "properties": {
              "street": {
                "type": "string"
              },
              "city": {
                "type": "string"
              },
              "country": {
                "type": "string"
              },
              "zipcode": {
                "type": "string"
              }
            }
          }
        }
      }
    }
  }
}

Above schema can be written in TSSG as follow:

{
    data: [{
        name: string,
        age: number,
        email: string,
        address: {
            street: string,
            city: string,
            country: string,
            zipcode: string,
        }
    }]
}

If data property is required, just mark that required using ! sign.

Enums

You can use the enum keyword to specify possible values of a request parameter or a model property. For example, consider the following schema:

{
    "type": "object",
    "properties": {
        "colors": {
            "type": "string",
            "enum": [
                "red",
                "green",
                "blue"
            ]
        }
    }
}

Above schema can be written in TSSG as follows:

{
    colors: enumOf(string, "red", "green", "blue"),
}

Contributors โœจ

Thanks goes to these wonderful people (emoji key):

Tauqeer Nasir
Tauqeer Nasir

๐Ÿ’ป ๐Ÿšง ๐Ÿ“– ๐Ÿ’ก
Akshat Sharma
Akshat Sharma

๐Ÿ’ป ๐Ÿ“– ๐Ÿ’ก ๐Ÿšง
Ming Hu
Ming Hu

๐Ÿ’ป ๐Ÿ’ก ๐Ÿšง

tssg-editor's People

Contributors

dependabot[bot] avatar jskod avatar mingwho avatar tauqeernasir avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.