feat: getWoker

src/getWoker.ts

@@ -0,0 +1,5 @@
+import { wrap } from 'comlink';
+import { Obj } from './webWorker';
+
+const worker = new Worker(new URL('./webWorker.ts', import.meta.url));
+export const workerObj = wrap<Obj>(worker);

src/hook.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import * as mmdb from 'mmdb.js';
 import { fetchFileAsBuffer } from './utils';
 
-const _mmdbUrl =
+export const _mmdbUrl =
   'https://raw.githubusercontent.com/Max-Sum/17mon-mmdb/release/Country.mmdb';
 
 export const useIp = (mmdbUrl?: string) => {

src/index.ts

@@ -1 +1,3 @@
 export * from './hook';
+export * from './webWorker';
+export * from './getWoker';

src/ipBox.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { useIp } from './hook';
 import { prettyPrintJson } from 'pretty-print-json';
 import './box.css';
@@ -28,23 +28,15 @@ const obj = wrap<Obj>(worker);
 
 export const IpBoxWebworker: FC<IpBoxProps> = (props) => {
   const { ip } = props;
-  const reader = useIp();
-  const data = reader?.get(ip);
-  const html = prettyPrintJson.toHtml(data);
-
+  const [html, setHtml] = useState('');
   useEffect(() => {
-    const func = async () => {};
-    func();
-  }, []);
+    obj.getIPInfo(ip).then((res) => {
+      setHtml(prettyPrintJson.toHtml(res));
+    });
+  }, [ip]);
 
   return (
-    <div
-      className="box "
-      onClick={async () => {
-        obj.inc();
-        alert(`Counter: ${await obj.counter}`);
-      }}
-    >
+    <div className="box ">
       ip address: <pre>{ip}</pre>
       <pre dangerouslySetInnerHTML={{ __html: html }}></pre>
     </div>

src/webWorker.ts

@@ -1,12 +1,27 @@
 import { expose } from 'comlink';
+import { fetchFileAsBuffer } from './utils';
+import * as mmdb from 'mmdb.js';
+import { _mmdbUrl } from './hook';
+
+let cache: mmdb.Reader<mmdb.CityResponse> | null = null;
+
+const getReader = async (url: string) => {
+  if (cache) return cache;
+  const res = await fetchFileAsBuffer(url);
+  if (!res) return;
+  const reader = new mmdb.Reader<mmdb.CityResponse>(res);
+  cache = reader;
+  return reader;
+};
 
 const obj = {
-  counter: 12,
-  inc() {
-    this.counter++;
+  getIPInfo: async (ip: string, url: string = _mmdbUrl) => {
+    const reader = await getReader(url);
+    return reader?.get(ip);
   },
 };
 
 expose(obj);
 
 export type Obj = typeof obj;
+export type Reader = typeof cache;