crux icon indicating copy to clipboard operation
crux copied to clipboard

Add example using vite

Open nmrshll opened this issue 1 year ago • 5 comments

closes #172

nmrshll avatar Jan 08 '24 11:01 nmrshll

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 avatar Jan 10 '24 09:01 StuartHarris

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

StuartHarris avatar Jan 10 '24 09:01 StuartHarris

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 avatar Feb 02 '24 19:02 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)

nmrshll avatar Feb 13 '24 13:02 nmrshll

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.

StuartHarris avatar Feb 19 '24 08:02 StuartHarris