From 5d9b7eb98d659033ef906407bdecc0e5831af758 Mon Sep 17 00:00:00 2001 From: Min Htet Oo Date: Wed, 21 Feb 2024 16:58:27 +0800 Subject: [PATCH] fix: use createRoot for React18 --- .eslintrc.json | 22 +++++ package-lock.json | 88 +++++++++---------- package.json | 4 +- src/core/DocumentQrCode/DocumentQrCode.tsx | 1 - src/core/PrintWatermark/PrintWatermark.tsx | 2 +- src/core/Wrapper/Wrapper.tsx | 2 +- src/index.tsx | 17 ++-- .../TemplateAWithWrapperAndErrorBoundry.tsx | 1 - 8 files changed, 82 insertions(+), 55 deletions(-) create mode 100644 .eslintrc.json diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..e383ae9 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,22 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react/recommended" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": [ + "@typescript-eslint", + "react" + ], + "rules": { + } +} diff --git a/package-lock.json b/package-lock.json index 8a6a6e3..630e0ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,8 +43,8 @@ "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@types/xml2js": "^0.4.14", - "@typescript-eslint/eslint-plugin": "^7.0.1", - "@typescript-eslint/parser": "^7.0.1", + "@typescript-eslint/eslint-plugin": "^7.0.2", + "@typescript-eslint/parser": "^7.0.2", "autoprefixer": "^10.4.17", "babel-loader": "^9.1.3", "brotli-webpack-plugin": "^1.1.0", @@ -7122,16 +7122,16 @@ "dev": true }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.0.1.tgz", - "integrity": "sha512-OLvgeBv3vXlnnJGIAgCLYKjgMEU+wBGj07MQ/nxAaON+3mLzX7mJbhRYrVGiVvFiXtwFlkcBa/TtmglHy0UbzQ==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.0.2.tgz", + "integrity": "sha512-/XtVZJtbaphtdrWjr+CJclaCVGPtOdBpFEnvtNf/jRV0IiEemRrL0qABex/nEt8isYcnFacm3nPHYQwL+Wb7qg==", "dev": true, "dependencies": { "@eslint-community/regexpp": "^4.5.1", - "@typescript-eslint/scope-manager": "7.0.1", - "@typescript-eslint/type-utils": "7.0.1", - "@typescript-eslint/utils": "7.0.1", - "@typescript-eslint/visitor-keys": "7.0.1", + "@typescript-eslint/scope-manager": "7.0.2", + "@typescript-eslint/type-utils": "7.0.2", + "@typescript-eslint/utils": "7.0.2", + "@typescript-eslint/visitor-keys": "7.0.2", "debug": "^4.3.4", "graphemer": "^1.4.0", "ignore": "^5.2.4", @@ -7190,15 +7190,15 @@ "dev": true }, "node_modules/@typescript-eslint/parser": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.0.1.tgz", - "integrity": "sha512-8GcRRZNzaHxKzBPU3tKtFNing571/GwPBeCvmAUw0yBtfE2XVd0zFKJIMSWkHJcPQi0ekxjIts6L/rrZq5cxGQ==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.0.2.tgz", + "integrity": "sha512-GdwfDglCxSmU+QTS9vhz2Sop46ebNCXpPPvsByK7hu0rFGRHL+AusKQJ7SoN+LbLh6APFpQwHKmDSwN35Z700Q==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "7.0.1", - "@typescript-eslint/types": "7.0.1", - "@typescript-eslint/typescript-estree": "7.0.1", - "@typescript-eslint/visitor-keys": "7.0.1", + "@typescript-eslint/scope-manager": "7.0.2", + "@typescript-eslint/types": "7.0.2", + "@typescript-eslint/typescript-estree": "7.0.2", + "@typescript-eslint/visitor-keys": "7.0.2", "debug": "^4.3.4" }, "engines": { @@ -7218,13 +7218,13 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.0.1.tgz", - "integrity": "sha512-v7/T7As10g3bcWOOPAcbnMDuvctHzCFYCG/8R4bK4iYzdFqsZTbXGln0cZNVcwQcwewsYU2BJLay8j0/4zOk4w==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.0.2.tgz", + "integrity": "sha512-l6sa2jF3h+qgN2qUMjVR3uCNGjWw4ahGfzIYsCtFrQJCjhbrDPdiihYT8FnnqFwsWX+20hK592yX9I2rxKTP4g==", "dev": true, "dependencies": { - "@typescript-eslint/types": "7.0.1", - "@typescript-eslint/visitor-keys": "7.0.1" + "@typescript-eslint/types": "7.0.2", + "@typescript-eslint/visitor-keys": "7.0.2" }, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -7235,13 +7235,13 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.0.1.tgz", - "integrity": "sha512-YtT9UcstTG5Yqy4xtLiClm1ZpM/pWVGFnkAa90UfdkkZsR1eP2mR/1jbHeYp8Ay1l1JHPyGvoUYR6o3On5Nhmw==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.0.2.tgz", + "integrity": "sha512-IKKDcFsKAYlk8Rs4wiFfEwJTQlHcdn8CLwLaxwd6zb8HNiMcQIFX9sWax2k4Cjj7l7mGS5N1zl7RCHOVwHq2VQ==", "dev": true, "dependencies": { - "@typescript-eslint/typescript-estree": "7.0.1", - "@typescript-eslint/utils": "7.0.1", + "@typescript-eslint/typescript-estree": "7.0.2", + "@typescript-eslint/utils": "7.0.2", "debug": "^4.3.4", "ts-api-utils": "^1.0.1" }, @@ -7262,9 +7262,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.0.1.tgz", - "integrity": "sha512-uJDfmirz4FHib6ENju/7cz9SdMSkeVvJDK3VcMFvf/hAShg8C74FW+06MaQPODHfDJp/z/zHfgawIJRjlu0RLg==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.0.2.tgz", + "integrity": "sha512-ZzcCQHj4JaXFjdOql6adYV4B/oFOFjPOC9XYwCaZFRvqN8Llfvv4gSxrkQkd2u4Ci62i2c6W6gkDwQJDaRc4nA==", "dev": true, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -7275,13 +7275,13 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.0.1.tgz", - "integrity": "sha512-SO9wHb6ph0/FN5OJxH4MiPscGah5wjOd0RRpaLvuBv9g8565Fgu0uMySFEPqwPHiQU90yzJ2FjRYKGrAhS1xig==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.0.2.tgz", + "integrity": "sha512-3AMc8khTcELFWcKcPc0xiLviEvvfzATpdPj/DXuOGIdQIIFybf4DMT1vKRbuAEOFMwhWt7NFLXRkbjsvKZQyvw==", "dev": true, "dependencies": { - "@typescript-eslint/types": "7.0.1", - "@typescript-eslint/visitor-keys": "7.0.1", + "@typescript-eslint/types": "7.0.2", + "@typescript-eslint/visitor-keys": "7.0.2", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -7336,17 +7336,17 @@ "dev": true }, "node_modules/@typescript-eslint/utils": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.0.1.tgz", - "integrity": "sha512-oe4his30JgPbnv+9Vef1h48jm0S6ft4mNwi9wj7bX10joGn07QRfqIqFHoMiajrtoU88cIhXf8ahwgrcbNLgPA==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.0.2.tgz", + "integrity": "sha512-PZPIONBIB/X684bhT1XlrkjNZJIEevwkKDsdwfiu1WeqBxYEEdIgVDgm8/bbKHVu+6YOpeRqcfImTdImx/4Bsw==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@types/json-schema": "^7.0.12", "@types/semver": "^7.5.0", - "@typescript-eslint/scope-manager": "7.0.1", - "@typescript-eslint/types": "7.0.1", - "@typescript-eslint/typescript-estree": "7.0.1", + "@typescript-eslint/scope-manager": "7.0.2", + "@typescript-eslint/types": "7.0.2", + "@typescript-eslint/typescript-estree": "7.0.2", "semver": "^7.5.4" }, "engines": { @@ -7394,12 +7394,12 @@ "dev": true }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.0.1.tgz", - "integrity": "sha512-hwAgrOyk++RTXrP4KzCg7zB2U0xt7RUU0ZdMSCsqF3eKUwkdXUMyTb0qdCuji7VIbcpG62kKTU9M1J1c9UpFBw==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.0.2.tgz", + "integrity": "sha512-8Y+YiBmqPighbm5xA2k4wKTxRzx9EkBu7Rlw+WHqMvRJ3RPz/BMBO9b2ru0LUNmXg120PHUXD5+SWFy2R8DqlQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "7.0.1", + "@typescript-eslint/types": "7.0.2", "eslint-visitor-keys": "^3.4.1" }, "engines": { diff --git a/package.json b/package.json index 9916dab..4bece62 100644 --- a/package.json +++ b/package.json @@ -58,8 +58,8 @@ "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@types/xml2js": "^0.4.14", - "@typescript-eslint/eslint-plugin": "^7.0.1", - "@typescript-eslint/parser": "^7.0.1", + "@typescript-eslint/eslint-plugin": "^7.0.2", + "@typescript-eslint/parser": "^7.0.2", "autoprefixer": "^10.4.17", "babel-loader": "^9.1.3", "brotli-webpack-plugin": "^1.1.0", diff --git a/src/core/DocumentQrCode/DocumentQrCode.tsx b/src/core/DocumentQrCode/DocumentQrCode.tsx index ad95b96..1d9a68c 100644 --- a/src/core/DocumentQrCode/DocumentQrCode.tsx +++ b/src/core/DocumentQrCode/DocumentQrCode.tsx @@ -2,7 +2,6 @@ import styled from "@emotion/styled"; import QRCode from "qrcode.react"; import React, { FunctionComponent } from "react"; import qrcodeImg from "/static/images/logo-qrcode.png"; -import ImageSettings from "qrcode.react"; const Print = styled.div` display: none; diff --git a/src/core/PrintWatermark/PrintWatermark.tsx b/src/core/PrintWatermark/PrintWatermark.tsx index 326d4d8..c76037f 100644 --- a/src/core/PrintWatermark/PrintWatermark.tsx +++ b/src/core/PrintWatermark/PrintWatermark.tsx @@ -1,6 +1,6 @@ /// -import React, { FunctionComponent } from "react"; +import React from "react"; import { css } from "@emotion/react"; import watermark from "./watermark.svg"; diff --git a/src/core/Wrapper/Wrapper.tsx b/src/core/Wrapper/Wrapper.tsx index 43bfe60..5bcaf39 100644 --- a/src/core/Wrapper/Wrapper.tsx +++ b/src/core/Wrapper/Wrapper.tsx @@ -5,7 +5,7 @@ interface WrapperProps { children: ReactNode; } // `container mx-auto px-4` <- this is in line with tt and creator's tw config, so containers can align -export const Wrapper: FunctionComponent = ({ children, ...props }) => { +export const Wrapper: FunctionComponent = ({ children, ...props }) => { return (
diff --git a/src/index.tsx b/src/index.tsx index 17f6ba8..aac3320 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,10 +1,17 @@ import React from "react"; -import ReactDOM from "react-dom"; -import { FramedDocumentRenderer, fullAttachmentRenderer } from "@tradetrust-tt/decentralized-renderer-react-components"; +import { + FramedDocumentRenderer, + fullAttachmentRenderer, +} from "@tradetrust-tt/decentralized-renderer-react-components"; import { registry } from "./templates"; import "./main.css"; -ReactDOM.render( - , - document.getElementById("root") +import { createRoot } from "react-dom/client"; +const container = document.getElementById("root"); +const root = createRoot(container!); +root.render( + ); diff --git a/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx b/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx index 4053426..2f3758d 100644 --- a/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx +++ b/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx @@ -1,6 +1,5 @@ import { TemplateProps } from "@tradetrust-tt/decentralized-renderer-react-components"; import React, { FunctionComponent } from "react"; -import { DocumentQrCode } from "../../../core/DocumentQrCode"; import { Wrapper } from "../../../core/Wrapper"; import { getDocumentData } from "../../../utils"; import { TemplateADocument, TemplateASchema } from "./types";