Match-id-63ab7802bc94b2c6034d615683e1c3dc915e8db9

libs/extension/src/devtools/mockPage/MockContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'horizon';
+
+export const MockContext = createContext({value: 'default context value'});

libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx

@@ -1,12 +1,26 @@
-import { useState, useEffect, useRef, createContext } from 'horizon';
+import { useState, useEffect, useRef, useContext, useReducer } from 'horizon';
+import { MockContext } from './MockContext';
 
-const Ctx = createContext();
+const initialState = {count: 0};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'increment':
+      return {count: state.count + 1};
+    case 'decrement':
+      return {count: state.count - 1};
+    default:
+      throw new Error();
+  }
+}
 
 export default function MockFunctionComponent(props) {
+  const [state, dispatch] = useReducer(reducer, initialState);
   const [age, setAge] = useState(0);
   const domRef = useRef<HTMLDivElement>();
   const objRef = useRef({ str: 'string' });
-  
+  const context = useContext(MockContext);
+
   useEffect(() => { }, []);
 
   return (
@@ -16,7 +30,7 @@ export default function MockFunctionComponent(props) {
       count: {props.count}
       <div ref={domRef} />
       <div>{objRef.current.str}</div>
-      <Ctx.Provider value={{ctx: 'I am ctx'}}></Ctx.Provider>
+      <div>{context.ctx}</div>
     </div>
   );
 }

libs/extension/src/devtools/mockPage/index.tsx

@@ -1,18 +1,20 @@
 import { render } from 'horizon';
 import MockClassComponent from './MockClassComponent';
 import MockFunctionComponent from './MockFunctionComponent';
+import { MockContext } from './MockContext';
 
 const root = document.createElement('div');
 document.body.append(root);
-
 function App() {
   return (
     <div>
+      <MockContext.Provider value={{ ctx: 'I am ctx' }}>
+        <MockClassComponent fruit={'apple'} />
+        <MockFunctionComponent />
+      </MockContext.Provider>
       abc
-      <MockClassComponent fruit={'apple'}/>
-      <MockFunctionComponent />
     </div>
   );
 }
 
-render(<App/>, root);
+render(<App />, root);