Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

WMR – Tiny all-in-one development tool for modern web apps

github.com

Post reply on HN
Print view View original

11–20 of 27 posts

Re: WMR – Tiny all-in-one development tool for modern web apps

#11

Post by brundolf »

developit wrote: post #10
brundolf wrote: post #6

For those like me who missed it in the title: this is only for Preact, which is part of what allows it to be so comprehensive. Preact is cool, but "all-in-one development tool for modern web apps" may be overselling the scope a little bit

Hmm - it's not actually specific to Preact, it's just built by the Preact team and we use Preact in the docs. We are missing a bunch of documentation that would have made this clearer though, which I apologize for. While there are some optimizations for Preact in WMR, it can be used for vanilla JavaScript / Lit / Vue / Svelte / etc just fine.

I assume features like prerendering HTML must only work for Preact though, right? That requires some significant assumptions about the codebase (compared to tools like Babel and Webpack). Also, hot reloading seems to only work for Preact components (based on the wording)

Re: WMR – Tiny all-in-one development tool for modern web apps

#12

Post by eyelidlessness »

corytheboyd wrote: post #2

Looks neat, but why is this a thing? > import "packages" from npm without installation IIRC rollup does the same thing by default. This project mentions it uses rollup so maybe that’s where it’s coming from. Using npx to run executables also does this IIRC. And I never want it, especially if I have to opt-out. I want there to be friction to adding dependencies, it should be a carefully considered process. Otherwise,…

I’m honestly astonished that this is a selling point. Sure, fewer steps sounds nice... but in addition to your (correct) point about friction when adding dependencies, it’s also a security and compatibility nightmare. And it likely makes using tools like typescript an exercise in frustration if it’s even possible.

Edit: I’d also add that npx has all of the same problems multiplied by being even less frictionful.

Re: WMR – Tiny all-in-one development tool for modern web apps

#13

Post by corytheboyd »

eyelidlessness wrote: post #12
corytheboyd wrote: post #2

Looks neat, but why is this a thing? > import "packages" from npm without installation IIRC rollup does the same thing by default. This project mentions it uses rollup so maybe that’s where it’s coming from. Using npx to run executables also does this IIRC. And I never want it, especially if I have to opt-out. I want there to be friction to adding dependencies, it should be a carefully considered process. Otherwise,…

I’m honestly astonished that this is a selling point. Sure, fewer steps sounds nice... but in addition to your (correct) point about friction when adding dependencies, it’s also a security and compatibility nightmare. And it likely makes using tools like typescript an exercise in frustration if it’s even possible. Edit: I’d also add that npx has all of the same problems multiplied by being even less frictionful.

I didn’t realize it installed packages automatically until I tried running my application in another environment where it crashed due to a missing package. When I found out why I was a bit upset :P

This is terrible, if you forget to add the package to your manifest, what, is the expected behavior that you just run the latest version always? Why would you want that in a production environment ever? Especially when the package manager is RIGHT THERE and already solves the problem in a well understood way. Huge step backwards IMO

Re: WMR – Tiny all-in-one development tool for modern web apps

#15

Post by developit »

corytheboyd wrote: post #13
eyelidlessness wrote: post #12

Earlier quoted context omitted.

I’m honestly astonished that this is a selling point. Sure, fewer steps sounds nice... but in addition to your (correct) point about friction when adding dependencies, it’s also a security and compatibility nightmare. And it likely makes using tools like typescript an exercise in frustration if it’s even possible. Edit: I’d also add that npx has all of the same problems multiplied by being even less frictionful.

I didn’t realize it installed packages automatically until I tried running my application in another environment where it crashed due to a missing package. When I found out why I was a bit upset :P This is terrible, if you forget to add the package to your manifest, what, is the expected behavior that you just run the latest version always? Why would you want that in a production environment ever? Especially when the…

It's designed for rapid prototyping. You can just use npm or yarn and ignore this feature though, it's entirely optional.

