Skip to content

Commit da1c4d0

Browse files
ChrisCindyfattydevelop督布
authored
Release/1101 (#415)
* fix(plugin-docusaurus): can't use short syntax (<></>) of fragment (#411) * fix(plugin-docusaurus): can't use short syntax (<></>) of fragment * fix: lint error * fix(plugin-docusaurus): can't generate pages in build command (#407) * fix(plugin-docusaurus): can't generate pages in build command if turning on mobilePreview * chore: update lock file * fix(pkg): update engines in package.json (#408) * refactor(plugin-docusaurus): remove browser only import (#412) * fix(plugin-docusaurus): can't generate pages in build command if turning on mobilePreview * chore: update lock file * refactor(plugin-docusaurus): should not import browser-only component by user * fix: lint error * docs: update preview doc * feat: support qrcode at mobile (#413) * feat: support qrcode at mobile * feat: ip set default * docs: fix changelog format Co-authored-by: 督布 <dengce.dc@alibaba-inc.com> Co-authored-by: dengce <doub7boss@163.com> Co-authored-by: 督布 <dengce.dc@alibaba-inc.com> * build(plugin-docusaurus): update version and changlog Co-authored-by: dengce <doub7boss@163.com> Co-authored-by: 督布 <dengce.dc@alibaba-inc.com>
1 parent 033be95 commit da1c4d0

File tree

19 files changed

+1353
-213
lines changed

19 files changed

+1353
-213
lines changed

‎packages/pkg/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
## 1.2.1
4+
5+
- [fix] update engines in package.json
6+
37
## 1.2.0
48

59
- [feat] support json in bundle task

‎packages/pkg/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ice/pkg",
3-
"version": "1.2.0",
3+
"version": "1.2.1",
44
"description": "Core service of ice component",
55
"main": "./lib/index.js",
66
"type": "module",
@@ -21,7 +21,7 @@
2121
"author": "",
2222
"license": "MIT",
2323
"engines": {
24-
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
24+
"node": ">=16.0.0"
2525
},
2626
"dependencies": {
2727
"@babel/core": "^7.17.5",

‎packages/plugin-docusaurus/CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Changelog
22

3+
## 1.4.0
4+
5+
- [feat] support scan qrcode at mobile preview
6+
- [feat] support external ip access at start stage
7+
- [fix] can't generate demo pages in build command if mobilePreview is turned on
8+
- [fix] can't use short syntax (<></>) of fragment
9+
- [refactor] set default locales to zh-Hans
10+
- [refctor] remove browser only import
11+
12+
313
## 1.3.2
414

515
- [fix] react resolve error in npm

‎packages/plugin-docusaurus/package.json‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ice/pkg-plugin-docusaurus",
3-
"version": "1.3.2",
3+
"version": "1.4.0",
44
"description": "Plugin for component previewing",
55
"main": "es2017/index.js",
66
"exports": {
@@ -24,24 +24,29 @@
2424
"@docusaurus/preset-classic": "^2.0.0",
2525
"@mdx-js/react": "^1.6.22",
2626
"@swc/helpers": "^0.4.3",
27+
"address": "^1.2.1",
2728
"consola": "^2.15.3",
2829
"copy-text-to-clipboard": "^3.0.1",
2930
"detect-port": "^1.3.0",
30-
"docusaurus-plugin-sass": "^0.2.2",
31+
"directory-tree": "^3.3.1",
3132
"docusaurus-plugin-less": "^2.0.2",
33+
"docusaurus-plugin-sass": "^0.2.2",
3234
"es-module-lexer": "^0.10.0",
3335
"fs-extra": "^10.0.0",
3436
"handlebars": "^4.7.7",
3537
"hast-util-find-and-replace": "3",
38+
"less": "^4.1.3",
39+
"less-loader": "^11.0.0",
3640
"postcss-plugin-rpx2vw": "^0.0.3",
3741
"prism-react-renderer": "^1.3.1",
42+
"qrcode.react": "^3.1.0",
3843
"react-tooltip": "^4.2.21",
44+
"remark-parse": "^10.0.1",
45+
"remark-stringify": "^10.0.2",
3946
"sass": "^1.3.0",
4047
"sass-loader": "^12.6.0",
41-
"less": "^4.1.3",
42-
"less-loader": "^11.0.0",
4348
"style-unit": "^3.0.4",
44-
"unist-util-remove": "2.1.0",
49+
"unified": "^10.1.2",
4550
"unist-util-visit": "2.0.3"
4651
},
4752
"devDependencies": {

‎packages/plugin-docusaurus/src/Previewer/Mobile.tsx‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React, { useRef } from 'react';
1+
import React, { useRef, useState } from 'react';
22
import CodeBlock from '@theme-original/CodeBlock';
3+
import { QRCodeSVG } from 'qrcode.react';
34
import styles from './styles.module.css';
45
import './styles.css';
56

@@ -15,15 +16,30 @@ function FullScreenSvg(props) {
1516
);
1617
}
1718

19+
function QrCodeSvg(props) {
20+
return (
21+
<svg width="20px" height="20px" viewBox="0 0 1024 1024" {...props} version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2552"><path d="M468 128H160c-17.7 0-32 14.3-32 32v308c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V136c0-4.4-3.6-8-8-8z m-56 284H192V192h220v220z" p-id="2553" fill="#666666"></path><path d="M274 338h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM468 548H136c-4.4 0-8 3.6-8 8v308c0 17.7 14.3 32 32 32h308c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8z m-56 284H192V612h220v220z" p-id="2554" fill="#666666"></path><path d="M274 758h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM864 128H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V160c0-17.7-14.3-32-32-32z m-32 284H612V192h220v220z" p-id="2555" fill="#666666"></path><path d="M694 338h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM888 548h-48c-4.4 0-8 3.6-8 8v134h-78V556c0-4.4-3.6-8-8-8H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V644h78v102c0 4.4 3.6 8 8 8h190c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8z" p-id="2556" fill="#666666"></path><path d="M746 832h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM888 832h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" p-id="2557" fill="#666666"></path></svg>
22+
);
23+
}
24+
1825
function MobilePreview({ code, url }) {
1926
const iframe = useRef(null);
27+
const [showDialog, setShowDialog] = useState(false);
2028
const redirctFullScreen = () => {
2129
window.open(url);
2230
};
2331
const reloadIframe = () => {
2432
iframe?.current?.contentWindow.location.reload();
2533
};
2634

35+
const openQRCode = () => {
36+
setShowDialog(true);
37+
};
38+
39+
const closeQrCode = () => {
40+
setShowDialog(false);
41+
};
42+
2743
return (
2844
<div className={`${styles.mobileWrapper} mobile-previewer`}>
2945
<div className={styles.mobileCodeWrapper}>
@@ -45,6 +61,10 @@ function MobilePreview({ code, url }) {
4561
className={styles.operationItem}
4662
onClick={redirctFullScreen}
4763
><FullScreenSvg /> &nbsp;全屏模式</div>
64+
<div
65+
className={styles.operationItem}
66+
onClick={openQRCode}
67+
><QrCodeSvg /> &nbsp;二维码</div>
4868
</div>
4969
<div className={styles.iframeWrapper}>
5070
<iframe
@@ -54,6 +74,9 @@ function MobilePreview({ code, url }) {
5474
frameBorder="0"
5575
src={url}
5676
/>
77+
{showDialog && <div className={styles.dialog} onClick={closeQrCode}>
78+
<QRCodeSVG value={`${location.origin}${url}`} size={100}></QRCodeSVG>
79+
</div>}
5780
</div>
5881

5982
</div>

‎packages/plugin-docusaurus/src/Previewer/styles.module.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,15 @@
8080
color: #666;
8181
cursor: pointer;
8282
}
83+
.dialog{
84+
background-color: #666;
85+
opacity: 0.6;
86+
position: absolute;
87+
top: 0;
88+
left: 0;
89+
right: 0;
90+
bottom: 0;
91+
display: flex;
92+
align-items: center;
93+
justify-content: center;
94+
}

‎packages/plugin-docusaurus/src/configureDocusaurus.mts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ module.exports = {
9595
require.resolve('@babel/preset-react'),
9696
{
9797
"pragma": "createElement",
98+
"pragmaFrag": "Fragment",
9899
"runtime": "classic"
99100
},
100101
],

‎packages/plugin-docusaurus/src/doc.mts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@ import { fork } from 'child_process';
44
import { createRequire } from 'module';
55
import consola from 'consola';
66
import detect from 'detect-port';
7+
import address from 'address';
8+
79
import { DOCUSAURUS_DIR, DOCUSAURUS_CONFIG_FILE, DOCUSAURUS_BABEL_CONFIG_FILE } from './constants.mjs';
810

911
import type { PluginDocusaurusOptions } from './index.mjs';
1012

1113
const require = createRequire(import.meta.url);
14+
const ip = address.ip();
1215

1316
export const doc = async (api, options: PluginDocusaurusOptions) => {
1417
const { context } = api;
@@ -31,6 +34,7 @@ export const doc = async (api, options: PluginDocusaurusOptions) => {
3134
command,
3235
!docusaurusConfigFileExist && `--config=${rootDir}/${DOCUSAURUS_DIR}/${DOCUSAURUS_CONFIG_FILE}`,
3336
command === 'start' && `--port=${port}`,
37+
command === 'start' && `--host=${ip}`,
3438
].filter(Boolean),
3539
{
3640
cwd: rootDir,

‎packages/plugin-docusaurus/src/genDemoPages/extractCodePlugin.mts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import visit from 'unist-util-visit';
2+
import { getDemoFileInfo, getPageFileInfo } from '../remark/getFileInfo.js';
3+
import checkCodeLang from '../remark/checkCodeLang.js';
4+
import genDemoPages from '../remark/genDemoPages.js';
5+
6+
interface MdNode {
7+
type: string;
8+
meta: string;
9+
lang: string;
10+
value: string;
11+
}
12+
13+
export default function getExtractCodePlugin(filepath: string, rootDir: string) {
14+
return function extractCodePlugin() {
15+
return async (ast) => {
16+
await visit<MdNode>(ast, 'code', (node) => {
17+
if (node.meta === 'preview') {
18+
const { lang } = node;
19+
checkCodeLang(lang);
20+
const { demoFilename, demoFilepath } = getDemoFileInfo({ rootDir, filepath, lang });
21+
const { pageFilename, pageFileCode } = getPageFileInfo({ rootDir, demoFilepath, demoFilename });
22+
genDemoPages({ filepath, code: node.value, demoFilename, demoFilepath, pageFilename, pageFileCode });
23+
}
24+
});
25+
};
26+
};
27+
}

‎packages/plugin-docusaurus/src/genDemoPages/index.mts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import path from 'path';
2+
import * as directoryTree from 'directory-tree';
3+
import type { DirectoryTree } from 'directory-tree';
4+
import fse from 'fs-extra';
5+
import { unified } from 'unified';
6+
import getExtractCodePlugin from './extractCodePlugin.mjs';
7+
import parse from 'remark-parse';
8+
import stringify from 'remark-stringify';
9+
10+
function scanDocsDirectory(rootDir: string): DirectoryTree | null {
11+
const docsDir = path.join(rootDir, 'docs');
12+
const tree = directoryTree.default(docsDir, { extensions: /\.md$/ });
13+
return tree;
14+
}
15+
16+
function extractCodeFromDocs(docsTree: DirectoryTree, rootDir: string): void {
17+
docsTree.children?.forEach((sub) => {
18+
if (sub.children) {
19+
extractCodeFromDocs(sub, rootDir);
20+
} else {
21+
const content = fse.readFileSync(sub.path, 'utf-8');
22+
unified()
23+
.use(parse)
24+
.use(stringify)
25+
.use(getExtractCodePlugin(sub.path, rootDir))
26+
.process(content);
27+
}
28+
});
29+
}
30+
31+
export default function genDemoPages(rootDir: string): void {
32+
const docsTree = scanDocsDirectory(rootDir);
33+
if (docsTree) {
34+
extractCodeFromDocs(docsTree, rootDir);
35+
}
36+
}

0 commit comments

Comments
 (0)