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:
parent
09bd26ccd2
commit
e28bb58eee
|
@ -25,4 +25,5 @@ Each tagged version of Datastar is accompanied by a release note. Read the [rele
|
|||
|
||||
### 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)).
|
||||
|
|
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
|
@ -8,24 +8,19 @@ import {
|
|||
type AttributePlugin,
|
||||
type NestedValues,
|
||||
PluginType,
|
||||
Requirement,
|
||||
} from '../../../../engine/types'
|
||||
import { kebab, modifyCasing, trimDollarSignPrefix } from '../../../../utils/text'
|
||||
import { trimDollarSignPrefix } from '../../../../utils/text'
|
||||
|
||||
const SESSION = 'session'
|
||||
|
||||
export const Persist: AttributePlugin = {
|
||||
type: PluginType.Attribute,
|
||||
name: 'persist',
|
||||
keyReq: Requirement.Denied,
|
||||
mods: new Set([SESSION]),
|
||||
onLoad: ({ key, effect, mods, signals, value }) => {
|
||||
if (key === '') {
|
||||
key = DATASTAR
|
||||
} else {
|
||||
// Default to kebab-case and allow modifying
|
||||
key = kebab(key)
|
||||
key = modifyCasing(key, mods)
|
||||
}
|
||||
|
||||
onLoad: ({ effect, mods, signals, value }) => {
|
||||
const key = DATASTAR
|
||||
const storage = mods.has(SESSION) ? sessionStorage : localStorage
|
||||
let paths = value.split(/\s+/).filter((p) => p !== '')
|
||||
paths = paths.map((p) => trimDollarSignPrefix(p))
|
||||
|
|
|
@ -7,8 +7,8 @@ import "time"
|
|||
const (
|
||||
DatastarKey = "datastar"
|
||||
Version = "1.0.0-beta.9"
|
||||
VersionClientByteSize = 39632
|
||||
VersionClientByteSizeGzip = 14845
|
||||
VersionClientByteSize = 39610
|
||||
VersionClientByteSizeGzip = 14830
|
||||
|
||||
//region Default durations
|
||||
|
||||
|
|
|
@ -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) {
|
||||
@RuntimeErrorView(name, info) {
|
||||
@keyAndValueProvided("ref")
|
||||
|
@ -486,7 +495,7 @@ templ replaceUrlError() {
|
|||
}
|
||||
|
||||
templ scrollIntoViewError() {
|
||||
<p> The <code>data-scroll-into-view</code> attribute must <em>not</em> have a key <em>nor</em> a value.</p>
|
||||
<p>The <code>data-scroll-into-view</code> attribute must <em>not</em> have a key <em>nor</em> a value.</p>
|
||||
@sampleCode("Example", "html", `<div data-scroll-into-view></div>`)
|
||||
@attributeDocs("scroll-into-view")
|
||||
}
|
||||
|
|
|
@ -16,7 +16,7 @@ func TestExamplePersist(t *testing.T) {
|
|||
expected := "foo"
|
||||
|
||||
checkLocalStorage := func() string {
|
||||
fromLocalStorage := page.MustEval(`k => localStorage[k]`, "foo")
|
||||
fromLocalStorage := page.MustEval(`k => localStorage[k]`, "datastar")
|
||||
marshalled := fromLocalStorage.String()
|
||||
c, err := gabs.ParseJSON([]byte(marshalled))
|
||||
assert.NoError(t, err)
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
## 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" />
|
||||
<br>
|
||||
<input data-bind="namespace.test2" class="input input-bordered" />
|
||||
|
@ -14,7 +14,7 @@
|
|||
```html
|
||||
<div
|
||||
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.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.
|
||||
|
||||
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.
|
|
@ -534,4 +534,4 @@ This toggles the values of all signals containing `form.` (to either `true` or `
|
|||
</button>
|
||||
</div>
|
||||
|
||||
View the [attribute plugins reference](/reference/attribute_plugins).
|
||||
View the [full reference](/reference/overview).
|
||||
|
|
|
@ -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.
|
||||
|
||||
```html
|
||||
`foo` holds a <span data-text="$foo.tagName"></span> element.
|
||||
`$foo` holds a <span data-text="$foo.tagName"></span> element.
|
||||
```
|
||||
|
||||
#### 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>
|
||||
```
|
||||
|
||||
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 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.
|
||||
|
||||
```html
|
||||
<div data-persist-my-key__case.kebab__session></div>
|
||||
<div data-persist__session="foo bar"></div>
|
||||
```
|
||||
|
||||
### `data-replace-url`
|
||||
|
|
Loading…
Reference in New Issue