Merge pull request #4874 from h3poteto/feat/invoke-web

Separate invoke method for browser

.github/workflows/build.yml

@@ -22,3 +22,6 @@ jobs:
       - name: typecheck
         run: |
           yarn run typecheck
+      - name: Build web
+        run: |
+          yarn run build:web

package.json

@@ -7,16 +7,16 @@
   "main": "app/background.js",
   "scripts": {
     "dev": "nextron",
-    "dev:web": "next dev renderer",
     "build": "nextron build",
-    "build:web": "cd renderer && next build",
     "build:mas": "nextron build --config ./electron-builder.mas.yml",
     "build:appx2": "nextron build --win --x64 && electron-windows-store --assets ./resources/icons --input-directory ./dist/win-unpacked --output-directory ./dist/appx --package-name Whalebird --package-display-name Whalebird --package-version 6.0.3.0 --publisher-display-name h3poteto --identity-name 45610h3poteto.Whalebird",
     "postinstall": "electron-builder install-app-deps",
     "typecheck": "tsc -p renderer --noEmit && tsc -p main --noEmit",
     "lint": "eslint renderer --ext ts,tsx",
     "thirdparty": "license-checker --production --json > renderer/thirdparty.json",
-    "start:web": "cd renderer && next start"
+    "dev:web": "NEXT_PUBLIC_CLIENT_ENV=browser next dev renderer",
+    "build:web": "NEXT_PUBLIC_CLIENT_ENV=browser next build renderer",
+    "start:web": "cd renderer && NEXT_PUBLIC_CLIENT_ENV=browser next start"
   },
   "dependencies": {
     "@emoji-mart/react": "^1.1.1",

renderer/components/accounts/New.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { db } from '@/db'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Alert, Button, Dialog, DialogBody, DialogHeader, Input, Spinner, Typography } from '@material-tailwind/react'
+import { invoke } from '@/utils/invoke'
 
 type NewProps = {
   opened: boolean
@@ -57,7 +58,7 @@ export default function New(props: NewProps) {
       return
     }
     setAppData(appData)
-    global.ipc.invoke('open-browser', appData.url)
+    invoke('open-browser', appData.url)
   }
 
   const handleDomainSubmit = useCallback(

renderer/components/detail/Profile.tsx

@@ -24,6 +24,7 @@ import {
   TabsHeader
 } from '@material-tailwind/react'
 import { domainFromAcct } from '@/utils/domain'
+import { invoke } from '@/utils/invoke'
 
 type Props = {
   client: MegalodonInterface
@@ -67,7 +68,7 @@ export default function Profile(props: Props) {
   }
 
   const openOriginal = async (url: string) => {
-    global.ipc.invoke('open-browser', url)
+    invoke('open-browser', url)
   }
 
   const block = async () => {
@@ -115,7 +116,7 @@ export default function Profile(props: Props) {
   const profileClicked: MouseEventHandler<HTMLDivElement> = async e => {
     const url = findLink(e.target as HTMLElement, 'profile')
     if (url) {
-      global.ipc.invoke('open-browser', url)
+      invoke('open-browser', url)
       e.preventDefault()
       e.stopPropagation()
     }

renderer/components/timelines/status/Actions.tsx

@@ -7,6 +7,7 @@ import { Account } from '@/db'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { IconButton, List, ListItem, Popover, PopoverContent, PopoverHandler } from '@material-tailwind/react'
 import { useState } from 'react'
+import { invoke } from '@/utils/invoke'
 
 type Props = {
   status: Entity.Status
@@ -60,7 +61,7 @@ export default function Actions(props: Props) {
 
   const original = () => {
     setPopoverDetail(false)
-    global.ipc.invoke('open-browser', props.status.url)
+    invoke('open-browser', props.status.url)
   }
 
   const report = () => {

renderer/components/timelines/status/Card.tsx

@@ -1,3 +1,4 @@
+import { invoke } from '@/utils/invoke'
 import { Entity } from 'megalodon'
 
 type Props = {
@@ -6,7 +7,7 @@ type Props = {
 
 export default function Card(props: Props) {
   const openCard = () => {
-    global.ipc.invoke('open-browser', props.card.url)
+    invoke('open-browser', props.card.url)
   }
 
   return (

renderer/components/timelines/status/Status.tsx

@@ -12,6 +12,7 @@ import { MouseEventHandler, useState } from 'react'
 import { findAccount, findLink, ParsedAccount, accountMatch, findTag } from '@/utils/statusParser'
 import { Account } from '@/db'
 import { Avatar } from '@material-tailwind/react'
+import { invoke } from '@/utils/invoke'
 
 type Props = {
   status: Entity.Status
@@ -67,7 +68,7 @@ export default function Status(props: Props) {
 
     const url = findLink(e.target as HTMLElement, 'status-body')
     if (url) {
-      global.ipc.invoke('open-browser', url)
+      invoke('open-browser', url)
       e.preventDefault()
       e.stopPropagation()
     }

renderer/utils/invoke.tsx

@@ -0,0 +1,14 @@
+export function invoke(event: string, data: any) {
+  if (process.env.NEXT_PUBLIC_CLIENT_ENV !== 'browser') {
+    global.ipc.invoke(event, data)
+    return
+  }
+  switch (event) {
+    case 'open-browser':
+      window.open(data, '_blank').focus()
+      return
+    default:
+      console.error(`Unknown event: ${event}`)
+      return
+  }
+}