5 ms·

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

95 points by jviide 6y ago

corytheboyd 6y ago
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, would be curious to see how this stacks up against a moderately sized application build using webpack or vanilla rollup too. To see that, we will just need adoption over time, will keep an eye on the project! Update: It’s not rollup that auto-installs packages, I was confusing it with parcel.
- cprecioso 6y ago
  Rollup doesn’t import automatically, Parcel does. `npx`’s specific use case, though, is specifically to run scripts that you haven’t installed - else you’d use `yarn/npm run whatever`.
  - corytheboyd 6y ago
    D’oh you’re completely right about rollup vs parcel. I always get them confused because I trialed them simultaneously :p Huh, I wasn’t aware of that being the primary use case of npx. I assumed the primary use case was to be sugar on top of ‘./node_modules/.bin/*’, which the documentation seems to lead with too (https://github.com/npm/npx https://github.com/npm/npx) They immediately call out auto-installation as a feature after that, but apparently there is a ‘—no-install’ flag you can use too. I guess I would have expected this to be opt-in through ‘—auto-install’ or something is all.
- eyelidlessness 6y ago
  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.
  - corytheboyd 6y ago
    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
    - developit 6y ago
      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).
  - chrisweekly 6y ago
    Yeah, pnpm helps fix a related issue wherein flat node_modules (ie, npm or yarn) can lead to the existence of undeclared dependencies. Check it out if you care about proper dependency mgmt.
    - eyelidlessness 6y ago
      It’s very much on my list. I was really gunning for yarn 2 for some greenfield projects but after finding its awful rough edges I looked more at pnpm and it feels much more in line with what I want.
Xenograph 6y ago
> If you'd like ESLint to be set up for you, add --eslint to the command. Note: this will use 150mb of disk space. This is insane. No wonder they were motivated to create a minimal development tool. How could a CLI linter require 150 MB of disk?
- developit 6y ago
  tbh I think a good chunk of that size is babel-parser, which we're looking into removing from the preact ESLint preset. Still quite a difference though.
  - franga2000 6y ago
    Still, that's just a parser, right? An entire Python installation can fit in that space - parser, interpreter, stdlib and package manager. (and I'm sure many others too, python is just what I'm familiar with)
    - developit 6y ago
      Oh I totally agree it's strange, haha. The cost tends to be magnified in Node land since everything is a million files.
brundolf 6y ago
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
- developit 6y ago
  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.
  - brundolf 6y ago
    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)
    - developit 6y ago
      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: "<h1>hi</h1>", 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 }));
  - BadInformatics 6y ago
    Can you talk more about how WMR fits into the morass of Snowpack, Vite, Rome, Parcel etc.? The self-contained aspect looks great, but I'm at a loss as to how this doesn't also add more entropy into the pool of "next-gen" JS build tools (and thus more analysis paralysis for webdevs)...
phaedryx 6y ago
I'm out of the loop, what does WMR stand for?
- charcuterie 6y ago
  Wet module replacement
  - jessaustin 6y ago
    Wasn't that a Cardi B song?
mssundaram 6y ago
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
- developit 6y ago
  It's built-in, just change the file extension to `.tsx` or create a new file with that extension.
  - mssundaram 6y ago
    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
    - developit 6y ago
      You need to change the HTML to point to the tsx file too: <script type="module" src="./index.tsx"></script> 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.
      - mssundaram 6y ago
        Thank you!

95 points by jviide 6y ago

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, would be curious to see how this stacks up against a moderately sized application build using webpack or vanilla rollup too. To see that, we will just need adoption over time, will keep an eye on the project! Update: It’s not rollup that auto-installs packages, I was confusing it with parcel.

cprecioso 6y ago
Rollup doesn’t import automatically, Parcel does. `npx`’s specific use case, though, is specifically to run scripts that you haven’t installed - else you’d use `yarn/npm run whatever`.
- corytheboyd 6y ago
  D’oh you’re completely right about rollup vs parcel. I always get them confused because I trialed them simultaneously :p Huh, I wasn’t aware of that being the primary use case of npx. I assumed the primary use case was to be sugar on top of ‘./node_modules/.bin/*’, which the documentation seems to lead with too (https://github.com/npm/npx https://github.com/npm/npx) They immediately call out auto-installation as a feature after that, but apparently there is a ‘—no-install’ flag you can use too. I guess I would have expected this to be opt-in through ‘—auto-install’ or something is all.
eyelidlessness 6y ago
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.
- corytheboyd 6y ago
  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
  - developit 6y ago
    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).
- chrisweekly 6y ago
  Yeah, pnpm helps fix a related issue wherein flat node_modules (ie, npm or yarn) can lead to the existence of undeclared dependencies. Check it out if you care about proper dependency mgmt.
  - eyelidlessness 6y ago
    It’s very much on my list. I was really gunning for yarn 2 for some greenfield projects but after finding its awful rough edges I looked more at pnpm and it feels much more in line with what I want.

Xenograph 6y ago

> If you'd like ESLint to be set up for you, add --eslint to the command. Note: this will use 150mb of disk space. This is insane. No wonder they were motivated to create a minimal development tool. How could a CLI linter require 150 MB of disk?

developit 6y ago
tbh I think a good chunk of that size is babel-parser, which we're looking into removing from the preact ESLint preset. Still quite a difference though.
- franga2000 6y ago
  Still, that's just a parser, right? An entire Python installation can fit in that space - parser, interpreter, stdlib and package manager. (and I'm sure many others too, python is just what I'm familiar with)
  - developit 6y ago
    Oh I totally agree it's strange, haha. The cost tends to be magnified in Node land since everything is a million files.

brundolf 6y ago

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

developit 6y ago
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.
- brundolf 6y ago
  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)
  - developit 6y ago
    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: "<h1>hi</h1>", 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 }));
- BadInformatics 6y ago
  Can you talk more about how WMR fits into the morass of Snowpack, Vite, Rome, Parcel etc.? The self-contained aspect looks great, but I'm at a loss as to how this doesn't also add more entropy into the pool of "next-gen" JS build tools (and thus more analysis paralysis for webdevs)...

phaedryx 6y ago

I'm out of the loop, what does WMR stand for?

charcuterie 6y ago
Wet module replacement
- jessaustin 6y ago
  Wasn't that a Cardi B song?

mssundaram 6y ago

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

developit 6y ago
It's built-in, just change the file extension to `.tsx` or create a new file with that extension.
- mssundaram 6y ago
  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
  - developit 6y ago
    You need to change the HTML to point to the tsx file too: <script type="module" src="./index.tsx"></script> 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.
    - mssundaram 6y ago
      Thank you!