Remove ability to use key with `data-persist` (#788)

* Remove ability to use key with `data-persist`

* Fix example and test

* Update link
This commit is contained in:
Ben Croker 2025-03-23 08:35:42 -06:00 committed by GitHub
parent 09bd26ccd2
commit e28bb58eee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 50 additions and 56 deletions

View File

@ -25,4 +25,5 @@ Each tagged version of Datastar is accompanied by a release note. Read the [rele
### Removed ### Removed
- Removed the ability to use a key with the `data-persist` attribute.
- Removed settling from SSE events, which has become redundant ([#764](https://github.com/starfederation/datastar/issues/764)). - Removed settling from SSE events, which has become redundant ([#764](https://github.com/starfederation/datastar/issues/764)).

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -8,24 +8,19 @@ import {
type AttributePlugin, type AttributePlugin,
type NestedValues, type NestedValues,
PluginType, PluginType,
Requirement,
} from '../../../../engine/types' } from '../../../../engine/types'
import { kebab, modifyCasing, trimDollarSignPrefix } from '../../../../utils/text' import { trimDollarSignPrefix } from '../../../../utils/text'
const SESSION = 'session' const SESSION = 'session'
export const Persist: AttributePlugin = { export const Persist: AttributePlugin = {
type: PluginType.Attribute, type: PluginType.Attribute,
name: 'persist', name: 'persist',
keyReq: Requirement.Denied,
mods: new Set([SESSION]), mods: new Set([SESSION]),
onLoad: ({ key, effect, mods, signals, value }) => { onLoad: ({ effect, mods, signals, value }) => {
if (key === '') { const key = DATASTAR
key = DATASTAR
} else {
// Default to kebab-case and allow modifying
key = kebab(key)
key = modifyCasing(key, mods)
}
const storage = mods.has(SESSION) ? sessionStorage : localStorage const storage = mods.has(SESSION) ? sessionStorage : localStorage
let paths = value.split(/\s+/).filter((p) => p !== '') let paths = value.split(/\s+/).filter((p) => p !== '')
paths = paths.map((p) => trimDollarSignPrefix(p)) paths = paths.map((p) => trimDollarSignPrefix(p))

4
sdk/go/consts.go generated
View File

@ -7,8 +7,8 @@ import "time"
const ( const (
DatastarKey = "datastar" DatastarKey = "datastar"
Version = "1.0.0-beta.9" Version = "1.0.0-beta.9"
VersionClientByteSize = 39632 VersionClientByteSize = 39610
VersionClientByteSizeGzip = 14845 VersionClientByteSizeGzip = 14830
//region Default durations //region Default durations

View File

@ -240,6 +240,15 @@ templ OnValueRequired(name string, info *RuntimeErrorInfo) {
} }
} }
templ PersistKeyNotAllowed(name string, info *RuntimeErrorInfo) {
@RuntimeErrorView(name, info) {
@keyNotAllowed("persist", info.Expression.Key)
<p>The <code>data-persist</code> attribute must <em>not</em> have a key. If one or more space-separated values are provided as a string, only those signals are persisted.</p>
@sampleCode("Example", "html", `<div data-persist="foo bar"></div>`)
@attributeDocs("persist")
}
}
templ RefKeyAndValueProvided(name string, info *RuntimeErrorInfo) { templ RefKeyAndValueProvided(name string, info *RuntimeErrorInfo) {
@RuntimeErrorView(name, info) { @RuntimeErrorView(name, info) {
@keyAndValueProvided("ref") @keyAndValueProvided("ref")

View File

@ -16,7 +16,7 @@ func TestExamplePersist(t *testing.T) {
expected := "foo" expected := "foo"
checkLocalStorage := func() string { checkLocalStorage := func() string {
fromLocalStorage := page.MustEval(`k => localStorage[k]`, "foo") fromLocalStorage := page.MustEval(`k => localStorage[k]`, "datastar")
marshalled := fromLocalStorage.String() marshalled := fromLocalStorage.String()
c, err := gabs.ParseJSON([]byte(marshalled)) c, err := gabs.ParseJSON([]byte(marshalled))
assert.NoError(t, err) assert.NoError(t, err)

View File

@ -1,6 +1,6 @@
## Demo ## Demo
<div data-signals="{namespace: {test1: 'foo', test2: 'bar', test3: 'baz'}}" data-persist-foo="namespace.test1 namespace.test3"> <div data-signals="{namespace: {test1: 'foo', test2: 'bar', test3: 'baz'}}" data-persist="namespace.test1 namespace.test3">
<input id="keyInput1" data-bind="namespace.test1" class="input input-bordered" /> <input id="keyInput1" data-bind="namespace.test1" class="input input-bordered" />
<br> <br>
<input data-bind="namespace.test2" class="input input-bordered" /> <input data-bind="namespace.test2" class="input input-bordered" />
@ -14,7 +14,7 @@
```html ```html
<div <div
data-signals="{namespace: {test1: 'foo', test2: 'bar', test3: 'baz'}}" data-signals="{namespace: {test1: 'foo', test2: 'bar', test3: 'baz'}}"
data-persist-foo="namespace.test1 namespace.test3" data-persist="namespace.test1 namespace.test3"
> >
<input data-bind="namespace.test1" /> <input data-bind="namespace.test1" />
<input data-bind="namespace.test2" /> <input data-bind="namespace.test2" />
@ -27,4 +27,4 @@ Look at your Local Storage in your browser's developer tools.
In this example we are caching the `namespace.test1` and `namespace.test3` values in the Local Storage. In this example we are caching the `namespace.test1` and `namespace.test3` values in the Local Storage.
If you don't use any values it will cache the entire signals. If you don't use any values it will cache all signals.

View File

@ -534,4 +534,4 @@ This toggles the values of all signals containing `form.` (to either `true` or `
</button> </button>
</div> </div>
View the [attribute plugins reference](/reference/attribute_plugins). View the [full reference](/reference/overview).

View File

@ -186,7 +186,7 @@ The signal name can be specified in the key (as above), or in the value (as belo
The signal value can then be used to reference the element. The signal value can then be used to reference the element.
```html ```html
`foo` holds a <span data-text="$foo.tagName"></span> element. `$foo` holds a <span data-text="$foo.tagName"></span> element.
``` ```
#### Modifiers #### Modifiers
@ -395,25 +395,14 @@ If one or more space-separated values are provided as a string, only those signa
<div data-persist="foo bar"></div> <div data-persist="foo bar"></div>
``` ```
If a key is provided, it will be used as the key when saving in storage, otherwise `datastar` will be used.
```html
<div data-persist-mykey="foo bar"></div>
```
#### Modifiers #### Modifiers
Modifiers allow you to modify the key and storage target. Modifiers allow you to modify the storage target.
- `__case` - Converts the casing of the key.
- `.camel` - Camel case: `myKey`
- `.kebab` - Kebab case: `my-key` (default)
- `.snake` - Snake case: `my_key`
- `.pascal` - Pascal case: `MyKey`
- `__session` - Persists signals in Session Storage. - `__session` - Persists signals in Session Storage.
```html ```html
<div data-persist-my-key__case.kebab__session></div> <div data-persist__session="foo bar"></div>
``` ```
### `data-replace-url` ### `data-replace-url`