1.0.0-beta.10
This commit is contained in:
Ben Croker
parent
e28bb58eee
commit
d7fba2787e
|
|
@ -26,6 +26,6 @@ body:
|
|||
attributes:
|
||||
label: Datastar Version
|
||||
description: Provide the Datastar version that this relates to, ideally the [latest release](https://github.com/starfederation/datastar/releases).
|
||||
placeholder: v1.0.0-beta.9
|
||||
placeholder: v1.0.0
|
||||
validations:
|
||||
required: true
|
||||
|
|
@ -23,4 +23,4 @@ body:
|
|||
attributes:
|
||||
label: Datastar Version
|
||||
description: Provide the Datastar version that this relates to, ideally the [latest release](https://github.com/starfederation/datastar/releases).
|
||||
placeholder: v1.0.0-beta.9
|
||||
placeholder: v1.0.0
|
||||
|
|
|
|||
|
|
@ -21,4 +21,4 @@ body:
|
|||
attributes:
|
||||
label: Datastar Version
|
||||
description: Provide the Datastar version that this relates to, ideally the [latest release](https://github.com/starfederation/datastar/releases).
|
||||
placeholder: v1.0.0-beta.9
|
||||
placeholder: v1.0.0
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ Datastar helps you build reactive web applications with the simplicity of server
|
|||
Getting started is as easy as adding a single 14.4 KiB script tag to your HTML.
|
||||
|
||||
```html
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
```
|
||||
|
||||
Then start adding frontend reactivity using declarative <code>data-*</code> attributes.
|
||||
|
|
@ -46,7 +46,7 @@ You can manually add your own plugins to the core:
|
|||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"
|
||||
"datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
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
|
|
@ -5,7 +5,7 @@
|
|||
<head>
|
||||
<title>Datastar SDK Demo</title>
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
|
||||
<div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<head>
|
||||
<title>Datastar SDK Demo</title>
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
|
||||
<div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<head>
|
||||
<title>Datastar SDK Demo</title>
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
|
||||
<div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<head>
|
||||
<title>Datastar SDK Demo</title>
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
|
||||
<div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<head>
|
||||
<title>Datastar SDK Demo</title>
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
|
||||
<div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<head>
|
||||
<title>Datastar SDK Demo</title>
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
|
||||
<div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<head>
|
||||
<title>Datastar SDK Demo</title>
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
|
||||
<div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<head>
|
||||
<title>Datastar SDK Demo</title>
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
|
||||
<div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<head>
|
||||
<title>Datastar SDK Demo</title>
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
|
||||
<div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ Datastar helps you build reactive web applications with the simplicity of server
|
|||
Getting started is as easy as adding a single 14.4 KiB script tag to your HTML.
|
||||
|
||||
```html
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
```
|
||||
|
||||
Then start adding frontend reactivity using declarative <code>data-*</code> attributes.
|
||||
|
|
@ -46,7 +46,7 @@ You can manually add your own plugins to the core:
|
|||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"
|
||||
"datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"name": "@starfederation/datastar",
|
||||
"author": "Delaney Gillilan",
|
||||
"description": "The hypermedia framework.",
|
||||
"version": "1.0.0-beta.9",
|
||||
"version": "1.0.0-beta.10",
|
||||
"license": "MIT",
|
||||
"private": false,
|
||||
"homepage": "https://data-star.dev",
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
|
||||
(def datastar-key "datastar")
|
||||
(def version "1.0.0-beta.9")
|
||||
(def version "1.0.0-beta.10")
|
||||
|
||||
|
||||
;; -----------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ type EventType =
|
|||
|
||||
module Consts =
|
||||
let [<Literal>] DatastarKey = "datastar"
|
||||
let [<Literal>] Version = "1.0.0-beta.9"
|
||||
let [<Literal>] Version = "1.0.0-beta.10"
|
||||
|
||||
/// Default: TimeSpan.FromMilliseconds 1000
|
||||
let DefaultSseRetryDuration = TimeSpan.FromMilliseconds 1000
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ import "time"
|
|||
|
||||
const (
|
||||
DatastarKey = "datastar"
|
||||
Version = "1.0.0-beta.9"
|
||||
VersionClientByteSize = 39610
|
||||
VersionClientByteSizeGzip = 14830
|
||||
Version = "1.0.0-beta.10"
|
||||
VersionClientByteSize = 39611
|
||||
VersionClientByteSizeGzip = 14832
|
||||
|
||||
//region Default durations
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import starfederation.datastar.enums.FragmentMergeMode;
|
|||
*/
|
||||
public final class Consts {
|
||||
public static final String DATASTAR_KEY = "datastar";
|
||||
public static final String VERSION = "1.0.0-beta.9";
|
||||
public static final String VERSION = "1.0.0-beta.10";
|
||||
|
||||
// The default duration for retrying SSE on connection reset. This is part of the underlying retry mechanism of SSE.
|
||||
public static final int DEFAULT_SSE_RETRY_DURATION = 1000;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ use starfederation\datastar\enums\FragmentMergeMode;
|
|||
class Consts
|
||||
{
|
||||
public const DATASTAR_KEY = 'datastar';
|
||||
public const VERSION = '1.0.0-beta.9';
|
||||
public const VERSION = '1.0.0-beta.10';
|
||||
|
||||
// The default duration for retrying SSE on connection reset. This is part of the underlying retry mechanism of SSE.
|
||||
public const DEFAULT_SSE_RETRY_DURATION = 1000;
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ class EventType(StrEnum):
|
|||
# endregion Enums
|
||||
|
||||
DATASTAR_KEY = "datastar"
|
||||
VERSION = "1.0.0-beta.9"
|
||||
VERSION = "1.0.0-beta.10"
|
||||
|
||||
# region Default durations
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
module Datastar
|
||||
module Consts
|
||||
DATASTAR_KEY = 'datastar'
|
||||
VERSION = '1.0.0-beta.9'
|
||||
VERSION = '1.0.0-beta.10'
|
||||
|
||||
# The default duration for retrying SSE on connection reset. This is part of the underlying retry mechanism of SSE.
|
||||
DEFAULT_SSE_RETRY_DURATION = 1000
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// This is auto-generated by Datastar. DO NOT EDIT.
|
||||
|
||||
pub const _DATASTAR_KEY: &str = "datastar";
|
||||
pub const _VERSION: &str = "1.0.0-beta.9";
|
||||
pub const _VERSION: &str = "1.0.0-beta.10";
|
||||
|
||||
// #region Defaults
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
export const DATASTAR = "datastar" as const;
|
||||
export const DATASTAR_REQUEST = "Datastar-Request";
|
||||
export const VERSION = "1.0.0-beta.9";
|
||||
export const VERSION = "1.0.0-beta.10";
|
||||
|
||||
// #region Defaults
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
const std = @import("std");
|
||||
|
||||
pub const datastar_key = "datastar";
|
||||
pub const version = "1.0.0-beta.9";
|
||||
pub const version = "1.0.0-beta.10";
|
||||
|
||||
// #region Defaults
|
||||
|
||||
|
|
|
|||
|
|
@ -49,3 +49,7 @@ pre code {
|
|||
border-radius: .375rem;
|
||||
background-color: hsl(204deg 100% calc(calc(50% /50) * 50)/.1);
|
||||
}
|
||||
|
||||
.prose ol, .prose ul {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ With Datastar, you can build any UI that a full-stack framework like React, Vue.
|
|||
The quickest way to use Datastar is to include it in your HTML using a script tag hosted on a CDN.
|
||||
|
||||
```html
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar.js"></script>
|
||||
```
|
||||
|
||||
If you prefer to host the file yourself, download your own bundle using the [bundler](/bundler), then include it from the appropriate path.
|
||||
|
|
|
|||
|
|
@ -2,9 +2,25 @@
|
|||
|
||||
Datastar provides the following actions, that can be used in Datastar expressions.
|
||||
|
||||
## Backend Plugins
|
||||
### Backend Actions
|
||||
|
||||
[Source Code](https://github.com/starfederation/datastar/blob/main/library/src/plugins/official/backend/actions)
|
||||
- [`@get()`](#@get)
|
||||
- [`@post()`](#@post)
|
||||
- [`@put()`](#@put)
|
||||
- [`@patch()`](#@patch)
|
||||
- [`@delete()`](#@delete)
|
||||
|
||||
### Browser Actions
|
||||
|
||||
- [`@clipboard()`](#@clipboard)
|
||||
|
||||
### Utility Actions
|
||||
|
||||
- [`@fit()`](#@fit)
|
||||
- [`@setAll()`](#@setall)
|
||||
- [`@toggleAll()`](#@toggleall)
|
||||
|
||||
## Backend Actions
|
||||
|
||||
Allow for the integration of any backend service that supports SSE.
|
||||
|
||||
|
|
@ -102,11 +118,9 @@ All of the actions above trigger `datastar-sse` events during the SSE request li
|
|||
<div data-on-datastar-sse="evt.detail.type == 'error' && console.log('SSE error encountered')"></div>
|
||||
```
|
||||
|
||||
## Browser Plugins
|
||||
## Browser Actions
|
||||
|
||||
[Source Code](https://github.com/starfederation/datastar/blob/main/library/src/plugins/official/browser/actions)
|
||||
|
||||
Provides actions for performing browser operations.
|
||||
Actions for performing browser operations.
|
||||
|
||||
### `@clipboard()`
|
||||
|
||||
|
|
@ -118,11 +132,13 @@ Copies the provided evaluated expression to the clipboard.
|
|||
<div data-on-click="@clipboard('Hello, world!')"></div>
|
||||
```
|
||||
|
||||
## Logic Plugins
|
||||
## Utility Actions
|
||||
|
||||
[Source Code](https://github.com/starfederation/datastar/blob/main/library/src/plugins/official/logic/actions)
|
||||
### `@fit()`
|
||||
|
||||
Provides actions for performing logic operations.
|
||||
Arguments: `@fit(v: number, oldMin: number, oldMax: number, newMin: number, newMax: number, shouldClamp=false, shouldRound=false)`
|
||||
|
||||
Make a value linear interpolate from an original range to new one.
|
||||
|
||||
### `@setAll()`
|
||||
|
||||
|
|
@ -142,10 +158,4 @@ Toggles all the signals that start with the prefix. This is useful for toggling
|
|||
|
||||
```html
|
||||
<div data-on-click="@toggleAll('foo.')"></div>
|
||||
```
|
||||
|
||||
### `@fit()`
|
||||
|
||||
Arguments: `@fit(v: number, oldMin: number, oldMax: number, newMin: number, newMax: number, shouldClamp=false, shouldRound=false)`
|
||||
|
||||
Make a value linear interpolate from an original range to new one.
|
||||
```
|
||||
|
|
@ -2,7 +2,36 @@
|
|||
|
||||
Datastar provides the following [`data-*`](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) attributes.
|
||||
|
||||
<div class="alert alert-info">
|
||||
### Core Attributes
|
||||
|
||||
- [`data-signals`](#data-signals)
|
||||
- [`data-computed`](#data-computed)
|
||||
- [`data-star-ignore`](#data-star-ignore)
|
||||
|
||||
### DOM Attributes
|
||||
|
||||
- [`data-attr`](#data-attr)
|
||||
- [`data-bind`](#data-bind)
|
||||
- [`data-class`](#data-class)
|
||||
- [`data-on`](#data-on)
|
||||
- [`data-ref`](#data-ref)
|
||||
- [`data-show`](#data-show)
|
||||
- [`data-text`](#data-text)
|
||||
|
||||
### Backend Attributes
|
||||
|
||||
- [`data-indicator`](#data-indicator)
|
||||
|
||||
### Browser Attributes
|
||||
|
||||
- [`data-custom-validity`](#data-custom-validity)
|
||||
- [`data-intersects`](#data-intersects)
|
||||
- [`data-persist`](#data-persist)
|
||||
- [`data-replace-url`](#data-replace-url)
|
||||
- [`data-scroll-into-view`](#data-scroll-into-view)
|
||||
- [`data-view-transition`](#data-view-transition)
|
||||
|
||||
<div class="alert alert-info my-8">
|
||||
<iconify-icon icon="simple-icons:rocket"></iconify-icon>
|
||||
<div>
|
||||
The Datastar <a href="https://marketplace.visualstudio.com/items?itemName=starfederation.datastar-vscode">VSCode extension</a> and <a href="https://plugins.jetbrains.com/plugin/26072-datastar-support">IntelliJ plugin</a> provided autocompletion for all <code>data-*</code> attributes.
|
||||
|
|
@ -44,7 +73,7 @@ Elements are evaluated by walking the DOM in a depth-first manner, and attribute
|
|||
|
||||
Datastar handles casing of data attributes in two ways:
|
||||
|
||||
1. **Signal Names**: the keys used in attribute plugins that define signals (`data-signals-*`, `data-computed-*`, `data-ref-*`, etc), are, by default, converted to camelCase. For example, `data-signals-my-signal` defines a signal named `mySignal`. You would use the signal in a [Datastar expression](/guide/datastar_expressions) as `$mySignal`.
|
||||
1. **Signal names**: the keys used in attribute plugins that define signals (`data-signals-*`, `data-computed-*`, `data-ref-*`, etc), are, by default, converted to camelCase. For example, `data-signals-my-signal` defines a signal named `mySignal`. You would use the signal in a [Datastar expression](/guide/datastar_expressions) as `$mySignal`.
|
||||
|
||||
2. **All other attribute plugins**: the keys used by all other attribute plugins are, by default, converted to [kebab-case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case). For example, `data-class-text-blue-700` adds or removes the class `text-blue-700`, and `data-on-rocket-launched` would react to the event named `rocket-launched`.
|
||||
|
||||
|
|
@ -52,12 +81,9 @@ You can use the [`__case` modifier](#modifiers) to convert between camelCase, ke
|
|||
|
||||
For example, if a web component exposes an event `widgetLoaded`, you would use `data-on-widget-loaded__case.camel` to react to it. Whereas, if you wanted to use a signal named `my-signal` then you would use the kebab modfier: `data-signals-my-signal__case.kebab`.
|
||||
|
||||
## Core Attributes
|
||||
|
||||
## Core Plugins
|
||||
|
||||
[Source Code](https://github.com/starfederation/datastar/blob/main/library/src/plugins/official/core/attributes)
|
||||
|
||||
The core plugins are included in every bundle, and contain the core functionality in Datastar.
|
||||
The core attribute plugins are included in every bundle, and contain the core functionality in Datastar.
|
||||
|
||||
### `data-signals`
|
||||
|
||||
|
|
@ -169,45 +195,25 @@ Modifiers allow you to modify behavior when defining computed signals.
|
|||
<div data-computed-my-signal__case.kebab="$bar + $baz"></div>
|
||||
```
|
||||
|
||||
### `data-ref`
|
||||
### `data-star-ignore`
|
||||
|
||||
Creates a new signal that is a reference to the element on which the data attribute is placed.
|
||||
Datastar walks the entire DOM and applies plugins to each element it encounters. It's possible to tell Datastar to ignore an element and its descendants by placing a `data-star-ignore` attribute on it. This can be useful for preventing naming conflicts with third-party libraries, or when you are unable to [escape user input](/reference/security#escape-user-input).
|
||||
|
||||
```html
|
||||
<div data-ref-foo></div>
|
||||
```
|
||||
|
||||
The signal name can be specified in the key (as above), or in the value (as below). This can be useful depending on the templating language you are using.
|
||||
|
||||
```html
|
||||
<div data-ref="foo"></div>
|
||||
```
|
||||
|
||||
The signal value can then be used to reference the element.
|
||||
|
||||
```html
|
||||
`$foo` holds a <span data-text="$foo.tagName"></span> element.
|
||||
<div data-star-ignore data-show-thirdpartylib>
|
||||
<div data-show-thirdpartylib>
|
||||
These element will not be processed by Datastar.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Modifiers
|
||||
|
||||
Modifiers allow you to modify behavior when defining references.
|
||||
- `__self` - Only ignore the element itself, not its descendants.
|
||||
|
||||
- `__case` - Converts the casing of the signal name.
|
||||
- `.camel` - Camel case: `mySignal` (default)
|
||||
- `.kebab` - Kebab case: `my-signal`
|
||||
- `.snake` - Snake case: `my_signal`
|
||||
- `.pascal` - Pascal case: `MySignal`
|
||||
## DOM Attributes
|
||||
|
||||
```html
|
||||
<div data-ref-my-signal__case.kebab></div>
|
||||
```
|
||||
|
||||
## DOM Plugins
|
||||
|
||||
[Source Code](https://github.com/starfederation/datastar/blob/main/library/src/plugins/official/dom/attributes)
|
||||
|
||||
Allows the usage of signals and expressions to affect the DOM.
|
||||
Allow the usage of signals and expressions to affect the DOM.
|
||||
|
||||
### `data-attr`
|
||||
|
||||
|
|
@ -381,113 +387,38 @@ Modifiers allow you to modify behavior when events are triggered. Some modifiers
|
|||
></div>
|
||||
```
|
||||
|
||||
### `data-persist`
|
||||
### `data-ref`
|
||||
|
||||
Persists signals in Local Storage. This is useful for storing values between page loads.
|
||||
Creates a new signal that is a reference to the element on which the data attribute is placed.
|
||||
|
||||
```html
|
||||
<div data-persist></div>
|
||||
<div data-ref-foo></div>
|
||||
```
|
||||
|
||||
If one or more space-separated values are provided as a string, only those signals are persisted.
|
||||
The signal name can be specified in the key (as above), or in the value (as below). This can be useful depending on the templating language you are using.
|
||||
|
||||
```html
|
||||
<div data-persist="foo bar"></div>
|
||||
<div data-ref="foo"></div>
|
||||
```
|
||||
|
||||
The signal value can then be used to reference the element.
|
||||
|
||||
```html
|
||||
`$foo` holds a <span data-text="$foo.tagName"></span> element.
|
||||
```
|
||||
|
||||
#### Modifiers
|
||||
|
||||
Modifiers allow you to modify the storage target.
|
||||
Modifiers allow you to modify behavior when defining references.
|
||||
|
||||
- `__session` - Persists signals in Session Storage.
|
||||
- `__case` - Converts the casing of the signal name.
|
||||
- `.camel` - Camel case: `mySignal` (default)
|
||||
- `.kebab` - Kebab case: `my-signal`
|
||||
- `.snake` - Snake case: `my_signal`
|
||||
- `.pascal` - Pascal case: `MySignal`
|
||||
|
||||
```html
|
||||
<div data-persist__session="foo bar"></div>
|
||||
```
|
||||
|
||||
### `data-replace-url`
|
||||
|
||||
Replaces the URL in the browser without reloading the page. The value can be a relative or absolute URL, and is an evaluated expression.
|
||||
|
||||
```html
|
||||
<div data-replace-url="`/page${page}`"></div>
|
||||
```
|
||||
|
||||
### `data-text`
|
||||
|
||||
Binds the text content of an element to an expression.
|
||||
|
||||
```html
|
||||
<div data-text="$foo"></div>
|
||||
```
|
||||
|
||||
## Browser Plugins
|
||||
|
||||
[Source Code](https://github.com/starfederation/datastar/tree/main/library/src/plugins/official/browser/attributes)
|
||||
|
||||
Focused on showing and hiding elements based on signals. Most of the time you want to send updates from the server but is useful for things like modals, dropdowns, and other UI elements.
|
||||
|
||||
### `data-custom-validity`
|
||||
|
||||
Allows you to add custom validity to an element using an expression. The expression must evaluate to a string that will be set as the custom validity message. If the string is empty, the input is considered valid. If the string is non-empty, the input is considered invalid and the string is used as the reported message.
|
||||
|
||||
```html
|
||||
<form>
|
||||
<input data-bind-foo name="foo" />
|
||||
<input data-bind-bar name="bar"
|
||||
data-custom-validity="$foo === $bar ? '' : 'Field values must be the same.'"
|
||||
/>
|
||||
<button>Submit form</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
### `data-intersects`
|
||||
|
||||
Runs an expression when the element intersects with the viewport.
|
||||
|
||||
```html
|
||||
<div data-intersects="$intersected = true"></div>
|
||||
```
|
||||
|
||||
#### Modifiers
|
||||
|
||||
Modifiers allow you to modify the element intersection behavior.
|
||||
|
||||
- `__once` - Only triggers the event once.
|
||||
- `__half` - Triggers when half of the element is visible.
|
||||
- `__full` - Triggers when the full element is visible.
|
||||
|
||||
```html
|
||||
<div data-intersects__once="$intersected = true"></div>
|
||||
```
|
||||
|
||||
### `data-scroll-into-view`
|
||||
|
||||
Scrolls the element into view. Useful when updating the DOM from the backend, and you want to scroll to the new content.
|
||||
|
||||
```html
|
||||
<div data-scroll-into-view></div>
|
||||
```
|
||||
|
||||
#### Modifiers
|
||||
|
||||
Modifiers allow you to modify scrolling behavior.
|
||||
|
||||
- `__smooth` - Scrolling is animate smoothly.
|
||||
- `__instant` - Scrolling is instant.
|
||||
- `__auto` - Scrolling is determined by the computed `scroll-behavior` CSS property.
|
||||
- `__hstart` - Scrolls to the left of the element.
|
||||
- `__hcenter` - Scrolls to the horizontal center of the element.
|
||||
- `__hend` - Scrolls to the right of the element.
|
||||
- `__hnearest` - Scrolls to the nearest horizontal edge of the element.
|
||||
- `__vstart` - Scrolls to the top of the element.
|
||||
- `__vcenter` - Scrolls to the vertical center of the element.
|
||||
- `__vend` - Scrolls to the bottom of the element.
|
||||
- `__vnearest` - Scrolls to the nearest vertical edge of the element.
|
||||
- `__focus` - Focuses the element after scrolling.
|
||||
|
||||
```html
|
||||
<div data-scroll-into-view__smooth></div>
|
||||
<div data-ref-my-signal__case.kebab></div>
|
||||
```
|
||||
|
||||
### `data-show`
|
||||
|
|
@ -504,21 +435,17 @@ To prevent flickering of the element before Datastar has processed the DOM, you
|
|||
<div data-show="$foo" style="display: none"></div>
|
||||
```
|
||||
|
||||
### `data-view-transition`
|
||||
### `data-text`
|
||||
|
||||
Sets the `view-transition-name` style attribute explicitly.
|
||||
Binds the text content of an element to an expression.
|
||||
|
||||
```html
|
||||
<div data-view-transition="$foo"></div>
|
||||
<div data-text="$foo"></div>
|
||||
```
|
||||
|
||||
Page level transitions are automatically handled by an injected meta tag. Inter-page elements are automatically transitioned if the [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) is available in the browser and `useViewTransitions` is `true`.
|
||||
## Backend Attributes
|
||||
|
||||
## Backend Plugins
|
||||
|
||||
[Source Code](https://github.com/starfederation/datastar/blob/main/library/src/plugins/official/backend/attributes)
|
||||
|
||||
Adds integrations with [backend plugin actions](/reference/action_plugins#backend-plugins).
|
||||
Add integrations with [backend plugin actions](/reference/action_plugins#backend-plugins).
|
||||
|
||||
### `data-indicator`
|
||||
|
||||
|
|
@ -555,24 +482,112 @@ Modifiers allow you to modify behavior when defining indicator signals.
|
|||
- `.snake` - Snake case: `my_signal`
|
||||
- `.pascal` - Pascal case: `MySignal`
|
||||
|
||||
## Ignoring Elements
|
||||
## Browser Attributes
|
||||
|
||||
### `data-star-ignore`
|
||||
### `data-custom-validity`
|
||||
|
||||
Datastar walks the entire DOM and applies plugins to each element it encounters. It's possible to tell Datastar to ignore an element and its descendants by placing a `data-star-ignore` attribute on it. This can be useful for preventing naming conflicts with third-party libraries, or when you are unable to [escape user input](/reference/security#escape-user-input).
|
||||
Allows you to add custom validity to an element using an expression. The expression must evaluate to a string that will be set as the custom validity message. If the string is empty, the input is considered valid. If the string is non-empty, the input is considered invalid and the string is used as the reported message.
|
||||
|
||||
```html
|
||||
<div data-star-ignore data-show-thirdpartylib>
|
||||
<div data-show-thirdpartylib>
|
||||
These element will not be processed by Datastar.
|
||||
</div>
|
||||
</div>
|
||||
<form>
|
||||
<input data-bind-foo name="foo" />
|
||||
<input data-bind-bar name="bar"
|
||||
data-custom-validity="$foo === $bar ? '' : 'Field values must be the same.'"
|
||||
/>
|
||||
<button>Submit form</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
### `data-intersects`
|
||||
|
||||
Runs an expression when the element intersects with the viewport.
|
||||
|
||||
```html
|
||||
<div data-intersects="$intersected = true"></div>
|
||||
```
|
||||
|
||||
#### Modifiers
|
||||
|
||||
- `__self` - Only ignore the element itself, not its descendants.
|
||||
Modifiers allow you to modify the element intersection behavior.
|
||||
|
||||
- `__once` - Only triggers the event once.
|
||||
- `__half` - Triggers when half of the element is visible.
|
||||
- `__full` - Triggers when the full element is visible.
|
||||
|
||||
```html
|
||||
<div data-intersects__once="$intersected = true"></div>
|
||||
```
|
||||
|
||||
### `data-persist`
|
||||
|
||||
Persists signals in Local Storage. This is useful for storing values between page loads.
|
||||
|
||||
```html
|
||||
<div data-persist></div>
|
||||
```
|
||||
|
||||
If one or more space-separated values are provided as a string, only those signals are persisted.
|
||||
|
||||
```html
|
||||
<div data-persist="foo bar"></div>
|
||||
```
|
||||
|
||||
#### Modifiers
|
||||
|
||||
Modifiers allow you to modify the storage target.
|
||||
|
||||
- `__session` - Persists signals in Session Storage.
|
||||
|
||||
```html
|
||||
<div data-persist__session="foo bar"></div>
|
||||
```
|
||||
|
||||
### `data-replace-url`
|
||||
|
||||
Replaces the URL in the browser without reloading the page. The value can be a relative or absolute URL, and is an evaluated expression.
|
||||
|
||||
```html
|
||||
<div data-replace-url="`/page${page}`"></div>
|
||||
```
|
||||
|
||||
### `data-scroll-into-view`
|
||||
|
||||
Scrolls the element into view. Useful when updating the DOM from the backend, and you want to scroll to the new content.
|
||||
|
||||
```html
|
||||
<div data-scroll-into-view></div>
|
||||
```
|
||||
|
||||
#### Modifiers
|
||||
|
||||
Modifiers allow you to modify scrolling behavior.
|
||||
|
||||
- `__smooth` - Scrolling is animate smoothly.
|
||||
- `__instant` - Scrolling is instant.
|
||||
- `__auto` - Scrolling is determined by the computed `scroll-behavior` CSS property.
|
||||
- `__hstart` - Scrolls to the left of the element.
|
||||
- `__hcenter` - Scrolls to the horizontal center of the element.
|
||||
- `__hend` - Scrolls to the right of the element.
|
||||
- `__hnearest` - Scrolls to the nearest horizontal edge of the element.
|
||||
- `__vstart` - Scrolls to the top of the element.
|
||||
- `__vcenter` - Scrolls to the vertical center of the element.
|
||||
- `__vend` - Scrolls to the bottom of the element.
|
||||
- `__vnearest` - Scrolls to the nearest vertical edge of the element.
|
||||
- `__focus` - Focuses the element after scrolling.
|
||||
|
||||
```html
|
||||
<div data-scroll-into-view__smooth></div>
|
||||
```
|
||||
|
||||
### `data-view-transition`
|
||||
|
||||
Sets the `view-transition-name` style attribute explicitly.
|
||||
|
||||
```html
|
||||
<div data-view-transition="$foo"></div>
|
||||
```
|
||||
|
||||
Page level transitions are automatically handled by an injected meta tag. Inter-page elements are automatically transitioned if the [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) is available in the browser and `useViewTransitions` is `true`.
|
||||
|
||||
## Aliasing Data Attributes
|
||||
|
||||
|
|
@ -581,5 +596,5 @@ It is possible to alias `data-*` attributes to a custom alias (`data-foo-*`, for
|
|||
We maintain a `data-star-*` aliased version that can be included as follows.
|
||||
|
||||
```html
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar-aliased.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar-aliased.js"></script>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ It is possible to alias `data-*` attributes to a custom alias (`data-foo-*`, for
|
|||
We maintain a `data-star-*` aliased version that can be included as follows.
|
||||
|
||||
```html
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.9/bundles/datastar-aliased.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.10/bundles/datastar-aliased.js"></script>
|
||||
```
|
||||
|
||||
### NPM
|
||||
|
|
|
|||
|
|
@ -12,62 +12,72 @@
|
|||
|
||||
Attribute plugins are `data-*` attributes that add reactive behavior to HTML elements.
|
||||
|
||||
### Core Plugins
|
||||
### Core Attributes
|
||||
|
||||
| Plugin | Description |
|
||||
|--------|-------------|
|
||||
| Attribute | Description |
|
||||
|-----------|-------------|
|
||||
| [`data-signals`](/reference/attribute_plugins#data-signals) | Merges one or more signals into the existing signals. |
|
||||
| [`data-computed`](/reference/attribute_plugins#data-computed) | Creates a read-only signal computed from an expression. |
|
||||
| [`data-ref`](/reference/attribute_plugins#data-ref) | Creates a signal reference to the DOM element. |
|
||||
| [`data-star-ignore`](/reference/attribute_plugins#data-star-ignore) | Ignores an element and its descendants when processing. |
|
||||
|
||||
### DOM Plugins
|
||||
### DOM Attributes
|
||||
|
||||
| Plugin | Description |
|
||||
|--------|-------------|
|
||||
| Attribute | Description |
|
||||
|-----------|-------------|
|
||||
| [`data-attr`](/reference/attribute_plugins#data-attr) | Sets any HTML attribute value using expressions. |
|
||||
| [`data-bind`](/reference/attribute_plugins#data-bind) | Creates two-way data binding between a signal and an element's value. |
|
||||
| [`data-class`](/reference/attribute_plugins#data-class) | Adds or removes CSS classes based on expressions. |
|
||||
| [`data-on`](/reference/attribute_plugins#data-on) | Attaches event listeners that execute expressions. |
|
||||
| [`data-persist`](/reference/attribute_plugins#data-persist) | Persists signals in Local Storage or Session Storage. |
|
||||
| [`data-ref`](/reference/attribute_plugins#data-ref) | Creates a signal reference to the DOM element. |
|
||||
| [`data-replace-url`](/reference/attribute_plugins#data-replace-url) | Replaces the URL in the browser without page reload. |
|
||||
| [`data-text`](/reference/attribute_plugins#data-text) | Binds text content of an element to an expression. |
|
||||
|
||||
### Browser Plugins
|
||||
### Browser Attributes
|
||||
|
||||
| Plugin | Description |
|
||||
|--------|-------------|
|
||||
| Attribute | Description |
|
||||
|-----------|-------------|
|
||||
| [`data-custom-validity`](/reference/attribute_plugins#data-custom-validity) | Adds custom validation to elements. |
|
||||
| [`data-intersects`](/reference/attribute_plugins#data-intersects) | Runs expressions when elements intersect the viewport. |
|
||||
| [`data-scroll-into-view`](/reference/attribute_plugins#data-scroll-into-view) | Scrolls elements into view with various options. |
|
||||
| [`data-show`](/reference/attribute_plugins#data-show) | Shows or hides elements based on expressions. |
|
||||
| [`data-view-transition`](/reference/attribute_plugins#data-view-transition) | Sets `view-transition-name` for View Transitions API. |
|
||||
|
||||
### Backend Plugins
|
||||
### Backend Attributes
|
||||
|
||||
| Plugin | Description |
|
||||
|--------|-------------|
|
||||
| Attribute | Description |
|
||||
|-----------|-------------|
|
||||
| [`data-indicator`](/reference/attribute_plugins#data-indicator) | Creates signals that indicate when SSE requests are in flight. |
|
||||
|
||||
View the [attribute plugins reference](/reference/attribute_plugins).
|
||||
View the [attribute plugins reference](/reference/attribute_plugins)
|
||||
|
||||
## Action Plugins
|
||||
|
||||
Action plugins are used in Datastar expressions to perform specific actions.
|
||||
|
||||
| Plugin | Description |
|
||||
| Action | Description |
|
||||
|--------|-------------|
|
||||
| [`@get()`](/reference/action_plugins#get) | Sends a GET request to the backend and merges the response. |
|
||||
| [`@post()`](/reference/action_plugins#post) | Sends a POST request to the backend and merges the response. |
|
||||
| [`@put()`](/reference/action_plugins#put) | Sends a PUT request to the backend and merges the response. |
|
||||
| [`@patch()`](/reference/action_plugins#patch) | Sends a PATCH request to the backend and merges the response. |
|
||||
| [`@delete()`](/reference/action_plugins#delete) | Sends a DELETE request to the backend and merges the response. |
|
||||
|
||||
### Browser Actions
|
||||
|
||||
| Action | Description |
|
||||
|--------|-------------|
|
||||
| [`@clipboard()`](/reference/action_plugins#clipboard) | Copies the provided evaluated expression to the clipboard. |
|
||||
|
||||
### Utility Actions
|
||||
|
||||
| Action | Description |
|
||||
|--------|-------------|
|
||||
| [`@fit()`](/reference/action_plugins#fit) | Makes a value linearly interpolate from an original range to a new one. |
|
||||
| [`@setAll()`](/reference/action_plugins#setall) | Sets all signals with a specific prefix to a provided value. |
|
||||
| [`@toggleAll()`](/reference/action_plugins#toggleall) | Toggles all signals that start with a given prefix. |
|
||||
| [`@fit()`](/reference/action_plugins#fit) | Makes a value linearly interpolate from an original range to a new one. |
|
||||
|
||||
View the [action plugins reference](/reference/action_plugins).
|
||||
View the [action plugins reference](/reference/action_plugins)
|
||||
|
||||
## Expression Context
|
||||
|
||||
|
|
@ -89,7 +99,7 @@ Datastar uses Server-Sent Events (SSE) to communicate from the server to the cli
|
|||
| [`datastar-remove-signals`](/reference/sse_events#datastar-remove-signals) | Removes signals matching specific paths. |
|
||||
| [`datastar-execute-script`](/reference/sse_events#datastar-execute-script) | Executes JavaScript in the browser. |
|
||||
|
||||
View the [SSE events reference](/reference/sse_events).
|
||||
View the [SSE events reference](/reference/sse_events)
|
||||
|
||||
## SDKs
|
||||
|
||||
|
|
@ -106,7 +116,7 @@ Officially supported SDKs for generating Datastar-specific SSE events:
|
|||
- [TypeScript](/reference/sdks#typescript)
|
||||
- [Zig](/reference/sdks#zig)
|
||||
|
||||
View the [SDK reference](/reference/sdks).
|
||||
View the [SDK reference](/reference/sdks)
|
||||
|
||||
## Security
|
||||
|
||||
|
|
@ -119,10 +129,10 @@ Security guidelines for using Datastar expressions safely:
|
|||
| Ignore Unsafe Input | Use `data-star-ignore` to ignore unsafe content that cannot be escaped. |
|
||||
| Content Security Policy | Requires 'unsafe-eval' for script sources since Datastar evaluates expressions using IIFE. |
|
||||
|
||||
View the [security reference](/reference/security).
|
||||
View the [security reference](/reference/security)
|
||||
|
||||
## Custom Builds
|
||||
|
||||
Datastar is built using a modular architecture that allows you to create custom builds with only the plugins you need, useful for reducing the framework's footprint.
|
||||
|
||||
View the [custom builds reference](/reference/custom_builds).
|
||||
View the [custom builds reference](/reference/custom_builds)
|
||||
|
|
|
|||
Loading…
Reference in New Issue