Copy‑paste plugins that add scoped signals to plain DataStar. Not a package. Just grab script.js and adjust as you like.
data-scope— marks a DOM subtree that gets its own signal namespace.@scoped('name')— read a signal local to the nearestdata-scope.@scopedSet('name', value)— write a scoped signal.data-scoped-indicator="loading"— flips a scoped boolean during a DataStar fetch (@get,@post, etc.) initiated by the same element.
Internally each scope gets a numeric prefix; signals are stored as _#ds-scoped-<prefix>-<name> and cleaned up when the scope root is removed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script type="module" src="/static/script.js"></script>
</head>
<body class="h-screen flex flex-col gap-4 p-4">
<!-- Reusable toggle (scoped state 'on') -->
<div
data-scope
class="rounded-full bg-gray-200 w-24 h-10 flex p-1 cursor-pointer"
data-on-click="@scopedSet('on', !@scoped('on'))"
data-class="{'flex-row': !@scoped('on'), 'flex-row-reverse': @scoped('on')}"
>
<div class="rounded-full bg-blue-500 w-8 h-8"></div>
</div>
<!-- Async action with loading indicator -->
<button
data-scope
class="px-4 py-2 bg-blue-500 text-white rounded"
data-on-click="@get('/replace')"
data-scoped-indicator="loading"
>
Make request
<span data-show="@scoped('loading')">Loading...</span>
</button>
<pre data-json-signals></pre>
</body>
</html>- Read:
@scoped('key') - Write:
@scopedSet('key', value) - Scope root:
data-scope - Loading flag:
data-scoped-indicator="flagName"