data-signals - JSON versus JSON Object Notation #390

chrismalek · 2024-12-17T03:36:46Z

chrismalek
Dec 17, 2024

I am wrapping my head around datastar after looking heavily at HTMX then seeing a recent interview about all the issues with HTMX and how datastar can potentially solve them. I got to a point where I was struggling trying to understand how to structure all my routes and it was getting complex for a social media (sort of) site I was designing. I looked at datastar before but to be honest I looked at the site and was just confused what it was.

For the past couple of days I have been staring at the documentation and looking at some of the code. I am starting to get some mental breakthroughs on the library but I still feel like I am fumbling on how to structure the code, routes, and concepts. I am getting there.

The docs can use some work. I am happy to contribute, and if I get some time, I will publish my hello world examples with some explanations.

I don't think I have enough knowledge yet to contribute but my newbie attitude could help.

Some background:

I use Go
I prefer https://www.gomponents.com over Templ
I have been using Bulma https://willoma.github.io/bulma-gomponents/ because I find it a very good starter for my needs (mostly crud apps). Bulma has some nice primitives.
I have been using Echo instead of standard lib (I know I know use standard lib but I am lazy and hello world apps are easier with echo).
The gonads starter is just too complex for me to learn with.
- While I understand NATs primitives, I don't need for that and just trying to strip out all the stuff to get some core principles with datasar.

Long...introduction to my question..

Looking at this example from the docs

<div data-signals="{foo: {bar: 1, baz: 2}}"></div>

That is in Javascript Object notation.

My templating is outputing this with HTML encodings on the JSON. So think that is tripping up datastar as it cannot find my isValid single as i see a message in the console.

<div data-signals="{"userName":"","isValid":false,"validationMessage":"","lastServerEventMessage":""}">

Does it have to be in Javascript object notation like this?

<div data-signals="{userName:'',isValid:false,validationMessage:'',lastServerEventMessage:''}">

I am getting this console error:

Here is the HTML source which is just some hello world stuff

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/gh/starfederation/datastar@develop/bundles/datastar.js" type="module"></script>
        <section class="section">
            <div class="content">
                <div class="box">
                    <h1 class="title">DataStar Learning App</h1>
                </div>
                <div class="block">
                    <div data-signals="{&#34;userName&#34;:&#34;&#34;,&#34;isValid&#34;:false,&#34;validationMessage&#34;:&#34;&#34;,&#34;lastServerEventMessage&#34;:&#34;&#34;}">
                        <h1 class="title">User Name Examples</h1>
                        <div class="box">
                            <div class="field">
                                <label class="label">User Name</label>
                                <div class="control">
                                    <input class="input" type="text" data-bind="userName" data-on-keydown__debounce.500ms="sse(&#39;/sse/userName&#39;,{method:&#39;get&#39;})">
                                </div>
                                <p class="is-info help">This is the user name which is bound to the data-star userName data attribute</p>
                                <p class="help is-danger" id="validationMessage"></p>
                            </div>
                            <button class="button is-primary" data-attributes-disabled="isValid.value == false">Submit</button>
                        </div>
                        <div class="card">
                            <header class="card-header">
                                <p class="card-header-title">User Name Signal Value</p>
                            </header>
                            <div class="card-content">
                                <p class="help is-info">This HTML tag below is bound to the user name signal and is interpreted locally by the browser and declaritively updated</p>
                                <span data-show="userName.value">The value of the user name is: </span>
                                <span data-text="userName.value"></span>
                                <div data-text="isValid"></div>
                            </div>
                            <footer class="card-footer">
                                <p class="card-footer-item" data-text="lastServerEventMessage.value"></p>
                            </footer>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>

Answered by bencroker

Dec 17, 2024

I think the Javascript object notation is required.

You can use JSON syntax, which most if not all templating languages have support for.

My mistake was that I had this:
<div data-text="isValid"></div>

If you update to 0.21.x, you’ll get helpful error messages that try to point you towards a solution.

View full answer

chrismalek · 2024-12-17T04:14:15Z

chrismalek
Dec 17, 2024
Author

I converted the data-signals to Javascript object notation but I am still getting a console error.

