85
edits
Building with Parenscript and Preact: Difference between revisions
no edit summary
No edit summary |
No edit summary |
||
| Line 80: | Line 80: | ||
The game worked, but there was occasionally a small delay of a second or two before the JS started running when nothing appeared on the page; from what I understand, the usual way to solve that these days is by doing server-side React rendering and then re-hydrating it on the frontend once your code starts executing. | The game worked, but there was occasionally a small delay of a second or two before the JS started running when nothing appeared on the page; from what I understand, the usual way to solve that these days is by doing server-side React rendering and then re-hydrating it on the frontend once your code starts executing. | ||
I found a link to [https://github.com/vitejs/vite-plugin-vue/blob/main/playground/ssr-vue/prerender.js this] in the Vite docs, which is a pretty rudimentary way to do pre-rendering using Vue-- it basically renders the Vue stuff to a string, and then does a find-and-replace on a special comment in HTML sources after the build finished. Seems pretty hacky to me, but it seems to be the way things are done so I whipped up [https://github.com/SuperDisk/cardgames/blob/master/frontend/prerender-hack.js my own version] which does something similar, albeit in a more grotesquely ugly way. | I found a link to [https://github.com/vitejs/vite-plugin-vue/blob/main/playground/ssr-vue/prerender.js this] in the Vite docs, which is a pretty rudimentary way to do pre-rendering using Vue-- it basically renders the Vue stuff to a string, and then does a find-and-replace on a special comment in HTML sources after the build finished. Seems pretty hacky to me, but it seems to be the way things are done, so I whipped up [https://github.com/SuperDisk/cardgames/blob/master/frontend/prerender-hack.js my own version] which does something similar, albeit in a more grotesquely ugly way. | ||
And that's pretty much it! Reactive layout, smooth animation, incremental Lisp-style development, and pre-rendering using just Parenscript, GSAP and Preact, all about 50kb gzipped. | And that's pretty much it! Reactive layout, smooth animation, incremental Lisp-style development, and pre-rendering using just Parenscript, GSAP and Preact, all about 50kb gzipped. | ||