Support explicit syntax (#297)

* refactor: Use Docker-dev for the base image, and build all the things

* refactor: Log in to the registry

* refactor: Run on workflow changes

* chore: revert changes

* Improve homepage title

* delete everything first

* add top level sdk folder
move go SDK
add back bundles and stuff to make tsbuild work

* update go SDK url

* fix: Fix issue with `make task`

* fix: Fix multiple linux arch’s, add `support` as a `deploy` dep

* refactor: Install `flyctl`

* refactor: Output to the current directory

* refactor: ignore .out

* refactor: Run via Docker container

* refactor: Use `flyctl` instead of the alias

* refactor: Docker-in-Docker

As per “The Socket Solution” here: https://jpetazzo.github.io/2015/09/03/do-not-use-docker-in-docker-for-ci/

* refactor: Fix comment

* refactor: Make fly alias

* refactor: Use fly alias

* add vendored back in

* fix: Revert relative paths

* refactor: Revert ignoring `.out`

* refactor: Run flyctl in the CI container

* refactor: Remove flyctl

* refactor: Remove socket bind mount

* refactor: Add `flyctl` back in so `make task deploy` can be done locally

* add types and nested signals

* Add canonical meta tag

* add more stuff back in

* add ( i think ) the rest of the plugins

* lazy generation ReactiveExpresison, get click to edit working

* data-merge-signals to data-signals
start @action to action

* Add WIP release notes

* update more examples removing @ syntax and moving to sse action

* remove deprecated examples

* The great $ purge of 2024

* Add error codes

* working on v21 syntax  #296
fix bind/intersect lazy reactiveExpression gen

* Fix todo demo

* Reorder plugins

* Start markdown errors

* Finish markdown errors

* Update release notes

* Add release note

* Update release note

* remove dup and require checks

* fix signals JSON usage
fix throttle/debounce lead/trail port

* make js obj helper
auto formatting
signal value needed explicit period prefix for value
data-signals lazy generates due to possible expressons
removeSignal applies after eval

* update test, 127/127

* Create VSCode extension (#295)

* Add attributes

* Finish attributes

* Fix repo URL

* Finish

* change attributes

* fix attributes

* VSCode extension improvements

* fix data-attributes example

* Fix a BEN!

* support individual data-class-foo calls

* error page

* Rework error pages

* Simplify

* Rework errors

* Fixes

* Delete `console.log` from library

* #296 persist back in

* Add missing error

* remove mouse move until I implement correctly

* i hate javascript

* . syntax for modifiers now :

* Extract plugin rules

* Add clarification comment

* support xor key or value for bind/ref/indicator

* Add KeyValRules

* Remove unused properties

* Update VSCode extension

* Update docs

* Improve getting started guide

* logic restored

* autogen error sidebar links

* fixed Restructure folders #287

* fix scroll test
* Prep docs for release

* Fixed check for exclusive requirements

* Build

* img diff

* add errors to nested signals
fix getting started

---------

Co-authored-by: Andrew Welch <[email protected]>
Co-authored-by: Ben Croker <[email protected]>
Co-authored-by: Ben Croker <[email protected]>

.github/workflows/fly-deploy.yml

@@ -23,6 +23,10 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Deploy to fly.io
         uses: superfly/flyctl-actions/setup-flyctl@master
-      - run: flyctl deploy --remote-only
+      - run: |
+          docker container run --rm -t -v "${{ github.workspace }}":/app -v go-modules:/go/pkg/mod ghcr.io/starfederation/datastar-dev -c 'git lfs fetch --all && git lfs pull && git lfs checkout'
+          docker container run --rm -t -v "${{ github.workspace }}":/app -v go-modules:/go/pkg/mod ghcr.io/starfederation/datastar-dev -c 'task tools'
+          docker container run --rm -t -v "${{ github.workspace }}":/app -v go-modules:/go/pkg/mod ghcr.io/starfederation/datastar-dev -c 'task support'
+          flyctl deploy --local-only
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

.gitignore

@@ -3,6 +3,8 @@ datastar_site
 data
 .task
 .idea
+.DS_Store
 node_modules
 datastar-website
 *_bin
+.DS_Store

.vscode/launch.json

@@ -24,7 +24,7 @@
             "type": "go",
             "request": "launch",
             "mode": "auto",
-            "program": "${workspaceFolder}/code/go/cmd/tsbuild/main.go",
+            "program": "${workspaceFolder}/code/go/cmd/build/main.go",
             "cwd": "${workspaceFolder}"
         }
     ]

