Switch to type only import & upgrade to prettier 2.0

jest.config.js

@@ -17,13 +17,12 @@ module.exports = {
         path.join(__dirname, './scripts/jest-setup.js'),
     ],
     // skip packages other than 'ts-results', 'async-call-rpc' and 'holoflows/kit'
-    transformIgnorePatterns: ['node_modules((?!(ts-results|async-call-rpc|@holoflows\\/kit)).)*$'],
+    transformIgnorePatterns: [],
     transform: {
-        '[/\\\\]node_modules[/\\\\].+\\.m?js$': 'jest-esm-transformer',
+        'node_modules.+(ts-results|async-call-rpc|holoflows).+.js$': 'jest-esm-transformer',
     },
     moduleNameMapper: {
-        '^@holoflows/kit.+(?<!sleep)$': require.resolve('@holoflows/kit/umd/index.js'),
         'lodash-es': require.resolve('lodash'),
-        'idb/with-async-ittr': require.resolve('idb/with-async-ittr-cjs.js'),
+        'idb/with-async-ittr-cjs': require.resolve('idb/with-async-ittr-cjs.js'),
     },
 }

package.json

@@ -28,7 +28,7 @@
     "start:ios": "webpack-dev-server --wk-webview --mode development",
     "storybook": "start-storybook -p 9009 -s public --quiet",
     "test": "jest --watch",
-    "test:ci": "jest --ci --collectCoverage=true --reporters=default --reporters=jest-junit -w 1",
+    "test:ci": "jest --ci --collectCoverage=true --reporters=default --reporters=jest-junit -w 1 --forceExit",
     "test:e2e": "jest --runInBand --config=jest-e2e.config.js",
     "uninstall": "ts-node scripts/postinstall.ts"
   },
@@ -126,8 +126,8 @@
     "@types/jest": "^25.1.4",
     "@types/jest-environment-puppeteer": "^4.3.1",
     "@types/puppeteer": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.19.2",
+    "@typescript-eslint/eslint-plugin": "^2.25.0",
+    "@typescript-eslint/parser": "^2.25.0",
     "asmcrypto.js": "^2.3.2",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.1.0",
@@ -136,10 +136,10 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react-hooks": "^2.3.0",
+    "eslint-plugin-react-hooks": "^2.5.1",
     "esm": "^3.2.25",
     "expect-puppeteer": "^4.4.0",
     "fake-indexeddb": "^3.0.0",
@@ -154,7 +154,7 @@
     "jest-webextension-mock": "^3.5.0",
     "lint-staged": "^10.0.7",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.19.1",
+    "prettier": "^2.0.2",
     "puppeteer": "^2.1.1",
     "react-devtools": "^4.5.0",
     "react-docgen-typescript-loader": "^3.7.1",

public/firefoxFix.js

