mirror of
https://github.com/ferdikoomen/openapi-typescript-codegen.git
synced 2025-12-08 20:16:21 +00:00
- Working on better HTML page
This commit is contained in:
Ferdi Koomen
parent
33a3351b46
commit
8af28237b4
188
samples/README.html
Normal file
188
samples/README.html
Normal file
@ -0,0 +1,188 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="google" value="notranslate">
|
||||
<meta http-equiv="Content-Language" content="en_EN">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" crossorigin="anonymous">
|
||||
<title>Compared to other libraries</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>Compared to other libraries</h1>
|
||||
<p class="lead">
|
||||
Depending on which generator you use, you will see different output. For instance:
|
||||
Different ways of generating models, services, level of quality, HTTP client, etc.
|
||||
I've compiled a list below with the results per area and how they compare
|
||||
against the openapi-typescript-codegen.
|
||||
</p>
|
||||
</div>
|
||||
<h5>I've used the standard petshop examples from OpenAPI:</h5>
|
||||
<ul>
|
||||
<li><a href="https://petstore3.swagger.io/api/v3/openapi.json" target="_blank">https://petstore3.swagger.io/api/v3/openapi.json</a></li>
|
||||
<li><a href="https://petstore.swagger.io/v2/swagger.json" target="_blank">https://petstore.swagger.io/v2/swagger.json</a></li>
|
||||
</ul>
|
||||
<hr/>
|
||||
<h5>And used the following generators with their default options:</h5>
|
||||
<ul>
|
||||
<li>typescript-aurelia</li>
|
||||
<li>typescript-angular</li>
|
||||
<li>typescript-inversify</li>
|
||||
<li>typescript-angular</li>
|
||||
<li>typescript-fetch</li>
|
||||
<li>typescript-jquery</li>
|
||||
<li>typescript-node</li>
|
||||
</ul>
|
||||
<hr/>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="30%"></th>
|
||||
<th width="10%">openapi-typscript-codegen</th>
|
||||
<th width="10%">aurelia</th>
|
||||
<th width="10%">inversify</th>
|
||||
<th width="10%">angular</th>
|
||||
<th width="10%">fetch</th>
|
||||
<th width="10%">jquery</th>
|
||||
<th width="10%">node</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Supports OpenApi v2 specification</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Supports OpenApi v3 specification</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="danger">❌</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Supports authentication</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Strongly typed models</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Strongly typed enums</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Models and services exported as individual files</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Index file that exports all services and models</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Service returns typed result</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Service supports sending and receiving binary content</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Models and services contain inline documentation</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="success">✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Framework agnostic</th>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="success">✅</td>
|
||||
<td class="danger">❌</td>
|
||||
<td class="danger">❌</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Generated size (typescript)</th>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Build size (javascript)</th>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
<td><span class="badge">30Kb</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,149 +0,0 @@
|
||||
# Compare to other libraries
|
||||
|
||||
Depending on which generator you use, you will see different output. For instance:
|
||||
Different ways of generating models, services, level of quality, HTTP client, etc.
|
||||
I've compiled a list below with the results per area and how they compare
|
||||
against the openapi-typescript-codegen.
|
||||
|
||||
I've used the standard petshop examples from OpenAPI:
|
||||
- https://petstore3.swagger.io/api/v3/openapi.json
|
||||
- https://petstore.swagger.io/v2/swagger.json
|
||||
|
||||
And used the following generators with their default options:
|
||||
|
||||
- typescript-aurelia
|
||||
- typescript-angular
|
||||
- typescript-inversify
|
||||
- typescript-angular
|
||||
- typescript-fetch
|
||||
- typescript-jquery
|
||||
- typescript-node
|
||||
|
||||
#Results
|
||||
|
||||
<table style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<thead>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th></th>
|
||||
<th>openapi-typscript-codegen</th>
|
||||
<th>aurelia</th>
|
||||
<th>inversify</th>
|
||||
<th>angular</th>
|
||||
<th>fetch</th>
|
||||
<th>jquery</th>
|
||||
<th>node</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Supports OpenApi v2 specification</th>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
</tr>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Supports OpenApi v3 specification</th>
|
||||
<td>✅</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
</tr>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Supports authentication</th>
|
||||
<td>✅<div>Bearer token</div></td>
|
||||
<td>❌</td>
|
||||
<td>✅<div>Bearer token</div></td>
|
||||
<td>✅<div>Bearer token</div></td>
|
||||
<td>✅<div>Bearer token</div></td>
|
||||
<td>✅<div>Bearer token</div></td>
|
||||
<td>✅<div>Bearer token</div></td>
|
||||
</tr>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Strongly typed models</th>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅<div>Using classes instead of simple interfaces</td>
|
||||
</tr>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Strongly typed enums</th>
|
||||
<td>✅</td>
|
||||
<td>✅<div>No enum is exported</div></td>
|
||||
<td>✅</td>
|
||||
<td>✅<div>Odd cast to <code><any></code></div></td>
|
||||
<td>✅<div>Odd cast to <code><any></code></div></td>
|
||||
<td>✅<div>Odd cast to <code><any></code></div></td>
|
||||
<td>✅<div>Odd cast to <code><any></code></div></td>
|
||||
</tr>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Models and services exported as individual files</th>
|
||||
<td>✅</td>
|
||||
<td>❌<div>All models inside one file</div></td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>❌<div>All models and services inside one file</div></td>
|
||||
<td>✅</td>
|
||||
<td>❌<div>All models and services inside one file</div></td>
|
||||
</tr>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Index file that exports all services and models</th>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>❌</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>❌</td>
|
||||
</tr>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Service returns typed result</th>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>❌</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
</tr>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Service supports sending and receiving binary content</th>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
<td>❌<div>Passing file as <code>application/octet-stream</code></div></td>
|
||||
<td>❌<div>Passing file as <code>application/octet-stream</code></div></td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
</tr>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Models and services contain inline documentation</th>
|
||||
<td>✅</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
</tr>
|
||||
<tr style="font-size: 12px; vertical-align: top; text-align: left;">
|
||||
<th>Framework agnostic</th>
|
||||
<td>✅</td>
|
||||
<td>❌<div>No, using <code>aurelia</code></div></td>
|
||||
<td>❌<div>No, using <code>inversify</code> and <code>rxjs</code></div></td>
|
||||
<td>❌<div> No, using <code>angular</code></div></td>
|
||||
<td>✅<div>But depends on <code>portable-fetch</code></div></td>
|
||||
<td>❌<div>No, using <code>jquery</code></div></td>
|
||||
<td>❌<div>No, can only be used with NodeJS <code>http</code></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -15,3 +15,5 @@ java -jar ./swagger-codegen-cli-v3.jar generate -i v3/spec.json -l typescript-fe
|
||||
|
||||
node ../bin/index.js --input v2/spec.json --output examples/v2/openapi-typescript-codegen/
|
||||
node ../bin/index.js --input v3/spec.json --output examples/v3/openapi-typescript-codegen/
|
||||
|
||||
cd examples && find . -type f ! -iname "*.ts" -delete
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user