IngwiePhoenix on Nostr: First, if you aren't using a bundler, you aren't doing anything. But which one to ...
First, if you aren't using a bundler, you aren't doing anything. But which one to choose? Webpack, Rollup, Vite? Bun's internal one? esbuild raw? And most of them are super different in, well, everything.
Second, everything only seems to work with React, unless otherwise specified - Preact (albeit smaller and MUCH more performant) is completely and utterly ignored. ChatGPT will happily create components for and with it - but Preact's compat layer is not tree-shakeable _and_ lacks (a lot of) features.
Third, the rage these days, schadcn-ui, doesn't just barf dependencies at you that you have never heared of, but also...you have to update it yourself, or manually invoke `npx shadcn-ui add X` to update something - it is NOT a package.
Next, unless you are a design-wiz and know shapes, colours and order inside out, TailwindCSS has amongst the steepest learning curve I've ever seen. It breaks my brain - but also because I am visually impaired and lack the graphical understanding...so, more a me-problem really.
And also, errors. Unless you are using TypeScript and intellisense (be it via plugins in VSCode or a dedicated-ish IDE), you will run into issues where a certain type is expected, not returned, and then becomes a problem. In general, whilst there are code examples for vanilla ES6, just about everyone would rather you just use TypeScript.
And I am not done yet.
Further, forms. I have spent three hours just to get one form input to work. Why? The beloved zod validator actually can't be arsed to return a raw defaults object - nope, you have to make it yourself. Because if you don't supply one, the schadcn-ui form, which really is based on Radix Primitives, will throw weird errors about "controlled elements" and "uncontrolled elements". What it actually means that one of the defaults you passed is "undefined" and thus trips the whole thing off. But, it won't tell you where, why or what.
Then, if you want to use an HTTP API to reach your backend, you will write a lot of async code - but React expects rendering to be sync. You can work around it with useEffect(), yes, but the fact that it ends up feeling super hacky implementing an async handler to then modify your state from lord knows where just feels incredbibly alien and detached.
And if I looked around in my previous issues, I'd probably find more. I am _just_ using Vite, and embedding the output in my Go application with `go:generate npm run build` and `go:embed build/*` and `wgo` to recompile everything on change... but this clusterf_ck has cost me so many nerves to get together and working in order. It's actually annoying...
Second, everything only seems to work with React, unless otherwise specified - Preact (albeit smaller and MUCH more performant) is completely and utterly ignored. ChatGPT will happily create components for and with it - but Preact's compat layer is not tree-shakeable _and_ lacks (a lot of) features.
Third, the rage these days, schadcn-ui, doesn't just barf dependencies at you that you have never heared of, but also...you have to update it yourself, or manually invoke `npx shadcn-ui add X` to update something - it is NOT a package.
Next, unless you are a design-wiz and know shapes, colours and order inside out, TailwindCSS has amongst the steepest learning curve I've ever seen. It breaks my brain - but also because I am visually impaired and lack the graphical understanding...so, more a me-problem really.
And also, errors. Unless you are using TypeScript and intellisense (be it via plugins in VSCode or a dedicated-ish IDE), you will run into issues where a certain type is expected, not returned, and then becomes a problem. In general, whilst there are code examples for vanilla ES6, just about everyone would rather you just use TypeScript.
And I am not done yet.
Further, forms. I have spent three hours just to get one form input to work. Why? The beloved zod validator actually can't be arsed to return a raw defaults object - nope, you have to make it yourself. Because if you don't supply one, the schadcn-ui form, which really is based on Radix Primitives, will throw weird errors about "controlled elements" and "uncontrolled elements". What it actually means that one of the defaults you passed is "undefined" and thus trips the whole thing off. But, it won't tell you where, why or what.
Then, if you want to use an HTTP API to reach your backend, you will write a lot of async code - but React expects rendering to be sync. You can work around it with useEffect(), yes, but the fact that it ends up feeling super hacky implementing an async handler to then modify your state from lord knows where just feels incredbibly alien and detached.
And if I looked around in my previous issues, I'd probably find more. I am _just_ using Vite, and embedding the output in my Go application with `go:generate npm run build` and `go:embed build/*` and `wgo` to recompile everything on change... but this clusterf_ck has cost me so many nerves to get together and working in order. It's actually annoying...