Skip to content

Commit c080cee

Browse files
skyt-askyt-a
authored
Merge pull request #4 from skyt-a/feature-add-components
 Feat: Implement Core Components, Documentation
2 parents 3849eae + 868e69f commit c080cee

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+5840
-437
lines changed

‎.github/workflows/deploy-docs.yml‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# .github/workflows/deploy-docs.yml
2+
3+
name: Deploy Docs to GitHub Pages
4+
5+
on:
6+
# Runs on pushes targeting the main branch
7+
push:
8+
branches:
9+
- main
10+
11+
# Allows you to run this workflow manually from the Actions tab
12+
workflow_dispatch:
13+
14+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
15+
permissions:
16+
contents: read
17+
pages: write
18+
id-token: write
19+
20+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
21+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
22+
concurrency:
23+
group: 'pages'
24+
cancel-in-progress: false
25+
26+
jobs:
27+
# Build job
28+
build:
29+
runs-on: ubuntu-latest
30+
steps:
31+
- name: Checkout
32+
uses: actions/checkout@v4
33+
- name: Set up Node.js
34+
uses: actions/setup-node@v4
35+
with:
36+
node-version: 20 # Or your preferred Node.js version
37+
- name: Setup pnpm
38+
uses: pnpm/action-setup@v3
39+
with:
40+
version: 10 # Or your preferred pnpm version
41+
- name: Install dependencies
42+
run: pnpm install
43+
- name: Build with SvelteKit
44+
# Run the build command defined in your package.json
45+
# Ensure this builds the static site to the 'docs' directory
46+
run: pnpm run build
47+
env:
48+
NODE_ENV: production # Ensure correct base path is used
49+
- name: Setup Pages
50+
uses: actions/configure-pages@v5
51+
- name: Upload artifact
52+
uses: actions/upload-pages-artifact@v3
53+
with:
54+
# Upload the 'docs' directory (or your adapter's output directory)
55+
path: ./docs
56+
57+
# Deployment job
58+
deploy:
59+
environment:
60+
name: github-pages
61+
url: ${{ steps.deployment.outputs.page_url }}
62+
runs-on: ubuntu-latest
63+
needs: build
64+
steps:
65+
- name: Deploy to GitHub Pages
66+
id: deployment
67+
uses: actions/deploy-pages@v4

‎README.md‎

