@tileflow/svelte 0.1.0-alpha.19 → 0.1.0-alpha.20

package/src/index.d.ts

@@ -1,43 +1,114 @@
 import type {Map as MapLibreMap, MapOptions as MapLibreMapOptions} from 'maplibre-gl';
-import type {SvelteComponentTyped} from 'svelte';
+import type {Snippet, SvelteComponentTyped} from 'svelte';
+import type {TileflowThemeTransition} from '@tileflow/core/browser';
 import type {
-  MapLibreStyle,
   TileflowAnalytics,
-  TileflowConfig,
   TileflowMapMarker,
-  TileflowProjectThemes,
-} from '@tileflow/core';
+  TileflowRuntimeSource,
+  TileflowThemeSelection,
+} from '@tileflow/core/runtime';
+import type {
+  TileflowAnnotation,
+  TileflowAnnotationViewContext,
+  TileflowInteractionBinding,
+  TileflowInteractionDiagnostic,
+  TileflowInteractionEvent,
+  TileflowInteractionState,
+  TileflowInteractionViewContext,
+} from '@tileflow/interactions';
 
 export type TileflowMapMode = 'interactive' | 'image';
 export type TileflowMapOptions = Omit<MapLibreMapOptions, 'container' | 'style'>;
+export type TileflowMapSource = TileflowRuntimeSource;
+
+export type TileflowMapMarkerSnippet<TAnnotation extends TileflowAnnotation = TileflowAnnotation> =
+  Snippet<[context: TileflowAnnotationViewContext<TAnnotation>]>;
+
+export type TileflowMapAnnotationSnippet<
+  TAnnotation extends TileflowAnnotation = TileflowAnnotation,
+> = TileflowMapMarkerSnippet<TAnnotation>;
 
-export type TileflowMapProps = {
+export type TileflowMapInteractionSnippet<
+  TAnnotation extends TileflowAnnotation = TileflowAnnotation,
+> = Snippet<[context: TileflowInteractionViewContext<TAnnotation>]>;
+
+type TileflowMapBaseProps = {
   alt?: string;
   analytics?: TileflowAnalytics;
   center?: [number, number];
   captureId?: string;
   className?: string;
-  config?: TileflowConfig;
   height?: number | string;
   imageLoading?: HTMLImageElement['loading'];
   imageUrl?: string;
   interactive?: boolean;
-  manifestUrl?: string;
-  map?: string;
   mapOptions?: TileflowMapOptions;
-  mapStyle?: MapLibreStyle;
-  markers?: TileflowMapMarker[];
-  mode?: TileflowMapMode;
-  preferLocalDev?: boolean;
-  styleBaseUrl?: string;
-  styleUrl?: string;
-  themes?: TileflowProjectThemes;
+  onThemeChange?: (transition: TileflowThemeTransition) => void;
+  theme?: TileflowThemeSelection;
   zoom?: number;
 };
 
-export default class TileflowMap extends SvelteComponentTyped<
-  TileflowMapProps,
-  {load: CustomEvent<MapLibreMap>}
-> {}
+export type TileflowMapAnnotationProps<
+  TAnnotation extends TileflowAnnotation = TileflowAnnotation,
+> =
+  | {
+      annotations?: readonly TAnnotation[];
+      markers?: never;
+    }
+  | {
+      annotations?: never;
+      markers?: readonly TileflowMapMarker[];
+    };
+
+export type TileflowMapInteractionStateProps =
+  | {
+      defaultInteractionState?: TileflowInteractionState;
+      interactionState?: never;
+    }
+  | {
+      defaultInteractionState?: never;
+      interactionState?: TileflowInteractionState;
+    };
+
+type TileflowMapStyleSourceProps = {
+  source: TileflowRuntimeSource;
+};
+
+type TileflowMapInteractiveProps<TAnnotation extends TileflowAnnotation> =
+  TileflowMapAnnotationProps<TAnnotation> &
+    TileflowMapInteractionStateProps & {
+      interactions?: readonly TileflowInteractionBinding[];
+      marker?: TileflowMapMarkerSnippet<TAnnotation>;
+      mode?: 'interactive';
+      onInteractionDiagnostic?: (diagnostic: TileflowInteractionDiagnostic) => void;
+      onInteractionEvent?: (event: TileflowInteractionEvent<TAnnotation>) => void;
+      onInteractionStateChange?: (state: TileflowInteractionState) => void;
+      popup?: TileflowMapInteractionSnippet<TAnnotation>;
+      tooltip?: TileflowMapInteractionSnippet<TAnnotation>;
+    };
+
+type TileflowMapImageProps = {
+  annotations?: never;
+  defaultInteractionState?: never;
+  interactions?: never;
+  interactionState?: never;
+  marker?: never;
+  markers?: never;
+  mode: 'image';
+  onInteractionDiagnostic?: never;
+  onInteractionEvent?: never;
+  onInteractionStateChange?: never;
+  popup?: never;
+  tooltip?: never;
+};
+
+export type TileflowMapProps<TAnnotation extends TileflowAnnotation = TileflowAnnotation> =
+  TileflowMapBaseProps &
+    TileflowMapStyleSourceProps &
+    (TileflowMapInteractiveProps<TAnnotation> | TileflowMapImageProps);
+
+export default class TileflowMap<
+  TAnnotation extends TileflowAnnotation = TileflowAnnotation,
+> extends SvelteComponentTyped<TileflowMapProps<TAnnotation>, {load: CustomEvent<MapLibreMap>}> {}
 
 export {TileflowMap};

package/src/maplibre.js

@@ -0,0 +1,18 @@
+/** @typedef {typeof import('maplibre-gl')} TileflowMapLibre */
+
+/** @type {Promise<TileflowMapLibre> | undefined} */
+let mapLibrePromise;
+
+/** Load the interactive renderer only after a browser map requests it. */
+export function loadTileflowMapLibre() {
+  mapLibrePromise ??= import('maplibre-gl').then(resolveMapLibreModule).catch((error) => {
+    mapLibrePromise = undefined;
+    throw error;
+  });
+  return mapLibrePromise;
+}
+
+/** @param {TileflowMapLibre} module */
+function resolveMapLibreModule(module) {
+  return /** @type {TileflowMapLibre & {default?: TileflowMapLibre}} */ (module).default ?? module;
+}

package/src/style-source.d.ts

@@ -0,0 +1,17 @@
+type TileflowMapStyleInput = {
+  source?: unknown;
+  theme?: unknown;
+};
+
+type TileflowMapStyleInputValidation =
+  | {ok: true}
+  | {
+      error: string;
+      ok: false;
+    };
+
+export declare function validateTileflowMapStyleInputs(
+  input: TileflowMapStyleInput,
+): TileflowMapStyleInputValidation;
+
+export declare function assertTileflowMapStyleInputs(input: TileflowMapStyleInput): void;

package/src/style-source.js

@@ -0,0 +1,35 @@
+import {
+  validateTileflowRuntimeSource,
+  validateTileflowThemeSelection,
+} from '@tileflow/core/runtime';
+
+/** @typedef {{source?: unknown, theme?: unknown}} TileflowMapStyleInput */
+/** @typedef {{ok: true} | {error: string; ok: false}} TileflowMapStyleInputValidation */
+
+/**
+ * @param {TileflowMapStyleInput} input
+ * @returns {TileflowMapStyleInputValidation}
+ */
+export function validateTileflowMapStyleInputs(input) {
+  const sourceValidation = validateTileflowRuntimeSource(input.source);
+  if (!sourceValidation.ok) return sourceValidation;
+  if (input.theme !== undefined && !validateTileflowThemeSelection(input.theme)) {
+    return {error: 'theme must be a concrete portable theme name or "system"', ok: false};
+  }
+  if (
+    input.theme !== undefined &&
+    /** @type {{kind?: unknown}} */ (input.source).kind !== 'tileflow'
+  ) {
+    return {error: 'theme is only valid with a tileflow source', ok: false};
+  }
+  return {ok: true};
+}
+
+/** @param {TileflowMapStyleInput} input */
+export function assertTileflowMapStyleInputs(input) {
+  const validation = validateTileflowMapStyleInputs(input);
+
+  if (!validation.ok) {
+    throw new TypeError(`Invalid TileflowMap source: ${validation.error}`);
+  }
+}

package/src/TileflowMap.svelte.d.ts

@@ -1,8 +0,0 @@
-import type {Map as MapLibreMap} from 'maplibre-gl';
-import type {SvelteComponentTyped} from 'svelte';
-import type {TileflowMapProps} from './index';
-
-export default class TileflowMap extends SvelteComponentTyped<
-  TileflowMapProps,
-  {load: CustomEvent<MapLibreMap>}
-> {}