chore: 升级构建工具 (#73)

* chore: 升级vite版本v4.4

* chore: 升级stylelint版本v15.10.3

* chore: 减小打包体积、优化demo体验

Author: windole

.vscode/settings.json

@@ -99,5 +99,10 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "cSpell.words": ["esbuild", "pluginutils", "swipeable"]
+  "cSpell.words": [
+    "esbuild",
+    "pluginutils",
+    "postcssrc",
+    "swipeable"
+  ]
 }

package.json

@@ -30,7 +30,7 @@
     "prettier": "^2.5.0",
     "pretty-quick": "^3.1.1",
     "rimraf": "^3.0.2",
-    "stylelint": "^13.13.1"
+    "stylelint": "^15.10.3"
   },
   "husky": {
     "hooks": {
@@ -51,7 +51,7 @@
   "packageManager": "pnpm@7.17.1",
   "pnpm": {
     "overrides": {
-      "esbuild": "^0.14"
+      "esbuild": "^0.18.11"
     }
   }
 }

packages/rc-cli/package.json

@@ -40,7 +40,7 @@
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^13.4.0",
     "@vant/touch-emulator": "^1.3.2",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@vitejs/plugin-react": "^4.0.4",
     "address": "^1.1.2",
     "autoprefixer": "9.7.5",
     "babel-plugin-import": "^1.13.1",
@@ -51,21 +51,22 @@
     "commander": "^9.4.0",
     "consola": "^2.15.3",
     "conventional-changelog": "^3.1.24",
-    "esbuild": "^0.14.54",
+    "esbuild": "^0.18.11",
     "execa": "^5.1.1",
     "fast-glob": "^3.2.4",
     "front-matter": "^4.0.2",
     "fs-extra": "^10.1.0",
     "highlight.js": "^11.6.0",
     "jest": "^28.1.3",
     "jest-axe": "^6.0.1",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest-environment-jsdom": "^29.6.2",
     "less": "^3.12.2",
     "markdown-it": "^12.0.0",
     "markdown-it-anchor": "^6.0.0",
     "ora": "^5.1.0",
     "postcss": "^8.1.7",
-    "postcss-load-config": "^3.1.4",
+    "postcss-load-config": "^4.0.1",
+    "qrcode.react": "^3.1.0",
     "react-router-dom": "^6.15.0",
     "release-it": "^15.4.1",
     "rehype-highlight": "^6.0.0",
@@ -76,7 +77,7 @@
     "ts-node": "^9.0.0",
     "typescript": "^4.0.3",
     "vinyl-fs": "^3.0.3",
-    "vite": "3.1.8",
+    "vite": "^4.4.2",
     "vite-plugin-html": "^2.1.2"
   },
   "devDependencies": {
@@ -86,7 +87,6 @@
     "@types/less": "^3.0.3",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^14.11.8",
-    "@types/postcss-load-config": "^3.0.1",
     "@types/react": "^18.2.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/signale": "^1.4.1",

packages/rc-cli/site/desktop/components/Dropdown/index.less

@@ -0,0 +1,92 @@
+html[data-theme='dark'] {
+  --rc-doc-dropdown-background: #13171c;
+  --rc-doc-icon-filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%)
+    contrast(98%);
+}
+
+html {
+  --rc-doc-dropdown-background: #fff;
+}
+
+:root {
+  --rc-doc-radius: 0.4rem;
+  --rc-doc-transition-fast: 200ms;
+  --rc-doc-transition-slow: 400ms;
+  --rc-doc-transition-timing-default: cubic-bezier(0.08, 0.52, 0.52, 1);
+  --rc-doc-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+  --rc-doc-shadow-md: 0 5px 40px rgba(0, 0, 0, 0.2);
+  --rc-doc-shadow-tl: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rc-doc-icon-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOSA1IDUgMSAxIDUiIHN0cm9rZT0iIzAzMDYwQiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==');
+  --rc-doc-icon-filter: none;
+}
+
+.doc-dropdown {
+  --rc-doc-dropdown-offset-x: 0px;
+  --rc-doc-dropdown-offset-y: 0px;
+  --rc-doc-dropdown-overlay-width: 10rem;
+
+  position: relative;
+  transition: opacity 0.2s ease-out;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &--overlay {
+    display: inline-flex;
+    align-items: center;
+    &::after {
+      content: '';
+      font-weight: normal;
+      background: var(--rc-doc-icon-arrow) 50%/0.5rem 0.25rem;
+      filter: var(--rc-doc-icon-filter);
+      background-repeat: no-repeat;
+      border: none;
+      min-height: 0.25rem;
+      min-width: 0.5rem;
+      transform: rotate(180deg);
+      margin-left: 0.3em;
+    }
+  }
+
+  &:not(:hover) > .doc-dropdown__child {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    transform: translate(0, -0.625rem);
+    &.topCenter {
+      right: 50%;
+      transform: translate(50%, 0.625rem);
+    }
+  }
+
+  &__child {
+    list-style: none;
+    max-height: 80vh;
+    min-width: var(--rc-doc-dropdown-overlay-width);
+    opacity: 1;
+    position: absolute;
+    top: 100%;
+    left: inherit;
+    right: 0;
+    transform: translate(0, 0);
+    transition-property: opacity, transform, visibility;
+    transition-duration: var(--rc-doc-transition-fast);
+    transition-timing-function: var(--rc-doc-transition-timing-default);
+    z-index: 100;
+    &.topCenter {
+      top: inherit;
+      bottom: 100%;
+      right: 50%;
+      transform: translate(50%, 0);
+    }
+    &_content {
+      transform: translate(var(--rc-doc-dropdown-offset-x), var(--rc-doc-dropdown-offset-y));
+      overflow-y: auto;
+      padding: 0.5rem;
+      background-color: var(--rc-doc-dropdown-background);
+      border-radius: var(--rc-doc-radius);
+      box-shadow: var(--rc-doc-shadow-md);
+    }
+  }
+}