FWIW the surface area for security issues here is far smaller than npx or similar tools, because WMR only writes JS/CSS/TS files to disk, and doesn't execute package scripts (where most vulnerabilities reside).

Re: WMR – Tiny all-in-one development tool for modern web apps

#16

Post by developit »

mssundaram wrote: post #14

How do I use this for Typescript and TSX? I see a few mentions of Typescript in the code (e.g. a transform plugin) but no guidance on how to set it up

It's built-in, just change the file extension to `.tsx` or create a new file with that extension.

Re: WMR – Tiny all-in-one development tool for modern web apps

#17

Post by developit »

brundolf wrote: post #11
developit wrote: post #10

Earlier quoted context omitted.

Hmm - it's not actually specific to Preact, it's just built by the Preact team and we use Preact in the docs. We are missing a bunch of documentation that would have made this clearer though, which I apologize for. While there are some optimizations for Preact in WMR, it can be used for vanilla JavaScript / Lit / Vue / Svelte / etc just fine.

I assume features like prerendering HTML must only work for Preact though, right? That requires some significant assumptions about the codebase (compared to tools like Babel and Webpack). Also, hot reloading seems to only work for Preact components (based on the wording)

We've only shipped a helper library for Preact, but the Prerendering is actually generic. Some folks are working on helpers for other frameworks. The "API" is just a function exported from your first script tag:

export async function prerender(data) { return { html: "hi", links: ["/other-page"] } }

Hot reloading is a similar story, it's the same API as Vite and Snowpack:

if (import.meta.hot) import.meta.hot.accept(({ module }) => { do stuff }));

Re: WMR – Tiny all-in-one development tool for modern web apps

#18

Post by mssundaram »

developit wrote: post #16
mssundaram wrote: post #14

How do I use this for Typescript and TSX? I see a few mentions of Typescript in the code (e.g. a transform plugin) but no guidance on how to set it up

It's built-in, just change the file extension to `.tsx` or create a new file with that extension.

I tried renaming public/index.js to public/index.tsx and get "./public/index.js - File not found" in the build watcher. Of course the index.html is still referencing the index.js file - what do I need to do?

Edit: It does work for e.g. pages/about/index.js to rename to index.tsx - so maybe it's just the main index that won't work as Typescript?

Also it looks like there is no default definition provided for imported CSS modules - the import resolves to a string so "styles.about" doesn't compile

Re: WMR – Tiny all-in-one development tool for modern web apps

#19

Post by developit »

mssundaram wrote: post #18
developit wrote: post #16

Earlier quoted context omitted.

It's built-in, just change the file extension to `.tsx` or create a new file with that extension.

I tried renaming public/index.js to public/index.tsx and get "./public/index.js - File not found" in the build watcher. Of course the index.html is still referencing the index.js file - what do I need to do? Edit: It does work for e.g. pages/about/index.js to rename to index.tsx - so maybe it's just the main index that won't work as Typescript? Also it looks like there is no default definition provided for imported C…

You need to change the HTML to point to the tsx file too:

There are ambient TS definitions for CSS Modules, it just had a bug in 1.0.0 - fix is merged and will be released shortly.

Re: WMR – Tiny all-in-one development tool for modern web apps

#20

Post by mssundaram »

developit wrote: post #19
mssundaram wrote: post #18

Earlier quoted context omitted.

I tried renaming public/index.js to public/index.tsx and get "./public/index.js - File not found" in the build watcher. Of course the index.html is still referencing the index.js file - what do I need to do? Edit: It does work for e.g. pages/about/index.js to rename to index.tsx - so maybe it's just the main index that won't work as Typescript? Also it looks like there is no default definition provided for imported C…

You need to change the HTML to point to the tsx file too: There are ambient TS definitions for CSS Modules, it just had a bug in 1.0.0 - fix is merged and will be released shortly.

Thank you!
Post reply on HN