Possible to use with ESM import?

[oelna]

Is it possible to import this as a module, maybe like so:

<script type="module">
    import { sb } from './sb.min.js';
</script>

Not important, but maybe something to implement at some point in the future, if it's not too much trouble. Liking the project and its philosophy very much so far!

[18alantom]

Thank you!

Right now nope. But yeah, I've planned to add it within a few updates.

Will need to check if it works properly with existing code (modules being async may cause unexpected behavior).

[oelna]

Thanks, that is good to know.

I played around with SB for a while today, but – having spent time with Vue before – encountered various dead ends. I wasn't sure whether I made mistakes, or maybe there's just limitations in SB I didn't know of. In my case it was hard to build around not being able to set HTML attributes/values, or have functions associated with specific strawberry objects. That made it kind of hard to group things by concern in Javascript.

I looked at the roadmap and saw your idea regarding attribute handling. Maybe I'll look into this again in the future.

Anyway, keep up the good work and thanks for the speedy reply!

[18alantom]

Thanks for trying it out!

encountered various dead ends

Can you tell me what they were? (besides the ones you've listed)

I'll have an idea of what's expected. If not directly adding it it into strawberry, I can add in the meta feature that makes it really convenient to do what's required.

I wasn't sure whether I made mistakes, or maybe there's just limitations in SB I didn't know of.

There are several limitations and broken features cause I'm still building the core out. Once I can build a small interactive app with it the, alpha tag can be dropped and it should be ready for wider use.

[oelna]

It's hard to point to individual aspects, but for example I did not get why computed properties would not work as expected

<div class="player">
  <span sb-mark="player.dex">x</span>
  <span sb-mark="player.str">y</span>
  <span sb-mark="player.res.fire">z</span>
  <span sb-mark="player.res.cold">z</span>
</div>

data.player = {
    'str': 20,
    'dex': function () { return 30; },
    'res': {
        'fire': 25,
        'cold': 15
    }
};

The lack of attribute support made it complicated to, let's say, toggle dialog visibility, or active/inactive states of elements.

And I could not wrap my mind around how I would use classes with Strawberry's reactivity. I often build small RPG interfaces to try things out, and classes map well to player characters and world objects, since they can have attributes, but also do things ("functions/methods"). If I init() a SB object ("data"), how would I associate actions with it?

Like if I make a event listener for a button, is it possible to have it call a function that is nested in the data object somewhere? I wasn't able to get a reference to the defend() method, but that may as well be me being to stupid, or a limitation of the Proxy approach.

data.player = {
    'str': 20,
    'dex': 30,
    'defend': function () { // do something }
};

Anyway, you don't have to answer or explain any of this, I don't mean to take up your time like this. But I guess you could take my feedback into account when at some point in the future you're writing up the docs about this stuff, or about the known limitations. Thanks for reading this!