From f65b34c87bd552bef2f29e744a67b098d846fbe1 Mon Sep 17 00:00:00 2001
From: kalvens <kalvens@rtvision.com>
Date: Thu, 16 Jun 2022 21:30:11 -0500
Subject: [PATCH] feat: allow loader config to be passed in
---
README.md | 67 +++++++++++++++++++++++++++++-----------------------
package.json | 2 +-
src/index.ts | 6 +++--
3 files changed, 43 insertions(+), 32 deletions(-)
diff --git a/README.md b/README.md
index bdebc8a..d966d36 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,17 @@
-Esbuild Dynamic Import
-=============
-
+# Esbuild Dynamic Import
[](https://npmjs.org/package/@rtvision/esbuild-dynamic-import)
[](https://npmjs.org/package/@rtvision/esbuild-dynamic-import)
[](https://github.com/RtVision/esbuild-dynamic-import/blob/master/package.json)
### Features
+
-Transforms dynamic imports that contain a template string variable into static imports to be processed by esbuild
-Rewrites dynamic imports of js files that contain a template string variable to use absolute path instead
-
+
## Install
+
```sh
npm i @rtvision/esbuild-dynamic-import
```
@@ -28,31 +28,40 @@ DynamicImport({ transformExtensions: ['.vue'], changeRelativeToAbsolute: true, f
## Parameters
- ### transformExtensions
- Transforms all dynamic imports that contain a template varable and the imported file extension
- is included in transformExtensions. I.E. `import(``../../${file}.vue``)`
- All imports found will be turned into static imports of every possible valid import it could be.
- It then uses the static imports instead of node dynamically importing the file at runtime
-
- My use case for this was I wanted esbuild to process the possible imports that are
- .vue (SFC vue) files so they can be processed by the EsbuildVue plugin and made into
- valid javascript that nodejs can run.
-
- ### changeRelativeToAbsolute
- If there exists a dynamic import like `import(``../../${file}.js``)`
- then that in theory could be resolved at runtime just fine by nodejs. The main
- issue is that the relative file path is now different due to the bundled file produced by
- esbuild being in a likely different file location. changeRelativeToAbsolute will fix this issue
- by changing all relative dynamic imports that contain a template literal variable to absolute ones.
-
- For my use case dynamic imports while using vite are needed to be relative for production builds
- especially since Rollup is currently used and Rollup requires all dynamic imports to be relative.
-
- ### Filter
- The Filter parameter is used to reduce the scope of the file search.
-
- I set it to just search our local source directory, but by default it will search through every
- js file that is not marked as external
+### transformExtensions
+
+Transforms all dynamic imports that contain a template varable and the imported file extension
+is included in transformExtensions. I.E. ` import(``../../${file}.vue``) `
+All imports found will be turned into static imports of every possible valid import it could be.
+It then uses the static imports instead of node dynamically importing the file at runtime
+
+My use case for this was I wanted esbuild to process the possible imports that are
+.vue (SFC vue) files so they can be processed by the EsbuildVue plugin and made into
+valid javascript that nodejs can run.
+
+### changeRelativeToAbsolute
+
+If there exists a dynamic import like ` import(``../../${file}.js``) `
+then that in theory could be resolved at runtime just fine by nodejs. The main
+issue is that the relative file path is now different due to the bundled file produced by
+esbuild being in a likely different file location. changeRelativeToAbsolute will fix this issue
+by changing all relative dynamic imports that contain a template literal variable to absolute ones.
+
+For my use case dynamic imports while using vite are needed to be relative for production builds
+especially since Rollup is currently used and Rollup requires all dynamic imports to be relative.
+
+### Filter
+
+The Filter parameter is used to reduce the scope of the file search.
+
+I set it to just search our local source directory, but by default it will search through every
+js file that is not marked as external
+
+### Loader
+
+Need to specify if you need one of esbuild's internal loaders to transform the file after
+the dynamic imports are handled by this plugin. i.e. if your filter is /\.jsx$/ then you need to specify jsx as your loader
## License
+
MIT © RtVision
diff --git a/package.json b/package.json
index dad7778..8f518f9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@rtvision/esbuild-dynamic-import",
"description": "Plugin for transform dynamic imports in esbuild",
- "version": "0.1.5",
+ "version": "0.2.0",
"author": "Kalvens (@kalvenschraut)",
"bugs": "https://github.com/RtVision/esbuild-dynamic-imports/issues",
"scripts": {
diff --git a/src/index.ts b/src/index.ts
index 638af99..46d4198 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,7 +6,8 @@ import { Plugin } from 'esbuild';
export interface DynamicImportConfig {
transformExtensions?: string[],
changeRelativeToAbsolute?: boolean,
- filter?: RegExp
+ filter?: RegExp,
+ loader?: string
}
export default function (config : DynamicImportConfig) : Plugin {
@@ -14,6 +15,7 @@ export default function (config : DynamicImportConfig) : Plugin {
throw new Error('Either transformExtensions needs to be supplied or changeRelativeToAbsolute needs to be true');
}
const filter = config.filter ?? /\.js$/;
+ const loader = config.loader ?? 'js';
return {
name: 'rtvision:dynamic-import',
setup (build) {
@@ -27,7 +29,7 @@ export default function (config : DynamicImportConfig) : Plugin {
// cache busting check
if (!value || value.fileContents !== fileContents) {
const contents = await replaceImports(fileContents, resolveDir, config);
- value = { fileContents, output: { contents } };
+ value = { fileContents, output: { contents, loader } };
cache.set(args.path, value);
}
return value.output;