packages/rc-cli/site/desktop/components/Dropdown/index.tsx

@@ -0,0 +1,50 @@
+import clsx from 'classnames';
+import React, { CSSProperties } from 'react';
+import './index.less';
+
+type DropdownProps = {
+  overlay?: React.ReactNode[];
+  arrow?: boolean;
+  placement?: 'topCenter';
+  offset?: [string, string];
+  width?: CSSProperties['width'];
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const Dropdown: React.FC<DropdownProps> = ({
+  overlay,
+  className,
+  children,
+  arrow = true,
+  placement,
+  width,
+  offset: [offsetX, offsetY] = ['0px', '0px'],
+  style,
+  ...props
+}) => {
+  const computedStyle = React.useMemo(() => {
+    return {
+      ...style,
+      '--rc-doc-dropdown-overlay-width': width,
+      '--rc-doc-dropdown-offset-x': offsetX,
+      '--rc-doc-dropdown-offset-y': offsetY,
+    };
+  }, []);
+  return (
+    <div
+      className={clsx('doc-dropdown', className, {
+        'doc-dropdown--overlay': overlay && arrow,
+      })}
+      style={computedStyle}
+      {...props}
+    >
+      {children}
+      {overlay && (
+        <div className={clsx('doc-dropdown__child', placement)}>
+          <div className="doc-dropdown__child_content">{overlay}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

packages/rc-cli/site/desktop/components/Icons/HttpLink.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export default (props) => (
+  <svg {...props} viewBox="0 0 100 100" fill="currentColor">
+    <path d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
+    <polygon points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
+  </svg>
+);

packages/rc-cli/site/desktop/components/Icons/Qrcode.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default (props) => {
+  return (
+    <svg {...props} viewBox="0 0 1024 1024" fill="currentColor">
+      <path d="M329.142857 658.285714l0 73.142857-73.142857 0 0-73.142857 73.142857 0zM329.142857 219.428571l0 73.142857-73.142857 0 0-73.142857 73.142857 0zM768 219.428571l0 73.142857-73.142857 0 0-73.142857 73.142857 0zM182.857143 803.986286l219.428571 0 0-218.843429-219.428571 0 0 218.843429zM182.857143 365.714286l219.428571 0 0-219.428571-219.428571 0 0 219.428571zM621.714286 365.714286l219.428571 0 0-219.428571-219.428571 0 0 219.428571zM475.428571 512l0 365.714286-365.714286 0 0-365.714286 365.714286 0zM768 804.571429l0 73.142857-73.142857 0 0-73.142857 73.142857 0zM914.285714 804.571429l0 73.142857-73.142857 0 0-73.142857 73.142857 0zM914.285714 512l0 219.428571-219.428571 0 0-73.142857-73.142857 0 0 219.428571-73.142857 0 0-365.714286 219.428571 0 0 73.142857 73.142857 0 0-73.142857 73.142857 0zM475.428571 73.142857l0 365.714286-365.714286 0 0-365.714286 365.714286 0zM914.285714 73.142857l0 365.714286-365.714286 0 0-365.714286 365.714286 0z"></path>
+    </svg>
+  );
+};

packages/rc-cli/site/desktop/components/Icons/Reload.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default (props) => {
+  return (
+    <svg {...props} viewBox="0 0 20 20" fill="currentColor">
+      <path
+        d="M17.875 8.313V4.374l-1.284 1.284a7.87 7.87 0 0 0-6.567-3.535 7.876 7.876 0 1 0 7.299 10.839.675.675 0 0 0-1.25-.508A6.528 6.528 0 0 1 3.497 10a6.526 6.526 0 0 1 12.116-3.364l-1.677 1.676h3.938Z"
+        fill="currentColor"
+        fillRule="nonzero"
+      ></path>
+    </svg>
+  );
+};

packages/rc-cli/site/desktop/components/Icons/index.ts

@@ -0,0 +1,9 @@
+import HttpLink from './HttpLink';
+import Qrcode from './Qrcode';
+import Reload from './Reload';
+
+export {
+  HttpLink as HttpLinkIcon,
+  Qrcode as QrcodeIcon,
+  Reload as ReloadIcon,
+};

packages/rc-cli/site/desktop/components/Simulator/index.jsx

@@ -1,8 +1,12 @@
 import React, { useMemo, useEffect, useState } from 'react';
 import classnames from 'classnames';
-
+import * as Icons from '../Icons';
+import Dropdown from '../Dropdown';
+import { QRCodeCanvas } from 'qrcode.react';
 import './index.less';
 
+const RCDOC_SIMULATOR_IFRAME_ID = 'rcdoc-simulator-iframe';
+
 const Simulator = (props) => {
   const { src } = props;
   const [windowHeight, setWindowHeight] = useState(0);
@@ -30,7 +34,53 @@ const Simulator = (props) => {
         'vant-doc-simulator-fixed': scrollTop > 60,
       })}
     >
-      <iframe title="vant-ui-iframe" src={src} style={simulatorStyle} frameBorder="0" />
+      <iframe
+        id={RCDOC_SIMULATOR_IFRAME_ID}
+        title="vant-ui-iframe"
+        src={src}
+        style={simulatorStyle}
+        frameBorder="0"
+      />
+      <div className="vant-doc-simulator__actions">
+        <a
+          className="vant-doc-simulator__actions__item"
+          title="新窗口预览"
+          href={src}
+          target="_blank"
+        >
+          <Icons.HttpLinkIcon />
+        </a>
+
+        <Dropdown
+          offset={['0px', '-15px']}
+          arrow={false}
+          width={120}
+          placement="topCenter"
+          overlay={[
+            <QRCodeCanvas
+              style={{ display: 'block' }}
+              key="qrcode"
+              size={100}
+              value={`${window.location.origin}${src}`}
+            />,
+          ]}
+        >
+          <Icons.QrcodeIcon className="vant-doc-simulator__actions__item" alt="手机扫二维码预览" />
+        </Dropdown>
+        <a
+          className="vant-doc-simulator__actions__item"
+          title="重新加载Demo"
+          onClick={() => {
+            const iframe = document.querySelector(`#${RCDOC_SIMULATOR_IFRAME_ID}`);
+            if (iframe) {
+              iframe.contentWindow.location.reload();
+            }
+          }}
+          target="_blank"
+        >
+          <Icons.ReloadIcon />
+        </a>
+      </div>
     </div>
   );
 };