Update examples

putyourlightson · Dec 10, 2024 · bf62ac9 · bf62ac9
1 parent e57db41
commit bf62ac9
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 75 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Release Notes for Datastar
 
+## 1.0.0-beta.1 - Unreleased
+
+- Require Datastar 0.21.3.
+
 ## 1.0.0-alpha.3 - 2024-11-26
 
 - Require Datastar 0.20.1.

diff --git a/README.md b/README.md
@@ -5,11 +5,11 @@
 
 # Datastar Plugin for Craft CMS
 
-### A real-time, template-driven hypermedia framework for Craft CMS.
+### A reactive, template-driven hypermedia framework for Craft CMS.
 
-**This plugin is in alpha and its API may change.**
+**This plugin is in beta and its API may change.**
 
-This plugin integrates the [Datastar framework](https://data-star.dev/) into [Craft CMS](https://craftcms.com/), allowing you to create real-time front-ends driven by Twig templates. It aims to replace the need for front-end frameworks such as React, Vue.js and Alpine.js + htmx, and instead lets you manage state and run logic all within your Twig templates.
+This plugin integrates [Datastar](https://data-star.dev/) with [Craft CMS](https://craftcms.com/), allowing you to create reactive frontends driven by Twig templates. It aims to replace the need for front-end frameworks such as React, Vue.js and Alpine.js + htmx, and instead lets you manage state and run logic within your Twig templates.
 
 With Datastar, you have the ability to define state and manipulate the DOM in real-time on the front-end, while modify the DOM with templates rendered on the back-end. Use-cases:
 
@@ -38,7 +38,7 @@ This plugin requires [Craft CMS](https://craftcms.com/) 5.0.0 or later.
 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-alpha.2
+composer require putyourlightson/craft-datastar:^1.0.0-beta.1
 ```
 
 ---

diff --git a/composer.json b/composer.json
@@ -1,13 +1,13 @@
 {
   "name": "putyourlightson/craft-datastar",
   "description": "A real-time, template-driven hypermedia framework for Craft.",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-beta.1",
   "type": "craft-plugin",
   "license": "mit",
   "require": {
     "php": "^8.2",
     "craftcms/cms": "^5.0",
-    "putyourlightson/craft-datastar-module": "1.0.0-alpha.3"
+    "putyourlightson/craft-datastar-module": "1.0.0-beta.1"
   },
   "require-dev": {
     "craftcms/ecs": "dev-main",

diff --git a/examples/_datastar/save-entry.twig b/examples/_datastar/save-entry.twig
@@ -0,0 +1,58 @@
+{% set response = datastar.runAction('entries/save-entry', {
+    entryId: signals.entryId,
+    title: signals.title,
+}) %}
+
+{% if response.isSuccessful %}
+    {% fragment %}
+        {# 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>
+    {% endfragment %}
+    {% do signals.entryId(0) %}
+{% else %}
+    {% fragment %}
+        {# 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>
+    {% endfragment %}
+{% endif %}
+
+{% do signals.alert(true) %}
diff --git a/examples/_spark/save-entry.twig b/examples/_spark/save-entry.twig
diff --git a/examples/inline-entry-editing.twig b/examples/inline-entry-editing.twig
@@ -12,7 +12,7 @@
         <div id="alert"></div>
         {# https://daisyui.com/components/table/ #}
         <div class="overflow-x-auto mt-4">
-            <table data-store="{ alert: false, entryId: 0, title: '' }" class="table table-pin-rows">
+            <table data-signals="{alert: false, entryId: 0}" class="table table-pin-rows">
                 <thead>
                     <tr>
                         <th class="w-10">ID</th>
@@ -22,28 +22,28 @@
                     </tr>
                 </thead>
                 <tbody>
-                    {% for entry in craft.entries.all() %}
+                    {% for entry in craft.entries.section('listings').all() %}
                         <tr>
                             <td>{{ entry.id }}</td>
                             <td>
-                                <div data-show="$entryId != {{ entry.id }}">
+                                <div data-show="entryId.value != {{ entry.id }}">
                                     <div id="title-{{ entry.id }}">
                                         {{ entry.title }}
                                     </div>
                                 </div>
-                                <div data-show="$entryId == {{ entry.id }}" style="display: none">
-                                    <input data-on-keydown.key_enter="~save.click()" type="text" data-model="title" class="input input-bordered w-full">
+                                <div data-show="entryId.value == {{ entry.id }}" style="display: none">
+                                    <input data-bind-title data-on-keydown:key_enter="save.value.click()" 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 = false; $entryId = {{ entry.id }}; $title = '{{ entry.title }}'" data-show="$entryId != {{ entry.id }}" class="btn">
+                                <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">
                                     Edit
                                 </button>
-                                <button data-on-click="$alert = false; $entryId = 0" data-show="$entryId == {{ entry.id }}" class="btn" style="display: none">
+                                <button data-on-click="alert.value = false; entryId.value = 0; this.value = title.value" data-show="entryId.value == {{ entry.id }}" class="btn" style="display: none">
                                     Cancel
                                 </button>
-                                <button data-ref="save" data-on-click="confirm('Are you sure?') && {{ datastar('_datastar/save-entry.twig', method: 'post') }}" data-show="$entryId == {{ entry.id }}" class="btn btn-primary" style="display: none">
+                                <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">
                                     Save
                                 </button>
                             </td>

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

diff --git a/examples/two-way-binding-web-component.twig b/examples/two-way-binding-web-component.twig
@@ -9,20 +9,20 @@
 <body>
     {# https://tailwindcss.com/docs/container #}
     <div class="container mx-auto max-w-xl py-16">
-        <div data-store="{ name: '', reversed: '' }" class="flex flex-col space-y-8">
+        <div data-signals="{reversed: ''}" class="flex flex-col space-y-8">
             <div class="space-y-2">
                 <label>Name</label>
-                <input data-model="name" class="input input-bordered w-full">
+                <input data-bind-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"></span>
+                    <span data-text="reversed.value"></span>
                 </div>
             </div>
             <reverse-component
-                data-bind-name="$name"
-                data-on-reverse="$reversed = evt.detail.value"
+                data-attributes-name="name.value"
+                data-on-reverse="reversed.value = evt.detail.value"
             ></reverse-component>
         </div>
     </div>