Import maps as object

[Staremang]

Implements the ability to pass importMaps as an object

Example:

const baseUrl = '/foo'; // may by an environment variable
// ...
vitePluginSingleSpa({
  // ...
  importMaps: {
    type: 'importmap',
    dev: {
      imports: {
        '@learnSspa/spa01': 'http://localhost:4101/src/spa.ts',
        '@learnSspa/spa02': 'http://localhost:4102/src/spa.ts',
      },
    },
    build: {
      imports: {
        '@learnSspa/spa01': `${baseUrl}/spa01-prefix/spa.js`,
        '@learnSspa/spa02': `${baseUrl}/spa02-prefix/spa.js`,
      },
    },
  },
});

[webJose]

Hello, @Staremang. Thank you for your interest in the project.

Could you provide me with the motivation behind this change? What moved you to implement this alternative way of passing import maps? Are there specific scenarios where this is the only way of doing it? Please elaborate.

Thank you, and welcome!

[Staremang]

Hi!

We pass BASE_URL through environment variables. I haven't found any other way.

Example

// vite.config.ts

export default ({ mode }: ConfigEnv) => {
  const env = loadEnv(mode, process.cwd(), '');

  return defineConfig({
    base: env.BASE_URL,
    // ...
    plugins: [
      vitePluginSingleSpa({
        // ...
        importMaps: {
          type: 'importmap',
          dev: {
            imports: {
              '@learnSspa/spa01': 'http://localhost:4101/src/spa.ts',
              '@learnSspa/spa02': 'http://localhost:4102/src/spa.ts',
            },
          },
          build: {
            imports: {
              '@learnSspa/spa01': `${env.BASE_URL}/spa01-prefix/spa.js`,
              '@learnSspa/spa02': `${env.BASE_URL}/spa02-prefix/spa.js`,
            },
          },
        },
      }),
    ],
  });
};

And run command

> BASE_URL=/nbo vite build

[webJose]

Interesting. Certainly I have thought about something similar, but I have been delaying this because I want to complete the separation of the merging algorithm I created for wj-config. The import map merging algorithm in this package is flaky and I don't like it. I have made progress (wj-merge), but I haven't finished.

Is the value of BASE_URL arbitrary? If not, you could prepare variations of the import map in different files and conditionally set the import map file names in vite.config.ts.

The following code snippet assumes you have a finite set of base URL's. There will be one importMap.<key>.json file per base URL. In this case, it is not really necessary to set an environment variable, and instead you could use the value of mode directly as a key.

export default function ({ mode }: ConfigEnv) {
    // The possible values of mode would be: a, b, c
    return defineConfig({
        plugins: [
            vitePluginSingleSpa({
                importMaps: {
                    type: 'importmap',
                    dev: 'importMap.dev.json',
                    build: `importMap.${mode}.json`
                }
            })
        ],
        ...
    });
};

If the possible values of BASE_URL are not finite so that import map files cannot be prepared ahead of time, then I guess you would need your current solution.

Now, having said that: If you would like to pursue this feature, I will support it. The first 2 comments I have for this PR are:

1. The README instructions need to be updated to explain the possibility of using an object.
2. Unit tests need to be added to the plugin-factory-tests.ts file.

[webJose]

Hello, @Staremang. There's been no activity or follow up from you on this PR. Let me know, if possible, if you would like to continue with this.