@svadmin/core 0.0.6 → 0.4.1

package/src/table-state.svelte.ts

@@ -0,0 +1,243 @@
+// TableState — Svelte 5 Class State Pattern for table data management
+// Reactive class that encapsulates all table state with fine-grained $state/$derived
+
+import { useParsed } from './useParsed';
+import { useList } from './query-hooks.svelte';
+import { readURLState, writeURLState } from './url-sync';
+import type { Pagination, Sort, Filter, BaseRecord, HttpError, KnownResources, GetListResult } from './types';
+import type { UseListOptions } from './query-hooks.svelte';
+
+export type FilterSetMode = 'merge' | 'replace';
+
+export interface TableStateOptions<TData extends BaseRecord = BaseRecord, TError = HttpError>
+  extends Omit<UseListOptions<TData, TError>, 'pagination' | 'sorters' | 'filters'> {
+  resource?: KnownResources;
+  pagination?: Pagination;
+  sorters?: {
+    initial?: Sort[];
+    permanent?: Sort[];
+    mode?: 'off' | 'server';
+  };
+  filters?: {
+    initial?: Filter[];
+    permanent?: Filter[];
+    mode?: 'off' | 'server';
+    defaultBehavior?: FilterSetMode;
+  };
+  syncWithLocation?: boolean;
+}
+
+/**
+ * Svelte 5 Class-based reactive table state.
+ *
+ * Usage:
+ * ```ts
+ * const table = new TableState({ resource: 'posts' });
+ * table.setPage(2);
+ * table.toggleSort('title');
+ * console.log(table.data); // reactive
+ * ```
+ */
+export class TableState<TData extends BaseRecord = BaseRecord, TError = HttpError> {
+  // ─── Reactive state ───────────────────────────────────────────
+  pagination = $state<Pagination>({ current: 1, pageSize: 10 });
+  currentSorters = $state<Sort[]>([]);
+  currentFilters = $state<Filter[]>([]);
+
+  // ─── Private config ───────────────────────────────────────────
+  private permanentSorters: Sort[];
+  private permanentFilters: Filter[];
+  private sortersMode: 'off' | 'server';
+  private filtersMode: 'off' | 'server';
+  private filterDefaultBehavior: FilterSetMode;
+  private syncWithLocation: boolean;
+  private paginationMode: string;
+
+  // ─── Query result ─────────────────────────────────────────────
+  private _queryResult;
+
+  constructor(options: TableStateOptions<TData, TError> = {}) {
+    const parsed = useParsed();
+    const resource = options.resource ?? parsed.resource ?? '';
+
+    this.permanentSorters = options.sorters?.permanent ?? [];
+    this.permanentFilters = options.filters?.permanent ?? [];
+    this.sortersMode = options.sorters?.mode ?? 'server';
+    this.filtersMode = options.filters?.mode ?? 'server';
+    this.filterDefaultBehavior = options.filters?.defaultBehavior ?? 'replace';
+    this.syncWithLocation = options.syncWithLocation ?? false;
+    this.paginationMode = options.pagination?.mode ?? 'server';
+
+    // Init from URL or defaults
+    let initPagination = options.pagination ?? { current: 1, pageSize: 10 };
+    let initSorters = options.sorters?.initial ?? [];
+    let initFilters = options.filters?.initial ?? [];
+
+    if (this.syncWithLocation && typeof window !== 'undefined') {
+      const urlState = readURLState();
+      if (urlState.page || urlState.pageSize) {
+        initPagination = {
+          current: urlState.page ?? initPagination.current,
+          pageSize: urlState.pageSize ?? initPagination.pageSize,
+        };
+      }
+      if (urlState.sortField) {
+        initSorters = [{ field: urlState.sortField, order: (urlState.sortOrder as 'asc' | 'desc') ?? 'asc' }];
+      }
+      if (urlState.filters) {
+        initFilters = urlState.filters;
+      }
+    }
+
+    this.pagination = initPagination;
+    this.currentSorters = initSorters;
+    this.currentFilters = initFilters;
+
+    // Create query
+    const { meta, syncWithLocation: _s, dataProviderName, pagination: _p, sorters: _sr, filters: _f, ...restOptions } = options;
+    this._queryResult = useList<TData, TError>({
+      resource,
+      pagination: this.queryPagination,
+      sorters: this.effectiveSorters,
+      filters: this.effectiveFilters,
+      meta,
+      dataProviderName,
+      ...restOptions,
+    });
+
+    // URL sync effect
+    if (this.syncWithLocation && typeof window !== 'undefined') {
+      $effect(() => {
+        writeURLState({
+          page: this.pagination.current,
+          pageSize: this.pagination.pageSize,
+          sortField: this.effectiveSorters[0]?.field,
+          sortOrder: this.effectiveSorters[0]?.order,
+          filters: this.effectiveFilters,
+        });
+      });
+    }
+  }
+
+  // ─── Derived state ────────────────────────────────────────────
+  get effectiveSorters() { return [...this.currentSorters, ...this.permanentSorters]; }
+  get effectiveFilters() { return [...this.currentFilters, ...this.permanentFilters]; }
+
+  private get queryPagination() {
+    return this.paginationMode === 'server'
+      ? this.pagination
+      : { current: 1, pageSize: 999999, mode: this.paginationMode as 'client' | 'off' };
+  }
+
+  /** Underlying TanStack Query result */
+  get query() { return this._queryResult.query; }
+
+  /** Table data rows */
+  get data(): TData[] { return (this.query.data as GetListResult<TData> | undefined)?.data ?? []; }
+
+  /** Total record count */
+  get total(): number { return (this.query.data as GetListResult<TData> | undefined)?.total ?? 0; }
+
+  /** Is data loading */
+  get isLoading(): boolean { return this.query.isLoading; }
+
+  /** Is data error */
+  get isError(): boolean { return this.query.isError; }
+
+  /** Error object */
+  get error(): TError | null { return this.query.error; }
+
+  /** Current page number */
+  get current(): number { return this.pagination.current ?? 1; }
+
+  /** Page size */
+  get pageSize(): number { return this.pagination.pageSize ?? 10; }
+
+  /** Total number of pages */
+  get pageCount(): number { return Math.ceil(this.total / this.pageSize); }
+
+  /** Has next page */
+  get hasNextPage(): boolean { return this.current < this.pageCount; }
+
+  /** Has previous page */
+  get hasPreviousPage(): boolean { return this.current > 1; }
+
+  // ─── Mutators ─────────────────────────────────────────────────
+  setPage(page: number) {
+    this.pagination = { ...this.pagination, current: page };
+  }
+
+  setPageSize(size: number) {
+    this.pagination = { ...this.pagination, pageSize: size, current: 1 };
+  }
+
+  nextPage() {
+    if (this.hasNextPage) this.setPage(this.current + 1);
+  }
+
+  previousPage() {
+    if (this.hasPreviousPage) this.setPage(this.current - 1);
+  }
+
+  setSorters(newSorters: Sort[]) {
+    this.currentSorters = newSorters;
+  }
+
+  toggleSort(field: string) {
+    const existing = this.currentSorters.find(s => s.field === field);
+    if (!existing) {
+      this.currentSorters = [{ field, order: 'asc' }];
+    } else if (existing.order === 'asc') {
+      this.currentSorters = [{ field, order: 'desc' }];
+    } else {
+      this.currentSorters = [];
+    }
+  }
+
+  setFilters(newFilters: Filter[], mode?: FilterSetMode) {
+    const behavior = mode ?? this.filterDefaultBehavior;
+    if (behavior === 'merge') {
+      const merged = [...this.currentFilters];
+      for (const nf of newFilters) {
+        const idx = merged.findIndex(f => f.field === nf.field && f.operator === nf.operator);
+        if (idx >= 0) {
+          if (nf.value === undefined || nf.value === null || nf.value === '') merged.splice(idx, 1);
+          else merged[idx] = nf;
+        } else if (nf.value !== undefined && nf.value !== null && nf.value !== '') {
+          merged.push(nf);
+        }
+      }
+      this.currentFilters = merged;
+    } else {
+      this.currentFilters = newFilters;
+    }
+    this.pagination = { ...this.pagination, current: 1 };
+  }
+
+  resetFilters() {
+    this.currentFilters = [];
+    this.pagination = { ...this.pagination, current: 1 };
+  }
+
+  /** For client-side pagination mode */
+  get clientData(): TData[] {
+    if (this.paginationMode !== 'client') return [];
+    const allData = this.data;
+    const start = (this.current - 1) * this.pageSize;
+    const end = start + this.pageSize;
+    let sorted = [...allData];
+    const activeSorters = this.sortersMode === 'off' ? this.effectiveSorters : this.currentSorters;
+    if (activeSorters.length > 0) {
+      const { field, order } = activeSorters[0];
+      sorted.sort((a, b) => {
+        const va = (a as Record<string, unknown>)[field];
+        const vb = (b as Record<string, unknown>)[field];
+        if (va == null) return 1;
+        if (vb == null) return -1;
+        const cmp = va < vb ? -1 : va > vb ? 1 : 0;
+        return order === 'desc' ? -cmp : cmp;
+      });
+    }
+    return sorted.slice(start, end);
+  }
+}

