1.0.0-RC.1

Author: bencroker

CHANGELOG.md

@@ -1,11 +1,14 @@
 # Release Notes for Datastar
 
-## 1.0.0-RC.1 - Unreleased
+## 1.0.0-RC.1 - 2025-07-15
 
-- The plugin now requires Datastar [v1.0.0-RC.1](https://github.com/starfederation/datastar/releases/tag/v1.0.0-RC.1).
+- The plugin now requires Datastar [1.0.0-RC.1](https://github.com/starfederation/datastar/releases/tag/v1.0.0-RC.1) or later, and Craft CMS 5.4.0 or later.
+- Added the `patchsignals` Twig tag.
+- Added the `removeelements` Twig tag.
 - Renamed the `fragments` Twig tag to `patchelements`.
-- Renamed the `removefragments` Twig tag to `removeelements`.
 - Renamed the `defaultFragmentOptions` config setting to `defaultElementOptions`.
+- Removed the `datastar.signals()` and `datastar.signalsFromClass()` methods. Use the `|json_encode` filter instead.
+- Removed the `SignalsModel` class. The `signals` variable passed into Datastar templates is now a regular array. Use the `patchsignals` Twig tag to update and remove signals.
 
 ## 1.0.0-beta.9 - 2025-03-29
 

README.md

@@ -27,14 +27,14 @@ This plugin is licensed for free under the MIT License.
 
 ## Requirements
 
-This plugin requires [Craft CMS](https://craftcms.com/) 5.0.0 or later.
+This plugin requires [Craft CMS](https://craftcms.com/) 5.4.0 or later.
 
 ## Installation
 
 To install the plugin, search for “Datastar” in the Craft Plugin Store, or install manually using composer.
 
 ```shell
-composer require putyourlightson/craft-datastar:^1.0.0-beta.1
+composer require putyourlightson/craft-datastar:^1.0.0-RC.1
 ```
 
 ---

composer.json

@@ -6,7 +6,7 @@
   "license": "mit",
   "require": {
     "php": "^8.2",
-    "craftcms/cms": "^5.0",
+    "craftcms/cms": "^5.4",
     "putyourlightson/craft-datastar-module": "^1.0.0-RC.1"
   },
   "require-dev": {

examples/_datastar/save-entry.twig

@@ -1,4 +1,4 @@
-{% set delay = signals.delay * 1000 %}
+{% set delay = (signals.delay ?? 1) * 1000 %}
 {% set message = 'Hello, world!' %}
 
 {% for i in range(0, message|length - 1) %}

examples/_datastar/hello-world.twig renamed to examples/_partials/hello-world.twig

@@ -0,0 +1,58 @@
+{% set response = datastar.runAction('entries/save-entry', {
+    entryId: signals.entryId,
+    title: signals.title,
+}) %}
+
+{% if response.isSuccessful %}
+    {% patchelements %}
+        {# https://daisyui.com/components/alert/#success-color #}
+        <div id="alert" data-show="alert.value" role="alert" class="alert alert-success">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 shrink-0 stroke-current"
+                fill="none"
+                viewBox="0 0 24 24">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            <span>
+                Entry successfully saved!
+            </span>
+        </div>
+        <div id="title-{{ signals.entryId }}">
+            {{ signals.title }}
+        </div>
+        <button id="edit-{{ signals.entryId }}" data-on-click="entryId.value = {{ signals.entryId }}; title..value = '{{ signals.title }}'" data-show="entryId.value != {{ signals.entryId }}" class="btn">
+            Edit
+        </button>
+    {% endpatchelements %}
+    {% patchsignals {entryId: 0} %}
+{% else %}
+    {% patchelements %}
+        {# https://daisyui.com/components/alert/#error-color #}
+        <div id="alert" data-show="alert.value" role="alert" class="alert alert-error">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 shrink-0 stroke-current"
+                fill="none"
+                viewBox="0 0 24 24">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            <span>
+                Error!
+                {% for error in response.data.errors %}
+                    {{ error|first }}
+                {% endfor %}
+            </span>
+        </div>
+    {% endpatchelements %}
+{% endif %}
+
+{% patchsignals {alert: true} %}

examples/_partials/save-entry.twig

@@ -10,7 +10,7 @@
             <h1 class="text-gray-900 dark:text-white text-3xl font-semibold">
                 Datastar SDK Demo
             </h1>
-            <img src="https://data-star.dev/static/images/rocket.png" alt="Rocket" width="64" height="64"/>
+            <img src="https://putyourlightson.com/assets/logos/datastar.svg" alt="Datastar Logo" width="64" height="64"/>
         </div>
         <p class="mt-2">
             SSE events will be streamed from the backend to the frontend.
@@ -21,7 +21,7 @@
             </label>
             <input data-bind-delay id="delay" type="number" step="100" min="0" class="w-36 rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"/>
         </div>
-        <button data-on-click="{{ datastar.get('_datastar/hello-world') }}" class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer">
+        <button data-on-click="{{ datastar.get('_partials/hello-world') }}" class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer">
             Start
         </button>
     </div>

examples/hello-world.twig

@@ -26,24 +26,24 @@
                         <tr>
                             <td>{{ entry.id }}</td>
                             <td>
-                                <div data-show="entryId.value != {{ entry.id }}">
+                                <div data-show="$entryId != {{ entry.id }}">
                                     <div id="title-{{ entry.id }}">
                                         {{ entry.title }}
                                     </div>
                                 </div>
-                                <div data-show="entryId.value == {{ entry.id }}" style="display: none">
-                                    <input data-bind-title data-on-keydown="evt.key == 'Enter' && save.value.click()" type="text" class="input input-bordered w-full">
+                                <div data-show="$entryId == {{ entry.id }}" style="display: none">
+                                    <input data-bind-title data-on-keydown="evt.key == 'Enter' && confirm('Are you sure?') && {{ datastar.post('_partials/save-entry.twig') }}" type="text" class="input input-bordered w-full">
                                 </div>
                             </td>
                             <td>{{ entry.author.username }}</td>
                             <td>
-                                <button id="edit-{{ entry.id }}" data-on-click="alert.value = false; entryId.value = {{ entry.id }}; title.value = '{{ entry.title }}'" data-show="entryId.value != {{ entry.id }}" class="btn">
+                                <button id="edit-{{ entry.id }}" data-on-click="$alert = false; $entryId = {{ entry.id }}; $title = '{{ entry.title }}'" data-show="$entryId != {{ entry.id }}" class="btn">
                                     Edit
                                 </button>
-                                <button data-on-click="alert.value = false; entryId.value = 0" data-show="entryId.value == {{ entry.id }}" class="btn" style="display: none">
+                                <button data-on-click="$alert = false; $entryId = 0" data-show="$entryId == {{ entry.id }}" class="btn" style="display: none">
                                     Cancel
                                 </button>
-                                <button data-ref-save data-on-click="confirm('Are you sure?') && {{ datastar.post('_datastar/save-entry.twig') }}" data-show="entryId.value == {{ entry.id }}" class="btn btn-primary" style="display: none">
+                                <button data-on-click="confirm('Are you sure?') && {{ datastar.post('_partials/save-entry.twig') }}" data-show="$entryId == {{ entry.id }}" class="btn btn-primary" style="display: none">
                                     Save
                                 </button>
                             </td>

examples/inline-entry-editing.twig

@@ -9,15 +9,15 @@
 <body>
     {# https://tailwindcss.com/docs/container #}
     <div class="container mx-auto max-w-xl py-16">
-        <div data-signals="{reversed: ''}" data-on-reverse__window="reversed.value = evt.detail.value" class="flex flex-col space-y-8">
+        <div data-signals="{reversed: ''}" data-on-reverse__window="$reversed = evt.detail.value" class="flex flex-col space-y-8">
             <div class="space-y-2">
                 <label>Name</label>
-                <input data-bind-name data-on-input="reverse(name.value)" class="input input-bordered w-full">
+                <input data-bind-name data-on-input="reverse($name)" class="input input-bordered w-full">
             </div>
             <div class="space-y-2">
                 <label>Reversed</label>
                 <div class="alert h-14">
-                    <span data-text="reversed.value"></span>
+                    <span data-text="$reversed"></span>
                 </div>
             </div>
         </div>

examples/two-way-binding-function.twig

@@ -17,12 +17,12 @@
             <div class="space-y-2">
                 <label>Reversed</label>
                 <div class="alert h-14">
-                    <span data-text="reversed.value"></span>
+                    <span data-text="$reversed"></span>
                 </div>
             </div>
             <reverse-component
-                data-attributes-name="name.value"
-                data-on-reverse="reversed.value = evt.detail.value"
+                data-attributes-name="$name"
+                data-on-reverse="$reversed = evt.detail.value"
             ></reverse-component>
         </div>
     </div>