From c695ee20013b1fb2587b029a668e9d8374bfc761 Mon Sep 17 00:00:00 2001 From: phshy0607 Date: Wed, 27 Apr 2022 15:37:55 +0800 Subject: [PATCH 1/3] feat: shared config --- CHANGELOG.md | 5 ++ src/node/plugins/mdx/debug.ts | 55 +------------ src/node/plugins/mdx/editable.ts | 78 ------------------- src/node/types.ts | 34 ++++---- src/node/utils/ast.ts | 129 +------------------------------ test/props/index.test.ts | 45 +---------- 6 files changed, 24 insertions(+), 322 deletions(-) delete mode 100644 src/node/plugins/mdx/editable.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 1726de5..f8e1210 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `Security` in case of vulnerabilities. +## Unreleased + +### Changed +- extract `SharedConfig` to share type between `UserConfig` `UserFileConfig` `ResolvedUserConfig` + ## [0.8.2] - 2022-04-21 ### Added diff --git a/src/node/plugins/mdx/debug.ts b/src/node/plugins/mdx/debug.ts index 20e93a5..d69e297 100644 --- a/src/node/plugins/mdx/debug.ts +++ b/src/node/plugins/mdx/debug.ts @@ -1,55 +1,6 @@ -import { visit } from 'unist-util-visit'; -import { Plugin } from 'unified'; -import { Link, Text } from 'mdast'; -import { ResolvedUserConfig, ResolvedComponentProps } from '../../types.js'; -import { tableMaker, parseApi, logger } from '../../utils/index.js'; -import { select } from 'unist-util-select'; -import path from 'path'; -import { isEmpty } from 'lodash-es'; - -const { t, r, c } = tableMaker; +import { Plugin } from "unified"; +import { ResolvedUserConfig } from "../../types.js"; export const debug = (config: ResolvedUserConfig): Plugin => { - return (ast) => { - const heading = r([ - c('属性'), - c('类型'), - c('默认值'), - c('必填'), - c('描述'), - ]); - visit(ast, 'link', (link: Link, index, parent) => { - const text = select('text', link) as Text; - - if (!link || !text) { - return; - } - - if (text.value.toLowerCase() === 'props' && link.url) { - const componentPath = path.resolve(config.docs, link.url); - const start = performance.now(); - const parsedProps: ResolvedComponentProps[] = parseApi( - componentPath - ).filter((o) => !isEmpty(o.props)); - const tables = parsedProps.map((o) => { - return t([ - heading, - ...o.props?.map((p) => { - return r([ - c(p.name || '-'), - c(p.type || '-'), - c(p.defaultValue || '-'), - c(p.isRequired ? '是' : '否'), - c(p.description || '-'), - ]); - }), - ]); - }); - const end = performance.now(); - - logger.info(`Parsing ${link.url} used ${end - start}ms`); - parent.children = tables; - } - }); - }; + return (ast) => {}; }; diff --git a/src/node/plugins/mdx/editable.ts b/src/node/plugins/mdx/editable.ts deleted file mode 100644 index db25bf3..0000000 --- a/src/node/plugins/mdx/editable.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { visit } from 'unist-util-visit'; -import { Plugin } from 'unified'; -import { DepsMapper, ResolvedUserConfig } from '../../types.js'; -import { parseMdxToTree, codeBlockAnalyze } from '../../utils/index.js'; - -const transformDepsToScope = (deps: DepsMapper) => { - const defaultTpl = ` - __KEY__: React.lazy(() => - import("__PATH__").then((o) => { - return { default: o.__NAME__ }; - }) - ) - `; - const result: string[] = []; - - deps.forEach((value, key) => { - if (value.get('default')) { - result.push( - defaultTpl - .replace(/__PATH__/g, key) - .replace(/__NAME__/g, 'default') - .replace(/__KEY__/g, value.get('default') as string) - ); - } - if (value.get('nonDefault')) { - const set = value.get('nonDefault') as Set; - set.forEach((o) => { - result.push( - defaultTpl - .replace(/__PATH__/g, key) - .replace(/__NAME__/g, o) - .replace(/__KEY__/g, o) - ); - }); - } - }); - - return `{${result.join(',')}}`; -}; - -export const liveCoding = (config: ResolvedUserConfig): Plugin => { - return (ast) => { - visit(ast, (node, index) => { - if ( - node.type === 'code' && - node.meta === 'live' && - ['js', 'ts', 'jsx', 'tsx'].includes(node.lang) - ) { - const content = node.value.replace(/\n/g, '\n\n'); - const { depsMapper, executable } = codeBlockAnalyze(content); - - const scope = transformDepsToScope(depsMapper); - const code = ` - - - - }> - - - - `; - - const result = parseMdxToTree( - code.replace(/__SCOPE__/g, scope).replace(/__CODE__/g, executable) - ); - - ast.children = [ - ...ast.children.slice(0, index + 1), - result, - ...ast.children.slice(index + 1, ast.children.length), - ]; - } - }); - }; -}; diff --git a/src/node/types.ts b/src/node/types.ts index 14b5f78..d1b4eb4 100644 --- a/src/node/types.ts +++ b/src/node/types.ts @@ -1,6 +1,8 @@ import { UserConfigExport } from "vite"; -export interface UserFileConfig { + +interface SharedConfig { title?: string; + favicon?: string; sidebars?: SidebarNode[]; publicPath?: string; socials?: { @@ -8,32 +10,24 @@ export interface UserFileConfig { Github?: string; }; vite?: Partial; + providerPath?: string; } -export interface UserConfig { +/** + * Types for config file - docit.config.js + */ +export interface UserFileConfig extends SharedConfig {} + +/** + * types for node api + */ +export interface UserConfig extends SharedConfig { root: string; - title?: string; - sidebars?: SidebarNode[]; - providerPath?: string; - publicPath?: string; - socials?: { - Twitter?: string; - Github?: string; - }; - vite?: Partial; } -export interface ResolvedUserConfig { +export interface ResolvedUserConfig extends SharedConfig { base: string; docs: string; - title?: string; - sidebars?: SidebarNode[]; - providerPath?: string; - publicPath?: string; - socials?: { - Twitter?: string; - Github?: string; - }; vite?: Partial; } diff --git a/src/node/utils/ast.ts b/src/node/utils/ast.ts index 60dae22..49505ce 100644 --- a/src/node/utils/ast.ts +++ b/src/node/utils/ast.ts @@ -1,19 +1,9 @@ -import { Root, Table, TableRow, TableCell } from "mdast"; -import { Node } from "unist"; -import { DepsMapper, DepsItem } from "../types.js"; +import { Root } from "mdast"; import { fromMarkdown } from "mdast-util-from-markdown"; import { toMarkdown } from "mdast-util-to-markdown"; import { mdxjs } from "micromark-extension-mdxjs"; import { mdxFromMarkdown, mdxToMarkdown } from "mdast-util-mdx"; import { gfmTableFromMarkdown, gfmTableToMarkdown } from "mdast-util-gfm-table"; -import { - Program, - ImportDefaultSpecifier, - ImportNamespaceSpecifier, - ImportSpecifier, - ImportDeclaration, -} from "estree"; -import { walk } from "estree-walker"; import { visit } from "unist-util-visit"; export const parseMdxToTree = (s: string) => { @@ -31,123 +21,6 @@ export const parseTreeToMdx = (ast: Root) => { return out; }; -export const codeBlockAnalyze = (code: string) => { - const ast = parseMdxToTree(code); - const depsMapper = getImportMap(ast); - const executable = getExecutable(ast); - - return { - depsMapper, - executable, - }; -}; - -export const getImportStatements = (ast: Root): string => { - const out = toMarkdown( - { - ...ast, - children: ast.children.filter((o) => (o as Node).type === "mdxjsEsm"), - }, - { extensions: [mdxToMarkdown] } - ); - - return out; -}; - -export const getExecutable = (ast: Root): string => { - const out = toMarkdown( - { - ...ast, - children: ast.children.filter((o) => (o as Node).type !== "mdxjsEsm"), - }, - { extensions: [mdxToMarkdown] } - ); - - return `${out.replace(/;/g, "")}`; -}; - -export const getImportMap = (ast: Root): DepsMapper => { - let importDeclarations = []; - let depsMapper: DepsMapper = new Map(); - ast.children - .filter((o) => (o as Node).type === "mdxjsEsm") - .map((o) => o.data.estree) - .forEach((o: Program) => - walk(o, { - enter: (node: ImportDeclaration) => { - if (node.type === "ImportDeclaration") { - const path = node.source.value as string; - const result: DepsItem = new Map(); - result.set("default", result.get("default") || null); - result.set("nonDefault", result.get("nonDefault") || new Set()); - result.set("namespace", result.get("namespace") || null); - depsMapper.set(path, result); - - importDeclarations.push(node); - } - }, - }) - ); - - importDeclarations.forEach((o) => { - walk(o, { - enter: ( - node: - | ImportDefaultSpecifier - | ImportNamespaceSpecifier - | ImportSpecifier, - parent: ImportDeclaration - ) => { - if (node?.type === "ImportDefaultSpecifier") { - const path = parent.source.value as string; - const name = node.local.name; - - const target = depsMapper.get(path); - target.set("default", name); - } - - if (node?.type === "ImportSpecifier") { - const path = parent.source.value as string; - const name = node.local.name; - const target = depsMapper.get(path); - (target.get("nonDefault") as Set).add(name); - } - - if (node?.type === "ImportNamespaceSpecifier") { - const path = parent.source.value as string; - const name = node.local.name; - - const target = depsMapper.get(path); - target.set("namespace", name); - } - }, - }); - }); - - return depsMapper; -}; - -export const tableMaker = { - t: (rows: TableRow[]): Table => { - return { - type: "table", - children: rows, - }; - }, - r: (cells: TableCell[]): TableRow => { - return { - type: "tableRow", - children: cells, - }; - }, - c: (value: string): TableCell => { - return { - type: "tableCell", - children: [{ type: "text", value: value }], - }; - }, -}; - export const parseToc = (node, current) => { if (!node) { return {}; diff --git a/test/props/index.test.ts b/test/props/index.test.ts index 732f539..aa25e94 100644 --- a/test/props/index.test.ts +++ b/test/props/index.test.ts @@ -1,12 +1,6 @@ import { expect, describe, it } from "vitest"; import path from "path"; -import { - parser, - parseApi, - tableMaker, - parseTreeToMdx, -} from "../../src/node/utils/index.js"; -import { ResolvedComponentProps } from "../../src/node/types.js"; +import { parser, parseApi } from "../../src/node/utils/index.js"; const componentPath = path.resolve(__dirname, "./Button.tsx"); @@ -20,41 +14,4 @@ describe("Props And Api Parsing", () => { const parsed = parseApi(componentPath); expect(parsed).toMatchSnapshot(); }); - - it("generates correct table", () => { - const { t, r, c } = tableMaker; - - const heading = r([ - c("属性"), - c("类型"), - c("默认值"), - c("必填"), - c("描述"), - ]); - - const parsed: ResolvedComponentProps[] = parseApi(componentPath); - - const tables = parsed.map((o) => { - console.log(o.componentName, o.filePath); - return t([ - heading, - ...o.props?.map((p) => { - return r([ - c(p.name || "-"), - c(p.type || "-"), - c(p.defaultValue || "-"), - c(p.isRequired ? "是" : "否"), - c(p.description || "-"), - ]); - }), - ]); - }); - - expect( - parseTreeToMdx({ - type: "root", - children: tables, - }) - ).toMatchSnapshot(); - }); }); From 9ce11030991a3f5bd22a0f9fc0af1331cde114d5 Mon Sep 17 00:00:00 2001 From: phshy0607 Date: Tue, 10 May 2022 19:31:28 +0800 Subject: [PATCH 2/3] fix: click through issue --- src/client/components/IFrameTools/index.tsx | 2 +- src/client/components/IFrameTools/styled.ts | 3 +++ src/client/components/SandBox/styled.ts | 7 +++---- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/client/components/IFrameTools/index.tsx b/src/client/components/IFrameTools/index.tsx index b7c6675..84bf395 100644 --- a/src/client/components/IFrameTools/index.tsx +++ b/src/client/components/IFrameTools/index.tsx @@ -22,7 +22,7 @@ const IFrameTools: React.FC = (props) => { }, [url]); return ( - + {qrCodeSrc && (
diff --git a/src/client/components/IFrameTools/styled.ts b/src/client/components/IFrameTools/styled.ts index 54255a8..b0bbdc6 100644 --- a/src/client/components/IFrameTools/styled.ts +++ b/src/client/components/IFrameTools/styled.ts @@ -9,11 +9,13 @@ export const StyledIFrameTools = styled.div` align-items: center; width: 100%; padding: 12px; + pointer-events: none; `; export const StyledQrCode = styled.div<{ src: string }>` position: relative; margin-right: 12px; + pointer-events: all; .qrcode-wrapper { position: relative; display: flex; @@ -36,4 +38,5 @@ export const StyledIconWrapper = styled.div` display: flex; align-items: center; margin-right: 12px; + pointer-events: all; `; diff --git a/src/client/components/SandBox/styled.ts b/src/client/components/SandBox/styled.ts index c472847..259e235 100644 --- a/src/client/components/SandBox/styled.ts +++ b/src/client/components/SandBox/styled.ts @@ -1,8 +1,7 @@ - -import styled from 'styled-components' +import styled from "styled-components"; export const StyledSandBox = styled.div` - :hover .bottom-tools { + :hover .iframe-tools { visibility: visible; } -` \ No newline at end of file +`; From 57936e76c039fdc189910b15044e57f6420cd87d Mon Sep 17 00:00:00 2001 From: phshy0607 Date: Tue, 10 May 2022 19:35:35 +0800 Subject: [PATCH 3/3] feat: support verbose --- CHANGELOG.md | 6 ++++++ package.json | 2 +- src/node/utils/index.ts | 4 ++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f8e1210..12bfa40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,9 +15,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased + +### Added +- add LOG_LEVEL=VERBOSE to node env will print more info ### Changed - extract `SharedConfig` to share type between `UserConfig` `UserFileConfig` `ResolvedUserConfig` +### Fixes +- fix iframe tools cannot be click through issue + ## [0.8.2] - 2022-04-21 ### Added diff --git a/package.json b/package.json index 1cd0246..d682228 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "build-client": "tsc -p src/client", "build-node": "tsc -p src/node", "docs": "run-p dev docs-dev", - "docs-dev": "node ./bin/docit start", + "docs-dev": "LOG_LEVEL=VERBOSE node ./bin/docit start", "docs-build": "node ./bin/docit build docs", "test": "vitest", "release": "yarn build && yarn publish && node scripts/gh.js" diff --git a/src/node/utils/index.ts b/src/node/utils/index.ts index 1289132..c6811b3 100644 --- a/src/node/utils/index.ts +++ b/src/node/utils/index.ts @@ -47,6 +47,10 @@ export const readUserConfigFile = async ( const { mod } = await bundleRequire({ filepath: p, }); + + if (process.env?.LOG_LEVEL === "VERBOSE") { + console.log(mod.default); + } return mod.default; } catch (e) { return {};