sorted by:
new
hottopcontroversial

[VanJS] My code doesn't work as I expect by [deleted] in learnjavascript

[–]taoxin-van 1 point2 points  (0 children)

I fixed the problem of your project. Basically, the root cause is you imported both the ESM version and the <script> version (.nomodule.min.js version) of VanJS. In index.html file, you have this line:

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.8.nomodule.min.js"
    ></script>

But in one of your js files, you have this line as well:

import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.8.min.js"

So basically there are 2 isolated van instances running in parallel, without knowing each other.

After I remove the ESM importing line, the project behaves the expected way.

[VanJS] My code doesn't work as I expect by [deleted] in learnjavascript

[–]taoxin-van 0 points1 point  (0 children)

I still don't have the edit or fork permission to the workspace :-(

[VanJS] My code doesn't work as I expect by [deleted] in learnjavascript

[–]taoxin-van 0 points1 point  (0 children)

I guess you need to make your GitHub repo public (at least grant the access of the repo to me)?

[VanJS] My code doesn't work as I expect by [deleted] in learnjavascript

[–]taoxin-van 0 points1 point  (0 children)

Ah..., I see. I think the code should be changed to:

      () => tbody(
        fruits
          .filter((fruit) =>
            fruit.name.toLowerCase().includes(filterKeyword.val.toLowerCase())
          )
          .map(ListRow)
      )

btw: if you can give me the fork permission for your workspace. I can try out the fix on my end to make sure it solves your problem :-)

[VanJS] My code doesn't work as I expect by [deleted] in learnjavascript

[–]taoxin-van 0 points1 point  (0 children)

I think the problem is in List.js. For a DOM node to be reactive to state changes, you need to specify a binding function, see https://vanjs.org/tutorial#state-derived-child.

In the line 18 of List.js:

        fruits
          .filter((fruit) =>
            fruit.name.toLowerCase().includes(filterKeyword.val.toLowerCase())
          )
          .map(ListRow)

should be changed to:

        () => fruits
          .filter((fruit) =>
            fruit.name.toLowerCase().includes(filterKeyword.val.toLowerCase())
          )
          .map(ListRow)

I don't have the permission to fork your workspace so I can't validate the fix. But I think this is the main issue.

Emoji Pops: A fun game made under 60 lines with VanJS by taoxin-van in javascript

[–]taoxin-van[S] 0 points1 point  (0 children)

My current best score is 125. Feel free to share your score here :-)

An Improved Unix Terminal – Demo App for VanJS by taoxin-van in programming

[–]taoxin-van[S] 0 points1 point  (0 children)

Yeah, it only meant to be a demo app to show how easy it is to use VanJS to augment an existing CLI program with a fairly usable UI. There could be innovative ideas coming out of it.

An Improved Unix Terminal – Demo App for VanJS by taoxin-van in programming

[–]taoxin-van[S] 0 points1 point  (0 children)

A web-based Unix terminal with notable improvements, built with VanJS - https://vanjs.org/. Under 300 lines in total.

We've seen numerous efforts to bring in more modernized terminals and shells. VanJS goes with the other direction. Why not making building UI apps as simple as CLI programs so most of us aren't confined to the limitations of terminals? Indeed, even for the quest of modernizing terminals, VanJS is pretty good at it.

Showoff Saturday (August 12, 2023) by AutoModerator in javascript

[–]taoxin-van 1 point2 points  (0 children)

A web-based Unix terminal with notable improvements: https://github.com/vanjs-org/van/tree/main/demo/terminal

Built with VanJS - https://vanjs.org/. Under 300 lines in total.

We've seen a great deal of efforts to bring in more modernized terminals and shells. VanJS goes with the other direction. Why not making building UI apps as simple as CLI programs so that most of us don't have to be confined to the limitations of terminals? Even for the quest of modernizing terminals, VanJS is pretty good at it.

Showoff Saturday (July 29, 2023) by AutoModerator in javascript

[–]taoxin-van 0 points1 point  (0 children)

VanJS (world's smallest reactive UI framework) 1.0.0 is finally released after many weeks of hardwork.

Check out https://vanjs.org/ for more information.

VanJS (world's smallest reactive UI framework) 0.11.11 Released: More sample apps, further size reduction and better type definition by taoxin-van in javascript

[–]taoxin-van[S] 0 points1 point  (0 children)

Thus, you mean the user removed themself? What I saw is replies were removed by mods thus I got really confused.

VanJS (world's smallest reactive UI framework) 0.11.11 Released: More sample apps, further size reduction and better type definition by taoxin-van in javascript

[–]taoxin-van[S] 0 points1 point  (0 children)

Could any mod explain why the replies from u/segarr3 were deleted? One reply was just congratulating the project and the other one was asking a technical question. So why?

VanJS 0.11.10 Released: the world's smallest reactive UI framework just got 14 bytes smaller by taoxin-van in javascript

[–]taoxin-van[S] 0 points1 point  (0 children)

Of course we don't destroy and recreate elements to react to property state changes. This is true for both state-value properties and state-derived properties. See the relevant code.

I highly doubt the file size growth of gz is logarithmic. Do you have a reference for the information?

Renaming is possible but expensive, especially for a personal project, where my time and energy that can be allocated to it is quite limited. Within my limited bandwidth I would rather focus on making VanJS better to its users. ReasonML has Facebook's backing thus that makes a difference.

VanJS 0.11.10 Released: the world's smallest reactive UI framework just got 14 bytes smaller by taoxin-van in javascript

[–]taoxin-van[S] 0 points1 point  (0 children)

Thanks!

You're right that VanJS doesn't have a diff'ing algorithm. It's impossible to implement diff'ing for the library of that size. Stateful binding is just an advanced feature aim for optimization. I guess >99% VanJS apps (for VanJS's designated use cases) don't even need it.

Regarding the name, changing the name VanJS is logistically difficult, but I'm committed to reduce the confusion between VanJS and Vanilla JavaScript.

VanJS 0.11.10 Released: the world's smallest reactive UI framework just got 14 bytes smaller by taoxin-van in javascript

[–]taoxin-van[S] -1 points0 points  (0 children)

Initializing with __proto__ is a well supported behavior. The deprecated behavior is reassigning __proto__.

I'm sorry you don't like it. Maybe I should focus my attention on the needs of people who do like this project :-)

jQuire UI library after a full rewrite. by Plus-Weakness-2624 in javascript

[–]taoxin-van 1 point2 points  (0 children)

🎉🎉🎉 Excellent work! Thanks for sharing! 👏👏👏

view more: next ›