use plain element badges + updated outline frontmatter option

Author: yyx990803

package.json

@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "@vue/repl": "^0.4.9",
-    "@vue/theme": "^0.1.39",
+    "@vue/theme": "^0.1.41",
     "dynamics.js": "^1.1.5",
     "gsap": "^3.9.0",
     "vitepress": "^0.21.5",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 ---
-aside: deep
+outline: deep
 ---
 
 # Vue Contribution Guide

src/about/contribution-guide.md

@@ -1,4 +1,4 @@
-# Releases <Badge text="WIP" />
+# Releases <sup class="vt-badge">WIP</sup>
 
 ## Release Notes
 

src/about/releases.md

@@ -1 +1 @@
-# Vue 2 vs. Vue 3 FAQ <Badge text="WIP" />
+# Vue 2 vs. Vue 3 FAQ <sup class="vt-badge">WIP</sup>

src/about/v2-faq.md

@@ -55,7 +55,8 @@ function parsePageHeaders(link: string) {
     headers = h2s.map((h) =>
       h
         .slice(2)
-        .replace(/<Badge.*/, '')
+        .replace(/<sup class=.*/, '')
+        .replace(/\\</g, '<')
         .replace(/`([^`]+)`/g, '$1')
         .trim()
     )

src/api/api.data.ts

@@ -1,3 +1,7 @@
+---
+pageClass: api
+---
+
 # Built-in Components
 
 :::info Registration and Usage
@@ -297,7 +301,7 @@ Renders its slot content to another part of the DOM.
 
 - **See also:** [Guide - Teleport](/guide/built-ins/teleport.html)
 
-## `<Suspense>` <Badge type="warning" text="experimental" />
+## `<Suspense>` <sup class="vt-badge warning">experimental</sup>
 
 Used for orchestrating nested async dependencies in a component tree.
 

src/api/built-in-components.md

@@ -266,8 +266,8 @@ Dynamically bind one or more attributes, or a component prop to an expression.
 - **Modifiers:**
 
   - `.camel` - transform the kebab-case attribute name into camelCase.
-  - `.prop` - force a binding to be set as a DOM property. <Badge text="3.2+"/>
-  - `.attr` - force a binding to be set as a DOM attribute. <Badge text="3.2+"/>
+  - `.prop` - force a binding to be set as a DOM property. <sup class="vt-badge">3.2+</sup>
+  - `.attr` - force a binding to be set as a DOM attribute. <sup class="vt-badge">3.2+</sup>
 
 - **Usage:**
 
@@ -463,7 +463,7 @@ Render the element and component once only, and skip future updates.
   - [Data Binding Syntax - interpolations](/guide/essentials/template-syntax.html#text)
   - [v-memo](#v-memo)
 
-## v-memo <Badge text="3.2+"/>
+## v-memo <sup class="vt-badge">3.2+</sup>
 
 - **Expects:** `any[]`
 

src/api/built-in-directives.md

@@ -88,7 +88,7 @@ Used for binding [dynamic components](/guide/essentials/component-basics.html#dy
 
 - **Expects:** `string | Component`
 
-- **Usage on native elements** <Badge text="3.1+" />
+- **Usage on native elements** <sup class="vt-badge">3.1+</sup>
 
   When the `is` attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature.
 

src/api/built-in-special-attributes.md

@@ -220,7 +220,7 @@ Registers a hook to be called when an error propagating from a descendent compon
 
   - An `errorCaptured` hook can return `false` to prevent the error from propagating further. This is essentially saying "this error has been handled and should be ignored." It will prevent any additional `errorCaptured` hooks or `app.config.errorHandler` from being invoked for this error.
 
-## onRenderTracked() <Badge type="warning" text="Dev only" />
+## onRenderTracked() <sup class="vt-badge warning">Dev only</sup>
 
 Registers a debug hook to be called when a reactive dependency has been tracked by the component's render effect.
 
@@ -243,7 +243,7 @@ Registers a debug hook to be called when a reactive dependency has been tracked
 
 - **See also:** [Reactivity in Depth](/guide/extras/reactivity-in-depth.html)
 
-## onRenderTriggered() <Badge type="warning" text="Dev only" />
+## onRenderTriggered() <sup class="vt-badge warning">Dev only</sup>
 
 Registers a debug hook to be called when a reactive dependency triggers the component's render effect to be re-run.
 
@@ -297,7 +297,7 @@ Registers a callback to be called after the component instance is removed from t
 
 - **See also:** [Guide - Lifecycle of Cached Instance](/guide/built-ins/keep-alive.html#lifecycle-of-cached-instance)
 
-## onServerPrefetch() <Badge text="SSR only" />
+## onServerPrefetch() <sup class="vt-badge">SSR only</sup>
 
 Registers a async function to be resolved before the component instance is to be rendered on the server.
 

src/api/composition-api-lifecycle.md

@@ -209,7 +209,7 @@ Called when an error propagating from a descendent component has been captured.
 
   - An `errorCaptured` hook can return `false` to prevent the error from propagating further. This is essentially saying "this error has been handled and should be ignored." It will prevent any additional `errorCaptured` hooks or `app.config.errorHandler` from being invoked for this error.
 
-## renderTracked <Badge type="warning" text="Dev only" />
+## renderTracked <sup class="vt-badge warning">Dev only</sup>
 
 Called when a reactive dependency has been tracked by the component's render effect.
 
@@ -230,7 +230,7 @@ Called when a reactive dependency has been tracked by the component's render eff
 
 - **See also:** [Reactivity in Depth](/guide/extras/reactivity-in-depth.html)
 
-## renderTriggered <Badge type="warning" text="Dev only" />
+## renderTriggered <sup class="vt-badge warning">Dev only</sup>
 
 Called when a reactive dependency triggers the component's render effect to be re-run.
 
@@ -286,7 +286,7 @@ Called after the component instance is removed from the DOM as part of a tree ca
 
 - **See also:** [Guide - Lifecycle of Cached Instance](/guide/built-ins/keep-alive.html#lifecycle-of-cached-instance)
 
-## serverPrefetch <Badge text="SSR only" />
+## serverPrefetch <sup class="vt-badge">SSR only</sup>
 
 Async function to be resolved before the component instance is to be rendered on the server.
 

src/api/options-lifecycle.md

@@ -8,7 +8,10 @@ A function that returns the initial reactive state for the component instance.
 
   ```ts
   interface ComponentOptions {
-    data?(this: ComponentPublicInstance, vm: ComponentPublicInstance): object
+    data?(
+      this: ComponentPublicInstance,
+      vm: ComponentPublicInstance
+    ): object
   }
   ```
 
@@ -142,7 +145,10 @@ Declare computed properties to be exposed on the component instance.
     vm: ComponentPublicInstance
   ) => T
 
-  type ComputedSetter<T> = (this: ComponentPublicInstance, value: T) => void
+  type ComputedSetter<T> = (
+    this: ComponentPublicInstance,
+    value: T
+  ) => void
 
   type WritableComputedOptions<T> = {
     get: ComputedGetter<T>
@@ -424,3 +430,40 @@ Declare the custom events emitted by the component.
   ```
 
 * **See also:** [Fallthrough Attributes](/guide/components/attrs.html)
+
+## expose
+
+Declare exposed public properties when the component instance is accessed by a parent via template refs.
+
+- **Type**
+
+  ```ts
+  interface ComponentOptions {
+    expose?: string[]
+  }
+  ```
+
+- **Details**
+
+  By default, a component instance exposes all instance properties to the parent when accessed via `$parent`, `$root`, or template refs. This can be undesirable since a component most likely have internal state or methods that should be kept private to avoid tight coupling.
+
+  The `expose` option expects a list of property name strings. When `expose` is used, only the properties explicitly listed will be exposed on the component's public instance.
+
+  `expose` only affects user-defined properties - it does not filter out built-in component instance properties.
+
+- **Example**
+
+  ```js
+  export default {
+    // only `publicMethod` will be available on the pubic instance
+    expose: ['publicMethod'],
+    methods: {
+      publicMethod() {
+        // ...
+      },
+      privateMethod() {
+        // ...
+      }
+    }
+  }
+  ```

src/api/options-state.md

@@ -230,7 +230,7 @@ In addition, the awaited expression will be automatically compiled in a format t
 `async setup()` must be used in combination with `Suspense`, which is currently still an experimental feature. We plan to finalize and document it in a future release - but if you are curious now, you can refer to its [tests](https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/__tests__/components/Suspense.spec.ts) to see how it works.
 :::
 
-## TypeScript-only Features <Badge type="ts" text="TS" />
+## TypeScript-only Features <sup class="vt-badge ts">TS</sup>
 
 ### Type-only props/emit declarations
 

src/api/sfc-script-setup.md

@@ -1,5 +1,5 @@
 ---
-aside: deep
+outline: deep
 ---
 
 # Performance

src/guide/best-practices/performance.md

@@ -1,5 +1,5 @@
 ---
-aside: deep
+outline: deep
 ---
 
 # Suspense

src/guide/built-ins/suspense.md

@@ -1,5 +1,5 @@
 ---
-aside: deep
+outline: deep
 ---
 
 # Fallthrough Attributes

src/guide/components/attrs.md

@@ -146,7 +146,7 @@ const emit = defineEmits<{
 </script>
 ```
 
-More details: [Typing Component Emits](/guide/typescript/composition-api.html#typing-component-emits) <Badge type="ts" text="TS" />
+More details: [Typing Component Emits](/guide/typescript/composition-api.html#typing-component-emits) <sup class="vt-badge ts">TS</sup>
 
 </div>
 <div class="options-api">
@@ -162,7 +162,7 @@ export default {
 }
 ```
 
-See also: [Typing Component Emits](/guide/typescript/options-api.html#typing-component-emits) <Badge type="ts" text="TS" />
+See also: [Typing Component Emits](/guide/typescript/options-api.html#typing-component-emits) <sup class="vt-badge ts">TS</sup>
 
 </div>
 

src/guide/components/events.md

@@ -92,7 +92,7 @@ This not only documents your component, but will also warn other developers usin
 
 <div class="options-api">
 
-See also: [Typing Component Props](/guide/typescript/options-api.html#typing-component-props) <Badge type="ts" text="TS" />
+See also: [Typing Component Props](/guide/typescript/options-api.html#typing-component-props) <sup class="vt-badge ts">TS</sup>
 
 </div>
 
@@ -109,7 +109,7 @@ defineProps<{
 </script>
 ```
 
-More details: [Typing Component Props](/guide/typescript/composition-api.html#typing-component-props) <Badge type="ts" text="TS" />
+More details: [Typing Component Props](/guide/typescript/composition-api.html#typing-component-props) <sup class="vt-badge ts">TS</sup>
 
 </div>
 

src/guide/components/props.md

@@ -350,7 +350,7 @@ import { myInjectionKey } from './keys.js'
 const injected = inject(myInjectionKey)
 ```
 
-See also: [Typing Provide / Inject](/guide/typescript/composition-api.html#typing-provide-inject) <Badge type="ts" text="TS" />
+See also: [Typing Provide / Inject](/guide/typescript/composition-api.html#typing-provide-inject) <sup class="vt-badge ts">TS</sup>
 
 </div>
 

src/guide/components/provide-inject.md

@@ -219,7 +219,7 @@ const props = defineProps(['title'])
 console.log(props.title)
 ```
 
-See also: [Typing Component Props](/guide/typescript/composition-api.html#typing-component-props) <Badge type="ts" text="TS" />
+See also: [Typing Component Props](/guide/typescript/composition-api.html#typing-component-props) <sup class="vt-badge ts">TS</sup>
 
 If you are not using `<script setup>`, props should be declared using the `props` option, and the props object will be passed to `setup()` as the first argument:
 
@@ -430,7 +430,7 @@ const emit = defineEmits(['enlarge-text'])
 emit('enlarge-text')
 ```
 
-See also: [Typing Component Emits](/guide/typescript/composition-api.html#typing-component-emits) <Badge type="ts" text="TS" />
+See also: [Typing Component Emits](/guide/typescript/composition-api.html#typing-component-emits) <sup class="vt-badge ts">TS</sup>
 
 If you are not using `<script setup>`, you can declare emitted events using the `emits` option. You can access the `emit` function as a property of the setup context (passed to `setup()` as the second argument):
 

src/guide/essentials/component-basics.md

@@ -89,7 +89,7 @@ Try to change the value of the `books` array in the application `data` and you w
 
 You can data-bind to computed properties in templates just like a normal property. Vue is aware that `this.publishedBooksMessage` depends on `this.author.books`, so it will update any bindings that depend on `this.publishedBooksMessage` when `this.author.books` changes.
 
-See also: [Typing Computed Properties](/guide/typescript/options-api.html#typing-computed) <Badge type="ts" text="TS" />
+See also: [Typing Computed Properties](/guide/typescript/options-api.html#typing-computed) <sup class="vt-badge ts">TS</sup>
 
 </div>
 
@@ -126,7 +126,7 @@ Here we have declared a computed property `publishedBooksMessage`. The `computed
 
 A computed property automatically tracks its reactive dependencies. Vue is aware that the computation of `publishedBooksMessage` depends on `author.books`, so it will update any bindings that depend on `publishedBooksMessage` when `author.books` changes.
 
-See also: [Typing Computed](/guide/typescript/composition-api.html#typing-computed) <Badge type="ts" text="TS" />
+See also: [Typing Computed](/guide/typescript/composition-api.html#typing-computed) <sup class="vt-badge ts">TS</sup>
 
 </div>
 

src/guide/essentials/computed.md

@@ -112,12 +112,12 @@ A method handler automatically receives the native DOM Event object that trigger
 
 <div class="composition-api">
 
-See also: [Typing Event Handlers](/guide/typescript/composition-api.html#typing-event-handlers) <Badge type="ts" text="TS" />
+See also: [Typing Event Handlers](/guide/typescript/composition-api.html#typing-event-handlers) <sup class="vt-badge ts">TS</sup>
 
 </div>
 <div class="options-api">
 
-See also: [Typing Event Handlers](/guide/typescript/options-api.html#typing-event-handlers) <Badge type="ts" text="TS" />
+See also: [Typing Event Handlers](/guide/typescript/options-api.html#typing-event-handlers) <sup class="vt-badge ts">TS</sup>
 
 </div>
 

src/guide/essentials/event-handling.md

@@ -1,5 +1,5 @@
 ---
-aside: deep
+outline: deep
 ---
 
 <script setup>

src/guide/essentials/forms.md

@@ -1,5 +1,5 @@
 ---
-aside: deep
+outline: deep
 ---
 
 # Reactivity Fundamentals
@@ -77,7 +77,7 @@ const state = reactive({ count: 0 })
 
 Reactive objects are [JavaScript Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) and behave just like normal objects. The difference is that Vue is able to track the property access and mutations of a reactive object. If you are curious about the details, we explain how Vue's reactivity system works in [Reactivity in Depth](/guide/extras/reactivity-in-depth.html) - but we recommend reading it after you have finished the main guide.
 
-See also: [Typing Reactive](/guide/typescript/composition-api.html#typing-reactive) <Badge type="ts" text="TS" />
+See also: [Typing Reactive](/guide/typescript/composition-api.html#typing-reactive) <sup class="vt-badge ts">TS</sup>
 
 To use reactive state in a component's template, declare and return them from a component's `setup()` function:
 
@@ -388,7 +388,7 @@ count.value++
 console.log(count.value) // 1
 ```
 
-See also: [Typing Refs](/guide/typescript/composition-api.html#typing-ref) <Badge type="ts" text="TS" />
+See also: [Typing Refs](/guide/typescript/composition-api.html#typing-ref) <sup class="vt-badge ts">TS</sup>
 
 Similar to properties on a reactive object, the `.value` property of a ref is reactive. In addition, when holding object types, ref automatically converts its `.value` with `reactive()`.
 
@@ -555,7 +555,7 @@ export default {
 
 <div class="composition-api">
 
-## Reactivity Transform <Badge type="warning" text="experimental" /> \*\*
+## Reactivity Transform <sup class="vt-badge warning">experimental</sup> \*\*
 
 Having to use `.value` with refs is a drawback imposed by the language constraints of JavaScript. However, with compile-time transforms we can improve the ergonomics by automatically appending `.value` in appropriate locations. Vue provides a compile-time transform that allows us to write the ealier "counter" example like this: