Import map not working with Worker

[wongjiahau]

Steps to reproduce

1. Create the following files under the same directory:

import_map.json

{
   "imports": {
      "fmt/": "https://deno.land/[email protected]/fmt/"
   }
}

color.ts

import { red } from "fmt/colors.ts";

console.log(red("hello world"));

main.ts

new Worker(new URL('./color.ts', import.meta.url).href, {type: 'module'})

2. Run this command:

deno run --allow-read --importmap=import_map.json --unstable main.ts

Expected output

hello world

Actual output

error: Uncaught Error: relative import path "fmt/colors.ts" not prefixed with / or ./ or ../ Imported from "file:///color.ts"

Environment

deno 1.1.3

[wongjiahau]

@ry If I want to fix this which files should I look at?

[bartlomieju]

According to import maps spec they are not affecting workers. So rather than a bug this would be a feature and would be Deno specific. It could be added to non-standard deno option in Worker constructor.

[wongjiahau]

@bartlomieju I see, so is it something like ‘importMap: URL’ option for Worker?

[qballer]

Having import map loading different context of modules could introduce interesting use cases for stuff like A/B testing

[bartlomieju]

@wongjiahau that would be something like:

declare class Worker extends EventTarget {
    constructor(
      specifier: string,
      options?: {
        type?: "classic" | "module";
        name?: string;
        deno?: {
            importMap?: string
        };
      }
    );
  }

[wongjiahau]

@bartlomieju Can the import map represents a remote file? for example

https://deno.land/x/import_map.json

[bartlomieju]

@wongjiahau not at the moment, there is a PR for it (#5849), but I haven't reviewed it yet

[wongjiahau]

@bartlomieju Ok, so importMap can only be either relative or absolute file path right?

[bartlomieju]

@wongjiahau that's correct

[wongjiahau]

@bartlomieju Thanks I will create a PR based on the direction you provided

[bartlomieju]

From https://github.com/WICG/import-maps#installation

What do we do in workers? Probably new Worker(someURL, { type: "module", importMap: ... })? 
Or should you set it from inside the worker? 
Should dedicated workers use their controlling document's map, either by default or always? Discuss in #2.

Related discussion: WICG/import-maps#2

Let's wait until proper solution is decided in the spec repo before implementing it in Deno.

[abourdin]

Is there currently any way to test a web server that is using an import map until this is implemented in Deno?

[rracariu]

Until there is an standardized way for import maps in Workers, ca we please have it under the deno options?
ATM this issue throws a wrench into applications designed to work with import maps...

[oscarotero]

I guess the spec will take a long time to decide a final solution, and import maps is something very popular and used right now in Deno, so I believe Deno should provide a way to handle this. The importMaps key under deno proposed in #6675 (comment) seems the obvious choice.

[remyrylan]

Is there any possibility to get this implemented at least behind the unstable flag for now?

[kitsonk]

No, because we want to continue to align to the web standard. If the web standard is strongly considering establishing a proposal, then we might consider it. Best thing to do is continue to champion something with WHATWG.

[oscarotero]

Currently, Workers have the deno key to configure the permissions and whether the Deno namespace is enabled or not.

Maybe a solution, that I believe won't conflict with what WHATWG decide in the future is include a way to set the deno config file (deno.json), so the import map would be taken from that file.

This not only allows to configure the import maps but also other things like TypeScript options, etc. A proposal:

const worker = new Worker(new URL("./worker.js", import.meta.url).href, {
  type: "module",
  deno: {
    permissions: "none",
    config: "inherit" // Or the path to a different file
  },
});

[NyanHelsing]

it might be possible to write a swc plugin and run the files through swc before running them in deno.

the plugin would basically visit all the named imports/exports and replace the specifier as per the import_map.

[NyanHelsing]

it might be possible to write a swc plugin and run the files through swc before running them in deno.

the plugin would basically visit all the named imports/exports and replace the specifier as per the import_map.

ChatGPT says we can do this:

Qs:

• how to get the imprt map into the constructor? theres config that can get passed to swc plugn, need to answer that q.
• need to check implementation is actually correct/functional... it's hopefully at least close.
• will this work in node.js too?

use std::collections::HashMap;
use string_cache::Atom;
use swc_core::ecma::{
    ast::{ImportDecl, NamedExport, Program},
    transforms::testing::test,
    visit::{as_folder, FoldWith, VisitMut, VisitMutWith},
};
use swc_core::plugin::{plugin_transform, proxies::TransformPluginProgramMetadata};

pub struct TransformVisitor {
    import_map: HashMap<String, String>,
}

impl TransformVisitor {
    pub fn new(import_map: HashMap<String, String>) -> Self {
        Self { import_map }
    }
}

impl VisitMut for TransformVisitor {
    fn visit_mut_import_decl(&mut self, decl: &mut ImportDecl) {
        decl.visit_mut_children_with(self);
        for (key, value) in &self.import_map {
            if decl.src.value.starts_with(key) {
                decl.src = Box::new(Atom::from(value.to_owned() + &decl.src.value[key.len()..]).into());
                break;
            }
        }
    }
    
    fn visit_mut_named_export(&mut self, decl: &mut NamedExport) {
        decl.visit_mut_children_with(self);
        if let Some(src) = &decl.src {
            for (key, value) in &self.import_map {
                if src.value.starts_with(key) {
                    decl.src = Some(Box::new(Atom::from(value.to_owned() + &src.value[key.len()..]).into()));
                    break;
                }
            }
        }
    }
}

[jespertheend]

It seems like this is working fine for me? It seems to pick up the import map from my deno.json. I'm using the importMap property, not sure about imports.

[nounder]

Import maps in workers function properly here, too.

deno 1.45.2 (release, aarch64-apple-darwin)
v8 12.7.224.12
typescript 5.5.2

[marvinhagemeister]

Marking as resolved.