History plugin for Datastar – sets store values in `data-history` to the URL param values.

history.ts

import { AttributeContext, AttributePlugin } from '../types'

export const HistoryPlugin: AttributePlugin = {
  prefix: 'history',
  mustHaveEmptyKey: true,
  mustNotEmptyExpression: true,

  onLoad: (ctx: AttributeContext) => {
    const { el, expressionFn, store } = ctx
    const storeNames: string[] = expressionFn(ctx)
    const params: URLSearchParams = new URLSearchParams(location.search);
    for (const storeName of storeNames) {
      const param = params.get(storeName);
      if (param !== null) {
        store()[storeName].value = param.split(',');
      }
    }

    el.dispatchEvent(new CustomEvent('history-restore'));
  },
}

index.html

<div data-store="{page: 1}" data-history="['page']">
    Page: <span data-text="$page">
</div>