fix: astro config (#7)

behoney · Oct 4, 2024 · 9dc0b71 · 9dc0b71
1 parent 9a911bc
commit 9dc0b71
Show file tree

Hide file tree

Showing 15 changed files with 346 additions and 345 deletions.
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -3,4 +3,6 @@ import { defineConfig } from "astro/config";
 
 export default defineConfig({
 	integrations: [react()],
+	site: "https://behoney.github.io",
+	base: process.env.NODE_ENV === "production" ? "/react-geojson-map" : "/",
 });
diff --git a/docs/src/examples/DataSourceExample.tsx b/docs/src/examples/DataSourceExample.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import { GeoDataSource, GeoMap } from '../../../src/lib';
+import React from "react";
+import { GeoDataSource, GeoMap } from "../../../src/lib";
 
 const DataSourceExample: React.FC = () => {
   return (
-    <div style={{ width: '300px', height: '300px' }}>
-      <GeoMap className='w-full h-full'>
+    <div style={{ width: "300px", height: "300px" }}>
+      <GeoMap>
         <GeoDataSource url="sample.geojson" />
       </GeoMap>
     </div>
   );
 };
 
-export default DataSourceExample;
+export default DataSourceExample;
diff --git a/docs/src/examples/DefaultMapExample.tsx b/docs/src/examples/DefaultMapExample.tsx
@@ -3,12 +3,12 @@ import { GeoDataSource, GeoMap } from '../../../src/lib';
 
 const DefaultMapExample: React.FC = () => {
   return (
-    <div style={{ width: '300px', height: '300px' }}>
-      <GeoMap className='w-full h-full'>
-        <GeoDataSource url="https://openlayers.org/data/geojson/countries.geojson" />
+    <div style={{ width: "300px", height: "300px" }}>
+      <GeoMap>
+        <GeoDataSource url="sample.geojson" />
       </GeoMap>
     </div>
   );
 };
 
-export default DefaultMapExample;
+export default DefaultMapExample;
diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
@@ -11,7 +11,6 @@ const { title } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     </head>

diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -26,14 +26,16 @@ import { GeoMap } from 'react-geojson-map';
 function App() {
   return (
   <div style="width: 300px; height: 300px;">
-    <GeoMap />
+  <GeoMap>
+    <GeoDataSource url="sample.geojson" />
+  </GeoMap>
   </div>
   );
 }
 `}
     </code>
   </pre>
-    <DefaultMapExample client:load aria-label="Map example" />
+    <DefaultMapExample client:only="react" aria-label="Map example" />
   </div>
   <p>Try it live on <a href="https://shorturl.at/7XuDN" target="_blank" rel="noopener noreferrer">StackBlitz</a></p>
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -10,7 +10,7 @@ export default tseslint.config(
 		extends: [js.configs.recommended, ...tseslint.configs.recommended],
 		files: ["**/*.{ts,tsx}"],
 		languageOptions: {
-			ecmaVersion: 2020,
+			ecmaVersion: 2023,
 			globals: globals.browser,
 		},
 		plugins: {

diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "A library for declarative geospatial visualization using React Fiber and OpenLayers",
   "main": "dist/react-geojson-map.umd.js",
   "module": "dist/react-geojson-map.es.js",
+  "type": "module",
   "types": "dist/index.d.ts",
   "scripts": {
     "dev": "npx astro dev --root ./docs",

diff --git a/src/lib/components/GeoDataSource.ts b/src/lib/components/GeoDataSource.ts
@@ -3,12 +3,12 @@ import { createElement } from "react";
 import { DATA_SOURCE } from "../utils/config";
 
 export interface DataSourceProps {
-	url: string;
-	fitViewToData?: boolean;
+  url: string;
+  fitViewToData?: boolean;
 }
 
 export default function GeoDataSource(props: DataSourceProps) {
-	const layerConstructor = VectorLayer;
+  const layerConstructor = VectorLayer;
 
-	return createElement(DATA_SOURCE, { ...props, layerConstructor });
+  return createElement(DATA_SOURCE, { ...props, layerConstructor });
 }
diff --git a/src/lib/components/GeoMap.ts b/src/lib/components/GeoMap.ts
@@ -4,57 +4,57 @@ import { OSM } from "ol/source";
 import React, { forwardRef, useEffect, useId, useRef } from "react";
 import { render } from "../render";
 interface Props {
-	children?: React.ReactNode;
-	className?: string;
+  children?: React.ReactNode;
+  className?: string;
 }
 
 function GeoMap(props: Props, ref: React.Ref<OlMap>) {
-	const map = useRef<OlMap | null>(null);
-	const mapRef: React.Ref<OlMap> = ref ?? map;
-	const containerRef = useRef<HTMLDivElement>(null);
-	const id = useId();
+  const map = useRef<OlMap | null>(null);
+  const mapRef: React.Ref<OlMap> = ref ?? map;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const id = useId();
 
-	useEffect(() => {
-		if (!map.current) {
-			map.current = new OlMap({
-				target: id,
-				view: new View({
-					center: [0, 0],
-					zoom: 1,
-				}),
-				layers: [
-					new TileLayer({
-						source: new OSM(),
-					}),
-				],
-				controls: [],
-			});
-		}
+  useEffect(() => {
+    if (!map.current) {
+      map.current = new OlMap({
+        target: id,
+        view: new View({
+          center: [0, 0],
+          zoom: 1,
+        }),
+        layers: [
+          new TileLayer({
+            source: new OSM(),
+          }),
+        ],
+        controls: [],
+      });
+    }
 
-		if (typeof mapRef === "function") {
-			mapRef(map.current);
-		} else if (mapRef.current === null && map.current) {
-			(mapRef as React.MutableRefObject<OlMap>).current = map.current;
-		}
-	}, []);
+    if (typeof mapRef === "function") {
+      mapRef(map.current);
+    } else if (mapRef.current === null && map.current) {
+      (mapRef as React.MutableRefObject<OlMap>).current = map.current;
+    }
+  }, []);
 
-	useEffect(() => {
-		if (map.current && props.children) {
-			render(props.children as React.ReactElement, map.current);
-		}
-	}, [props.children]);
+  useEffect(() => {
+    if (map.current && props.children) {
+      render(props.children as React.ReactElement, map.current);
+    }
+  }, [props.children]);
 
-	return React.createElement("div", {
-		id: id,
-		ref: containerRef,
-		className: props.className
-			? `react-geojson-map ${props.className}`
-			: "react-geojson-map",
-		style: {
-			width: "100%",
-			height: "100%",
-		},
-	});
+  return React.createElement("div", {
+    id: id,
+    ref: containerRef,
+    className: props.className
+      ? `react-geojson-map ${props.className}`
+      : "react-geojson-map",
+    style: {
+      width: "100%",
+      height: "100%",
+    },
+  });
 }
 
 export default forwardRef(GeoMap);
diff --git a/src/lib/components/Popup.ts b/src/lib/components/Popup.ts
@@ -3,50 +3,47 @@ import { createPortal } from "react-dom";
 import { POPUP } from "../utils/config";
 
 export interface PopupProps<P> {
-	properties: P;
-	popupFunc: (properties: P) => React.ReactNode;
+  properties: P;
+  popupFunc: (properties: P) => React.ReactNode;
 }
 
 export default function Popup<P>(props: PopupProps<P>) {
-	const overlayPortalContainer = useRef<HTMLDivElement | null>(null);
-
-	if (!overlayPortalContainer.current) {
-		overlayPortalContainer.current = document.createElement("div");
-
-		if(process.env.NODE_ENV === 'development') {
-			overlayPortalContainer.current.className = "popup";
-			overlayPortalContainer.current.style.zIndex = "1000";
-			overlayPortalContainer.current.style.width = "200px";
-			overlayPortalContainer.current.style.height = "200px";
-			overlayPortalContainer.current.style.backgroundColor = "red";
-		}
-
-		document.body.appendChild(overlayPortalContainer.current);
-		createPortal(
-			props.popupFunc(props.properties),
-			overlayPortalContainer.current
-		);
-	}
-
-	useEffect(() => {
-
+  const overlayPortalContainer = useRef<HTMLDivElement | null>(null);
+
+  if (!overlayPortalContainer.current) {
+    overlayPortalContainer.current = document.createElement("div");
+
+    if (process.env.NODE_ENV === "development") {
+      overlayPortalContainer.current.className = "popup";
+      overlayPortalContainer.current.style.zIndex = "1000";
+      overlayPortalContainer.current.style.width = "200px";
+      overlayPortalContainer.current.style.height = "200px";
+      overlayPortalContainer.current.style.backgroundColor = "red";
+    }
+
+    document.body.appendChild(overlayPortalContainer.current);
+    createPortal(
+      props.popupFunc(props.properties),
+      overlayPortalContainer.current
+    );
+  }
+
+  useEffect(() => {
     return () => {
-			document.body.removeChild(
-				overlayPortalContainer.current as HTMLDivElement,
-			);
-			overlayPortalContainer.current = null;
-		};
-	}, []);
-
-
-
-	return null;
-
-	return createElement(POPUP, {
-		...props,
-		type: POPUP,
-		overlayPortalContainer: overlayPortalContainer.current,
-		popupFunc: props.popupFunc,
-	});
-
+      document.body.removeChild(
+        overlayPortalContainer.current as HTMLDivElement
+      );
+      overlayPortalContainer.current = null;
+    };
+  }, []);
+
+  // NOTE:: WIP
+  return null;
+
+  return createElement(POPUP, {
+    ...props,
+    type: POPUP,
+    overlayPortalContainer: overlayPortalContainer.current,
+    popupFunc: props.popupFunc,
+  });
 }
diff --git a/src/lib/index.d.ts b/src/lib/index.d.ts
@@ -1,28 +1,28 @@
 import type React from "react";
 
 export interface GeoMapProps {
-	children?: React.ReactNode;
-	className?: string;
+  children?: React.ReactNode;
+  className?: string;
 }
 
 export function GeoMap(props: GeoMapProps): React.ReactElement;
 
 export interface DataSourceProps {
-	url: string;
-	fitViewToData?: boolean;
+  url: string;
+  fitViewToData?: boolean;
 }
 
 export function GeoDataSource(props: DataSourceProps): React.ReactElement;
 
 // NOTE:: WIP
 export interface PopupProps<P> {
-	properties: P;
-	popupFunc: (properties: P) => React.ReactNode;
+  properties: P;
+  popupFunc: (properties: P) => React.ReactNode;
 }
 
 export function Popup<P>(props: PopupProps<P>): React.ReactElement | null;
 
 export function observeCSSVariables(
-	targetElement: HTMLElement,
-	callback: () => void,
+  targetElement: HTMLElement,
+  callback: () => void
 ): MutationObserver;