Snowpack: Support "Base Imports"

[FredKSchott]

Original Discussion: https://www.pika.dev/npm/snowpack/discuss/226
/cc @stellarhoof, @FredKSchott, @danilotorrisi, @quasor

Many users want the ability to import source files from some app root, and not always needing to do relative imports. While there doesn't appear to be any future for this kind of official support in ESM (ex: Node.js & browsers do not support this) it is supported by TypeScript and most web build environments today. To help users migrate from existing build tools to Snowpack, we would like to support this as well.

Proposal

We should support importing from a mounted directory by name, aka a "base import":

// snowpack.config.json
"scripts": {"mount:src": "mount src/ to /_dist_/"}

// some/file.js
import './file-2.js'; // handle as relative import
import 'src/file-3.js'; // handle as base import
import 'react'; // handle as package import

Whenever we resolve an import specifier we should:

Install Import Scanner

1. Check if it matches a mounted directory.
2. If it does, ignore it (not a package).
3. Otherwise, handle it as a package or relative import (like we do today)

Dev/Build Import Resolver

1. Check if it matches a mounted directory.
2. If it does, resolve it to that file's correct URL.
3. Otherwise, handle it as a package or relative import (like we do today)

[FredKSchott]

@stellarhoof I know you were really wanting this feature, any interest in submitting a PR to add?

[stellarhoof]

Yeah I will be working on this

[FredKSchott]

Awesome, thank you! Let me know how I can help

[Fabianopb]

I've been fiddling with snowpack and so far I'm astonished by how fast it is! However when trying these relative imports I noticed something:

// src/utils/index.js
export const sum = (a, b) => a + b;

// snowpack.config.js
scripts: {
    "mount:utils": "mount utils --to /_dist_/utils"
}

// src/App.jsx
import { sum } from 'utils/index'; // --> this works fine
import { sum } from 'utils'; // --> this doesn't work when it probably should

The error when omitting "index" from the import path is:

Am I missing something?

[balazsbajorics]

I got stuck at the same point, we have a tsconfig.json which looks like this:

    "baseUrl": ".",
    "paths": {
      "uuiui": ["src/uuiui"],
      "uuiui-deps": ["src/uuiui-deps"]
    },

then in typescript, we have code like this:

import { colorTheme } from 'uuiui'

I tried adding the following snowpack scripts:

      "mount:uuiui": "mount src/uuiui --to /_dist_/uuiui",
      "mount:uuiui-deps": "mount src/uuiui-deps --to /_dist_/uuiui-deps"

And when I try to run snowpack dev, this is my output:

✖ Package "uuiui" not found. Have you installed it?

[Fabianopb]

@balazsbajorics I believe this is what you're looking for:

"mount:uuiui": "mount uuiui --to /_dist_/uuiui",

[balazsbajorics]

@balazsbajorics I believe this is what you're looking for:

"mount:uuiui": "mount uuiui --to /_dist_/uuiui",

Thank you for the quick reply!

I see the same error unfortunately, for now I worked around it by search and replacing "uuiui" with "src/uuiu/index".

Snowpack has no problem with "uuiui/index", but typescript complains about that one.

It _sounds like_ the issue is non-relative imports that look like packages.

[FredKSchott]

Is src/uuiui a package, a file, or a folder?

The mounted directory is always a directory, and never a file. You would need to do:

   "mount:uuiui": "mount src--to /_dist_",

And then this in your application:

import 'src/uuiui';

[mateomorris]

import { sum } from 'utils/index'; // --> this works fine
import { sum } from 'utils'; // --> this doesn't work when it probably should

@Fabianopb I just realized the same thing. It looks like snowpack doesn't interpret index.js inside a directory the same way other bundlers do (but I'm still trying to find my footing so I could be wrong).