fix(runtime-vapor): add dev-only warning for non-existent property access during...

diff --git a/packages/runtime-vapor/__tests__/component.spec.ts b/packages/runtime-vapor/__tests__/component.spec.ts
index ce901e19931b8ac7ebf81515dee81ca250f4ba74..84643614983d3162ad77ed1d8f7adb06c9a42ee8 100644 (file)
--- a/packages/runtime-vapor/__tests__/component.spec.ts
+++ b/packages/runtime-vapor/__tests__/component.spec.ts
@@ -416,6 +416,22 @@ describe('component', () => {
       'Vapor component setup() returned non-block value, and has no render function',
     ).toHaveBeenWarned()
   })
+
+  it('warn non-existent property access', () => {
+    define({
+      setup() {
+        return {}
+      },
+      render(ctx: any) {
+        ctx.foo
+        return []
+      },
+    }).render()
+
+    expect(
+      'Property "foo" was accessed during render but is not defined on instance.',
+    ).toHaveBeenWarned()
+  })
 })
 
 function getEffectsCount(scope: EffectScope): number {

diff --git a/packages/runtime-vapor/__tests__/hmr.spec.ts b/packages/runtime-vapor/__tests__/hmr.spec.ts
index 23cb2049803de6fde7fa6d2bf70e3720051db9e2..5bee42ecd73625a41c1093f5e18896a35b37bf0b 100644 (file)
--- a/packages/runtime-vapor/__tests__/hmr.spec.ts
+++ b/packages/runtime-vapor/__tests__/hmr.spec.ts
@@ -631,7 +631,7 @@ describe('hot module replacement', () => {
       },
       render: compileToFunction(`
         <teleport :to="target">
-          <div :style="style">
+          <div>
             <slot/>
           </div>
         </teleport>

diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index bc72fcf7cde217c9b486c32b1b40eeaf46badbe1..19b608d82f217124220e7482a181b7916db9b450 100644 (file)
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -45,11 +45,13 @@ import {
   onScopeDispose,
   proxyRefs,
   setActiveSub,
+  toRaw,
   unref,
 } from '@vue/reactivity'
 import {
   EMPTY_OBJ,
   ShapeFlags,
+  hasOwn,
   invokeArrayFns,
   isArray,
   isFunction,
@@ -381,9 +383,10 @@ export function setupComponent(
       )
       instance.block = []
     } else {
-      instance.devtoolsRawSetupState = setupResult
-      // TODO make the proxy warn non-existent property access during dev
       instance.setupState = proxyRefs(setupResult)
+      if (__DEV__) {
+        instance.setupState = createDevSetupStateProxy(instance)
+      }
       devRender(instance)
     }
   } else {
@@ -449,6 +452,31 @@ export function applyFallthroughProps(
   isApplyingFallthroughProps = false
 }
 
+/**
+ * dev only
+ */
+function createDevSetupStateProxy(
+  instance: VaporComponentInstance,
+): Record<string, any> {
+  const { setupState } = instance
+  return new Proxy(setupState!, {
+    get(target, key: string | symbol, receiver) {
+      if (
+        isString(key) &&
+        !key.startsWith('__v') &&
+        !hasOwn(toRaw(setupState)!, key)
+      ) {
+        warn(
+          `Property ${JSON.stringify(key)} was accessed during render ` +
+            `but is not defined on instance.`,
+        )
+      }
+
+      return Reflect.get(target, key, receiver)
+    },
+  })
+}
+
 /**
  * dev only
  */