wip: force hydrate prop

packages/runtime-vapor/__tests__/hydration.spec.ts

@@ -2966,15 +2966,30 @@ describe('Vapor Mode hydration', () => {
     test('unmount async wrapper before load (fragment)', async () => {})
   })
 
-  describe.todo('force hydrate prop', async () => {
-    test.todo('force hydrate prop with `.prop` modifier', () => {})
+  describe('force hydrate prop', async () => {
+    test('force hydrate prop with `.prop` modifier', async () => {
+      const { container } = await mountWithHydration(
+        '<input type="checkbox">',
+        `<input type="checkbox" .indeterminate="true"/>`,
+      )
+      expect((container.firstChild! as any).indeterminate).toBe(true)
+    })
 
-    test.todo(
-      'force hydrate input v-model with non-string value bindings',
-      () => {},
-    )
+    test('force hydrate input v-model with non-string value bindings', async () => {
+      const { container } = await mountWithHydration(
+        '<input type="checkbox" value="true">',
+        `<input type="checkbox" :true-value="true"/>`,
+      )
+      expect((container.firstChild as any)._trueValue).toBe(true)
+    })
 
-    test.todo('force hydrate checkbox with indeterminate', () => {})
+    test.todo('force hydrate checkbox with indeterminate', async () => {
+      const { container } = await mountWithHydration(
+        '<input type="checkbox" indeterminate/>',
+        `<input type="checkbox" :indeterminate="true"/>`,
+      )
+      expect((container.firstChild! as any).indeterminate).toBe(true)
+    })
 
     test.todo(
       'force hydrate select option with non-string value bindings',

packages/runtime-vapor/src/dom/prop.ts

@@ -96,7 +96,8 @@ export function setDOMProp(el: any, key: string, value: any): void {
   if (
     (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
     isHydrating &&
-    !attributeHasMismatch(el, key, value)
+    !attributeHasMismatch(el, key, value) &&
+    !shouldForcePatch(el, key)
   ) {
     return
   }
@@ -486,3 +487,9 @@ function getClientText(el: Node, value: string): string {
   }
   return value
 }
+
+function shouldForcePatch(el: Element, key: string): boolean {
+  const { tagName } = el
+  const forcePatch = tagName === 'INPUT' || tagName === 'OPTION'
+  return forcePatch && (key.endsWith('value') || key === 'indeterminate')
+}