@trapar-waves/react-three-maplibre 1.2.0 → 2.0.0

package/src/{App.tsx → app.tsx}

@@ -9,13 +9,14 @@ import Map from "react-map-gl/maplibre";
 import { Canvas } from "react-three-map/maplibre";
 import { LineMaterial, LineSegments2, LineSegmentsGeometry } from "three-stdlib";
 
-extend({ LineSegmentsGeometry, LineMaterial, LineSegments2 });
+// eslint-disable-next-line unicorn/no-top-level-side-effects -- R3F extend must run before render
+extend({ LineMaterial, LineSegments2, LineSegmentsGeometry });
 
 declare module "@react-three/fiber" {
   interface ThreeElements {
-    lineSegmentsGeometry: ThreeElements["bufferGeometry"];
-    lineMaterial: ThreeElements["material"] & Partial<LineMaterial>;
+    lineMaterial: Partial<LineMaterial> & ThreeElements["material"];
     lineSegments2: ThreeElements["object3D"] & { children?: ReactNode };
+    lineSegmentsGeometry: ThreeElements["bufferGeometry"];
   }
 }
 
@@ -24,7 +25,9 @@ const latLon = {
   longitude: 121.417463,
 };
 
-/** Carto 托管的 MapLibre GL 矢量底图，无需 API Key（使用请遵守 https://carto.com/basemaps/ 条款）。 */
+/**
+ * Carto 托管的 MapLibre GL 矢量底图，无需 API Key（使用请遵守 https://carto.com/basemaps/ 条款）。
+*/
 const MAP_STYLE_URL = "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
 
 function publicAssetUrl(filename: string): string {
@@ -37,23 +40,23 @@ const HOMEPAGE = "https://github.com/Trapar-waves/react-three-maplibre";
 const LOGOS_SET_URL = "https://icon-sets.iconify.design/logos/";
 
 interface TechPill {
+  iconClass: string;
   id: string;
   label: string;
-  iconClass: string;
 }
 
 const techStack: TechPill[] = [
-  { id: "react", label: "React 19", iconClass: "icon-[logos--react]" },
-  { id: "ts", label: "TypeScript", iconClass: "icon-[logos--typescript-icon]" },
-  { id: "tailwind", label: "Tailwind 4", iconClass: "icon-[logos--tailwindcss-icon]" },
-  { id: "rsbuild", label: "Rsbuild", iconClass: "icon-[material-icon-theme--rstack]" },
-  { id: "maplibre", label: "MapLibre · react-map-gl", iconClass: "icon-[simple-icons--maplibre]" },
-  { id: "l7", label: "AntV L7", iconClass: "icon-[logos--markdown]" },
-  { id: "r3f", label: "R3F · drei · three-stdlib", iconClass: "icon-[logos--threejs]" },
-  { id: "rtmap", label: "react-three-map", iconClass: "icon-[logos--markdown]" },
-  { id: "eslint", label: "ESLint", iconClass: "icon-[logos--eslint]" },
-  { id: "pnpm", label: "pnpm", iconClass: "icon-[logos--pnpm]" },
-  { id: "github", label: "GitHub Actions", iconClass: "icon-[logos--github-icon]" },
+  { iconClass: "icon-[logos--react]", id: "react", label: "React 19" },
+  { iconClass: "icon-[logos--typescript-icon]", id: "ts", label: "TypeScript" },
+  { iconClass: "icon-[logos--tailwindcss-icon]", id: "tailwind", label: "Tailwind 4" },
+  { iconClass: "icon-[material-icon-theme--rstack]", id: "rsbuild", label: "Rsbuild" },
+  { iconClass: "icon-[simple-icons--maplibre]", id: "maplibre", label: "MapLibre · react-map-gl" },
+  { iconClass: "icon-[logos--markdown]", id: "l7", label: "AntV L7" },
+  { iconClass: "icon-[logos--threejs]", id: "r3f", label: "R3F · drei · three-stdlib" },
+  { iconClass: "icon-[logos--markdown]", id: "rtmap", label: "react-three-map" },
+  { iconClass: "icon-[logos--eslint]", id: "eslint", label: "ESLint" },
+  { iconClass: "icon-[logos--pnpm]", id: "pnpm", label: "pnpm" },
+  { iconClass: "icon-[logos--github-icon]", id: "github", label: "GitHub Actions" },
 ];
 
 const readmeFeatures: string[] = [
@@ -72,44 +75,49 @@ const readmeFeatures: string[] = [
 const readmeTechNote = "演示使用 @react-three/drei 的 Stats；生产可按需移除。若需其他底图，可在 App.tsx 中替换 MAP_STYLE_URL 并自行处理鉴权。";
 
 function App() {
-  const ref = useRef<HTMLDivElement>(null!);
-  const mapRef = useRef<MapRef>(null!);
+  const divReference = useRef<HTMLDivElement>(null!);
+  const mapReference = useRef<MapRef>(null!);
   function initL7() {
-    if (mapRef.current) {
-      const scene = new Scene({
-        id: "map",
-        map: new MapLibre({
-          mapInstance: mapRef.current.getMap(),
-        }),
-      });
-      scene.on("loaded", () => {
-        fetch(publicAssetUrl("BElVQFEFvpAKzddxFZxJ.txt"))
-          .then(res => (res.ok ? res.text() : Promise.reject(new Error(String(res.status)))))
-          .then((data) => {
-            const pointLayer = new PointLayer({
-              blend: "additive",
-            })
-              .source(data, {
-                parser: {
-                  type: "csv",
-                  y: "lat",
-                  x: "lng",
-                },
-              })
-              .size(0.5)
-              .color("#080298");
+    if (!mapReference.current) {
+      return;
+    }
 
-            scene.addLayer(pointLayer);
+    const scene = new Scene({
+      id: "map",
+      map: new MapLibre({
+        mapInstance: mapReference.current.getMap(),
+      }),
+    });
+    scene.on("loaded", async () => {
+      try {
+        const response = await fetch(publicAssetUrl("BElVQFEFvpAKzddxFZxJ.txt"));
+        if (!response.ok) {
+          return;
+        }
+        const data = await response.text();
+        const pointLayer = new PointLayer({
+          blend: "additive",
+        })
+          .source(data, {
+            parser: {
+              type: "csv",
+              x: "lng",
+              y: "lat",
+            },
           })
-          .catch(() => {});
-      });
-    }
+          .size(0.5)
+          .color("#080298");
+
+        scene.addLayer(pointLayer);
+      }
+      catch {}
+    });
   }
   return (
-    <div className="h-screen w-screen relative overflow-hidden" ref={ref}>
+    <div className="h-screen w-screen relative overflow-hidden" ref={divReference}>
       <aside
-        className="pointer-events-none absolute left-4 top-4 z-10 max-w-sm motion-safe:transition motion-safe:duration-200"
         aria-label="模板说明"
+        className="pointer-events-none absolute left-4 top-4 z-10 max-w-sm motion-safe:transition motion-safe:duration-200"
       >
         <div
           className="pointer-events-auto max-h-[min(70vh,560px)] overflow-y-auto overscroll-contain rounded-xl border border-white/15 bg-slate-950/80 p-4 text-sm text-slate-100 shadow-xl backdrop-blur-md"
@@ -123,10 +131,10 @@ function App() {
             画布叠在 L7 之上。底图为 Carto 公开 GL 样式，无需地图服务 API Key。技术图标见
             {" "}
             <a
-              href={LOGOS_SET_URL}
               className="font-medium text-sky-300 underline decoration-sky-700 underline-offset-2 hover:text-sky-200"
-              target="_blank"
+              href={LOGOS_SET_URL}
               rel="noreferrer"
+              target="_blank"
             >
               Iconify logos
             </a>
@@ -138,10 +146,10 @@ function App() {
           <div className="mt-2 flex flex-wrap gap-2">
             {techStack.map(item => (
               <span
-                key={item.id}
                 className="inline-flex items-center gap-1.5 rounded-lg border border-white/10 bg-slate-900/80 px-2 py-1 text-xs text-slate-200"
+                key={item.id}
               >
-                <span className={`${item.iconClass} text-base text-sky-300`} aria-hidden />
+                <span aria-hidden className={`${item.iconClass} text-base text-sky-300`} />
                 {item.label}
               </span>
             ))}
@@ -160,15 +168,15 @@ function App() {
           <p className="mt-3 text-xs leading-relaxed text-slate-500">
             品牌图标来自
             {" "}
-            <a href={LOGOS_SET_URL} className="text-sky-400 underline hover:text-sky-300" target="_blank" rel="noreferrer">SVG Logos</a>
+            <a className="text-sky-400 underline hover:text-sky-300" href={LOGOS_SET_URL} rel="noreferrer" target="_blank">SVG Logos</a>
             {" "}
             （CC0）。
           </p>
           <a
-            href={HOMEPAGE}
             className="mt-3 inline-flex min-h-11 w-full items-center justify-center rounded-lg bg-sky-500 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-sky-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-            target="_blank"
+            href={HOMEPAGE}
             rel="noreferrer"
+            target="_blank"
           >
             查看仓库
           </a>
@@ -176,20 +184,20 @@ function App() {
       </aside>
       <Map
         id="map"
-        ref={mapRef}
         initialViewState={{
           ...latLon,
-          zoom: 11,
           pitch: 64.88,
+          zoom: 11,
         }}
         mapStyle={MAP_STYLE_URL}
         onLoad={initL7}
+        ref={mapReference}
       >
-        <Stats className="stats" parent={ref} />
+        <Stats className="stats" parent={divReference} />
 
         <Canvas
-          overlay
           id="trapar-r3f-overlay"
+          overlay
           {...latLon}
         >
           <hemisphereLight

package/src/index.tsx

@@ -1,10 +1,10 @@
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import App from "./app";
 import "./global.css";
 
-const rootEl = document.getElementById("root");
-if (rootEl) {
-  const root = ReactDOM.createRoot(rootEl);
+const rootElement = document.querySelector("#root");
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement);
   root.render(
     <App />,
   );