refactor(examples): add new mechanism for api key in examples

visgl · Jan 17, 2024 · c98a8b3 · c98a8b3
1 parent eb3fb7d
commit c98a8b3
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 6 deletions.
diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml
@@ -38,14 +38,20 @@ jobs:
         working-directory: ./website
         run: npm ci
 
-
       - name: Build website
         working-directory: ./website
         run: |
           npm run build
         env:
           GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
 
+      - name: Find and Replace - Examples API Key
+        uses: jacobtomlinson/gha-find-replace@v3
+        with:
+          find: 'process.env.GOOGLE_MAPS_API_KEY'
+          replace: ${{ secrets.GOOGLE_MAPS_API_KEY_EXAMPLES }}
+          include: './website/build/scripts/**'
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:

diff --git a/examples/basic-map/index.html b/examples/basic-map/index.html
@@ -24,9 +24,12 @@
     <div id="app"></div>
     <script type="module">
       import '@vis.gl/react-google-maps/examples.css';
+      import {GOOGLE_MAPS_API_KEY} from '@vis.gl/react-google-maps/examples.js';
       import {renderToDom} from './src/app';
 
-      renderToDom(document.querySelector('#app'));
+      renderToDom(document.querySelector('#app'), {
+        apiKey: GOOGLE_MAPS_API_KEY
+      });
     </script>
   </body>
 </html>
diff --git a/examples/basic-map/src/app.tsx b/examples/basic-map/src/app.tsx
@@ -6,8 +6,12 @@ import ControlPanel from './control-panel';
 
 const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
 
-const App = () => (
-  <APIProvider apiKey={API_KEY}>
+interface Props {
+  apiKey?: string;
+}
+
+const App = (props: Props) => (
+  <APIProvider apiKey={props.apiKey ?? API_KEY}>
     <Map
       zoom={3}
       center={{lat: 22.54992, lng: 0}}
@@ -19,12 +23,12 @@ const App = () => (
 );
 export default App;
 
-export function renderToDom(container: HTMLElement) {
+export function renderToDom(container: HTMLElement, props: Props) {
   const root = createRoot(container);
 
   root.render(
     <React.StrictMode>
-      <App />
+      <App {...props} />
     </React.StrictMode>
   );
 }
diff --git a/examples/basic-map/vite.config.js b/examples/basic-map/vite.config.js
@@ -6,6 +6,12 @@ export default defineConfig(({mode}) => {
   return {
     define: {
       'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    },
+    resolve: {
+      alias: {
+        '@vis.gl/react-google-maps/examples.js':
+          'https://visgl.github.io/react-google-maps/scripts/examples.js'
+      }
     }
   };
 });
diff --git a/examples/vite.config.local.js b/examples/vite.config.local.js
@@ -10,6 +10,9 @@ export default defineConfig(({mode}) => {
     },
     resolve: {
       alias: {
+        '@vis.gl/react-google-maps/examples.js': resolve(
+          '../../website/static/scripts/examples.js'
+        ),
         '@vis.gl/react-google-maps/examples.css': resolve(
           '../../examples/examples.css'
         ),

diff --git a/website/static/scripts/examples.js b/website/static/scripts/examples.js
@@ -0,0 +1,6 @@
+// For the codesandbox examples, the 'process.env.GOOGLE_MAPS_API_KEY'
+// gets replaced in the deploy task in the github action
+// to contain the valid key for the examples
+export default {
+  GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY
+};