From 756b00d72633d2cb16790b1be1259e5700925732 Mon Sep 17 00:00:00 2001 From: * <8> Date: Fri, 15 Apr 2022 18:00:14 +0800 Subject: [PATCH] Match-id-e50f481637ca8c0ab67910ed72ea82ae08e26261 --- .../devtools/mockPage/MockClassComponent.tsx | 22 +++++++++++++++ .../mockPage/MockFunctionComponent.tsx | 22 +++++++++++++++ .../extension/src/devtools/mockPage/index.tsx | 18 ++++++++++++ .../src/devtools/mockPage/mockPage.html | 28 +++++++++++++++++++ 4 files changed, 90 insertions(+) create mode 100644 libs/extension/src/devtools/mockPage/MockClassComponent.tsx create mode 100644 libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx create mode 100644 libs/extension/src/devtools/mockPage/index.tsx create mode 100644 libs/extension/src/devtools/mockPage/mockPage.html diff --git a/libs/extension/src/devtools/mockPage/MockClassComponent.tsx b/libs/extension/src/devtools/mockPage/MockClassComponent.tsx new file mode 100644 index 00000000..c59385ed --- /dev/null +++ b/libs/extension/src/devtools/mockPage/MockClassComponent.tsx @@ -0,0 +1,22 @@ +import { Component } from 'horizon'; + +const defaultState = { + name: 'jenny', + boolean: true, +}; + +export default class MockClassComponent extends Component<{fruit: string}, typeof defaultState> { + + state = defaultState; + + render() { + return ( +
+ + {this.state.name} + {this.props?.fruit} +
+ ); + } + +} \ No newline at end of file diff --git a/libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx b/libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx new file mode 100644 index 00000000..48a76e93 --- /dev/null +++ b/libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx @@ -0,0 +1,22 @@ +import { useState, useEffect, useRef, createContext } from 'horizon'; + +const Ctx = createContext(); + +export default function MockFunctionComponent(props) { + const [age, setAge] = useState(0); + const domRef = useRef(); + const objRef = useRef({ str: 'string' }); + + useEffect(() => { }, []); + + return ( +
+ age: {age} + + count: {props.count} +
+
{objRef.current.str}
+ +
+ ); +} \ No newline at end of file diff --git a/libs/extension/src/devtools/mockPage/index.tsx b/libs/extension/src/devtools/mockPage/index.tsx new file mode 100644 index 00000000..9b5332e3 --- /dev/null +++ b/libs/extension/src/devtools/mockPage/index.tsx @@ -0,0 +1,18 @@ +import { render } from 'horizon'; +import MockClassComponent from './MockClassComponent'; +import MockFunctionComponent from './MockFunctionComponent'; + +const root = document.createElement('div'); +document.body.append(root); + +function App() { + return ( +
+ abc + + +
+ ); +} + +render(, root); diff --git a/libs/extension/src/devtools/mockPage/mockPage.html b/libs/extension/src/devtools/mockPage/mockPage.html new file mode 100644 index 00000000..5e6b02c8 --- /dev/null +++ b/libs/extension/src/devtools/mockPage/mockPage.html @@ -0,0 +1,28 @@ + + + + + + Horizon Mock Page + + + + + + + + +