chore(BuildTool): transform and format demo ts firstly when build docs

alibaba-fusion · Jan 11, 2024 · 71f9004 · 71f9004
1 parent 871b006
commit 71f9004
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/tools/build/docs/generate-docs.ts b/tools/build/docs/generate-docs.ts
@@ -4,6 +4,7 @@ import fs = require('fs-extra');
 import cheerio = require('cheerio');
 import _ = require('lodash');
 import glob = require('glob');
+import prettier from 'prettier';
 import createDocParser = require('@alifd/doc-parser');
 import { getComponentName, marked, parse, transform } from './utils';
 import { getOnlineDemos } from './gen-demo-insert-scripts';
@@ -301,7 +302,7 @@ function* buildCompiledDocs(cwd: string) {
     yield buildDemoMappingList(to, demoMappingFilePath);
 }
 
-function generateDocsLangFolder() {
+async function generateDocsLangFolder() {
     const components = fs.readdirSync(SRC_DIR_PATH);
     const outputMap = new Map<string, string>();
     fs.removeSync(path.resolve(CWD, LANGDOC_FOLDER));
@@ -349,7 +350,18 @@ function generateDocsLangFolder() {
                 continue;
             }
             const langMetaMap = parseDemoMd(mdPath);
-            const jsCode = fs.existsSync(jsPath) ? fs.readFileSync(jsPath, 'utf-8') : '';
+            let jsCode = fs.existsSync(jsPath) ? fs.readFileSync(jsPath, 'utf-8') : '';
+            if (jsCode) {
+                // 将 ts 代码转换为 js 代码输出到文档
+                const options = await prettier.resolveConfig(
+                    path.resolve(SRC_DIR_PATH, 'index.ts')
+                );
+                jsCode = await prettier.format(await transform(jsCode, 'preserve', 'esm'), {
+                    ...options,
+                    parser: 'typescript',
+                    tabWidth: 2,
+                });
+            }
             const cssCode = fs.existsSync(cssPath) ? fs.readFileSync(cssPath, 'utf-8') : '';
             for (const lang of SUPPORT_LANGS) {
                 const meta = langMetaMap.get(lang);
@@ -380,7 +392,7 @@ function generateDocsLangFolder() {
 }
 
 export default function* () {
-    const targetDir = generateDocsLangFolder();
+    const targetDir = (yield generateDocsLangFolder()) as string;
     try {
         // 编译文档
         yield buildCompiledDocs(cwd);

diff --git a/tools/build/docs/render-creator.ts b/tools/build/docs/render-creator.ts
@@ -1,5 +1,7 @@
 import MagicString from 'magic-string';
-import { parseImportDeclarations, visitCode, warn } from '../../utils';
+import { resolve } from 'path';
+import prettier from 'prettier';
+import { CWD, SRC_DIR_PATH, parseImportDeclarations, visitCode, warn } from '../../utils';
 import { marked, transform } from './utils';
 
 export function getGlobalControl() {
@@ -332,10 +334,7 @@ export async function getDemoRenderScript(
 ) {
     const liveArr = getLiveScript(js);
     const liveVars = liveArr[1];
-    const liveScript = (await transform(liveArr[0], 'preserve'))
-        .replace(/`/g, '\\`')
-        .replace(/\$/g, '\\$')
-        .replace(/\n$/, '');
+    const liveScript = liveArr[0].replace(/`/g, '\\`').replace(/\$/g, '\\$').replace(/\n$/, '');
     return `
 window.${name}RenderScript = function ${name}RenderScript(liveDemo){
     var mountNode = document.getElementById('${name}-mount');

diff --git a/tools/build/docs/utils.ts b/tools/build/docs/utils.ts
@@ -40,12 +40,12 @@ export function parse(md: string) {
 
 const TSCONFIG_PATH = path.resolve(CWD, 'tsconfig.json');
 
-export async function transform(code: string, jsx?: 'transform' | 'preserve') {
+export async function transform(code: string, jsx: 'transform' | 'preserve' = 'transform', format: 'cjs' | 'esm' = 'cjs') {
     const tsconfig = await getRegularTsconfigJson(fs.readFileSync(TSCONFIG_PATH, 'utf-8'));
     try {
 
         const result = await esbuildTransform(code, {
-            format: 'cjs',
+            format,
             loader: 'tsx',
             jsx,
             tsconfigRaw: JSON.stringify({ compilerOptions: tsconfig.compilerOptions }),