fix(useReactive): cannot set a object with read-only and non-configur…

…able property (alibaba#2247)

* fix: throw error when set a read-only and non-configurable data property

* style: update

packages/hooks/src/useReactive/__tests__/index.test.tsx

@@ -195,6 +195,36 @@ describe('test useReactive feature', () => {
  expect(() => result.current.v.Module).not.toThrowError();
  });
 
+ it('test JSX element', () => {
+ const hook = renderHook(() => useReactive({ html: <div role="id">foo</div> }));
+ const proxy = hook.result.current;
+ const wrap = render(proxy.html);
+ const html = wrap.getByRole('id');
+
+ expect(html.textContent).toBe('foo');
+ act(() => {
+ proxy.html = <div role="id">bar</div>;
+ wrap.rerender(proxy.html);
+ });
+ expect(html.textContent).toBe('bar');
+ hook.unmount();
+ });
+
+ it('test read-only and non-configurable data property', () => {
+ const obj = {} as { user: { name: string } };
+ Reflect.defineProperty(obj, 'user', {
+ value: { name: 'foo' },
+ writable: false,
+ configurable: false,
+ });
+
+ const hook = renderHook(() => useReactive(obj));
+ const proxy = hook.result.current;
+
+ expect(() => proxy.user.name).not.toThrowError();
+ hook.unmount();
+ });
+
  it('test input1', () => {
  const wrap = render(<Demo />);
 

packages/hooks/src/useReactive/index.ts

@@ -26,6 +26,12 @@ function observer<T extends Record<string, any>>(initialVal: T, cb: () => void):
  get(target, key, receiver) {
  const res = Reflect.get(target, key, receiver);
 
+ // https://github.com/alibaba/hooks/issues/1317
+ const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
+ if (!descriptor?.configurable && !descriptor?.writable) {
+ return res;
+ }
+
  // Only proxy plain object or array,
  // otherwise it will cause: https://github.com/alibaba/hooks/issues/2080
  return isPlainObject(res) || Array.isArray(res) ? observer(res, cb) : res;