I see some note in the document about camel case and kebab case but I must be reading something incorrectly, or I have some really dumb mistake on my part.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/gh/starfederation/datastar@develop/bundles/datastar.js" type="module"></script>
        <section class="section">
            <div class="content">
                <div class="box">
                    <h1 class="title">DataStar Learning App</h1>
                </div>
                <div class="block">
                    <div data-signals="{userName:'', isValid:false, validationMessage:'', lastServerEventMessage:''}"></div>
                    <h1 class="title">User Name Examples</h1>
                    <div class="box">
                        <div class="field">
                            <label class="label">User Name</label>
                            <div class="control">
                                <input class="input" type="text" data-bind="userName" data-on-keydown__debounce.500ms="sse(&#39;/sse/userName&#39;,{method:&#39;get&#39;})">
                            </div>
                            <p class="help is-info">This is the user name which is bound to the data-star userName data attribute</p>
                            <p class="help is-danger" id="validationMessage"></p>
                        </div>
                        <button class="button is-primary" data-attributes-disabled="isValid.value == false">Submit</button>
                    </div>
                    <div class="card">
                        <header class="card-header">
                            <p class="card-header-title">User Name Signal Value</p>
                        </header>
                        <div class="card-content">
                            <p class="help is-info">This HTML tag below is bound to the user name signal and is interpreted locally by the browser and declaritively updated</p>
                            <span data-show="userName.value">The value of the user name is: </span>
                            <span data-text="userName.value"></span>
                            <div data-text="isValid"></div>
                        </div>
                        <footer class="card-footer">
                            <p class="card-footer-item" data-text="lastServerEventMessage.value"></p>
                        </footer>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>

0 replies

chrismalek · 2024-12-17T04:18:57Z

chrismalek
Dec 17, 2024
Author

And yes the shear fact of me typing my dumb mistake out in the public square made me see my own mistake.

I think the Javascript object notation is required.

My mistake was that I had this:

<div data-text="isValid"></div>

Instead of this:

<div data-text="isValid.value"></div>

1 reply

delaneyj Dec 17, 2024
Maintainer

<div data-text="isValid.value"></div> is 💯 valid in 0.21.3. This is a deeper conversation, but most of this has been answer in the discord. https://discord.com/channels/1296224603642925098/1317639665456517303 come join the Discord and we'll be happy to step through what's going on.

If you like gomponents you might enjoy my https://github.com/delaneyj/gostar which is a typesafe fluent take on gomponents.

bencroker · 2024-12-17T12:34:15Z

bencroker
Dec 17, 2024
Maintainer

I think the Javascript object notation is required.

You can use JSON syntax, which most if not all templating languages have support for.

My mistake was that I had this:
<div data-text="isValid"></div>

If you update to 0.21.x, you’ll get helpful error messages that try to point you towards a solution.

0 replies

chrismalek · 2024-12-17T15:07:27Z

chrismalek
Dec 17, 2024
Author

@delaneyj I will check out gostar and see how it compares to gomponents. I think I saw you (or someone) recommend on that on a reddit thread a while back and I looked at it but was already deep into gomponents. Let me look again.

@bencroker Oh...I see was was studying the docs last week and a major release came out which changed the naming on some of those. That may be why I was having a hard time. I was thinking the site changed in some subtle ways and I just thought I was crazy.

I am assuming the CDN is always outputing the latest release. Since I am just toying around trying to get my bearing I hitting the CDN.

1 reply

bencroker Dec 17, 2024
Maintainer

The CDN can take a bit of time to catch up, but it appears to be up to date. You can use https://cdn.jsdelivr.net/gh/starfederation/datastar/bundles/ to be sure.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

data-signals - JSON versus JSON Object Notation #390

{{title}}

Replies: 4 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

data-signals - JSON versus JSON Object Notation #390

chrismalek Dec 17, 2024

Replies: 4 comments · 2 replies

chrismalek Dec 17, 2024 Author

chrismalek Dec 17, 2024 Author

delaneyj Dec 17, 2024 Maintainer

bencroker Dec 17, 2024 Maintainer

chrismalek Dec 17, 2024 Author

bencroker Dec 17, 2024 Maintainer

chrismalek
Dec 17, 2024

Replies: 4 comments 2 replies

chrismalek
Dec 17, 2024
Author

chrismalek
Dec 17, 2024
Author

delaneyj Dec 17, 2024
Maintainer

bencroker
Dec 17, 2024
Maintainer

chrismalek
Dec 17, 2024
Author

bencroker Dec 17, 2024
Maintainer