fix: split worker box

src/ipBox.tsx

@@ -1,11 +1,9 @@
-import { FC, useEffect, useState } from 'react';
+import { FC } from 'react';
 import { useIp } from './hook';
 import { prettyPrintJson } from 'pretty-print-json';
 import './box.css';
-import { wrap } from 'comlink';
-import { Obj } from './webWorker';
 
-interface IpBoxProps {
+export interface IpBoxProps {
   ip: string;
 }
 
@@ -22,23 +20,3 @@ export const IpBox: FC<IpBoxProps> = (props) => {
     </div>
   );
 };
-
-const worker = new Worker(new URL('./webWorker.ts', import.meta.url));
-const obj = wrap<Obj>(worker);
-
-export const IpBoxWebworker: FC<IpBoxProps> = (props) => {
-  const { ip } = props;
-  const [html, setHtml] = useState('');
-  useEffect(() => {
-    obj.getIPInfo(ip).then((res) => {
-      setHtml(prettyPrintJson.toHtml(res));
-    });
-  }, [ip]);
-
-  return (
-    <div className="box ">
-      ip address: <pre>{ip}</pre>
-      <pre dangerouslySetInnerHTML={{ __html: html }}></pre>
-    </div>
-  );
-};

src/workerBox.tsx

@@ -0,0 +1,25 @@
+import { wrap } from 'comlink';
+import { Obj } from './webWorker';
+import { IpBoxProps } from './ipBox';
+import { prettyPrintJson } from 'pretty-print-json';
+import { FC, useState, useEffect } from 'react';
+
+const worker = new Worker(new URL('./webWorker.ts', import.meta.url));
+const obj = wrap<Obj>(worker);
+
+export const IpBoxWebworker: FC<IpBoxProps> = (props) => {
+  const { ip } = props;
+  const [html, setHtml] = useState('');
+  useEffect(() => {
+    obj.getIPInfo(ip).then((res) => {
+      setHtml(prettyPrintJson.toHtml(res));
+    });
+  }, [ip]);
+
+  return (
+    <div className="box ">
+      ip address: <pre>{ip}</pre>
+      <pre dangerouslySetInnerHTML={{ __html: html }}></pre>
+    </div>
+  );
+};