Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Import Map to Local File #166

Open
bennypowers opened this issue Jun 10, 2021 · 4 comments · May be fixed by #167
Open

Import Map to Local File #166

bennypowers opened this issue Jun 10, 2021 · 4 comments · May be fixed by #167
Labels
Needs Discussion Needs Discussion

Comments

@bennypowers
Copy link

👋 Hello!

I'd like to be able to set up an import map to a 'local' file (local to the playground, that is - meaning a file that the playground includes)

Consider:

{
  "files": {
    "index.html": {
      "content": "<script type=\"module\" src=\"script.js\"></script>"
    },
    "script.js": {
      "content": "import '@x/y/z';"
    },
    "xyz.js": {
      "content": "console.log('hidy-ho');",
      "hidden": true
    }
  },
  "importMap": {
    "imports": {
      "@x/y/z": "xyz.js"
    }
  }
}

In this example config, I'm attempting to alias the bare module specifier @x/y/z.

I expect to see 'hidy-ho' logged to the console
I actually see this:

Import map key "@x/y/z" is invalid because address "xyz.js" is not a valid URL. playground-project.js:139:17

Same results for ./xyz.js as the import target.

@bennypowers
Copy link
Author

I solved this (at least, for my case) with this diff:

diff --git a/node_modules/playground-elements/playground-project.js b/node_modules/playground-elements/playground-project.js
index e1f386c..489fc59 100644
--- a/node_modules/playground-elements/playground-project.js
+++ b/node_modules/playground-elements/playground-project.js
@@ -637,7 +637,7 @@ const validateImportMap = (importMap) => {
                 ` address "${resolutionResult}" must end in a forward-slash.`);
         }
         try {
-            new URL(resolutionResult);
+            new URL(resolutionResult, import.meta.url);
         }
         catch {
             errors.push(`Import map key "${specifierKey}" is invalid because` +

bennypowers added a commit to bennypowers/playground-elements that referenced this issue Jun 10, 2021
@bennypowers bennypowers linked a pull request Jun 10, 2021 that will close this issue
@aomarks aomarks moved this to Needs Discussion in Lit Project Board Jan 24, 2022
@sorvell sorvell added the Needs Discussion Needs Discussion label Sep 8, 2022
@sorvell sorvell moved this from 💬 Needs Discussion to 📋 Triaged in Lit Project Board Sep 8, 2022
@adrian-bobev
Copy link

Hello,

I was wondering if there are any updates on the possibility of referencing a local folder project? It would be incredibly beneficial, particularly for those of us working on libraries with components.

Imagine this scenario: you're developing a library with various components, and you're eager to showcase them in the sample demo pages within your documentation. In such cases, having the ability to reference a local folder project becomes invaluable. The current way of loading the library from unpkg presents a challenge, as it hinders the seamless development of new features while simultaneously building example pages for them.

Looking forward to hearing your thoughts on this!

@aomarks
Copy link
Member

aomarks commented Dec 19, 2023

Hi @adrian-bobev. No promises but this requirement also came up independently in another project I'm working on, so there's a chance I'll be working on it soon. Maybe sometime in January.

@clukhei
Copy link

clukhei commented Aug 7, 2024

hi @aomarks any updates on local file imports?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Discussion Needs Discussion
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants