vite-plugin-iso-import
Advanced tools
Comparing version 0.1.1 to 0.1.2
@@ -23,2 +23,11 @@ 'use strict'; | ||
enforce: 'post', | ||
config() { | ||
return { | ||
optimizeDeps: { | ||
esbuildOptions: { | ||
plugins: [esbuildPatchPlugin()] | ||
} | ||
} | ||
} | ||
}, | ||
async transform(code, id, ssr) { | ||
@@ -62,2 +71,62 @@ await esModuleLexer.init; | ||
/** | ||
* I wish I would never have to write this again :( | ||
* | ||
* This esbuild plugin patches Vite's dep scan plugin so it's `build.onResolve` | ||
* callback param always receives `args.path` without `?client` or `?server` suffix. | ||
* | ||
* But why this method? A list of alternatives tried: | ||
* | ||
* 1. Esbuild plugin which resolves "my-lib?client" => "my-lib" | ||
* | ||
* This does not work because `build.onResolve` doesn't fallthrough | ||
* (needs resolve to absolute path), which also means Vite's scanner won't catch this. | ||
* | ||
* 2. Use Vite plugin `resolveId` for "my-lib?client" => "my-lib?client" | ||
* | ||
* Almost worked, but Vite prebundles as "my-lib?client", causing actual import to | ||
* trigger dynamic pre-bundling. | ||
* | ||
* 3. Intercept server._optimizeDepsMetadata (Idea: https://github.com/antfu/vite-plugin-optimize-persist) | ||
* | ||
* Too risky with potential pitfalls. Plus we need to fix this for non-package imports | ||
* as well so Vite crawls into the import path, e.g. relative or alias imports. | ||
* | ||
* 4. Use esbuild tsconfig option to map "*?client" => "*" naively | ||
* | ||
* Doesn't work. Don't think it's valid either. | ||
* | ||
* 5. Fix Vite directly to strip anything after "?" | ||
* | ||
* There could be legitimate reasons we don't want that to happen. | ||
* | ||
* @return {import('vite').UserConfig['optimizeDeps']['esbuildOptions']['plugins'][number]} | ||
*/ | ||
function esbuildPatchPlugin() { | ||
return { | ||
name: 'esbuild-plugin-iso-import', | ||
setup(build) { | ||
const viteScanPlugin = build.initialOptions.plugins.find((v) => v.name === 'vite:dep-scan'); | ||
if (!viteScanPlugin) return | ||
const oriSetup = viteScanPlugin.setup.bind(viteScanPlugin); | ||
viteScanPlugin.setup = function (build) { | ||
const oriResolve = build.onResolve.bind(build); | ||
build.onResolve = function (options, callback) { | ||
function wrapCallback(args) { | ||
args.path = args.path | ||
.replace(clientRE, (_, $1, $2) => ($2 ? $1 : '')) | ||
.replace(serverRE, (_, $1, $2) => ($2 ? $1 : '')); | ||
return callback(args) | ||
} | ||
return oriResolve(options, wrapCallback) | ||
}; | ||
return oriSetup(build) | ||
}; | ||
} | ||
} | ||
} | ||
/** | ||
* TypeScript plugin to correctly resolve ?client and ?server imports. | ||
@@ -64,0 +133,0 @@ * Only works for JS and TS files. Vue and Svelte are not supported. |
103
package.json
{ | ||
"name": "vite-plugin-iso-import", | ||
"description": "Import modules isomorphically", | ||
"version": "0.1.1", | ||
"author": "Bjorn Lu", | ||
"license": "MIT", | ||
"types": "./index.d.ts", | ||
"main": "./dist/index.js", | ||
"module": "./dist/index.mjs", | ||
"exports": { | ||
"import": "./dist/index.mjs", | ||
"require": "./dist/index.js" | ||
}, | ||
"files": [ | ||
"dist/index.js", | ||
"dist/index.mjs", | ||
"index.d.ts" | ||
], | ||
"homepage": "https://github.com/bluwy/vite-plugin-iso-import", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/bluwy/vite-plugin-iso-import.git" | ||
}, | ||
"bugs": { | ||
"url": "https://github.com/bluwy/vite-plugin-iso-import/issues" | ||
}, | ||
"keywords": [ | ||
"vite", | ||
"plugin", | ||
"isomorphic", | ||
"import" | ||
], | ||
"dependencies": { | ||
"es-module-lexer": "^0.7.1", | ||
"magic-string": "^0.25.7" | ||
}, | ||
"devDependencies": { | ||
"@types/node": "^16.4.12", | ||
"rollup": "^2.56.0", | ||
"typescript": "^4.3.5", | ||
"vite": "^2.4.4" | ||
}, | ||
"scripts": { | ||
"build": "rollup -c", | ||
"test-dev": "vite --debug", | ||
"test-build": "pnpm test-build:client && pnpm test-build:server", | ||
"test-build:client": "vite build --debug --outDir test-dist/client", | ||
"test-build:server": "vite build --debug --outDir test-dist/server --ssr test/main.js", | ||
"why-ts-plugin": "node scripts/createFacadeTsPlugin.js" | ||
} | ||
"name": "vite-plugin-iso-import", | ||
"description": "Import modules isomorphically", | ||
"version": "0.1.2", | ||
"author": "Bjorn Lu", | ||
"license": "MIT", | ||
"types": "./index.d.ts", | ||
"main": "./dist/index.js", | ||
"module": "./dist/index.mjs", | ||
"exports": { | ||
"./package.json": "./package.json", | ||
".": { | ||
"import": "./dist/index.mjs", | ||
"require": "./dist/index.js" | ||
} | ||
}, | ||
"files": [ | ||
"dist/index.js", | ||
"dist/index.mjs", | ||
"index.d.ts" | ||
], | ||
"homepage": "https://github.com/bluwy/vite-plugin-iso-import", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/bluwy/vite-plugin-iso-import.git" | ||
}, | ||
"bugs": { | ||
"url": "https://github.com/bluwy/vite-plugin-iso-import/issues" | ||
}, | ||
"keywords": [ | ||
"vite", | ||
"plugin", | ||
"isomorphic", | ||
"import" | ||
], | ||
"scripts": { | ||
"dev": "rollup -cw", | ||
"build": "rollup -c", | ||
"test-dev": "vite --debug", | ||
"test-build": "pnpm test-build:client && pnpm test-build:server", | ||
"test-build:client": "vite build --debug --outDir test-dist/client", | ||
"test-build:server": "vite build --debug --outDir test-dist/server --ssr test/main.js", | ||
"why-ts-plugin": "node scripts/createFacadeTsPlugin.js", | ||
"prepublishOnly": "pnpm build" | ||
}, | ||
"dependencies": { | ||
"es-module-lexer": "^0.7.1", | ||
"magic-string": "^0.25.7" | ||
}, | ||
"devDependencies": { | ||
"@types/node": "^16.4.12", | ||
"rollup": "^2.56.0", | ||
"typescript": "^4.3.5", | ||
"vite": "^2.4.4" | ||
} | ||
} |
@@ -64,6 +64,14 @@ # vite-plugin-iso-import | ||
Also note that this currently does not work for Vue and Svelte files. The language services are unable to load TypeScript plugins. | ||
Also note that this currently does not work for Vue and Svelte files. The language services are unable to load TypeScript plugins. At the meantime, you can use this suboptimal solution for npm packages only: | ||
```ts | ||
// global.d.ts (are any ambient dts file) | ||
declare module 'lodash-es?client' { | ||
import * as all from 'lodash-es' | ||
export = all | ||
} | ||
``` | ||
## License | ||
MIT |
Sorry, the diff of this file is not supported yet
14432
286
77