18 | {{ frontmatter.subtext }} 19 |
20 |
10 |
11 | Today we are happy to announce the (long overdue) 1.0 release of [VitePress](https://vitepress.dev/)!
12 |
13 | VitePress is a Static Site Generator (SSG) designed for building fast, content-centric websites. In a nutshell, VitePress takes your source content written in Markdown, applies a theme to it, and generates static HTML pages that can be easily deployed anywhere.
14 |
15 | VitePress is built on top of [Vite](https://vitejs.dev/) and [Vue](https://vuejs.org/), and is the spiritual successor and modern replacement of [VuePress](https://vuepress.vuejs.org).
16 |
17 | ---
18 |
19 | ## What can I use VitePress for?
20 |
21 | - **Documentation**
22 |
23 | VitePress ships with a default theme designed for technical documentation. It powers the documentation for [Vite](https://vitejs.dev/), [Rollup](https://rollupjs.org/), [Pinia](https://pinia.vuejs.org/), [VueUse](https://vueuse.org/), [Vitest](https://vitest.dev/), [D3](https://d3js.org/), [UnoCSS](https://unocss.dev/), [Iconify](https://iconify.design/) and many more.
24 |
25 | The [official Vue.js documentation](https://vuejs.org/) is also based on VitePress, but uses a custom theme shared between multiple translations.
26 |
27 | - **Blogs, Portfolios, and Marketing Sites**
28 |
29 | VitePress supports [fully customized themes](https://vitepress.dev/guide/custom-theme), with the developer experience of a standard Vite + Vue application. Being built on Vite also means you can directly leverage Vite plugins from its rich ecosystem. In addition, VitePress provides flexible APIs to [load data](https://vitepress.dev/guide/data-loading) (local or remote) and [dynamically generate routes](https://vitepress.dev/guide/routing#dynamic-routes) at build time. You can use it to build almost anything as long as the data can be determined at build time.
30 |
31 | [This very blog](https://github.com/vuejs/blog) is built with VitePress' custom theme and data loading API.
32 |
33 | ## Developer experience
34 |
35 | VitePress aims to provide a great Developer Experience (DX) when working with Markdown content.
36 |
37 | - **[Vite-Powered:](https://vitejs.dev/)** instant server start, with edits always instantly reflected (<100ms) without page reload.
38 |
39 | - **[Built-in Markdown Extensions:](https://vitepress.dev/guide/markdown)** Frontmatter, tables, syntax highlighting... you name it. Specifically, VitePress provides many advanced features for working with code blocks, making it ideal for highly technical documentation.
40 |
41 | - **[Vue-Enhanced Markdown:](https://vitepress.dev/guide/using-vue)** each Markdown page is also a Vue [Single-File Component](https://vuejs.org/guide/scaling-up/sfc.html), thanks to Vue template's 100% syntax compatibility with HTML. You can embed interactivity in your static content using Vue templating features or imported Vue components.
42 |
43 | ## Performance
44 |
45 | Unlike many traditional SSGs where each navigation results in a full page reload, a website generated by VitePress serves static HTML on the initial visit, but becomes a [Single Page Application](https://en.wikipedia.org/wiki/Single-page_application) (SPA) for subsequent navigation within the site. This model, in our opinion, provides an optimal balance for performance:
46 |
47 | - **Fast Initial Load**
48 |
49 | The initial visit to any page will be served the static, pre-rendered HTML for fast loading speed and optimal SEO. The page then loads a JavaScript bundle that turns the page into a Vue SPA ("hydration"). Contrary to common assumptions of SPA hydration being slow, this process is actually extremely fast thanks to Vue 3's raw performance and compiler optimizations. On [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F), typical VitePress sites achieve near-perfect performance scores even on low-end mobile devices with a slow network.
50 |
51 | - **Fast Post-load Navigation**
52 |
53 | More importantly, the SPA model leads to better user experience **after** the initial load. Subsequent navigation within the site will no longer cause a full page reload. Instead, the incoming page's content will be fetched and dynamically updated. VitePress also automatically pre-fetches page chunks for links that are within viewport. In most cases, post-load navigation will feel instant.
54 |
55 | - **Interactivity Without Penalty**
56 |
57 | To be able to hydrate the dynamic Vue parts embedded inside static Markdown, each Markdown page is processed as a Vue component and compiled into JavaScript. This may sound inefficient, but the Vue compiler is smart enough to separate the static and dynamic parts, minimizing both the hydration cost and payload size. For the initial page load, the static parts are automatically eliminated from the JavaScript payload and skipped during hydration.
58 |
59 | ---
60 |
61 | The path to VitePress 1.0 wouldn't have been possible without the hard work of [our contributors](https://github.com/vuejs/vitepress/graphs/contributors). In particular, shout out to [Kia King Ishii (@kiaking)](https://github.com/kiaking) for creating the beautiful design for the default theme, and [Divyansh Singh (@brc-dd)](https://github.com/brc-dd) for tirelessly leading the maintenance and pushing new features.
62 |
--------------------------------------------------------------------------------
/posts/volar-1.0.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Volar 1.0 "Nika" Released!
3 | date: 2022-10-10
4 | author: Johnson Chu
5 | avatar: https://avatars.githubusercontent.com/u/16279759?v=4
6 | twitter: '@johnsoncodehk'
7 | ---
8 |
9 | We are happy to announce that we have released v1.0 of Volar, the official IDE/TS tooling support for Vue! 🎉
10 |
11 | This major version ships with tons of improvements across the board. In addition to improving UX, performance, and package size, we also released Plugin API v1 and refactored the core code to be framework-agnostic.
12 |
13 | 注：結尾附有中文版本 (There is Chinese version of this post at the end)。
14 |
15 | ---
16 |
17 | Earlier this year in March, Vue creator Evan You started sponsoring me ([@johnsoncodehk](https://twitter.com/johnsoncodehk)) to work full-time on the development of Volar, with the goal of pushing it towards 1.0. After 7 months of hard work, we have finally achieved this goal!
18 |
19 | There are so many updates that you most likely missed some. Below we have summarized the most significant changes from the past 7 months:
20 |
21 | ### Feature Updates
22 |
23 | - Implemented `Goto Code` and `Highlight Selection Dom Elements` for Vite and Nuxt 3 Preview (highly recommend you try it out!)
24 | - Implemented [Component Preview](https://github.com/johnsoncodehk/volar/discussions/1511)
25 | - Added setting `format.initialIndent` to specify the initial indent of SFC blocks
26 | - Implemented support for Web IDE
27 | - No longer built-in support for `` (In v1.0 you need to install [@volar/vue-language-plugin-pug](https://www.npmjs.com/package/@volar/vue-language-plugin-pug))
28 |
29 | ### Out-of-the-Box Usage Improvements
30 |
31 | - No longer needs `"jsx": "preserve"` by default, and also will no longer conflict with `@types/react` (unless explicitly enabled in `vueCompilerOptions.jsxTemplates`)
32 | - Always wraps component options in `defineComponent()` or `Vue.extend` by default so that you can simply export an object literal.
33 | - Unknown component tags is not in warning color anymore.
34 | - TypeScript support is improved in `` block for JS components
35 | - Reduce the need to read the README for new users. Common project setup problems will be automatically detected and prompted in status bar (such as incorrectly setting `vueCompilerOptions.target`)
36 |
37 | ### UX / DX Improvements
38 |
39 | - Takeover mode no longer shows a pop-up when enabled
40 | - There is a new faster command to use when user needs to restart server: `Reload Project`. This command won't restart the server but will clear the cache. `Restart Vue Server` is still available to hard-reload the server.
41 | - "Show Virtual Scripts" command is added. Check out how it works [here](https://twitter.com/johnsoncodehk/status/1577046525490126848).
42 | - Incrementally calculate error range for old diagnostic results to prevent annoying flickering problem
43 | - Added support for adding and switching workspaces without restarting the server
44 | - Simplified display of name casing tool in the status bar, and also supports prop name casing conversion
45 |
46 | ### TypeScript Improvements
47 |
48 | - vue-tsc supports `--watch`
49 | - vue-tsc supports `--declaration --emitDeclarationOnly` to emit dts for components
50 | - Support for `Inlay Hints`
51 | - Support `Find File References`
52 | - Support for [JavaScript and TypeScript Nightly](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next)
53 | - Fixed `
29 |
30 |
31 |
34 |
35 |
36 |
41 | ```
42 |
43 | Try it out in the [SFC Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgY29sb3IgPSByZWYoJ3JlZCcpXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8YnV0dG9uIEBjbGljaz1cImNvbG9yID0gY29sb3IgPT09ICdyZWQnID8gJ2dyZWVuJyA6ICdyZWQnXCI+XG4gICAgQ29sb3IgaXM6IHt7IGNvbG9yIH19XG4gIDwvYnV0dG9uPlxuPC90ZW1wbGF0ZT5cblxuPHN0eWxlIHNjb3BlZD5cbmJ1dHRvbiB7XG4gIGNvbG9yOiB2LWJpbmQoY29sb3IpO1xufVxuPC9zdHlsZT4ifQ==), or read their respective documentations:
44 |
45 | - [`
44 | ```
45 |
46 | Do note that complex types support is AST-based and therefore not 100% comprehensive. Some complex types that require actual type analysis, e.g. conditional types, are not supported. You can use conditional types for the type of a single prop, but not the entire props object.
47 |
48 | - Details: [PR#8083](https://github.com/vuejs/core/pull/8083)
49 |
50 | ### Generic Components
51 |
52 | Components using `
61 | ```
62 |
63 | The value of `generic` works exactly the same as the parameter list between `<...>` in TypeScript. For example, you can use multiple parameters, `extends` constraints, default types, and reference imported types:
64 |
65 | ```vue
66 |
73 | ```
74 |
75 | This feature previously required explicit opt-in, but is now enabled by default in the latest version of volar / vue-tsc.
76 |
77 | - Discussion: [RFC#436](https://github.com/vuejs/rfcs/discussions/436)
78 | - Related: [generic `defineComponent()` - PR#7963](https://github.com/vuejs/core/pull/7963)
79 |
80 | ### More Ergonomic `defineEmits`
81 |
82 | Previously, the type parameter for `defineEmits` only supports the call signature syntax:
83 |
84 | ```ts
85 | // BEFORE
86 | const emit = defineEmits<{
87 | (e: 'foo', id: number): void
88 | (e: 'bar', name: string, ...rest: any[]): void
89 | }>()
90 | ```
91 |
92 | The type matches the return type for `emit`, but is a bit verbose and awkward to write. 3.3 introduces a more ergonomic way of declaring emits with types:
93 |
94 | ```ts
95 | // AFTER
96 | const emit = defineEmits<{
97 | foo: [id: number]
98 | bar: [name: string, ...rest: any[]]
99 | }>()
100 | ```
101 |
102 | In the type literal, the key is the event name and the value is an array type specifying the additional arguments. Although not required, you can use the [labeled tuple elements](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#labeled-tuple-elements) for explicitness, like in the example above.
103 |
104 | The call signature syntax is still supported.
105 |
106 | ### Typed Slots with `defineSlots`
107 |
108 | The new `defineSlots` macro can be used to declare expected slots and their respective expected slot props:
109 |
110 | ```vue
111 |
117 | ```
118 |
119 | `defineSlots()` only accepts a type parameter and no runtime arguments. The type parameter should be a type literal where the property key is the slot name, and the value is a slot function. The first argument of the function is the props the slot expects to receive, and its type will be used for slot props in the template. The returning value of `defineSlots` is the same slots object returned from `useSlots`.
120 |
121 | Some current limitations:
122 |
123 | - Required slots checking is not yet implemented in volar / vue-tsc.
124 | - Slot function return type is currently ignored and can be `any`, but we may leverage it for slot content checking in the future.
125 |
126 | There is also a corresponding `slots` option for `defineComponent` usage. Both APIs have no runtime implications and serve purely as type hints for IDEs and `vue-tsc`.
127 |
128 | - Details: [PR#7982](https://github.com/vuejs/core/issues/7982)
129 |
130 | ## Experimental Features
131 |
132 | ### Reactive Props Destructure
133 |
134 | Previously part of the now-dropped Reactivity Transform, reactive props destructure has been split into a separate feature.
135 |
136 | The feature allows destructured props to retain reactivity, and provides a more ergonomic way to declare props default values:
137 |
138 | ```vue
139 |
150 |
151 | {{ msg }}
152 | ```
153 |
154 | This feature is experimental and requires explicit opt-in.
155 |
156 | - Details: [RFC#502](https://github.com/vuejs/rfcs/discussions/502)
157 |
158 | ### `defineModel`
159 |
160 | Previously, for a component to support two-way binding with `v-model`, it needs to (1) declare a prop and (2) emit a corresponding `update:propName` event when it intends to update the prop:
161 |
162 | ```vue
163 |
164 |
173 |
174 |
175 |
176 |
177 | ```
178 |
179 | 3.3 simplifies the usage with the new `defineModel` macro. The macro automatically registers a prop, and returns a ref that can be directly mutated:
180 |
181 | ```vue
182 |
183 |
187 |
188 |
189 |
190 |
191 | ```
192 |
193 | This feature is experimental and requires explicit opt-in.
194 |
195 | - Details: [RFC#503](https://github.com/vuejs/rfcs/discussions/503)
196 |
197 | ## Other Notable Features
198 |
199 | ### `defineOptions`
200 |
201 | The new `defineOptions` macro allows declaring component options directly in `
207 | ```
208 |
209 | ### Better Getter Support with `toRef` and `toValue`
210 |
211 | `toRef` has been enhanced to support normalizing values / getters / existing refs into refs:
212 |
213 | ```js
214 | // equivalent to ref(1)
215 | toRef(1)
216 | // creates a readonly ref that calls the getter on .value access
217 | toRef(() => props.foo)
218 | // returns existing refs as-is
219 | toRef(existingRef)
220 | ```
221 |
222 | Calling `toRef` with a getter is similar to `computed`, but can be more efficient when the getter is just performing property access with no expensive computations.
223 |
224 | The new `toValue` utility method provides the opposite, normalizing values / getters / refs into values:
225 |
226 | ```js
227 | toValue(1) // --> 1
228 | toValue(ref(1)) // --> 1
229 | toValue(() => 1) // --> 1
230 | ```
231 |
232 | `toValue` can be used in composables in place of `unref` so that your composable can accept getters as reactive data sources:
233 |
234 | ```js
235 | // before: allocating unnecessary intermediate refs
236 | useFeature(computed(() => props.foo))
237 | useFeature(toRef(props, 'foo'))
238 |
239 | // after: more efficient and succinct
240 | useFeature(() => props.foo)
241 | ```
242 |
243 | The relationship between `toRef` and `toValue` is similar to that between `ref` and `unref`, with the main difference being the special handling of getter functions.
244 |
245 | - Details: [PR#7997](https://github.com/vuejs/core/pull/7997)
246 |
247 | ### JSX Import Source Support
248 |
249 | Currently, Vue's types automatically registers global JSX typing. This may cause conflict with used together with other libraries that needs JSX type inference, in particular React.
250 |
251 | Starting in 3.3, Vue supports specifying JSX namespace via TypeScript's [jsxImportSource](https://www.typescriptlang.org/tsconfig#jsxImportSource) option. This allows the users to choose global or per-file opt-in based on their use case.
252 |
253 | For backwards compatibility, 3.3 still registers JSX namespace globally. **We plan to remove the default global registration in 3.4.** If you are using TSX with Vue, you should add explicit `jsxImportSource` to your `tsconfig.json` after upgrading to 3.3 to avoid breakage in 3.4.
254 |
255 | ## Maintenance Infrastructure Improvements
256 |
257 | This release builds upon many maintenance infrastructure improvements that allow us to move faster with more confidence:
258 |
259 | - 10x faster builds by separating type checking from the rollup build and moving from `rollup-plugin-typescript2` to `rollup-plugin-esbuild`.
260 | - Faster tests by moving from Jest to [Vitest](https://vitest.dev).
261 | - Faster types generation by moving from `@microsoft/api-extractor` to `rollup-plugin-dts`.
262 | - Comprehensive regression tests via [ecosystem-ci](https://github.com/vuejs/ecosystem-ci) - catches regressions in major ecosystem dependents before releases!
263 |
264 | As planned, we aim to start making smaller and more frequent feature releases in 2023. Stay tuned!
265 |
--------------------------------------------------------------------------------
/posts/vue-3-4.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Announcing Vue 3.4
3 | date: 2023-12-28
4 | author: Evan You
5 | gravatar: eca93da2c67aadafe35d477aa8f454b8
6 | twitter: '@youyuxi'
7 | ---
8 |
9 | Today we're excited to announce the release of Vue 3.4 "🏀 Slam Dunk"!
10 |
11 | This release includes some substantial internal improvements - most notably a rewritten template parser that is 2x faster, and a refactored reactivity system that makes effect triggering more accurate and efficient. It also packs a number of quality-of-life API improvements, including the stabilization of `defineModel` and a new same-name shorthand when binding props.
12 |
13 | This post provides an overview of the highlighted features in 3.4. For the full list of changes, please consult
14 | [the full changelog on GitHub](https://github.com/vuejs/core/blob/main/CHANGELOG.md#340-2023-12-28).
15 |
16 | ---
17 |
18 | [[TOC]]
19 |
20 | ## Potential Actions Needed
21 |
22 | 1. To fully leverage new features in 3.4, it is recommended to also update the following dependencies when upgrading to 3.4:
23 |
24 | - Volar / vue-tsc@^1.8.27 (**required**)
25 | - @vitejs/plugin-vue@^5.0.0 (if using Vite)
26 | - nuxt@^3.9.0 (if using Nuxt)
27 | - vue-loader@^17.4.0 (if using webpack or vue-cli)
28 |
29 | 2. If using TSX with Vue, check actions needed in [Removed: Global JSX Namespace](#removed-global-jsx-namespace).
30 |
31 | 3. Make sure you are no longer using any deprecated features (if you are, you should have warnings in the console telling you so). They may have been [removed in 3.4](#other-removed-features).
32 |
33 | ## Feature Highlights
34 |
35 | ### 2X Faster Parser and Improved SFC Build Performance
36 |
37 | - Context: [PR#9674](https://github.com/vuejs/core/pull/9674)
38 |
39 | In 3.4, we completely rewrote the template parser. Previously, Vue used a recursive descent parser that relied on many regular expressions and look-ahead searches. The new parser uses a state-machine tokenizer based on the tokenizer in [htmlparser2](https://github.com/fb55/htmlparser2), which iterates through the entire template string only once. The result is a parser that is consistently twice as fast for templates of all sizes. Thanks to our extensive test cases and [ecosystem-ci](https://github.com/vuejs/ecosystem-ci), it is also 100% backwards compatible for Vue end users.
40 |
41 | While integrating the new parser with other parts of the system, we also discovered a few opportunities to further improve the overall SFC compilation performance. The benchmarks show a ~44% improvement when compiling the script and template parts of a Vue SFC while generating source maps, so 3.4 should result in faster builds for most projects using Vue SFCs. However, do note that Vue SFC compilation is only one part of the entire build process in real world projects. The final gain in end-to-end build time will likely be much smaller compared to the isolated benchmarks.
42 |
43 | Outside of Vue core, the new parser will also benefit the performance of Volar / vue-tsc, and community plugins that need to parse Vue SFCs or templates, e.g. Vue Macros.
44 |
45 | ### More Efficient Reactivity System
46 |
47 | **Context: [PR#5912](https://github.com/vuejs/core/pull/5912)**
48 |
49 | 3.4 also ships a substantial refactor of the reactivity system, with the goal of improving re-compute efficiency of computed properties.
50 |
51 | To illustrate what is being improved, let's consider the following scenario:
52 |
53 | ```js
54 | const count = ref(0)
55 | const isEven = computed(() => count.value % 2 === 0)
56 |
57 | watchEffect(() => console.log(isEven.value)) // logs true
58 |
59 | count.value = 2 // logs true again
60 | ```
61 |
62 | Before 3.4, the callback of `watchEffect` will fire every time `count.value` is changed, even if the computed result remains the same. With the post-3.4 optimizations, the callback now only fires if the computed result has actually changed.
63 |
64 | In addition, in 3.4:
65 |
66 | - Multiple computed dep changes only trigger sync effects once.
67 | - Array `shift`, `unshift`, `splice` methods only trigger sync effects once.
68 |
69 | In addition to the gains shown in the [benchmarks](https://github.com/vuejs/core/pull/5912#issuecomment-1748985641), this should reduce unnecessary component re-renders in many scenarios while retaining full backwards compatibility.
70 |
71 | ### `defineModel` is Now Stable
72 |
73 | **Context: [RFC#503](https://github.com/vuejs/rfcs/discussions/503)**
74 |
75 | `defineModel` is a new `
106 |
107 |
108 |
112 |
113 | ```
114 |
115 | **Details: [PR#11404](https://github.com/vuejs/core/pull/11404)**
116 |
117 | ### `data-allow-mismatch`
118 |
119 | In cases where a client value will be inevitably different from its server counterpart (e.g. dates), we can now suppress the resulting hydration mismatch warnings with `data-allow-mismatch` attributes:
120 |
121 | ```vue
122 | {{ data.toLocaleString() }}
123 | ```
124 |
125 | You can also limit what types of mismatches are allowed by providing a value to the attribute, where the possible values are `text`, `children`, `class`, `style`, and `attribute`.
126 |
127 | ## Custom Elements Improvements
128 |
129 | 3.5 fixes many long-standing issues related to the `defineCustomElement()` API, and adds a number of new capabilities for authoring custom elements with Vue:
130 |
131 | - Support app configurations for custom elements via the `configureApp` option.
132 | - Add `useHost()`, `useShadowRoot()`, and `this.$host` APIs for accessing the host element and shadow root of a custom element.
133 | - Support mounting custom elements without Shadow DOM by passing `shadowRoot: false`.
134 | - Support providing a `nonce` option, which will be attached to `