func: stabilize base components

manifest.json

@@ -47,7 +47,7 @@
                 "https://stadia.google.com/*"
             ],
             "js": [
-                "dist/index.js"
+                "dist/main/index.js"
             ]
         }
     ],

modules/main/src/components/AbstractComponent.ts

@@ -1,29 +1,74 @@
-import Internal from '../decorators/@Internal';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import Logger from '../Logger';
 import Util from '../Util';
 
-export default class AbstractComponent {
+export interface DefaultProps {
 
+}
+
+export interface DefaultState {
+    renderer: HTMLElement | null
+}
+
+export default class AbstractComponent<A extends DefaultProps, B extends DefaultState> extends React.Component<A, B> {
+
+    public __useReact = false;
     public name: string;
-    public renderer: HTMLElement | null = null;
 
-    constructor(name: string) {
-        this.name = name;
+    constructor(data: { props?: A, name: string }) {
+        super(data.props !== undefined ? data.props : {} as A);
+        this.name = data.name;
+
+        // TODO: Not safe, find better solution
+        this.state = {
+            renderer: null
+        } as B
+
+        this.__start();
+        setInterval(() => this.__tick(), 1000);
     }
 
-    @Internal('onStart')
     public async __start() {
         Logger.component(`Component ${this.name} has been enabled`);
+        this.onStart();
     }
 
-    @Internal('onUpdate')
-    public async __tick() {}
+    public async __tick() {
+        console.log("tick");
+        this.onUpdate();
+    }
 
     public async updateRenderer() {
         await Util.updateRenderer();
-        this.renderer = Util.renderer;
+        if (this.__useReact) {
+            this.setState(state => ({ renderer: Util.renderer }));
+        }
+    }
+
+    /**
+     * @deprecated React render function, only override this if you're 100% sure you know what you're doing.
+     * @see onRender
+     */
+    render() {
+        if (!this.__useReact) return null;
+
+        if (this.state.renderer !== null) {
+            const renderData = this.onRender();
+            if(renderData === null) return null;
+
+            const target = this.state.renderer.querySelector(renderData.query);
+            if (target !== null) {
+                return ReactDOM.createPortal(
+                    renderData.node,
+                    <Element>this.state.renderer.querySelector(renderData.query),
+                );
+            }
+        }
+        return null;
     }
 
     async onStart(): Promise<void> {}
     async onUpdate(): Promise<void> {}
+    onRender(): { query: string, node: React.ReactNode } | null { return null }
 }

modules/main/src/components/TestComponent.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import AbstractComponent, { DefaultProps, DefaultState } from './AbstractComponent';
+import ReactComponent from '../decorators/@ReactComponent';
+
+@ReactComponent
+export default class TestComponent extends AbstractComponent<DefaultProps, DefaultState> {
+    constructor() {
+        super({ name: "Test Component" });
+    }
+
+    async onStart(): Promise<void> {}
+
+    async onUpdate(): Promise<void> {
+        this.updateRenderer();
+        console.log(this.__useReact);
+    }
+
+    onRender(): { query: string; node: React.ReactNode } {
+        return {
+            query: '.CVVXfc',
+            node: <button>Test Button</button>
+        }
+    }
+}
+
+

modules/main/src/decorators/@ReactComponent.ts

@@ -0,0 +1,5 @@
+export default function ReactComponent<T extends { new (...args: any[]): {} }>(constructor: T) {
+    return class extends constructor {
+        __useReact = true
+    };
+}

modules/main/src/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestComponent from './components/TestComponent';
+import Util from './Util';
+
+console.log("main2");
+
+window.addEventListener('load', async () => {
+    await Util.updateRenderer();
+
+    const root = document.createElement('div');
+    document.body.appendChild(root)
+
+    ReactDOM.render(
+        <div>
+            <TestComponent/>
+        </div>,
+        root
+    )
+})

package.json

@@ -5,7 +5,7 @@
   "main": "modules/main/src/index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build:dev@main": "parcel build modules/main/src/index.ts -d ./dist/main",
+    "build:dev@main": "parcel build modules/main/src/index.tsx -d ./dist/main",
     "build:dev@popup": "parcel build modules/popup/src/index.ts -d ./dist/popup",
     "build:dev": "npm run build:dev@main && npm run build:dev@popup"
   },
@@ -25,7 +25,15 @@
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "typescript": "^4.1.3"
   },
-  "browserslist": [ "last 2 Chrome versions" ]
+  "browserslist": [
+    "last 2 Chrome versions"
+  ],
+  "dependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
 }

tsconfig.json

@@ -9,6 +9,7 @@
         "jsx": "react",
         "allowJs": true,
         "moduleResolution": "node",
-        "strict": true
+        "strict": true,
+        "allowSyntheticDefaultImports": true
     }
 }