This Todo App is server rendered and client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in Val Town SQLite.
This "framework" is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix.
The trick is client-side importing the React component that you're server rendering. Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as modules importable by the browser.
The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val colocates the server-side loader and action with the React component we have to be careful to do all server-only imports (ie sqlite) dynamically inside the loader and action, so they only run server-side.
Not a fan of this line, as it will not survive forks. I think this val could be used instead: https://www.val.town/v/andreterron/inferRequestVal
Another option would be to do:
It is quite clean in my opinion, as it explicitely declares what the client is looking for (the module url)
Great ideas! Fixed!
I'm also going to copy what I mentioned on discord:
loaderandactioncould be merged (what about just usinghandler) ?Great idea! Feel free to fork this val and the framework val and fix em both, and send me the two PRs and I'd merge em!