refactor: opt the code for UI

gogoyqj · Apr 4, 2023 · ac4119a · ac4119a
1 parent 4345c9d
commit ac4119a
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 121 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,4 @@ static/service.js
 static/service.js.map
 static/static
 static/src
+static/types
diff --git a/src/diff/createServer.ts b/src/diff/createServer.ts
@@ -0,0 +1,43 @@
+/* eslint-disable no-console */
+import detect from 'detect-port';
+import express from 'express';
+import open from 'open';
+import chalk from 'chalk';
+
+export default function createServer({
+ hostname = '127.0.0.1',
+ port = 3007,
+ StaticDir
+}: {
+ StaticDir: string;
+ hostname?: string;
+ port?: number;
+}) {
+ return detect(port).then(_port => {
+ const app = express();
+ let server: ReturnType<typeof app.listen> | undefined = undefined;
+ const close = () => {
+ server?.close();
+ };
+
+ app.use(
+ '/static',
+ express.static(StaticDir, {
+ cacheControl: true,
+ setHeaders: res => {
+ res.setHeader('Cache-Control', 'no-cache');
+ }
+ })
+ );
+
+ server = app.listen(_port, () => {
+ const url = `http:https://${hostname}:${_port}/`;
+ console.log(chalk.green(`[INFO]: 打开链接 ${url} 编辑`));
+ open(url);
+ });
+
+ process.once('exit', close);
+
+ return { app, close };
+ });
+}
diff --git a/src/diff/renderIndexHTML.ts b/src/diff/renderIndexHTML.ts
@@ -0,0 +1,28 @@
+export default function renderIndexHTML(fragment: string): string {
+ return `
+<html>
+ <head>
+ <link rel="stylesheet" href="/static/html.css">
+ <link rel="stylesheet" href="/static/annotated.css">
+ <link rel="stylesheet" href="/static/service.css">
+ <script src="/static/jsondiffpatch.umd.js"></script>
+ </head>
+ <body>
+ <div id="menu" class="menu"></div>
+ <div id="canvas" class="canvas"></div>
+ <script>
+ ${fragment}
+ window.require = function (module) {
+ return window.Autos;
+ }
+ window.module = window.Autos = {
+ exports: {}
+ };
+ window.exports = window.Autos.exports; 
+ </script>
+ <script src="/static/src/utils/getModelDeps.js"></script>
+ <script src="/static/static/service.js"></script>
+ </body>
+</html>
+`;
+}
diff --git a/src/diff/serve.ts b/src/diff/serve.ts
@@ -1,113 +1,75 @@
-import detect from 'detect-port';
-import express from 'express';
 import bodyParser from 'body-parser';
-import open from 'open';
-import chalk from 'chalk';
-import { StaticDir } from '../consts';
 import { diffAndPatch } from './diff';