CHANGELOG.md

@@ -2,13 +2,29 @@
 
 ## 0.21.0 - Unreleased
 
+We’ve overhauled Datastar in v0.21.0, doubling down on making nestable signals declarative. To that end, we’ve removed special characters, made the API more explicit and consistent, and fixed some restrictions to nested signals that we discovered. Signal values are now accessed in expressions using the syntax `signalName.value`, actions no longer have a prefix, and attribute keys support nested signals using dot-delimited paths.
+
+### Added
+
+- Added the ability to merge one-off signals using the syntax `data-signals-foo="value"`.
+- Added the ability to use dot-delimited paths to denote nested signals in applicable attribute keys (`data-signals-foo.bar="value"`).
+- Added the ability to use multiple attributes using the syntax `data-attributes="{attrName1: value1, attrName2: value2}"`.
+- Added the ability to use a single classes using the syntax `data-class-hidden="foo.value"`.
+- Added the ability to use a key instead of a value to denote a signal name in the `data-bind`, `data-indicator` and `data-ref` attributes (`data-bind-foo`, `data-indicator-foo`, `data-ref-foo`).
+- Added error codes and links to descriptions in the console for every error thrown.
+
 ### Changed
 
-- Changed the action plugin prefix from `$` to `@`.
-- Renamed the `data-store` attribute to `data-merge-signals`.
+- Signals no longer have the `$` prefix and must be acessed using a `.value` suffix (`signalName.value`).
+- Action plugins no longer have the `$` prefix.
+- Renamed the `data-store` attribute to `data-signals`.
+- Renamed the `data-bind` attribute to `data-attributes`.
 - Renamed the `data-model` attribute to `data-bind`.
+- Changed the `data-*` attribute modifier delimiter from `.` to `:` (`data-on-keydown:debounce_100ms:throttle_lead="value"`).
+- The the `get()`, `post()`, `put()`, and `delete()` plugins have been replaced by a single `sse()` plugin that accepts the method as an option (`sse(url, {method="get"})`).
+- The `setAll()` and `toggleAll` plugins now accept a dot-delimited path format, instead of a regular expression.
 
 ### Fixed
 
-- Fixed headers not merging correctly. 
+- Fixed headers not merging correctly.
 - Fixed new lines in the SDK protocol for paths.

CONTRIBUTING.md

