diff --git a/lerna.json b/lerna.json index 27383a2..2954135 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,4 @@ { "version": "1.0.0", - "packages": ["website", "packages/*"], - "useWorkspaces": true + "packages": ["website", "packages/*"] } diff --git a/package.json b/package.json index 76c5f8e..b87f455 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,10 @@ "scripts": { "prepare": "husky install", "start": "lerna exec \"npm run dev\" --scope website", - "build:website": "lerna exec \"npm run build\" --scope website", - "build": "lerna exec \"tsbb build src/*.tsx --use-babel --use-vue\" --scope @vue-monorepo-template/*", - "watch:simple": "lerna exec \"tsbb watch src/*.tsx --use-babel --use-vue\" --scope @vue-monorepo-template/simple", - "watch:base": "lerna exec \"tsbb watch src/*.tsx --use-babel --use-vue\" --scope @vue-monorepo-template/base", + "doc": "lerna exec \"npm run build\" --scope website", + "build": "lerna exec \"tsbb build \"src/*.{tsx,ts}\" --use-babel --use-vue\" --scope @vue-monorepo-template/*", + "watch:simple": "lerna exec \"tsbb watch \"src/*.{tsx,ts}\" --use-babel --use-vue\" --scope @vue-monorepo-template/simple", + "watch:base": "lerna exec \"tsbb watch \"src/*.{tsx,ts}\" --use-babel --use-vue\" --scope @vue-monorepo-template/base", "prettier": "prettier --write \"**/*.{js,jsx,vue,tsx,ts,less,md,json}\"", "version": "lerna version --exact --force-publish --no-push --no-git-tag-version", "clean": "lerna clean --yes" diff --git a/packages/base/package.json b/packages/base/package.json index 1604f2c..604cf2a 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -17,6 +17,6 @@ "vue": ">=3.0.0" }, "devDependencies": { - "vue": "^3.0.0" + "vue": "^3.3.4" } } diff --git a/packages/base/src/index.tsx b/packages/base/src/index.tsx index f7f0d36..58fcb9d 100644 --- a/packages/base/src/index.tsx +++ b/packages/base/src/index.tsx @@ -1,17 +1,18 @@ import { defineComponent, h } from 'vue'; +const defaultProps = { + title: { + type: String, + default: 'title', + }, +}; + export default defineComponent({ name: 'Base', - props: { - title: { - type: String, - defalut: 'title', - }, - }, + props: defaultProps, setup(props) { - const { title } = props; return () => { - return
Package: {title}
; + return
Package Base: {props.title}
; }; }, }); diff --git a/packages/simple/package.json b/packages/simple/package.json index fd75d3c..5c95e37 100644 --- a/packages/simple/package.json +++ b/packages/simple/package.json @@ -17,6 +17,6 @@ "vue": ">=3.0.0" }, "devDependencies": { - "vue": "^3.0.0" + "vue": "^3.3.4" } } diff --git a/packages/simple/src/index.tsx b/packages/simple/src/index.tsx index d22d5b4..f21abea 100644 --- a/packages/simple/src/index.tsx +++ b/packages/simple/src/index.tsx @@ -5,13 +5,12 @@ export default defineComponent({ props: { title: { type: String, - defalut: 'title', + default: 'title', }, }, setup(props) { - const { title } = props; return () => { - return
Package: {title}
; + return
Package Simple: {props.title}
; }; }, }); diff --git a/website/.eslintrc.cjs b/website/.eslintrc.cjs deleted file mode 100644 index 50ee96f..0000000 --- a/website/.eslintrc.cjs +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-env node */ -require('@rushstack/eslint-patch/modern-module-resolution') - -module.exports = { - root: true, - extends: [ - 'plugin:vue/vue3-essential', - 'eslint:recommended', - '@vue/eslint-config-typescript', - '@vue/eslint-config-prettier/skip-formatting' - ], - parserOptions: { - ecmaVersion: 'latest' - } -} diff --git a/website/.gitignore b/website/.gitignore index 38adffa..a547bf3 100644 --- a/website/.gitignore +++ b/website/.gitignore @@ -8,19 +8,15 @@ pnpm-debug.log* lerna-debug.log* node_modules -.DS_Store dist dist-ssr -coverage *.local -/cypress/videos/ -/cypress/screenshots/ - # Editor directories and files .vscode/* !.vscode/extensions.json .idea +.DS_Store *.suo *.ntvs* *.njsproj diff --git a/website/.prettierrc.json b/website/.prettierrc.json deleted file mode 100644 index ecdf3e0..0000000 --- a/website/.prettierrc.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/prettierrc", - "semi": false, - "tabWidth": 2, - "singleQuote": true, - "printWidth": 100, - "trailingComma": "none" -} diff --git a/website/README.md b/website/README.md index bf1a354..ef72fd5 100644 --- a/website/README.md +++ b/website/README.md @@ -1 +1,18 @@ -Documentation site for [vue-monorepo-template](https://tsbbjs.github.io/vue-monorepo-template). \ No newline at end of file +# Vue 3 + TypeScript + Vite + +This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` diff --git a/website/src/Example.vue b/website/src/Example.vue new file mode 100644 index 0000000..251a002 --- /dev/null +++ b/website/src/Example.vue @@ -0,0 +1,57 @@ + + + + diff --git a/website/src/assets/base.css b/website/src/assets/base.css deleted file mode 100644 index 71dc55a..0000000 --- a/website/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/website/src/assets/logo.svg b/website/src/assets/logo.svg deleted file mode 100644 index 7565660..0000000 --- a/website/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/website/src/assets/main.css b/website/src/assets/main.css deleted file mode 100644 index f159ebe..0000000 --- a/website/src/assets/main.css +++ /dev/null @@ -1,29 +0,0 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } -} diff --git a/website/src/assets/vue.svg b/website/src/assets/vue.svg new file mode 100644 index 0000000..770e9d3 --- /dev/null +++ b/website/src/assets/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/src/components/HelloWorld.vue b/website/src/components/HelloWorld.vue deleted file mode 100644 index 362a897..0000000 --- a/website/src/components/HelloWorld.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - - - diff --git a/website/src/components/TheWelcome.vue b/website/src/components/TheWelcome.vue deleted file mode 100644 index a70765c..0000000 --- a/website/src/components/TheWelcome.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/website/src/components/WelcomeItem.vue b/website/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def3..0000000 --- a/website/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/website/src/components/__tests__/HelloWorld.spec.ts b/website/src/components/__tests__/HelloWorld.spec.ts deleted file mode 100644 index 2533202..0000000 --- a/website/src/components/__tests__/HelloWorld.spec.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { describe, it, expect } from 'vitest' - -import { mount } from '@vue/test-utils' -import HelloWorld from '../HelloWorld.vue' - -describe('HelloWorld', () => { - it('renders properly', () => { - const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }) - expect(wrapper.text()).toContain('Hello Vitest') - }) -}) diff --git a/website/src/components/icons/IconCommunity.vue b/website/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b05..0000000 --- a/website/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/website/src/components/icons/IconDocumentation.vue b/website/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791c..0000000 --- a/website/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/website/src/components/icons/IconEcosystem.vue b/website/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f07..0000000 --- a/website/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/website/src/components/icons/IconSupport.vue b/website/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834..0000000 --- a/website/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/website/src/components/icons/IconTooling.vue b/website/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d..0000000 --- a/website/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/website/src/main.ts b/website/src/main.ts index eedade8..f8c23e4 100644 --- a/website/src/main.ts +++ b/website/src/main.ts @@ -1,11 +1,5 @@ -import { createApp } from 'vue' -import App from './App.vue' -import router from './router' +import { createApp } from 'vue'; +import './style.css'; +import App from './App.vue'; -import './assets/main.css' - -const app = createApp(App) - -app.use(router) - -app.mount('#app') +createApp(App).mount('#app'); diff --git a/website/src/router/index.ts b/website/src/router/index.ts deleted file mode 100644 index a49ae50..0000000 --- a/website/src/router/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - path: '/about', - name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue') - } - ] -}) - -export default router diff --git a/website/src/style.css b/website/src/style.css new file mode 100644 index 0000000..fcba7bd --- /dev/null +++ b/website/src/style.css @@ -0,0 +1,79 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/website/src/views/AboutView.vue b/website/src/views/AboutView.vue deleted file mode 100644 index 756ad2a..0000000 --- a/website/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/website/src/views/HomeView.vue b/website/src/views/HomeView.vue deleted file mode 100644 index 99b732c..0000000 --- a/website/src/views/HomeView.vue +++ /dev/null @@ -1,13 +0,0 @@ - - - diff --git a/website/src/vite-env.d.ts b/website/src/vite-env.d.ts new file mode 100644 index 0000000..d0f0fbe --- /dev/null +++ b/website/src/vite-env.d.ts @@ -0,0 +1,7 @@ +/// + +declare module '*.vue' { + import type { ComponentOptions } from 'vue'; + const Component: ComponentOptions; + export default Component; +} diff --git a/website/tsconfig.app.json b/website/tsconfig.app.json deleted file mode 100644 index 2242756..0000000 --- a/website/tsconfig.app.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "@vue/tsconfig/tsconfig.web.json", - "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/*"], - "compilerOptions": { - "composite": true, - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"] - }, - "ignoreDeprecations": "5.0" - } -} diff --git a/website/tsconfig.json b/website/tsconfig.json index 100cf6a..cffb14d 100644 --- a/website/tsconfig.json +++ b/website/tsconfig.json @@ -1,14 +1,26 @@ { - "files": [], - "references": [ - { - "path": "./tsconfig.node.json" - }, - { - "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.vitest.json" - } - ] + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + "allowJs": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], + "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/website/tsconfig.node.json b/website/tsconfig.node.json index 9546f24..42872c5 100644 --- a/website/tsconfig.node.json +++ b/website/tsconfig.node.json @@ -1,9 +1,10 @@ { - "extends": "@vue/tsconfig/tsconfig.node.json", - "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"], "compilerOptions": { "composite": true, - "types": ["node"], - "ignoreDeprecations": "5.0" - } + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] } diff --git a/website/tsconfig.vitest.json b/website/tsconfig.vitest.json deleted file mode 100644 index 55677d9..0000000 --- a/website/tsconfig.vitest.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "./tsconfig.app.json", - "exclude": [], - "compilerOptions": { - "composite": true, - "lib": [], - "types": ["node", "jsdom"], - "ignoreDeprecations": "5.0" - } -} diff --git a/website/vite.config.ts b/website/vite.config.ts index 43cf3a0..ae1ec4d 100644 --- a/website/vite.config.ts +++ b/website/vite.config.ts @@ -1,26 +1,72 @@ -import { fileURLToPath, URL } from 'node:url' - -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import vueJsx from '@vitejs/plugin-vue-jsx' -import markdown, { Mode } from 'vite-plugin-markdown' +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import raw from 'vite-raw-plugin'; +import { visualizer } from 'rollup-plugin-visualizer'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), - vueJsx(), - markdown({ - mode: [Mode.MARKDOWN, Mode.HTML] - // markdown: (body) => { - // console.log('body:', body) - // return 'xx' - // } - }) + raw({ + fileRegex: /\.md$/, + }), + visualizer({ + gzipSize: true, + brotliSize: true, + emitFile: false, + filename: 'dist/deps.html', //分析图生成的文件名 + open: true, //如果存在本地服务端口，将在打包后自动展示 + }), ], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) + build: { + chunkSizeWarningLimit: 1000, + rollupOptions: { + output: { + manualChunks: { + vue: ['vue'], + refractor: ['refractor'], + unified: [ + 'comma-separated-tokens', + 'property-information', + 'remark-gfm', + 'remark-parse', + 'remark-rehype', + 'space-separated-tokens', + 'style-to-object', + 'unified', + ], + rehype: [ + 'rehype-attr', + 'rehype-autolink-headings', + 'rehype-raw', + 'rehype-rewrite', + 'rehype-slug', + 'rehype-stringify', + ], + 'vue-markdown-preview': ['@uivjs/vue-markdown-preview'], + 'hast-util': ['hast-util-raw', 'hast-util-select', 'mdast-util-to-hast'], + micromark: ['micromark', 'micromark-core-commonmark', 'micromark-extension-gfm-table'], + 'rehype-prism-plus': ['rehype-prism-plus'], + 'micromark-extension': [ + 'micromark-util-subtokenize', + 'micromark-util-character', + 'micromark-util-chunked', + 'micromark-util-subtokenize', + 'micromark-extension-gfm-autolink-literal', + 'micromark-extension-gfm-footnote', + 'micromark-extension-gfm-strikethrough', + 'micromark-extension-gfm-task-list-item', + 'mdast-util-gfm-autolink-literal', + 'mdast-util-to-markdown', + 'mdast-util-find-and-replace', + 'mdast-util-gfm-table', + 'mdast-util-from-markdown', + 'markdown-table', + 'github-slugger', + 'vfile', + ], + }, + }, + }, + }, +}); diff --git a/website/vitest.config.ts b/website/vitest.config.ts deleted file mode 100644 index a2f57a5..0000000 --- a/website/vitest.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'node:url' -import { mergeConfig } from 'vite' -import { configDefaults, defineConfig } from 'vitest/config' -import viteConfig from './vite.config' - -export default mergeConfig( - viteConfig, - defineConfig({ - test: { - environment: 'jsdom', - exclude: [...configDefaults.exclude, 'e2e/*'], - root: fileURLToPath(new URL('./', import.meta.url)) - } - }) -)