Chat Logs

  1. phalethjust dump another 5k commits on top of those 15k pre-existing ones https://github.com/oven-sh/bun/tree/claude/phase-a-port
  2. bot<discord:blue> Lol
  3. bot<discord:blue> phaleth: [primate-run/primate] Pull request opened: #269 core: remove debug client-side console logs
  4. bot<discord:blue> Does this work in ssr?
  5. bot<discord:blue> Ah sorry, wrong pr, stupid phone
  6. bot<discord:blue> [primate-run/primate] Pull request opened: #271 website: reduce network dependency tree to lower latency
  7. bot<discord:blue> Meant this
  8. phalethyeah, that doesn't change anything server-side, it's a change in .svelte file
  9. bot<discord:blue> Yeah I know
  10. bot<discord:blue> But this is likely to fail in ssr
  11. bot<discord:blue> https://github.com/primate-run/primate/blob/master/apps/website/static/localStorage.ts#L8
  12. phaleththe theme changes just fine, that line of code works
  13. bot<discord:blue> Crazy
  14. phalethit's just a merge of two JS chunk into a single JS chunk client side
  15. phalethtwo JS chunks*
  16. bot<discord:blue> Did you try npx primate build & npx primate serve?
  17. bot<discord:blue> On your comp, I mean
  18. phalethI will try
  19. bot<discord:blue> Yeah I know, the only reason for that chunk is that localStorage doesn't exist on the global namespace in node
  20. phalethTypeError: localStorage.getItem is not a function
  21. phaleth at file:///home/user/primate/primate/apps/website/build/server.js:74:2010
  22. bot<discord:blue> Yup
  23. phalethok, so can we just not do that server side if it's only to change theme?
  24. phalethit's weird that it only shows on prod build
  25. bot<discord:blue> Yeah, ssr in inactive in dev
  26. phalethheh
  27. bot<discord:blue> Due to limitations in node, mostly
  28. bot<discord:blue> We should be able to get it reactivated since deno seems to be making good progress in custom loaders
  29. bot<discord:blue> Dunno about bun thougg
  30. phalethI mean the theme is stored in localStorage client side, so why bother with it server side anyway?
  31. phalethit's also detected client side
  32. bot<discord:blue> Yeah I agree, which is why this thing runs in a chunk
  33. bot<discord:blue> There's probably a better way to load it only in the client
  34. phalethyeah, I think so
  35. bot<discord:blue> We just need to not bundle it in in server code
  36. phalethyou can close that PR, I will try to come up with something else
  37. phalethso that means I should be able to eliminate two kind of fetch calls at once
  38. phalethif I figure out how anyway
  39. blueok, game's on
  40. blueI'll merge the other two things, then look at the third one we just discussed
  41. phalethok, cool
  42. phaletha fork bomb https://images4.imagebam.com/48/03/91/ME1CWZMC_o.png or so
  43. blue09:23 < phaleth> just dump another 5k commits on top of those 15k pre-existing ones https://github.com/oven-sh/bun/tree/claude/phase-a-port
  44. bluesumner losing his mind again and running a friggin hype train
  45. bluegosh this guy gets on my nerves
  46. bluewhat is this exe, phaleth?
  47. blueI figure we need some kind of localStorage in rcompat, phaleth
  48. bluethat offers setItem and getItem, and does absolutely nothing
  49. bluethe real way would be to not bundle this code at all on the server
  50. blueI mean, localStorage.ts
  51. bluebut that's the point of the chunk
  52. bluediff question, can we force esbuild to dechunk?
  53. bluethat would be awesome
  54. phaleththose exes are the kernel isolation thingies
  55. bluewhat kernel isolation
  56. phaleththe ones spawned by gvisor
  57. blueoh
  58. bluethat's terribly expensive ramwise, no?
  59. blueso one of our options is "splitting: false" on the client
  60. blueI personally never got the real point of chunking anyway so I'm inclined to consider this
  61. phalethblue: here are the new instructions on how to update primate website https://gitea.repopack.app/repopack/provision/src/branch/master/podman/deployments/primate-site.md#how-to-update-primate-website
  62. bluecan you try this in your PR, phaleth?
  63. bluego to packages/core/src/private/build/client/index.ts
  64. bluechange line 105 to false
  65. bluethen undo your change (put the import back in as a dynamic import)
  66. blueand run npx primate build && npx primate serve
  67. blue1) does it build
  68. blueand 2) does it dechunk?
  69. phalethyeah, but that means the first chunk won't be there and so overall hydration will become slower
  70. phalethtake a look at the picture on the PR
  71. bluehow do? there is the base bundle + the localStorage chunk
  72. bluesplitting: false will merge the localStorage chunk onto the base bundle
  73. bluehow so*
  74. blueso effectively chunk-L5MXQA3Q will disappear
  75. blueyou'll only have app.js
  76. bluealso don't forget to rebuild @primate/core
  77. phalethyeah, I know, but that chunk is big so it better stay chunked
  78. blue`npm run build` in packages/core, should be fast now with tsgo
  79. phalethotherwise the site will hydrate slower
  80. phalethI hope the app-whatever.js chunk is holding all the click events
  81. blueI have no idea why that chunk is so big. svelte/store is 18KiB???
  82. phalethI just ran npm run build million times in last three ours, it's fast
  83. blueanyway, if you're concerned about size, then your PR would be moot anyway
  84. blueI'd get rid of the splitting anyway
  85. phalethno, don't worry
  86. bluethat being said, svelte's wirable store pulling in 18 kilobytes of stuff is totally unacceptable
  87. bluedon't you agree?
  88. phalethwell if you can make the chunk-whatever.js smaller then sure I agree
  89. phalethif you can make any JS smaller then that'd be great
  90. bluewell technically speaking, stores in svelte are a very dumbed down contract
  91. blueessentially { subscribe() } is a store, iirc
  92. phalethcan just use props instead of store I think, just need to be bothered to pass them around
  93. blueI'm just surprised this is 18K
  94. phalethit's like react's context I think
  95. phalethall it boils down to is global JS vars
  96. blueso I asked the mind hive, and it came up with this
  97. blue"When esbuild splits that dynamic import into its own chunk, it has to make the chunk self-contained, so it bundles everything that chunk needs — including the Svelte runtime internals that writable depends on. In your main bundle, that runtime is already there, but the chunk can't assume that, so it duplicates it."
  98. blue"This is the classic chunk duplication problem with code splitting. The chunk doesn't know what's already loaded in the parent bundle."
  99. bluethat's fair and I'm inclined to believe the clanker here
  100. blueso could you try what I suggested? I'm betting the combined size won't be significantly larger -- localStorage.ts is roundabout 685 bytes
  101. phalethok, give me a few
  102. blueif what the clanker said is true, this is dumb on more than one level -- we don't wanna serve the svelte runtime twice
  103. bluebest case scenario we save 17KB + the extra HTTP request
  104. blueoh right, it's 685 bytes un=minified. I bet we're talking about much less later
  105. blueunminified*
  106. bluebeyond that, it's questionable design by svelte that writable depends on the svelte runtime, but ok
  107. blueI kinda get it, they wanna reuse their signal code or whatever they call it internally. still feels bit much for a signal lib, 17KB. maybe I'm overly optimistic here
  108. phalethit's questionable that the chunk is standalone
  109. blueyeah, it's a solution looking for a problem, agreed
  110. blueas said I never really got chunking per se, another complexity that webpack brought into the world
  111. phalethok, in case of primate website the performance is better when chunks are not split https://images4.imagebam.com/0c/7c/66/ME1CX1XJ_o.png
  112. phalethbut for a bigger web app that might not be the case
  113. phalethalso the JS amount adds up, so clanker was wrong
  114. phalethor the bundler is just dumb
  115. phalethI suppose I should try to get rid of both of those dynamic imports
  116. blueso we want from
  117. blue2 requests, 29.5 + 17.88 KiB
  118. blueto 1 request, 46.93 KiB?
  119. bluethe combined is 47.38 KiB
  120. blueclanker made up nonsense, again
  121. bluewe went*
  122. phalethyeah, chunks are not standalone
  123. blueanyway, turn off splitting
  124. phalethno, that's not the point
  125. phaleth:D
  126. blueso what's the point, you want a conf option to turn off splitting?
  127. bluewhat's the other dynamic import?
  128. phalethis the first chunking done somewhere as part of the website code? or is that primate feature?
  129. phalethfrom app-whatever.js to chunk-whatever.js
  130. phalethcause I think if I manage to undo that chunking then the ssr or whatever will be happy
  131. blueso what you just sent got rid of boht chunks, right? or rather of the one chunk and its depndency?
  132. blueas far as I know this is the only chunk
  133. phalethin that PR I've only managed to remove the leaf chunk
  134. phaleththe mid chunk is still there, at least in the code
  135. phalethand my question is where in the code?
  136. bluethat's weird, that shouldn't be the case
  137. blueso it works like this
  138. blueyou have components/Header.svelte
  139. bluethis does a dynamic import
  140. blueesbuild sees that, creates a chunk
  141. blueI don't specifically know or understand *why* that chunk then issues another request to specifically load localStorage.ts, it shouldn't
  142. phalethuh
  143. phalethhmm, I think Header.svelte is part of app-whatever.js in any case
  144. blueit is, yes
  145. blueand esbuild rewrites it to use `fetch` instead of that import
  146. phalethlet me see if chunk-whatever.js is still created after that PR is applied
  147. bluek
  148. phalethok, you are right, it's single app.js now
  149. blueyes
  150. phaleththat's great
  151. blueas it should be
  152. phalethso I gotta get rid of the server side magic
  153. bluewhat server side magic
  154. phaleththe ssr thing that errors
  155. phalethdue to not getting localStorage or whatever
  156. phalethTypeError: localStorage.getItem is not a function
  157. phaleth at file:///home/user/primate/primate/apps/website/build/server.js:74:2010
  158. blueyou don't need to, do you?
  159. blueyou keep the await import in Header.svelte
  160. bluethen you piggy back on the fact that svelte's `onMount` is a no-op in SSR
  161. blueso esbuild won't see the dynamic import in the server bundle
  162. phalethI do need to get rid of that dynamic import
  163. bluewhy?
  164. bluethe bundle size is the same, no?
  165. phaleththat's what I'm going to find out
  166. phalethI can at least make it smaller by getting rid of some of this glue code
  167. blueso I frankly don't understand what svelte/store is pulling in that justifies 17kb
  168. phalethwhat I don't know how does localStorage instance appear out of nowhere in #static/localStorage.ts
  169. bluethis is because this is a browser file, and on the browser, localStorage is global
  170. phalethoh, true
  171. blueyou can also write globalThis.localStorage if that makes you feel better
  172. phalethit does
  173. bluegood, then do it
  174. bluemagical stuff is bad bananas
  175. bluelet me add that to the list of carnal sins in CS
  176. blueso what have we got
  177. bluecaching, complexity, and magic?
  178. phalethit's a TS error
  179. bluewhat's a TS error
  180. blueoh right
  181. blueyeah, TS doesn't understand you're in a browser file
  182. blueluckily, you can ignore that
  183. blueor if that bothers you, add `@ts-expect-error browser context` or so
  184. phalethcan I do @ts-ignore?
  185. blueabove that line
  186. blueyes
  187. phalethoh, ok
  188. bluethis is a problem in and of itself. there is no good way to teach TS in what context your JS file in
  189. blueI think react has something like "use:client" but that's terrible
  190. blueTS *could* benefit from taking a look at package.json runtime keys and figuring it out based on the "browser" import, but I doubt it does that, I doubt there is political will in microsoft to do that, and also that would bring you nothing in this case because localStorage isn't declared in apps/website's package.json
  191. blueI also somewhat have a convention in primate where browser files are extension'd `*.client.ts`
  192. bluebut this is purely a convention with no consequence, I cannot guarantee I have followed it everywhere, and also I don't know and couldn't bother to look up how to teach nvim to understand that that is a browser TS file
  193. blueand given I've criticised myself the fact that svelte 5 magically treats *.svelte.js files differently than normal *.js files, I shouldn't do the same thing myself
  194. blueyou know, the problem with all those frontends is that they legit try to do too much. svelte does this rune magic, but it only really works if you use it the blessed path, which is either sveltekit or vite
  195. bluethat's terribly proprietary and vendor-lock-in-y
  196. blueit's not how software is supposed to be
  197. blueI feel like the modern shift has been, everything is open source, but tools are *so* locked to just one path that they're effectively proprietary
  198. bluedo you want to bundle in the woff2 font as well? :P
  199. blueprobably not, you're precaching it and stuff
  200. phalethnope, still didn't figure out how to add Content-Length header to JS
  201. phaleththose frontend frameworks are the problem
  202. blue100%
  203. phalethwhat I don't understand is that how does #static/localStorage.ts end up being in a server side bundle server.js?
  204. phalethI think I'll just move it's code to Header.svelte and see
  205. phalethoh, that worked
  206. phalethso yeah, don't add TS code to static dir
  207. phalethactually, getting a new error now
  208. phaleth[ERROR] views/Index.svelte error: TypeError: localStorage.getItem is not a function
  209. bluethat's the same SSR dir
  210. blueSSR error*
  211. blueI do have a solution for you
  212. blue colorscheme = (await import("#static/localStorage.ts")).default;
  213. bluemove this to a top-level import, as you did in your PR
  214. blueyou can move localStorage to components or whatever you like, it doesn't really matter
  215. blueanyway, create localStorage.client.ts
  216. blueput the code from localStorage.ts in it
  217. blueand in localStorage.ts, do something like `export default {}`
  218. phalethto which dir should I put localStorage.client.ts? view?
  219. bluewhere you like. best in the same dir as localStorage.ts
  220. blueif you wanna keep it in static put it there. otherwise move both to components
  221. bluecomponents is ok I tihnk
  222. blueand the last piece of hte puzzle, add runtime keys for both files
  223. bluein package.json, add
  224. bluehttps://dpaste.com/7JV3D2SJ8
  225. blueand make sure the import is like that
  226. blueimport localStorage from "#localStorage";
  227. phalethI cannot open dpaste cause of proxy
  228. bluehttps://superarch.org/ls.txt
  229. phalethwth
  230. phalethit works :D
  231. phalethmagic replaces magic
  232. blueyes. though this is magic per se: we're explicitly telling esbuild how to bundle it for the browser and server
  233. bluethis isn't*
  234. blueanyway, this is the 'right' solution: because it means the code doesn't get bundled in to the server
  235. phalethok, I'm gonna update the PR
  236. bluegreat
  237. phalethlooks like Angular
  238. phalethso there is about 6 kBs of JS less on the frontend, which is great
  239. bluethat's awesome
  240. blueoh sweet, you delegated to svelte store on the server, that's smart
  241. phalethyeah, well, that just means there is more work to do
  242. phalethanyway, the network dependency graph problem is solved
  243. bluegood job
  244. bluephaleth: the pr is merged
  245. phalethcool, can you try updating the website using those new instructions?
  246. phalethdon't have to strictly follow that, can as well update all of those packages that the website uses
  247. bluephaleth: I usally just go into the contain and git pull and rebuild
  248. bluecontainer*
  249. phalethyeah, but it's a podman container now
  250. phalethI've rebuilt the image so the website is updated
  251. bot<discord:blue> Great
  252. bot<discord:blue> So it's better now?
  253. phalethyes, gets a higher score on https://pagespeed.web.dev
  254. bot<discord:blue> Performance, 100
  255. bot<discord:blue> Great