@@ -45,18 +45,18 @@
     const PatchThisOfDescriptorToGlobal = (desc, global) => {
         const { get, set, value } = desc
         if (get)
-            desc.get = function() {
+            desc.get = function () {
                 if (this === globalThis) return get.apply(window)
                 return get.apply(this)
             }
         if (set)
-            desc.set = function(val) {
+            desc.set = function (val) {
                 if (this === globalThis) return set.apply(global, val)
                 return set.apply(this, val)
             }
         if (value && typeof value === 'function') {
             const desc2 = Object.getOwnPropertyDescriptors(value)
-            desc.value = function(...args) {
+            desc.value = function (...args) {
                 if (new.target) return Reflect.construct(value, args, new.target)
                 return Reflect.apply(value, this === globalThis ? global : this, args)
             }

scripts/import-linter.ts

@@ -24,7 +24,7 @@ if (diags) {
 }
 
 function getChecker(): (path: string) => string | null {
-    return x => {
+    return (x) => {
         if (x.includes('@material-ui')) {
             return `@material-ui appears in the import chain!
 To write a cross context file, use safeMUI() inside the function to import them conditionally.
@@ -55,6 +55,7 @@ function checkReferenceRecursive(
     for (const dependency of file.getImportDeclarations()) {
         let isTypeOnlyImport = true
 
+        if (dependency.compilerNode.importClause?.isTypeOnly) continue
         // We consider default import and ns import is not type only import
         if (dependency.getDefaultImport() || dependency.getNamespaceImport()) {
             isTypeOnlyImport = false
@@ -97,7 +98,7 @@ function checkReferenceRecursive(
         esModuleStyleImport.push(path)
     }
     const nodeStyleRequires: string[] = []
-    file.transform(traversal => {
+    file.transform((traversal) => {
         const node = traversal.visitChildren()
         // require('...')
         if (!ts.ts.isCallExpression(node)) return node
@@ -125,7 +126,7 @@ function checkReferenceRecursive(
         if (diag) {
             console.error(`${diag}
 Import chain:
-${nextRefChain.map(x => '  => ' + x).join('\n')}
+${nextRefChain.map((x) => '  => ' + x).join('\n')}
 `)
             hasDiagnostics = true
         }

scripts/jest-global-setup.js

@@ -3,11 +3,11 @@ module.exports = async () => {
 }
 
 function addAsmCryptoForTest(cb) {
-    var download = function(url, dest, cb) {
+    var download = function (url, dest, cb) {
         var file = fs.createWriteStream(dest)
-        var request = http.get(url, function(response) {
+        var request = http.get(url, function (response) {
             response.pipe(file)
-            file.on('finish', function() {
+            file.on('finish', function () {
                 file.close(cb)
             })
         })

scripts/puppeteer-repl.js

@@ -30,7 +30,7 @@ const pptOpts = {
 function findChrome() {
     try {
         const clBase = path.join(require.resolve('chrome-launcher'), '..')
-        global.clInt = x => require(path.join(clBase, `${x}.js`))
+        global.clInt = (x) => require(path.join(clBase, `${x}.js`))
         return clInt('chrome-finder')[clInt('utils').getPlatform()]()[0]
     } catch (e) {
         console.error(e)

src/background-service.ts

@@ -30,17 +30,17 @@ if (GetContext() === 'background') {
     }`
     const contentScripts: Array<{ code: string } | { file: string }> = []
     const contentScriptReady = fetch('generated__content__script.html')
-        .then(x => x.text())
-        .then(html => {
+        .then((x) => x.text())
+        .then((html) => {
             const parser = new DOMParser()
             const root = parser.parseFromString(html, 'text/html')
-            root.querySelectorAll('script').forEach(script => {
+            root.querySelectorAll('script').forEach((script) => {
                 if (script.innerText) contentScripts.push({ code: script.innerText })
                 else if (script.src)
                     contentScripts.push({ file: new URL(script.src, browser.runtime.getURL('')).pathname })
             })
         })
-    browser.webNavigation.onCommitted.addListener(async arg => {
+    browser.webNavigation.onCommitted.addListener(async (arg) => {
         if (arg.url === 'about:blank') return
         await contentScriptReady
         /**
@@ -70,7 +70,7 @@ if (GetContext() === 'background') {
         }
     })
 
-    browser.runtime.onInstalled.addListener(detail => {
+    browser.runtime.onInstalled.addListener((detail) => {
         if (webpackEnv.genericTarget === 'facebookApp') return
         if (detail.reason === 'install') {
             browser.tabs.create({ url: getWelcomePageURL() })
@@ -94,7 +94,7 @@ if (GetContext() === 'background') {
     })
 }
 function IgnoreError(arg: unknown): (reason: Error) => void {
-    return e => {
+    return (e) => {
         if (e.message.includes('non-structured-clonable data')) {
             // It's okay we don't need the result, happened on Firefox
         } else if (e.message.includes('Frame not found, or missing host permission')) {

src/components/DataSource/useActivatedUI.ts

@@ -1,4 +1,4 @@
-import { Profile } from '../../database'
+import type { Profile } from '../../database'
 import { useValueRef } from '../../utils/hooks/useValueRef'
 import { getActivatedUI } from '../../social-network/ui'
 import { currentSelectedIdentity } from '../../components/shared-settings/settings'
@@ -24,11 +24,11 @@ export function useMyPersonas() {
 export function useCurrentIdentity(noDefault?: boolean): Profile | null {
     const all = useMyIdentities()
     const current = useValueRef(currentSelectedIdentity[getActivatedUI().networkIdentifier])
-    return all.find(i => i.identifier.toText() === current) || (noDefault ? null : all[0])
+    return all.find((i) => i.identifier.toText() === current) || (noDefault ? null : all[0])
 }
 export function useCurrentGroupsList() {
     const groups = useGroupsList()
     const currentIdentity = useCurrentIdentity()
     if (!currentIdentity) return []
-    return groups.filter(x => x.identifier.ownerIdentifier?.equals(currentIdentity.identifier))
+    return groups.filter((x) => x.identifier.ownerIdentifier?.equals(currentIdentity.identifier))
 }

src/components/DebugModeUI/DebugList.tsx

@@ -8,7 +8,7 @@ const F = (props: { hint: string; content: string | number }) => (
 export function DebugList(props: { items: readonly (readonly [string, string | number | undefined] | JSX.Element)[] }) {
     return (
         <ul style={{ wordBreak: 'break-all', padding: '0 1em', margin: 0, background: 'black', color: 'white' }}>
-            {props.items.map(x =>
+            {props.items.map((x) =>
                 Array.isArray(x) ? <F hint={x[0]} content={x[1] === undefined ? 'undefined' : x[1]} /> : x,
             )}
         </ul>

src/components/DebugModeUI/PostHashDialog.tsx

@@ -10,7 +10,7 @@ import DialogTitle from '@material-ui/core/DialogTitle'
 import { blue } from '@material-ui/core/colors'
 import { useFriendsList } from '../DataSource/useActivatedUI'
 import { Avatar } from '../../utils/components/Avatar'
-import { Profile } from '../../database'
+import type { Profile } from '../../database'
 import Services from '../../extension/service'
 import { PostIVIdentifier } from '../../database/type'
 import { deconstructPayload } from '../../utils/type-transform/Payload'
@@ -57,7 +57,7 @@ function SimpleDialog(props: SimpleDialogProps) {
                     If MagicCode is not the same, it means at least one of Maskbook calculate the post hash wrong.
                 </DialogContentText>
                 <List dense>
-                    {props.friends.map(one => {
+                    {props.friends.map((one) => {
                         const [magicCode, fingerprint] = map.get(one.identifier.toText()) || ['Unknown', 'Unknown']
                         return (
                             <ListItem>

src/components/InjectedComponents/AddToKeyStore.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { AdditionalContent, AdditionalContentProps } from './AdditionalPostContent'
 import Services from '../../extension/service'
 import { useI18N } from '../../utils/i18n-next-ui'
-import { ProfileIdentifier } from '../../database/type'
+import type { ProfileIdentifier } from '../../database/type'
 import { useAsync } from 'react-use'
 import CheckIcon from '@material-ui/icons/Check'
 import CloseIcon from '@material-ui/icons/Close'
@@ -35,7 +35,7 @@ export function AddToKeyStore({ provePost, postBy, ...props }: AddToKeyStoreProp
 type SuccessProps = Partial<AdditionalContentProps>
 type WaitingProps = Partial<AdditionalContentProps>
 type FailedProps = Partial<AdditionalContentProps> & { error: Error }
-const useStyle = makeStyles(theme => ({
+const useStyle = makeStyles((theme) => ({
     root: {
         display: 'inline-flex',
         lineHeight: '16px',

src/components/InjectedComponents/AdditionalPostContent.tsx

@@ -3,7 +3,7 @@ import { getUrl } from '../../utils/utils'
 import { makeStyles, Typography, Card } from '@material-ui/core'
 import { useStylesExtends } from '../custom-ui-helper'
 import classNames from 'classnames'
-import { TypedMessageText, TypedMessage } from '../../extension/background-script/CryptoServices/utils'
+import type { TypedMessageText, TypedMessage } from '../../extension/background-script/CryptoServices/utils'
 import { TypedMessageRendererProps, DefaultTypedMessageRenderer } from './TypedMessageRenderer'
 
 export interface AdditionalContentProps

src/components/InjectedComponents/CommentBox.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import { useCapturedInput } from '../../utils/hooks/useCapturedEvents'
-import { PropsOf } from '@emotion/styled-base/types/helper'
+import type { PropsOf } from '@emotion/styled-base/types/helper'
 import { useI18N } from '../../utils/i18n-next-ui'
 import { makeStyles } from '@material-ui/styles'
 import { InputBase } from '@material-ui/core'
@@ -39,7 +39,7 @@ export function CommentBox(props: CommentBoxProps) {
     const [binder, inputRef, node] = useCapturedInput(() => {})
     const { t } = useI18N()
     useEffect(
-        binder(['keypress'], e => {
+        binder(['keypress'], (e) => {
             if (!node) return
             if (e.key === 'Enter') {
                 props.onSubmit(node.value)

src/components/InjectedComponents/DecryptedPost/DecryptPostAwaiting.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { AdditionalContent, AdditionalContentProps } from '../AdditionalPostContent'
 import { useI18N } from '../../../utils/i18n-next-ui'
-import { DecryptionProgress } from '../../../extension/background-script/CryptoServices/decryptFrom'
+import type { DecryptionProgress } from '../../../extension/background-script/CryptoServices/decryptFrom'
 export interface DecryptPostAwaitingProps {
     type?: DecryptionProgress
     AdditionalContentProps?: Partial<AdditionalContentProps>

src/components/InjectedComponents/DecryptedPost/DecryptPostFailed.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { AdditionalContent, AdditionalContentProps } from '../AdditionalPostContent'
 import { useI18N } from '../../../utils/i18n-next-ui'
 import { NotSetupYetPrompt } from '../../shared/NotSetupYetPrompt'
-import { BannerProps } from '../../Welcomes/Banner'
+import type { BannerProps } from '../../Welcomes/Banner'
 import { DecryptFailedReason } from '../../../utils/constants'
 export interface DecryptPostFailedProps {
     error: Error

src/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx

@@ -1,15 +1,15 @@
 import React, { useMemo, useState, useEffect } from 'react'
 import { sleep } from '../../../utils/utils'
 import { ServicesWithProgress } from '../../../extension/service'
-import { Profile } from '../../../database'
-import { ProfileIdentifier, PostIdentifier } from '../../../database/type'
-import {
+import type { Profile } from '../../../database'
+import type { ProfileIdentifier, PostIdentifier } from '../../../database/type'
+import type {
     DecryptionProgress,
     FailureDecryption,
     SuccessDecryption,
 } from '../../../extension/background-script/CryptoServices/decryptFrom'
 import { deconstructPayload } from '../../../utils/type-transform/Payload'
-import { TypedMessage } from '../../../extension/background-script/CryptoServices/utils'
+import type { TypedMessage } from '../../../extension/background-script/CryptoServices/utils'
 import { DecryptPostSuccess, DecryptPostSuccessProps } from './DecryptedPostSuccess'
 import { DecryptPostAwaitingProps, DecryptPostAwaiting } from './DecryptPostAwaiting'
 import { DecryptPostFailedProps, DecryptPostFailed } from './DecryptPostFailed'
@@ -85,7 +85,7 @@ export function DecryptPost(props: DecryptPostProps) {
                 } else setDecryptingStatus(status.value)
             }
         }
-        run().catch(e => setDecrypted({ error: e?.message } as FailureDecryption))
+        run().catch((e) => setDecrypted({ error: e?.message } as FailureDecryption))
         return () => signal.abort()
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [encryptedText, postBy.toText(), whoAmI.toText(), sharedPublic])

src/components/InjectedComponents/DecryptedPost/DecryptedPostDebug.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
-import { Payload } from '../../../utils/type-transform/Payload'
-import { ProfileIdentifier } from '../../../database/type'
-import { SuccessDecryption, FailureDecryption } from '../../../extension/background-script/CryptoServices/decryptFrom'
+import type { Payload } from '../../../utils/type-transform/Payload'
+import type { ProfileIdentifier } from '../../../database/type'
+import type {
+    SuccessDecryption,
+    FailureDecryption,
+} from '../../../extension/background-script/CryptoServices/decryptFrom'
 import { DebugList } from '../../DebugModeUI/DebugList'
 import { DebugModeUI_PostHashDialog } from '../../DebugModeUI/PostHashDialog'
 import { useValueRef } from '../../../utils/hooks/useValueRef'

src/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx

@@ -5,10 +5,10 @@ import { getUrl } from '../../../utils/utils'
 import { useI18N } from '../../../utils/i18n-next-ui'
 import { makeStyles } from '@material-ui/styles'
 import { Box, Link, useMediaQuery, useTheme, Typography } from '@material-ui/core'
-import { Profile } from '../../../database'
-import { ProfileIdentifier, PostIdentifier } from '../../../database/type'
+import type { Profile } from '../../../database'
+import type { ProfileIdentifier, PostIdentifier } from '../../../database/type'
 import { useStylesExtends } from '../../custom-ui-helper'
-import { TypedMessage } from '../../../extension/background-script/CryptoServices/utils'
+import type { TypedMessage } from '../../../extension/background-script/CryptoServices/utils'
 import RedPacketInDecryptedPost from '../../../plugins/Wallet/UI/RedPacket/RedPacketInDecryptedPost'
 import CheckIcon from '@material-ui/icons/Check'
 import ClearIcon from '@material-ui/icons/Clear'
@@ -41,7 +41,7 @@ export const DecryptPostSuccess = React.memo(function DecryptPostSuccess(props:
     return (
         <AdditionalContent
             metadataRenderer={{
-                after: props => <RedPacketInDecryptedPost message={props.message} postIdentifier={postIdentifier} />,
+                after: (props) => <RedPacketInDecryptedPost message={props.message} postIdentifier={postIdentifier} />,
             }}
             header={<DecryptPostSuccessHeader {...props} shareMenu={shareMenu} />}
             message={data.content}

src/components/InjectedComponents/ImmersiveSetup/SetupStepper.tsx

@@ -206,7 +206,7 @@ export function ImmersiveSetupStepperUI(props: ImmersiveSetupStepperUIProps) {
                             required
                             label={t('username')}
                             value={props.username}
-                            onChange={e => props.onUsernameChange(e.currentTarget.value)}
+                            onChange={(e) => props.onUsernameChange(e.currentTarget.value)}
                             innerRef={inputRef}
                         />
                         <br />
@@ -297,7 +297,7 @@ export function ImmersiveSetupStepper(
             next={next}
             // ? username & onUsernameChange is a self managed group
             username={username}
-            onUsernameChange={v => {
+            onUsernameChange={(v) => {
                 setUsername(v)
                 touched.current = true
             }}

src/components/InjectedComponents/PersonKnown.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { AdditionalContent, AdditionalContentProps } from './AdditionalPostContent'
 import { useI18N } from '../../utils/i18n-next-ui'
-import { ProfileIdentifier } from '../../database/type'
+import type { ProfileIdentifier } from '../../database/type'
 import Services from '../../extension/service'
-import { ValueRef } from '@holoflows/kit/es'
+import type { ValueRef } from '@holoflows/kit/es'
 import { useValueRef } from '../../utils/hooks/useValueRef'
 import { Typography } from '@material-ui/core'
 import { useAsync } from 'react-use'
@@ -22,7 +22,7 @@ export function PersonKnown(props: PersonKnownProps) {
     const state = useAsync(async () => {
         if (!owner) return null
         const profiles = await Services.Identity.queryMyProfiles(owner.network)
-        const myProfile = profiles.find(x => x.identifier.equals(owner))
+        const myProfile = profiles.find((x) => x.identifier.equals(owner))
 
         if (bio && myProfile) {
             const prove = await Services.Crypto.getMyProveBio(myProfile.identifier)