fix: resolve test configuration issues for ESM/CommonJS compatibility

- Updated test configurations to use CommonJS module resolution
- Added tsx as fallback for ts-node compatibility
- Improved test script cross-platform compatibility with cross-env
- Tests should now work with Node.js 16.x in CI environment

Author: hnviradiya

PR_DESCRIPTION.md

@@ -0,0 +1,39 @@
+# PR Title
+Fix ESM import failure in v4.0.1 (#158)
+
+# PR Description
+
+## 🐛 Fix for Issue #158 - ESM Import Failure
+
+This PR resolves the ESM import failure in v4.0.1 where imports like `import { Component, toNative, Vue } from 'vue-facing-decorator'` would fail with:
+
+```
+SyntaxError: The requested module 'vue-facing-decorator' does not provide an export named 'Component'
+```
+
+### Root Cause
+The package declared `"type": "commonjs"` but shipped ESM files with `export` statements, causing Node.js to fail when parsing them in ESM contexts.
+
+### Solution
+Implemented a proper dual CommonJS/ESM package structure following Node.js best practices:
+
+1. **Dual Package Structure**: Added separate `package.json` files in `dist/esm/` and `dist/cjs/` directories to override module types
+2. **ESM Import Resolution**: Created postbuild script that adds `.js` extensions to relative imports in ESM files (required by Node.js ESM)
+3. **Cross-platform Compatibility**: Updated build scripts to use `npx` and added `cross-env` for Windows support
+
+### Changes Made
+- ✅ **package.json**: Updated build scripts, added postbuild step, added cross-env dependency, bumped to v4.0.2
+- ✅ **scripts/postbuild.js**: New script that creates package.json files and fixes import extensions
+- ✅ **tsconfig/*.json**: Added explicit `moduleResolution: "node"` for consistency
+- ✅ **Cross-platform**: Fixed Windows compatibility issues in build scripts
+
+### Verification
+- ✅ ESM imports work: `import { Component, toNative, Vue } from 'vue-facing-decorator'`
+- ✅ CommonJS imports still work: `const { Component, toNative, Vue } = require('vue-facing-decorator')`
+- ✅ No breaking changes for existing users
+- ✅ Follows Node.js dual package guidelines
+
+### Testing
+The fix has been tested with both ESM and CommonJS imports to ensure compatibility.
+
+Closes #158

package-lock.json

@@ -62,7 +62,7 @@
     "jsdom": "^20.0.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^10.0.0",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
     "vue": "^3.2.37"
   },

package.json

@@ -1,44 +1,47 @@
-import type { VueCons } from '../class'
-import { obtainSlot } from '../slot'
+import type { VueCons } from '../class';
+import { obtainSlot } from '../slot';
 export const Compatible: {
-    fakePrototype?: any,
-
-} = {
-
-}
+    fakePrototype?: any;
+} = {};
 export function compatibleClassDecorator(deco: Function) {
     return function (cons: VueCons, ctx?: ClassDecoratorContext) {
-        if (ctx) {//stage 3 arg is constructor, ctx is ClassDecoratorContext
+        if (ctx) {
+            //stage 3 arg is constructor, ctx is ClassDecoratorContext
             if (ctx.kind !== 'class') {
-                throw 'deco stage 3 class'
+                throw 'deco stage 3 class';
             }
-            const proto = Compatible.fakePrototype ??= {}
-            const slot = obtainSlot(proto)
-            delete Compatible.fakePrototype
+            const proto = (Compatible.fakePrototype ??= {});
+            const slot = obtainSlot(proto);
+            delete Compatible.fakePrototype;
 
-            obtainSlot(cons.prototype, slot)
-            const ret = deco(cons)
+            obtainSlot(cons.prototype, slot);
+            const ret = deco(cons);
 
-            return ret
+            return ret;
+        } else {
+            //stage 2 arg is constructor
+            return deco(cons);
         }
-        else {//stage 2 arg is constructor
-            return deco(cons)
-        }
-    }
+    };
 }
 
 export function compatibleMemberDecorator(deco: Function) {
-    return function (protoOrValue: any, nameOrCtx: ClassMemberDecoratorContext | string) {
-        if (typeof nameOrCtx === 'object') {//stage 3 arg is value, ctx is ClassMemberDecoratorContext
-            const ctx = nameOrCtx
-            const value = protoOrValue
-            const proto = Compatible.fakePrototype ??= {};
-            proto[ctx.name!] = value
-            return deco(proto, ctx.name)
-        } else { //stage 2 arg is prototype, ctx is name stirng
-            const name = nameOrCtx
-            const proto = protoOrValue
-            return deco(proto, name)
+    return function (
+        protoOrValue: any,
+        nameOrCtx: ClassMemberDecoratorContext | string
+    ) {
+        if (typeof nameOrCtx === 'object') {
+            //stage 3 arg is value, ctx is ClassMemberDecoratorContext
+            const ctx = nameOrCtx;
+            const value = protoOrValue;
+            const proto = (Compatible.fakePrototype ??= {});
+            proto[ctx.name!] = value;
+            return deco(proto, ctx.name);
+        } else {
+            //stage 2 arg is prototype, ctx is name stirng
+            const name = nameOrCtx;
+            const proto = protoOrValue;
+            return deco(proto, name);
         }
-    }
-}
+    };
+}

src/deco3/utils.ts

@@ -1,6 +1,7 @@
 {
     "extends": "./tsconfig.json",
     "compilerOptions": {
-        "experimentalDecorators": true
+        "experimentalDecorators": true,
+        "module": "CommonJS"
     }
 }

test/tsconfig/tsconfig.deco-stage2.json

@@ -1,6 +1,7 @@
 {
     "extends":"./tsconfig.json",
     "compilerOptions": {
-        "experimentalDecorators": false
+        "experimentalDecorators": false,
+        "module": "CommonJS"
     }
 }

test/tsconfig/tsconfig.deco-stage3.json

@@ -1,7 +1,8 @@
 {
     "compilerOptions": {
-        "target": "ES6",
-        "moduleResolution": "Bundler",
+        "target": "ES2020",
+        "module": "CommonJS",
+        "moduleResolution": "Node",
         "strict": true,
         "sourceMap": true,
         "lib": [
@@ -11,8 +12,15 @@
         "allowJs": true,
         "noUnusedLocals": false,
         "useDefineForClassFields": true,
-        "jsx": "preserve"
-   
+        "jsx": "preserve",
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true
+    },
+    "ts-node": {
+        "transpileOnly": true,
+        "compilerOptions": {
+            "module": "CommonJS"
+        }
     },
     "files": [
         "../test.ts"