Suggestion: “zero compilation” mode

[rauschma]

When working with plain JavaScript:

• Write web_modules to disk, as $PROJECT/web_modules
  • Maybe via an extra command? snowpack install?
• Importing:

  // $PROJECT/src/main.js
  import {html} from '../../web_modules/htm/react.js';

• Don’t compile JavaScript files in any way, serve them as they are.

Benefits:

• Some apps can be run via file: URLs now.
• A GitHub repo could be directly used as GitHub pages – no need to check in a build/ directory.

Caveats:

• Could be too niche a use case.
• Compilation gives you many conveniences. Losing them may not be worth it.

[FredKSchott]

We actually have snowpack install today that does exactly that. Snowpack v1 was entirely based around the model that you're describing (we give you the deps, you bring your own static dev server) and we still kept the install command around for those users.

[FredKSchott]

You definitely lose a ton of the convenience that Snowpack's dev & build workflows provide, but we've heard from power-users that the tradeoff is worth it.

One thing to be aware of: Snowpack will still scan your source code to find out what to install with the snowpack install command. But, you can set an allowlist of packages to install with the "install" config array: https://www.snowpack.dev/#all-config-options

[rauschma]

Cool! I’m working on an introduction to React and there, I want to reduce “magic” as much as possible. (However, as programmers progress, they probably do want more magic in their lives.)

This is the structure I went with (I’m not completely happy with where I had to put index.html, but that allows me to serve minimal-react/ via an HTTP server and everything just works):

minimal-react/index.html

<a href="html/quiz.html"><tt>quiz.html</tt></a>

minimal-react/html/quiz.html

<script type="module" src="../js/quiz.js"></script>

minimal-react/js/quiz.js

import React, {useState} from '../web_modules/react.js';
import ReactDOM from '../web_modules/react-dom.js';
import {html} from '../web_modules/htm/react.js';
import produce from '../web_modules/immer.js';

minimal-react/snowpack.config.json

{
  "install": [
    "react",
    "react-dom",
    "htm/react",
    "immer"
  ],
  "mount": {
    "html": "/html",
    "js": "/js"
  },
  "devOptions": {
    "open": "none"
  },

  "installOptions": { "treeshake": false }
}

Problems and wishes:

• This import fails: import {html} from '../web_modules/htm/react.js';
  • Error: Cannot find module 'htm/react.js'
  • If I comment out the ../web_modules/htm/react.js import, the error goes away.
  • Ignoring web_modules doesn’t seem to change anything: "exclude": [ "**/web_modules/**/*" ]
• Maybe a different dependency scanning mode could be introduced that recognizes web_modules in module specifiers. Then config.install wouldn’t be necessary in my case.
  • That dependency mode probably also should complain about bare imports.
• In order for building to work, it’d be nice if one could mount minimal-react/index.html to /index.html (AFAICT, only directories can be mounted).

[FredKSchott]

@rauschma Yea that makes sense. I'm not sure what that htm/react issue is, but I bet it stems from the fact that the dev server expecting you to be importing packages by name and wanting to manage those dependencies for you behind the scenes.

For what you've described, I'd recommend using snowpack dev and just letting Snowpack manage your deps for you (import "htm/react"). We really try to keep magic to a minimum, and the only thing that our dev server does by default is compile JSX/TS, support package imports by name, and support imports for a few common non-JS files (like CSS and JSON).

Plus, you get snowpack build for free, with a one-line plugin story for adding a bundler via @snowpack/plugin-webpack.

[FredKSchott]

I'd recommend using snowpack install to generate those web_modules/ dependencies manually, and then using a lightweight static server like servor (npx servor) to serve your local directory as is. No magic, only imports by paths, easier to reason about.

That’s what I’m doing and that’s when I’m getting the error.

Hmm, well that sounds unexpected then. I copied your config file, npm installed those dependencies, and snowpack install succeeded to create a web_modules/ directory including a valid web_modules/htm/react.js file. Loading /js/quiz.js with servor worked as well.

If I use snowpack install and go from bare imports to relative/local imports, building could – in theory – still work(?)

That's correct, relative paths would be treated like any other import, and if you create a "mount" entry for your local "web_modules" directory then those files would be treated like any other JS source files.

[rauschma]

I’ve created a demo repository: https://github.com/rauschma/snowpack-install-demo

If I check out that repository and:

cd snowpack-install-demo
npm install
./node_modules/.bin/snowpack install

Then I’m getting the following error message:

[snowpack] Cannot find module 'htm/react.js'
Require stack:
- /Users/rauschma/tmp/snowpack-install-demo/node_modules/snowpack/dist-node/index.js
- /Users/rauschma/tmp/snowpack-install-demo/node_modules/snowpack/dist-node/index.bin.js
[snowpack] Install failed.

[FredKSchott]

Ah, thanks for the repo, I found your issue: https://github.com/pikapkg/snowpack/blob/05fcc8c1ad0700ed99638a89077004a27ca45ea2/snowpack/src/scan-imports.ts#L87-L95

It looks like we still have some legacy code hanging around for special handling to scan relative imports that include the substring "web_modules" as if they were bare module specifiers. This no longer makes sense for several reasons and should be removed (see answer above, where this logic allows us to also support the "I just want to manage my deps myself, manually" user).

fwiw, you've only run into this issue because htm/react is such an interesting case (that points to a sub-package instead of a JS file, as our faulty logic assumes). You have a real knack for finding edge cases :)

[FredKSchott]

Fix here: #917

[rauschma]

Thanks @FredKSchott!

I think it’s because, in this case, I’m walking off the beaten path, with HTM.