From c98a8b369e47245abc8f31bd4e4bd4fb260a3cd1 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Wed, 17 Jan 2024 16:45:30 +0100 Subject: [PATCH 1/3] refactor(examples): add new mechanism for api key in examples --- .github/workflows/deploy-website.yml | 8 +++++++- examples/basic-map/index.html | 5 ++++- examples/basic-map/src/app.tsx | 12 ++++++++---- examples/basic-map/vite.config.js | 6 ++++++ examples/vite.config.local.js | 3 +++ website/static/scripts/examples.js | 6 ++++++ 6 files changed, 34 insertions(+), 6 deletions(-) create mode 100644 website/static/scripts/examples.js diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml index 6088670f..c1fb133b 100644 --- a/.github/workflows/deploy-website.yml +++ b/.github/workflows/deploy-website.yml @@ -38,7 +38,6 @@ jobs: working-directory: ./website run: npm ci - - name: Build website working-directory: ./website run: | @@ -46,6 +45,13 @@ jobs: 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 index 8edcfc78..a8ceaa92 100644 --- a/examples/basic-map/index.html +++ b/examples/basic-map/index.html @@ -24,9 +24,12 @@
diff --git a/examples/basic-map/src/app.tsx b/examples/basic-map/src/app.tsx index ff560e40..dac85c52 100644 --- 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 = () => ( - +interface Props { + apiKey?: string; +} + +const App = (props: Props) => ( + ( ); export default App; -export function renderToDom(container: HTMLElement) { +export function renderToDom(container: HTMLElement, props: Props) { const root = createRoot(container); root.render( - + ); } diff --git a/examples/basic-map/vite.config.js b/examples/basic-map/vite.config.js index 187e629c..522c6cb9 100644 --- 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 index 97bdf340..bf866b05 100644 --- 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 new file mode 100644 index 00000000..9da867f5 --- /dev/null +++ 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 +}; From 04088f4bf52d798a865756c2c0283444bbed6e4a Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 18 Jan 2024 10:41:38 +0100 Subject: [PATCH 2/3] refactor(examples) use globalThis instead of passing props --- examples/basic-map/index.html | 6 ++---- examples/basic-map/src/app.tsx | 15 ++++++--------- examples/global.d.ts | 5 +++++ website/static/scripts/examples.js | 4 +--- 4 files changed, 14 insertions(+), 16 deletions(-) create mode 100644 examples/global.d.ts diff --git a/examples/basic-map/index.html b/examples/basic-map/index.html index a8ceaa92..e15e0c27 100644 --- a/examples/basic-map/index.html +++ b/examples/basic-map/index.html @@ -24,12 +24,10 @@
diff --git a/examples/basic-map/src/app.tsx b/examples/basic-map/src/app.tsx index dac85c52..eea4a41a 100644 --- a/examples/basic-map/src/app.tsx +++ b/examples/basic-map/src/app.tsx @@ -4,14 +4,11 @@ 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 API_KEY = + globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string); -interface Props { - apiKey?: string; -} - -const App = (props: Props) => ( - +const App = () => ( + ( ); export default App; -export function renderToDom(container: HTMLElement, props: Props) { +export function renderToDom(container: HTMLElement) { const root = createRoot(container); root.render( - + ); } diff --git a/examples/global.d.ts b/examples/global.d.ts new file mode 100644 index 00000000..1726e170 --- /dev/null +++ b/examples/global.d.ts @@ -0,0 +1,5 @@ +export declare global { + // const or let does not work in this case, it has to be var + // eslint-disable-next-line no-var + var GOOGLE_MAPS_API_KEY: string | undefined; +} diff --git a/website/static/scripts/examples.js b/website/static/scripts/examples.js index 9da867f5..836a9ca5 100644 --- a/website/static/scripts/examples.js +++ b/website/static/scripts/examples.js @@ -1,6 +1,4 @@ // 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 -}; +globalThis.GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY; From 6b276063762c7052d319c3e56906215be252cb33 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 18 Jan 2024 11:01:14 +0100 Subject: [PATCH 3/3] feat(examples): use more precise path --- .github/workflows/deploy-website.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml index c1fb133b..8eeee416 100644 --- a/.github/workflows/deploy-website.yml +++ b/.github/workflows/deploy-website.yml @@ -50,7 +50,7 @@ jobs: with: find: 'process.env.GOOGLE_MAPS_API_KEY' replace: ${{ secrets.GOOGLE_MAPS_API_KEY_EXAMPLES }} - include: './website/build/scripts/**' + include: './website/build/scripts/examples.js' - name: Upload artifact uses: actions/upload-pages-artifact@v2