That's a very neat feature I would like to see!
I'm using vite-ssr withfirebase (client context) + firebase-admin (server context) and the await import() workaround makes the structure of the code a bit unclear. It would be really cool to have the ?only= suffix. 💪

@bluwy we discussed this idea with the team and we think it is an interesting approach. As you already showcased in your plugin this can be implemented for the moment in userland without a commitment from core, so it is better to let people explore this path using your plugin.

There is a chance that we may not end up adding new URL query suffixes in core, if build tools start to embrace the syntax from import assertions. So it is good to have more time before adding something like this in core.

Regarding the API, you should go with the design that makes more sense for you. My personal opinion is to use the direct ?server and ?client form as you have originally proposed (since I don't see a good reason why that names will conflict more than ?only=)

If anyone's using Svelte or Vue, the custom typescript plugin from vite-plugin-iso-import to resolve intellisense for ?client and ?server won't work for Svelte or Vue files, since both vscode extension uses it's own internal Typescript language service, which doesn't load plugins. Normal ts or js files would still work.

I have not a found a way to add support to load plugins for those extensions, but based on my recent findings, it may even be impossible unless we spawn a new Project based on tsserver's implementation. vscode-ng-language-service seems to successfully implement that strategy, but it's a lot of code with minimal gain.

If any Typescript experts are able to help out, that would be greatly appreciated! Otherwise, import assertions may be the way to go that could save us from the shambles. Or just manual module declarations.

One other use for environment-specific imports is for dev-only builds. e.g. having the import dependent on import.meta.env.DEV

if (import.meta.env.DEV) {
 import mod from 'some-dev-only-module';
 // dev-only code
}

This would also help me with something I am trying to achieve. I have 2 api client implementations, one that is mocked out for development, and the other that actually fetches from the server for testing against the server and production. I would like to exclude the mock code from my final bundle, and I think this would allow me to do so by conditionally loading depending on an environment variable.

This works:

// only enable solid-devtools during dev phase
if (import.meta.env.DEV) {
 await import('solid-devtools');
}

with vite config:

 optimizeDeps: {
 esbuildOptions: {
 target: 'esnext',
 },
 },
 build: {
 target: 'es2020',
 },

This is my version of @bluwy's vite-plugin-iso-import. It doesn't completely remove the import, but it is much simpler and it still works with static imports, which is needed for svelte:

const serverRE = /(.*[?&])ssr(&.*|)$/
export default function devPlugin() {
 return {
 name: 'ssr-only-import',
 enforce: 'pre',
 async resolveId(id, importer, options) {
 let m = serverRE.exec(id);
 if(! m)
 return null;
 
 if(! options.ssr)
 return {
 id: 'data:text/javascript,export default null;',
 external: true,
 }
 return this.resolve(
 m[1] + m[2].substr(1),
 importer,
 { skipSelf: true , ...options},
 );
 },
 async load(id, options) {
 if (id.startsWith('data:text/javascript,')) {
 return id.substr(21);
 }
 },
 }
}

Because Vite and TypeScript now supports imports field, we can use that.

1. Add the imports field below,

 "imports": {
 "#iso/*.ts": {
 "types": "./src/*.client.ts",
 "browser": "./src/*.client.ts",
 "node": "./src/*.server.ts"
 }
 }

2. Make sure you use TypeScript 5.0+ and Vite 4.2+.
3. Also make sure the following settings are set in tsconfig.json
   • "moduleResolution": "bundler"
   • "allowImportingTsExtensions": true
4. Create foo.server.ts and foo.client.ts in your directory and import it as #iso/foo.ts

Stackblitz demo (It seems TS 5.0 doesn't work in stackblitz yet)

Note that the types will refer foo.client.ts. So relying on a function exported from foo.client.ts but not from foo.server.ts will lead to runtime errors.

this is a very neat idea i hope it gets implemented

We should consider more than just conditional imports on the client and server.

It will also have other conditions, so this should be a general function.

For example, I am using Electron to develop an application, which is also compatible with the web version.

I want the web version import foo.browser.js and Electron version import foo.electron.js and they both have the same exports.

It's easy for do this with CJS

const foo = process.env.IS_ELECTRON ? require('./foo.electron.js') : require('./foo.browser.js')

Proposal

define the condition in vite.config.js

{
 ...
 condition: {
 browser: true, // control by user
 electron: false // control by user
 }
}

use condition with import

import foo from './foo?browser=./foo.browser.js&electron=./foo.electron.js'

if condition not match, then import './foo' it'self

Or we can do it more simply.

Import two packages, but which package is empty will be determined based on the environment

eg.

import fooClient from './foo.client.js'
import fooServer from './foo.server.js'
const foo = import.meta.env.IS_CLIENT ? fooClient : fooServer

If running on client, It will be transform to

import fooClient from './foo.client.js'
const fooServer = {}
const foo = import.meta.env.IS_CLIENT ? fooClient : fooServer

otherwise

const fooClient = {}
import fooServer from './foo.server.js'
const foo = import.meta.env.IS_CLIENT ? fooClient : fooServer

In this way it solves the problem of typescript very well

to not lose intellisense we can use with instead: import { lib } from "lib" with { only: "server" }