refactor: split @vue/website and source repo out

README.md

@@ -18,25 +18,19 @@ You can currently find the design mockups at [InVision](https://projects.invisio
 
 We must create several components following the architecture described at [New Docs Deployment](https://github.com/vuejs/team-discussions/discussions/22) discussion. The basic idea of the architecture at the moment is as follows.
 
-- `Vue Theme` – Vue Design System. It also contains the default theme for the VitePress.
-- `Vue Website` – The central repo (the "theme") in [New Docs Deployment](https://github.com/vuejs/team-discussions/discussions/22) discussion. At discussion it's called `vue-docs-theme`. It uses `Vue Theme` and `Vitepress` to create Vue website theme, such as Home, Team, Partners page. These code should be moved to [vuejs/website](https://github.com/vuejs/website) in the future.
-- `Docs` – The content (markdown). It uses `Vue Web Theme` to build final Vue website. This is the "source repo" mentioned in [New Docs Deployment](https://github.com/vuejs/team-discussions/discussions/22) discussion.
+- `@vue/theme` (this repo) – Vue Design System. It contains both the base components and a theme for VitePress.
 
-In the end, each component should live in their dedicated repo, but while we are in the early stage of development, we're directly building everything in this single repo. Here is the corresponding directory structure.
+- [`@vue/website`](https://github.com/vuejs/website) – The central repo (the "theme") in [New Docs Deployment](https://github.com/vuejs/team-discussions/discussions/22) discussion. It extends `@vue/theme` with `vuejs.org` specific components and pages, such as Home, Team, Sponsors and Partners page.
 
-- `src-theme` – Code for `Vue Theme`. Add sharable global stuff here. Accessible via `vue-theme` alias.
- - `src-theme/core` – Contains global Vue Design System codes, such as global styles, color scheme, common components, etc. All components are exposed to public to be used in any app require to use Vue Design System.
- - `src-theme/vitepress` – Contains VitePress theme. Only `VPApp` (the root layout) is exposed. This component will be used as default theme for the VitePress.
-- `src-web` – Code for "Vue Website". Add any Vue website related code here. Accessible via `vue-website` alias.
-- `docs` – Contents for `Docs`. Currently, we're placing `.vitepress` folder to boot up VitePress, by importing code from `src-web` (see `docs/.vitepress` and you'll see what we mean).
+- `vuejs/docs` – The actual docs content (markdown). It uses `@vue/website` to build the final Vue website. This is the "source repo" mentioned in [New Docs Deployment](https://github.com/vuejs/team-discussions/discussions/22) discussion.
 
 ### Booting The Local Dev Server
 
-Just install NPM packages and boot the server with `yarn docs`.
+This repo can be developed on its own since it is a self-contained VitePress theme. A demo app is available in `/demo` and can be run with `yarn dev`. Just install NPM packages and boot the server with `yarn dev`.
 
 ```bash
 $ yarn install
-$ yarn docs
+$ yarn dev
 ```
 
 ### Available Scripts
@@ -45,23 +39,17 @@ Here is the list of available scripts that can be used during the development.
 
 ```bash
 # Boot local dev server.
-$ yarn docs
+$ yarn dev
 
-# Build docs, then serve locally. This is for testing
+# Build demo, then serve locally. This is for testing
 # production build in the local environment.
-$ yarn docs-serve
+$ yarn demo-serve
 
 # Run lint via Prettier.
 $ yarn lint
 
 # Run type check via tsc.
 $ yarn type
-
-# Run unit test via Jest.
-$ yarn jest
-
-# Run lint, type check, and jest.
-$ yarn test
 ```
 
 ## License

docs/.vitepress/config.js → demo/.vitepress/config.js

@@ -4,9 +4,15 @@
 const path = require('path')
 
 module.exports = {
- alias: {
- 'vue-theme': path.join(__dirname, '../../src-theme'),
- 'vue-website': path.join(__dirname, '../../src-web')
+ vite: {
+ resolve: {
+ alias: {
+ '@vue/theme': path.join(__dirname, '../../src')
+ }
+ },
+ optimizeDeps: {
+ include: ['@vueuse/core', 'body-scroll-lock']
+ }
  },
 
  lang: 'en-US',
@@ -15,7 +21,13 @@ module.exports = {
 
  head: [
  ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com' }],
- ['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Source+Code+Pro:wght@400;700&display=swap' }]
+ [
+ 'link',
+ {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Source+Code+Pro:wght@400;700&display=swap'
+ }
+ ]
  ],
 
  markdown: {
@@ -56,7 +68,10 @@ module.exports = {
  {
  items: [
  { text: 'Contribute', link: '/guide/contributing/writing-guide' },
- { text: 'Migration from Vue 2', link: '/guide/migration/introduction' }
+ {
+ text: 'Migration from Vue 2',
+ link: '/guide/migration/introduction'
+ }
  ]
  }
  ]
@@ -77,15 +92,19 @@ module.exports = {
  { text: 'Vue Router', link: 'https://next.router.vuejs.org/' },
  { text: 'Vuex', link: 'https://next.vuex.vuejs.org/' },
  { text: 'Vue CLI', link: 'https://cli.vuejs.org/' },
- { text: 'Vue Test Utils', link: 'https://next.vue-test-utils.vuejs.org/v2/guide/introduction.html' },
- { text: 'Devtools', link: 'https://github.com/vuejs/vue-devtools' }
+ {
+ text: 'Vue Test Utils',
+ link: 'https://next.vue-test-utils.vuejs.org/v2/guide/introduction.html'
+ },
+ {
+ text: 'Devtools',
+ link: 'https://github.com/vuejs/vue-devtools'
+ }
  ]
  },
  {
  text: 'Templates',
- items: [
- { text: 'Themes', link: '/community/themes/' }
- ]
+ items: [{ text: 'Themes', link: '/community/themes/' }]
  }
  ]
  },
@@ -96,7 +115,7 @@ module.exports = {
  items: [
  { text: 'Team', link: '/community/team/' },
  { text: 'Partners', link: '/community/partners' },
- { text: 'Join', link: '/community/join/' },
+ { text: 'Join', link: '/community/join/' }
  ]
  },
  {
@@ -130,11 +149,23 @@ module.exports = {
  items: [
  { text: 'Introduction', link: '/guide/introduction' },
  { text: 'Installation', link: '/guide/installation' },
- { text: 'Application & Component Instances', link: '/guide/instance' },
+ {
+ text: 'Application & Component Instances',
+ link: '/guide/instance'
+ },
  { text: 'Template Syntax', link: '/guide/template-syntax' },
- { text: 'Data Properties and Methods', link: '/guide/data-methods' },
- { text: 'Computed Properties and Watchers', link: '/guide/computed' },
- { text: 'Class and Style Bindings', link: '/guide/class-and-style' },
+ {
+ text: 'Data Properties and Methods',
+ link: '/guide/data-methods'
+ },
+ {
+ text: 'Computed Properties and Watchers',
+ link: '/guide/computed'
+ },
+ {
+ text: 'Class and Style Bindings',
+ link: '/guide/class-and-style'
+ },
  { text: 'Conditional Rendering', link: '/guide/conditional' },
  { text: 'List Rendering', link: '/guide/list' },
  { text: 'Event Handling', link: '/guide/events' },
@@ -145,13 +176,22 @@ module.exports = {
  {
  text: 'Components In-Depth',
  items: [
- { text: 'Component Registration', link: '/guide/component-registration' },
+ {
+ text: 'Component Registration',
+ link: '/guide/component-registration'
+ },
  { text: 'Props', link: '/guide/component-props' },
  { text: 'Non-Prop Attributes', link: '/guide/component-attrs' },
  { text: 'Custom Events', link: '/guide/component-custom-events' },
  { text: 'Slots', link: '/guide/component-slots' },
- { text: 'Provide / inject', link: '/guide/component-provide-inject' },
- { text: 'Dynamic & Async Components', link: '/guide/component-dynamic-async' },
+ {
+ text: 'Provide / inject',
+ link: '/guide/component-provide-inject'
+ },
+ {
+ text: 'Dynamic & Async Components',
+ link: '/guide/component-dynamic-async'
+ },
  { text: 'Template refs', link: '/guide/component-template-refs' },
  { text: 'Handling Edge Cases', link: '/guide/component-edge-cases' }
  ]
@@ -160,7 +200,10 @@ module.exports = {
  text: 'Transitions & Animation',
  items: [
  { text: 'Overview', link: '/guide/transitions-overview' },
- { text: 'Enter & Leave Transitions', link: '/guide/transitions-enterleave' },
+ {
+ text: 'Enter & Leave Transitions',
+ link: '/guide/transitions-enterleave'
+ },
  { text: 'List Transitions', link: '/guide/transitions-list' },
  { text: 'State Transitions', link: '/guide/transitions-state' }
  ]
@@ -175,34 +218,58 @@ module.exports = {
  {
  text: 'Composition API',
  items: [
- { text: 'Introduction', link: '/guide/composition-api-introduction' },
+ {
+ text: 'Introduction',
+ link: '/guide/composition-api-introduction'
+ },
  { text: 'Setup', link: '/guide/composition-api-setup' },
- { text: 'Lifecycle Hooks', link: '/guide/composition-api-lifecycle-hooks' },
- { text: 'Provide / Inject', link: '/guide/composition-api-provide-inject' },
- { text: 'Template Refs', link: '/guide/composition-api-template-refs' }
+ {
+ text: 'Lifecycle Hooks',
+ link: '/guide/composition-api-lifecycle-hooks'
+ },
+ {
+ text: 'Provide / Inject',
+ link: '/guide/composition-api-provide-inject'
+ },
+ {
+ text: 'Template Refs',
+ link: '/guide/composition-api-template-refs'
+ }
  ]
  },
  {
  text: 'Advanced',
  items: [
  { text: 'Teleport', link: '/guide/teleport' },
  { text: 'Render Functions', link: '/guide/render-function' },
- { text: 'Plugins', link: '/guide/plugins' },
+ { text: 'Plugins', link: '/guide/plugins' }
  ]
  },
  {
  text: 'Digging Deeper',
  items: [
  { text: 'Reactivity in Depth', link: '/guide/reactivity' },
- { text: 'Reactivity Fundamentals', link: '/guide/reactivity-fundamentals' },
- { text: 'Reactivity in Computed and Watch', link: '/guide/reactivity-computed-watchers' },
- { text: 'Rendering Mechanisms and Optimizations', link: '/guide/optimizations' }
+ {
+ text: 'Reactivity Fundamentals',
+ link: '/guide/reactivity-fundamentals'
+ },
+ {
+ text: 'Reactivity in Computed and Watch',
+ link: '/guide/reactivity-computed-watchers'
+ },
+ {
+ text: 'Rendering Mechanisms and Optimizations',
+ link: '/guide/optimizations'
+ }
  ]
  },
  {
  text: 'Tooling',
  items: [
- { text: 'Single File Components', link: '/guide/single-file-component' },
+ {
+ text: 'Single File Components',
+ link: '/guide/single-file-component'
+ },
  { text: 'Testing', link: '/guide/testing' },
  { text: 'TypeScript Support', link: '/guide/typescript-support' },
  { text: 'Mobile', link: '/guide/mobile' },

docs/.vitepress/theme/index.ts → demo/.vitepress/theme/index.ts

@@ -1,6 +1,6 @@
 // this file is here temporary during the development. it should become the
 // default VitePress theme, so we shouldn't have to import it like this.
 
-import { VWTheme } from 'vue-website'
+import { VPTheme } from '@vue/theme'
 
-export default VWTheme
+export default VPTheme

package.json

@@ -1,7 +1,8 @@
 {
- "name": "vue-theme",
+ "name": "@vue/theme",
  "version": "0.1.0",
  "description": "The design system for Vue.js.",
+ "main": "src/index.ts",
  "repository": {
  "type": "git",
  "url": "git+https://github.com/vuejs/vue-theme.git"
@@ -19,14 +20,10 @@
  "scripts": {
  "lint": "prettier --check --write --parser typescript \"{__tests__,docs,src-theme,src-vp,src-web,types}/**/*.ts\"",
  "type": "tsc --noEmit",
- "jest": "jest",
- "test": "yarn lint && yarn type && yarn jest",
- "docs": "vitepress dev docs",
- "docs-build": "vitepress build docs",
- "docs-serve": "yarn docs-build && vitepress serve docs"
- },
- "peerDependencies": {
- "vue": "^3.0.0"
+ "test": "yarn lint && yarn type",
+ "dev": "vitepress dev demo",
+ "demo-build": "vitepress build demo",
+ "demo-serve": "yarn demo-build && vitepress serve demo"
  },
  "dependencies": {
  "@vueuse/core": "^5.0.2",
@@ -35,9 +32,8 @@
  },
  "devDependencies": {
  "@types/body-scroll-lock": "^2.6.1",
- "jest": "^26.6.3",
+ "@types/estree": "^0.0.48",
  "prettier": "^2.3.1",
- "ts-jest": "^26.5.1",
  "typescript": "^4.3.2",
  "vitepress": "^0.15.0",
  "vue": "^3.1.1"

src-theme/vitepress/components/VPNavScreenAppearance.vue → src/vitepress/components/VPNavScreenAppearance.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VTSwitchAppearance } from 'vue-theme'
+import { VTSwitchAppearance } from '../../core'
 import { useConfig } from '../composables/config'
 
 const { config } = useConfig()

src-theme/vitepress/components/VPNavScreenMenuGroup.vue → src/vitepress/components/VPNavScreenMenuGroup.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { defineProps, ref } from 'vue'
-import { VTIconPlus } from 'vue-theme'
+import { VTIconPlus } from '../../core'
 import type { NavItemChild } from '../config'
 import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'

src-theme/vitepress/components/VPNavScreenMenuGroupLink.vue → src/vitepress/components/VPNavScreenMenuGroupLink.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { defineProps } from 'vue'
-import { VTLink } from 'vue-theme'
+import { VTLink } from '../../core'
 
 defineProps<{
  text: string

src-theme/vitepress/components/VPNavScreenMenuGroupSection.vue → src/vitepress/components/VPNavScreenMenuGroupSection.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { defineProps } from 'vue'
-import type { NavItemChildWithChildren } from '../config'
+import type { NavItemWithLink } from '../config'
 import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 
 defineProps<{
  text?: string
- items: NavItemChildWithChildren[]
+ items: NavItemWithLink[]
 }>()
 </script>
 

src-theme/vitepress/components/VPNavScreenMenuLink.vue → src/vitepress/components/VPNavScreenMenuLink.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { defineProps } from 'vue'
-import { VTLink } from 'vue-theme'
+import { VTLink } from '../../core'
 
 defineProps<{
  text: string