@mapcomponents/deck-gl 1.7.6 → 1.8.0

package/package.json

@@ -1,18 +1,21 @@
 {
   "name": "@mapcomponents/deck-gl",
-  "version": "1.7.6",
+  "version": "1.8.0",
   "description": "",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
   "dependencies": {
-    "@deck.gl/aggregation-layers": "^9.1.14",
-    "@deck.gl/core": "^9.1.14",
-    "@deck.gl/mapbox": "^9.1.14",
+    "@deck.gl/aggregation-layers": "^9.2.6",
+    "@deck.gl/core": "^9.2.6",
+    "@deck.gl/geo-layers": "^9.2.6",
+    "@deck.gl/mapbox": "^9.2.6",
+    "@deck.gl/mesh-layers": "^9.2.6",
     "@mui/icons-material": "^7.3.2",
     "@mui/material": "^7.3.2",
     "@storybook/react": "^9.1.4",
     "maplibre-gl": "^5.16.0",
-    "@mapcomponents/react-maplibre": "1.7.6"
+    "uuid": "^11.1.0",
+    "@mapcomponents/react-maplibre": "1.8.0"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.16"

package/src/components/Ml3DTileLayer/Ml3DTileLayer.stories.tsx

@@ -0,0 +1,43 @@
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import Ml3DTileLayer from './Ml3DTileLayer';
+
+const storyoptions = {
+	title: 'MapComponents/Ml3DTileLayer',
+	component: Ml3DTileLayer,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = (context: any) => {
+	return <Ml3DTileLayer {...context} />;
+};
+
+export const PointCloudExample: { [key: string]: any } = Template.bind({});
+PointCloudExample.parameters = {
+	mapOptions: {
+		center: [7.842650747974176, 47.98896351950512],
+		pitch: 43.5,
+		zoom: 22,
+		bearing: -8.151137833252392,
+	},
+};
+PointCloudExample.args = {
+	mapId: 'map_1',
+	id: 'PointCould',
+	data: 'assets/tiles/tileset.json',
+	pointSize: 2,
+};
+export const HamburgExample: { [key: string]: any } = Template.bind({});
+HamburgExample.parameters = {
+	mapOptions: {
+		center: [9.993682, 53.551086],
+		pitch: 58,
+		zoom: 14.788260082345504,
+		bearing: 0,
+	},
+};
+HamburgExample.args = {
+	mapId: 'map_1',
+	data: 'https://3dtiles.wheregroup.com/tileset.json',
+};

package/src/components/Ml3DTileLayer/Ml3DTileLayer.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useMemo } from 'react';
+import { useMap } from '@mapcomponents/react-maplibre';
+import { Tile3DLayer, Tile3DLayerProps } from '@deck.gl/geo-layers';
+import useDeckGl from '../../hooks/useDeckGl';
+
+export interface Ml3DTileLayerProps extends Tile3DLayerProps {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * Id of an existing layer in the mapLibre instance to help specify the layer order
+	 * This layer will be visually beneath the layer with the "beforeId" id.
+	 */
+	beforeId?: string;
+}
+
+const Ml3DTileLayer = (props: Ml3DTileLayerProps) => {
+	const { mapId, ...Ml3DTileProps } = props;
+	const mapHook = useMap({ mapId: mapId });
+	const deckGlHook = useDeckGl();
+
+	const tile3dLayer = useMemo(() => {
+		if (!Ml3DTileProps.data) return null;
+		else
+			return new Tile3DLayer({
+				...Ml3DTileProps,
+			});
+	}, [
+		Ml3DTileProps.data,
+		Ml3DTileProps.id,
+		Ml3DTileProps.pickable,
+		Ml3DTileProps.onTileLoad,
+		Ml3DTileProps.onTileUnload,
+		Ml3DTileProps.loadOptions,
+		Ml3DTileProps.loaders,
+		Ml3DTileProps.visible,
+		Ml3DTileProps.opacity,
+		Ml3DTileProps.pointSize,
+		Ml3DTileProps.beforeId,
+	]);
+
+	useEffect(() => {
+		if (!mapHook.map || !tile3dLayer) return;
+
+		deckGlHook.addLayer(tile3dLayer);
+
+		return () => {
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+			tile3dLayer && deckGlHook.removeLayer(tile3dLayer);
+		};
+	}, [mapHook.map, tile3dLayer]);
+
+	return <></>;
+};
+
+export default Ml3DTileLayer;

package/src/components/{MlHexagonMap/MlHexagonMap.cy.tsx → MlHexagonLayer/MlHexagonLayer.cy.tsx}

@@ -1,12 +1,12 @@
+// MlHexagonLayer.cy.tsx
 import { composeStories } from '@storybook/react';
-import * as stories from './MlHexagonMap.stories';
+import * as stories from './MlHexagonLayer.stories';
 
-const { NoiseMap }: any = composeStories(stories);
+const { DefaultSettings }: any = composeStories(stories);
 
 describe('MlHexagonMap Test', () => {
 	it('Should display Maplibre map with MlHexagonMap', () => {
-		// see: https://on.cypress.io/mounting-react
-		cy.mount(<NoiseMap />);
+		cy.mount(<DefaultSettings />);
 		cy.window()
 			.should((win) => expect((win as any)._map).to.exist)
 			.then((win) => {

package/src/components/MlHexagonLayer/MlHexagonLayer.stories.tsx

@@ -0,0 +1,129 @@
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import MlHexagonLayer from './MlHexagonLayer';
+import { useEffect, useState } from 'react';
+import { useMap } from '@mapcomponents/react-maplibre';
+import { HexagonLayer } from '@deck.gl/aggregation-layers';
+
+const storyoptions = {
+	title: 'MapComponents/MlHexagonMap',
+	component: MlHexagonLayer,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = (context: any) => {
+	const [noiseData, setNoiseData] = useState<{ type: string; features: any[] }>({
+		type: '',
+		features: [],
+	});
+	const mapHook = useMap({ mapId: 'map_1' });
+
+	useEffect(() => {
+		let cancelled = false;
+		const load = async () => {
+			try {
+				const res = await fetch('/assets/3D/laerm_points.json', {
+					headers: {
+						'Content-Type': 'application/json',
+						Accept: 'application/json',
+					},
+				});
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				const json = await res.json();
+				const features = Array.isArray(json?.features) ? json.features : [];
+				if (!cancelled) {
+					setNoiseData({ type: json?.type ?? 'FeatureCollection', features });
+				}
+			} catch (e) {
+				console.error(e);
+				if (!cancelled) {
+					setNoiseData({ type: '', features: [] });
+				}
+			}
+		};
+		load();
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+
+	mapHook.map?.setPitch(60);
+	mapHook.map?.setZoom(13.5);
+
+	return (
+		<>
+			<MlHexagonLayer
+				data={noiseData.features}
+				getPosition={(d: any) => d.geometry.coordinates}
+				{...context}
+			/>
+		</>
+	);
+};
+
+export const DefaultSettings: { [key: string]: any } = Template.bind({});
+DefaultSettings.parameters = {};
+DefaultSettings.args = {
+	mapId: 'map_1',
+	type: HexagonLayer,
+	layerOpacity: 0.8,
+	elevationRange: [30, 75],
+	elevationScale: 1,
+	extruded: true,
+	coverage: 0.9,
+	autoHighlight: false,
+	material: { ambient: 0.6, diffuse: 0.5, shininess: 10 },
+	radius: 16,
+	transitions: { elevationScale: 1500 },
+	_filterData: null,
+	colorRange: [
+		[1, 152, 189, 125],
+		[73, 227, 206, 150],
+		[216, 254, 181, 175],
+		[254, 237, 177, 200],
+		[254, 173, 84, 225],
+		[209, 55, 78, 255],
+	],
+};
+export const CustomColorAndHeightProfile: { [key: string]: any } = Template.bind({});
+CustomColorAndHeightProfile.parameters = {};
+CustomColorAndHeightProfile.args = {
+	mapId: 'map_1',
+	type: HexagonLayer,
+	layerOpacity: 0.8,
+	specularColor: [51, 51, 51],
+	elevationRange: [30, 75],
+	elevationScale: 1,
+	extruded: true,
+	coverage: 0.9,
+	autoHighlight: false,
+	material: { ambient: 0.8, diffuse: 0.5, shininess: 10 },
+	radius: 16,
+	transitions: { elevationScale: 1500 },
+	_filterData: null,
+	colorRange: [
+		[1, 152, 189, Math.round(80 * 0.8)],
+		[73, 227, 206, Math.round(90 * 0.8)],
+		[216, 254, 181, Math.round(100 * 0.8)],
+		[254, 237, 177, Math.round(110 * 0.8)],
+		[254, 173, 84, Math.round(120 * 0.8)],
+		[209, 55, 78, Math.round(150 * 0.8)],
+	],
+	getColorValue: (points: any[]) => {
+		const elVal = points.reduce((acc, point) => {
+			const src = point?.properties ? point.properties : point?.source?.properties;
+			if (!src?.dba && acc === -Infinity) return acc;
+			return acc < src.dba ? src.dba : acc;
+		}, -Infinity);
+		return Number.isFinite(elVal) ? Math.round(elVal) : 0;
+	},
+	getElevationValue: (points: any[]) => {
+		const elVal = points.reduce((acc, point) => {
+			const src = point?.properties ? point.properties : point?.source?.properties;
+			if (!src?.dba && acc === -Infinity) return acc;
+			return acc < src.dba ? src.dba : acc;
+		}, -Infinity);
+		return Number.isFinite(elVal) ? Math.round(elVal) : 0;
+	},
+};

package/src/components/MlHexagonLayer/MlHexagonLayer.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useMemo } from 'react';
+import { HexagonLayer, HexagonLayerProps } from '@deck.gl/aggregation-layers';
+import { useMap } from '@mapcomponents/react-maplibre';
+import useDeckGl from '../../hooks/useDeckGl';
+
+export interface MlHexagonMapProps extends HexagonLayerProps {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * Id of an existing layer in the mapLibre instance to help specify the layer order
+	 * This layer will be visually beneath the layer with the "beforeId" id.
+	 */
+	beforeId?: string;
+}
+
+const defaultProps = {
+	type: HexagonLayer,
+	layerOpacity: 0.8,
+	elevationRange: [30, 75],
+	elevationScale: 1,
+	extruded: true,
+	coverage: 0.9,
+	autoHighlight: false,
+	material: { ambient: 0.6, diffuse: 0.5, shininess: 10 },
+	radius: 16,
+	transitions: { elevationScale: 1500 },
+	_filterData: null,
+	colorRange: [
+		[1, 152, 189, 125],
+		[73, 227, 206, 150],
+		[216, 254, 181, 175],
+		[254, 237, 177, 200],
+		[254, 173, 84, 225],
+		[209, 55, 78, 255],
+	],
+};
+
+const MlHexagonLayer = (props: MlHexagonMapProps) => {
+	const deckGlHook = useDeckGl();
+
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-expect-error
+	props = {
+		...defaultProps,
+		...props,
+	};
+
+	const { mapId, ...HexagonLayerProps } = props;
+
+	const mapHook = useMap({
+		mapId: mapId,
+		waitForLayer: HexagonLayerProps.beforeId,
+	});
+
+	// create deck.gl HexagonLayer once when its props change
+	const hexagonLayer = useMemo(() => {
+		if (!HexagonLayerProps.data) return null;
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		return new HexagonLayer({
+			...HexagonLayerProps,
+		} as unknown as HexagonLayerProps);
+	}, [
+		HexagonLayerProps.beforeId,
+		HexagonLayerProps.data,
+		HexagonLayerProps.elevationScale,
+		HexagonLayerProps.extruded,
+		HexagonLayerProps.coverage,
+		HexagonLayerProps.autoHighlight,
+		HexagonLayerProps.material,
+		HexagonLayerProps.radius,
+		HexagonLayerProps.transitions,
+	]);
+
+	// add/remove the memoized layer
+	useEffect(() => {
+		if (!mapHook.map || !hexagonLayer) return;
+		deckGlHook.addLayer(hexagonLayer);
+
+		return () => {
+			deckGlHook.removeLayer(hexagonLayer);
+		};
+	}, [mapHook.map, hexagonLayer]);
+
+	return <></>;
+};
+
+export default MlHexagonLayer;

package/src/components/MlSceneGraphLayer/MlScenegraphLayer.stories.tsx

@@ -0,0 +1,118 @@
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import MlScenegraphLayer from './MlScenegraphLayer';
+
+type BartStation = {
+	name: string;
+	coordinates: [longitude: number, latitude: number];
+};
+
+const wgLocations = [
+	{
+		id: '1',
+		type: 'Feature',
+		properties: {
+			Standort: 'Bonn',
+			Mitarbeitende: 26,
+		},
+		geometry: {
+			coordinates: [7.085121767634178, 50.738628929850876],
+			type: 'Point',
+		},
+	},
+	{
+		id: '2',
+		type: 'Feature',
+		properties: {
+			Standort: 'Freiburg',
+			Mitarbeitende: 10,
+		},
+		geometry: {
+			coordinates: [7.842759788570362, 47.98905444717667],
+			type: 'Point',
+		},
+	},
+	{
+		id: '3',
+		type: 'Feature',
+		properties: {
+			Standort: 'Berlin',
+			Mitarbeitende: 13,
+		},
+		geometry: {
+			coordinates: [13.330420447460796, 52.492768290796676],
+			type: 'Point',
+		},
+	},
+	{
+		id: '4',
+		type: 'Feature',
+		properties: {
+			Standort: 'Hamburg',
+			Mitarbeitende: 3,
+		},
+		geometry: {
+			coordinates: [10.041789021808029, 53.5511363175323],
+			type: 'Point',
+		},
+	},
+];
+
+const storyoptions = {
+	title: 'MapComponents/MlScenegraphLayer',
+	component: MlScenegraphLayer,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = (context: any) => {
+	return <MlScenegraphLayer {...context} />;
+};
+
+export const DeckglExample: { [key: string]: any } = Template.bind({});
+DeckglExample.parameters = {
+	mapOptions: {
+		zoom: 10,
+		center: [-122.2, 37.773972],
+		pitch: 60,
+	},
+};
+DeckglExample.args = {
+	mapId: 'map_1',
+	id: 'ScenegraphLayer',
+	data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json',
+	getPosition: (d: BartStation) => d.coordinates,
+	getOrientation: () => [0, Math.random() * 180, 90],
+	scenegraph:
+		'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
+	sizeScale: 500,
+	_animations: {
+		'*': { speed: 5 },
+	},
+	_lighting: 'pbr',
+	pickable: true,
+};
+
+export const WhereGroupLocationExample: { [key: string]: any } = Template.bind({});
+WhereGroupLocationExample.parameters = {
+	mapOptions: {
+		center: [10.4, 50],
+		pitch: 56,
+		zoom: 6,
+	},
+};
+WhereGroupLocationExample.args = {
+	mapId: 'map_1',
+	id: 'ScenegraphLayer',
+	data: wgLocations,
+	getPosition: (d: any) => d.geometry.coordinates,
+	getOrientation: () => [0, 0, 90],
+	getColor: () => [255, 255, 255],
+	scenegraph: '/assets/3D/WhereGroupLogo.glb',
+	sizeScale: 100,
+	_animations: {
+		'*': { speed: 5 },
+	},
+	_lighting: 'pbr',
+	pickable: true,
+};

package/src/components/MlSceneGraphLayer/MlScenegraphLayer.tsx

@@ -0,0 +1,47 @@
+import { ScenegraphLayer, ScenegraphLayerProps } from '@deck.gl/mesh-layers';
+import { useEffect, useMemo } from 'react';
+import { useMap } from '@mapcomponents/react-maplibre';
+import useDeckGl from '../../hooks/useDeckGl';
+
+export interface MlScenegraphLayerProps extends ScenegraphLayerProps {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * Id of an existing layer in the mapLibre instance to help specify the layer order
+	 * This layer will be visually beneath the layer with the "beforeId" id.
+	 */
+	beforeId?: string;
+}
+
+const MlScenegraphLayer = (props: MlScenegraphLayerProps) => {
+	const { mapId, ...ScenegraphLayerProps } = props;
+
+	const mapHook = useMap({
+		mapId: mapId,
+		waitForLayer: ScenegraphLayerProps.beforeId,
+	});
+	const deckGlHook = useDeckGl();
+	const scenegraphLayer = useMemo(
+		() =>
+			new ScenegraphLayer({
+				...ScenegraphLayerProps,
+			}),
+		[ScenegraphLayerProps]
+	);
+
+	useEffect(() => {
+		if (!mapHook.map || !scenegraphLayer) return;
+
+		deckGlHook.addLayer(scenegraphLayer);
+
+		return () => {
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+			scenegraphLayer && deckGlHook.removeLayer(scenegraphLayer);
+		};
+	}, [mapHook.map, scenegraphLayer]);
+	return <></>;
+};
+
+export default MlScenegraphLayer;

package/src/contexts/DeckGlContext.tsx

@@ -1,11 +1,13 @@
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { useMap } from '@mapcomponents/react-maplibre';
-import { Layer } from '@deck.gl/core';
+import { Effect, Layer } from '@deck.gl/core';
 import { MapboxOverlay } from '@deck.gl/mapbox';
 
 export interface DeckGlContextType {
 	deckGlLayerArray: Layer[];
 	setDeckGlLayerArray: React.Dispatch<React.SetStateAction<Layer[]>>;
+	deckGlEffectArray: Effect[];
+	setDeckGlEffectArray: React.Dispatch<React.SetStateAction<Effect[]>>;
 }
 
 interface DeckGlContextProviderProps {
@@ -21,12 +23,14 @@ const DeckGlContextProvider = ({ mapId, children }: DeckGlContextProviderProps)
 
 	const overlayRef = useRef<MapboxOverlay | undefined>(undefined);
 	const [deckGlLayerArray, setDeckGlLayerArray] = useState<Layer[]>([]);
+	const [deckGlEffectArray, setDeckGlEffectArray] = useState<Effect[]>([]);
 
 	useEffect(() => {
 		if (!mapHook.map) return;
 
 		overlayRef.current = new MapboxOverlay({
 			id: overlayId,
+			interleaved: true,
 		});
 
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -44,12 +48,15 @@ const DeckGlContextProvider = ({ mapId, children }: DeckGlContextProviderProps)
 		if (!overlayRef.current) return;
 		overlayRef.current.setProps({
 			layers: [...deckGlLayerArray],
+			effects: [...deckGlEffectArray],
 		});
-	}, [deckGlLayerArray]);
+	}, [deckGlLayerArray, deckGlEffectArray]);
 
 	const value = {
 		deckGlLayerArray,
 		setDeckGlLayerArray,
+		deckGlEffectArray,
+		setDeckGlEffectArray,
 	};
 	return <DeckGlContext.Provider value={value}>{children}</DeckGlContext.Provider>;
 };

package/src/decorators/MapContextDecorator.tsx

@@ -1,16 +1,16 @@
 import { useMemo } from 'react';
 
 import {
+	getTheme,
 	MapComponentsProvider,
 	MapLibreMap,
 	MlNavigationTools,
-	getTheme,
 } from '@mapcomponents/react-maplibre';
 import './style.css';
 import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import { DeckGlContextProvider } from '../contexts/DeckGlContext';
 
 const decorators = [
-	// eslint-disable-next-line
 	(Story: any, context: any) => {
 		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
 
@@ -18,20 +18,25 @@ const decorators = [
 			<div className="fullscreen_map">
 				<MapComponentsProvider>
 					<MUIThemeProvider theme={theme}>
-						<Story />
+						<DeckGlContextProvider mapId={context.mapId}>
+							<Story />
+						</DeckGlContextProvider>
 						<MapLibreMap
-							options={{
-								zoom: 14.5,
-								style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
-								center: [7.0851268, 50.73884],
-							}}
-							mapId="map_1"
-						/>
-						<MlNavigationTools
-							sx={{ bottom: '25px', right: '5px' }}
-							showZoomButtons={false}
+							options={
+								context?.parameters?.mapOptions
+									? {
+											style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
+											...context.parameters.mapOptions,
+										}
+									: {
+											zoom: 14.5,
+											style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
+											center: [7.0851268, 50.73884],
+										}
+							}
 							mapId="map_1"
 						/>
+						<MlNavigationTools showZoomButtons={false} mapId="map_1" />
 					</MUIThemeProvider>
 				</MapComponentsProvider>
 			</div>

package/src/hooks/useDeckGl.tsx

@@ -1,24 +1,27 @@
 import DeckGlContext from '../contexts/DeckGlContext';
 import { useContext } from 'react';
-import { Layer } from '@deck.gl/core';
+import { Effect, Layer } from '@deck.gl/core';
 
 function useDeckGl() {
 	const deckGlContext = useContext(DeckGlContext);
-	const layerArray = deckGlContext.deckGlLayerArray;
 
+	function addEffect(effect: Effect) {
+		deckGlContext.setDeckGlEffectArray((prevState) => [...prevState, effect]);
+	}
+	function removeEffect(effect: Effect) {
+		deckGlContext.setDeckGlEffectArray((prevState) => prevState.filter((e) => e !== effect));
+	}
 	function addLayer(layer: Layer) {
-		const newDeckGLLayerArray = [...layerArray];
-		newDeckGLLayerArray.push(layer);
-		deckGlContext.setDeckGlLayerArray(newDeckGLLayerArray);
+		deckGlContext.setDeckGlLayerArray((prevState) => [...prevState, layer]);
 	}
 	function removeLayer(layer: Layer) {
-		const newDeckGLLayerArray = layerArray.filter((l) => l !== layer);
-		deckGlContext.setDeckGlLayerArray(newDeckGLLayerArray);
+		deckGlContext.setDeckGlLayerArray((prevState) => prevState.filter((l) => l !== layer));
 	}
 	return {
+		addEffect,
+		removeEffect,
 		addLayer,
 		removeLayer,
-		layerArray,
 	};
 }
 export default useDeckGl;

package/src/index.ts

@@ -1,3 +1,5 @@
 export { default as DeckGlContext, DeckGlContextProvider } from './contexts/DeckGlContext';
 export { default as useDeckGl } from './hooks/useDeckGl';
-export { default as MlHexagonLayer } from './components/MlHexagonMap/MlHexagonMap';
+export { default as MlHexagonLayer } from './components/MlHexagonLayer/MlHexagonLayer';
+export { default as Ml3DTileLayer } from './components/Ml3DTileLayer/Ml3DTileLayer';
+export { default as MlSceneGraphLayer } from './components/MlSceneGraphLayer/MlScenegraphLayer';

package/vite.config.ts

@@ -35,7 +35,7 @@ export default defineConfig(() => ({
 			fileName: 'index',
 			// Change this to the formats you want to support.
 			// Don't forget to update your package.json as well.
-			formats: ['es' as const],
+			formats: ['es' as const, 'cjs' as const],
 		},
 		rollupOptions: {
 			// External packages that should not be bundled into your library.