[Feature]: Redirect in bundleless mode

[Timeless0911]

What problem does this feature solve?

When bundle: false, aka bundleless mode, the import and export path should be redirected to ensure that it is linked to the correct output, e.g:

• import '. /index.less' should be rewritten to import '. /index.css'
• import icon from '. /close.svg' should be rewritten to import icon from '... /asset/close.svg' or to import icon from '. /asset/close.svg'
• import { a } from '@/alias' should be rewritten to import { a } from "./alias"
• import * from './utils' should be rewritten to import * from './utils.mjs or import * from './utils.cjs

The redirect behaviour should take the autoExtension logic in Rslib as well as node/Typescript resolver logic into consider.

In the existing code logic, we already do some redirect logic of autoExtenson by default when it is a relative path

rslib/packages/core/src/config.ts

Lines 488 to 513 in 4b5f674

	output: {
	externals: [
	(data: any, callback: any) => {
	// Issuer is not empty string when the module is imported by another module.
	// Prevent from externalizing entry modules here.
	if (data.contextInfo.issuer) {
	// Node.js ECMAScript module loader does no extension searching.
	// Add a file extension according to autoExtension config
	// when data.request is a relative path and do not have an extension.
	// If data.request already have an extension, we replace it with new extension
	// This may result in a change in semantics,
	// user should use copy to keep origin file or use another separate entry to deal this
	let request = data.request;
	if (request[0] === '.') {
	request = extname(request)
	? request.replace(/\.[^.]+$/, jsExtension)
	: `${request}${jsExtension}`;
	}
	return callback(null, request);
	}
	callback();
	},
	],
	},
	};
	};

And for same feature in Modern.js Module, the implement is based on AST, see https://github.com/web-infra-dev/modern.js/blob/main/packages/solutions/module-tools/src/builder/feature/redirect.ts and https://github.com/web-infra-dev/modern.js/blob/95090d23cc4109e46ad45d8cd613f0eed6204547/packages/solutions/module-tools/src/utils/dts.ts#L140-L223

What does the proposed API look like?

To implement this feature, we should both support js and DTS output:

• redirect in js outputs of bundleless mode
  • alias
  • extensions (import/export)
  • css
  • asset path
• redirect in DTS outputs of bundleless mode
  • alias
  • extensions

This feature should be opt-in:

export type Redirect = {
  alias?: boolean;
  style?: boolean;
  asset?: boolean;
  autoExtension?: boolean;
};

[SoonIter]

Users may want to keep some import queries even after turning on redirect. I recommend that we can introduce a escape hatch to keep original and handle it more flexibly

import fooUrl from './assets/foo.svg?url' // preserve this query

// result
import fooUrl from './assets/foo.mjs' // 😭

after introducing a escape hatch "!!" (or other flag to be discussed), so he can use below

import fooUrl from '!!./assets/foo.svg?url' // keep original

// result
import fooUrl from './assets/foo.svg?url' // 😁

[fi3ework]

@SoonIter

Your proposal is to keep only the query or not convert it at all? I see that your text says "keep some queries," but in the example, it ends up not converting anything at all through !!.

[SoonIter]

Your proposal is to keep only the query or not convert it at all? I see that your text says "keep some queries," but in the example, it ends up not converting anything at all through !!.

yeah, sorry about the confusing describtion, is to keep original