├── .github
    ├── renovate.json
    └── workflows
    │   └── ci.yml
├── .gitignore
├── .node-version
├── README.md
├── fixtures
    ├── UserSettings.tsx
    ├── parser.ts
    ├── renderer.ts
    └── table.tsx
├── memory.sh
├── output
    └── .gitkeep
├── package.json
├── pnpm-lock.yaml
├── src
    ├── id.bench.ts
    ├── memory
    │   ├── babel.js
    │   ├── oxc.js
    │   └── swc.js
    └── transform.bench.ts
└── tsconfig.json


/.github/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 |   "extends": ["github>Boshen/renovate"],
4 |   "rangeStrategy": "bump",
5 |   "schedule": ["at any time"]
6 | }
7 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   workflow_dispatch:
 5 |   pull_request:
 6 |     types: [opened, synchronize]
 7 |   push:
 8 |     branches:
 9 |       - main
10 | 
11 | permissions: {}
12 | 
13 | concurrency:
14 |   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.sha }}
15 |   cancel-in-progress: ${{ github.ref_name != 'main' }}
16 | 
17 | jobs:
18 |   benchmark:
19 |     name: Benchmark
20 |     runs-on: ubuntu-latest
21 |     steps:
22 |       - uses: taiki-e/checkout-action@b13d20b7cda4e2f325ef19895128f7ff735c0b3d # v1.3.1
23 |       - uses: oxc-project/setup-node@fdbf0dfd334c4e6d56ceeb77d91c76339c2a0885 # v1.0.4
24 |       - run: pnpm install
25 |       - run: pnpm run bench id
26 |       - run: pnpm run bench transform
27 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | output/*.js
3 | .idea/
4 | 


--------------------------------------------------------------------------------
/.node-version:
--------------------------------------------------------------------------------
1 | lts/*
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Bench Oxc, Swc, and Babel Transformer
  2 | 
  3 | ## Summary
  4 | 
  5 | - Transform: Oxc is 3x - 5x faster than SWC, uses 20% less memory, and has smaller package size (2 MB vs SWC's 37 MB).
  6 | - Transform: Oxc is 20x - 50x faster than Babel, uses 70% less memory, and is 19 MB smaller, with only 2 npm packages to install vs Babel's 170.
  7 | - React development + React Refresh: Oxc is 5x faster than SWC, 50x faster than Babel.
  8 | - TS isolated declarations `.d.ts` emit: Oxc is 40x faster than TSC on typical files, 20x faster on larger files.
  9 | 
 10 | ## Transform / Transpile
 11 | 
 12 | Oxc is 3x - 5x faster than swc, and 20x - 50x faster than Babel.
 13 | 
 14 | React development + refresh is 6x faster than swc and 20x - 70x faster than Babel.
 15 | 
 16 | ### GitHub Actions `ubuntu-latest`
 17 | 
 18 | ```
 19 |   oxc - src/transform.bench.ts > UserSettings.tsx (sourceMap: false, reactDev: false, target: esnext)
 20 |     4.18x faster than swc
 21 |     49.04x faster than babel
 22 |   oxc - src/transform.bench.ts > UserSettings.tsx (sourceMap: false, reactDev: false, target: es2015)
 23 |     5.71x faster than swc
 24 |     46.49x faster than babel
 25 |   oxc - src/transform.bench.ts > UserSettings.tsx (sourceMap: true, reactDev: false, target: esnext)
 26 |     4.23x faster than swc
 27 |     40.18x faster than babel
 28 |   oxc - src/transform.bench.ts > UserSettings.tsx (sourceMap: false, reactDev: true, target: esnext)
 29 |     5.41x faster than swc
 30 |     64.39x faster than babel
 31 |   oxc - src/transform.bench.ts > UserSettings.tsx (sourceMap: true, reactDev: true, target: esnext)
 32 |     5.17x faster than swc
 33 |     53.43x faster than babel
 34 |   oxc - src/transform.bench.ts > parser.ts (sourceMap: false, reactDev: false, target: esnext)
 35 |     3.13x faster than swc
 36 |     34.59x faster than babel
 37 |   oxc - src/transform.bench.ts > parser.ts (sourceMap: false, reactDev: false, target: es2015)
 38 |     3.51x faster than swc
 39 |     31.86x faster than babel
 40 |   oxc - src/transform.bench.ts > parser.ts (sourceMap: true, reactDev: false, target: esnext)
 41 |     3.03x faster than swc
 42 |     26.98x faster than babel
 43 |   oxc - src/transform.bench.ts > renderer.ts (sourceMap: false, reactDev: false, target: esnext)
 44 |     3.21x faster than swc
 45 |     23.76x faster than babel
 46 |   oxc - src/transform.bench.ts > renderer.ts (sourceMap: false, reactDev: false, target: es2015)
 47 |     3.62x faster than swc
 48 |     22.93x faster than babel
 49 |   oxc - src/transform.bench.ts > renderer.ts (sourceMap: true, reactDev: false, target: esnext)
 50 |     3.11x faster than swc
 51 |     18.77x faster than babel
 52 |   oxc - src/transform.bench.ts > table.tsx (sourceMap: false, reactDev: false, target: esnext)
 53 |     3.74x faster than swc
 54 |     30.57x faster than babel
 55 |   oxc - src/transform.bench.ts > table.tsx (sourceMap: false, reactDev: false, target: es2015)
 56 |     4.32x faster than swc
 57 |     30.96x faster than babel
 58 |   oxc - src/transform.bench.ts > table.tsx (sourceMap: true, reactDev: false, target: esnext)
 59 |     3.59x faster than swc
 60 |     26.30x faster than babel
 61 |   oxc - src/transform.bench.ts > table.tsx (sourceMap: false, reactDev: true, target: esnext)
 62 |     4.71x faster than swc
 63 |     46.03x faster than babel
 64 |   oxc - src/transform.bench.ts > table.tsx (sourceMap: true, reactDev: true, target: esnext)
 65 |     4.45x faster than swc
 66 |     37.05x faster than babel
 67 | ```
 68 | 
 69 | ## Isolated Declarations DTS Emit
 70 | 
 71 | Oxc is 45x faster than `tsc` on ordinary files, and 20x faster on larger files.
 72 | 
 73 | ### GitHub Actions `ubuntu-latest`
 74 | 
 75 | ```
 76 | oxc - src/id.bench.ts > UserSettings.tsx
 77 |   44.45x faster than tsc
 78 | 
 79 | oxc - src/id.bench.ts > parser.ts
 80 |   21.16x faster than tsc
 81 | 
 82 | oxc - src/id.bench.ts > renderer.ts
 83 |   21.70x faster than tsc
 84 | 
 85 | oxc - src/id.bench.ts > table.tsx
 86 |   7.99x faster than tsc
 87 | ```
 88 | 
 89 | 
 90 | ### Memory Usage
 91 | 
 92 | On `parser.ts` by using `/usr/bin/time -alh node`:
 93 | 
 94 | |       | Max RSS |
 95 | | ---   | ------- |
 96 | | oxc   | 57 MB   |
 97 | | swc   | 74 MB   |
 98 | | babel | 180 MB  |
 99 | 
100 | ## Package size
101 | 
102 | For package download size, oxc downloads 2 packages for around a total of 2MB.
103 | 
104 | | Package                                                                                  | Size                                                                                       |
105 | | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
106 | | `@oxc-transform/binding-darwin-arm64`                                                    | [1.95 MB](https://www.npmjs.com/package/@oxc-transform/binding-darwin-arm64)                |
107 | | `@swc/core-darwin-arm64`                                                                 | [37.5 MB](https://www.npmjs.com/package/@swc/core-darwin-arm64)                             |
108 | | `@babel/core` + `@babel/preset-env` + `@babel/preset-react` + `@babel/preset-typescript` | [21MB and 170 packages](https://www.npmjs.com/package/@oxc-transform/binding-darwin-arm64) |
109 | 
110 | ## Fixtures
111 | 
112 | * [TypeScript/src/compiler/parser.ts](https://github.com/microsoft/TypeScript/blob/3ad0f752482f5e846dc35a69572ccb43311826c0/src/compiler/parser.ts) - an atypical large file with 10777 lines.
113 | * [vuejs/core/packages/runtime-core/src/renderer.ts](https://github.com/vuejs/core/blob/cb34b28a4a9bf868be4785b001c526163eda342e/packages/runtime-core/src/renderer.ts) - somewhat large library file with 2550 lines.
114 | * [AFFiNE/packages/frontend/core/src/components/affine/page-properties/table.tsx](https://github.com/toeverything/AFFiNE/blob/a9b29d24f1f6e5563e43a11b5cbcfb30c9981d25/packages/frontend/core/src/components/affine/page-properties/table.tsx) - a tsx file with 1118 lines.
115 | * [cal.com/apps/web/components/getting-started/steps-views/UserSettings.tsx](https://github.com/calcom/cal.com/blob/20729b3a4e62c52f49419d2c3b30225f0c7a5936/apps/web/components/getting-started/steps-views/UserSettings.tsx) - a typical 124 lines of tsx code.
116 | 
117 | ### NOTE:
118 | 
119 | Babel's code generator deoptimised the styling for large files and reports:
120 | 
121 | > [BABEL] Note: The code generator has deoptimised the styling of parser.ts as it exceeds the max of 500KB.
122 | 
123 | I intended to benchmark `checker.ts` from tsc, but Babel failed to parse:
124 | 
125 | ```
126 | TypeError: Duplicate declaration "SymbolLinks"
127 |   1425 | }));
128 |   1426 |
129 | > 1427 | const SymbolLinks = class implements SymbolLinks {
130 |        |       ^^^^^^^^^^^
131 |   1428 |     declare _symbolLinksBrand: any;
132 |   1429 | };
133 |   1430 |
134 | ```
135 | 


--------------------------------------------------------------------------------
/fixtures/UserSettings.tsx:
--------------------------------------------------------------------------------
  1 | import { zodResolver } from "@hookform/resolvers/zod";
  2 | import { useEffect } from "react";
  3 | import { useForm } from "react-hook-form";
  4 | import { z } from "zod";
  5 | 
  6 | import dayjs from "@calcom/dayjs";
  7 | import { useTimePreferences } from "@calcom/features/bookings/lib";
  8 | import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
  9 | import { useLocale } from "@calcom/lib/hooks/useLocale";
 10 | import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 11 | import { trpc } from "@calcom/trpc/react";
 12 | import { Button, TimezoneSelect, Icon, Input } from "@calcom/ui";
 13 | 
 14 | import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 15 | 
 16 | interface IUserSettingsProps {
 17 |   nextStep: () => void;
 18 |   hideUsername?: boolean;
 19 | }
 20 | 
 21 | const UserSettings = (props: IUserSettingsProps) => {
 22 |   const { nextStep } = props;
 23 |   const [user] = trpc.viewer.me.useSuspenseQuery();
 24 |   const { t } = useLocale();
 25 |   const { setTimezone: setSelectedTimeZone, timezone: selectedTimeZone } = useTimePreferences();
 26 |   const telemetry = useTelemetry();
 27 |   const userSettingsSchema = z.object({
 28 |     name: z
 29 |       .string()
 30 |       .min(1)
 31 |       .max(FULL_NAME_LENGTH_MAX_LIMIT, {
 32 |         message: t("max_limit_allowed_hint", { limit: FULL_NAME_LENGTH_MAX_LIMIT }),
 33 |       }),
 34 |   });
 35 |   const {
 36 |     register,
 37 |     handleSubmit,
 38 |     formState: { errors },
 39 |   } = useForm<z.infer<typeof userSettingsSchema>>({
 40 |     defaultValues: {
 41 |       name: user?.name || "",
 42 |     },
 43 |     reValidateMode: "onChange",
 44 |     resolver: zodResolver(userSettingsSchema),
 45 |   });
 46 | 
 47 |   useEffect(() => {
 48 |     telemetry.event(telemetryEventTypes.onboardingStarted);
 49 |   }, [telemetry]);
 50 | 
 51 |   const utils = trpc.useUtils();
 52 |   const onSuccess = async () => {
 53 |     await utils.viewer.me.invalidate();
 54 |     nextStep();
 55 |   };
 56 |   const mutation = trpc.viewer.updateProfile.useMutation({
 57 |     onSuccess: onSuccess,
 58 |   });
 59 | 
 60 |   const onSubmit = handleSubmit((data) => {
 61 |     mutation.mutate({
 62 |       name: data.name,
 63 |       timeZone: selectedTimeZone,
 64 |     });
 65 |   });
 66 | 
 67 |   return (
 68 |     <form onSubmit={onSubmit}>
 69 |       <div className="space-y-6">
 70 |         {/* Username textfield: when not coming from signup */}
 71 |         {!props.hideUsername && <UsernameAvailabilityField />}
 72 | 
 73 |         {/* Full name textfield */}
 74 |         <div className="w-full">
 75 |           <label htmlFor="name" className="text-default mb-2 block text-sm font-medium">
 76 |             {t("full_name")}
 77 |           </label>
 78 |           <Input
 79 |             {...register("name", {
 80 |               required: true,
 81 |             })}
 82 |             id="name"
 83 |             name="name"
 84 |             type="text"
 85 |             autoComplete="off"
 86 |             autoCorrect="off"
 87 |           />
 88 |           {errors.name && (
 89 |             <p data-testid="required" className="py-2 text-xs text-red-500">
 90 |               {errors.name.message}
 91 |             </p>
 92 |           )}
 93 |         </div>
 94 |         {/* Timezone select field */}
 95 |         <div className="w-full">
 96 |           <label htmlFor="timeZone" className="text-default block text-sm font-medium">
 97 |             {t("timezone")}
 98 |           </label>
 99 | 
100 |           <TimezoneSelect
101 |             id="timeZone"
102 |             value={selectedTimeZone}
103 |             onChange={({ value }) => setSelectedTimeZone(value)}
104 |             className="mt-2 w-full rounded-md text-sm"
105 |           />
106 | 
107 |           <p className="text-subtle mt-3 flex flex-row font-sans text-xs leading-tight">
108 |             {t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
109 |           </p>
110 |         </div>
111 |       </div>
112 |       <Button
113 |         type="submit"
114 |         className="mt-8 flex w-full flex-row justify-center"
115 |         loading={mutation.isPending}
116 |         disabled={mutation.isPending}>
117 |         {t("next_step_text")}
118 |         <Icon name="arrow-right" className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
119 |       </Button>
120 |     </form>
121 |   );
122 | };
123 | 
124 | export { UserSettings };
125 | 


