Merge pull request #66 from HichemTab-tech/fix-compatibility-issues

Fix compatibility issues with default imports vs partial imports

Author: HichemTab-tech

package.json

@@ -15,7 +15,7 @@
     },
     "./vite-plugin": {
       "types": "./dist/vite-plugin.d.ts",
-      "import": "./dist/vite-plugin.js",
+      "import": "./dist/vite-plugin.mjs",
       "require": "./dist/vite-plugin.js"
     }
   },

src/vite-plugin.ts

@@ -1,6 +1,7 @@
 import { PluginOption } from "vite";
 import { transform } from "./ts-transformer.js";
 
+// noinspection JSUnusedGlobalSymbols
 /**
  * A function that provides a Vite plugin for transforming TypeScript files at runtime.
  * The plugin is named "vite-plugin-ts-runtime-picker" and it is enforced to run at the 'pre' stage.
@@ -11,7 +12,7 @@ import { transform } from "./ts-transformer.js";
  *
  * @returns {PluginOption} A Vite plugin configuration object for handling TypeScript runtime transformations.
  */
-function TsRuntimePickerVitePlugin(): PluginOption {
+export default function TsRuntimePickerVitePlugin(): PluginOption {
     return {
         name: "vite-plugin-ts-runtime-picker",
         enforce: "pre",
@@ -29,4 +30,4 @@ function TsRuntimePickerVitePlugin(): PluginOption {
     } as PluginOption;
 }
 
-export { TsRuntimePickerVitePlugin, TsRuntimePickerVitePlugin as default };
+export { TsRuntimePickerVitePlugin };

test/vite-plugin.test.ts

@@ -15,8 +15,11 @@ describe('TsRuntimePickerVitePlugin', () => {
   it('should create a Vite plugin with the correct configuration', () => {
     const plugin = TsRuntimePickerVitePlugin();
 
+    // @ts-ignore
     expect(plugin.name).toBe('vite-plugin-ts-runtime-picker');
+    // @ts-ignore
     expect(plugin.enforce).toBe('pre');
+    // @ts-ignore
     expect(typeof plugin.transform).toBe('function');
   });
 
@@ -25,6 +28,7 @@ describe('TsRuntimePickerVitePlugin', () => {
     const code = 'const x = 1;';
     const id = 'file.ts';
 
+    // @ts-ignore
     const result = plugin.transform(code, id);
 
     expect(transformer.transform).toHaveBeenCalledWith(code, id);
@@ -39,6 +43,7 @@ describe('TsRuntimePickerVitePlugin', () => {
     const code = 'const x = <div />;';
     const id = 'file.tsx';
 
+    // @ts-ignore
     const result = plugin.transform(code, id);
 
     expect(transformer.transform).toHaveBeenCalledWith(code, id);
@@ -53,6 +58,7 @@ describe('TsRuntimePickerVitePlugin', () => {
     const code = 'const x = 1;';
     const id = 'file.js';
 
+    // @ts-ignore
     const result = plugin.transform(code, id);
 
     expect(transformer.transform).not.toHaveBeenCalled();

test/webpack-loader.test.ts

@@ -17,6 +17,7 @@ describe('TsRuntimePickerWebpackLoader', () => {
 
     // Create a mock loader context
     callback = vi.fn();
+    // noinspection JSUnusedGlobalSymbols
     loaderContext = {
       resourcePath: 'file.ts',
       async: () => callback

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",                // Use the latest JavaScript features
-    "module": "CommonJS",                // Use ESNext modules
+    "module": "ESNext",                // Use ESNext modules
     "moduleResolution": "Node",        // Resolve modules using Node.js rules
     "lib": ["ESNext", "DOM"],          // Include necessary libraries
     "outDir": "./dist",                // Output directory

vite.config.ts

@@ -18,8 +18,8 @@ export default defineConfig({
         'vite-plugin': resolve(__dirname, 'src/vite-plugin.ts'),
         'webpack-loader': resolve(__dirname, 'src/webpack-loader.ts')
       },
-      formats: ['cjs'],
-      fileName: (_format, entryName) => `${entryName}.js`
+      formats: ['cjs', 'es'],
+      fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'mjs' : 'js'}`
     },
     outDir: 'dist',
     emptyOutDir: true,