@radiofrance/svelte-leaflet 0.1.0-alpha.16 → 0.1.0-alpha.17

package/dist/Circle.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { Circle as LeafletCircle, LatLngExpression } from 'leaflet';
+import type { Circle as LeafletCircle, CircleOptions, LatLngExpression } from 'leaflet';
 declare const __propDef: {
     props: {
         center: LatLngExpression;
-        options?: import("leaflet").CircleMarkerOptions | undefined;
+        options?: CircleOptions;
         instance?: LeafletCircle | undefined;
     };
     events: {
@@ -27,6 +27,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CircleProps = typeof __propDef.props;
 export type CircleEvents = typeof __propDef.events;

package/dist/Map.svelte

@@ -9,12 +9,18 @@ import { bindEvents, keyboardEvents, layerGroupEvents, layersControlEvents, leaf
 import GeolocationButton from "./private/GeolocationButton.svelte";
 let L;
 let locateButtonContainer;
-const defaultOptions = { center: [46.6188459, 1.7262114], zoom: 7, maxZoom: 18 };
 export let options = {};
 export let tilesUrl = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
 export let attribution = `&copy;<a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>`;
 export let instance = null;
 export let locateControl = void 0;
+export let focusable = true;
+const defaultOptions = {
+    center: [46.6188459, 1.7262114],
+    zoom: 7,
+    maxZoom: 18,
+    keyboard: options.keyboard === void 0 ? focusable : options.keyboard
+};
 const dispatch = createEventDispatcher();
 export const getMarkers = () => {
     const markers = [];
@@ -26,6 +32,7 @@ export const getMarkers = () => {
     return markers;
 };
 setContext("map", () => instance);
+setContext("focusable", focusable ? null : -1);
 let container;
 $: if (instance) {
     instance.options = Object.assign(instance.options, options);
@@ -53,7 +60,16 @@ function onLoad() {
         iconUrl: markerIcon,
         shadowUrl: markerShadow
     });
-    instance = L.map(container, { ...defaultOptions, ...options });
+    instance = L.map(container, { ...defaultOptions, ...options, zoomControl: false });
+    if (options.zoomControl !== false) {
+        const zoomControl = L.control.zoom({
+            position: "bottomright"
+        });
+        zoomControl.addTo(instance);
+        zoomControl.getContainer().childNodes.forEach((child) => {
+            child.setAttribute("tabindex", focusable ? "0" : "-1");
+        });
+    }
     bindEvents(instance, dispatch, events);
     L.tileLayer(tilesUrl, {
         attribution

package/dist/Map.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { MapOptions, Marker, Map } from 'leaflet';
+import type { MapOptions, Marker } from 'leaflet';
 import type Leaflet from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
@@ -7,12 +7,13 @@ import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 import { type LocateControlOptions } from './index.js';
 declare const __propDef: {
     props: {
-        options?: MapOptions | undefined;
-        tilesUrl?: string | undefined;
-        attribution?: string | undefined;
-        instance?: Map | undefined;
+        options?: MapOptions;
+        tilesUrl?: string;
+        attribution?: string;
+        instance?: Map;
         locateControl?: LocateControlOptions | undefined;
-        getMarkers?: (() => Marker[]) | undefined;
+        focusable?: boolean;
+        getMarkers?: () => Marker[];
     };
     events: {
         keypress: CustomEvent<Leaflet.LeafletKeyboardEvent>;
@@ -58,11 +59,13 @@ declare const __propDef: {
         default: {};
         'locate-button': {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MapProps = typeof __propDef.props;
 export type MapEvents = typeof __propDef.events;
 export type MapSlots = typeof __propDef.slots;
 export default class Map extends SvelteComponent<MapProps, MapEvents, MapSlots> {
-    get getMarkers(): () => Marker<any>[];
+    get getMarkers(): () => Marker[];
 }
 export {};

package/dist/Marker.svelte

@@ -10,6 +10,7 @@ export let id = "";
 export let options = {};
 let markerElement;
 let marker;
+const tabindex = getContext("focusable");
 const getMap = getContext("map");
 const getLayerGroup = getContext("layerGroup");
 setContext("layer", () => marker);
@@ -24,7 +25,10 @@ async function createMarker(size2, latlng2, id2, options2) {
     const layerGroup = getLayerGroup?.();
     const map = getMap();
     const mapOrLayerGroup = layerGroup || map;
-    marker = L.marker(latlng2, options2);
+    marker = L.marker(latlng2, {
+        ...options2,
+        keyboard: tabindex === -1 ? false : true
+    });
     marker.id = id2;
     marker.on("click", (e) => dispatch("click", e)).on("dblclick", (e) => dispatch("dblclick", e)).on("contextmenu", (e) => dispatch("contextmenu", e)).on("dragstart", (e) => dispatch("dragstart", e)).on("drag", (e) => dispatch("drag", e)).on("dragend", (e) => dispatch("dragend", e));
     mapOrLayerGroup.addLayer(marker);

package/dist/Marker.svelte.d.ts

@@ -6,10 +6,10 @@ export type Marker = LeafletMarker & MarkerContext;
 import type { LatLngExpression, Marker as LeafletMarker, MarkerOptions } from 'leaflet';
 declare const __propDef: {
     props: {
-        size?: number | undefined;
+        size?: number;
         latlng: LatLngExpression;
-        id?: string | undefined;
-        options?: MarkerOptions | undefined;
+        id?: string;
+        options?: MarkerOptions;
     };
     events: {
         click: CustomEvent<any>;
@@ -25,6 +25,8 @@ declare const __propDef: {
         icon: {};
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MarkerProps = typeof __propDef.props;
 export type MarkerEvents = typeof __propDef.events;

package/dist/MarkerClusterGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { MarkerClusterGroupOptions } from 'leaflet';
 declare const __propDef: {
     props: {
-        options?: MarkerClusterGroupOptions | undefined;
+        options?: MarkerClusterGroupOptions;
         icon?: any;
     };
     events: {
@@ -12,6 +12,8 @@ declare const __propDef: {
         default: {};
         icon: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MarkerClusterGroupProps = typeof __propDef.props;
 export type MarkerClusterGroupEvents = typeof __propDef.events;

package/dist/Polygon.svelte.d.ts

@@ -4,7 +4,7 @@ import { type Latlngs } from './index.js';
 declare const __propDef: {
     props: {
         latlngs: Latlngs;
-        options?: PolylineOptions | undefined;
+        options?: PolylineOptions;
         instance?: LeafletPolygon | undefined;
     };
     events: {
@@ -27,6 +27,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PolygonProps = typeof __propDef.props;
 export type PolygonEvents = typeof __propDef.events;

package/dist/Polyline.svelte.d.ts

@@ -3,7 +3,7 @@ import type { LatLngExpression, PathOptions } from 'leaflet';
 declare const __propDef: {
     props: {
         latlngs: LatLngExpression[];
-        options?: PathOptions | undefined;
+        options?: PathOptions;
     };
     events: {
         click: CustomEvent<any>;
@@ -13,6 +13,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PolylineProps = typeof __propDef.props;
 export type PolylineEvents = typeof __propDef.events;

package/dist/Popup.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { PopupOptions } from 'leaflet';
 declare const __propDef: {
     props: {
-        options?: PopupOptions | undefined;
+        options?: PopupOptions;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -10,6 +10,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;

package/dist/private/GeolocationButton.svelte

@@ -1,9 +1,12 @@
 <script>
+	import { getContext } from 'svelte';
 	import GeolocationIcon from './GeolocationIcon.svelte';
+
+	const tabindex = getContext('focusable');
 </script>
 
 <div>
-	<button>
+	<button {tabindex}>
 		<GeolocationIcon width="1rem" />
 	</button>
 </div>

package/dist/private/GeolocationButton.svelte.d.ts

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/private/GeolocationIcon.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        width?: string | undefined;
+        width?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type GeolocationIconProps = typeof __propDef.props;
 export type GeolocationIconEvents = typeof __propDef.events;

package/dist/private/utilities/codeHighlighter.d.ts

@@ -0,0 +1,7 @@
+export default highlighter;
+/**
+ * @param {string} code
+ * @param {string} lang
+ * @param {string} meta
+ */
+declare function highlighter(code: string, lang: string, meta: string): Promise<string>;

package/dist/private/utilities/codeHighlighter.js

@@ -0,0 +1,45 @@
+import { codeToHtml, getSingletonHighlighter } from 'shiki';
+import { transformerMetaHighlight } from '@shikijs/transformers';
+import { transformerTwoslash, rendererClassic } from '@shikijs/twoslash';
+
+const THEME = 'github-dark';
+
+/**
+ * @param {string} code
+ * @param {string} lang
+ * @param {string} meta
+ */
+async function highlighter(code, lang, meta) {
+	await getSingletonHighlighter({
+		langs: [lang],
+		themes: [THEME]
+	});
+	const html = await codeToHtml(code, {
+		theme: THEME,
+		lang,
+		meta: { __raw: meta },
+		transformers: [
+			transformerMetaHighlight(),
+			transformerTwoslash({
+				renderer: rendererClassic()
+			})
+		]
+	});
+
+	return escapeHtml(html);
+}
+
+/**
+ * Returns code with curly braces and backticks replaced by HTML entity equivalents
+ * @param {string} code - highlighted HTML
+ * @returns {string} - escaped HTML
+ */
+
+function escapeHtml(code) {
+	return code.replace(
+		/[{}`]/g,
+		(character) => ({ '{': '{', '}': '}', '`': '`' })[character] || ''
+	);
+}
+
+export default highlighter;

package/dist/private/utilities/styles.css

@@ -0,0 +1,323 @@
+/*  Start of Shiki Twoslash CSS:
+
+Code blocks structurally look like: 
+
+<pre class='shiki lsp twoslash [theme-name]'>
+  <div class='language-id'>[lang-id]</div>
+    <div class='code-container'>
+      <code>[the code as a series of spans]</code>
+      <a href='playground...'>Try</a> (optional)
+    </div>
+  </pre> 
+*/
+
+.shiki {
+	/*@apply !bg-gray-900 pl-12 pr-16 text-2xl;*/
+	line-height: 2.1rem;
+}
+
+pre {
+	/* All code samples get a grey border, twoslash ones get a different color */
+	/* border-left: 1px solid #999;
+  border-bottom: 1px solid #999; */
+
+	/* Important to allow the code to move horizontally; */
+	overflow-x: auto;
+	position: relative;
+}
+pre.shiki {
+	overflow-x: auto;
+}
+pre.shiki:hover .dim {
+	opacity: 1;
+}
+pre.shiki div.dim {
+	opacity: 0.5;
+}
+pre.shiki div.dim,
+pre.shiki div.highlight {
+	margin: 0;
+	padding: 0;
+}
+pre.shiki div.highlight {
+	opacity: 1;
+	background-color: #f1f8ff;
+}
+pre.shiki div.line {
+	min-height: 1rem;
+}
+
+/** Don't show the language identifiers */
+pre.shiki .language-id {
+	display: none;
+}
+
+/* Visually differentiates twoslash code samples  */
+pre.twoslash {
+	border-color: #719af4;
+}
+
+/** When you mouse over the pre, show the underlines */
+pre.twoslash:hover data-lsp {
+	border-color: #747474;
+}
+
+/** The tooltip-like which provides the LSP response */
+pre.twoslash data-lsp:hover::before {
+	content: attr(lsp);
+	position: absolute;
+	transform: translate(0, 1rem);
+
+	/*@apply text-base bg-gray-600;*/
+	color: #fff;
+	text-align: left;
+	padding: 5px 8px;
+	border-radius: 2px;
+	line-height: 1.6rem;
+	font-family:
+		'JetBrains Mono',
+		Menlo,
+		Monaco,
+		Consolas,
+		Courier New,
+		monospace;
+	white-space: pre-wrap;
+	z-index: 100;
+}
+
+pre .code-container {
+	overflow: auto;
+}
+/* The try button */
+pre .code-container > a {
+	position: absolute;
+	right: 8px;
+	bottom: 8px;
+	border-radius: 4px;
+	border: 1px solid #719af4;
+	padding: 0 8px;
+	color: #719af4;
+	text-decoration: none;
+	opacity: 0;
+	transition-timing-function: ease;
+	transition: opacity 0.3s;
+}
+/* Respect no animations */
+@media (prefers-reduced-motion: reduce) {
+	pre .code-container > a {
+		transition: none;
+	}
+}
+pre .code-container > a:hover {
+	color: white;
+	background-color: #719af4;
+}
+pre .code-container:hover a {
+	opacity: 1;
+}
+
+pre code {
+	font-family:
+		'JetBrains Mono',
+		Menlo,
+		Monaco,
+		Consolas,
+		Courier New,
+		monospace;
+	white-space: pre;
+	-webkit-overflow-scrolling: touch;
+}
+pre code a {
+	text-decoration: none;
+}
+pre data-err {
+	/* Extracted from VS Code */
+	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+		repeat-x bottom left;
+	padding-bottom: 3px;
+}
+pre .query {
+	margin-bottom: 10px;
+	color: #137998;
+	display: inline-block;
+}
+
+/* In order to have the 'popped out' style design and to not break the layout
+  /* we need to place a fake and un-selectable copy of the error which _isn't_ broken out
+  /* behind the actual error message.
+
+  /* This sections keeps both of those two in in sync  */
+
+pre .error,
+pre .error-behind {
+	margin-left: -14px;
+	margin-top: 8px;
+	margin-bottom: 4px;
+	padding: 6px;
+	padding-left: 14px;
+	padding-right: 14px;
+	white-space: pre-wrap;
+	display: block;
+	/*@apply max-w-2xl text-lg;*/
+}
+pre .error {
+	/*@apply bg-gray-800 text-red-50;*/
+	position: absolute;
+	border-left: 4px solid #bf1818;
+	/* Give the space to the error code */
+	display: flex;
+	align-items: center;
+}
+pre .error .code {
+	display: none;
+}
+pre .error-behind {
+	user-select: none;
+	visibility: transparent;
+	/* @apply text-transparent; */
+}
+/* Queries */
+pre .arrow {
+	/* Transparent background */
+	/* @apply bg-gray-800; */
+	position: relative;
+	top: -7px;
+	margin-left: 0.1rem;
+	/* Edges */
+	border-left: 1px solid rgb(51, 65, 85);
+	border-top: 1px solid rgb(51, 65, 85);
+	transform: translateY(25%) rotate(45deg);
+	/* Size */
+	height: 8px;
+	width: 8px;
+}
+pre .popover {
+	/* @apply text-gray-100 bg-gray-800; */
+	margin-bottom: 10px;
+	display: inline-block;
+	padding: 0 0.5rem 0.3rem;
+	margin-top: 10px;
+	border-radius: 3px;
+	/* @apply max-w-2xl text-lg; */
+}
+/* Completion */
+pre .inline-completions ul.dropdown {
+	display: inline-block;
+	position: absolute;
+	width: 240px;
+	background-color: gainsboro;
+	color: grey;
+	padding-top: 4px;
+	font-family: var(--code-font);
+	font-size: 0.8rem;
+	margin: 0;
+	padding: 0;
+	border-left: 4px solid #4b9edd;
+}
+pre .inline-completions ul.dropdown::before {
+	background-color: #4b9edd;
+	width: 2px;
+	position: absolute;
+	top: -1.2rem;
+	left: -3px;
+	content: ' ';
+}
+pre .inline-completions ul.dropdown li {
+	overflow-x: hidden;
+	padding-left: 4px;
+	margin-bottom: 4px;
+}
+pre .inline-completions ul.dropdown li.deprecated {
+	text-decoration: line-through;
+}
+pre .inline-completions ul.dropdown li span.result-found {
+	color: #4b9edd;
+}
+pre .inline-completions ul.dropdown li span.result {
+	width: 100px;
+	color: black;
+	display: inline-block;
+}
+.dark-theme .markdown pre {
+	background-color: #d8d8d8;
+	border-color: #ddd;
+	filter: invert(98%) hue-rotate(180deg);
+}
+data-lsp {
+	/* Fades in unobtrusively */
+	transition-timing-function: ease;
+	transition: border-color 0.3s;
+}
+/* Respect people's wishes to not have animations */
+@media (prefers-reduced-motion: reduce) {
+	data-lsp {
+		transition: none;
+	}
+}
+
+/** Annotations support, providing a tool for meta commentary */
+.tag-container {
+	position: relative;
+}
+.tag-container .twoslash-annotation {
+	position: absolute;
+	font-family:
+		'JetBrains Mono',
+		Menlo,
+		Monaco,
+		Consolas,
+		Courier New,
+		monospace;
+	right: -10px;
+	/** Default annotation text to 200px */
+	width: 200px;
+	color: #187abf;
+	background-color: #fcf3d9 bb;
+}
+.tag-container .twoslash-annotation p {
+	text-align: left;
+	font-size: 0.8rem;
+	line-height: 0.9rem;
+}
+.tag-container .twoslash-annotation svg {
+	float: left;
+	margin-left: -44px;
+}
+.tag-container .twoslash-annotation.left {
+	right: auto;
+	left: -200px;
+}
+.tag-container .twoslash-annotation.left svg {
+	float: right;
+	margin-right: -5px;
+}
+
+/** Support for showing console log/warn/errors inline */
+pre .logger {
+	display: flex;
+	align-items: center;
+	color: black;
+	padding: 6px;
+	padding-left: 8px;
+	width: calc(100% - 19px);
+	white-space: pre-wrap;
+}
+pre .logger svg {
+	margin-right: 9px;
+}
+pre .logger.error-log {
+	/* @apply bg-gray-800; */
+	border-left: 4px solid #bf1818;
+}
+pre .logger.warn-log {
+	background-color: #ffe;
+	border-left: 4px solid #eae662;
+}
+pre .logger.log-log {
+	background-color: #e9e9e9;
+	border-left: 4px solid #ababab;
+}
+pre .logger.log-log svg {
+	margin-left: 6px;
+	margin-right: 9px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@radiofrance/svelte-leaflet",
-	"version": "0.1.0-alpha.16",
+	"version": "0.1.0-alpha.17",
 	"description": "A library that wraps leaflet classes in domless/renderless svelte components.",
 	"keywords": [
 		"svelte",
@@ -47,7 +47,11 @@
 	},
 	"devDependencies": {
 		"@csstools/postcss-global-data": "^2.1.1",
+		"@fontsource-variable/fira-code": "^5.0.18",
 		"@playwright/test": "^1.28.1",
+		"@shikijs/core": "1.12.1",
+		"@shikijs/transformers": "^1.10.3",
+		"@shikijs/twoslash": "^1.12.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
@@ -63,12 +67,15 @@
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
+		"mdsvex": "^0.11.2",
+		"node-html-parser": "^6.1.13",
 		"postcss": "^8.4.39",
 		"postcss-csso": "^6.0.1",
 		"postcss-preset-env": "^9.6.0",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.1.9",
+		"shiki": "^1.10.3",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"svelte-preprocess": "^6.0.1",