feat(source): add Source Component

src/index.ts

@@ -1,3 +1,4 @@
 export * from './map';
 export * from './marker';
+export * from './source';
 export * from './hooks/useMap';

src/source/config.ts

@@ -0,0 +1,11 @@
+import type { GeoJSONSource } from 'mapbox-gl';
+
+export const setterMap = {
+  data(data: any, source: GeoJSONSource) {
+    if (!source) return;
+
+    source.setData(data);
+  },
+};
+
+export const converterMap = {};

src/source/index.ts

@@ -0,0 +1,2 @@
+export { Source } from './source';
+export type { SourceProps } from './types';

src/source/source.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, useEffect, useState, useImperativeHandle } from 'react';
+
+import { useMap } from '@/hooks/useMap';
+import { useReact } from '@/hooks/useReact';
+
+import { setterMap, converterMap } from './config';
+
+import type { FC } from 'react';
+import type { GeoJSONSource } from 'mapbox-gl';
+import type { SourceProps, EventMapping } from './types';
+
+export const Source: FC<SourceProps> = forwardRef<GeoJSONSource, SourceProps>((props, ref) => {
+  const { id, ...rest } = props;
+  const map = useMap();
+  const [source, setSource] = useState<GeoJSONSource>();
+
+  useImperativeHandle(ref, () => source as GeoJSONSource, [source]);
+
+  const { onInstanceCreated } = useReact<SourceProps, any, EventMapping>(props, {
+    ins: source,
+    events: {},
+    setterMap,
+    converterMap,
+    unmount: () => {
+      map && map.removeSource(id);
+    },
+  });
+
+  useEffect(() => {
+    if (map) {
+      map.addSource(props.id, {
+        ...rest,
+        type: 'geojson',
+      });
+
+      setSource(map.getSource(id) as GeoJSONSource);
+      onInstanceCreated();
+    }
+  }, [map]);
+
+  return null;
+});

src/source/types.ts

@@ -0,0 +1,9 @@
+import type { GeoJSONSourceOptions } from 'mapbox-gl';
+
+export type SourceEvents = {};
+
+export type EventMapping = { [T in keyof SourceEvents]: string };
+
+export interface SourceProps extends GeoJSONSourceOptions {
+  id: string;
+}