feat(examples): restore the original api key mechanism

visgl · Nov 7, 2023 · bf106e9 · bf106e9
1 parent cc98827
commit bf106e9
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 41 deletions.
diff --git a/examples/_template/src/app.tsx b/examples/_template/src/app.tsx
@@ -3,7 +3,9 @@ import {createRoot} from 'react-dom/client';
 
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
 
-const App = () => <APIProvider apiKey=""></APIProvider>;
+const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
+
+const App = () => <APIProvider apiKey={API_KEY}></APIProvider>;
 
 export default App;
 

diff --git a/examples/_template/vite.config.js b/examples/_template/vite.config.js
@@ -1,7 +1,11 @@
-export default {
-  define: {
-    'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(
-      process.env.GOOGLE_MAPS_API_KEY
-    )
-  }
-};
+import {defineConfig, loadEnv} from 'vite';
+
+export default defineConfig(({mode}) => {
+  const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), '');
+
+  return {
+    define: {
+      'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    }
+  };
+});
diff --git a/examples/basic-map/src/app.tsx b/examples/basic-map/src/app.tsx
@@ -4,8 +4,10 @@ import {createRoot} from 'react-dom/client';
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
 import ControlPanel from './control-panel';
 
+const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
+
 const App = () => (
-  <APIProvider apiKey="">
+  <APIProvider apiKey={API_KEY}>
     <Map
       zoom={3}
       center={{lat: 22.54992, lng: 0}}

diff --git a/examples/basic-map/vite.config.js b/examples/basic-map/vite.config.js
@@ -1,7 +1,11 @@
-export default {
-  define: {
-    'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(
-      process.env.GOOGLE_MAPS_API_KEY
-    )
-  }
-};
+import {defineConfig, loadEnv} from 'vite';
+
+export default defineConfig(({mode}) => {
+  const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), '');
+
+  return {
+    define: {
+      'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    }
+  };
+});
diff --git a/examples/change-map-id/src/app.tsx b/examples/change-map-id/src/app.tsx
@@ -71,13 +71,15 @@ const MAP_CONFIGS: MapConfig[] = [
   }
 ];
 
+const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
+
 const App = () => {
   const [mapConfig, setMapConfig] = useState<MapConfig>(MAP_CONFIGS[0]);
   const [infowindowOpen, setInfowindowOpen] = useState(true);
   const [markerRef, marker] = useMarkerRef();
 
   return (
-    <APIProvider apiKey="">
+    <APIProvider apiKey={API_KEY}>
       <Map
         mapId={mapConfig.mapId}
         mapTypeId={mapConfig.mapTypeId}

diff --git a/examples/change-map-id/vite.config.js b/examples/change-map-id/vite.config.js
@@ -1,7 +1,11 @@
-export default {
-  define: {
-    'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(
-      process.env.GOOGLE_MAPS_API_KEY
-    )
-  }
-};
+import {defineConfig, loadEnv} from 'vite';
+
+export default defineConfig(({mode}) => {
+  const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), '');
+
+  return {
+    define: {
+      'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    }
+  };
+});
diff --git a/examples/deckgl-overlay/src/app.tsx b/examples/deckgl-overlay/src/app.tsx
@@ -12,6 +12,8 @@ const DATA_URL =
 import type {Feature, GeoJSON} from 'geojson';
 import ControlPanel from './control-panel';
 
+const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
+
 const App = () => {
   const [data, setData] = useState<GeoJSON | null>(null);
 
@@ -22,7 +24,7 @@ const App = () => {
   }, []);
 
   return (
-    <APIProvider apiKey="">
+    <APIProvider apiKey={API_KEY}>
       <Map
         center={{lat: 37.74, lng: -122.4}}
         zoom={11}

diff --git a/examples/deckgl-overlay/vite.config.js b/examples/deckgl-overlay/vite.config.js
@@ -1,7 +1,11 @@
-export default {
-  define: {
-    'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(
-      process.env.GOOGLE_MAPS_API_KEY
-    )
-  }
-};
+import {defineConfig, loadEnv} from 'vite';
+
+export default defineConfig(({mode}) => {
+  const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), '');
+
+  return {
+    define: {
+      'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    }
+  };
+});
diff --git a/examples/markers-and-infowindows/src/app.tsx b/examples/markers-and-infowindows/src/app.tsx
@@ -14,9 +14,11 @@ import ControlPanel from './control-panel';
 import {MovingMarker} from './moving-marker';
 import {MarkerWithInfowindow} from './marker-with-infowindow';
 
+const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
+
 const App = () => {
   return (
-    <APIProvider apiKey="" libraries={['marker']}>
+    <APIProvider apiKey={API_KEY} libraries={['marker']}>
       <Map
         mapId={'bf51a910020fa25a'}
         zoom={3}

diff --git a/examples/markers-and-infowindows/vite.config.js b/examples/markers-and-infowindows/vite.config.js
@@ -1,7 +1,11 @@
-export default {
-  define: {
-    'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(
-      process.env.GOOGLE_MAPS_API_KEY
-    )
-  }
-};
+import {defineConfig, loadEnv} from 'vite';
+
+export default defineConfig(({mode}) => {
+  const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), '');
+
+  return {
+    define: {
+      'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    }
+  };
+});
diff --git a/examples/vite.config.local.js b/examples/vite.config.local.js
@@ -2,7 +2,7 @@ import {defineConfig, loadEnv} from 'vite';
 import {resolve} from 'node:path';
 
 export default defineConfig(({mode}) => {
-  const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), '');
+  const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), '');
 
   return {
     define: {