Add example using vite

[nmrshll]

closes #172

[StuartHarris]

Thank you @nmrshll for contributing this. We'd be happy to merge it once a few things are sorted.

• it looks to me like this belongs to the simple_counter example rather than the counter example, so it should be moved
• The view model property to display the count should therefore be .count rather than .text — e.g. <button>{view.getView().count}</button>
• I couldn't see where the shared library is being built (maybe I'm missing something). Maybe the package.json scripts should look something like this?

  "scripts": {
    "dev": "pnpm run wasm:build && vite",
    "build": "pnpm run wasm:build && tsc && vite build",
    "preview": "vite preview",
    "wasm:build": "cd ../shared && wasm-pack build --target web"
  },

[StuartHarris]

I think all this belongs in simple_counter, rather than counter

[StuartHarris]

Do we need to build the shared lib?

  "scripts": {
    "dev": "pnpm run wasm:build && vite",
    "build": "pnpm run wasm:build && tsc && vite build",
    "preview": "vite preview",
    "wasm:build": "cd ../shared && wasm-pack build --target web"
  }

[StuartHarris]

<button>{view.getView().count}</button>

[StuartHarris]

When I tested it, there was no styling. Any chance you could bring that in too? Thank you!

[nmrshll]

Thanks for the review !
Sure thing, I'll make those few changes.
(I think I entirely missed that there were two different counter examples and mixed them up)

[nmrshll]

I've done those changes you needed:

• move to example simple_counter
• make package.json scripts build the shared wasm library
• bring back the styling I had stripped before (btw, first time I use bulma, but it seems great for keeping small examples simple)

Let me know if it looks better now (whenever you've got the time, no rush)

[StuartHarris]

Hey @nmrshll this looks great now! Thank you for contributing. There's just a couple of minor things. The first is that we'll need a .gitignore file to exclude node_modules.

The second is that the update() function initialises the Wasm module every time it is called. It looks like this is idempotent, and so probably safe, but it does mean that there could be a slight delay (especially on poor bandwidth connections) when a button is first pressed, while the wasm is downloaded and initialised. I think a better approach would be to initialise the wasm module in index.tsx, instead. It looks like top-level await is supported so this should work...

import initCore from "shared";
await initCore();

Other than that would be happy to merge. Thank you.