feat: init vite

2022-12-19 22:21:22 +08:00
17 changed files with 921 additions and 104 deletions
--- a/examples/vite-example/.gitignore
+++ b/examples/vite-example/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/examples/vite-example/index.html
+++ b/examples/vite-example/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/antv.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>s</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
--- a/examples/vite-example/package.json
+++ b/examples/vite-example/package.json
@ -0,0 +1,30 @@
+{
+  "name": "@antv/vite-project",
+  "private": true,
+  "version": "2.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "prebuild": "rimraf dist",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.15",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.0.0",
+    "react-router": "^6.5.0",
+    "react-router-dom": "^6.5.0"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.4",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@types/react-helmet": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "less": "^4.1.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0"
+  }
+}
--- a/examples/vite-example/public/antv.svg
+++ b/examples/vite-example/public/antv.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="28"><defs><linearGradient id="a" x1=".004%" x2="100.131%" y1="49.993%" y2="49.993%"><stop offset="0%" stop-color="#6500FF"/><stop offset="16%" stop-color="#6A09FF"/><stop offset="43%" stop-color="#7623FF"/><stop offset="77%" stop-color="#8A4CFF"/><stop offset="99%" stop-color="#996BFF"/></linearGradient><linearGradient id="b" x1="50.004%" x2="50.004%" y1="100.012%" y2="0%"><stop offset="0%" stop-color="#6500FF"/><stop offset="16%" stop-color="#6909FF"/><stop offset="43%" stop-color="#7523FF"/><stop offset="77%" stop-color="#894CFF"/><stop offset="99%" stop-color="#976BFF"/></linearGradient><linearGradient id="c" x1="49.854%" x2="49.854%" y1="100.255%" y2="0%"><stop offset="0%" stop-color="#FF6E06"/><stop offset="28%" stop-color="#FF770C"/><stop offset="75%" stop-color="#FF911C"/><stop offset="100%" stop-color="#FFA126"/></linearGradient><linearGradient id="d" x1="57351%" x2="57351%" y1="59860%" y2="35023%"><stop offset="0%" stop-color="#FF6E06"/><stop offset="28%" stop-color="#FF770C"/><stop offset="75%" stop-color="#FF911C"/><stop offset="100%" stop-color="#FFA126"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><path fill="url(#a)" d="M1.955.004c-.029 0-.057 0-.088.002a1.41 1.41 0 0 0-.197.017A2.312 2.312 0 0 0 1.4.08a3.479 3.479 0 0 0-.179.061 3.768 3.768 0 0 0-.075.032l-.029.013-.057.028-.031.016L.98.257.95.275.91.298.883.317.825.355.79.381l-.03.022L.728.43.7.453C.68.468.662.483.645.5L.621.521.588.553l-.02.02A1.898 1.898 0 0 0 .46.691L.446.709.414.75A2.707 2.707 0 0 0 .348.84L.337.857.308.9l-.01.017L.29.931l3.784 2.214.801.855a.406.406 0 0 1-.019-.42.446.446 0 0 1 .37-.227H18.12c.045.003.09.005.137.005.961-.014 1.734-.758 1.737-1.674.002-.916-.765-1.664-1.726-1.683L1.955.004Z" transform="translate(.006)"/><path fill="url(#b)" d="m22.737 11.315-6.392 11.01a.438.438 0 0 1-.74.025l-4.063-6.995a1.724 1.724 0 0 0-.117-.23L4.667 3.459a2.32 2.32 0 0 1-.005-2.248A2.345 2.345 0 0 1 6.57.005L1.981.001A1.899 1.899 0 0 0 .908.294l-.1.068a2.405 2.405 0 0 0-.15.12A1.7 1.7 0 0 0 .462.69a1.797 1.797 0 0 0-.17.243 1.767 1.767 0 0 0-.028 1.9l.166.289 13.874 23.895a1.882 1.882 0 0 0 .793.776l.108.05a2.537 2.537 0 0 0 .18.069 2.14 2.14 0 0 0 .28.066 2.148 2.148 0 0 0 .19.02l.106.002c.04 0 .063 0 .086-.002a1.206 1.206 0 0 0 .19-.016 2.065 2.065 0 0 0 .27-.06 1.927 1.927 0 0 0 .168-.06l.089-.038.07-.036c.058-.03.073-.04.088-.048a2.596 2.596 0 0 0 .207-.142 1.851 1.851 0 0 0 .464-.537l.376-.64.081-.14 7.68-13.225a1.716 1.716 0 0 0 .047-1.75 1.74 1.74 0 0 0-3.039.01Z" transform="translate(.006)"/><path fill="url(#c)" d="M30.137 0h-6.459c-.935.018-1.684.847-1.684 1.863s.75 1.845 1.684 1.864c.046 0 .09-.003.134-.006h2.925c.214.032.374.23.374.465a.501.501 0 0 1-.025.157l-1.542 2.9c-.454.904-.147 2.036.685 2.53.832.492 1.874.159 2.328-.745l3.19-6c.029-.055.056-.111.08-.17l.003-.007c.015-.036.03-.072.043-.11l.002-.005.017-.052.008-.027c.008-.024.015-.048.021-.073l.012-.042.01-.04a2.826 2.826 0 0 0 .033-.191 2.31 2.31 0 0 0 .01-.077v-.011l.005-.09v-.022l.003-.091c0-1.115-.83-2.019-1.857-2.02Z" transform="translate(.006)"/><path fill="url(#d)" d="M19.881 7.41a.84.84 0 0 0-.725-.41h-6.325a.84.84 0 0 0-.725.41.804.804 0 0 0 0 .82l3.163 5.36a.84.84 0 0 0 .725.41.84.84 0 0 0 .725-.41l3.162-5.36a.804.804 0 0 0 0-.82Z" transform="translate(.006)"/></g></svg>
--- a/examples/vite-example/src/index.less
+++ b/examples/vite-example/src/index.less
@ -0,0 +1,72 @@
+:root {
+  color: rgb(255 255 255 / 87%);
+  font-weight: 400;
+  font-size: 16px;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 24px;
+  background-color: #242424;
+
+  color-scheme: light dark;
+
+  font-synthesis: none;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+}
+
+a {
+  color: #646cff;
+  font-weight: 500;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+button {
+  padding: 0.6em 1.2em;
+  font-weight: 500;
+  font-size: 1em;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #fff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/examples/vite-example/src/index.tsx
+++ b/examples/vite-example/src/index.tsx
@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { getRoutes } from './routes'
+import './index.less'
+
+const routes = getRoutes()
+const router = createBrowserRouter(routes)
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)
--- a/examples/vite-example/src/pages/_layout.module.less
+++ b/examples/vite-example/src/pages/_layout.module.less
@ -0,0 +1,43 @@
+.wrap {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  padding: 0 16px;
+  border-right: 1px solid #e9e9e9;
+
+  section {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    > ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    ul {
+      padding-left: 16px;
+
+      li {
+        line-height: 1.6;
+        list-style: none;
+      }
+    }
+  }
+}
+
+.content {
+  flex: 1;
+  box-sizing: border-box;
+  padding: 24px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+}
--- a/examples/vite-example/src/pages/_layout.tsx
+++ b/examples/vite-example/src/pages/_layout.tsx
@ -0,0 +1,57 @@
+import React from 'react'
+import { RouteObject } from 'react-router'
+import { Outlet, NavLink } from 'react-router-dom'
+import style from './_layout.module.less'
+
+function renderLink(route: RouteObject, parentPath: string) {
+  let children = route.children
+  let indexRoute: RouteObject | null = null
+  if (children) {
+    children = children.slice()
+    const idx = children.findIndex((r) => r.index)
+    if (idx >= 0) {
+      indexRoute = children[idx]
+      children.splice(idx, 1)
+    }
+  }
+
+  const routeName = route.path
+  const routePath = `${parentPath}/${routeName}`
+  const element = indexRoute ? indexRoute.element : route.element
+
+  return (
+    <React.Fragment key={routePath}>
+      <li>
+        {element ? (
+          <NavLink
+            to={routePath}
+            className={({ isActive }) => (isActive ? 'active' : undefined)}
+          >
+            {routeName}
+          </NavLink>
+        ) : (
+          routeName
+        )}
+      </li>
+      {children && <li>{renderLinks(children, routePath)}</li>}
+    </React.Fragment>
+  )
+}
+
+function renderLinks(routes: RouteObject[], parentPath = '') {
+  return <ul>{routes.map((route) => renderLink(route, parentPath))}</ul>
+}
+
+export default function Layout(props: { routes: RouteObject[] }) {
+  return (
+    <div className={style.wrap}>
+      <div className={style.nav}>
+        <h2>Examples</h2>
+        <section>{renderLinks(props.routes)}</section>
+      </div>
+      <div className={style.content}>
+        <Outlet />
+      </div>
+    </div>
+  )
+}
--- a/examples/vite-example/src/pages/animation/transition.tsx
+++ b/examples/vite-example/src/pages/animation/transition.tsx
@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function transition() {
+  return <div>transition</div>
+}
--- a/examples/vite-example/src/pages/auto-resize/index.tsx
+++ b/examples/vite-example/src/pages/auto-resize/index.tsx
@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function transition() {
+  return <div>auto-size</div>
+}
--- a/examples/vite-example/src/routes.tsx
+++ b/examples/vite-example/src/routes.tsx
@ -0,0 +1,87 @@
+import React from 'react'
+import { set } from 'lodash-es'
+import { RouteObject } from 'react-router'
+import { Helmet } from 'react-helmet'
+
+function parseRouteConfig() {
+  const modules = import.meta.glob(`/src/pages/**/*.tsx`)
+  const config: Record<string, any> = {}
+  Object.keys(modules).forEach((filePath) => {
+    const routeParts = filePath
+      .replace(/^\/src\/pages\//, '') // 去除 /src/pages
+      .replace(/.tsx$/, '') // 去除文件名后缀
+      .replace(/\[([\w-]+)]/, ':$1') // 转换动态路由 [foo].tsx => :foo
+      .split('/')
+
+    set(config, routeParts, modules[filePath])
+  })
+  return config
+}
+
+function wrapSuspense(
+  mod: () => Promise<{
+    default: React.ComponentType<{ routes?: RouteObject[] }>
+  }>,
+  routes?: RouteObject[],
+  title?: string,
+) {
+  if (!mod) {
+    return undefined
+  }
+
+  const Component = React.lazy(mod)
+  // 结合 Suspense ，这里可以自定义 loading 组件
+  return (
+    <React.Suspense fallback={null}>
+      {title && (
+        <Helmet>
+          <title>{title}</title>
+        </Helmet>
+      )}
+      {title ? <Component /> : <Component routes={routes} />}
+    </React.Suspense>
+  )
+}
+
+function wrapLayout(
+  routePath: string,
+  routeConfig: Record<string, any>,
+): RouteObject {
+  const { _layout, ...rest } = routeConfig
+  const routes = routeConfigToRoute(rest, routePath)
+  return {
+    path: routePath,
+    element: wrapSuspense(_layout, routes),
+    children: routes,
+  }
+}
+
+function routeConfigToRoute(
+  config: Record<string, any>,
+  parentPath: string,
+): RouteObject[] {
+  return Object.entries(config).map(([routePath, child]) => {
+    // () => import() 语法判断
+    if (typeof child === 'function') {
+      // 等于 index 则映射为当前根路由
+      const isIndex = routePath === 'index'
+      return {
+        index: isIndex,
+        path: isIndex ? undefined : routePath,
+        // 转换为组件
+        element: wrapSuspense(
+          child,
+          undefined,
+          isIndex ? parentPath : `${parentPath}/${routePath}`,
+        ),
+      }
+    }
+    // 否则为目录，则查找下一层级
+    return wrapLayout(routePath, child)
+  })
+}
+
+export function getRoutes(): RouteObject[] {
+  const routeConfig = parseRouteConfig()
+  return [wrapLayout('/', routeConfig)]
+}
--- a/examples/vite-example/src/vite-env.d.ts
+++ b/examples/vite-example/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/examples/vite-example/tsconfig.json
+++ b/examples/vite-example/tsconfig.json
@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/examples/vite-example/tsconfig.node.json
+++ b/examples/vite-example/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/examples/vite-example/vite.config.ts
+++ b/examples/vite-example/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
--- a/package.json
+++ b/package.json
@ -51,7 +51,7 @@
      "prettier --write --ignore-unknown"
    ],
    "*.less": [
-      "stylelint --syntax less --fix"
+      "stylelint --custom-syntax postcss-less --fix"
    ],
    "*.js": [
      "prettier --write"
@ -137,7 +137,6 @@
    "lodash": "^4.17.21",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.20",
-    "postcss-less": "^6.0.0",
    "prettier": "^2.8.0",
    "pretty-quick": "^3.1.1",
    "rimraf": "^3.0.2",
@ -162,6 +161,7 @@
    "typescript": "^4.9.3"
  },
  "devDependencies": {
-    "@rollup/plugin-terser": "^0.2.0"
+    "@rollup/plugin-terser": "^0.2.0",
+    "postcss-less": "^6.0.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="28"><defs><linearGradient id="a" x1=".004%" x2="100.131%" y1="49.993%" y2="49.993%"><stop offset="0%" stop-color="#6500FF"/><stop offset="16%" stop-color="#6A09FF"/><stop offset="43%" stop-color="#7623FF"/><stop offset="77%" stop-color="#8A4CFF"/><stop offset="99%" stop-color="#996BFF"/></linearGradient><linearGradient id="b" x1="50.004%" x2="50.004%" y1="100.012%" y2="0%"><stop offset="0%" stop-color="#6500FF"/><stop offset="16%" stop-color="#6909FF"/><stop offset="43%" stop-color="#7523FF"/><stop offset="77%" stop-color="#894CFF"/><stop offset="99%" stop-color="#976BFF"/></linearGradient><linearGradient id="c" x1="49.854%" x2="49.854%" y1="100.255%" y2="0%"><stop offset="0%" stop-color="#FF6E06"/><stop offset="28%" stop-color="#FF770C"/><stop offset="75%" stop-color="#FF911C"/><stop offset="100%" stop-color="#FFA126"/></linearGradient><linearGradient id="d" x1="57351%" x2="57351%" y1="59860%" y2="35023%"><stop offset="0%" stop-color="#FF6E06"/><stop offset="28%" stop-color="#FF770C"/><stop offset="75%" stop-color="#FF911C"/><stop offset="100%" stop-color="#FFA126"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><path fill="url(#a)" d="M1.955.004c-.029 0-.057 0-.088.002a1.41 1.41 0 0 0-.197.017A2.312 2.312 0 0 0 1.4.08a3.479 3.479 0 0 0-.179.061 3.768 3.768 0 0 0-.075.032l-.029.013-.057.028-.031.016L.98.257.95.275.91.298.883.317.825.355.79.381l-.03.022L.728.43.7.453C.68.468.662.483.645.5L.621.521.588.553l-.02.02A1.898 1.898 0 0 0 .46.691L.446.709.414.75A2.707 2.707 0 0 0 .348.84L.337.857.308.9l-.01.017L.29.931l3.784 2.214.801.855a.406.406 0 0 1-.019-.42.446.446 0 0 1 .37-.227H18.12c.045.003.09.005.137.005.961-.014 1.734-.758 1.737-1.674.002-.916-.765-1.664-1.726-1.683L1.955.004Z" transform="translate(.006)"/><path fill="url(#b)" d="m22.737 11.315-6.392 11.01a.438.438 0 0 1-.74.025l-4.063-6.995a1.724 1.724 0 0 0-.117-.23L4.667 3.459a2.32 2.32 0 0 1-.005-2.248A2.345 2.345 0 0 1 6.57.005L1.981.001A1.899 1.899 0 0 0 .908.294l-.1.068a2.405 2.405 0 0 0-.15.12A1.7 1.7 0 0 0 .462.69a1.797 1.797 0 0 0-.17.243 1.767 1.767 0 0 0-.028 1.9l.166.289 13.874 23.895a1.882 1.882 0 0 0 .793.776l.108.05a2.537 2.537 0 0 0 .18.069 2.14 2.14 0 0 0 .28.066 2.148 2.148 0 0 0 .19.02l.106.002c.04 0 .063 0 .086-.002a1.206 1.206 0 0 0 .19-.016 2.065 2.065 0 0 0 .27-.06 1.927 1.927 0 0 0 .168-.06l.089-.038.07-.036c.058-.03.073-.04.088-.048a2.596 2.596 0 0 0 .207-.142 1.851 1.851 0 0 0 .464-.537l.376-.64.081-.14 7.68-13.225a1.716 1.716 0 0 0 .047-1.75 1.74 1.74 0 0 0-3.039.01Z" transform="translate(.006)"/><path fill="url(#c)" d="M30.137 0h-6.459c-.935.018-1.684.847-1.684 1.863s.75 1.845 1.684 1.864c.046 0 .09-.003.134-.006h2.925c.214.032.374.23.374.465a.501.501 0 0 1-.025.157l-1.542 2.9c-.454.904-.147 2.036.685 2.53.832.492 1.874.159 2.328-.745l3.19-6c.029-.055.056-.111.08-.17l.003-.007c.015-.036.03-.072.043-.11l.002-.005.017-.052.008-.027c.008-.024.015-.048.021-.073l.012-.042.01-.04a2.826 2.826 0 0 0 .033-.191 2.31 2.31 0 0 0 .01-.077v-.011l.005-.09v-.022l.003-.091c0-1.115-.83-2.019-1.857-2.02Z" transform="translate(.006)"/><path fill="url(#d)" d="M19.881 7.41a.84.84 0 0 0-.725-.41h-6.325a.84.84 0 0 0-.725.41.804.804 0 0 0 0 .82l3.163 5.36a.84.84 0 0 0 .725.41.84.84 0 0 0 .725-.41l3.162-5.36a.804.804 0 0 0 0-.82Z" transform="translate(.006)"/></g></svg>