chore: merge dev (#11647)

* refactor: change how to represent modal routes (#11628) * refactor: update routes of popup (#11630) * refactor: defer loading of routed modals (#11632) * refactor: change pnpm config (#11633) * refactor: support x.com in code (#11634) * chore: update to pnpm 9 (#11635) * chore: update to react 19 (#11636) * fix: cf build (#11637) * fix: splint crashes * fix: react-qrcode-logo crashes * feat: add react compiler (#11638) * fix: react-devtools * fix: source map * chore: update to eslint 9 (#11641) * refactor: enable rule react/naming-convention/component-name * refactor: enable rule typescript-eslint/no-non-null-asserted-optional-chain * refactor: enable rule react/no-children-* * refactor: enable rule no-async-promise-executor no-promise-executor-return and @typescript-eslint/return-await * chore: eslint --------- Co-authored-by: Jack Works <[email protected]>
DimensionDev · May 24, 2024 · a7cfc9b · a7cfc9b
1 parent b4cd833
commit a7cfc9b
Show file tree

Hide file tree

Showing 265 changed files with 18,285 additions and 13,964 deletions.
diff --git a/.env/dev-preference.example b/.env/dev-preference.example
@@ -32,11 +32,11 @@
 
 ### Preferred Manifest Version
 
-; manifest=2
-# (default) Use Chromium Manifest V2 as default development target.
-
 ; manifest=3
-# Use Chromium Manifest V3 as default development target.
+# (default) Use Chromium Manifest V3 as default development target.
+
+; manifest=2
+# Use Chromium Manifest V2 as default development target.
 
 ; manifest=chromium-mv2
 ; manifest=chromium-beta-mv3
@@ -70,3 +70,16 @@
 
 # devtoolsEditorURI=...
 # Any URI that can open the editor you used.
+
+### React compiler
+
+; reactCompiler=false
+# (default) Not enabling react compiler.
+
+; reactCompiler=true
+# Enable react compiler.
+
+; reactCompiler=infer
+; reactCompiler=annotation
+; reactCompiler=all
+# Enable react compiler with specific mode.
diff --git a/.pnpmfile.cjs b/.pnpmfile.cjs
@@ -11,14 +11,14 @@ approvedList.set('webpack', [
     'Jack-Works/webpack#528c91e564d5756e21c9c462b607d913452af770',
 ])
 
+approvedList.set('@types/react', ['npm:types-react@beta'])
+approvedList.set('@types/react-dom', ['npm:types-react-dom@beta'])
+
 // glob -> jackspeak -> @isaacs/cliui -> ...
 approvedList.set('string-width-cjs', 'npm:string-width@^4.2.0')
 approvedList.set('strip-ansi-cjs', 'npm:strip-ansi@^6.0.1')
 approvedList.set('wrap-ansi-cjs', ['npm:wrap-ansi@^6.0.1', 'npm:wrap-ansi@^7.0.0'])
 
-// knip -> @pnpm/* -> ...
-approvedList.set('ramda', 'npm:@pnpm/[email protected]')
-
 // @magic-works/i18n-codegen -> i18next-translation-parser
 // https://github.com/i18next/i18next-translation-parser/issues/11
 approvedList.set('html-parse-stringify2', [

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,4 @@
 {
-    "eslint.experimental.useFlatConfig": true,
     "typescript.tsdk": "node_modules/typescript/lib",
     "typescript.preferences.importModuleSpecifierEnding": "js",
     "js/ts.implicitProjectConfig.module": "NodeNext",

diff --git a/cspell.json b/cspell.json
@@ -131,6 +131,7 @@
         "imagebitmap",
         "immer",
         "imtokenv",
+        "innerhtml",
         "inspectable",
         "investables",
         "iotx",

diff --git a/eslint.config.js b/eslint.config.js
@@ -1,24 +1,16 @@
 // cSpell:disable
 // @ts-check
+import { fixupPluginRules } from '@eslint/compat'
 import tseslint from 'typescript-eslint'
-
 import UnicornPlugin from 'eslint-plugin-unicorn'
 import UnusedImportsPlugin from 'eslint-plugin-unused-imports'
 import UnusedClassesPlugin from 'eslint-plugin-tss-unused-classes'
-import ReactPlugin from 'eslint-plugin-react'
 import ReactHooksPlugin from 'eslint-plugin-react-hooks'
 import ImportPlugin from 'eslint-plugin-i'
+import ReactPlugin from '@eslint-react/eslint-plugin'
 import MasknetPlugin from '@masknet/eslint-plugin'
 import * as ReactQueryPlugin from '@tanstack/eslint-plugin-query'
 
-import { pathToFileURL } from 'node:url'
-
-// this is a patch to https://github.com/typescript-eslint/typescript-eslint/issues/3811
-if (pathToFileURL(process.argv[1]).toString().includes('eslint/bin/eslint.js')) {
-    // cspell: disable-next-line
-    process.env.TSESTREE_SINGLE_RUN = 'true'
-}
-
 const deferPackages = [
     'wallet.ts',
     'anchorme',
@@ -59,8 +51,13 @@ const avoidMistakeRules = {
         },
     ], // disable a rule requires a reason
     /// React bad practice
-    'react/no-invalid-html-attribute': 'warn',
-    'react/void-dom-elements-no-children': 'error', // <img>children</img>
+    'react/no-children-count': 'error',
+    'react/no-children-for-each': 'error',
+    // 'react/no-children-map': 'error',
+    'react/no-children-only': 'error',
+    // 'react/no-children-prop': 'error',
+    'react/no-children-to-array': 'error',
+    // 'react/no-clone-element': 'error',
     /// TypeScript bad practice
     '@typescript-eslint/ban-types': [
         'error',
@@ -101,7 +98,7 @@ const avoidMistakeRules = {
     // '@masknet/no-builtin-base64': 'warn', // Note: it fixes to Node's Buffer
     /// type safety
     // '@typescript-eslint/method-signature-style': 'warn', // method signature is bivariant
-    // '@typescript-eslint/no-non-null-asserted-optional-chain': 'error', // bans foo?.bar!
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'error', // bans foo?.bar!
     // '@typescript-eslint/no-unsafe-argument': 'error', // bans call(any)
     // '@typescript-eslint/no-unsafe-assignment': 'error', // bans a = any
     // '@typescript-eslint/no-unsafe-call': 'error', // bans any()
@@ -118,10 +115,12 @@ const avoidMistakeRules = {
     // Security
     'no-script-url': 'error', // javascript:
     // 'unicorn/require-post-message-target-origin': 'warn', // postMessage(data, 'origin')
-    // 'react/iframe-missing-sandbox': 'warn', // <iframe sandbox="..." />
-    'react/jsx-no-script-url': 'error', // javascript:
-    'react/no-danger': 'error', // dangerouslySetInnerHTML
-    'react/no-danger-with-children': 'error', // dangerouslySetInnerHTML + children
+    'react/dom/no-dangerously-set-innerhtml': 'error', // dangerouslySetInnerHTML
+    'react/dom/no-dangerously-set-innerhtml-with-children': 'error', // dangerouslySetInnerHTML + children
+    'react/dom/no-missing-iframe-sandbox': 'error', // <iframe sandbox="..." />
+    'react/dom/no-script-url': 'error', // javascript:
+    'react/dom/no-unsafe-iframe-sandbox': 'error', // <iframe sandbox="..." />
+    'react/dom/no-unsafe-target-blank': 'error',
     '@typescript-eslint/no-implied-eval': 'error', // setTimeout('code')
     '@masknet/browser-no-set-html': 'error', // .innerHTML =
     // '@masknet/string-no-data-url': 'error', // data:...
@@ -137,7 +136,6 @@ const avoidMistakeRules = {
     'no-label-var': 'warn', // name collision
     'no-plusplus': 'warn', // ++i? i++?
     'no-sequences': 'warn', // (a, b)
-    // 'react/no-unescaped-entities': 'warn', // <div> >1 </div>
     '@typescript-eslint/no-confusing-non-null-assertion': 'error', // a! == b
 
     // Problematic language features
@@ -146,7 +144,7 @@ const avoidMistakeRules = {
     'unicorn/require-array-join-separator': 'warn', // Array.join(_required_)
     // This rule breaks BigNumber class which has different .toFixed() default value.
     // 'unicorn/require-number-to-fixed-digits-argument': 'warn', // Number#toFixed(_required_)
-    'react/button-has-type': 'error', // default type is "submit" which refresh the page
+    'react/dom/no-missing-button-type': 'error', // default type is "submit" which refresh the page
     '@typescript-eslint/require-array-sort-compare': 'error', // Array#sort(_required_)
     '@masknet/type-no-instanceof-wrapper': 'warn', // bans `expr instanceof String` etc
     /// Footgun language features
@@ -158,7 +156,7 @@ const avoidMistakeRules = {
     '@typescript-eslint/prefer-enum-initializers': 'warn', // add a new item in the middle is an API breaking change.
     /// Little-known language features
     'no-constructor-return': 'error', // constructor() { return expr }
-    'react/no-namespace': 'error', // <svg:rect> react does not support
+    'react/dom/no-namespace': 'error', // <svg:rect> react does not support
     '@typescript-eslint/no-unsafe-declaration-merging': 'error',
     '@typescript-eslint/no-mixed-enums': 'error', // enum { a = 1, b = "b" }
     '@typescript-eslint/prefer-literal-enum-member': 'error', // enum { a = outsideVar }
@@ -200,20 +198,24 @@ const avoidMistakeRules = {
     // 'require-atomic-updates': 'error', // await/yield race condition
     'valid-typeof': 'error', // typeof expr === undefined
     'unicorn/no-invalid-remove-event-listener': 'error', // removeEventListener('click', f.bind(...))
-    'react/jsx-no-comment-textnodes': 'warn', // <div>// comment</div> will render text!
-    'react/jsx-no-leaked-render': 'error', // <div>{0 && <Something />}</div> will render "0"!
-    'react/no-unstable-nested-components': 'error', // rerender bugs
+    'react/dom/no-children-in-void-dom-elements': 'warn', // <img>children</img>
+    'react/no-comment-textnodes': 'warn', // <div>// comment</div> will render text!
+    'react/no-duplicate-key': 'warn', // <div key={1} /> <div key={1} />
+    'react/no-leaked-conditional-rendering': 'error', // <div>{0 && <Something />}</div> will render "0"!
+    'react/no-nested-components': 'error', // rerender bugs
     'react-hooks/rules-of-hooks': 'error', // react hooks
     '@typescript-eslint/no-base-to-string': 'error', // prevent buggy .toString() call
     '@typescript-eslint/no-loop-func': 'warn', // capture a loop variable might be a bug
     '@typescript-eslint/no-duplicate-enum-values': 'error', // enum { a = 1, b = 1 }
     '@masknet/string-no-locale-case': 'error', // in non-i18n cases use locale-aware string methods are wrong
 
     // Performance
-    'react/jsx-key': ['warn', { checkFragmentShorthand: true, checkKeyMustBeforeSpread: true, warnOnDuplicates: true }], // key={data.key}
-    'react/jsx-no-constructed-context-values': 'warn', // <Provider value={{}}> (should be cached!)
-    // 'react/no-array-index-key': 'warn', // no key={index}
-    // 'react/no-object-type-as-default-prop': 'warn', // function Component({ items = [] })
+    'react/no-missing-key': 'warn',
+    'react/no-unstable-context-value': 'warn',
+    'react/no-unstable-default-props': 'warn',
+    // 'react/hooks-extra/ensure-use-callback-has-non-empty-deps': 'warn',
+    // 'react/hooks-extra/ensure-use-memo-has-non-empty-deps': 'warn',
+    'react/hooks-extra/prefer-use-state-lazy-initialization': 'warn',
     'unicorn/consistent-function-scoping': 'warn', // hoist unnecessary higher order functions
 }
 const codeStyleRules = {
@@ -223,8 +225,7 @@ const codeStyleRules = {
     'no-prototype-builtins': 'error', // bans `obj.hasOwnProperty()` etc
     'no-var': 'error', // var x
     'unicorn/no-new-buffer': 'error', // NodeJS
-    'react/no-deprecated': 'error',
-    'react/no-find-dom-node': 'error',
+    'react/no-class-component': 'error',
     // Let's wait for https://github.com/typescript-eslint/typescript-eslint/issues/6572
     // '@typescript-eslint/no-namespace': 'error', // namespace T {}
     '@typescript-eslint/prefer-namespace-keyword': 'error', // but if you really need to, don't use `module T {}`
@@ -243,7 +244,7 @@ const codeStyleRules = {
     'no-useless-concat': 'warn', // "a" + "b"
     'no-useless-escape': 'warn', // "hol\a"
     // 'no-lone-blocks': 'warn', // no block that not introducing a new scope
-    // 'react/jsx-no-useless-fragment': 'warn', // <><TheOnlyChild /></>
+    'react/no-useless-fragment': 'warn',
     'unicorn/no-console-spaces': 'warn', // console.log('id: ', id)
     'unicorn/no-empty-file': 'warn',
     'unicorn/no-useless-fallback-in-spread': 'warn', // {...(foo || {})}
@@ -280,6 +281,7 @@ const codeStyleRules = {
     'prefer-object-has-own': 'warn',
     // 'prefer-object-spread': 'warn', // { ... } than Object.assign
     // 'prefer-rest-params': 'warn',
+
     'unicorn/no-document-cookie': 'error', // even if you have to do so, use CookieJar
     'unicorn/prefer-keyboard-event-key': 'warn',
     'unicorn/prefer-add-event-listener': 'warn',
@@ -326,15 +328,14 @@ const codeStyleRules = {
     // Better debug
     // 'prefer-promise-reject-errors': 'warn', // Promise.reject(need_error)
     'symbol-description': 'warn', // Symbol(desc)
-    // 'react/display-name': ['warn', { checkContextObjects: true }], // .displayName = '...'
+    // 'react/no-missing-component-display-name': 'warn',
     'unicorn/catch-error-name': ['warn', { ignore: ['^err$'] }], // catch (err)
     // 'unicorn/custom-error-definition': 'warn', // correctly extends the native error
     // 'unicorn/error-message': 'warn', // error must have a message
     // 'unicorn/prefer-type-error': 'warn', // prefer TypeError
     // '@typescript-eslint/no-throw-literal': 'warn', // no throw 'string'
 
     // API design
-    // 'react/prefer-read-only-props': 'error',
     // '@typescript-eslint/no-extraneous-class': 'error', // no class with only static members
     // '@typescript-eslint/prefer-readonly': 'error',
     // '@typescript-eslint/prefer-readonly-parameter-types': 'error',
@@ -360,19 +361,8 @@ const codeStyleRules = {
     'unicorn/throw-new-error': 'warn',
     // 'unicorn/prefer-logical-operator-over-ternary': 'warn', // prefer ?? and ||
     // 'unicorn/prefer-optional-catch-binding': 'warn', // prefer to omit catch binding
-    'react/function-component-definition': [
-        'warn',
-        {
-            namedComponents: 'function-declaration',
-            unnamedComponents: ['function-expression', 'arrow-function'],
-        },
-    ],
-    'react/jsx-boolean-value': ['error', 'never'],
-    // 'react/jsx-boolean-value': ['error', 'never', { always: ['value'] }],
-    // 'react/jsx-curly-brace-presence': ['warn', { props: 'never', children: 'never' }],
-    // 'react/jsx-fragments': ['warn', 'syntax'],
-    // 'react/no-children-prop': 'warn',
-    'react/self-closing-comp': 'warn',
+    'react/prefer-shorthand-boolean': 'warn',
+    'react/prefer-shorthand-fragment': 'warn',
     '@typescript-eslint/prefer-as-const': 'warn',
 
     // Consistency
@@ -408,10 +398,8 @@ const codeStyleRules = {
     // Naming convension
     // 'func-name-matching': 'warn',
     // 'new-cap': 'warn',
-    // 'react/boolean-prop-naming': 'warn',
-    // 'react/hook-use-state': ['warn', { allowDestructuredState: true }],
-    // 'react/jsx-handler-names': 'warn',
-    // 'react/jsx-pascal-case': 'warn',
+    'react/naming-convention/component-name': ['warn', { rule: 'PascalCase' }],
+    // 'react/naming-convention/file-name': ['warn', { rule: 'PascalCase' }],
 
     // Bad practice
     'no-ex-assign': 'warn', // reassign err in catch
@@ -422,11 +410,11 @@ const codeStyleRules = {
     // '@typescript-eslint/default-param-last': 'warn', // (a, b = 1, c)
     // '@typescript-eslint/no-dynamic-delete': 'error', // this usually means you should use Map/Set
     /// Async functions / Promise bad practice
-    // 'no-async-promise-executor': 'error', // new Promise(async (resolve) => )
-    // 'no-promise-executor-return': 'error', // new Promise(() => result)
+    'no-async-promise-executor': 'error', // new Promise(async (resolve) => )
+    'no-promise-executor-return': 'error', // new Promise(() => result)
     // '@typescript-eslint/no-floating-promises': 'warn', // unhandled promises
     // '@typescript-eslint/promise-function-async': 'warn', // avoid Zalgo
-    // '@typescript-eslint/return-await': 'warn', // return await expr
+    '@typescript-eslint/return-await': 'warn', // return await expr
 
     // No unused
     'no-unused-labels': 'warn',
@@ -538,6 +526,7 @@ const moduleSystemRules = {
     ],
 }
 
+/** @type {any} */
 const plugins = {
     'tss-unused-classes': UnusedClassesPlugin,
     react: ReactPlugin,
@@ -546,8 +535,8 @@ const plugins = {
     '@typescript-eslint': tseslint.plugin,
     '@masknet': MasknetPlugin,
     'unused-imports': UnusedImportsPlugin,
-    'react-hooks': ReactHooksPlugin,
-    '@tanstack/query': ReactQueryPlugin,
+    'react-hooks': fixupPluginRules(ReactHooksPlugin),
+    '@tanstack/query': fixupPluginRules(ReactQueryPlugin),
 }
 export default tseslint.config(
     {
@@ -591,11 +580,11 @@ export default tseslint.config(
         linterOptions: {
             reportUnusedDisableDirectives: true,
         },
-        rules: {
+        rules: /** @type {any} */ ({
             ...avoidMistakeRules,
             ...codeStyleRules,
             ...moduleSystemRules,
-        },
+        }),
     },
     {
         files: ['packages/mask/background/**/*.ts'],