[Track] Resolve $event paths and refresh DOM-backed context per dispatch

Open
#652 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
52/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Start by reading AbstractTrack and TrackContext, then trace the existing placeholder resolution and dispatch path. Verify the behavior against the acceptance criteria: generic $event paths, recursive payload resolution, and fresh context and payload data after DOM morphs without remounting.

Written by the indexing model from the issue text.

Description

enhancement

Goal

Let Track consume any event declaratively and keep its payload correct after partial DOM updates.

<form
  data-component="TrackShopify"
  data-track:fetch-update-after='{
    "event": "content_search_results",
    "result_count": "$event.detail.response.headers.x-search-result-count"
  }'>
</form>

A response-updated TrackContext should also be read at the time of this event.

Current limitation

Track only resolves $detail.* placeholders for CustomEvent.detail. This special alias does not expose the complete event and gives the placeholder system knowledge of one event subtype.

AbstractTrack also caches its payload and inherited context for the full mount cycle. When Fetch morphs a JSON script or context attribute, an existing Track instance can publish stale context.

Proposed behavior

Generic event paths

Replace $detail.* with $event.*:

"$event.detail.response.headers.x-search-result-count"
"$event.detail.request.searchParams.tag"
"$event.target.dataset.type"

The resolver should:

  • work for native events and CustomEvent;
  • traverse plain objects and arrays;
  • return undefined for a missing path;
  • recurse through nested objects and arrays in the declared payload;
  • remain independent from Fetch and other event producers.

This is an alpha release, so the obsolete $detail.* syntax can be removed instead of retained as a compatibility alias.

Fresh DOM-backed data

Resolve these sources at dispatch time:

  • inherited TrackContext;
  • the Track payload script;
  • the Track payload option.

Do not retain a mount-cycle cache that survives a morph update. TrackContext already reads its own script and attributes through getters, so Track should use the current value when sending.

Acceptance criteria

  • $event.detail.* works with CustomEvent and component lifecycle events.
  • $event.target.* works with native events.
  • Nested payload placeholders resolve recursively.
  • A morphed TrackContext script affects the next dispatch without remounting Track.
  • A morphed payload script affects the next dispatch.
  • Existing context and event payload merge precedence remains unchanged.
Dominant language
TypeScript
Stars
12
Forks
1
Avg merge
1d 12h
Merged PRs (30d)
5

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from studiometa/ui

All issues in studiometa/ui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.