--------------------------------------------------------------------------------
/fixtures/renderer.ts:
--------------------------------------------------------------------------------
   1 | import {
   2 |   Comment,
   3 |   Fragment,
   4 |   Static,
   5 |   Text,
   6 |   type VNode,
   7 |   type VNodeArrayChildren,
   8 |   type VNodeHook,
   9 |   type VNodeProps,
  10 |   cloneIfMounted,
  11 |   createVNode,
  12 |   invokeVNodeHook,
  13 |   isSameVNodeType,
  14 |   normalizeVNode,
  15 | } from './vnode'
  16 | import {
  17 |   type ComponentInternalInstance,
  18 |   type ComponentOptions,
  19 |   type Data,
  20 |   type LifecycleHook,
  21 |   createComponentInstance,
  22 |   setupComponent,
  23 | } from './component'
  24 | import {
  25 |   filterSingleRoot,
  26 |   renderComponentRoot,
  27 |   shouldUpdateComponent,
  28 |   updateHOCHostEl,
  29 | } from './componentRenderUtils'
  30 | import {
  31 |   EMPTY_ARR,
  32 |   EMPTY_OBJ,
  33 |   NOOP,
  34 |   PatchFlags,
  35 |   ShapeFlags,
  36 |   def,
  37 |   getGlobalThis,
  38 |   invokeArrayFns,
  39 |   isArray,
  40 |   isReservedProp,
  41 | } from '@vue/shared'
  42 | import {
  43 |   type SchedulerJob,
  44 |   SchedulerJobFlags,
  45 |   type SchedulerJobs,
  46 |   flushPostFlushCbs,
  47 |   flushPreFlushCbs,
  48 |   queueJob,
  49 |   queuePostFlushCb,
  50 | } from './scheduler'
  51 | import {
  52 |   EffectFlags,
  53 |   ReactiveEffect,
  54 |   pauseTracking,
  55 |   resetTracking,
  56 | } from '@vue/reactivity'
  57 | import { updateProps } from './componentProps'
  58 | import { updateSlots } from './componentSlots'
  59 | import { popWarningContext, pushWarningContext, warn } from './warning'
  60 | import { type CreateAppFunction, createAppAPI } from './apiCreateApp'
  61 | import { setRef } from './rendererTemplateRef'
  62 | import {
  63 |   type SuspenseBoundary,
  64 |   type SuspenseImpl,
  65 |   isSuspense,
  66 |   queueEffectWithSuspense,
  67 | } from './components/Suspense'
  68 | import {
  69 |   TeleportEndKey,
  70 |   type TeleportImpl,
  71 |   type TeleportVNode,
  72 | } from './components/Teleport'
  73 | import { type KeepAliveContext, isKeepAlive } from './components/KeepAlive'
  74 | import { isHmrUpdating, registerHMR, unregisterHMR } from './hmr'
  75 | import { type RootHydrateFunction, createHydrationFunctions } from './hydration'
  76 | import { invokeDirectiveHook } from './directives'
  77 | import { endMeasure, startMeasure } from './profiling'
  78 | import {
  79 |   devtoolsComponentAdded,
  80 |   devtoolsComponentRemoved,
  81 |   devtoolsComponentUpdated,
  82 |   setDevtoolsHook,
  83 | } from './devtools'
  84 | import { initFeatureFlags } from './featureFlags'
  85 | import { isAsyncWrapper } from './apiAsyncComponent'
  86 | import { isCompatEnabled } from './compat/compatConfig'
  87 | import { DeprecationTypes } from './compat/compatConfig'
  88 | import type { TransitionHooks } from './components/BaseTransition'
  89 | 
  90 | export interface Renderer<HostElement = RendererElement> {
  91 |   render: RootRenderFunction<HostElement>
  92 |   createApp: CreateAppFunction<HostElement>
  93 | }
  94 | 
  95 | export interface HydrationRenderer extends Renderer<Element | ShadowRoot> {
  96 |   hydrate: RootHydrateFunction
  97 | }
  98 | 
  99 | export type ElementNamespace = 'svg' | 'mathml' | undefined
 100 | 
 101 | export type RootRenderFunction<HostElement = RendererElement> = (
 102 |   vnode: VNode | null,
 103 |   container: HostElement,
 104 |   namespace?: ElementNamespace,
 105 | ) => void
 106 | 
 107 | export interface RendererOptions<
 108 |   HostNode = RendererNode,
 109 |   HostElement = RendererElement,
 110 | > {
 111 |   patchProp(
 112 |     el: HostElement,
 113 |     key: string,
 114 |     prevValue: any,
 115 |     nextValue: any,
 116 |     namespace?: ElementNamespace,
 117 |     parentComponent?: ComponentInternalInstance | null,
 118 |   ): void
 119 |   insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
 120 |   remove(el: HostNode): void
 121 |   createElement(
 122 |     type: string,
 123 |     namespace?: ElementNamespace,
 124 |     isCustomizedBuiltIn?: string,
 125 |     vnodeProps?: (VNodeProps & { [key: string]: any }) | null,
 126 |   ): HostElement
 127 |   createText(text: string): HostNode
 128 |   createComment(text: string): HostNode
 129 |   setText(node: HostNode, text: string): void
 130 |   setElementText(node: HostElement, text: string): void
 131 |   parentNode(node: HostNode): HostElement | null
 132 |   nextSibling(node: HostNode): HostNode | null
 133 |   querySelector?(selector: string): HostElement | null
 134 |   setScopeId?(el: HostElement, id: string): void
 135 |   cloneNode?(node: HostNode): HostNode
 136 |   insertStaticContent?(
 137 |     content: string,
 138 |     parent: HostElement,
 139 |     anchor: HostNode | null,
 140 |     namespace: ElementNamespace,
 141 |     start?: HostNode | null,
 142 |     end?: HostNode | null,
 143 |   ): [HostNode, HostNode]
 144 | }
 145 | 
 146 | // Renderer Node can technically be any object in the context of core renderer
 147 | // logic - they are never directly operated on and always passed to the node op
 148 | // functions provided via options, so the internal constraint is really just
 149 | // a generic object.
 150 | export interface RendererNode {
 151 |   [key: string | symbol]: any
 152 | }
 153 | 
 154 | export interface RendererElement extends RendererNode {}
 155 | 
 156 | // An object exposing the internals of a renderer, passed to tree-shakeable
 157 | // features so that they can be decoupled from this file. Keys are shortened
 158 | // to optimize bundle size.
 159 | export interface RendererInternals<
 160 |   HostNode = RendererNode,
 161 |   HostElement = RendererElement,
 162 | > {
 163 |   p: PatchFn
 164 |   um: UnmountFn
 165 |   r: RemoveFn
 166 |   m: MoveFn
 167 |   mt: MountComponentFn
 168 |   mc: MountChildrenFn
 169 |   pc: PatchChildrenFn
 170 |   pbc: PatchBlockChildrenFn
 171 |   n: NextFn
 172 |   o: RendererOptions<HostNode, HostElement>
 173 | }
 174 | 
 175 | // These functions are created inside a closure and therefore their types cannot
 176 | // be directly exported. In order to avoid maintaining function signatures in
 177 | // two places, we declare them once here and use them inside the closure.
 178 | type PatchFn = (
 179 |   n1: VNode | null, // null means this is a mount
 180 |   n2: VNode,
 181 |   container: RendererElement,
 182 |   anchor?: RendererNode | null,
 183 |   parentComponent?: ComponentInternalInstance | null,
 184 |   parentSuspense?: SuspenseBoundary | null,
 185 |   namespace?: ElementNamespace,
 186 |   slotScopeIds?: string[] | null,
 187 |   optimized?: boolean,
 188 | ) => void
 189 | 
 190 | type MountChildrenFn = (
 191 |   children: VNodeArrayChildren,
 192 |   container: RendererElement,
 193 |   anchor: RendererNode | null,
 194 |   parentComponent: ComponentInternalInstance | null,
 195 |   parentSuspense: SuspenseBoundary | null,
 196 |   namespace: ElementNamespace,
 197 |   slotScopeIds: string[] | null,
 198 |   optimized: boolean,
 199 |   start?: number,
 200 | ) => void
 201 | 
 202 | type PatchChildrenFn = (
 203 |   n1: VNode | null,
 204 |   n2: VNode,
 205 |   container: RendererElement,
 206 |   anchor: RendererNode | null,
 207 |   parentComponent: ComponentInternalInstance | null,
 208 |   parentSuspense: SuspenseBoundary | null,
 209 |   namespace: ElementNamespace,
 210 |   slotScopeIds: string[] | null,
 211 |   optimized: boolean,
 212 | ) => void
 213 | 
 214 | type PatchBlockChildrenFn = (
 215 |   oldChildren: VNode[],
 216 |   newChildren: VNode[],
 217 |   fallbackContainer: RendererElement,
 218 |   parentComponent: ComponentInternalInstance | null,
 219 |   parentSuspense: SuspenseBoundary | null,
 220 |   namespace: ElementNamespace,
 221 |   slotScopeIds: string[] | null,
 222 | ) => void
 223 | 
 224 | type MoveFn = (
 225 |   vnode: VNode,
 226 |   container: RendererElement,
 227 |   anchor: RendererNode | null,
 228 |   type: MoveType,
 229 |   parentSuspense?: SuspenseBoundary | null,
 230 | ) => void
 231 | 
 232 | type NextFn = (vnode: VNode) => RendererNode | null
 233 | 
 234 | type UnmountFn = (
 235 |   vnode: VNode,
 236 |   parentComponent: ComponentInternalInstance | null,
 237 |   parentSuspense: SuspenseBoundary | null,
 238 |   doRemove?: boolean,
 239 |   optimized?: boolean,
 240 | ) => void
 241 | 
 242 | type RemoveFn = (vnode: VNode) => void
 243 | 
 244 | type UnmountChildrenFn = (
 245 |   children: VNode[],
 246 |   parentComponent: ComponentInternalInstance | null,
 247 |   parentSuspense: SuspenseBoundary | null,
 248 |   doRemove?: boolean,
 249 |   optimized?: boolean,
 250 |   start?: number,
 251 | ) => void
 252 | 
 253 | export type MountComponentFn = (
 254 |   initialVNode: VNode,
 255 |   container: RendererElement,
 256 |   anchor: RendererNode | null,
 257 |   parentComponent: ComponentInternalInstance | null,
 258 |   parentSuspense: SuspenseBoundary | null,
 259 |   namespace: ElementNamespace,
 260 |   optimized: boolean,
 261 | ) => void
 262 | 
 263 | type ProcessTextOrCommentFn = (
 264 |   n1: VNode | null,
 265 |   n2: VNode,
 266 |   container: RendererElement,
 267 |   anchor: RendererNode | null,
 268 | ) => void
 269 | 
 270 | export type SetupRenderEffectFn = (
 271 |   instance: ComponentInternalInstance,
 272 |   initialVNode: VNode,
 273 |   container: RendererElement,
 274 |   anchor: RendererNode | null,
 275 |   parentSuspense: SuspenseBoundary | null,
 276 |   namespace: ElementNamespace,
 277 |   optimized: boolean,
 278 | ) => void
 279 | 
 280 | export enum MoveType {
 281 |   ENTER,
 282 |   LEAVE,
 283 |   REORDER,
 284 | }
 285 | 
 286 | export const queuePostRenderEffect: (
 287 |   fn: SchedulerJobs,
 288 |   suspense: SuspenseBoundary | null,
 289 | ) => void = __FEATURE_SUSPENSE__
 290 |   ? __TEST__
 291 |     ? // vitest can't seem to handle eager circular dependency
 292 |       (fn: Function | Function[], suspense: SuspenseBoundary | null) =>
 293 |         queueEffectWithSuspense(fn, suspense)
 294 |     : queueEffectWithSuspense
 295 |   : queuePostFlushCb
 296 | 
 297 | /**
 298 |  * The createRenderer function accepts two generic arguments:
 299 |  * HostNode and HostElement, corresponding to Node and Element types in the
 300 |  * host environment. For example, for runtime-dom, HostNode would be the DOM
 301 |  * `Node` interface and HostElement would be the DOM `Element` interface.
 302 |  *
 303 |  * Custom renderers can pass in the platform specific types like this:
 304 |  *
 305 |  * ``` js
 306 |  * const { render, createApp } = createRenderer<Node, Element>({
 307 |  *   patchProp,
 308 |  *   ...nodeOps
 309 |  * })
 310 |  * ```
 311 |  */
 312 | export function createRenderer<
 313 |   HostNode = RendererNode,
 314 |   HostElement = RendererElement,
 315 | >(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement> {
 316 |   return baseCreateRenderer<HostNode, HostElement>(options)
 317 | }
 318 | 
 319 | // Separate API for creating hydration-enabled renderer.
 320 | // Hydration logic is only used when calling this function, making it
 321 | // tree-shakable.
 322 | export function createHydrationRenderer(
 323 |   options: RendererOptions<Node, Element>,
 324 | ): HydrationRenderer {
 325 |   return baseCreateRenderer(options, createHydrationFunctions)
 326 | }
 327 | 
 328 | // overload 1: no hydration
 329 | function baseCreateRenderer<
 330 |   HostNode = RendererNode,
 331 |   HostElement = RendererElement,
 332 | >(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement>
 333 | 
 334 | // overload 2: with hydration
 335 | function baseCreateRenderer(
 336 |   options: RendererOptions<Node, Element>,
 337 |   createHydrationFns: typeof createHydrationFunctions,
 338 | ): HydrationRenderer
 339 | 
 340 | // implementation
 341 | function baseCreateRenderer(
 342 |   options: RendererOptions,
 343 |   createHydrationFns?: typeof createHydrationFunctions,
 344 | ): any {
 345 |   // compile-time feature flags check
 346 |   if (__ESM_BUNDLER__ && !__TEST__) {
 347 |     initFeatureFlags()
 348 |   }
 349 | 
 350 |   const target = getGlobalThis()
 351 |   target.__VUE__ = true
 352 |   if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
 353 |     setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, target)
 354 |   }
 355 | 
 356 |   const {
 357 |     insert: hostInsert,
 358 |     remove: hostRemove,
 359 |     patchProp: hostPatchProp,
 360 |     createElement: hostCreateElement,
 361 |     createText: hostCreateText,
 362 |     createComment: hostCreateComment,
 363 |     setText: hostSetText,
 364 |     setElementText: hostSetElementText,
 365 |     parentNode: hostParentNode,
 366 |     nextSibling: hostNextSibling,
 367 |     setScopeId: hostSetScopeId = NOOP,
 368 |     insertStaticContent: hostInsertStaticContent,
 369 |   } = options
 370 | 
 371 |   // Note: functions inside this closure should use `const xxx = () => {}`
 372 |   // style in order to prevent being inlined by minifiers.
 373 |   const patch: PatchFn = (
 374 |     n1,
 375 |     n2,
 376 |     container,
 377 |     anchor = null,
 378 |     parentComponent = null,
 379 |     parentSuspense = null,
 380 |     namespace = undefined,
 381 |     slotScopeIds = null,
 382 |     optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren,
 383 |   ) => {
 384 |     if (n1 === n2) {
 385 |       return
 386 |     }
 387 | 
 388 |     // patching & not same type, unmount old tree
 389 |     if (n1 && !isSameVNodeType(n1, n2)) {
 390 |       anchor = getNextHostNode(n1)
 391 |       unmount(n1, parentComponent, parentSuspense, true)
 392 |       n1 = null
 393 |     }
 394 | 
 395 |     if (n2.patchFlag === PatchFlags.BAIL) {
 396 |       optimized = false
 397 |       n2.dynamicChildren = null
 398 |     }
 399 | 
 400 |     const { type, ref, shapeFlag } = n2
 401 |     switch (type) {
 402 |       case Text:
 403 |         processText(n1, n2, container, anchor)
 404 |         break
 405 |       case Comment:
 406 |         processCommentNode(n1, n2, container, anchor)
 407 |         break
 408 |       case Static:
 409 |         if (n1 == null) {
 410 |           mountStaticNode(n2, container, anchor, namespace)
 411 |         } else if (__DEV__) {
 412 |           patchStaticNode(n1, n2, container, namespace)
 413 |         }
 414 |         break
 415 |       case Fragment:
 416 |         processFragment(
 417 |           n1,
 418 |           n2,
 419 |           container,
 420 |           anchor,
 421 |           parentComponent,
 422 |           parentSuspense,
 423 |           namespace,
 424 |           slotScopeIds,
 425 |           optimized,
 426 |         )
 427 |         break
 428 |       default:
 429 |         if (shapeFlag & ShapeFlags.ELEMENT) {
 430 |           processElement(
 431 |             n1,
 432 |             n2,
 433 |             container,
 434 |             anchor,
 435 |             parentComponent,
 436 |             parentSuspense,
 437 |             namespace,
 438 |             slotScopeIds,
 439 |             optimized,
 440 |           )
 441 |         } else if (shapeFlag & ShapeFlags.COMPONENT) {
 442 |           processComponent(
 443 |             n1,
 444 |             n2,
 445 |             container,
 446 |             anchor,
 447 |             parentComponent,
 448 |             parentSuspense,
 449 |             namespace,
 450 |             slotScopeIds,
 451 |             optimized,
 452 |           )
 453 |         } else if (shapeFlag & ShapeFlags.TELEPORT) {
 454 |           ;(type as typeof TeleportImpl).process(
 455 |             n1 as TeleportVNode,
 456 |             n2 as TeleportVNode,
 457 |             container,
 458 |             anchor,
 459 |             parentComponent,
 460 |             parentSuspense,
 461 |             namespace,
 462 |             slotScopeIds,
 463 |             optimized,
 464 |             internals,
 465 |           )
 466 |         } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
 467 |           ;(type as typeof SuspenseImpl).process(
 468 |             n1,
 469 |             n2,
 470 |             container,
 471 |             anchor,
 472 |             parentComponent,
 473 |             parentSuspense,
 474 |             namespace,
 475 |             slotScopeIds,
 476 |             optimized,
 477 |             internals,
 478 |           )
 479 |         } else if (__DEV__) {
 480 |           warn('Invalid VNode type:', type, `(${typeof type})`)
 481 |         }
 482 |     }
 483 | 
 484 |     // set ref
 485 |     if (ref != null && parentComponent) {
 486 |       setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
 487 |     }
 488 |   }
 489 | 
 490 |   const processText: ProcessTextOrCommentFn = (n1, n2, container, anchor) => {
 491 |     if (n1 == null) {
 492 |       hostInsert(
 493 |         (n2.el = hostCreateText(n2.children as string)),
 494 |         container,
 495 |         anchor,
 496 |       )
 497 |     } else {
 498 |       const el = (n2.el = n1.el!)
 499 |       if (n2.children !== n1.children) {
 500 |         hostSetText(el, n2.children as string)
 501 |       }
 502 |     }
 503 |   }
 504 | 
 505 |   const processCommentNode: ProcessTextOrCommentFn = (
 506 |     n1,
 507 |     n2,
 508 |     container,
 509 |     anchor,
 510 |   ) => {
 511 |     if (n1 == null) {
 512 |       hostInsert(
 513 |         (n2.el = hostCreateComment((n2.children as string) || '')),
 514 |         container,
 515 |         anchor,
 516 |       )
 517 |     } else {
 518 |       // there's no support for dynamic comments
 519 |       n2.el = n1.el
 520 |     }
 521 |   }
 522 | 
 523 |   const mountStaticNode = (
 524 |     n2: VNode,
 525 |     container: RendererElement,
 526 |     anchor: RendererNode | null,
 527 |     namespace: ElementNamespace,
 528 |   ) => {
 529 |     // static nodes are only present when used with compiler-dom/runtime-dom
 530 |     // which guarantees presence of hostInsertStaticContent.
 531 |     ;[n2.el, n2.anchor] = hostInsertStaticContent!(
 532 |       n2.children as string,
 533 |       container,
 534 |       anchor,
 535 |       namespace,
 536 |       n2.el,
 537 |       n2.anchor,
 538 |     )
 539 |   }
 540 | 
 541 |   /**
 542 |    * Dev / HMR only
 543 |    */
 544 |   const patchStaticNode = (
 545 |     n1: VNode,
 546 |     n2: VNode,
 547 |     container: RendererElement,
 548 |     namespace: ElementNamespace,
 549 |   ) => {
 550 |     // static nodes are only patched during dev for HMR
 551 |     if (n2.children !== n1.children) {
 552 |       const anchor = hostNextSibling(n1.anchor!)
 553 |       // remove existing
 554 |       removeStaticNode(n1)
 555 |       // insert new
 556 |       ;[n2.el, n2.anchor] = hostInsertStaticContent!(
 557 |         n2.children as string,
 558 |         container,
 559 |         anchor,
 560 |         namespace,
 561 |       )
 562 |     } else {
 563 |       n2.el = n1.el
 564 |       n2.anchor = n1.anchor
 565 |     }
 566 |   }
 567 | 
 568 |   const moveStaticNode = (
 569 |     { el, anchor }: VNode,
 570 |     container: RendererElement,
 571 |     nextSibling: RendererNode | null,
 572 |   ) => {
 573 |     let next
 574 |     while (el && el !== anchor) {
 575 |       next = hostNextSibling(el)
 576 |       hostInsert(el, container, nextSibling)
 577 |       el = next
 578 |     }
 579 |     hostInsert(anchor!, container, nextSibling)
 580 |   }
 581 | 
 582 |   const removeStaticNode = ({ el, anchor }: VNode) => {
 583 |     let next
 584 |     while (el && el !== anchor) {
 585 |       next = hostNextSibling(el)
 586 |       hostRemove(el)
 587 |       el = next
 588 |     }
 589 |     hostRemove(anchor!)
 590 |   }
 591 | 
 592 |   const processElement = (
 593 |     n1: VNode | null,
 594 |     n2: VNode,
 595 |     container: RendererElement,
 596 |     anchor: RendererNode | null,
 597 |     parentComponent: ComponentInternalInstance | null,
 598 |     parentSuspense: SuspenseBoundary | null,
 599 |     namespace: ElementNamespace,
 600 |     slotScopeIds: string[] | null,
 601 |     optimized: boolean,
 602 |   ) => {
 603 |     if (n2.type === 'svg') {
 604 |       namespace = 'svg'
 605 |     } else if (n2.type === 'math') {
 606 |       namespace = 'mathml'
 607 |     }
 608 | 
 609 |     if (n1 == null) {
 610 |       mountElement(
 611 |         n2,
 612 |         container,
 613 |         anchor,
 614 |         parentComponent,
 615 |         parentSuspense,
 616 |         namespace,
 617 |         slotScopeIds,
 618 |         optimized,
 619 |       )
 620 |     } else {
 621 |       patchElement(
 622 |         n1,
 623 |         n2,
 624 |         parentComponent,
 625 |         parentSuspense,
 626 |         namespace,
 627 |         slotScopeIds,
 628 |         optimized,
 629 |       )
 630 |     }
 631 |   }
 632 | 
 633 |   const mountElement = (
 634 |     vnode: VNode,
 635 |     container: RendererElement,
 636 |     anchor: RendererNode | null,
 637 |     parentComponent: ComponentInternalInstance | null,
 638 |     parentSuspense: SuspenseBoundary | null,
 639 |     namespace: ElementNamespace,
 640 |     slotScopeIds: string[] | null,
 641 |     optimized: boolean,
 642 |   ) => {
 643 |     let el: RendererElement
 644 |     let vnodeHook: VNodeHook | undefined | null
 645 |     const { props, shapeFlag, transition, dirs } = vnode
 646 | 
 647 |     el = vnode.el = hostCreateElement(
 648 |       vnode.type as string,
 649 |       namespace,
 650 |       props && props.is,
 651 |       props,
 652 |     )
 653 | 
 654 |     // mount children first, since some props may rely on child content
 655 |     // being already rendered, e.g. `<select value>`
 656 |     if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
 657 |       hostSetElementText(el, vnode.children as string)
 658 |     } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
 659 |       mountChildren(
 660 |         vnode.children as VNodeArrayChildren,
 661 |         el,
 662 |         null,
 663 |         parentComponent,
 664 |         parentSuspense,
 665 |         resolveChildrenNamespace(vnode, namespace),
 666 |         slotScopeIds,
 667 |         optimized,
 668 |       )
 669 |     }
 670 | 
 671 |     if (dirs) {
 672 |       invokeDirectiveHook(vnode, null, parentComponent, 'created')
 673 |     }
 674 |     // scopeId
 675 |     setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent)
 676 |     // props
 677 |     if (props) {
 678 |       for (const key in props) {
 679 |         if (key !== 'value' && !isReservedProp(key)) {
 680 |           hostPatchProp(el, key, null, props[key], namespace, parentComponent)
 681 |         }
 682 |       }
 683 |       /**
 684 |        * Special case for setting value on DOM elements:
 685 |        * - it can be order-sensitive (e.g. should be set *after* min/max, #2325, #4024)
 686 |        * - it needs to be forced (#1471)
 687 |        * #2353 proposes adding another renderer option to configure this, but
 688 |        * the properties affects are so finite it is worth special casing it
 689 |        * here to reduce the complexity. (Special casing it also should not
 690 |        * affect non-DOM renderers)
 691 |        */
 692 |       if ('value' in props) {
 693 |         hostPatchProp(el, 'value', null, props.value, namespace)
 694 |       }
 695 |       if ((vnodeHook = props.onVnodeBeforeMount)) {
 696 |         invokeVNodeHook(vnodeHook, parentComponent, vnode)
 697 |       }
 698 |     }
 699 | 
 700 |     if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
 701 |       def(el, '__vnode', vnode, true)
 702 |       def(el, '__vueParentComponent', parentComponent, true)
 703 |     }
 704 | 
 705 |     if (dirs) {
 706 |       invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
 707 |     }
 708 |     // #1583 For inside suspense + suspense not resolved case, enter hook should call when suspense resolved
 709 |     // #1689 For inside suspense + suspense resolved case, just call it
 710 |     const needCallTransitionHooks = needTransition(parentSuspense, transition)
 711 |     if (needCallTransitionHooks) {
 712 |       transition!.beforeEnter(el)
 713 |     }
 714 |     hostInsert(el, container, anchor)
 715 |     if (
 716 |       (vnodeHook = props && props.onVnodeMounted) ||
 717 |       needCallTransitionHooks ||
 718 |       dirs
 719 |     ) {
 720 |       queuePostRenderEffect(() => {
 721 |         vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode)
 722 |         needCallTransitionHooks && transition!.enter(el)
 723 |         dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
 724 |       }, parentSuspense)
 725 |     }
 726 |   }
 727 | 
 728 |   const setScopeId = (
 729 |     el: RendererElement,
 730 |     vnode: VNode,
 731 |     scopeId: string | null,
 732 |     slotScopeIds: string[] | null,
 733 |     parentComponent: ComponentInternalInstance | null,
 734 |   ) => {
 735 |     if (scopeId) {
 736 |       hostSetScopeId(el, scopeId)
 737 |     }
 738 |     if (slotScopeIds) {
 739 |       for (let i = 0; i < slotScopeIds.length; i++) {
 740 |         hostSetScopeId(el, slotScopeIds[i])
 741 |       }
 742 |     }
 743 |     if (parentComponent) {
 744 |       let subTree = parentComponent.subTree
 745 |       if (
 746 |         __DEV__ &&
 747 |         subTree.patchFlag > 0 &&
 748 |         subTree.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT
 749 |       ) {
 750 |         subTree =
 751 |           filterSingleRoot(subTree.children as VNodeArrayChildren) || subTree
 752 |       }
 753 |       if (
 754 |         vnode === subTree ||
 755 |         (isSuspense(subTree.type) &&
 756 |           (subTree.ssContent === vnode || subTree.ssFallback === vnode))
 757 |       ) {
 758 |         const parentVNode = parentComponent.vnode
 759 |         setScopeId(
 760 |           el,
 761 |           parentVNode,
 762 |           parentVNode.scopeId,
 763 |           parentVNode.slotScopeIds,
 764 |           parentComponent.parent,
 765 |         )
 766 |       }
 767 |     }
 768 |   }
 769 | 
 770 |   const mountChildren: MountChildrenFn = (
 771 |     children,
 772 |     container,
 773 |     anchor,
 774 |     parentComponent,
 775 |     parentSuspense,
 776 |     namespace: ElementNamespace,
 777 |     slotScopeIds,
 778 |     optimized,
 779 |     start = 0,
 780 |   ) => {
 781 |     for (let i = start; i < children.length; i++) {
 782 |       const child = (children[i] = optimized
 783 |         ? cloneIfMounted(children[i] as VNode)
 784 |         : normalizeVNode(children[i]))
 785 |       patch(
 786 |         null,
 787 |         child,
 788 |         container,
 789 |         anchor,
 790 |         parentComponent,
 791 |         parentSuspense,
 792 |         namespace,
 793 |         slotScopeIds,
 794 |         optimized,
 795 |       )
 796 |     }
 797 |   }
 798 | 
 799 |   const patchElement = (
 800 |     n1: VNode,
 801 |     n2: VNode,
 802 |     parentComponent: ComponentInternalInstance | null,
 803 |     parentSuspense: SuspenseBoundary | null,
 804 |     namespace: ElementNamespace,
 805 |     slotScopeIds: string[] | null,
 806 |     optimized: boolean,
 807 |   ) => {
 808 |     const el = (n2.el = n1.el!)
 809 |     if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
 810 |       el.__vnode = n2
 811 |     }
 812 |     let { patchFlag, dynamicChildren, dirs } = n2
 813 |     // #1426 take the old vnode's patch flag into account since user may clone a
 814 |     // compiler-generated vnode, which de-opts to FULL_PROPS
 815 |     patchFlag |= n1.patchFlag & PatchFlags.FULL_PROPS
 816 |     const oldProps = n1.props || EMPTY_OBJ
 817 |     const newProps = n2.props || EMPTY_OBJ
 818 |     let vnodeHook: VNodeHook | undefined | null
 819 | 
 820 |     // disable recurse in beforeUpdate hooks
 821 |     parentComponent && toggleRecurse(parentComponent, false)
 822 |     if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {
 823 |       invokeVNodeHook(vnodeHook, parentComponent, n2, n1)
 824 |     }
 825 |     if (dirs) {
 826 |       invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate')
 827 |     }
 828 |     parentComponent && toggleRecurse(parentComponent, true)
 829 | 
 830 |     if (__DEV__ && isHmrUpdating) {
 831 |       // HMR updated, force full diff
 832 |       patchFlag = 0
 833 |       optimized = false
 834 |       dynamicChildren = null
 835 |     }
 836 | 
 837 |     // #9135 innerHTML / textContent unset needs to happen before possible
 838 |     // new children mount
 839 |     if (
 840 |       (oldProps.innerHTML && newProps.innerHTML == null) ||
 841 |       (oldProps.textContent && newProps.textContent == null)
 842 |     ) {
 843 |       hostSetElementText(el, '')
 844 |     }
 845 | 
 846 |     if (dynamicChildren) {
 847 |       patchBlockChildren(
 848 |         n1.dynamicChildren!,
 849 |         dynamicChildren,
 850 |         el,
 851 |         parentComponent,
 852 |         parentSuspense,
 853 |         resolveChildrenNamespace(n2, namespace),
 854 |         slotScopeIds,
 855 |       )
 856 |       if (__DEV__) {
 857 |         // necessary for HMR
 858 |         traverseStaticChildren(n1, n2)
 859 |       }
 860 |     } else if (!optimized) {
 861 |       // full diff
 862 |       patchChildren(
 863 |         n1,
 864 |         n2,
 865 |         el,
 866 |         null,
 867 |         parentComponent,
 868 |         parentSuspense,
 869 |         resolveChildrenNamespace(n2, namespace),
 870 |         slotScopeIds,
 871 |         false,
 872 |       )
 873 |     }
 874 | 
 875 |     if (patchFlag > 0) {
 876 |       // the presence of a patchFlag means this element's render code was
 877 |       // generated by the compiler and can take the fast path.
 878 |       // in this path old node and new node are guaranteed to have the same shape
 879 |       // (i.e. at the exact same position in the source template)
 880 |       if (patchFlag & PatchFlags.FULL_PROPS) {
 881 |         // element props contain dynamic keys, full diff needed
 882 |         patchProps(el, oldProps, newProps, parentComponent, namespace)
 883 |       } else {
 884 |         // class
 885 |         // this flag is matched when the element has dynamic class bindings.
 886 |         if (patchFlag & PatchFlags.CLASS) {
 887 |           if (oldProps.class !== newProps.class) {
 888 |             hostPatchProp(el, 'class', null, newProps.class, namespace)
 889 |           }
 890 |         }
 891 | 
 892 |         // style
 893 |         // this flag is matched when the element has dynamic style bindings
 894 |         if (patchFlag & PatchFlags.STYLE) {
 895 |           hostPatchProp(el, 'style', oldProps.style, newProps.style, namespace)
 896 |         }
 897 | 
 898 |         // props
 899 |         // This flag is matched when the element has dynamic prop/attr bindings
 900 |         // other than class and style. The keys of dynamic prop/attrs are saved for
 901 |         // faster iteration.
 902 |         // Note dynamic keys like :[foo]="bar" will cause this optimization to
 903 |         // bail out and go through a full diff because we need to unset the old key
 904 |         if (patchFlag & PatchFlags.PROPS) {
 905 |           // if the flag is present then dynamicProps must be non-null
 906 |           const propsToUpdate = n2.dynamicProps!
 907 |           for (let i = 0; i < propsToUpdate.length; i++) {
 908 |             const key = propsToUpdate[i]
 909 |             const prev = oldProps[key]
 910 |             const next = newProps[key]
 911 |             // #1471 force patch value
 912 |             if (next !== prev || key === 'value') {
 913 |               hostPatchProp(el, key, prev, next, namespace, parentComponent)
 914 |             }
 915 |           }
 916 |         }
 917 |       }
 918 | 
 919 |       // text
 920 |       // This flag is matched when the element has only dynamic text children.
 921 |       if (patchFlag & PatchFlags.TEXT) {
 922 |         if (n1.children !== n2.children) {
 923 |           hostSetElementText(el, n2.children as string)
 924 |         }
 925 |       }
 926 |     } else if (!optimized && dynamicChildren == null) {
 927 |       // unoptimized, full diff
 928 |       patchProps(el, oldProps, newProps, parentComponent, namespace)
 929 |     }
 930 | 
 931 |     if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
 932 |       queuePostRenderEffect(() => {
 933 |         vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1)
 934 |         dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated')
 935 |       }, parentSuspense)
 936 |     }
 937 |   }
 938 | 
 939 |   // The fast path for blocks.
 940 |   const patchBlockChildren: PatchBlockChildrenFn = (
 941 |     oldChildren,
 942 |     newChildren,
 943 |     fallbackContainer,
 944 |     parentComponent,
 945 |     parentSuspense,
 946 |     namespace: ElementNamespace,
 947 |     slotScopeIds,
 948 |   ) => {
 949 |     for (let i = 0; i < newChildren.length; i++) {
 950 |       const oldVNode = oldChildren[i]
 951 |       const newVNode = newChildren[i]
 952 |       // Determine the container (parent element) for the patch.
 953 |       const container =
 954 |         // oldVNode may be an errored async setup() component inside Suspense
 955 |         // which will not have a mounted element
 956 |         oldVNode.el &&
 957 |         // - In the case of a Fragment, we need to provide the actual parent
 958 |         // of the Fragment itself so it can move its children.
 959 |         (oldVNode.type === Fragment ||
 960 |           // - In the case of different nodes, there is going to be a replacement
 961 |           // which also requires the correct parent container
 962 |           !isSameVNodeType(oldVNode, newVNode) ||
 963 |           // - In the case of a component, it could contain anything.
 964 |           oldVNode.shapeFlag & (ShapeFlags.COMPONENT | ShapeFlags.TELEPORT))
 965 |           ? hostParentNode(oldVNode.el)!
 966 |           : // In other cases, the parent container is not actually used so we
 967 |             // just pass the block element here to avoid a DOM parentNode call.
 968 |             fallbackContainer
 969 |       patch(
 970 |         oldVNode,
 971 |         newVNode,
 972 |         container,
 973 |         null,
 974 |         parentComponent,
 975 |         parentSuspense,
 976 |         namespace,
 977 |         slotScopeIds,
 978 |         true,
 979 |       )
 980 |     }
 981 |   }
 982 | 
 983 |   const patchProps = (
 984 |     el: RendererElement,
 985 |     oldProps: Data,
 986 |     newProps: Data,
 987 |     parentComponent: ComponentInternalInstance | null,
 988 |     namespace: ElementNamespace,
 989 |   ) => {
 990 |     if (oldProps !== newProps) {
 991 |       if (oldProps !== EMPTY_OBJ) {
 992 |         for (const key in oldProps) {
 993 |           if (!isReservedProp(key) && !(key in newProps)) {
 994 |             hostPatchProp(
 995 |               el,
 996 |               key,
 997 |               oldProps[key],
 998 |               null,
 999 |               namespace,
1000 |               parentComponent,
1001 |             )
1002 |           }
1003 |         }
1004 |       }
1005 |       for (const key in newProps) {
1006 |         // empty string is not valid prop
1007 |         if (isReservedProp(key)) continue
1008 |         const next = newProps[key]
1009 |         const prev = oldProps[key]
1010 |         // defer patching value
1011 |         if (next !== prev && key !== 'value') {
1012 |           hostPatchProp(el, key, prev, next, namespace, parentComponent)
1013 |         }
1014 |       }
1015 |       if ('value' in newProps) {
1016 |         hostPatchProp(el, 'value', oldProps.value, newProps.value, namespace)
1017 |       }
1018 |     }
1019 |   }
1020 | 
1021 |   const processFragment = (
1022 |     n1: VNode | null,
1023 |     n2: VNode,
1024 |     container: RendererElement,
1025 |     anchor: RendererNode | null,
1026 |     parentComponent: ComponentInternalInstance | null,
1027 |     parentSuspense: SuspenseBoundary | null,
1028 |     namespace: ElementNamespace,
1029 |     slotScopeIds: string[] | null,
1030 |     optimized: boolean,
1031 |   ) => {
1032 |     const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''))!
1033 |     const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''))!
1034 | 
1035 |     let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2
1036 | 
1037 |     if (
1038 |       __DEV__ &&
1039 |       // #5523 dev root fragment may inherit directives
1040 |       (isHmrUpdating || patchFlag & PatchFlags.DEV_ROOT_FRAGMENT)
1041 |     ) {
1042 |       // HMR updated / Dev root fragment (w/ comments), force full diff
1043 |       patchFlag = 0
1044 |       optimized = false
1045 |       dynamicChildren = null
1046 |     }
1047 | 
1048 |     // check if this is a slot fragment with :slotted scope ids
1049 |     if (fragmentSlotScopeIds) {
1050 |       slotScopeIds = slotScopeIds
1051 |         ? slotScopeIds.concat(fragmentSlotScopeIds)
1052 |         : fragmentSlotScopeIds
1053 |     }
1054 | 
1055 |     if (n1 == null) {
1056 |       hostInsert(fragmentStartAnchor, container, anchor)
1057 |       hostInsert(fragmentEndAnchor, container, anchor)
1058 |       // a fragment can only have array children
1059 |       // since they are either generated by the compiler, or implicitly created
1060 |       // from arrays.
1061 |       mountChildren(
1062 |         // #10007
1063 |         // such fragment like `<></>` will be compiled into
1064 |         // a fragment which doesn't have a children.
1065 |         // In this case fallback to an empty array
1066 |         (n2.children || []) as VNodeArrayChildren,
1067 |         container,
1068 |         fragmentEndAnchor,
1069 |         parentComponent,
1070 |         parentSuspense,
1071 |         namespace,
1072 |         slotScopeIds,
1073 |         optimized,
1074 |       )
1075 |     } else {
1076 |       if (
1077 |         patchFlag > 0 &&
1078 |         patchFlag & PatchFlags.STABLE_FRAGMENT &&
1079 |         dynamicChildren &&
1080 |         // #2715 the previous fragment could've been a BAILed one as a result
1081 |         // of renderSlot() with no valid children
1082 |         n1.dynamicChildren
1083 |       ) {
1084 |         // a stable fragment (template root or <template v-for>) doesn't need to
1085 |         // patch children order, but it may contain dynamicChildren.
1086 |         patchBlockChildren(
1087 |           n1.dynamicChildren,
1088 |           dynamicChildren,
1089 |           container,
1090 |           parentComponent,
1091 |           parentSuspense,
1092 |           namespace,
1093 |           slotScopeIds,
1094 |         )
1095 |         if (__DEV__) {
1096 |           // necessary for HMR
1097 |           traverseStaticChildren(n1, n2)
1098 |         } else if (
1099 |           // #2080 if the stable fragment has a key, it's a <template v-for> that may
1100 |           //  get moved around. Make sure all root level vnodes inherit el.
1101 |           // #2134 or if it's a component root, it may also get moved around
1102 |           // as the component is being moved.
1103 |           n2.key != null ||
1104 |           (parentComponent && n2 === parentComponent.subTree)
1105 |         ) {
1106 |           traverseStaticChildren(n1, n2, true /* shallow */)
1107 |         }
1108 |       } else {
1109 |         // keyed / unkeyed, or manual fragments.
1110 |         // for keyed & unkeyed, since they are compiler generated from v-for,
1111 |         // each child is guaranteed to be a block so the fragment will never
1112 |         // have dynamicChildren.
1113 |         patchChildren(
1114 |           n1,
1115 |           n2,
1116 |           container,
1117 |           fragmentEndAnchor,
1118 |           parentComponent,
1119 |           parentSuspense,
1120 |           namespace,
1121 |           slotScopeIds,
1122 |           optimized,
1123 |         )
1124 |       }
1125 |     }
1126 |   }
1127 | 
1128 |   const processComponent = (
1129 |     n1: VNode | null,
1130 |     n2: VNode,
1131 |     container: RendererElement,
1132 |     anchor: RendererNode | null,
1133 |     parentComponent: ComponentInternalInstance | null,
1134 |     parentSuspense: SuspenseBoundary | null,
1135 |     namespace: ElementNamespace,
1136 |     slotScopeIds: string[] | null,
1137 |     optimized: boolean,
1138 |   ) => {
1139 |     n2.slotScopeIds = slotScopeIds
1140 |     if (n1 == null) {
1141 |       if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
1142 |         ;(parentComponent!.ctx as KeepAliveContext).activate(
1143 |           n2,
1144 |           container,
1145 |           anchor,
1146 |           namespace,
1147 |           optimized,
1148 |         )
1149 |       } else {
1150 |         mountComponent(
1151 |           n2,
1152 |           container,
1153 |           anchor,
1154 |           parentComponent,
1155 |           parentSuspense,
1156 |           namespace,
1157 |           optimized,
1158 |         )
1159 |       }
1160 |     } else {
1161 |       updateComponent(n1, n2, optimized)
1162 |     }
1163 |   }
1164 | 
1165 |   const mountComponent: MountComponentFn = (
1166 |     initialVNode,
1167 |     container,
1168 |     anchor,
1169 |     parentComponent,
1170 |     parentSuspense,
1171 |     namespace: ElementNamespace,
1172 |     optimized,
1173 |   ) => {
1174 |     // 2.x compat may pre-create the component instance before actually
1175 |     // mounting
1176 |     const compatMountInstance =
1177 |       __COMPAT__ && initialVNode.isCompatRoot && initialVNode.component
1178 |     const instance: ComponentInternalInstance =
1179 |       compatMountInstance ||
1180 |       (initialVNode.component = createComponentInstance(
1181 |         initialVNode,
1182 |         parentComponent,
1183 |         parentSuspense,
1184 |       ))
1185 | 
1186 |     if (__DEV__ && instance.type.__hmrId) {
1187 |       registerHMR(instance)
1188 |     }
1189 | 
1190 |     if (__DEV__) {
1191 |       pushWarningContext(initialVNode)
1192 |       startMeasure(instance, `mount`)
1193 |     }
1194 | 
1195 |     // inject renderer internals for keepAlive
1196 |     if (isKeepAlive(initialVNode)) {
1197 |       ;(instance.ctx as KeepAliveContext).renderer = internals
1198 |     }
1199 | 
1200 |     // resolve props and slots for setup context
1201 |     if (!(__COMPAT__ && compatMountInstance)) {
1202 |       if (__DEV__) {
1203 |         startMeasure(instance, `init`)
1204 |       }
1205 |       setupComponent(instance, false, optimized)
1206 |       if (__DEV__) {
1207 |         endMeasure(instance, `init`)
1208 |       }
1209 |     }
1210 | 
1211 |     // setup() is async. This component relies on async logic to be resolved
1212 |     // before proceeding
1213 |     if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
1214 |       // avoid hydration for hmr updating
1215 |       if (__DEV__ && isHmrUpdating) initialVNode.el = null
1216 | 
1217 |       parentSuspense &&
1218 |         parentSuspense.registerDep(instance, setupRenderEffect, optimized)
1219 | 
1220 |       // Give it a placeholder if this is not hydration
1221 |       // TODO handle self-defined fallback
1222 |       if (!initialVNode.el) {
1223 |         const placeholder = (instance.subTree = createVNode(Comment))
1224 |         processCommentNode(null, placeholder, container!, anchor)
1225 |       }
1226 |     } else {
1227 |       setupRenderEffect(
1228 |         instance,
1229 |         initialVNode,
1230 |         container,
1231 |         anchor,
1232 |         parentSuspense,
1233 |         namespace,
1234 |         optimized,
1235 |       )
1236 |     }
1237 | 
1238 |     if (__DEV__) {
1239 |       popWarningContext()
1240 |       endMeasure(instance, `mount`)
1241 |     }
1242 |   }
1243 | 
1244 |   const updateComponent = (n1: VNode, n2: VNode, optimized: boolean) => {
1245 |     const instance = (n2.component = n1.component)!
1246 |     if (shouldUpdateComponent(n1, n2, optimized)) {
1247 |       if (
1248 |         __FEATURE_SUSPENSE__ &&
1249 |         instance.asyncDep &&
1250 |         !instance.asyncResolved
1251 |       ) {
1252 |         // async & still pending - just update props and slots
1253 |         // since the component's reactive effect for render isn't set-up yet
1254 |         if (__DEV__) {
1255 |           pushWarningContext(n2)
1256 |         }
1257 |         updateComponentPreRender(instance, n2, optimized)
1258 |         if (__DEV__) {
1259 |           popWarningContext()
1260 |         }
1261 |         return
1262 |       } else {
1263 |         // normal update
1264 |         instance.next = n2
1265 |         // instance.update is the reactive effect.
1266 |         instance.update()
1267 |       }
1268 |     } else {
1269 |       // no update needed. just copy over properties
1270 |       n2.el = n1.el
1271 |       instance.vnode = n2
1272 |     }
1273 |   }
1274 | 
1275 |   const setupRenderEffect: SetupRenderEffectFn = (
1276 |     instance,
1277 |     initialVNode,
1278 |     container,
1279 |     anchor,
1280 |     parentSuspense,
1281 |     namespace: ElementNamespace,
1282 |     optimized,
1283 |   ) => {
1284 |     const componentUpdateFn = () => {
1285 |       if (!instance.isMounted) {
1286 |         let vnodeHook: VNodeHook | null | undefined
1287 |         const { el, props } = initialVNode
1288 |         const { bm, m, parent, root, type } = instance
1289 |         const isAsyncWrapperVNode = isAsyncWrapper(initialVNode)
1290 | 
1291 |         toggleRecurse(instance, false)
1292 |         // beforeMount hook
1293 |         if (bm) {
1294 |           invokeArrayFns(bm)
1295 |         }
1296 |         // onVnodeBeforeMount
1297 |         if (
1298 |           !isAsyncWrapperVNode &&
1299 |           (vnodeHook = props && props.onVnodeBeforeMount)
1300 |         ) {
1301 |           invokeVNodeHook(vnodeHook, parent, initialVNode)
1302 |         }
1303 |         if (
1304 |           __COMPAT__ &&
1305 |           isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
1306 |         ) {
1307 |           instance.emit('hook:beforeMount')
1308 |         }
1309 |         toggleRecurse(instance, true)
1310 | 
1311 |         if (el && hydrateNode) {
1312 |           // vnode has adopted host node - perform hydration instead of mount.
1313 |           const hydrateSubTree = () => {
1314 |             if (__DEV__) {
1315 |               startMeasure(instance, `render`)
1316 |             }
1317 |             instance.subTree = renderComponentRoot(instance)
1318 |             if (__DEV__) {
1319 |               endMeasure(instance, `render`)
1320 |             }
1321 |             if (__DEV__) {
1322 |               startMeasure(instance, `hydrate`)
1323 |             }
1324 |             hydrateNode!(
1325 |               el as Node,
1326 |               instance.subTree,
1327 |               instance,
1328 |               parentSuspense,
1329 |               null,
1330 |             )
1331 |             if (__DEV__) {
1332 |               endMeasure(instance, `hydrate`)
1333 |             }
1334 |           }
1335 | 
1336 |           if (
1337 |             isAsyncWrapperVNode &&
1338 |             (type as ComponentOptions).__asyncHydrate
1339 |           ) {
1340 |             ;(type as ComponentOptions).__asyncHydrate!(
1341 |               el as Element,
1342 |               instance,
1343 |               hydrateSubTree,
1344 |             )
1345 |           } else {
1346 |             hydrateSubTree()
1347 |           }
1348 |         } else {
1349 |           // custom element style injection
1350 |           if (root.ce) {
1351 |             root.ce._injectChildStyle(type)
1352 |           }
1353 | 
1354 |           if (__DEV__) {
1355 |             startMeasure(instance, `render`)
1356 |           }
1357 |           const subTree = (instance.subTree = renderComponentRoot(instance))
1358 |           if (__DEV__) {
1359 |             endMeasure(instance, `render`)
1360 |           }
1361 |           if (__DEV__) {
1362 |             startMeasure(instance, `patch`)
1363 |           }
1364 |           patch(
1365 |             null,
1366 |             subTree,
1367 |             container,
1368 |             anchor,
1369 |             instance,
1370 |             parentSuspense,
1371 |             namespace,
1372 |           )
1373 |           if (__DEV__) {
1374 |             endMeasure(instance, `patch`)
1375 |           }
1376 |           initialVNode.el = subTree.el
1377 |         }
1378 |         // mounted hook
1379 |         if (m) {
1380 |           queuePostRenderEffect(m, parentSuspense)
1381 |         }
1382 |         // onVnodeMounted
1383 |         if (
1384 |           !isAsyncWrapperVNode &&
1385 |           (vnodeHook = props && props.onVnodeMounted)
1386 |         ) {
1387 |           const scopedInitialVNode = initialVNode
1388 |           queuePostRenderEffect(
1389 |             () => invokeVNodeHook(vnodeHook!, parent, scopedInitialVNode),
1390 |             parentSuspense,
1391 |           )
1392 |         }
1393 |         if (
1394 |           __COMPAT__ &&
1395 |           isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
1396 |         ) {
1397 |           queuePostRenderEffect(
1398 |             () => instance.emit('hook:mounted'),
1399 |             parentSuspense,
1400 |           )
1401 |         }
1402 | 
1403 |         // activated hook for keep-alive roots.
1404 |         // #1742 activated hook must be accessed after first render
1405 |         // since the hook may be injected by a child keep-alive
1406 |         if (
1407 |           initialVNode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE ||
1408 |           (parent &&
1409 |             isAsyncWrapper(parent.vnode) &&
1410 |             parent.vnode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE)
1411 |         ) {
1412 |           instance.a && queuePostRenderEffect(instance.a, parentSuspense)
1413 |           if (
1414 |             __COMPAT__ &&
1415 |             isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
1416 |           ) {
1417 |             queuePostRenderEffect(
1418 |               () => instance.emit('hook:activated'),
1419 |               parentSuspense,
1420 |             )
1421 |           }
1422 |         }
1423 |         instance.isMounted = true
1424 | 
1425 |         if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
1426 |           devtoolsComponentAdded(instance)
1427 |         }
1428 | 
1429 |         // #2458: deference mount-only object parameters to prevent memleaks
1430 |         initialVNode = container = anchor = null as any
1431 |       } else {
1432 |         let { next, bu, u, parent, vnode } = instance
1433 | 
1434 |         if (__FEATURE_SUSPENSE__) {
1435 |           const nonHydratedAsyncRoot = locateNonHydratedAsyncRoot(instance)
1436 |           // we are trying to update some async comp before hydration
1437 |           // this will cause crash because we don't know the root node yet
1438 |           if (nonHydratedAsyncRoot) {
1439 |             // only sync the properties and abort the rest of operations
1440 |             if (next) {
1441 |               next.el = vnode.el
1442 |               updateComponentPreRender(instance, next, optimized)
1443 |             }
1444 |             // and continue the rest of operations once the deps are resolved
1445 |             nonHydratedAsyncRoot.asyncDep!.then(() => {
1446 |               // the instance may be destroyed during the time period
1447 |               if (!instance.isUnmounted) {
1448 |                 componentUpdateFn()
1449 |               }
1450 |             })
1451 |             return
1452 |           }
1453 |         }
1454 | 
1455 |         // updateComponent
1456 |         // This is triggered by mutation of component's own state (next: null)
1457 |         // OR parent calling processComponent (next: VNode)
1458 |         let originNext = next
1459 |         let vnodeHook: VNodeHook | null | undefined
1460 |         if (__DEV__) {
1461 |           pushWarningContext(next || instance.vnode)
1462 |         }
1463 | 
1464 |         // Disallow component effect recursion during pre-lifecycle hooks.
1465 |         toggleRecurse(instance, false)
1466 |         if (next) {
1467 |           next.el = vnode.el
1468 |           updateComponentPreRender(instance, next, optimized)
1469 |         } else {
1470 |           next = vnode
1471 |         }
1472 | 
1473 |         // beforeUpdate hook
1474 |         if (bu) {
1475 |           invokeArrayFns(bu)
1476 |         }
1477 |         // onVnodeBeforeUpdate
1478 |         if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {
1479 |           invokeVNodeHook(vnodeHook, parent, next, vnode)
1480 |         }
1481 |         if (
1482 |           __COMPAT__ &&
1483 |           isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
1484 |         ) {
1485 |           instance.emit('hook:beforeUpdate')
1486 |         }
1487 |         toggleRecurse(instance, true)
1488 | 
1489 |         // render
1490 |         if (__DEV__) {
1491 |           startMeasure(instance, `render`)
1492 |         }
1493 |         const nextTree = renderComponentRoot(instance)
1494 |         if (__DEV__) {
1495 |           endMeasure(instance, `render`)
1496 |         }
1497 |         const prevTree = instance.subTree
1498 |         instance.subTree = nextTree
1499 | 
1500 |         if (__DEV__) {
1501 |           startMeasure(instance, `patch`)
1502 |         }
1503 |         patch(
1504 |           prevTree,
1505 |           nextTree,
1506 |           // parent may have changed if it's in a teleport
1507 |           hostParentNode(prevTree.el!)!,
1508 |           // anchor may have changed if it's in a fragment
1509 |           getNextHostNode(prevTree),
1510 |           instance,
1511 |           parentSuspense,
1512 |           namespace,
1513 |         )
1514 |         if (__DEV__) {
1515 |           endMeasure(instance, `patch`)
1516 |         }
1517 |         next.el = nextTree.el
1518 |         if (originNext === null) {
1519 |           // self-triggered update. In case of HOC, update parent component
1520 |           // vnode el. HOC is indicated by parent instance's subTree pointing
1521 |           // to child component's vnode
1522 |           updateHOCHostEl(instance, nextTree.el)
1523 |         }
1524 |         // updated hook
1525 |         if (u) {
1526 |           queuePostRenderEffect(u, parentSuspense)
1527 |         }
1528 |         // onVnodeUpdated
1529 |         if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {
1530 |           queuePostRenderEffect(
1531 |             () => invokeVNodeHook(vnodeHook!, parent, next!, vnode),
1532 |             parentSuspense,
1533 |           )
1534 |         }
1535 |         if (
1536 |           __COMPAT__ &&
1537 |           isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
1538 |         ) {
1539 |           queuePostRenderEffect(
1540 |             () => instance.emit('hook:updated'),
1541 |             parentSuspense,
1542 |           )
1543 |         }
1544 | 
1545 |         if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
1546 |           devtoolsComponentUpdated(instance)
1547 |         }
1548 | 
1549 |         if (__DEV__) {
1550 |           popWarningContext()
1551 |         }
1552 |       }
1553 |     }
1554 | 
1555 |     // create reactive effect for rendering
1556 |     instance.scope.on()
1557 |     const effect = (instance.effect = new ReactiveEffect(componentUpdateFn))
1558 |     instance.scope.off()
1559 | 
1560 |     const update = (instance.update = effect.run.bind(effect))
1561 |     const job: SchedulerJob = (instance.job = effect.runIfDirty.bind(effect))
1562 |     job.i = instance
1563 |     job.id = instance.uid
1564 |     effect.scheduler = () => queueJob(job)
1565 | 
1566 |     // allowRecurse
1567 |     // #1801, #2043 component render effects should allow recursive updates
1568 |     toggleRecurse(instance, true)
1569 | 
1570 |     if (__DEV__) {
1571 |       effect.onTrack = instance.rtc
1572 |         ? e => invokeArrayFns(instance.rtc!, e)
1573 |         : void 0
1574 |       effect.onTrigger = instance.rtg
1575 |         ? e => invokeArrayFns(instance.rtg!, e)
1576 |         : void 0
1577 |     }
1578 | 
1579 |     update()
1580 |   }
1581 | 
1582 |   const updateComponentPreRender = (
1583 |     instance: ComponentInternalInstance,
1584 |     nextVNode: VNode,
1585 |     optimized: boolean,
1586 |   ) => {
1587 |     nextVNode.component = instance
1588 |     const prevProps = instance.vnode.props
1589 |     instance.vnode = nextVNode
1590 |     instance.next = null
1591 |     updateProps(instance, nextVNode.props, prevProps, optimized)
1592 |     updateSlots(instance, nextVNode.children, optimized)
1593 | 
1594 |     pauseTracking()
1595 |     // props update may have triggered pre-flush watchers.
1596 |     // flush them before the render update.
1597 |     flushPreFlushCbs(instance)
1598 |     resetTracking()
1599 |   }
1600 | 
1601 |   const patchChildren: PatchChildrenFn = (
1602 |     n1,
1603 |     n2,
1604 |     container,
1605 |     anchor,
1606 |     parentComponent,
1607 |     parentSuspense,
1608 |     namespace: ElementNamespace,
1609 |     slotScopeIds,
1610 |     optimized = false,
1611 |   ) => {
1612 |     const c1 = n1 && n1.children
1613 |     const prevShapeFlag = n1 ? n1.shapeFlag : 0
1614 |     const c2 = n2.children
1615 | 
1616 |     const { patchFlag, shapeFlag } = n2
1617 |     // fast path
1618 |     if (patchFlag > 0) {
1619 |       if (patchFlag & PatchFlags.KEYED_FRAGMENT) {
1620 |         // this could be either fully-keyed or mixed (some keyed some not)
1621 |         // presence of patchFlag means children are guaranteed to be arrays
1622 |         patchKeyedChildren(
1623 |           c1 as VNode[],
1624 |           c2 as VNodeArrayChildren,
1625 |           container,
1626 |           anchor,
1627 |           parentComponent,
1628 |           parentSuspense,
1629 |           namespace,
1630 |           slotScopeIds,
1631 |           optimized,
1632 |         )
1633 |         return
1634 |       } else if (patchFlag & PatchFlags.UNKEYED_FRAGMENT) {
1635 |         // unkeyed
1636 |         patchUnkeyedChildren(
1637 |           c1 as VNode[],
1638 |           c2 as VNodeArrayChildren,
1639 |           container,
1640 |           anchor,
1641 |           parentComponent,
1642 |           parentSuspense,
1643 |           namespace,
1644 |           slotScopeIds,
1645 |           optimized,
1646 |         )
1647 |         return
1648 |       }
1649 |     }
1650 | 
1651 |     // children has 3 possibilities: text, array or no children.
1652 |     if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
1653 |       // text children fast path
1654 |       if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
1655 |         unmountChildren(c1 as VNode[], parentComponent, parentSuspense)
1656 |       }
1657 |       if (c2 !== c1) {
1658 |         hostSetElementText(container, c2 as string)
1659 |       }
1660 |     } else {
1661 |       if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
1662 |         // prev children was array
1663 |         if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
1664 |           // two arrays, cannot assume anything, do full diff
1665 |           patchKeyedChildren(
1666 |             c1 as VNode[],
1667 |             c2 as VNodeArrayChildren,
1668 |             container,
1669 |             anchor,
1670 |             parentComponent,
1671 |             parentSuspense,
1672 |             namespace,
1673 |             slotScopeIds,
1674 |             optimized,
1675 |           )
1676 |         } else {
1677 |           // no new children, just unmount old
1678 |           unmountChildren(c1 as VNode[], parentComponent, parentSuspense, true)
1679 |         }
1680 |       } else {
1681 |         // prev children was text OR null
1682 |         // new children is array OR null
1683 |         if (prevShapeFlag & ShapeFlags.TEXT_CHILDREN) {
1684 |           hostSetElementText(container, '')
1685 |         }
1686 |         // mount new if array
1687 |         if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
1688 |           mountChildren(
1689 |             c2 as VNodeArrayChildren,
1690 |             container,
1691 |             anchor,
1692 |             parentComponent,
1693 |             parentSuspense,
1694 |             namespace,
1695 |             slotScopeIds,
1696 |             optimized,
1697 |           )
1698 |         }
1699 |       }
1700 |     }
1701 |   }
1702 | 
1703 |   const patchUnkeyedChildren = (
1704 |     c1: VNode[],
1705 |     c2: VNodeArrayChildren,
1706 |     container: RendererElement,
1707 |     anchor: RendererNode | null,
1708 |     parentComponent: ComponentInternalInstance | null,
1709 |     parentSuspense: SuspenseBoundary | null,
1710 |     namespace: ElementNamespace,
1711 |     slotScopeIds: string[] | null,
1712 |     optimized: boolean,
1713 |   ) => {
1714 |     c1 = c1 || EMPTY_ARR
1715 |     c2 = c2 || EMPTY_ARR
1716 |     const oldLength = c1.length
1717 |     const newLength = c2.length
1718 |     const commonLength = Math.min(oldLength, newLength)
1719 |     let i
1720 |     for (i = 0; i < commonLength; i++) {
1721 |       const nextChild = (c2[i] = optimized
1722 |         ? cloneIfMounted(c2[i] as VNode)
1723 |         : normalizeVNode(c2[i]))
1724 |       patch(
1725 |         c1[i],
1726 |         nextChild,
1727 |         container,
1728 |         null,
1729 |         parentComponent,
1730 |         parentSuspense,
1731 |         namespace,
1732 |         slotScopeIds,
1733 |         optimized,
1734 |       )
1735 |     }
1736 |     if (oldLength > newLength) {
1737 |       // remove old
1738 |       unmountChildren(
1739 |         c1,
1740 |         parentComponent,
1741 |         parentSuspense,
1742 |         true,
1743 |         false,
1744 |         commonLength,
1745 |       )
1746 |     } else {
1747 |       // mount new
1748 |       mountChildren(
1749 |         c2,
1750 |         container,
1751 |         anchor,
1752 |         parentComponent,
1753 |         parentSuspense,
1754 |         namespace,
1755 |         slotScopeIds,
1756 |         optimized,
1757 |         commonLength,
1758 |       )
1759 |     }
1760 |   }
1761 | 
1762 |   // can be all-keyed or mixed
1763 |   const patchKeyedChildren = (
1764 |     c1: VNode[],
1765 |     c2: VNodeArrayChildren,
1766 |     container: RendererElement,
1767 |     parentAnchor: RendererNode | null,
1768 |     parentComponent: ComponentInternalInstance | null,
1769 |     parentSuspense: SuspenseBoundary | null,
1770 |     namespace: ElementNamespace,
1771 |     slotScopeIds: string[] | null,
1772 |     optimized: boolean,
1773 |   ) => {
1774 |     let i = 0
1775 |     const l2 = c2.length
1776 |     let e1 = c1.length - 1 // prev ending index
1777 |     let e2 = l2 - 1 // next ending index
1778 | 
1779 |     // 1. sync from start
1780 |     // (a b) c
1781 |     // (a b) d e
1782 |     while (i <= e1 && i <= e2) {
1783 |       const n1 = c1[i]
1784 |       const n2 = (c2[i] = optimized
1785 |         ? cloneIfMounted(c2[i] as VNode)
1786 |         : normalizeVNode(c2[i]))
1787 |       if (isSameVNodeType(n1, n2)) {
1788 |         patch(
1789 |           n1,
1790 |           n2,
1791 |           container,
1792 |           null,
1793 |           parentComponent,
1794 |           parentSuspense,
1795 |           namespace,
1796 |           slotScopeIds,
1797 |           optimized,
1798 |         )
1799 |       } else {
1800 |         break
1801 |       }
1802 |       i++
1803 |     }
1804 | 
1805 |     // 2. sync from end
1806 |     // a (b c)
1807 |     // d e (b c)
1808 |     while (i <= e1 && i <= e2) {
1809 |       const n1 = c1[e1]
1810 |       const n2 = (c2[e2] = optimized
1811 |         ? cloneIfMounted(c2[e2] as VNode)
1812 |         : normalizeVNode(c2[e2]))
1813 |       if (isSameVNodeType(n1, n2)) {
1814 |         patch(
1815 |           n1,
1816 |           n2,
1817 |           container,
1818 |           null,
1819 |           parentComponent,
1820 |           parentSuspense,
1821 |           namespace,
1822 |           slotScopeIds,
1823 |           optimized,
1824 |         )
1825 |       } else {
1826 |         break
1827 |       }
1828 |       e1--
1829 |       e2--
1830 |     }
1831 | 
1832 |     // 3. common sequence + mount
1833 |     // (a b)
1834 |     // (a b) c
1835 |     // i = 2, e1 = 1, e2 = 2
1836 |     // (a b)
1837 |     // c (a b)
1838 |     // i = 0, e1 = -1, e2 = 0
1839 |     if (i > e1) {
1840 |       if (i <= e2) {
1841 |         const nextPos = e2 + 1
1842 |         const anchor = nextPos < l2 ? (c2[nextPos] as VNode).el : parentAnchor
1843 |         while (i <= e2) {
1844 |           patch(
1845 |             null,
1846 |             (c2[i] = optimized
1847 |               ? cloneIfMounted(c2[i] as VNode)
1848 |               : normalizeVNode(c2[i])),
1849 |             container,
1850 |             anchor,
1851 |             parentComponent,
1852 |             parentSuspense,
1853 |             namespace,
1854 |             slotScopeIds,
1855 |             optimized,
1856 |           )
1857 |           i++
1858 |         }
1859 |       }
1860 |     }
1861 | 
1862 |     // 4. common sequence + unmount
1863 |     // (a b) c
1864 |     // (a b)
1865 |     // i = 2, e1 = 2, e2 = 1
1866 |     // a (b c)
1867 |     // (b c)
1868 |     // i = 0, e1 = 0, e2 = -1
1869 |     else if (i > e2) {
1870 |       while (i <= e1) {
1871 |         unmount(c1[i], parentComponent, parentSuspense, true)
1872 |         i++
1873 |       }
1874 |     }
1875 | 
1876 |     // 5. unknown sequence
1877 |     // [i ... e1 + 1]: a b [c d e] f g
1878 |     // [i ... e2 + 1]: a b [e d c h] f g
1879 |     // i = 2, e1 = 4, e2 = 5
1880 |     else {
1881 |       const s1 = i // prev starting index
1882 |       const s2 = i // next starting index
1883 | 
1884 |       // 5.1 build key:index map for newChildren
1885 |       const keyToNewIndexMap: Map<PropertyKey, number> = new Map()
1886 |       for (i = s2; i <= e2; i++) {
1887 |         const nextChild = (c2[i] = optimized
1888 |           ? cloneIfMounted(c2[i] as VNode)
1889 |           : normalizeVNode(c2[i]))
1890 |         if (nextChild.key != null) {
1891 |           if (__DEV__ && keyToNewIndexMap.has(nextChild.key)) {
1892 |             warn(
1893 |               `Duplicate keys found during update:`,
1894 |               JSON.stringify(nextChild.key),
1895 |               `Make sure keys are unique.`,
1896 |             )
1897 |           }
1898 |           keyToNewIndexMap.set(nextChild.key, i)
1899 |         }
1900 |       }
1901 | 
1902 |       // 5.2 loop through old children left to be patched and try to patch
1903 |       // matching nodes & remove nodes that are no longer present
1904 |       let j
1905 |       let patched = 0
1906 |       const toBePatched = e2 - s2 + 1
1907 |       let moved = false
1908 |       // used to track whether any node has moved
1909 |       let maxNewIndexSoFar = 0
1910 |       // works as Map<newIndex, oldIndex>
1911 |       // Note that oldIndex is offset by +1
1912 |       // and oldIndex = 0 is a special value indicating the new node has
1913 |       // no corresponding old node.
1914 |       // used for determining longest stable subsequence
1915 |       const newIndexToOldIndexMap = new Array(toBePatched)
1916 |       for (i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 0
1917 | 
1918 |       for (i = s1; i <= e1; i++) {
1919 |         const prevChild = c1[i]
1920 |         if (patched >= toBePatched) {
1921 |           // all new children have been patched so this can only be a removal
1922 |           unmount(prevChild, parentComponent, parentSuspense, true)
1923 |           continue
1924 |         }
1925 |         let newIndex
1926 |         if (prevChild.key != null) {
1927 |           newIndex = keyToNewIndexMap.get(prevChild.key)
1928 |         } else {
1929 |           // key-less node, try to locate a key-less node of the same type
1930 |           for (j = s2; j <= e2; j++) {
1931 |             if (
1932 |               newIndexToOldIndexMap[j - s2] === 0 &&
1933 |               isSameVNodeType(prevChild, c2[j] as VNode)
1934 |             ) {
1935 |               newIndex = j
1936 |               break
1937 |             }
1938 |           }
1939 |         }
1940 |         if (newIndex === undefined) {
1941 |           unmount(prevChild, parentComponent, parentSuspense, true)
1942 |         } else {
1943 |           newIndexToOldIndexMap[newIndex - s2] = i + 1
1944 |           if (newIndex >= maxNewIndexSoFar) {
1945 |             maxNewIndexSoFar = newIndex
1946 |           } else {
1947 |             moved = true
1948 |           }
1949 |           patch(
1950 |             prevChild,
1951 |             c2[newIndex] as VNode,
1952 |             container,
1953 |             null,
1954 |             parentComponent,
1955 |             parentSuspense,
1956 |             namespace,
1957 |             slotScopeIds,
1958 |             optimized,
1959 |           )
1960 |           patched++
1961 |         }
1962 |       }
1963 | 
1964 |       // 5.3 move and mount
1965 |       // generate longest stable subsequence only when nodes have moved
1966 |       const increasingNewIndexSequence = moved
1967 |         ? getSequence(newIndexToOldIndexMap)
1968 |         : EMPTY_ARR
1969 |       j = increasingNewIndexSequence.length - 1
1970 |       // looping backwards so that we can use last patched node as anchor
1971 |       for (i = toBePatched - 1; i >= 0; i--) {
1972 |         const nextIndex = s2 + i
1973 |         const nextChild = c2[nextIndex] as VNode
1974 |         const anchor =
1975 |           nextIndex + 1 < l2 ? (c2[nextIndex + 1] as VNode).el : parentAnchor
1976 |         if (newIndexToOldIndexMap[i] === 0) {
1977 |           // mount new
1978 |           patch(
1979 |             null,
1980 |             nextChild,
1981 |             container,
1982 |             anchor,
1983 |             parentComponent,
1984 |             parentSuspense,
1985 |             namespace,
1986 |             slotScopeIds,
1987 |             optimized,
1988 |           )
1989 |         } else if (moved) {
1990 |           // move if:
1991 |           // There is no stable subsequence (e.g. a reverse)
1992 |           // OR current node is not among the stable sequence
1993 |           if (j < 0 || i !== increasingNewIndexSequence[j]) {
1994 |             move(nextChild, container, anchor, MoveType.REORDER)
1995 |           } else {
1996 |             j--
1997 |           }
1998 |         }
1999 |       }
2000 |     }
2001 |   }
2002 | 
2003 |   const move: MoveFn = (
2004 |     vnode,
2005 |     container,
2006 |     anchor,
2007 |     moveType,
2008 |     parentSuspense = null,
2009 |   ) => {
2010 |     const { el, type, transition, children, shapeFlag } = vnode
2011 |     if (shapeFlag & ShapeFlags.COMPONENT) {
2012 |       move(vnode.component!.subTree, container, anchor, moveType)
2013 |       return
2014 |     }
2015 | 
2016 |     if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
2017 |       vnode.suspense!.move(container, anchor, moveType)
2018 |       return
2019 |     }
2020 | 
2021 |     if (shapeFlag & ShapeFlags.TELEPORT) {
2022 |       ;(type as typeof TeleportImpl).move(vnode, container, anchor, internals)
2023 |       return
2024 |     }
2025 | 
2026 |     if (type === Fragment) {
2027 |       hostInsert(el!, container, anchor)
2028 |       for (let i = 0; i < (children as VNode[]).length; i++) {
2029 |         move((children as VNode[])[i], container, anchor, moveType)
2030 |       }
2031 |       hostInsert(vnode.anchor!, container, anchor)
2032 |       return
2033 |     }
2034 | 
2035 |     if (type === Static) {
2036 |       moveStaticNode(vnode, container, anchor)
2037 |       return
2038 |     }
2039 | 
2040 |     // single nodes
2041 |     const needTransition =
2042 |       moveType !== MoveType.REORDER &&
2043 |       shapeFlag & ShapeFlags.ELEMENT &&
2044 |       transition
2045 |     if (needTransition) {
2046 |       if (moveType === MoveType.ENTER) {
2047 |         transition!.beforeEnter(el!)
2048 |         hostInsert(el!, container, anchor)
2049 |         queuePostRenderEffect(() => transition!.enter(el!), parentSuspense)
2050 |       } else {
2051 |         const { leave, delayLeave, afterLeave } = transition!
2052 |         const remove = () => hostInsert(el!, container, anchor)
2053 |         const performLeave = () => {
2054 |           leave(el!, () => {
2055 |             remove()
2056 |             afterLeave && afterLeave()
2057 |           })
2058 |         }
2059 |         if (delayLeave) {
2060 |           delayLeave(el!, remove, performLeave)
2061 |         } else {
2062 |           performLeave()
2063 |         }
2064 |       }
2065 |     } else {
2066 |       hostInsert(el!, container, anchor)
2067 |     }
2068 |   }
2069 | 
2070 |   const unmount: UnmountFn = (
2071 |     vnode,
2072 |     parentComponent,
2073 |     parentSuspense,
2074 |     doRemove = false,
2075 |     optimized = false,
2076 |   ) => {
2077 |     const {
2078 |       type,
2079 |       props,
2080 |       ref,
2081 |       children,
2082 |       dynamicChildren,
2083 |       shapeFlag,
2084 |       patchFlag,
2085 |       dirs,
2086 |       cacheIndex,
2087 |     } = vnode
2088 | 
2089 |     if (patchFlag === PatchFlags.BAIL) {
2090 |       optimized = false
2091 |     }
2092 | 
2093 |     // unset ref
2094 |     if (ref != null) {
2095 |       setRef(ref, null, parentSuspense, vnode, true)
2096 |     }
2097 | 
2098 |     // #6593 should clean memo cache when unmount
2099 |     if (cacheIndex != null) {
2100 |       parentComponent!.renderCache[cacheIndex] = undefined
2101 |     }
2102 | 
2103 |     if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
2104 |       ;(parentComponent!.ctx as KeepAliveContext).deactivate(vnode)
2105 |       return
2106 |     }
2107 | 
2108 |     const shouldInvokeDirs = shapeFlag & ShapeFlags.ELEMENT && dirs
2109 |     const shouldInvokeVnodeHook = !isAsyncWrapper(vnode)
2110 | 
2111 |     let vnodeHook: VNodeHook | undefined | null
2112 |     if (
2113 |       shouldInvokeVnodeHook &&
2114 |       (vnodeHook = props && props.onVnodeBeforeUnmount)
2115 |     ) {
2116 |       invokeVNodeHook(vnodeHook, parentComponent, vnode)
2117 |     }
2118 | 
2119 |     if (shapeFlag & ShapeFlags.COMPONENT) {
2120 |       unmountComponent(vnode.component!, parentSuspense, doRemove)
2121 |     } else {
2122 |       if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
2123 |         vnode.suspense!.unmount(parentSuspense, doRemove)
2124 |         return
2125 |       }
2126 | 
2127 |       if (shouldInvokeDirs) {
2128 |         invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount')
2129 |       }
2130 | 
2131 |       if (shapeFlag & ShapeFlags.TELEPORT) {
2132 |         ;(vnode.type as typeof TeleportImpl).remove(
2133 |           vnode,
2134 |           parentComponent,
2135 |           parentSuspense,
2136 |           internals,
2137 |           doRemove,
2138 |         )
2139 |       } else if (
2140 |         dynamicChildren &&
2141 |         // #5154
2142 |         // when v-once is used inside a block, setBlockTracking(-1) marks the
2143 |         // parent block with hasOnce: true
2144 |         // so that it doesn't take the fast path during unmount - otherwise
2145 |         // components nested in v-once are never unmounted.
2146 |         !dynamicChildren.hasOnce &&
2147 |         // #1153: fast path should not be taken for non-stable (v-for) fragments
2148 |         (type !== Fragment ||
2149 |           (patchFlag > 0 && patchFlag & PatchFlags.STABLE_FRAGMENT))
2150 |       ) {
2151 |         // fast path for block nodes: only need to unmount dynamic children.
2152 |         unmountChildren(
2153 |           dynamicChildren,
2154 |           parentComponent,
2155 |           parentSuspense,
2156 |           false,
2157 |           true,
2158 |         )
2159 |       } else if (
2160 |         (type === Fragment &&
2161 |           patchFlag &
2162 |             (PatchFlags.KEYED_FRAGMENT | PatchFlags.UNKEYED_FRAGMENT)) ||
2163 |         (!optimized && shapeFlag & ShapeFlags.ARRAY_CHILDREN)
2164 |       ) {
2165 |         unmountChildren(children as VNode[], parentComponent, parentSuspense)
2166 |       }
2167 | 
2168 |       if (doRemove) {
2169 |         remove(vnode)
2170 |       }
2171 |     }
2172 | 
2173 |     if (
2174 |       (shouldInvokeVnodeHook &&
2175 |         (vnodeHook = props && props.onVnodeUnmounted)) ||
2176 |       shouldInvokeDirs
2177 |     ) {
2178 |       queuePostRenderEffect(() => {
2179 |         vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode)
2180 |         shouldInvokeDirs &&
2181 |           invokeDirectiveHook(vnode, null, parentComponent, 'unmounted')
2182 |       }, parentSuspense)
2183 |     }
2184 |   }
2185 | 
2186 |   const remove: RemoveFn = vnode => {
2187 |     const { type, el, anchor, transition } = vnode
2188 |     if (type === Fragment) {
2189 |       if (
2190 |         __DEV__ &&
2191 |         vnode.patchFlag > 0 &&
2192 |         vnode.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT &&
2193 |         transition &&
2194 |         !transition.persisted
2195 |       ) {
2196 |         ;(vnode.children as VNode[]).forEach(child => {
2197 |           if (child.type === Comment) {
2198 |             hostRemove(child.el!)
2199 |           } else {
2200 |             remove(child)
2201 |           }
2202 |         })
2203 |       } else {
2204 |         removeFragment(el!, anchor!)
2205 |       }
2206 |       return
2207 |     }
2208 | 
2209 |     if (type === Static) {
2210 |       removeStaticNode(vnode)
2211 |       return
2212 |     }
2213 | 
2214 |     const performRemove = () => {
2215 |       hostRemove(el!)
2216 |       if (transition && !transition.persisted && transition.afterLeave) {
2217 |         transition.afterLeave()
2218 |       }
2219 |     }
2220 | 
2221 |     if (
2222 |       vnode.shapeFlag & ShapeFlags.ELEMENT &&
2223 |       transition &&
2224 |       !transition.persisted
2225 |     ) {
2226 |       const { leave, delayLeave } = transition
2227 |       const performLeave = () => leave(el!, performRemove)
2228 |       if (delayLeave) {
2229 |         delayLeave(vnode.el!, performRemove, performLeave)
2230 |       } else {
2231 |         performLeave()
2232 |       }
2233 |     } else {
2234 |       performRemove()
2235 |     }
2236 |   }
2237 | 
2238 |   const removeFragment = (cur: RendererNode, end: RendererNode) => {
2239 |     // For fragments, directly remove all contained DOM nodes.
2240 |     // (fragment child nodes cannot have transition)
2241 |     let next
2242 |     while (cur !== end) {
2243 |       next = hostNextSibling(cur)!
2244 |       hostRemove(cur)
2245 |       cur = next
2246 |     }
2247 |     hostRemove(end)
2248 |   }
2249 | 
2250 |   const unmountComponent = (
2251 |     instance: ComponentInternalInstance,
2252 |     parentSuspense: SuspenseBoundary | null,
2253 |     doRemove?: boolean,
2254 |   ) => {
2255 |     if (__DEV__ && instance.type.__hmrId) {
2256 |       unregisterHMR(instance)
2257 |     }
2258 | 
2259 |     const { bum, scope, job, subTree, um, m, a } = instance
2260 |     invalidateMount(m)
2261 |     invalidateMount(a)
2262 | 
2263 |     // beforeUnmount hook
2264 |     if (bum) {
2265 |       invokeArrayFns(bum)
2266 |     }
2267 | 
2268 |     if (
2269 |       __COMPAT__ &&
2270 |       isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
2271 |     ) {
2272 |       instance.emit('hook:beforeDestroy')
2273 |     }
2274 | 
2275 |     // stop effects in component scope
2276 |     scope.stop()
2277 | 
2278 |     // job may be null if a component is unmounted before its async
2279 |     // setup has resolved.
2280 |     if (job) {
2281 |       // so that scheduler will no longer invoke it
2282 |       job.flags! |= SchedulerJobFlags.DISPOSED
2283 |       unmount(subTree, instance, parentSuspense, doRemove)
2284 |     }
2285 |     // unmounted hook
2286 |     if (um) {
2287 |       queuePostRenderEffect(um, parentSuspense)
2288 |     }
2289 |     if (
2290 |       __COMPAT__ &&
2291 |       isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
2292 |     ) {
2293 |       queuePostRenderEffect(
2294 |         () => instance.emit('hook:destroyed'),
2295 |         parentSuspense,
2296 |       )
2297 |     }
2298 |     queuePostRenderEffect(() => {
2299 |       instance.isUnmounted = true
2300 |     }, parentSuspense)
2301 | 
2302 |     // A component with async dep inside a pending suspense is unmounted before
2303 |     // its async dep resolves. This should remove the dep from the suspense, and
2304 |     // cause the suspense to resolve immediately if that was the last dep.
2305 |     if (
2306 |       __FEATURE_SUSPENSE__ &&
2307 |       parentSuspense &&
2308 |       parentSuspense.pendingBranch &&
2309 |       !parentSuspense.isUnmounted &&
2310 |       instance.asyncDep &&
2311 |       !instance.asyncResolved &&
2312 |       instance.suspenseId === parentSuspense.pendingId
2313 |     ) {
2314 |       parentSuspense.deps--
2315 |       if (parentSuspense.deps === 0) {
2316 |         parentSuspense.resolve()
2317 |       }
2318 |     }
2319 | 
2320 |     if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
2321 |       devtoolsComponentRemoved(instance)
2322 |     }
2323 |   }
2324 | 
2325 |   const unmountChildren: UnmountChildrenFn = (
2326 |     children,
2327 |     parentComponent,
2328 |     parentSuspense,
2329 |     doRemove = false,
2330 |     optimized = false,
2331 |     start = 0,
2332 |   ) => {
2333 |     for (let i = start; i < children.length; i++) {
2334 |       unmount(children[i], parentComponent, parentSuspense, doRemove, optimized)
2335 |     }
2336 |   }
2337 | 
2338 |   const getNextHostNode: NextFn = vnode => {
2339 |     if (vnode.shapeFlag & ShapeFlags.COMPONENT) {
2340 |       return getNextHostNode(vnode.component!.subTree)
2341 |     }
2342 |     if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
2343 |       return vnode.suspense!.next()
2344 |     }
2345 |     const el = hostNextSibling((vnode.anchor || vnode.el)!)
2346 |     // #9071, #9313
2347 |     // teleported content can mess up nextSibling searches during patch so
2348 |     // we need to skip them during nextSibling search
2349 |     const teleportEnd = el && el[TeleportEndKey]
2350 |     return teleportEnd ? hostNextSibling(teleportEnd) : el
2351 |   }
2352 | 
2353 |   let isFlushing = false
2354 |   const render: RootRenderFunction = (vnode, container, namespace) => {
2355 |     if (vnode == null) {
2356 |       if (container._vnode) {
2357 |         unmount(container._vnode, null, null, true)
2358 |       }
2359 |     } else {
2360 |       patch(
2361 |         container._vnode || null,
2362 |         vnode,
2363 |         container,
2364 |         null,
2365 |         null,
2366 |         null,
2367 |         namespace,
2368 |       )
2369 |     }
2370 |     container._vnode = vnode
2371 |     if (!isFlushing) {
2372 |       isFlushing = true
2373 |       flushPreFlushCbs()
2374 |       flushPostFlushCbs()
2375 |       isFlushing = false
2376 |     }
2377 |   }
2378 | 
2379 |   const internals: RendererInternals = {
2380 |     p: patch,
2381 |     um: unmount,
2382 |     m: move,
2383 |     r: remove,
2384 |     mt: mountComponent,
2385 |     mc: mountChildren,
2386 |     pc: patchChildren,
2387 |     pbc: patchBlockChildren,
2388 |     n: getNextHostNode,
2389 |     o: options,
2390 |   }
2391 | 
2392 |   let hydrate: ReturnType<typeof createHydrationFunctions>[0] | undefined
2393 |   let hydrateNode: ReturnType<typeof createHydrationFunctions>[1] | undefined
2394 |   if (createHydrationFns) {
2395 |     ;[hydrate, hydrateNode] = createHydrationFns(
2396 |       internals as RendererInternals<Node, Element>,
2397 |     )
2398 |   }
2399 | 
2400 |   return {
2401 |     render,
2402 |     hydrate,
2403 |     createApp: createAppAPI(render, hydrate),
2404 |   }
2405 | }
2406 | 
2407 | function resolveChildrenNamespace(
2408 |   { type, props }: VNode,
2409 |   currentNamespace: ElementNamespace,
2410 | ): ElementNamespace {
2411 |   return (currentNamespace === 'svg' && type === 'foreignObject') ||
2412 |     (currentNamespace === 'mathml' &&
2413 |       type === 'annotation-xml' &&
2414 |       props &&
2415 |       props.encoding &&
2416 |       props.encoding.includes('html'))
2417 |     ? undefined
2418 |     : currentNamespace
2419 | }
2420 | 
2421 | function toggleRecurse(
2422 |   { effect, job }: ComponentInternalInstance,
2423 |   allowed: boolean,
2424 | ) {
2425 |   if (allowed) {
2426 |     effect.flags |= EffectFlags.ALLOW_RECURSE
2427 |     job.flags! |= SchedulerJobFlags.ALLOW_RECURSE
2428 |   } else {
2429 |     effect.flags &= ~EffectFlags.ALLOW_RECURSE
2430 |     job.flags! &= ~SchedulerJobFlags.ALLOW_RECURSE
2431 |   }
2432 | }
2433 | 
2434 | export function needTransition(
2435 |   parentSuspense: SuspenseBoundary | null,
2436 |   transition: TransitionHooks | null,
2437 | ): boolean | null {
2438 |   return (
2439 |     (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&
2440 |     transition &&
2441 |     !transition.persisted
2442 |   )
2443 | }
2444 | 
2445 | /**
2446 |  * #1156
2447 |  * When a component is HMR-enabled, we need to make sure that all static nodes
2448 |  * inside a block also inherit the DOM element from the previous tree so that
2449 |  * HMR updates (which are full updates) can retrieve the element for patching.
2450 |  *
2451 |  * #2080
2452 |  * Inside keyed `template` fragment static children, if a fragment is moved,
2453 |  * the children will always be moved. Therefore, in order to ensure correct move
2454 |  * position, el should be inherited from previous nodes.
2455 |  */
2456 | export function traverseStaticChildren(
2457 |   n1: VNode,
2458 |   n2: VNode,
2459 |   shallow = false,
2460 | ): void {
2461 |   const ch1 = n1.children
2462 |   const ch2 = n2.children
2463 |   if (isArray(ch1) && isArray(ch2)) {
2464 |     for (let i = 0; i < ch1.length; i++) {
2465 |       // this is only called in the optimized path so array children are
2466 |       // guaranteed to be vnodes
2467 |       const c1 = ch1[i] as VNode
2468 |       let c2 = ch2[i] as VNode
2469 |       if (c2.shapeFlag & ShapeFlags.ELEMENT && !c2.dynamicChildren) {
2470 |         if (c2.patchFlag <= 0 || c2.patchFlag === PatchFlags.NEED_HYDRATION) {
2471 |           c2 = ch2[i] = cloneIfMounted(ch2[i] as VNode)
2472 |           c2.el = c1.el
2473 |         }
2474 |         if (!shallow && c2.patchFlag !== PatchFlags.BAIL)
2475 |           traverseStaticChildren(c1, c2)
2476 |       }
2477 |       // #6852 also inherit for text nodes
2478 |       if (c2.type === Text) {
2479 |         c2.el = c1.el
2480 |       }
2481 |       // also inherit for comment nodes, but not placeholders (e.g. v-if which
2482 |       // would have received .el during block patch)
2483 |       if (__DEV__ && c2.type === Comment && !c2.el) {
2484 |         c2.el = c1.el
2485 |       }
2486 |     }
2487 |   }
2488 | }
2489 | 
2490 | // https://en.wikipedia.org/wiki/Longest_increasing_subsequence
2491 | function getSequence(arr: number[]): number[] {
2492 |   const p = arr.slice()
2493 |   const result = [0]
2494 |   let i, j, u, v, c
2495 |   const len = arr.length
2496 |   for (i = 0; i < len; i++) {
2497 |     const arrI = arr[i]
2498 |     if (arrI !== 0) {
2499 |       j = result[result.length - 1]
2500 |       if (arr[j] < arrI) {
2501 |         p[i] = j
2502 |         result.push(i)
2503 |         continue
2504 |       }
2505 |       u = 0
2506 |       v = result.length - 1
2507 |       while (u < v) {
2508 |         c = (u + v) >> 1
2509 |         if (arr[result[c]] < arrI) {
2510 |           u = c + 1
2511 |         } else {
2512 |           v = c
2513 |         }
2514 |       }
2515 |       if (arrI < arr[result[u]]) {
2516 |         if (u > 0) {
2517 |           p[i] = result[u - 1]
2518 |         }
2519 |         result[u] = i
2520 |       }
2521 |     }
2522 |   }
2523 |   u = result.length
2524 |   v = result[u - 1]
2525 |   while (u-- > 0) {
2526 |     result[u] = v
2527 |     v = p[v]
2528 |   }
2529 |   return result
2530 | }
2531 | 
2532 | function locateNonHydratedAsyncRoot(
2533 |   instance: ComponentInternalInstance,
2534 | ): ComponentInternalInstance | undefined {
2535 |   const subComponent = instance.subTree.component
2536 |   if (subComponent) {
2537 |     if (subComponent.asyncDep && !subComponent.asyncResolved) {
2538 |       return subComponent
2539 |     } else {
2540 |       return locateNonHydratedAsyncRoot(subComponent)
2541 |     }
2542 |   }
2543 | }
2544 | 
2545 | export function invalidateMount(hooks: LifecycleHook): void {
2546 |   if (hooks) {
2547 |     for (let i = 0; i < hooks.length; i++)
2548 |       hooks[i].flags! |= SchedulerJobFlags.DISPOSED
2549 |   }
2550 | }
2551 | 


--------------------------------------------------------------------------------
/fixtures/table.tsx:
--------------------------------------------------------------------------------
   1 | import type { MenuProps } from '@affine/component';
   2 | import { Button, IconButton, Menu, MenuItem, Tooltip } from '@affine/component';
   3 | import { useCurrentWorkspacePropertiesAdapter } from '@affine/core/components/hooks/use-affine-adapter';
   4 | import { DocLinksService } from '@affine/core/modules/doc-link';
   5 | import { EditorSettingService } from '@affine/core/modules/editor-settting';
   6 | import type {
   7 |   PageInfoCustomProperty,
   8 |   PageInfoCustomPropertyMeta,
   9 |   PagePropertyType,
  10 | } from '@affine/core/modules/properties/services/schema';
  11 | import { i18nTime, useI18n } from '@affine/i18n';
  12 | import { track } from '@affine/track';
  13 | import { assertExists } from '@blocksuite/affine/global/utils';
  14 | import {
  15 |   ArrowDownSmallIcon,
  16 |   DeleteIcon,
  17 |   InvisibleIcon,
  18 |   MoreHorizontalIcon,
  19 |   PlusIcon,
  20 |   TagsIcon,
  21 |   ToggleExpandIcon,
  22 |   ViewIcon,
  23 | } from '@blocksuite/icons/rc';
  24 | import type { DragEndEvent, DraggableAttributes } from '@dnd-kit/core';
  25 | import {
  26 |   DndContext,
  27 |   PointerSensor,
  28 |   useSensor,
  29 |   useSensors,
  30 | } from '@dnd-kit/core';
  31 | import {
  32 |   restrictToParentElement,
  33 |   restrictToVerticalAxis,
  34 | } from '@dnd-kit/modifiers';
  35 | import { SortableContext, useSortable } from '@dnd-kit/sortable';
  36 | import * as Collapsible from '@radix-ui/react-collapsible';
  37 | import {
  38 |   DocService,
  39 |   useLiveData,
  40 |   useServices,
  41 |   WorkspaceService,
  42 | } from '@toeverything/infra';
  43 | import clsx from 'clsx';
  44 | import { use } from 'foxact/use';
  45 | import { useDebouncedValue } from 'foxact/use-debounced-value';
  46 | import { atom, useAtomValue, useSetAtom } from 'jotai';
  47 | import type React from 'react';
  48 | import type {
  49 |   CSSProperties,
  50 |   MouseEvent,
  51 |   MouseEventHandler,
  52 |   PropsWithChildren,
  53 | } from 'react';
  54 | import {
  55 |   Suspense,
  56 |   useCallback,
  57 |   useContext,
  58 |   useEffect,
  59 |   useMemo,
  60 |   useState,
  61 | } from 'react';
  62 | 
  63 | import { AffinePageReference } from '../reference-link';
  64 | import { managerContext } from './common';
  65 | import { ConfirmDeletePropertyModal } from './confirm-delete-property-modal';
  66 | import type { PagePropertyIcon } from './icons-mapping';
  67 | import { getDefaultIconName, nameToIcon } from './icons-mapping';
  68 | import type { MenuItemOption } from './menu-items';
  69 | import {
  70 |   EditPropertyNameMenuItem,
  71 |   PropertyTypeMenuItem,
  72 |   renderMenuItemOptions,
  73 | } from './menu-items';
  74 | import type { PagePropertiesMetaManager } from './page-properties-manager';
  75 | import {
  76 |   newPropertyTypes,
  77 |   PagePropertiesManager,
  78 | } from './page-properties-manager';
  79 | import {
  80 |   propertyValueRenderers,
  81 |   TagsValue,
  82 | } from './property-row-value-renderer';
  83 | import * as styles from './styles.css';
  84 | 
  85 | type PagePropertiesSettingsPopupProps = PropsWithChildren<{
  86 |   className?: string;
  87 |   style?: React.CSSProperties;
  88 | }>;
  89 | 
  90 | const Divider = () => <div className={styles.tableHeaderDivider} />;
  91 | 
  92 | type PropertyVisibility = PageInfoCustomProperty['visibility'];
  93 | 
  94 | const editingPropertyAtom = atom<string | null>(null);
  95 | 
  96 | const modifiers = [restrictToParentElement, restrictToVerticalAxis];
  97 | 
  98 | interface SortablePropertiesProps {
  99 |   children: (properties: PageInfoCustomProperty[]) => React.ReactNode;
 100 | }
 101 | 
 102 | export const SortableProperties = ({ children }: SortablePropertiesProps) => {
 103 |   const manager = useContext(managerContext);
 104 |   const properties = useMemo(() => manager.sorter.getOrderedItems(), [manager]);
 105 |   const editingItem = useAtomValue(editingPropertyAtom);
 106 |   const draggable = !manager.readonly && !editingItem;
 107 |   const sensors = useSensors(
 108 |     useSensor(PointerSensor, {
 109 |       activationConstraint: {
 110 |         distance: 8,
 111 |       },
 112 |     })
 113 |   );
 114 |   // use localProperties since changes applied to upstream may be delayed
 115 |   // if we use that one, there will be weird behavior after reordering
 116 |   const [localProperties, setLocalProperties] = useState(properties);
 117 | 
 118 |   useEffect(() => {
 119 |     setLocalProperties(properties);
 120 |   }, [properties]);
 121 | 
 122 |   const onDragEnd = useCallback(
 123 |     (event: DragEndEvent) => {
 124 |       if (!draggable) {
 125 |         return;
 126 |       }
 127 |       const { active, over } = event;
 128 |       if (over) {
 129 |         manager.sorter.move(active.id, over.id);
 130 |       }
 131 |       setLocalProperties(manager.sorter.getOrderedItems());
 132 |     },
 133 |     [manager, draggable]
 134 |   );
 135 | 
 136 |   const filteredProperties = useMemo(
 137 |     () => localProperties.filter(p => manager.getCustomPropertyMeta(p.id)),
 138 |     [localProperties, manager]
 139 |   );
 140 | 
 141 |   return (
 142 |     <DndContext sensors={sensors} onDragEnd={onDragEnd} modifiers={modifiers}>
 143 |       <SortableContext disabled={!draggable} items={properties}>
 144 |         {children(filteredProperties)}
 145 |       </SortableContext>
 146 |     </DndContext>
 147 |   );
 148 | };
 149 | 
 150 | type SyntheticListenerMap = ReturnType<typeof useSortable>['listeners'];
 151 | 
 152 | const SortablePropertyRow = ({
 153 |   property,
 154 |   className,
 155 |   children,
 156 |   ...props
 157 | }: {
 158 |   property: PageInfoCustomProperty;
 159 |   className?: string;
 160 |   children?:
 161 |     | React.ReactNode
 162 |     | ((props: {
 163 |         attributes: DraggableAttributes;
 164 |         listeners?: SyntheticListenerMap;
 165 |       }) => React.ReactNode);
 166 | }) => {
 167 |   const manager = useContext(managerContext);
 168 |   const {
 169 |     setNodeRef,
 170 |     attributes,
 171 |     listeners,
 172 |     transform,
 173 |     transition,
 174 |     active,
 175 |     isDragging,
 176 |     isSorting,
 177 |   } = useSortable({
 178 |     id: property.id,
 179 |   });
 180 |   const style: CSSProperties = useMemo(
 181 |     () => ({
 182 |       transform: transform
 183 |         ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
 184 |         : undefined,
 185 |       transition: isSorting ? transition : undefined,
 186 |       pointerEvents: manager.readonly ? 'none' : undefined,
 187 |     }),
 188 |     [isSorting, manager.readonly, transform, transition]
 189 |   );
 190 | 
 191 |   return (
 192 |     <div
 193 |       style={style}
 194 |       ref={setNodeRef}
 195 |       className={clsx(styles.propertyRow, className)}
 196 |       data-property={property.id}
 197 |       data-draggable={!manager.readonly}
 198 |       data-dragging={isDragging}
 199 |       data-other-dragging={active ? active.id !== property.id : false}
 200 |       {...props}
 201 |       {...attributes}
 202 |       {...listeners}
 203 |     >
 204 |       {typeof children === 'function'
 205 |         ? children({ attributes, listeners })
 206 |         : children}
 207 |     </div>
 208 |   );
 209 | };
 210 | 
 211 | const visibilities: PropertyVisibility[] = ['visible', 'hide', 'hide-if-empty'];
 212 | const rotateVisibility = (
 213 |   visibility: PropertyVisibility
 214 | ): PropertyVisibility => {
 215 |   const index = visibilities.indexOf(visibility);
 216 |   return visibilities[(index + 1) % visibilities.length];
 217 | };
 218 | 
 219 | const visibilityMenuText = (visibility: PropertyVisibility = 'visible') => {
 220 |   switch (visibility) {
 221 |     case 'hide':
 222 |       return 'com.affine.page-properties.property.hide-in-view';
 223 |     case 'hide-if-empty':
 224 |       return 'com.affine.page-properties.property.hide-in-view-when-empty';
 225 |     case 'visible':
 226 |       return 'com.affine.page-properties.property.show-in-view';
 227 |     default:
 228 |       throw new Error(`unknown visibility: ${visibility}`);
 229 |   }
 230 | };
 231 | 
 232 | const visibilitySelectorText = (visibility: PropertyVisibility = 'visible') => {
 233 |   switch (visibility) {
 234 |     case 'hide':
 235 |       return 'com.affine.page-properties.property.always-hide';
 236 |     case 'hide-if-empty':
 237 |       return 'com.affine.page-properties.property.hide-when-empty';
 238 |     case 'visible':
 239 |       return 'com.affine.page-properties.property.always-show';
 240 |     default:
 241 |       throw new Error(`unknown visibility: ${visibility}`);
 242 |   }
 243 | };
 244 | 
 245 | const VisibilityModeSelector = ({
 246 |   property,
 247 | }: {
 248 |   property: PageInfoCustomProperty;
 249 | }) => {
 250 |   const manager = useContext(managerContext);
 251 |   const t = useI18n();
 252 |   const meta = manager.getCustomPropertyMeta(property.id);
 253 |   const visibility = property.visibility || 'visible';
 254 | 
 255 |   const menuItems = useMemo(() => {
 256 |     const options: MenuItemOption[] = [];
 257 |     options.push(
 258 |       visibilities.map(v => {
 259 |         const text = visibilityMenuText(v);
 260 |         return {
 261 |           text: t[text](),
 262 |           selected: visibility === v,
 263 |           onClick: () => {
 264 |             manager.updateCustomProperty(property.id, {
 265 |               visibility: v,
 266 |             });
 267 |           },
 268 |         };
 269 |       })
 270 |     );
 271 |     return renderMenuItemOptions(options);
 272 |   }, [manager, property.id, t, visibility]);
 273 | 
 274 |   if (!meta) {
 275 |     return null;
 276 |   }
 277 | 
 278 |   const required = meta.required;
 279 | 
 280 |   return (
 281 |     <Menu
 282 |       items={menuItems}
 283 |       rootOptions={{
 284 |         open: required ? false : undefined,
 285 |       }}
 286 |       contentOptions={{
 287 |         onClick(e) {
 288 |           e.stopPropagation();
 289 |         },
 290 |       }}
 291 |     >
 292 |       <div
 293 |         role="button"
 294 |         data-required={required}
 295 |         className={styles.selectorButton}
 296 |       >
 297 |         {required ? (
 298 |           t['com.affine.page-properties.property.required']()
 299 |         ) : (
 300 |           <>
 301 |             {t[visibilitySelectorText(visibility)]()}
 302 |             <ArrowDownSmallIcon width={16} height={16} />
 303 |           </>
 304 |         )}
 305 |       </div>
 306 |     </Menu>
 307 |   );
 308 | };
 309 | 
 310 | export const PagePropertiesSettingsPopup = ({
 311 |   children,
 312 | }: PagePropertiesSettingsPopupProps) => {
 313 |   const manager = useContext(managerContext);
 314 |   const t = useI18n();
 315 | 
 316 |   const menuItems = useMemo(() => {
 317 |     const options: MenuItemOption[] = [];
 318 |     options.push(
 319 |       <div
 320 |         role="heading"
 321 |         className={styles.menuHeader}
 322 |         style={{ minWidth: 320 }}
 323 |       >
 324 |         {t['com.affine.page-properties.settings.title']()}
 325 |       </div>
 326 |     );
 327 |     options.push('-');
 328 |     options.push([
 329 |       <SortableProperties key="sortable-settings">
 330 |         {properties =>
 331 |           properties.map(property => {
 332 |             const meta = manager.getCustomPropertyMeta(property.id);
 333 |             assertExists(meta, 'meta should exist for property');
 334 |             const Icon = nameToIcon(meta.icon, meta.type);
 335 |             const name = meta.name;
 336 |             return (
 337 |               <SortablePropertyRow
 338 |                 key={meta.id}
 339 |                 property={property}
 340 |                 className={styles.propertySettingRow}
 341 |                 data-testid="page-properties-settings-menu-item"
 342 |               >
 343 |                 <Icon />
 344 |                 <div
 345 |                   data-testid="page-property-setting-row-name"
 346 |                   className={styles.propertyRowName}
 347 |                 >
 348 |                   {name}
 349 |                 </div>
 350 |                 <VisibilityModeSelector property={property} />
 351 |               </SortablePropertyRow>
 352 |             );
 353 |           })
 354 |         }
 355 |       </SortableProperties>,
 356 |     ]);
 357 |     return renderMenuItemOptions(options);
 358 |   }, [manager, t]);
 359 | 
 360 |   return (
 361 |     <Menu
 362 |       contentOptions={{
 363 |         onClick(e) {
 364 |           e.stopPropagation();
 365 |         },
 366 |       }}
 367 |       items={menuItems}
 368 |     >
 369 |       {children}
 370 |     </Menu>
 371 |   );
 372 | };
 373 | 
 374 | type PageBacklinksPopupProps = PropsWithChildren<{
 375 |   backlinks: { docId: string; blockId: string; title: string }[];
 376 | }>;
 377 | 
 378 | export const PageBacklinksPopup = ({
 379 |   backlinks,
 380 |   children,
 381 | }: PageBacklinksPopupProps) => {
 382 |   return (
 383 |     <Menu
 384 |       contentOptions={{
 385 |         onClick(e) {
 386 |           e.stopPropagation();
 387 |         },
 388 |       }}
 389 |       items={
 390 |         <div className={styles.backlinksList}>
 391 |           {backlinks.map(link => (
 392 |             <AffinePageReference
 393 |               key={link.docId + ':' + link.blockId}
 394 |               wrapper={MenuItem}
 395 |               pageId={link.docId}
 396 |             />
 397 |           ))}
 398 |         </div>
 399 |       }
 400 |     >
 401 |       {children}
 402 |     </Menu>
 403 |   );
 404 | };
 405 | 
 406 | interface PagePropertyRowNameProps {
 407 |   property: PageInfoCustomProperty;
 408 |   meta: PageInfoCustomPropertyMeta;
 409 |   editing: boolean;
 410 |   onFinishEditing: () => void;
 411 | }
 412 | 
 413 | export const PagePropertyRowNameMenu = ({
 414 |   editing,
 415 |   meta,
 416 |   property,
 417 |   onFinishEditing,
 418 |   children,
 419 | }: PropsWithChildren<PagePropertyRowNameProps>) => {
 420 |   const manager = useContext(managerContext);
 421 |   const [localPropertyMeta, setLocalPropertyMeta] = useState(() => ({
 422 |     ...meta,
 423 |   }));
 424 |   const [localProperty, setLocalProperty] = useState(() => ({ ...property }));
 425 |   const nextVisibility = rotateVisibility(localProperty.visibility);
 426 | 
 427 |   const [showDeleteModal, setShowDeleteModal] = useState(false);
 428 | 
 429 |   useEffect(() => {
 430 |     setLocalPropertyMeta(meta);
 431 |   }, [meta]);
 432 | 
 433 |   useEffect(() => {
 434 |     setLocalProperty(property);
 435 |   }, [property]);
 436 | 
 437 |   const handleFinishEditing = useCallback(() => {
 438 |     onFinishEditing();
 439 |     manager.updateCustomPropertyMeta(meta.id, localPropertyMeta);
 440 |     manager.updateCustomProperty(property.id, localProperty);
 441 |   }, [
 442 |     localProperty,
 443 |     localPropertyMeta,
 444 |     manager,
 445 |     meta.id,
 446 |     onFinishEditing,
 447 |     property.id,
 448 |   ]);
 449 |   const t = useI18n();
 450 |   const handleNameBlur = useCallback(
 451 |     (v: string) => {
 452 |       manager.updateCustomPropertyMeta(meta.id, {
 453 |         name: v,
 454 |       });
 455 |     },
 456 |     [manager, meta.id]
 457 |   );
 458 |   const handleNameChange: (name: string) => void = useCallback(name => {
 459 |     setLocalPropertyMeta(prev => ({
 460 |       ...prev,
 461 |       name: name,
 462 |     }));
 463 |   }, []);
 464 |   const toggleHide = useCallback(
 465 |     (e: MouseEvent) => {
 466 |       e.stopPropagation();
 467 |       e.preventDefault();
 468 |       setLocalProperty(prev => ({
 469 |         ...prev,
 470 |         visibility: nextVisibility,
 471 |       }));
 472 |     },
 473 |     [nextVisibility]
 474 |   );
 475 |   const handleDelete = useCallback(() => {
 476 |     manager.removeCustomProperty(property.id);
 477 |   }, [manager, property.id]);
 478 | 
 479 |   const handleIconChange = useCallback(
 480 |     (icon: PagePropertyIcon) => {
 481 |       setLocalPropertyMeta(prev => ({
 482 |         ...prev,
 483 |         icon,
 484 |       }));
 485 |       manager.updateCustomPropertyMeta(meta.id, {
 486 |         icon: icon,
 487 |       });
 488 |     },
 489 |     [manager, meta.id]
 490 |   );
 491 | 
 492 |   const menuItems = useMemo(() => {
 493 |     const options: MenuItemOption[] = [];
 494 |     options.push(
 495 |       <EditPropertyNameMenuItem
 496 |         property={localPropertyMeta}
 497 |         onIconChange={handleIconChange}
 498 |         onNameBlur={handleNameBlur}
 499 |         onNameChange={handleNameChange}
 500 |       />
 501 |     );
 502 |     options.push(<PropertyTypeMenuItem property={localPropertyMeta} />);
 503 |     if (!localPropertyMeta.required) {
 504 |       options.push('-');
 505 |       options.push({
 506 |         icon:
 507 |           nextVisibility === 'hide' || nextVisibility === 'hide-if-empty' ? (
 508 |             <InvisibleIcon />
 509 |           ) : (
 510 |             <ViewIcon />
 511 |           ),
 512 |         text: t[
 513 |           visibilityMenuText(rotateVisibility(localProperty.visibility))
 514 |         ](),
 515 |         onClick: toggleHide,
 516 |       });
 517 |       options.push({
 518 |         type: 'danger',
 519 |         icon: <DeleteIcon />,
 520 |         text: t['com.affine.page-properties.property.remove-property'](),
 521 |         onClick: () => setShowDeleteModal(true),
 522 |       });
 523 |     }
 524 |     return renderMenuItemOptions(options);
 525 |   }, [
 526 |     handleIconChange,
 527 |     handleNameBlur,
 528 |     handleNameChange,
 529 |     localProperty.visibility,
 530 |     localPropertyMeta,
 531 |     nextVisibility,
 532 |     t,
 533 |     toggleHide,
 534 |   ]);
 535 | 
 536 |   return (
 537 |     <>
 538 |       <Menu
 539 |         rootOptions={{
 540 |           open: editing,
 541 |         }}
 542 |         contentOptions={{
 543 |           onInteractOutside: handleFinishEditing,
 544 |           onClick(e) {
 545 |             e.stopPropagation();
 546 |           },
 547 |           onKeyDown(e) {
 548 |             if (e.key === 'Escape') {
 549 |               handleFinishEditing();
 550 |             }
 551 |           },
 552 |         }}
 553 |         items={menuItems}
 554 |       >
 555 |         {children}
 556 |       </Menu>
 557 |       <ConfirmDeletePropertyModal
 558 |         onConfirm={() => {
 559 |           setShowDeleteModal(false);
 560 |           handleDelete();
 561 |         }}
 562 |         onCancel={() => setShowDeleteModal(false)}
 563 |         show={showDeleteModal}
 564 |         property={meta}
 565 |       />
 566 |     </>
 567 |   );
 568 | };
 569 | 
 570 | interface PagePropertiesTableHeaderProps {
 571 |   className?: string;
 572 |   style?: React.CSSProperties;
 573 |   open: boolean;
 574 |   onOpenChange: (open: boolean) => void;
 575 | }
 576 | 
 577 | // backlinks - #no                Updated yyyy-mm-dd
 578 | // ─────────────────────────────────────────────────
 579 | // Page Info ...
 580 | export const PagePropertiesTableHeader = ({
 581 |   className,
 582 |   style,
 583 |   open,
 584 |   onOpenChange,
 585 | }: PagePropertiesTableHeaderProps) => {
 586 |   const manager = useContext(managerContext);
 587 | 
 588 |   const t = useI18n();
 589 |   const {
 590 |     docLinksServices,
 591 |     docService,
 592 |     workspaceService,
 593 |     editorSettingService,
 594 |   } = useServices({
 595 |     DocLinksServices: DocLinksService,
 596 |     DocService,
 597 |     WorkspaceService,
 598 |     EditorSettingService,
 599 |   });
 600 |   const docBacklinks = docLinksServices.backlinks;
 601 |   const backlinks = useLiveData(docBacklinks.backlinks$);
 602 | 
 603 |   const displayDocInfo = useLiveData(
 604 |     editorSettingService.editorSetting.settings$.selector(s => s.displayDocInfo)
 605 |   );
 606 | 
 607 |   const { syncing, retrying, serverClock } = useLiveData(
 608 |     workspaceService.workspace.engine.doc.docState$(docService.doc.id)
 609 |   );
 610 | 
 611 |   const timestampElement = useMemo(() => {
 612 |     const localizedCreateTime = manager.createDate
 613 |       ? i18nTime(manager.createDate)
 614 |       : null;
 615 | 
 616 |     const createTimeElement = (
 617 |       <div className={styles.tableHeaderTimestamp}>
 618 |         {t['Created']()} {localizedCreateTime}
 619 |       </div>
 620 |     );
 621 | 
 622 |     return serverClock ? (
 623 |       <Tooltip
 624 |         side="right"
 625 |         content={
 626 |           <>
 627 |             <div className={styles.tableHeaderTimestamp}>
 628 |               {t['Updated']()} {i18nTime(serverClock)}
 629 |             </div>
 630 |             {manager.createDate && (
 631 |               <div className={styles.tableHeaderTimestamp}>
 632 |                 {t['Created']()} {i18nTime(manager.createDate)}
 633 |               </div>
 634 |             )}
 635 |           </>
 636 |         }
 637 |       >
 638 |         <div className={styles.tableHeaderTimestamp}>
 639 |           {!syncing && !retrying ? (
 640 |             <>
 641 |               {t['Updated']()}{' '}
 642 |               {i18nTime(serverClock, {
 643 |                 relative: {
 644 |                   max: [1, 'day'],
 645 |                   accuracy: 'minute',
 646 |                 },
 647 |                 absolute: {
 648 |                   accuracy: 'day',
 649 |                 },
 650 |               })}
 651 |             </>
 652 |           ) : (
 653 |             <>{t['com.affine.syncing']()}</>
 654 |           )}
 655 |         </div>
 656 |       </Tooltip>
 657 |     ) : manager.updatedDate ? (
 658 |       <Tooltip side="right" content={createTimeElement}>
 659 |         <div className={styles.tableHeaderTimestamp}>
 660 |           {t['Updated']()} {i18nTime(manager.updatedDate)}
 661 |         </div>
 662 |       </Tooltip>
 663 |     ) : (
 664 |       createTimeElement
 665 |     );
 666 |   }, [
 667 |     manager.createDate,
 668 |     manager.updatedDate,
 669 |     retrying,
 670 |     serverClock,
 671 |     syncing,
 672 |     t,
 673 |   ]);
 674 | 
 675 |   const dTimestampElement = useDebouncedValue(timestampElement, 500);
 676 | 
 677 |   const handleCollapse = useCallback(() => {
 678 |     track.doc.inlineDocInfo.$.toggle();
 679 |     onOpenChange(!open);
 680 |   }, [onOpenChange, open]);
 681 | 
 682 |   const properties = manager.sorter.getOrderedItems();
 683 | 
 684 |   return (
 685 |     <div className={clsx(styles.tableHeader, className)} style={style}>
 686 |       {/* TODO(@Peng): add click handler to backlinks */}
 687 |       <div className={styles.tableHeaderInfoRow}>
 688 |         {backlinks.length > 0 ? (
 689 |           <PageBacklinksPopup backlinks={backlinks}>
 690 |             <div className={styles.tableHeaderBacklinksHint}>
 691 |               {t['com.affine.page-properties.backlinks']()} · {backlinks.length}
 692 |             </div>
 693 |           </PageBacklinksPopup>
 694 |         ) : null}
 695 |         {dTimestampElement}
 696 |       </div>
 697 |       <Divider />
 698 |       {displayDocInfo ? (
 699 |         <div className={styles.tableHeaderSecondaryRow}>
 700 |           <div className={clsx(!open ? styles.pageInfoDimmed : null)}>
 701 |             {t['com.affine.page-properties.page-info']()}
 702 |           </div>
 703 |           {properties.length === 0 || manager.readonly ? null : (
 704 |             <PagePropertiesSettingsPopup>
 705 |               <IconButton data-testid="page-info-show-more" size="20">
 706 |                 <MoreHorizontalIcon />
 707 |               </IconButton>
 708 |             </PagePropertiesSettingsPopup>
 709 |           )}
 710 |           <Collapsible.Trigger asChild role="button" onClick={handleCollapse}>
 711 |             <div
 712 |               className={styles.tableHeaderCollapseButtonWrapper}
 713 |               data-testid="page-info-collapse"
 714 |             >
 715 |               <IconButton size="20">
 716 |                 <ToggleExpandIcon
 717 |                   className={styles.collapsedIcon}
 718 |                   data-collapsed={!open}
 719 |                 />
 720 |               </IconButton>
 721 |             </div>
 722 |           </Collapsible.Trigger>
 723 |         </div>
 724 |       ) : null}
 725 |     </div>
 726 |   );
 727 | };
 728 | 
 729 | interface PagePropertyRowProps {
 730 |   property: PageInfoCustomProperty;
 731 |   style?: React.CSSProperties;
 732 |   rowNameClassName?: string;
 733 | }
 734 | 
 735 | export const PagePropertyRow = ({
 736 |   property,
 737 |   rowNameClassName,
 738 | }: PagePropertyRowProps) => {
 739 |   const manager = useContext(managerContext);
 740 |   const meta = manager.getCustomPropertyMeta(property.id);
 741 | 
 742 |   assertExists(meta, 'meta should exist for property');
 743 | 
 744 |   const Icon = nameToIcon(meta.icon, meta.type);
 745 |   const name = meta.name;
 746 |   const ValueRenderer = propertyValueRenderers[meta.type];
 747 |   const [editingMeta, setEditingMeta] = useState(false);
 748 |   const setEditingItem = useSetAtom(editingPropertyAtom);
 749 |   const handleEditMeta = useCallback(() => {
 750 |     if (!manager.readonly) {
 751 |       setEditingMeta(true);
 752 |     }
 753 |     setEditingItem(property.id);
 754 |   }, [manager.readonly, property.id, setEditingItem]);
 755 |   const handleFinishEditingMeta = useCallback(() => {
 756 |     setEditingMeta(false);
 757 |     setEditingItem(null);
 758 |   }, [setEditingItem]);
 759 | 
 760 |   // NOTE: if we define a new property type, the value render may not exists in old client
 761 |   //       skip rendering if value render is not define yet
 762 |   if (!ValueRenderer || typeof ValueRenderer !== 'function') return null;
 763 | 
 764 |   return (
 765 |     <SortablePropertyRow property={property} data-testid="page-property-row">
 766 |       {({ attributes, listeners }) => (
 767 |         <>
 768 |           <PagePropertyRowNameMenu
 769 |             editing={editingMeta}
 770 |             meta={meta}
 771 |             property={property}
 772 |             onFinishEditing={handleFinishEditingMeta}
 773 |           >
 774 |             <div
 775 |               {...attributes}
 776 |               {...listeners}
 777 |               data-testid="page-property-row-name"
 778 |               className={clsx(
 779 |                 styles.sortablePropertyRowNameCell,
 780 |                 rowNameClassName
 781 |               )}
 782 |               onClick={handleEditMeta}
 783 |             >
 784 |               <div className={styles.propertyRowNameContainer}>
 785 |                 <div className={styles.propertyRowIconContainer}>
 786 |                   <Icon />
 787 |                 </div>
 788 |                 <div className={styles.propertyRowName}>{name}</div>
 789 |               </div>
 790 |             </div>
 791 |           </PagePropertyRowNameMenu>
 792 |           <ValueRenderer meta={meta} property={property} />
 793 |         </>
 794 |       )}
 795 |     </SortablePropertyRow>
 796 |   );
 797 | };
 798 | 
 799 | export const PageTagsRow = ({
 800 |   rowNameClassName,
 801 | }: {
 802 |   rowNameClassName?: string;
 803 | }) => {
 804 |   const t = useI18n();
 805 |   return (
 806 |     <div
 807 |       className={styles.tagsPropertyRow}
 808 |       data-testid="page-property-row"
 809 |       data-property="tags"
 810 |     >
 811 |       <div
 812 |         className={clsx(styles.propertyRowNameCell, rowNameClassName)}
 813 |         data-testid="page-property-row-name"
 814 |       >
 815 |         <div className={styles.propertyRowNameContainer}>
 816 |           <div className={styles.propertyRowIconContainer}>
 817 |             <TagsIcon />
 818 |           </div>
 819 |           <div className={styles.propertyRowName}>{t['Tags']()}</div>
 820 |         </div>
 821 |       </div>
 822 |       <TagsValue />
 823 |     </div>
 824 |   );
 825 | };
 826 | 
 827 | interface PagePropertiesTableBodyProps {
 828 |   className?: string;
 829 |   style?: React.CSSProperties;
 830 | }
 831 | 
 832 | // 🏷️ Tags     (⋅ xxx) (⋅ yyy)
 833 | // #️⃣ Number   123456
 834 | // +  Add a property
 835 | export const PagePropertiesTableBody = ({
 836 |   className,
 837 |   style,
 838 | }: PagePropertiesTableBodyProps) => {
 839 |   const manager = useContext(managerContext);
 840 |   return (
 841 |     <Collapsible.Content
 842 |       className={clsx(styles.tableBodyRoot, className)}
 843 |       style={style}
 844 |     >
 845 |       <PageTagsRow />
 846 |       <SortableProperties>
 847 |         {properties =>
 848 |           properties.length ? (
 849 |             <div className={styles.tableBodySortable}>
 850 |               {properties
 851 |                 .filter(
 852 |                   property =>
 853 |                     manager.isPropertyRequired(property.id) ||
 854 |                     (property.visibility !== 'hide' &&
 855 |                       !(
 856 |                         property.visibility === 'hide-if-empty' &&
 857 |                         !property.value
 858 |                       ))
 859 |                 )
 860 |                 .map(property => (
 861 |                   <PagePropertyRow key={property.id} property={property} />
 862 |                 ))}
 863 |             </div>
 864 |           ) : null
 865 |         }
 866 |       </SortableProperties>
 867 |       {manager.readonly ? null : <PagePropertiesAddProperty />}
 868 |       <Divider />
 869 |     </Collapsible.Content>
 870 |   );
 871 | };
 872 | 
 873 | interface PagePropertiesCreatePropertyMenuItemsProps {
 874 |   onCreated?: (e: React.MouseEvent, id: string) => void;
 875 |   metaManager: PagePropertiesMetaManager;
 876 | }
 877 | 
 878 | const findNextDefaultName = (name: string, allNames: string[]): string => {
 879 |   const nameExists = allNames.includes(name);
 880 |   if (nameExists) {
 881 |     const match = name.match(/(\d+)$/);
 882 |     if (match) {
 883 |       const num = parseInt(match[1], 10);
 884 |       const nextName = name.replace(/(\d+)$/, `${num + 1}`);
 885 |       return findNextDefaultName(nextName, allNames);
 886 |     } else {
 887 |       return findNextDefaultName(`${name} 2`, allNames);
 888 |     }
 889 |   } else {
 890 |     return name;
 891 |   }
 892 | };
 893 | 
 894 | export const PagePropertiesCreatePropertyMenuItems = ({
 895 |   onCreated,
 896 |   metaManager,
 897 | }: PagePropertiesCreatePropertyMenuItemsProps) => {
 898 |   const t = useI18n();
 899 |   const onAddProperty = useCallback(
 900 |     (
 901 |       e: React.MouseEvent,
 902 |       option: { type: PagePropertyType; name: string; icon: string }
 903 |     ) => {
 904 |       const schemaList = metaManager.getOrderedPropertiesSchema();
 905 |       const nameExists = schemaList.some(meta => meta.name === option.name);
 906 |       const allNames = schemaList.map(meta => meta.name);
 907 |       const name = nameExists
 908 |         ? findNextDefaultName(option.name, allNames)
 909 |         : option.name;
 910 |       const { id } = metaManager.addPropertyMeta({
 911 |         name,
 912 |         icon: option.icon,
 913 |         type: option.type,
 914 |       });
 915 |       onCreated?.(e, id);
 916 |     },
 917 |     [metaManager, onCreated]
 918 |   );
 919 | 
 920 |   return useMemo(() => {
 921 |     const options: MenuItemOption[] = [];
 922 |     options.push(
 923 |       <div role="heading" className={styles.menuHeader}>
 924 |         {t['com.affine.page-properties.create-property.menu.header']()}
 925 |       </div>
 926 |     );
 927 |     options.push('-');
 928 |     options.push(
 929 |       newPropertyTypes.map(type => {
 930 |         const iconName = getDefaultIconName(type);
 931 |         const Icon = nameToIcon(iconName, type);
 932 |         const name = t[`com.affine.page-properties.property.${type}`]();
 933 |         return {
 934 |           icon: <Icon />,
 935 |           text: name,
 936 |           onClick: (e: React.MouseEvent) => {
 937 |             onAddProperty(e, {
 938 |               icon: iconName,
 939 |               name: name,
 940 |               type: type,
 941 |             });
 942 |           },
 943 |         };
 944 |       })
 945 |     );
 946 |     return renderMenuItemOptions(options);
 947 |   }, [onAddProperty, t]);
 948 | };
 949 | 
 950 | interface PagePropertiesAddPropertyMenuItemsProps {
 951 |   onCreateClicked: (e: React.MouseEvent) => void;
 952 | }
 953 | 
 954 | const PagePropertiesAddPropertyMenuItems = ({
 955 |   onCreateClicked,
 956 | }: PagePropertiesAddPropertyMenuItemsProps) => {
 957 |   const manager = useContext(managerContext);
 958 | 
 959 |   const t = useI18n();
 960 |   const metaList = manager.metaManager.getOrderedPropertiesSchema();
 961 |   const nonRequiredMetaList = metaList.filter(meta => !meta.required);
 962 |   const isChecked = useCallback(
 963 |     (m: string) => {
 964 |       return manager.hasCustomProperty(m);
 965 |     },
 966 |     [manager]
 967 |   );
 968 | 
 969 |   const onClickProperty = useCallback(
 970 |     (e: React.MouseEvent, id: string) => {
 971 |       e.stopPropagation();
 972 |       e.preventDefault();
 973 |       if (isChecked(id)) {
 974 |         manager.removeCustomProperty(id);
 975 |       } else {
 976 |         manager.addCustomProperty(id);
 977 |       }
 978 |     },
 979 |     [isChecked, manager]
 980 |   );
 981 | 
 982 |   const menuItems = useMemo(() => {
 983 |     const options: MenuItemOption[] = [];
 984 |     options.push(
 985 |       <div role="heading" className={styles.menuHeader}>
 986 |         {t['com.affine.page-properties.add-property.menu.header']()}
 987 |       </div>
 988 |     );
 989 | 
 990 |     if (nonRequiredMetaList.length > 0) {
 991 |       options.push('-');
 992 |       const nonRequiredMetaOptions: MenuItemOption = nonRequiredMetaList.map(
 993 |         meta => {
 994 |           const Icon = nameToIcon(meta.icon, meta.type);
 995 |           const name = meta.name;
 996 |           return {
 997 |             icon: <Icon />,
 998 |             text: name,
 999 |             selected: isChecked(meta.id),
1000 |             onClick: (e: React.MouseEvent) => onClickProperty(e, meta.id),
1001 |           };
1002 |         }
1003 |       );
1004 |       options.push(nonRequiredMetaOptions);
1005 |     }
1006 |     options.push('-');
1007 |     options.push({
1008 |       icon: <PlusIcon />,
1009 |       text: t['com.affine.page-properties.add-property.menu.create'](),
1010 |       onClick: onCreateClicked,
1011 |     });
1012 | 
1013 |     return renderMenuItemOptions(options);
1014 |   }, [isChecked, nonRequiredMetaList, onClickProperty, onCreateClicked, t]);
1015 | 
1016 |   return menuItems;
1017 | };
1018 | 
1019 | export const PagePropertiesAddProperty = () => {
1020 |   const t = useI18n();
1021 |   const [adding, setAdding] = useState(true);
1022 |   const manager = useContext(managerContext);
1023 |   const toggleAdding: MouseEventHandler = useCallback(e => {
1024 |     e.stopPropagation();
1025 |     e.preventDefault();
1026 |     setAdding(prev => !prev);
1027 |   }, []);
1028 | 
1029 |   const menuOptions = useMemo(() => {
1030 |     const handleCreated = (e: React.MouseEvent, id: string) => {
1031 |       toggleAdding(e);
1032 |       manager.addCustomProperty(id);
1033 |     };
1034 |     const items = adding ? (
1035 |       <PagePropertiesAddPropertyMenuItems onCreateClicked={toggleAdding} />
1036 |     ) : (
1037 |       <PagePropertiesCreatePropertyMenuItems
1038 |         metaManager={manager.metaManager}
1039 |         onCreated={handleCreated}
1040 |       />
1041 |     );
1042 | 
1043 |     return {
1044 |       contentOptions: {
1045 |         onClick(e) {
1046 |           e.stopPropagation();
1047 |         },
1048 |       },
1049 |       rootOptions: {
1050 |         onOpenChange: () => setAdding(true),
1051 |       },
1052 |       items,
1053 |     } satisfies Partial<MenuProps>;
1054 |   }, [adding, manager, toggleAdding]);
1055 | 
1056 |   return (
1057 |     <Menu {...menuOptions}>
1058 |       <Button
1059 |         variant="plain"
1060 |         prefix={<PlusIcon />}
1061 |         className={styles.addPropertyButton}
1062 |       >
1063 |         {t['com.affine.page-properties.add-property']()}
1064 |       </Button>
1065 |     </Menu>
1066 |   );
1067 | };
1068 | 
1069 | const PagePropertiesTableInner = () => {
1070 |   const manager = useContext(managerContext);
1071 |   const [expanded, setExpanded] = useState(false);
1072 |   use(manager.workspace.docCollection.doc.whenSynced);
1073 |   return (
1074 |     <div className={styles.root}>
1075 |       <Collapsible.Root
1076 |         open={expanded}
1077 |         onOpenChange={setExpanded}
1078 |         className={styles.rootCentered}
1079 |       >
1080 |         <PagePropertiesTableHeader open={expanded} onOpenChange={setExpanded} />
1081 |         <PagePropertiesTableBody />
1082 |       </Collapsible.Root>
1083 |     </div>
1084 |   );
1085 | };
1086 | 
1087 | export const usePagePropertiesManager = (docId: string) => {
1088 |   // the workspace properties adapter adapter is reactive,
1089 |   // which means it's reference will change when any of the properties change
1090 |   // also it will trigger a re-render of the component
1091 |   const adapter = useCurrentWorkspacePropertiesAdapter();
1092 |   const manager = useMemo(() => {
1093 |     return new PagePropertiesManager(adapter, docId);
1094 |   }, [adapter, docId]);
1095 |   return manager;
1096 | };
1097 | 
1098 | // this is the main component that renders the page properties table at the top of the page below
1099 | // the page title
1100 | export const PagePropertiesTable = ({ docId }: { docId: string }) => {
1101 |   const manager = usePagePropertiesManager(docId);
1102 | 
1103 |   // if the given page is not in the current workspace, then we don't render anything
1104 |   // eg. when it is in history modal
1105 | 
1106 |   if (!manager.page) {
1107 |     return null;
1108 |   }
1109 | 
1110 |   return (
1111 |     <managerContext.Provider value={manager}>
1112 |       <Suspense>
1113 |         <PagePropertiesTableInner />
1114 |       </Suspense>
1115 |     </managerContext.Provider>
1116 |   );
1117 | };
1118 | 


--------------------------------------------------------------------------------
/memory.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | echo 'oxc'
 4 | /usr/bin/time -alh node ./src/memory/oxc.js
 5 | 
 6 | echo 'swc'
 7 | /usr/bin/time -alh node ./src/memory/swc.js
 8 | 
 9 | echo 'babel'
10 | /usr/bin/time -alh node ./src/memory/babel.js
11 | 


--------------------------------------------------------------------------------
/output/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oxc-project/bench-transformer/637cc07d5ad6f021813a821e4f812f49b8064b00/output/.gitkeep


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bench-transformer",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "packageManager": "pnpm@10.18.3",
 6 |   "scripts": {
 7 |     "bench": "vitest bench --run"
 8 |   },
 9 |   "devDependencies": {
10 |     "@babel/core": "^7.26.7",
11 |     "@babel/preset-env": "^7.26.7",
12 |     "@babel/preset-react": "^7.26.3",
13 |     "@babel/preset-typescript": "^7.26.0",
14 |     "@swc/core": "^1.10.14",
15 |     "@types/babel__core": "^7.20.5",
16 |     "@types/node": "^24.0.0",
17 |     "oxc-transform": "^0.95.0",
18 |     "prettier": "^3.4.2",
19 |     "react-refresh": "^0.18.0",
20 |     "typescript": "^5.7.3",
21 |     "vitest": "^3.0.5"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/id.bench.ts:
--------------------------------------------------------------------------------
 1 | import fs from "node:fs";
 2 | import assert from "node:assert";
 3 | import { bench, describe } from "vitest";
 4 | import { transpileDeclaration } from "typescript";
 5 | import { isolatedDeclaration } from "oxc-transform";
 6 | 
 7 | function oxc(filename: string, sourceText: string) {
 8 |   return isolatedDeclaration(filename, sourceText).code;
 9 | }
10 | 
11 | function tsc(fileName: string, sourceText: string) {
12 |   return transpileDeclaration(sourceText, {
13 |     fileName,
14 |     compilerOptions: { noResolve: true, noLib: true },
15 |   }).outputText;
16 | }
17 | 
18 | const sources = fs.readdirSync("./fixtures").map((filename) => {
19 |   const sourceText = fs.readFileSync(`./fixtures/${filename}`, "utf8");
20 |   return [filename, sourceText];
21 | });
22 | 
23 | describe.each(sources)("%s", (filename, sourceText) => {
24 |   for (const fn of [oxc, tsc]) {
25 |     const code = fn(filename, sourceText);
26 |     // fs.writeFileSync(`./output/${filename}.${fn.name}.js`, code);
27 |     assert(code);
28 |     bench(fn.name, () => void fn(filename, sourceText));
29 |   }
30 | });
31 | 


--------------------------------------------------------------------------------
/src/memory/babel.js:
--------------------------------------------------------------------------------
 1 | import fs from "fs";
 2 | import { transformSync as babelTransform } from '@babel/core'
 3 | let filename = "./fixtures/parser.ts";
 4 | const sourceText = fs.readFileSync(filename, "utf8");
 5 | babelTransform(sourceText, {
 6 |   filename,
 7 |   babelrc: false,
 8 |   comments: false,
 9 |   presets: [
10 |     "@babel/preset-typescript",
11 |     ["@babel/preset-react", { runtime: 'automatic' }],
12 |   ]
13 | });
14 | 


--------------------------------------------------------------------------------
/src/memory/oxc.js:
--------------------------------------------------------------------------------
1 | import fs from "fs";
2 | import { transform as oxcTransform } from "oxc-transform";
3 | let filename = "./fixtures/parser.ts";
4 | const sourceText = fs.readFileSync(filename, "utf8");
5 | oxcTransform(filename, sourceText);
6 | 


--------------------------------------------------------------------------------
/src/memory/swc.js:
--------------------------------------------------------------------------------
 1 | import fs from "fs";
 2 | import { transformSync as swcTransform } from "@swc/core";
 3 | let filename = "./fixtures/parser.ts";
 4 | const sourceText = fs.readFileSync(filename, "utf8");
 5 | swcTransform(sourceText, {
 6 |   filename,
 7 |   swcrc: false,
 8 |   jsc: {
 9 |     target: "esnext",
10 |     transform: {
11 |       treatConstEnumAsEnum: true,
12 |       react: {
13 |         runtime: 'automatic'
14 |       }
15 |     },
16 |     preserveAllComments: false,
17 |     experimental: {
18 |       disableAllLints: true
19 |     }
20 |   }
21 | });
22 | 


--------------------------------------------------------------------------------
/src/transform.bench.ts:
--------------------------------------------------------------------------------
  1 | import fs from "node:fs";
  2 | import assert from "node:assert";
  3 | import { bench, describe } from "vitest";
  4 | import { transformSync as swcTransform } from "@swc/core";
  5 | import { transformSync as babelTransform } from "@babel/core";
  6 | import { transform as oxcTransform } from "oxc-transform";
  7 | 
  8 | type RunOptions = {
  9 |   filename: string;
 10 |   sourceText: string;
 11 |   sourceMap: boolean;
 12 |   reactDev: boolean;
 13 |   target: 'esnext' | 'es2015'
 14 | };
 15 | 
 16 | function oxc(options: RunOptions) {
 17 |   return oxcTransform(options.filename, options.sourceText, {
 18 |     sourcemap: options.sourceMap,
 19 |     target: options.target,
 20 |     react: {
 21 |       runtime: "automatic",
 22 |       development: options.reactDev,
 23 |       refresh: options.reactDev ? {} : undefined,
 24 |     },
 25 |   });
 26 | }
 27 | 
 28 | function swc(options: RunOptions) {
 29 |   return swcTransform(options.sourceText, {
 30 |     filename: options.filename,
 31 |     sourceMaps: options.sourceMap,
 32 |     swcrc: false,
 33 |     jsc: {
 34 |       target: options.target,
 35 |       transform: {
 36 |         treatConstEnumAsEnum: true,
 37 |         react: {
 38 |           runtime: "automatic",
 39 |           development: options.reactDev,
 40 |           refresh: options.reactDev,
 41 |         },
 42 |       },
 43 |       preserveAllComments: false,
 44 |       experimental: {
 45 |         disableAllLints: true
 46 |       }
 47 |     },
 48 |   });
 49 | }
 50 | 
 51 | function babel(options: RunOptions) {
 52 |   return babelTransform(options.sourceText, {
 53 |     filename: options.filename,
 54 |     sourceMaps: options.sourceMap,
 55 |     babelrc: false,
 56 |     configFile: false,
 57 |     browserslistConfigFile: false,
 58 |     comments: false,
 59 |     envName: "development",
 60 |     plugins: options.reactDev ? ["react-refresh/babel"] : [],
 61 |     presets: [
 62 |       "@babel/preset-typescript",
 63 |       [
 64 |         "@babel/preset-react",
 65 |         { runtime: "automatic", development: options.reactDev },
 66 |       ],
 67 |     ],
 68 |   })!;
 69 | }
 70 | 
 71 | type Case = [
 72 |   filename: RunOptions['filename'],
 73 |   sourceMap: RunOptions['sourceMap'],
 74 |   reactDev: RunOptions['reactDev'],
 75 |   target: RunOptions['target'],
 76 |   sourceText: RunOptions['sourceText'],
 77 | ];
 78 | const cases = fs.readdirSync("./fixtures").flatMap((filename): Case[] => {
 79 |   const sourceText = fs.readFileSync(`./fixtures/${filename}`, "utf8");
 80 |   const base: Case[] = [
 81 |     [filename, false, false, "esnext", sourceText],
 82 |     [filename, false, false, "es2015", sourceText],
 83 |     [filename, true, false, "esnext", sourceText],
 84 |   ];
 85 |   if (!filename.endsWith(".tsx")) return base;
 86 |   return [
 87 |     ...base,
 88 |     [filename, false, true, "esnext", sourceText],
 89 |     [filename, true, true, "esnext", sourceText],
 90 |   ];
 91 | });
 92 | 
 93 | describe.each(cases)(
 94 |   "%s (sourceMap: %s, reactDev: %s, target: %s)",
 95 |   (filename, sourceMap, reactDev, target, sourceText) => {
 96 |     for (const fn of [oxc, swc, babel]) {
 97 |       const options: RunOptions = { filename, sourceText, sourceMap, reactDev, target };
 98 |       const code = fn(options).code;
 99 |       // fs.writeFileSync(`./output/${filename}.${fn.name}.js`, code);
100 |       assert(code);
101 |       bench(fn.name, () => void fn(options));
102 |     }
103 |   },
104 | );
105 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["src"],
 3 |   "compilerOptions": {
 4 |     "target": "ES2022",
 5 |     "module": "ESNext",
 6 |     "lib": ["ES2023"],
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Transpile with Vite */
10 |     "moduleResolution": "bundler",
11 |     "noEmit": true,
12 |     "isolatedModules": true,
13 |     "allowImportingTsExtensions": true,
14 | 
15 |     /* Linting */
16 |     "strict": true,
17 |     "noUnusedLocals": true,
18 |     "noUnusedParameters": true,
19 |     "noFallthroughCasesInSwitch": true,
20 |     "useUnknownInCatchVariables": true
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------