From 9b71171ffa33deb8242c902dcd87e65bd46de474 Mon Sep 17 00:00:00 2001 From: Mafrans Date: Sat, 23 Jan 2021 21:40:26 +0100 Subject: [PATCH] func: stabilize base components --- images/Stadia+128.png | Bin 0 -> 7010 bytes images/Stadia+16.png | Bin 0 -> 624 bytes images/Stadia+32.png | Bin 0 -> 1308 bytes images/Stadia+48.png | Bin 0 -> 1906 bytes manifest.json | 2 +- .../main/src/components/AbstractComponent.ts | 63 ++++++++++++--- modules/main/src/components/TestComponent.tsx | 26 ++++++ modules/main/src/decorators/@Internal.ts | 13 --- .../main/src/decorators/@ReactComponent.ts | 5 ++ modules/main/src/index.ts | 1 - modules/main/src/index.tsx | 20 +++++ package-lock.json | 75 +++++++++++++++++- package.json | 12 ++- tsconfig.json | 3 +- 14 files changed, 191 insertions(+), 29 deletions(-) create mode 100644 images/Stadia+128.png create mode 100644 images/Stadia+16.png create mode 100644 images/Stadia+32.png create mode 100644 images/Stadia+48.png create mode 100644 modules/main/src/components/TestComponent.tsx delete mode 100644 modules/main/src/decorators/@Internal.ts create mode 100644 modules/main/src/decorators/@ReactComponent.ts delete mode 100644 modules/main/src/index.ts create mode 100644 modules/main/src/index.tsx diff --git a/images/Stadia+128.png b/images/Stadia+128.png new file mode 100644 index 0000000000000000000000000000000000000000..dd65ede85ba8412753ec974725daf040095d36b7 GIT binary patch literal 7010 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 literal 0 HcmV?d00001 diff --git a/manifest.json b/manifest.json index 89cfafda..f682a35c 100644 --- a/manifest.json +++ b/manifest.json @@ -47,7 +47,7 @@ "https://stadia.google.com/*" ], "js": [ - "dist/index.js" + "dist/main/index.js" ] } ], diff --git a/modules/main/src/components/AbstractComponent.ts b/modules/main/src/components/AbstractComponent.ts index effc00c8..a54e2775 100644 --- a/modules/main/src/components/AbstractComponent.ts +++ b/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 extends React.Component { + + 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, + this.state.renderer.querySelector(renderData.query), + ); + } + } + return null; } async onStart(): Promise {} async onUpdate(): Promise {} + onRender(): { query: string, node: React.ReactNode } | null { return null } } \ No newline at end of file diff --git a/modules/main/src/components/TestComponent.tsx b/modules/main/src/components/TestComponent.tsx new file mode 100644 index 00000000..908ffb27 --- /dev/null +++ b/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 { + constructor() { + super({ name: "Test Component" }); + } + + async onStart(): Promise {} + + async onUpdate(): Promise { + this.updateRenderer(); + console.log(this.__useReact); + } + + onRender(): { query: string; node: React.ReactNode } { + return { + query: '.CVVXfc', + node: + } + } +} + + diff --git a/modules/main/src/decorators/@Internal.ts b/modules/main/src/decorators/@Internal.ts deleted file mode 100644 index b26b5eb6..00000000 --- a/modules/main/src/decorators/@Internal.ts +++ /dev/null @@ -1,13 +0,0 @@ -export default function Internal(func?: Function | string, ...args: unknown[]) { - return function ( - target: any, - propertyKey: string, - descriptor: PropertyDescriptor) { - if (typeof func == 'string') { - target![func](...args); - } - else { - func!(...args); - } - } -} \ No newline at end of file diff --git a/modules/main/src/decorators/@ReactComponent.ts b/modules/main/src/decorators/@ReactComponent.ts new file mode 100644 index 00000000..cdf2c6da --- /dev/null +++ b/modules/main/src/decorators/@ReactComponent.ts @@ -0,0 +1,5 @@ +export default function ReactComponent(constructor: T) { + return class extends constructor { + __useReact = true + }; +} \ No newline at end of file diff --git a/modules/main/src/index.ts b/modules/main/src/index.ts deleted file mode 100644 index 0adf156b..00000000 --- a/modules/main/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -console.log("main2"); \ No newline at end of file diff --git a/modules/main/src/index.tsx b/modules/main/src/index.tsx new file mode 100644 index 00000000..c2e3a9c3 --- /dev/null +++ b/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( +
+ +
, + root + ) +}) diff --git a/package-lock.json b/package-lock.json index 7686c81f..d18644b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1071,6 +1071,31 @@ "to-fast-properties": "^2.0.0" } }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "dev": true + }, + "@types/react": { + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.0.tgz", + "integrity": "sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-dom": { + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.0.tgz", + "integrity": "sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", @@ -1177,6 +1202,12 @@ } } }, + "csstype": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==", + "dev": true + }, "debug": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", @@ -1272,8 +1303,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "jsesc": { "version": "2.5.2", @@ -1296,6 +1326,14 @@ "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", "dev": true }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, "minimist": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", @@ -1314,6 +1352,11 @@ "integrity": "sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==", "dev": true }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, "object-keys": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", @@ -1332,6 +1375,25 @@ "object-keys": "^1.1.1" } }, + "react": { + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz", + "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "react-dom": { + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz", + "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.1" + } + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -1405,6 +1467,15 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, + "scheduler": { + "version": "0.20.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz", + "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", diff --git a/package.json b/package.json index 672f96ce..ef0c3a2f 100644 --- a/package.json +++ b/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" + } } diff --git a/tsconfig.json b/tsconfig.json index 5fd586af..3fd4eb50 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,6 +9,7 @@ "jsx": "react", "allowJs": true, "moduleResolution": "node", - "strict": true + "strict": true, + "allowSyntheticDefaultImports": true } } \ No newline at end of file