fix: props enumeration of simbols (#2229)

QwikDev · Nov 21, 2022 · 240c636 · 240c636
1 parent b43ee75
commit 240c636
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 38 deletions.
diff --git a/packages/qwik/src/core/container/resume.ts b/packages/qwik/src/core/container/resume.ts
@@ -20,10 +20,9 @@ import {
 } from './container';
 import { findClose, VirtualElementImpl } from '../render/dom/virtual-element';
 import { getProxyManager, parseSubscription, Subscriptions } from '../state/common';
-import { createProxy } from '../state/store';
+import { createProxy, setObjectFlags } from '../state/store';
 import { qSerialize } from '../util/qdev';
 import { pauseContainer } from './pause';
-import { QObjectFlagsSymbol } from '../state/constants';
 import { isPrimitive } from '../render/dom/render-dom';
 import { getContext } from '../state/context';
 import { domToVnode } from '../render/dom/visitor';
@@ -229,7 +228,7 @@ const reviveSubscriptions = (
       }
     }
     if (flag > 0) {
-      value[QObjectFlagsSymbol] = flag;
+      setObjectFlags(value, flag);
     }
     if (!parser.subs(value, converted)) {
       const proxy = containerState.$proxyMap$.get(value);

diff --git a/packages/qwik/src/core/render/dom/visitor.ts b/packages/qwik/src/core/render/dom/visitor.ts
@@ -73,13 +73,8 @@ import {
   tryGetContext,
 } from '../../state/context';
 import { getProxyManager, getProxyTarget, SubscriptionManager } from '../../state/common';
-import { createProxy } from '../../state/store';
-import {
-  QObjectFlagsSymbol,
-  QObjectImmutable,
-  _IMMUTABLE,
-  _IMMUTABLE_PREFIX,
-} from '../../state/constants';
+import { createPropsState, createProxy } from '../../state/store';
+import { _IMMUTABLE, _IMMUTABLE_PREFIX } from '../../state/constants';
 
 export const SVG_NS = 'http://www.w3.org/2000/svg';
 
@@ -1032,12 +1027,7 @@ export const setComponentProps = (
   const keys = Object.keys(expectProps);
   let props = elCtx.$props$;
   if (!props) {
-    elCtx.$props$ = props = createProxy(
-      {
-        [QObjectFlagsSymbol]: QObjectImmutable,
-      },
-      rCtx.$static$.$containerState$
-    );
+    elCtx.$props$ = props = createProxy(createPropsState(), rCtx.$static$.$containerState$);
   }
   if (keys.length === 0) {
     return false;

diff --git a/packages/qwik/src/core/render/ssr/render-ssr.ts b/packages/qwik/src/core/render/ssr/render-ssr.ts
@@ -46,13 +46,8 @@ import {
   QContext,
   Q_CTX,
 } from '../../state/context';
-import { createProxy } from '../../state/store';
-import {
-  QObjectFlagsSymbol,
-  QObjectImmutable,
-  _IMMUTABLE,
-  _IMMUTABLE_PREFIX,
-} from '../../state/constants';
+import { createPropsState, createProxy } from '../../state/store';
+import { _IMMUTABLE, _IMMUTABLE_PREFIX } from '../../state/constants';
 
 const FLUSH_COMMENT = '<!--qkssr-f-->';
 
@@ -815,9 +810,8 @@ const setComponentProps = (
   expectProps: Record<string, any>
 ) => {
   const keys = Object.keys(expectProps);
-  const target = {
-    [QObjectFlagsSymbol]: QObjectImmutable,
-  } as Record<string, any>;
+  const target = createPropsState();
+
   elCtx.$props$ = createProxy(target, rCtx.$static$.$containerState$);
 
   if (keys.length === 0) {

diff --git a/packages/qwik/src/core/state/context.ts b/packages/qwik/src/core/state/context.ts
@@ -14,8 +14,7 @@ import { isElement } from '../../testing/html';
 import { assertQwikElement } from '../util/element';
 import { assertTrue } from '../error/assert';
 import { QScopedStyle } from '../util/markers';
-import { createProxy } from './store';
-import { QObjectFlagsSymbol, QObjectImmutable } from './constants';
+import { createPropsState, createProxy } from './store';
 
 export const Q_CTX = '_qc_';
 
@@ -105,12 +104,7 @@ export const getContext = (el: QwikElement, containerState: ContainerState): QCo
             if (props) {
               elCtx.$props$ = getObject(props);
             } else {
-              elCtx.$props$ = createProxy(
-                {
-                  [QObjectFlagsSymbol]: QObjectImmutable,
-                },
-                containerState
-              );
+              elCtx.$props$ = createProxy(createPropsState(), containerState);
             }
           }
         }

diff --git a/packages/qwik/src/core/state/q-object.unit.ts b/packages/qwik/src/core/state/q-object.unit.ts
@@ -1,9 +1,9 @@
 import { suite } from 'uvu';
 import { equal } from 'uvu/assert';
 import { getContainerState } from '../container/container';
-import { createSubscriptionManager, unwrapProxy } from './common';
+import { createSubscriptionManager, getProxyFlags, unwrapProxy } from './common';
 import { QObjectRecursive } from './constants';
-import { getOrCreateProxy } from './store';
+import { createPropsState, createProxy, getOrCreateProxy } from './store';
 
 const qObject = suite('q-object');
 const container = getContainerState({} as any);
@@ -17,6 +17,18 @@ qObject('should create QObject', () => {
   equal(obj, { salutation: 'Hello', name: 'World' });
 });
 
+qObject('should not copy proxy flags metadata', () => {
+  const target = createPropsState();
+  const proxy = createProxy(target, container);
+  equal(getProxyFlags(proxy), 2);
+  equal(getProxyFlags(target), 2);
+
+  const targetCopy = Object.assign({}, target);
+  const proxyCopy = Object.assign({}, proxy);
+  equal(getProxyFlags(targetCopy), undefined);
+  equal(getProxyFlags(proxyCopy), undefined);
+});
+
 qObject('should support basic operations', () => {
   const value = { a: 1, b: 2 };
   const proxy = getOrCreateProxy(value, map);

diff --git a/packages/qwik/src/core/state/store.ts b/packages/qwik/src/core/state/store.ts
@@ -42,7 +42,7 @@ export const getOrCreateProxy = <T extends object>(
     return proxy;
   }
   if (flags !== 0) {
-    (target as any)[QObjectFlagsSymbol] = flags;
+    setObjectFlags(target, flags);
   }
   return createProxy(target, containerState, undefined);
 };
@@ -66,6 +66,16 @@ export const createProxy = <T extends object>(
   return proxy;
 };
 
+export const createPropsState = (): Record<string, any> => {
+  const props = {};
+  setObjectFlags(props, QObjectImmutable);
+  return props;
+};
+
+export const setObjectFlags = (obj: object, flags: number) => {
+  Object.defineProperty(obj, QObjectFlagsSymbol, { value: flags, enumerable: false });
+};
+
 export type TargetType = Record<string | symbol, any>;
 
 class ReadWriteProxyHandler implements ProxyHandler<TargetType> {
@@ -178,7 +188,7 @@ class ReadWriteProxyHandler implements ProxyHandler<TargetType> {
   }
 
   getOwnPropertyDescriptor(target: TargetType, prop: string) {
-    if (isArray(target)) {
+    if (isArray(target) || typeof prop === 'symbol') {
       return Object.getOwnPropertyDescriptor(target, prop);
     }
     return {