@innet/server 2.0.0-beta.5 → 2.0.0-beta.6

package/README.md

@@ -581,7 +581,7 @@ This section contains elements of utils.
 
 [← back](#index)
 
-[\<swagger>](#swagger)  
+[\<ui>](#ui)  
 [\<env>](#env)  
 [\<dts>](#dts)  
 [\<blacklist>](#blacklist)  
@@ -590,40 +590,151 @@ This section contains elements of utils.
 
 ---
 
-### \<swagger>
+### \<ui>
 
 [← back](#utils)
 
-Use `<swagger>` element to add Swagger UI documentation.
-`<swagger>` element MUST be placed in `<api>` element.
+Use `<ui>` element to add API documentation UI. This element supports multiple documentation viewers including Swagger UI, RapiDoc, ReDoc, and Scalar.
+`<ui>` element MUST be placed in `<api>` element.
 
 *src/app.tsx*
 ```typescript jsx
 export default (
   <server>
     <api>
-      <swagger />
+      <ui />
     </api>
   </server>
 )
 ```
 
-Open http://localhost:80/swagger-ui
-You will see Swagger UI documentation.
+Open http://localhost:80/ui
+You will see Swagger UI documentation by default.
 
-You can change the Swagger UI URL path by `path` property of `<swagger>` element.
+#### html
+
+You can provide custom HTML template for the documentation viewer.
+Built-in presets are available: `uiPresets.swagger`, `uiPresets.rapidoc`, `uiPresets.redoc`, `uiPresets.scalar`.
+
+*src/app.tsx*
+```typescript jsx
+import { uiPresets } from '@innet/server'
+
+export default (
+  <server>
+    <api>
+      <ui html={uiPresets.rapidoc} />
+    </api>
+  </server>
+)
+```
+
+#### params
+
+You can pass additional parameters to the documentation viewer. Parameters depend on the selected UI library.
+
+For **Swagger UI** (default):
 
 *src/app.tsx*
 ```typescript jsx
 export default (
   <server>
     <api>
-      <swagger path='/swagger' />
+      <ui
+        params={{
+          docExpansion: 'full',
+          filter: true,
+          showExtensions: true,
+        }}
+      />
     </api>
   </server>
 )
 ```
 
+For **Scalar**:
+
+*src/app.tsx*
+```typescript jsx
+import { uiPresets } from '@innet/server'
+
+export default (
+  <server>
+    <api>
+      <ui
+        html={uiPresets.scalar}
+        params={{
+          theme: 'moon',
+          layout: 'classic',
+        }}
+      />
+    </api>
+  </server>
+)
+```
+
+For **RapiDoc**:
+
+*src/app.tsx*
+```typescript jsx
+import { uiPresets } from '@innet/server'
+
+export default (
+  <server>
+    <api>
+      <ui
+        html={uiPresets.rapidoc}
+        params={{
+          theme: 'dark',
+          layout: 'row',
+          showHeader: 'false',
+        }}
+      />
+    </api>
+  </server>
+)
+```
+
+For **ReDoc**:
+
+*src/app.tsx*
+```typescript jsx
+import { uiPresets } from '@innet/server'
+
+export default (
+  <server>
+    <api>
+      <ui
+        html={uiPresets.redoc}
+        params={{
+          disableSearch: 'true',
+          hideDownloadButton: 'true',
+          nativeScrollbars: 'true',
+          theme: '{"sidebar": {"backgroundColor": "#d1e5ef"}}',
+        }}
+      />
+    </api>
+  </server>
+)
+```
+
+#### path
+
+You can change the documentation UI URL path by `path` property of `<ui>` element.
+
+*src/app.tsx*
+```typescript jsx
+export default (
+  <server>
+    <api>
+      <ui path='/docs' />
+    </api>
+  </server>
+)
+```
+
+*default: `INNET_UI_PATH` || `'/ui'`*
+
 ### \<env>
 
 [← back](#utils)

package/handler/handler.d.ts

@@ -1,6 +1,6 @@
 import { type JSXElement } from '@innet/jsx';
 import { arraySync, async } from '@innet/utils';
-import { type AnyProps, type ApiProps, type ArrayProps, type BinaryProps, blacklist, type BlacklistProps, type BodyProps, type BooleanProps, cms, type CmsProps, type ContactProps, type CookieProps, type DateProps, type DtsProps, type EndpointProps, type EnvProps, type ErrorProps, type FieldProps, file, type FileProps, type HeaderProps, type HostProps, type IntegerProps, type LicenseProps, type NullProps, type NumberProps, type ObjectProps, type ParamProps, preset, type PresetProps, protection, type ProtectionProps, type ProxyProps, type RedirectProps, type ResponseProps, type ReturnProps, type ServerProps, type StringProps, type SuccessProps, type SwaggerProps, type TagProps, type TupleProps, type UuidProps, type VariableProps, whitelist, type WhitelistProps } from '../plugins';
+import { type AnyProps, type ApiProps, type ArrayProps, type BinaryProps, blacklist, type BlacklistProps, type BodyProps, type BooleanProps, cms, type CmsProps, type ContactProps, type CookieProps, type DateProps, type DtsProps, type EndpointProps, type EnvProps, type ErrorProps, type FieldProps, file, type FileProps, type HeaderProps, type HostProps, type IntegerProps, type LicenseProps, type NullProps, type NumberProps, type ObjectProps, type ParamProps, preset, type PresetProps, protection, type ProtectionProps, type ProxyProps, type RedirectProps, type ResponseProps, type ReturnProps, type ServerProps, type StringProps, type SuccessProps, type SwaggerProps, type TagProps, type TupleProps, type UiProps, type UuidProps, type VariableProps, whitelist, type WhitelistProps } from '../plugins';
 export declare const arrayPlugins: (typeof arraySync)[];
 export declare const JSXPlugins: {
     any: import("innet").HandlerPlugin;
@@ -40,6 +40,7 @@ export declare const JSXPlugins: {
     swagger: import("innet").HandlerPlugin;
     tag: import("innet").HandlerPlugin;
     tuple: import("innet").HandlerPlugin;
+    ui: import("innet").HandlerPlugin;
     uuid: import("innet").HandlerPlugin;
     variable: import("innet").HandlerPlugin;
     whitelist: typeof whitelist;
@@ -92,9 +93,11 @@ declare global {
             server: ServerProps;
             string: StringProps;
             success: SuccessProps;
+            /** @deprecated Use <ui> */
             swagger: SwaggerProps;
             tag: TagProps;
             tuple: TupleProps;
+            ui: UiProps;
             uuid: UuidProps;
             variable: VariableProps;
             whitelist: WhitelistProps;

package/handler/handler.es6.js

@@ -39,6 +39,7 @@ import { success } from '../plugins/request/success/success.es6.js';
 import { swagger } from '../plugins/utils/swagger/swagger.es6.js';
 import { tag } from '../plugins/main/tag/tag.es6.js';
 import { tuple } from '../plugins/schema/tuple/tuple.es6.js';
+import { ui } from '../plugins/utils/ui/ui.es6.js';
 import { uuid } from '../plugins/schema/uuid/uuid.es6.js';
 import { variable } from '../plugins/main/variable/variable.es6.js';
 import { whitelist } from '../plugins/utils/whitelist/whitelist.es6.js';
@@ -85,6 +86,7 @@ const JSXPlugins = {
     swagger,
     tag,
     tuple,
+    ui,
     uuid,
     variable,
     whitelist,

package/handler/handler.js

@@ -43,6 +43,7 @@ var success = require('../plugins/request/success/success.js');
 var swagger = require('../plugins/utils/swagger/swagger.js');
 var tag = require('../plugins/main/tag/tag.js');
 var tuple = require('../plugins/schema/tuple/tuple.js');
+var ui = require('../plugins/utils/ui/ui.js');
 var uuid = require('../plugins/schema/uuid/uuid.js');
 var variable = require('../plugins/main/variable/variable.js');
 var whitelist = require('../plugins/utils/whitelist/whitelist.js');
@@ -89,6 +90,7 @@ const JSXPlugins = {
     swagger: swagger.swagger,
     tag: tag.tag,
     tuple: tuple.tuple,
+    ui: ui.ui,
     uuid: uuid.uuid,
     variable: variable.variable,
     whitelist: whitelist.whitelist,

package/index.es6.js

@@ -77,6 +77,7 @@ export { dts } from './plugins/utils/dts/dts.es6.js';
 export { env } from './plugins/utils/env/env.es6.js';
 export { protection } from './plugins/utils/protection/protection.es6.js';
 export { swagger } from './plugins/utils/swagger/swagger.es6.js';
+export { ui, uiPresets } from './plugins/utils/ui/ui.es6.js';
 export { whitelist } from './plugins/utils/whitelist/whitelist.es6.js';
 export { Bin } from './utils/FileData/Bin.es6.js';
 export { JSONString } from './utils/JSONString/JSONString.es6.js';

package/index.js

@@ -81,6 +81,7 @@ var dts = require('./plugins/utils/dts/dts.js');
 var env = require('./plugins/utils/env/env.js');
 var protection = require('./plugins/utils/protection/protection.js');
 var swagger = require('./plugins/utils/swagger/swagger.js');
+var ui = require('./plugins/utils/ui/ui.js');
 var whitelist = require('./plugins/utils/whitelist/whitelist.js');
 var Bin = require('./utils/FileData/Bin.js');
 var JSONString = require('./utils/JSONString/JSONString.js');
@@ -226,6 +227,8 @@ exports.dts = dts.dts;
 exports.env = env.env;
 exports.protection = protection.protection;
 exports.swagger = swagger.swagger;
+exports.ui = ui.ui;
+exports.uiPresets = ui.uiPresets;
 exports.whitelist = whitelist.whitelist;
 exports.Bin = Bin.Bin;
 exports.JSONString = JSONString.JSONString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innet/server",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "description": "Create server-side application with innet",
   "main": "index.js",
   "module": "index.es6.js",

package/plugins/utils/index.d.ts

@@ -3,4 +3,5 @@ export * from './dts';
 export * from './env';
 export * from './protection';
 export * from './swagger';
+export * from './ui';
 export * from './whitelist';

package/plugins/utils/index.es6.js

@@ -3,4 +3,5 @@ import './dts/index.es6.js';
 import './env/index.es6.js';
 import './protection/index.es6.js';
 import './swagger/index.es6.js';
+import './ui/index.es6.js';
 import './whitelist/index.es6.js';

package/plugins/utils/index.js

@@ -5,5 +5,6 @@ require('./dts/index.js');
 require('./env/index.js');
 require('./protection/index.js');
 require('./swagger/index.js');
+require('./ui/index.js');
 require('./whitelist/index.js');
 

package/plugins/utils/swagger/swagger.d.ts

@@ -2,4 +2,5 @@ import { type HandlerPlugin } from 'innet';
 export interface SwaggerProps {
     path?: string;
 }
+/** @deprecated Use <ui> */
 export declare const swagger: HandlerPlugin;

package/plugins/utils/swagger/swagger.es6.js

@@ -5,6 +5,7 @@ import { useApi } from '../../../hooks/useApi/useApi.es6.js';
 import { useServerPlugin } from '../../../hooks/useServerPlugin/useServerPlugin.es6.js';
 import { useAction } from '../../../hooks/useAction/useAction.es6.js';
 
+/** @deprecated Use <ui> */
 const swagger = () => {
     const { path = process.env.INNET_SWAGGER_PATH || '/swagger-ui', } = useProps() || {};
     const { docs, prefix, } = useApi();

package/plugins/utils/swagger/swagger.js

@@ -9,6 +9,7 @@ var useApi = require('../../../hooks/useApi/useApi.js');
 var useServerPlugin = require('../../../hooks/useServerPlugin/useServerPlugin.js');
 var useAction = require('../../../hooks/useAction/useAction.js');
 
+/** @deprecated Use <ui> */
 const swagger = () => {
     const { path = process.env.INNET_SWAGGER_PATH || '/swagger-ui', } = jsx.useProps() || {};
     const { docs, prefix, } = useApi.useApi();

package/plugins/utils/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './ui';

package/plugins/utils/ui/index.es6.js

@@ -0,0 +1 @@
+export { ui, uiPresets } from './ui.es6.js';

package/plugins/utils/ui/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ui = require('./ui.js');
+
+
+
+exports.ui = ui.ui;
+exports.uiPresets = ui.uiPresets;

package/plugins/utils/ui/rapidoc.html.es6.js

@@ -0,0 +1,3 @@
+var rapidoc = "<!doctype html>\n<html>\n<head>\n    <script type=\"module\" src=\"https://unpkg.com/rapidoc/dist/rapidoc-min.js\"></script>\n</head>\n<body>\n<rapi-doc spec-url=\"{apiUrl}\" {attributes}></rapi-doc>\n</body>\n</html>\n";
+
+export { rapidoc as default };

package/plugins/utils/ui/rapidoc.html.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var rapidoc = "<!doctype html>\n<html>\n<head>\n    <script type=\"module\" src=\"https://unpkg.com/rapidoc/dist/rapidoc-min.js\"></script>\n</head>\n<body>\n<rapi-doc spec-url=\"{apiUrl}\" {attributes}></rapi-doc>\n</body>\n</html>\n";
+
+exports["default"] = rapidoc;

package/plugins/utils/ui/redoc.html.es6.js

@@ -0,0 +1,3 @@
+var redoc = "<!DOCTYPE html>\n<html>\n<head>\n  <title>Redoc CE</title>\n  <meta charset=\"utf-8\"/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link href=\"https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700\" rel=\"stylesheet\">\n  <style>\n    body {\n      margin: 0;\n      padding: 0;\n    }\n  </style>\n</head>\n<body>\n<redoc spec-url='{apiUrl}' {attributes}></redoc>\n<script src=\"https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js\"> </script>\n</body>\n</html>\n";
+
+export { redoc as default };

package/plugins/utils/ui/redoc.html.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var redoc = "<!DOCTYPE html>\n<html>\n<head>\n  <title>Redoc CE</title>\n  <meta charset=\"utf-8\"/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link href=\"https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700\" rel=\"stylesheet\">\n  <style>\n    body {\n      margin: 0;\n      padding: 0;\n    }\n  </style>\n</head>\n<body>\n<redoc spec-url='{apiUrl}' {attributes}></redoc>\n<script src=\"https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js\"> </script>\n</body>\n</html>\n";
+
+exports["default"] = redoc;

package/plugins/utils/ui/scalar.html.es6.js

@@ -0,0 +1,3 @@
+var scalar = "<!doctype html>\n<html>\n<head>\n    <title>API Reference</title>\n    <meta charset=\"utf-8\" />\n    <meta\n            name=\"viewport\"\n            content=\"width=device-width, initial-scale=1\" />\n</head>\n<body>\n<div id=\"app\"></div>\n<script src=\"https://cdn.jsdelivr.net/npm/@scalar/api-reference\"></script>\n<script>\n  Scalar.createApiReference('#app', {\n    url: '{apiUrl}',\n    ...{params}\n  })\n</script>\n</body>\n</html>\n";
+
+export { scalar as default };

package/plugins/utils/ui/scalar.html.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var scalar = "<!doctype html>\n<html>\n<head>\n    <title>API Reference</title>\n    <meta charset=\"utf-8\" />\n    <meta\n            name=\"viewport\"\n            content=\"width=device-width, initial-scale=1\" />\n</head>\n<body>\n<div id=\"app\"></div>\n<script src=\"https://cdn.jsdelivr.net/npm/@scalar/api-reference\"></script>\n<script>\n  Scalar.createApiReference('#app', {\n    url: '{apiUrl}',\n    ...{params}\n  })\n</script>\n</body>\n</html>\n";
+
+exports["default"] = scalar;

package/plugins/utils/ui/swagger.html.es6.js

@@ -0,0 +1,3 @@
+var swagger = "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  <meta\n    name=\"description\"\n    content=\"SwaggerUI\"\n  />\n  <title>SwaggerUI</title>\n  <link rel=\"stylesheet\" href=\"https://unpkg.com/swagger-ui-dist/swagger-ui.css\" />\n</head>\n<body>\n<div id=\"swagger-ui\"></div>\n<script src=\"https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js\" crossorigin></script>\n<script>\n  window.onload = () => {\n    window.ui = SwaggerUIBundle({\n      url: \"{apiUrl}\",\n      dom_id: '#swagger-ui',\n      ...{params}\n    });\n  };\n</script>\n</body>\n</html>\n";
+
+export { swagger as default };

package/plugins/utils/ui/swagger.html.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var swagger = "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  <meta\n    name=\"description\"\n    content=\"SwaggerUI\"\n  />\n  <title>SwaggerUI</title>\n  <link rel=\"stylesheet\" href=\"https://unpkg.com/swagger-ui-dist/swagger-ui.css\" />\n</head>\n<body>\n<div id=\"swagger-ui\"></div>\n<script src=\"https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js\" crossorigin></script>\n<script>\n  window.onload = () => {\n    window.ui = SwaggerUIBundle({\n      url: \"{apiUrl}\",\n      dom_id: '#swagger-ui',\n      ...{params}\n    });\n  };\n</script>\n</body>\n</html>\n";
+
+exports["default"] = swagger;

package/plugins/utils/ui/ui.d.ts

@@ -0,0 +1,13 @@
+import { type HandlerPlugin } from 'innet';
+export declare const uiPresets: {
+    rapidoc: string;
+    redoc: string;
+    scalar: string;
+    swagger: string;
+};
+export interface UiProps {
+    html?: string;
+    params?: Record<string, any>;
+    path?: string;
+}
+export declare const ui: HandlerPlugin;

package/plugins/utils/ui/ui.es6.js

@@ -0,0 +1,45 @@
+import { placeholder } from '@cantinc/utils';
+import { useProps } from '@innet/jsx';
+import '../../../hooks/index.es6.js';
+import rapidoc from './rapidoc.html.es6.js';
+import redoc from './redoc.html.es6.js';
+import scalar from './scalar.html.es6.js';
+import swagger from './swagger.html.es6.js';
+import { useApi } from '../../../hooks/useApi/useApi.es6.js';
+import { useServerPlugin } from '../../../hooks/useServerPlugin/useServerPlugin.es6.js';
+import { useAction } from '../../../hooks/useAction/useAction.es6.js';
+
+function camelToDash(str) {
+    return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+const uiPresets = { rapidoc, redoc, scalar, swagger };
+const ui = () => {
+    const { html = uiPresets.swagger, params = {}, path = process.env.INNET_UI_PATH || '/ui', } = useProps() || {};
+    const { docs, prefix, } = useApi();
+    let cache = '';
+    useServerPlugin(() => {
+        const action = useAction();
+        if (action.path === prefix + path) {
+            if (!cache) {
+                const attributes = Object
+                    .keys(params)
+                    .reduce((res, key) => {
+                    return `${res} ${camelToDash(key)}='${String(params[key])}'`;
+                }, '');
+                cache = placeholder(html, {
+                    apiUrl: prefix,
+                    attributes,
+                    docs: JSON.stringify(docs),
+                    params: JSON.stringify(params),
+                    ...params,
+                });
+            }
+            action.res.statusCode = 200;
+            action.res.write(cache);
+            action.res.end();
+            return true;
+        }
+    });
+};
+
+export { ui, uiPresets };

package/plugins/utils/ui/ui.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@cantinc/utils');
+var jsx = require('@innet/jsx');
+require('../../../hooks/index.js');
+var rapidoc = require('./rapidoc.html.js');
+var redoc = require('./redoc.html.js');
+var scalar = require('./scalar.html.js');
+var swagger = require('./swagger.html.js');
+var useApi = require('../../../hooks/useApi/useApi.js');
+var useServerPlugin = require('../../../hooks/useServerPlugin/useServerPlugin.js');
+var useAction = require('../../../hooks/useAction/useAction.js');
+
+function camelToDash(str) {
+    return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+const uiPresets = { rapidoc: rapidoc["default"], redoc: redoc["default"], scalar: scalar["default"], swagger: swagger["default"] };
+const ui = () => {
+    const { html = uiPresets.swagger, params = {}, path = process.env.INNET_UI_PATH || '/ui', } = jsx.useProps() || {};
+    const { docs, prefix, } = useApi.useApi();
+    let cache = '';
+    useServerPlugin.useServerPlugin(() => {
+        const action = useAction.useAction();
+        if (action.path === prefix + path) {
+            if (!cache) {
+                const attributes = Object
+                    .keys(params)
+                    .reduce((res, key) => {
+                    return `${res} ${camelToDash(key)}='${String(params[key])}'`;
+                }, '');
+                cache = utils.placeholder(html, {
+                    apiUrl: prefix,
+                    attributes,
+                    docs: JSON.stringify(docs),
+                    params: JSON.stringify(params),
+                    ...params,
+                });
+            }
+            action.res.statusCode = 200;
+            action.res.write(cache);
+            action.res.end();
+            return true;
+        }
+    });
+};
+
+exports.ui = ui;
+exports.uiPresets = uiPresets;