@@ -12,9 +12,9 @@ Anything outside of this scope may not be accepted. If you have a need for a fea
 
 Before submitting bug reports and feature requests, please search the [open issues](https://github.com/starfederation/datastar/issues) and the _#help_ channel in the [Discord server](https://discord.gg/bnRNgZjgPh) to see if it has already been addressed. When submitting a [new issue](https://github.com/starfederation/datastar/issues/new), please use a descriptive title and include a clear description and as much relevant information as possible.
 
-## Documentation 
+## Documentation
 
-Datastar’s documentation is under active development. All the markdown files live in [this folder](https://github.com/starfederation/datastar/tree/develop/code/go/site/static/md). Improvements to them can be submitted via pull requests.
+Datastar’s documentation is under active development. All the markdown files live in [this folder](https://github.com/starfederation/datastar/tree/develop/site/static/md). Improvements to them can be submitted via pull requests.
 
 ## Pull Requests
 

Dockerfile-dev

@@ -39,6 +39,11 @@ RUN apt update && sudo apt upgrade \
     && \
     go install github.com/valyala/quicktemplate/qtc@latest \
     && \
+    # Install flyctl cli \
+    curl -L https://fly.io/install.sh | sh \
+    && \
+    ln -s /root/.fly/bin/flyctl /usr/local/bin/fly \
+    && \
     # Make this a safe .git directory
     git config --global --add safe.directory /app
 

Makefile

@@ -21,14 +21,11 @@ dev: --image-check
 # Build the Docker image
 image-build:
 	docker build -f Dockerfile-dev . -t ${IMAGE_NAME} --build-arg TAG=${TAG} --no-cache
-ifeq ($(ARCH),arm64)
-	${DOCKER_RUN} --name ${CONTAINER}-$@ ${IMAGE_NAME} -c 'wget -O code/go/site/tailwindcli https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/v1.7.21/tailwindcss-extra-linux-arm64'
-endif
 	${DOCKER_RUN} --name ${CONTAINER}-$@ ${IMAGE_NAME} -c 'git lfs fetch --all && git lfs pull && git lfs checkout'
 	${DOCKER_RUN} --name ${CONTAINER}-$@ ${IMAGE_NAME} -c 'task tools'
 # Run the passed in task command
 task: --image-check
-	${DOCKER_RUN} --name ${CONTAINER}-$@ -e DEV_PORT="${DEV_PORT}" -p ${DEV_PORT}:${DEV_PORT} ${IMAGE_NAME} ${IMAGE_NAME} -c 'task $(filter-out $@,$(MAKECMDGOALS)) $(MAKEFLAGS)'
+	${DOCKER_RUN} --name ${CONTAINER}-$@ -e DEV_PORT="${DEV_PORT}" -p ${DEV_PORT}:${DEV_PORT} ${IMAGE_NAME} -c 'task $(filter-out $@,$(MAKECMDGOALS)) $(MAKEFLAGS)'
 # Run the test suite
 test: --image-check
 	${DOCKER_RUN} --name ${CONTAINER}-$@ -e DEV_PORT="${DEV_PORT}" -p ${DEV_PORT}:${DEV_PORT} ${IMAGE_NAME} -c 'task test'

README.md

@@ -4,20 +4,29 @@
 ![Discord](https://img.shields.io/discord/1296224603642925098)
 ![GitHub Repo stars](https://img.shields.io/github/stars/starfederation/datastar?style=flat)
 
-<p align="center"><img width="200" src="https://media.githubusercontent.com/media/starfederation/datastar/refs/heads/main/code/go/site/static/images/rocket.gif"></p>
+<p align="center"><img width="200" src="https://media.githubusercontent.com/media/starfederation/datastar/refs/heads/main/site/static/images/rocket.gif"></p>
 
 # Datastar
 
-### A real-time hypermedia framework.
+### The hypermedia framework.
 
-Datastar helps you build real-time web applications with the simplicity of server-side rendering and the power of a full-stack SPA framework.
+Datastar helps you build reactive web applications with the simplicity of server-side rendering and the power of a full-stack SPA framework.
+
+Getting started is as easy as adding a single script tag to your HTML.
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar/bundles/datastar.js"></script>
+```
+
+Then start adding frontend reactivity using declarative `data-*` attributes.
+Datastar helps you build reactive web applications with the simplicity of server-side rendering and the power of a full-stack SPA framework.
 
 Here’s what frontend reactivity looks like using Datastar:
 
 ```html
-<input data-bind="input" type="text">
-<div data-text="$input.toUpperCase()"></div>
-<button data-on-click="@post('/endpoint')">Save</button>
+<input data-bind-input type="text">
+<div data-text="input.value.toUpperCase()"></div>
+<button data-on-click="sse('/endpoint', {method: 'post'})">Save</button>
 ```
 
 Visit the [Datastar Website »](https://data-star.dev/)

Taskfile.yml

@@ -14,15 +14,17 @@ tasks:
     cmds:
       - go install github.com/go-task/task/v3/cmd/task@latest
       - go install github.com/a-h/templ/cmd/templ@latest
-      - cmd: test -f code/go/site/tailwindcli || wget -O code/go/site/tailwindcli https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/v1.7.21/tailwindcss-extra-linux-x64
-        platforms: [linux]
-      - cmd: test -f code/go/site/tailwindcli || wget -O code/go/site/tailwindcli https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/v1.7.21/tailwindcss-extra-macos-arm64
+      - cmd: test -f site/tailwindcli || wget -O site/tailwindcli https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/v1.7.21/tailwindcss-extra-linux-x64
+        platforms: [linux/amd64]
+      - cmd: test -f site/tailwindcli || wget -O site/tailwindcli https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/v1.7.21/tailwindcss-extra-linux-arm64
+        platforms: [linux/arm64]
+      - cmd: test -f site/tailwindcli || wget -O site/tailwindcli https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/v1.7.21/tailwindcss-extra-macos-arm64
         platforms: [darwin/arm64]
-      - cmd: test -f code/go/site/tailwindcli || wget -O code/go/site/tailwindcli https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/v1.7.21/tailwindcss-extra-macos-x64
+      - cmd: test -f site/tailwindcli || wget -O site/tailwindcli https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/v1.7.21/tailwindcss-extra-macos-x64
         platforms: [darwin/amd64]
-      - cmd: test -f code/go/site/tailwindcli || wget -O code/go/site/tailwindcli https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/v1.7.21/tailwindcss-extra-windows-x64.exe
+      - cmd: test -f site/tailwindcli || wget -O site/tailwindcli https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/v1.7.21/tailwindcss-extra-windows-x64.exe
         platforms: [windows]
-      - chmod +x code/go/site/tailwindcli
+      - chmod +x site/tailwindcli
       - go install github.com/valyala/quicktemplate/qtc@latest
 
   version:
@@ -37,7 +39,7 @@ tasks:
     cmds:
       - qtc
 
-  tsbuild:
+  build:
     deps:
       - qtc
     sources:
@@ -48,20 +50,20 @@ tasks:
     generates:
       - "bundles/**/*"
     cmds:
-      - go run code/go/cmd/tsbuild/main.go
-      - cp -r bundles/* code/go/site/static/js/
-      - mkdir -p code/ts/library/dist/
-      - cp -r bundles/* code/ts/library/dist/
-      - mkdir -p code/go/site/static/librarySource
-      - rm -rf code/go/site/static/librarySource/*
-      - cp -r code/ts/library/src/* code/go/site/static/librarySource/
+      - go run build/cmd/build/main.go
+      - cp -r bundles/* site/static/js/
+      - mkdir -p library/dist/
+      - cp -r bundles/* library/dist/
+      - mkdir -p site/static/librarySource
+      - rm -rf site/static/librarySource/*
+      - cp -r library/src/* site/static/librarySource/
 
   libpub:
     dir: code/ts/library
     requires:
       vars: [VERSION]
     deps:
-      - tsbuild
+      - build
     cmds:
       - git push origin
       - git tag v{{.VERSION}}
@@ -75,7 +77,7 @@ tasks:
       - task: deploy
 
   css:
-    dir: code/go/site
+    dir: site
     sources:
       - "**/*.templ"
       - "**/*.md"
@@ -103,15 +105,15 @@ tasks:
 
   support:
     sources:
-      - code/go/**/*.templ
-      - code/go/**/*.go
-      - code/go/**/*.md
-      - code/go/site/static/**/*
+      - "**/*.templ"
+      - "**/*.go"
+      - "**/*.md"
+      - site/static/**/*
     generates:
       - ./datastar-website
     deps:
       - kill
-      - tsbuild
+      - build
       - templ
       - css
 
@@ -122,16 +124,17 @@ tasks:
       - support
     cmds:
       - go mod tidy
-      - go build -o ./datastar-website code/go/cmd/site/main.go
+      - go build -o ./datastar-website "site/cmd/site/main.go"
 
   deploy:
     method: none
     deps:
+      - support
     cmds:
       - fly deploy --local-only
 
   test:
-    dir: code/go/site/smoketests
+    dir: site/smoketests
     deps:
       - support
     cmds:

VERSION

@@ -1 +1 @@
-0.20.1
+0.21.0-beta1

code/go/cmd/tsbuild/main.go → build/cmd/build/main.go

@@ -4,7 +4,7 @@ import (
 	"log"
 	"time"
 
-	"github.com/starfederation/datastar/code/go/tsbuild"
+	build "github.com/starfederation/datastar/build"
 )
 
 func main() {
@@ -14,7 +14,7 @@ func main() {
 		log.Printf("Datastar built in %s", time.Since(start))
 	}()
 
-	if err := tsbuild.Build(); err != nil {
+	if err := build.Build(); err != nil {
 		log.Fatal(err)
 	}
 

code/go/tsbuild/consts.go → build/consts.go

@@ -1,4 +1,4 @@
-package tsbuild
+package build
 
 import (
 	"time"

code/go/tsbuild/consts_datastar_readme.qtpl → build/consts_datastar_readme.qtpl

@@ -6,20 +6,29 @@
 ![Discord](https://img.shields.io/discord/1296224603642925098)
 ![GitHub Repo stars](https://img.shields.io/github/stars/starfederation/datastar?style=flat)
 
-<p align="center"><img width="200" src="https://media.githubusercontent.com/media/starfederation/datastar/refs/heads/main/code/go/site/static/images/rocket.gif"></p>
+<p align="center"><img width="200" src="https://media.githubusercontent.com/media/starfederation/datastar/refs/heads/main/site/static/images/rocket.gif"></p>
 
 # Datastar
 
-### A real-time hypermedia framework.
+### The hypermedia framework.
 
-Datastar helps you build real-time web applications with the simplicity of server-side rendering and the power of a full-stack SPA framework.
+Datastar helps you build reactive web applications with the simplicity of server-side rendering and the power of a full-stack SPA framework.
+
+Getting started is as easy as adding a single script tag to your HTML.
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar/bundles/datastar.js"></script>
+```
+
+Then start adding frontend reactivity using declarative `data-*` attributes.
+Datastar helps you build reactive web applications with the simplicity of server-side rendering and the power of a full-stack SPA framework.
 
 Here’s what frontend reactivity looks like using Datastar:
 
 ```html
-<input data-bind="input" type="text">
-<div data-text="$input.toUpperCase()"></div>
-<button data-on-click="@post('/endpoint')">Save</button>
+<input data-bind-input type="text">
+<div data-text="input.value.toUpperCase()"></div>
+<button data-on-click="sse('/endpoint', {method: 'post'})">Save</button>
 ```
 
 Visit the [Datastar Website »](https://data-star.dev/)

code/go/tsbuild/run.go → build/run.go

@@ -1,4 +1,4 @@
-package tsbuild
+package build
 
 import (
 	"compress/gzip"
@@ -42,7 +42,7 @@ func extractVersion() (string, error) {
 	version := strings.TrimSpace(string(versionBytes))
 
 	// Write out the version to the version file.
-	versionPath := "code/ts/library/src/engine/version.ts"
+	versionPath := "library/src/engine/version.ts"
 	versionContents := fmt.Sprintf("export const VERSION = '%s';\n", version)
 	if err := os.WriteFile(versionPath, []byte(versionContents), 0644); err != nil {
 		return "", fmt.Errorf("error writing version file: %w", err)
@@ -60,8 +60,8 @@ func createBundles() error {
 
 	result := api.Build(api.BuildOptions{
 		EntryPoints: []string{
-			"code/ts/library/src/bundles/datastar-core.ts",
-			"code/ts/library/src/bundles/datastar.ts",
+			"library/src/bundles/datastar-core.ts",
+			"library/src/bundles/datastar.ts",
 		},
 		Outdir:            outDir,
 		Bundle:            true,
@@ -127,15 +127,15 @@ func writeOutConsts(version string) error {
 	})
 
 	templates := map[string]func(data *ConstTemplateData) string{
-		"README.md":                                    datastarREADME,
-		"code/ts/library/README.md":                    datastarREADME,
-		"code/ts/library/src/engine/consts.ts":         datastarClientConsts,
-		"code/ts/library/package.json":                 datastarClientPackageJSON,
-		"code/go/sdk/consts.go":                        goConsts,
-		"code/dotnet/sdk/src/Consts.fs":                dotnetConsts,
-		"code/php/sdk/src/Consts.php":                  phpConsts,
-		"code/php/sdk/src/enums/EventType.php":         phpEventType,
-		"code/php/sdk/src/enums/FragmentMergeMode.php": phpFragmentMergeMode,
+		"README.md":                               datastarREADME,
+		"library/README.md":                       datastarREADME,
+		"library/src/engine/consts.ts":            datastarClientConsts,
+		"library/package.json":                    datastarClientPackageJSON,
+		"sdk/go/consts.go":                        goConsts,
+		"sdk/dotnet/src/Consts.fs":                dotnetConsts,
+		"sdk/php/src/Consts.php":                  phpConsts,
+		"sdk/php/src/enums/EventType.php":         phpEventType,
+		"sdk/php/src/enums/FragmentMergeMode.php": phpFragmentMergeMode,
 	}
 
 	for path, tmplFn := range templates {