Lines changed: 96 additions & 103 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 78 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,81 @@
1818
"url": "https://github.com/skyt-a/svelte-google-maps-api.git"
1919
},
2020
"exports": {
21-
"./LoadScript.svelte": {
22-
"types": "./dist/LoadScript.svelte.d.ts",
23-
"svelte": "./dist/LoadScript.svelte"
21+
".": {
22+
"types": "./dist/index.d.ts",
23+
"svelte": "./dist/index.js"
24+
},
25+
"./APIProvider.svelte": {
26+
"types": "./dist/APIProvider.svelte.d.ts",
27+
"svelte": "./dist/APIProvider.svelte"
28+
},
29+
"./AdvancedMarker.svelte": {
30+
"types": "./dist/AdvancedMarker.svelte.d.ts",
31+
"svelte": "./dist/AdvancedMarker.svelte"
32+
},
33+
"./InfoWindow.svelte": {
34+
"types": "./dist/InfoWindow.svelte.d.ts",
35+
"svelte": "./dist/InfoWindow.svelte"
36+
},
37+
"./Polyline.svelte": {
38+
"types": "./dist/Polyline.svelte.d.ts",
39+
"svelte": "./dist/Polyline.svelte"
40+
},
41+
"./Polygon.svelte": {
42+
"types": "./dist/Polygon.svelte.d.ts",
43+
"svelte": "./dist/Polygon.svelte"
44+
},
45+
"./Circle.svelte": {
46+
"types": "./dist/Circle.svelte.d.ts",
47+
"svelte": "./dist/Circle.svelte"
48+
},
49+
"./Rectangle.svelte": {
50+
"types": "./dist/Rectangle.svelte.d.ts",
51+
"svelte": "./dist/Rectangle.svelte"
52+
},
53+
"./HeatmapLayer.svelte": {
54+
"types": "./dist/HeatmapLayer.svelte.d.ts",
55+
"svelte": "./dist/HeatmapLayer.svelte"
56+
},
57+
"./GroundOverlay.svelte": {
58+
"types": "./dist/GroundOverlay.svelte.d.ts",
59+
"svelte": "./dist/GroundOverlay.svelte"
60+
},
61+
"./DirectionsRenderer.svelte": {
62+
"types": "./dist/DirectionsRenderer.svelte.d.ts",
63+
"svelte": "./dist/DirectionsRenderer.svelte"
64+
},
65+
"./MapControl.svelte": {
66+
"types": "./dist/controls/MapControl.svelte.d.ts",
67+
"svelte": "./dist/controls/MapControl.svelte"
68+
},
69+
"./TrafficLayer.svelte": {
70+
"types": "./dist/layers/TrafficLayer.svelte.d.ts",
71+
"svelte": "./dist/layers/TrafficLayer.svelte"
72+
},
73+
"./TransitLayer.svelte": {
74+
"types": "./dist/layers/TransitLayer.svelte.d.ts",
75+
"svelte": "./dist/layers/TransitLayer.svelte"
76+
},
77+
"./BicyclingLayer.svelte": {
78+
"types": "./dist/layers/BicyclingLayer.svelte.d.ts",
79+
"svelte": "./dist/layers/BicyclingLayer.svelte"
80+
},
81+
"./KmlLayer.svelte": {
82+
"types": "./dist/layers/KmlLayer.svelte.d.ts",
83+
"svelte": "./dist/layers/KmlLayer.svelte"
84+
},
85+
"./Autocomplete.svelte": {
86+
"types": "./dist/places/Autocomplete.svelte.d.ts",
87+
"svelte": "./dist/places/Autocomplete.svelte"
88+
},
89+
"./OverlayView.svelte": {
90+
"types": "./dist/overlay/OverlayView.svelte.d.ts",
91+
"svelte": "./dist/overlay/OverlayView.svelte"
92+
},
93+
"./StreetViewPanorama.svelte": {
94+
"types": "./dist/street-view/StreetViewPanorama.svelte.d.ts",
95+
"svelte": "./dist/street-view/StreetViewPanorama.svelte"
2496
},
2597
"./GoogleMap.svelte": {
2698
"types": "./dist/GoogleMap.svelte.d.ts",
@@ -50,15 +122,16 @@
50122
"!dist/**/*.spec.*"
51123
],
52124
"peerDependencies": {
53-
"svelte": "^4.0.0"
125+
"svelte": "^5.0.0"
54126
},
55127
"license": "MIT",
56128
"devDependencies": {
57129
"@sveltejs/adapter-auto": "^6.0.0",
130+
"@sveltejs/adapter-static": "^3.0.8",
58131
"@sveltejs/kit": "^2.20.8",
59132
"@sveltejs/package": "^2.3.11",
60133
"@sveltejs/vite-plugin-svelte": "^4.0.4",
61-
"@types/google.maps": "^3.53.5",
134+
"@types/google.maps": "^3.58.1",
62135
"@typescript-eslint/eslint-plugin": "^5.45.0",
63136
"@typescript-eslint/parser": "^5.45.0",
64137
"eslint": "^8.28.0",

‎pnpm-lock.yaml‎

Lines changed: 13 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/APIProvider.svelte‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<script context="module" lang="ts">
2+
import type { Library } from '$lib/types/googleMap.js';
3+
4+
type LoadStatus = 'loading' | 'loaded' | 'error';
5+
6+
export interface APIProviderContext {
7+
status: Writable<LoadStatus>;
8+
googleMapsApi: typeof google.maps | null;
9+
error: Error | null;
10+
}
11+
</script>
12+
13+
<script lang="ts">
14+
import { BROWSER as browser } from 'esm-env';
15+
import { setContext, onDestroy } from 'svelte';
16+
import { writable, type Writable } from 'svelte/store';
17+
18+
export let apiKey = '';
19+
export let libraries: Library[] = [];
20+
export let language: string | undefined = undefined;
21+
export let region: string | undefined = undefined;
22+
export let version: string | undefined = undefined;
23+
export let solutionChannel: string | undefined = undefined;
24+
25+
let googleMapsApi: typeof google.maps | null = null;
26+
let error: Error | null = null;
27+
28+
const statusStore = writable<LoadStatus>('loading');
29+
30+
const SCRIPT_ID = 'svelte-google-maps-api-script';
31+
const CALLBACK_NAME = '__svelteGoogleMapApiCallback__';
32+
33+
let scriptElement: HTMLScriptElement | null = null;
34+
35+
$: if (browser && !document.getElementById(SCRIPT_ID)) {
36+
if (!apiKey) {
37+
console.error('svelte-google-maps-api: apiKey is required for APIProvider');
38+
statusStore.set('error');
39+
error = new Error('apiKey is required');
40+
} else {
41+
statusStore.set('loading');
42+
error = null;
43+
44+
window[CALLBACK_NAME] = () => {
45+
googleMapsApi = window.google.maps;
46+
statusStore.set('loaded');
47+
48+
try {
49+
delete window[CALLBACK_NAME];
50+
} catch (e) {
51+
window[CALLBACK_NAME] = undefined;
52+
}
53+
};
54+
55+
const script = document.createElement('script');
56+
script.id = SCRIPT_ID;
57+
script.type = 'text/javascript';
58+
const params = new URLSearchParams();
59+
params.set('key', apiKey);
60+
params.set('callback', CALLBACK_NAME);
61+
if (libraries.length > 0) {
62+
params.set('libraries', libraries.sort().join(','));
63+
}
64+
if (language) params.set('language', language);
65+
if (region) params.set('region', region);
66+
if (version) params.set('v', version);
67+
if (solutionChannel) params.set('solution_channel', solutionChannel);
68+
69+
script.src = `https://maps.googleapis.com/maps/api/js?${params.toString()}`;
70+
script.async = true;
71+
script.defer = true;
72+
script.onerror = (event: Event | string) => {
73+
console.error('svelte-google-maps-api: Failed to load Google Maps API script.', event);
74+
statusStore.set('error');
75+
error = new Error(`Failed to load Google Maps script: ${event.toString()}`);
76+
77+
try {
78+
delete window[CALLBACK_NAME];
79+
} catch (e) {
80+
window[CALLBACK_NAME] = undefined;
81+
}
82+
if (scriptElement) document.head.removeChild(scriptElement);
83+
scriptElement = null;
84+
};
85+
86+
scriptElement = script;
87+
document.head.appendChild(scriptElement);
88+
}
89+
} else if (browser && document.getElementById(SCRIPT_ID) && window.google && window.google.maps) {
90+
statusStore.set('loaded');
91+
googleMapsApi = window.google.maps;
92+
}
93+
94+
$: setContext<APIProviderContext>('svelte-google-maps-api', {
95+
status: statusStore,
96+
googleMapsApi,
97+
error
98+
});
99+
100+
onDestroy(() => {
101+
if (browser) {
102+
if (typeof window[CALLBACK_NAME] !== 'undefined') {
103+
try {
104+
delete window[CALLBACK_NAME];
105+
} catch (e) {
106+
window[CALLBACK_NAME] = undefined;
107+
}
108+
}
109+
}
110+
});
111+
</script>
112+
113+
{#if $statusStore === 'loading'}
114+
<slot name="loading">
115+
<!-- Default loading state -->
116+
<!-- You can provide custom loading UI via <div slot="loading">...</div> -->
117+
</slot>
118+
{:else if $statusStore === 'loaded'}
119+
<slot />
120+
{:else if $statusStore === 'error'}
121+
<slot name="error" {error}>
122+
<!-- Default error state -->
123+
<p style="color: red;">Failed to load Google Maps: {error?.message ?? 'Unknown error'}</p>
124+
<!-- You can provide custom error UI via <div slot="error" let:error>...</div> -->
125+
</slot>
126+
{/if}

0 commit comments

Comments
 (0)