+import renderIndexHTML from './renderIndexHTML';
+import { StaticDir } from '../consts';
+import createServer from './createServer';
 
 export async function serveDiff<J extends {}>(
  curVersion: J,
  newVersion: J,
  hostname = '127.0.0.1'
 ) {
- return await detect(3007).then(port => {
- return new Promise<typeof curVersion | undefined>(resolve => {
- const { selectDelta, patch, delta } = diffAndPatch(curVersion, newVersion);
- // diff gid
- const DiffVersion = `${Math.random()}-${Date.now()}-${process.pid}`;
- if (delta) {
- const app = express();
- let server: ReturnType<typeof app.listen> | undefined = undefined;
- const close = () => {
- server?.close();
- };
- app.use(
- '/static',
- express.static(StaticDir, {
- cacheControl: true,
- setHeaders: res => {
- res.setHeader('Cache-Control', 'no-cache');
- }
- })
- );
- app.get('/', (req, res) => {
- res.send(`
-<html>
- <head>
- <link rel="stylesheet" href="/static/html.css">
- <link rel="stylesheet" href="/static/annotated.css">
- <link rel="stylesheet" href="/static/service.css">
- <script src="/static/jsondiffpatch.umd.js"></script>
- </head>
- <body>
- <div id="menu" class="menu"></div>
- <div id="canvas" class="canvas"></div>
- <script>
+ return new Promise<typeof curVersion | undefined>(async resolve => {
+ const { selectDelta, patch, delta } = diffAndPatch(curVersion, newVersion);
+ // diff gid
+ const DiffVersion = `${Math.random()}-${Date.now()}-${process.pid}`;
+ if (delta) {
+ const { app, close } = await createServer({
+ StaticDir,
+ hostname
+ });
+
+ app.get('/', (_req, res) => {
+ res.send(
+ renderIndexHTML(`
  const DiffVersion="${DiffVersion}";
  const CurSwagger = ${JSON.stringify(curVersion, null, 2)};
- const SwaggerChanges = ${JSON.stringify(delta, null, 2)};
  const NewSwagger = ${JSON.stringify(newVersion, null, 2)};
- window.require = function (module) {
- return window.Autos;
- }
- window.module = window.Autos = {
- exports: {}
- };
- window.exports = window.Autos.exports;
- </script>
- <script src="/static/src/utils/getModelDeps.js"></script>
- <script src="/static/static/service.js"></script>
- </body>
-</html>
- `);
+ const SwaggerChanges = ${JSON.stringify(delta, null, 2)};
+ `)
+ );
+ });
+
+ /** @deprecated */
+ app.get('/diff', (_req, res) => {
+ res.json({
+ code: 0,
+ result: delta
  });
- app.get('/diff', (req, res) => {
+ });
+
+ app.post('/patch', bodyParser.json({ limit: '800MB' }), (req, res) => {
+ const { keys, version, unkeys } = req.body as {
+ keys: string[][];
+ unkeys: string[][];
+ version: string;
+ };
+ if (version === DiffVersion) {
  res.json({
- code: 0,
- result: delta
+ code: 0
  });
- });
- app.post('/patch', bodyParser.json({ limit: '800MB' }), (req, res) => {
- const { keys, version, unkeys } = req.body as {
- keys: string[][];
- unkeys: string[][];
- version: string;
- };
- if (version === DiffVersion) {
- res.json({
- code: 0
- });
- // 全量
- if (!unkeys.length) {
- resolve(newVersion);
- // 增量
- } else if (keys.length) {
- const select = selectDelta(keys);
- patch(select);
- resolve(curVersion);
- } else {
- // IMP: 截止目前，会认为 swagger 和 service 是一致的，所以选择忽略远端变动的时候，不会重新生成service
- // IMP: 这样似乎会有问题，比如手动修改了本地swagger或merge造成 swagger 和 service 不一致，这时似乎是需要重新生成service的
- resolve(undefined);
- }
- close();
+ if (!unkeys.length) {
+ // apply all changes
+ resolve(newVersion);
+ } else if (keys.length) {
+ // evalute changes by selected change keys
+ patch(selectDelta(keys));
+ resolve(curVersion);
  } else {
- res.json({
- code: 1,
- message: 'Diff 版本不一致，无法同步'
- });
+ // no changes selected equals no changes
+ resolve(undefined);
  }
- });
- server = app.listen(port, () => {
- const url = `http:https://${hostname}:${port}/`;
- console.log(chalk.green(`[INFO]: 打开链接 ${url} 编辑`));
- open(url);
- });
- process.once('exit', close);
- } else {
- resolve(undefined);
- }
- });
+ close();
+ } else {
+ res.json({
+ code: 1,
+ message: 'Diff 版本不一致，无法同步'
+ });
+ }
+ });
+ } else {
+ // no changes selected equals no changes
+ resolve(undefined);
+ }
  });
 }
diff --git a/src/yapi/yapi2swagger.ts b/src/yapi/yapi2swagger.ts
@@ -53,7 +53,7 @@ export interface STag {
  description?: string;
 }
 
-export default function yapiJSon2swagger(
+export default function yapiJSON2swagger(
  yapiList: YApiCategory[],
  yapiConfig: JSON2Service['yapiConfig'] = {}
 ) {
@@ -307,4 +307,7 @@ export default function yapiJSon2swagger(
  return afterTransform ? afterTransform(swaggerObj) : swaggerObj;
 }
 
-export type SwaggerLikeJson = ReturnType<typeof yapiJSon2swagger>;
+/** downward compatible */
+export const yapiJSon2swagger = yapiJSON2swagger;
+
+export type SwaggerLikeJson = ReturnType<typeof yapiJSON2swagger>;