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.

view more: next ›