77 < meta http-equiv ="Content-Type " content ="text/html; charset=UTF-8 ">
88 < link rel ="stylesheet " href ="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css " crossorigin ="anonymous ">
99 < link rel ="stylesheet " href ="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css " crossorigin ="anonymous ">
10- < title > Compared to other libraries </ title >
10+ < title > Compared to other generators </ title >
1111 </ head >
1212 < body >
1313 < div class ="container ">
14- < div class ="page-header ">
15- < h1 > Compared to other libraries </ h1 >
14+ < section class ="page-header ">
15+ < h1 > Compared to other generators </ h1 >
1616 < p class ="lead ">
17- Depending on which generator you use, you will see different output. For instance:
17+ Depending on which swagger generator you use, you will see different output. For instance:
1818 Different ways of generating models, services, level of quality, HTTP client, etc.
1919 I've compiled a list below with the results per area and how they compare
20- against the openapi-typescript-codegen.
20+ against the < strong > openapi-typescript-codegen.</ strong >
2121 </ p >
22- </ div >
22+ </ section >
2323 < h5 > I've used the standard petshop examples from OpenAPI:</ h5 >
2424 < ul >
2525 < li > < a href ="https://petstore3.swagger.io/api/v3/openapi.json " target ="_blank "> https://petstore3.swagger.io/api/v3/openapi.json</ a > </ li >
@@ -41,7 +41,7 @@ <h5>And used the following generators with their default options:</h5>
4141 < thead >
4242 < tr >
4343 < th width ="30% "> </ th >
44- < th width ="10% "> openapi-typscript -codegen</ th >
44+ < th width ="10% "> openapi-typescript -codegen</ th >
4545 < th width ="10% "> aurelia</ th >
4646 < th width ="10% "> inversify</ th >
4747 < th width ="10% "> angular</ th >
@@ -53,7 +53,7 @@ <h5>And used the following generators with their default options:</h5>
5353 < tbody >
5454 < tr >
5555 < th > Supports OpenApi v2 specification</ th >
56- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
56+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
5757 < td class ="success " data-type ="aurelia "> ✅</ td >
5858 < td class ="success " data-type ="inversify "> ✅</ td >
5959 < td class ="success " data-type ="angular "> ✅</ td >
@@ -63,7 +63,7 @@ <h5>And used the following generators with their default options:</h5>
6363 </ tr >
6464 < tr >
6565 < th > Supports OpenApi v3 specification</ th >
66- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
66+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
6767 < td class ="danger " data-type ="aurelia "> ❌</ td >
6868 < td class ="danger " data-type ="inversify "> ❌</ td >
6969 < td class ="success " data-type ="angular "> ✅</ td >
@@ -73,7 +73,7 @@ <h5>And used the following generators with their default options:</h5>
7373 </ tr >
7474 < tr >
7575 < th > Supports authentication</ th >
76- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
76+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
7777 < td class ="danger " data-type ="aurelia "> ❌</ td >
7878 < td class ="success " data-type ="inversify "> ✅</ td >
7979 < td class ="success " data-type ="angular "> ✅</ td >
@@ -83,7 +83,7 @@ <h5>And used the following generators with their default options:</h5>
8383 </ tr >
8484 < tr >
8585 < th > Strongly typed models</ th >
86- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
86+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
8787 < td class ="success " data-type ="aurelia "> ✅</ td >
8888 < td class ="success " data-type ="inversify "> ✅</ td >
8989 < td class ="success " data-type ="angular "> ✅</ td >
@@ -93,7 +93,7 @@ <h5>And used the following generators with their default options:</h5>
9393 </ tr >
9494 < tr >
9595 < th > Strongly typed enums</ th >
96- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
96+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
9797 < td class ="success " data-type ="aurelia "> ✅</ td >
9898 < td class ="success " data-type ="inversify "> ✅</ td >
9999 < td class ="success " data-type ="angular "> ✅</ td >
@@ -103,7 +103,7 @@ <h5>And used the following generators with their default options:</h5>
103103 </ tr >
104104 < tr >
105105 < th > Models and services exported as individual files</ th >
106- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
106+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
107107 < td class ="danger " data-type ="aurelia "> ❌</ td >
108108 < td class ="success " data-type ="inversify "> ✅</ td >
109109 < td class ="success " data-type ="angular "> ✅</ td >
@@ -113,7 +113,7 @@ <h5>And used the following generators with their default options:</h5>
113113 </ tr >
114114 < tr >
115115 < th > Index file that exports all services and models</ th >
116- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
116+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
117117 < td class ="success " data-type ="aurelia "> ✅</ td >
118118 < td class ="danger " data-type ="inversify "> ❌</ td >
119119 < td class ="success " data-type ="angular "> ✅</ td >
@@ -123,7 +123,7 @@ <h5>And used the following generators with their default options:</h5>
123123 </ tr >
124124 < tr >
125125 < th > Service returns typed result</ th >
126- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
126+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
127127 < td class ="success " data-type ="aurelia "> ✅</ td >
128128 < td class ="success " data-type ="inversify "> ✅</ td >
129129 < td class ="success " data-type ="angular "> ✅</ td >
@@ -133,17 +133,27 @@ <h5>And used the following generators with their default options:</h5>
133133 </ tr >
134134 < tr >
135135 < th > Service supports sending and receiving binary content</ th >
136- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
136+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
137137 < td class ="success " data-type ="aurelia "> ✅</ td >
138138 < td class ="success " data-type ="inversify "> ✅</ td >
139- < td class ="danger " data-type ="angular "> ❌</ td >
140- < td class ="danger " data-type ="fetch "> ❌</ td >
139+ < td class ="warning " data-type ="angular ">
140+ < details >
141+ < summary > ⚠️</ summary >
142+ < p > V3 version sends data as < code > application/octet-stream</ code > instead of < code > application/x-www-form-urlencoded</ code > </ p >
143+ </ details >
144+ </ td >
145+ < td class ="warning " data-type ="fetch ">
146+ < details >
147+ < summary > ⚠️</ summary >
148+ < p > V3 version sends data as < code > application/octet-stream</ code > instead of < code > application/x-www-form-urlencoded</ code > </ p >
149+ </ details >
150+ </ td >
141151 < td class ="success " data-type ="jquery "> ✅</ td >
142152 < td class ="success " data-type ="node "> ✅</ td >
143153 </ tr >
144154 < tr >
145155 < th > Models and services contain inline documentation</ th >
146- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
156+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
147157 < td class ="success " data-type ="aurelia "> ✅</ td >
148158 < td class ="success " data-type ="inversify "> ✅</ td >
149159 < td class ="success " data-type ="angular "> ✅</ td >
@@ -153,46 +163,97 @@ <h5>And used the following generators with their default options:</h5>
153163 </ tr >
154164 < tr >
155165 < th > Framework agnostic</ th >
156- < td class ="success " data-type ="openapi-typscript -codegen "> ✅</ td >
166+ < td class ="success " data-type ="openapi-typescript -codegen "> ✅</ td >
157167 < td class ="danger " data-type ="aurelia "> ❌</ td >
158168 < td class ="danger " data-type ="inversify "> ❌</ td >
159169 < td class ="danger " data-type ="angular "> ❌</ td >
160- < td class ="success " data-type ="fetch "> ✅</ td >
170+ < td class ="warning " data-type ="node ">
171+ < details >
172+ < summary > ⚠️</ summary >
173+ < p > Requires portable-fetch</ p >
174+ </ details >
175+ </ td >
161176 < td class ="danger " data-type ="jquery "> ❌</ td >
162- < td class ="danger " data-type ="node "> ❌</ td >
177+ < td class ="warning " data-type ="node ">
178+ < details >
179+ < summary > ⚠️</ summary >
180+ < p > Requires bluebird</ p >
181+ </ details >
182+ </ td >
183+ </ tr >
184+ < tr >
185+ < th > Compiles in strict mode without issues</ th >
186+ < td class ="success " data-type ="openapi-typescript-codegen "> ✅</ td >
187+ < td class ="danger " data-type ="aurelia ">
188+ < details >
189+ < summary > ❌</ summary >
190+ < p > Errors when compiling: < code > PetApi.ts:147:30 - error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'</ code > </ p >
191+ </ details >
192+ </ td >
193+ < td class ="danger " data-type ="inversify ">
194+ < details >
195+ < summary > ❌</ summary >
196+ < p > Errors when compiling: < code > pet.service.ts:312:159 - error TS2304: Cannot find name 'body'</ code > </ p >
197+ </ details >
198+ </ td >
199+ < td class ="danger " data-type ="angular ">
200+ < details >
201+ < summary > ❌</ summary >
202+ < p > Errors when compiling: < code > pet.service.ts:528:26 - error TS1345: An expression of type 'void' cannot be tested for truthiness</ code > </ p >
203+ </ details >
204+ </ td >
205+ < td class ="danger " data-type ="fetch ">
206+ < details >
207+ < summary > ❌</ summary >
208+ < p > Errors when compiling: < code > api.ts:2276:67 - error TS2300: Duplicate identifier 'username'</ code > </ p >
209+ </ details >
210+ </ td >
211+ < td class ="danger " data-type ="jquery ">
212+ < details >
213+ < summary > ❌</ summary >
214+ < p > Errors when compiling: < code > PetApi.ts:25:12 - error TS2322: Type 'null' is not assignable to type 'JQueryAjaxSettings | undefined'</ code > </ p >
215+ </ details >
216+ </ td >
217+ < td class ="danger " data-type ="node ">
218+ < details >
219+ < summary > ❌</ summary >
220+ < p > Errors when compiling: < code > api.ts:1631:45 - error TS2694: Namespace '"http"' has no exported member 'ClientResponse'</ code > </ p >
221+ </ details >
222+ </ td >
163223 </ tr >
164224 < tr >
165225 < th > Generated size (typescript)</ th >
166- < td > < span class =" badge " data-type ="openapi-typscript -codegen "> 30Kb </ span > </ td >
167- < td > < span class ="badge " data-type =" aurelia " > 30Kb </ span > </ td >
168- < td > < span class ="badge " data-type =" inversify " > 30Kb </ span > </ td >
169- < td > < span class ="badge " data-type =" angular " > 30Kb </ span > </ td >
170- < td > < span class ="badge " data-type =" fetch " > 30Kb </ span > </ td >
171- < td > < span class ="badge " data-type =" jquery " > 30Kb </ span > </ td >
172- < td > < span class ="badge " data-type =" node " > 30Kb </ span > </ td >
226+ < td data-type ="openapi-typescript -codegen "> < span class =" badge " > 30KB </ span > </ td >
227+ < td data-type =" aurelia " > < span class ="badge "> 29KB </ span > </ td >
228+ < td data-type =" inversify " > < span class ="badge "> 37KB </ span > </ td >
229+ < td data-type =" angular " > < span class ="badge "> 63KB </ span > </ td >
230+ < td data-type =" fetch " > < span class ="badge "> 85KB </ span > </ td >
231+ < td data-type =" jquery " > < span class ="badge "> 57KB </ span > </ td >
232+ < td data-type =" node " > < span class ="badge "> 65KB </ span > </ td >
173233 </ tr >
174234 < tr >
175- < th > Build size (javascript)</ th >
176- < td > < span class =" badge " data-type ="openapi-typscript -codegen "> 30Kb </ span > </ td >
177- < td > < span class ="badge " data-type =" aurelia " > 30Kb </ span > </ td >
178- < td > < span class ="badge " data-type =" inversify " > 30Kb </ span > </ td >
179- < td > < span class ="badge " data-type =" angular " > 30Kb </ span > </ td >
180- < td > < span class ="badge " data-type =" fetch " > 30Kb </ span > </ td >
181- < td > < span class ="badge " data-type =" jquery " > 30Kb </ span > </ td >
182- < td > < span class ="badge " data-type =" node " > 30Kb </ span > </ td >
235+ < th > Build size (javascript, not minimized )</ th >
236+ < td data-type ="openapi-typescript -codegen "> < span class =" badge " > 17KB </ span > </ td >
237+ < td data-type =" aurelia " > < span class ="badge "> 16KB </ span > </ td >
238+ < td data-type =" inversify " > < span class ="badge "> 22KB </ span > </ td >
239+ < td data-type =" angular " > < span class ="badge "> 36KB </ span > </ td >
240+ < td data-type =" fetch " > < span class ="badge "> 48KB </ span > </ td >
241+ < td data-type =" jquery " > < span class ="badge "> 37KB </ span > </ td >
242+ < td data-type =" node " > < span class ="badge "> 53KB </ span > </ td >
183243 </ tr >
184244 < tr >
185245 < th > Generation time</ th >
186- < td > < span class =" badge " data-type ="openapi-typscript -codegen "> 0.132s</ span > </ td >
187- < td > < span class ="badge " data-type =" aurelia "> 0.715s</ span > </ td >
188- < td > < span class ="badge " data-type =" inversify "> 0.788s</ span > </ td >
189- < td > < span class ="badge " data-type =" angular "> 1.386s</ span > </ td >
190- < td > < span class ="badge " data-type =" fetch "> 1.103s</ span > </ td >
191- < td > < span class ="badge " data-type =" jquery "> 0.728s</ span > </ td >
192- < td > < span class ="badge " data-type =" node "> 0.752s</ span > </ td >
246+ < td data-type ="openapi-typescript -codegen " > < span class =" badge "> 0.132s</ span > </ td >
247+ < td data-type =" aurelia " > < span class ="badge "> 0.715s</ span > </ td >
248+ < td data-type =" inversify " > < span class ="badge "> 0.788s</ span > </ td >
249+ < td data-type =" angular " > < span class ="badge "> 1.386s</ span > </ td >
250+ < td data-type =" fetch " > < span class ="badge "> 1.103s</ span > </ td >
251+ < td data-type =" jquery " > < span class ="badge "> 0.728s</ span > </ td >
252+ < td data-type =" node " > < span class ="badge "> 0.752s</ span > </ td >
193253 </ tr >
194254 </ tbody >
195255 </ table >
256+ < script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " crossorigin ="anonymous "> </ script >
196257 </ div >
197258 </ body >
198259</ html >
0 commit comments