When a directory is specified in the plugin's baseLocation, the last directory is removed from path

[hashrock]

Currently, when a directory is specified in the plugin's baseLocation, it attempts to read a path with the last directory removed.

    islands: {
      baseLocation: "https://raw.githubusercontent.com/hashrock/fresh-components-beta/main/components/",
      paths: [
        "Map.tsx",
      ]
    }

error: Uncaught (in promise) TypeError: Module not found "https://raw.githubusercontent.com/hashrock/fresh-components-beta/main/Map.tsx".
      const module = await import(full);

In the example, since import.meta.url is specified, I'm not sure if it's intended to specify a directory in the first place.

cc: @deer

[deer]

Hi @hashrock, thanks for playing QA and testing this out. I'll do some more testing later today, but at first glance it looks like you're trying to import something from outside the project. That sounds like #1997. Separately, there's a discussion on the origin of the baseLocation property here.

I'll think about this today, and do some testing tonight.

[deer]

Ok, it's not quite tonight, but I wanted to get more information about your use case. A plugin like this loads successfully:

    {
      name: "asdf",
      islands: {
        baseLocation:
          "https://raw.githubusercontent.com/hashrock/fresh-components-beta/main/components/",
        paths: [
          "components/Map.tsx",
        ],
      },

But what are you planning on doing with this? The motivating use case for #1472 was the following:

import IslandPluginComponent from "./sample_routes/PluginRouteWithIsland.tsx";
    routes: [
      {
        path: "pluginroutewithisland",
        component: IslandPluginComponent,
      },
    ],

and then PluginRouteWithIsland.tsx

import Island from "../../islands/Island.tsx";
import IslandFromPlugin from "../sample_islands/IslandFromPlugin.tsx";

export default function IslandPluginComponent() {
  return (
    <div>
      <Island />
      <IslandFromPlugin />
    </div>
  );
}

Without being able to specify the island in the plugin like this:

    islands: {
      baseLocation: import.meta.url,
      paths: ["./sample_islands/IslandFromPlugin.tsx"],
    },

the route using the island specified in PluginRouteWithIsland.tsx wouldn't work.

Here it looks like you're trying to declare an island for your plugin with the source defined remotely. How do you plan on using the injected island? What does the plugin do?

[hashrock]

Thank you! I'm currently trying to implement a plugin that provides a UI (e.g. kv explorer or storybook alternative), and I wanted to use externally defined routes and islands by simply importing them.

I originally thought entire projects as plugins(#1602) would allow me to do what I wanted, but I'm wondering if the functionality you added could also do it.

[deer]

Can this be solved with improved documentation?

[hashrock]

Yeah, It would be helpful if the documents or examples were expanded!

[hashrock]

@deer I'm sorry! I misunderstood the meaning of import.meta.url.
I can't think of a use case where something other than import.meta.url is specified for baseLocation.
I believe the current example is sufficient. Thank you for explaining!

[deer]

Ok, glad to hear. Just FYI, Marvin also improved the documentation a bit here: #2109