package/src/toast.svelte.ts

@@ -1,14 +1,20 @@
-// Toast notification system — Svelte 5 runes-based
+// Toast notification system — wraps svelte-sonner for consistent API
+// Maintains backward-compatible `toast.success()` / `toast.error()` etc.
 
-export type ToastType = 'success' | 'error' | 'info' | 'warning';
+import { toast as sonner } from 'svelte-sonner';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning' | 'undoable';
 
 export interface Toast {
   id: number;
   type: ToastType;
   message: string;
   duration: number;
+  onUndo?: () => void;
+  onTimeout?: () => void;
 }
 
+// Legacy compatibility — kept for existing consumers
 let nextId = 0;
 let toasts = $state<Toast[]>([]);
 
@@ -16,22 +22,36 @@ export function getToasts(): Toast[] {
   return toasts;
 }
 
-export function addToast(type: ToastType, message: string, duration = 3000): void {
-  const id = nextId++;
-  toasts = [...toasts, { id, type, message, duration }];
-  if (duration > 0) {
-    setTimeout(() => removeToast(id), duration);
+export function addToast(type: ToastType, message: string, duration = 3000, options?: { onUndo?: () => void, onTimeout?: () => void }): void {
+  // Use svelte-sonner for regular toasts
+  if (type !== 'undoable') {
+    switch (type) {
+      case 'success': sonner.success(message, { duration }); break;
+      case 'error': sonner.error(message, { duration }); break;
+      case 'warning': sonner.warning(message, { duration }); break;
+      case 'info': sonner.info(message, { duration }); break;
+    }
+    return;
   }
+
+  // Undoable toasts still use custom system
+  const id = nextId++;
+  toasts = [...toasts, { id, type, message, duration, ...options }];
 }
 
 export function removeToast(id: number): void {
   toasts = toasts.filter(t => t.id !== id);
 }
 
-// Convenience methods
+// Convenience methods — backward compatible
 export const toast = {
   success: (msg: string, duration?: number) => addToast('success', msg, duration),
   error: (msg: string, duration?: number) => addToast('error', msg, duration ?? 5000),
   info: (msg: string, duration?: number) => addToast('info', msg, duration),
   warning: (msg: string, duration?: number) => addToast('warning', msg, duration ?? 4000),
+  undoable: (msg: string, duration: number, onUndo: () => void, onTimeout: () => void) =>
+    addToast('undoable', msg, duration, { onUndo, onTimeout }),
+  /** Promise toast — shows loading → success/error automatically */
+  promise: <T>(promise: Promise<T>, opts: { loading: string; success: string; error: string }) =>
+    sonner.promise(promise, opts),
 };

package/src/types.ts

@@ -1,4 +1,31 @@
-// Core type definitions — 100% Refine-compatible DataProvider + AuthProvider + Providers
+// Core type definitions — DataProvider + AuthProvider + Providers
+
+// ─── HttpError ─────────────────────────────────────────────────
+
+export type ValidationErrors = Record<string, string | string[]>;
+
+export class HttpError extends Error {
+  statusCode: number;
+  errors?: ValidationErrors;
+
+  constructor(message: string, statusCode: number, errors?: ValidationErrors) {
+    super(message);
+    this.name = 'HttpError';
+    this.statusCode = statusCode;
+    this.errors = errors;
+  }
+}
+
+export class UndoError extends Error {
+  constructor() {
+    super('Mutation undone');
+    this.name = 'UndoError';
+  }
+}
+
+// ─── Base Types ───────────────────────────────────────────────
+
+export type BaseRecord = Record<string, unknown>;
 
 // ─── DataProvider ─────────────────────────────────────────────
 
@@ -13,12 +40,25 @@ export interface Sort {
   order: 'asc' | 'desc';
 }
 
+export type CrudOperator =
+  | 'eq' | 'ne' | 'lt' | 'gt' | 'lte' | 'gte'
+  | 'contains' | 'ncontains'
+  | 'startswith' | 'endswith'
+  | 'in' | 'nin'
+  | 'null' | 'nnull'
+  | 'between' | 'nbetween';
+
 export interface Filter {
   field: string;
-  operator: 'eq' | 'ne' | 'lt' | 'gt' | 'lte' | 'gte' | 'contains' | 'in' | 'null' | 'between';
+  operator: CrudOperator;
   value: unknown;
 }
 
+export interface LogicalFilter {
+  operator: 'or' | 'and';
+  value: Filter[];
+}
+
 export interface GetListParams {
   resource: string;
   pagination?: Pagination;
@@ -27,8 +67,8 @@ export interface GetListParams {
   meta?: Record<string, unknown>;
 }
 
-export interface GetListResult<T = Record<string, unknown>> {
-  data: T[];
+export interface GetListResult<TData extends BaseRecord = BaseRecord> {
+  data: TData[];
   total: number;
 }
 
@@ -38,8 +78,8 @@ export interface GetOneParams {
   meta?: Record<string, unknown>;
 }
 
-export interface GetOneResult<T = Record<string, unknown>> {
-  data: T;
+export interface GetOneResult<TData extends BaseRecord = BaseRecord> {
+  data: TData;
 }
 
 export interface GetManyParams {
@@ -48,78 +88,78 @@ export interface GetManyParams {
   meta?: Record<string, unknown>;
 }
 
-export interface GetManyResult<T = Record<string, unknown>> {
-  data: T[];
+export interface GetManyResult<TData extends BaseRecord = BaseRecord> {
+  data: TData[];
 }
 
-export interface CreateParams {
+export interface CreateParams<TVariables = unknown> {
   resource: string;
-  variables: Record<string, unknown>;
+  variables: TVariables;
   meta?: Record<string, unknown>;
 }
 
-export interface CreateResult<T = Record<string, unknown>> {
-  data: T;
+export interface CreateResult<TData extends BaseRecord = BaseRecord> {
+  data: TData;
 }
 
-export interface CreateManyParams {
+export interface CreateManyParams<TVariables = unknown> {
   resource: string;
-  variables: Record<string, unknown>[];
+  variables: TVariables[];
   meta?: Record<string, unknown>;
 }
 
-export interface CreateManyResult<T = Record<string, unknown>> {
-  data: T[];
+export interface CreateManyResult<TData extends BaseRecord = BaseRecord> {
+  data: TData[];
 }
 
-export interface UpdateParams {
+export interface UpdateParams<TVariables = unknown> {
   resource: string;
   id: string | number;
-  variables: Record<string, unknown>;
+  variables: TVariables;
   meta?: Record<string, unknown>;
 }
 
-export interface UpdateResult<T = Record<string, unknown>> {
-  data: T;
+export interface UpdateResult<TData extends BaseRecord = BaseRecord> {
+  data: TData;
 }
 
-export interface UpdateManyParams {
+export interface UpdateManyParams<TVariables = unknown> {
   resource: string;
   ids: (string | number)[];
-  variables: Record<string, unknown>;
+  variables: TVariables;
   meta?: Record<string, unknown>;
 }
 
-export interface UpdateManyResult<T = Record<string, unknown>> {
-  data: T[];
+export interface UpdateManyResult<TData extends BaseRecord = BaseRecord> {
+  data: TData[];
 }
 
-export interface DeleteParams {
+export interface DeleteParams<TVariables = unknown> {
   resource: string;
   id: string | number;
-  variables?: Record<string, unknown>;
+  variables?: TVariables;
   meta?: Record<string, unknown>;
 }
 
-export interface DeleteResult<T = Record<string, unknown>> {
-  data: T;
+export interface DeleteResult<TData extends BaseRecord = BaseRecord> {
+  data: TData;
 }
 
-export interface DeleteManyParams {
+export interface DeleteManyParams<TVariables = unknown> {
   resource: string;
   ids: (string | number)[];
-  variables?: Record<string, unknown>;
+  variables?: TVariables;
   meta?: Record<string, unknown>;
 }
 
-export interface DeleteManyResult<T = Record<string, unknown>> {
-  data: T[];
+export interface DeleteManyResult<TData extends BaseRecord = BaseRecord> {
+  data: TData[];
 }
 
-export interface CustomParams {
+export interface CustomParams<TVariables = unknown> {
   url: string;
   method: 'get' | 'post' | 'put' | 'patch' | 'delete';
-  payload?: Record<string, unknown>;
+  payload?: TVariables;
   query?: Record<string, unknown>;
   headers?: Record<string, string>;
   sorters?: Sort[];
@@ -127,27 +167,27 @@ export interface CustomParams {
   meta?: Record<string, unknown>;
 }
 
-export interface CustomResult<T = unknown> {
-  data: T;
+export interface CustomResult<TData = unknown> {
+  data: TData;
 }
 
 export interface DataProvider {
   // Required methods
-  getList: <T = Record<string, unknown>>(params: GetListParams) => Promise<GetListResult<T>>;
-  getOne: <T = Record<string, unknown>>(params: GetOneParams) => Promise<GetOneResult<T>>;
-  create: <T = Record<string, unknown>>(params: CreateParams) => Promise<CreateResult<T>>;
-  update: <T = Record<string, unknown>>(params: UpdateParams) => Promise<UpdateResult<T>>;
-  deleteOne: <T = Record<string, unknown>>(params: DeleteParams) => Promise<DeleteResult<T>>;
+  getList: <TData extends BaseRecord = BaseRecord>(params: GetListParams) => Promise<GetListResult<TData>>;
+  getOne: <TData extends BaseRecord = BaseRecord>(params: GetOneParams) => Promise<GetOneResult<TData>>;
+  create: <TData extends BaseRecord = BaseRecord, TVariables = unknown>(params: CreateParams<TVariables>) => Promise<CreateResult<TData>>;
+  update: <TData extends BaseRecord = BaseRecord, TVariables = unknown>(params: UpdateParams<TVariables>) => Promise<UpdateResult<TData>>;
+  deleteOne: <TData extends BaseRecord = BaseRecord, TVariables = unknown>(params: DeleteParams<TVariables>) => Promise<DeleteResult<TData>>;
   getApiUrl: () => string;
 
   // Optional bulk methods
-  getMany?: <T = Record<string, unknown>>(params: GetManyParams) => Promise<GetManyResult<T>>;
-  createMany?: <T = Record<string, unknown>>(params: CreateManyParams) => Promise<CreateManyResult<T>>;
-  updateMany?: <T = Record<string, unknown>>(params: UpdateManyParams) => Promise<UpdateManyResult<T>>;
-  deleteMany?: <T = Record<string, unknown>>(params: DeleteManyParams) => Promise<DeleteManyResult<T>>;
+  getMany?: <TData extends BaseRecord = BaseRecord>(params: GetManyParams) => Promise<GetManyResult<TData>>;
+  createMany?: <TData extends BaseRecord = BaseRecord, TVariables = unknown>(params: CreateManyParams<TVariables>) => Promise<CreateManyResult<TData>>;
+  updateMany?: <TData extends BaseRecord = BaseRecord, TVariables = unknown>(params: UpdateManyParams<TVariables>) => Promise<UpdateManyResult<TData>>;
+  deleteMany?: <TData extends BaseRecord = BaseRecord, TVariables = unknown>(params: DeleteManyParams<TVariables>) => Promise<DeleteManyResult<TData>>;
 
   // Optional custom method
-  custom?: <T = unknown>(params: CustomParams) => Promise<CustomResult<T>>;
+  custom?: <TData = unknown, TVariables = unknown>(params: CustomParams<TVariables>) => Promise<CustomResult<TData>>;
 }
 
 // ─── AuthProvider ─────────────────────────────────────────────
@@ -200,6 +240,8 @@ export type MutationMode = 'pessimistic' | 'optimistic' | 'undoable';
 
 export interface ResourceDefinition {
   name: string;
+  /** Unique identifier — use when multiple resources share the same `name` but target different DataProviders */
+  identifier?: string;
   label: string;
   icon?: string;
   primaryKey?: string;
@@ -210,7 +252,12 @@ export interface ResourceDefinition {
   canEdit?: boolean;
   canDelete?: boolean;
   canShow?: boolean;
-  meta?: Record<string, unknown>;
+  showInMenu?: boolean;
+  parentName?: string;
+  menuOrder?: number;
+  /** Navigation group name — resources with the same group are displayed in a collapsible section */
+  group?: string;
+  meta?: Record<string, unknown> & { dataProviderName?: string; parent?: string };
 }
 
 export interface FieldDefinition {
@@ -221,6 +268,7 @@ export interface FieldDefinition {
   required?: boolean;
   searchable?: boolean;
   sortable?: boolean;
+  filterable?: boolean;
   width?: string;
   showInList?: boolean;
   showInForm?: boolean;
@@ -235,4 +283,38 @@ export interface FieldDefinition {
   optionValue?: string;    // field to use as value
   // Validation
   validate?: (value: unknown) => string | null;
+  // Grouping
+  group?: string;
 }
+
+// ─── Resource Type Registry ───────────────────────────────────
+
+/**
+ * Extend this interface via declaration merging to register resource types.
+ * When registered, all hooks automatically infer data types from resource names.
+ *
+ * @example
+ * ```ts
+ * declare module '@svadmin/core' {
+ *   interface ResourceTypeMap {
+ *     users: { id: string; name: string; email: string }
+ *     posts: { id: string; title: string; content: string }
+ *   }
+ * }
+ *
+ * // Now hooks auto-infer:
+ * const list = useList({ resource: 'users' })
+ * // list.data → { id: string; name: string; email: string }[]
+ * ```
+ */
+export interface ResourceTypeMap {}
+
+/** When ResourceTypeMap is empty → string (backward compatible); otherwise → registered keys */
+export type KnownResources = keyof ResourceTypeMap extends never
+  ? string
+  : Extract<keyof ResourceTypeMap, string>
+
+/** Infer data type from resource name. Falls back to Record<string, unknown> for unregistered resources */
+export type InferData<R extends string> = R extends keyof ResourceTypeMap
+  ? ResourceTypeMap[R]
+  : Record<string, unknown>

package/src/unsaved-changes.svelte.ts

@@ -0,0 +1,62 @@
+// UnsavedChangesNotifier — warns user before leaving page with unsaved changes
+// Svelte 5 component using runes
+
+// No lifecycle imports needed — uses module-level $state pattern
+
+let warnWhenUnsavedChanges = $state(false);
+
+/**
+ * Call this to mark the form as dirty (has unsaved changes).
+ * When set to true, navigating away or closing the tab will trigger a warning.
+ */
+export function setUnsavedChanges(dirty: boolean) {
+  warnWhenUnsavedChanges = dirty;
+}
+
+export function getUnsavedChanges(): boolean {
+  return warnWhenUnsavedChanges;
+}
+
+const beforeUnloadHandler = (e: BeforeUnloadEvent) => {
+  if (warnWhenUnsavedChanges) {
+    e.preventDefault();
+    // Modern browsers ignore custom messages but require returnValue to be set
+    e.returnValue = '';
+    return '';
+  }
+};
+
+/**
+ * Initialize the UnsavedChangesNotifier.
+ * Call this in your root layout or AdminApp component.
+ * It handles both browser tab close and in-app navigation.
+ */
+export function initUnsavedChangesNotifier() {
+  if (typeof window === 'undefined') return;
+
+  window.addEventListener('beforeunload', beforeUnloadHandler);
+
+  // For hash-based navigation, intercept hashchange
+  const hashChangeHandler = (e: HashChangeEvent) => {
+    if (warnWhenUnsavedChanges) {
+      const confirmed = confirm('You have unsaved changes. Are you sure you want to leave?');
+      if (!confirmed) {
+        e.preventDefault();
+        // Restore original hash
+        if (e.oldURL) {
+          const oldHash = new URL(e.oldURL).hash;
+          history.replaceState(null, '', oldHash || '#');
+        }
+      } else {
+        warnWhenUnsavedChanges = false;
+      }
+    }
+  };
+
+  window.addEventListener('hashchange', hashChangeHandler);
+
+  return () => {
+    window.removeEventListener('beforeunload', beforeUnloadHandler);
+    window.removeEventListener('hashchange', hashChangeHandler);
+  };
+}