build: 0.2.0 (#22)

.gitignore

@@ -24,3 +24,6 @@ dist-ssr
 *.sw?
 tsconfig.app.tsbuildinfo
 test-results
+tsconfig.node.tsbuildinfo
+
+docs/.astro/settings.json

docs/src/pages/index.astro

@@ -41,7 +41,7 @@ function App() {
 
 
   <h2>Why Use React Reconciler?</h2>
-  <p>React GeoJSON Map leverages React Reconciler for superior performance and flexibility in geospatial visualization. This approach enables fine-grained control over rendering, custom logic aligned with OpenLayers, and a declarative API for map components. As a result, it offers efficient updates, smooth performance with large datasets, and an intuitive development experience.</p>
+  <p>React GeoJSON Map leverages React Reconciler for superior performance and flexibility in geospatial visualization. This approach enables coarse-grained control over rendering, custom logic aligned with OpenLayers, and a declarative API for map components. As a result, it offers efficient updates, smooth performance with large datasets, and an intuitive development experience.</p>
 
   <p>By using React Reconciler, the library achieves efficient tree updates, better separation of concerns, and reduced overhead compared to React Context. This leads to more granular control over updates, cleaner code separation, and potentially fewer unnecessary re-renders. Consequently, React GeoJSON Map is ideal for building complex, interactive geospatial applications with enhanced performance and maintainability.</p>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-geojson-map",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "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",

src/lib/render.ts

@@ -8,7 +8,7 @@ import {
 } from "react-reconciler/constants.js";
 import type { DataSourceProps } from "./components/GeoDataSource";
 import { renderDataSource } from "./renderers/dataSourceRenderer";
-import { renderPopup } from "./renderers/PopupRenderer";
+import { renderPopup } from "./renderers/popupRenderer";
 import type { OlInstance, PopupInstance, SupportedLayerType } from "./types";
 import { DATA_SOURCE, POPUP } from "./utils/config";
 

src/lib/renderers/popupRenderer.ts

@@ -1,5 +1,5 @@
 import { Map as OlMap } from "ol";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import { OlInstance, PopupInstance } from "../types";
 
 // NOTE:: This function is WIP
@@ -16,19 +16,22 @@ export const renderPopup = (child: OlInstance, container: OlMap) => {
       (feature) => feature
     );
 
-    if (feature) {
-      const coordinate = event.coordinate;
-      popupInstance.popupOverlay.setPosition(coordinate);
-      ReactDOM.render(
-        popupInstance.popupFunc(feature.getProperties()) as React.ReactElement,
-        popupInstance.popupOverlay.getElement() as HTMLElement
+    if (popupInstance.props.overlay) {
+      const root = ReactDOM.createRoot(
+        popupInstance.props.overlayPortalContainer
       );
-    } else {
-      popupInstance.popupOverlay?.setPosition(undefined);
-      if (popupInstance.popupOverlay?.getElement()) {
-        ReactDOM.unmountComponentAtNode(
-          popupInstance.popupOverlay.getElement() as HTMLElement
+
+      if (feature) {
+        const coordinate = event.coordinate;
+        popupInstance.popupOverlay.setPosition(coordinate);
+        root.render(
+          popupInstance.popupFunc(feature.getProperties()) as React.ReactElement
         );
+      } else {
+        popupInstance.popupOverlay?.setPosition(undefined);
+        if (popupInstance.popupOverlay?.getElement()) {
+          root.unmount();
+        }
       }
     }
   });