Merge pull request #9 from AS-Devs/upgrade/bugfix-plan

Upgrade/bugfix plan

Author: susanta96

.github/workflows/publish.yml

@@ -4,17 +4,17 @@ name: NPM package Publish
 
 on:
   push:
-    branches: ["main"]
+    branches: [ "main" ]
   pull_request:
-    branches: ["main"]
+    branches: [ "main" ]
 
 jobs:
   quality:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [ 18.x ]
 
     steps:
       - uses: actions/checkout@v3
@@ -28,15 +28,16 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     if: ${{github.ref == 'refs/heads/main'}}
-    needs: [quality]
+    needs: [ quality ]
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 18.x
           cache: "npm"
       - run: npm ci
+      - run: npm run build
       - run: npm run semantic-release
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -2,4 +2,8 @@
 node_modules
 *.log
 .idea/
-coverage/
+coverage/
+.claude/
+CLAUDE.md
+docs/
+src-js/

.npmignore

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 AS Developers
+Copyright (c) 2026 AS Developers
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE

@@ -25,6 +25,75 @@ pnpm add react-xlsx-wrapper@latest
 yarn add react-xlsx-wrapper@latest
 ```
 
+## Framework Support
+
+### Next.js (App Router)
+
+This library is a **client-only** component — it uses browser APIs (`Blob`, `URL.createObjectURL`) to trigger downloads. Wrap it with `'use client'` in your component:
+
+```tsx
+'use client';
+
+import { ExcelFile, ExcelSheet, ExcelColumn } from 'react-xlsx-wrapper';
+
+export function ExportButton({ data }: { data: any[] }) {
+  return (
+    <ExcelFile filename="report" element={<button>Download</button>}>
+      <ExcelSheet name="Sheet1" data={data}>
+        <ExcelColumn label="Name" value="name" />
+        <ExcelColumn label="Email" value="email" />
+      </ExcelSheet>
+    </ExcelFile>
+  );
+}
+```
+
+If the parent is a Server Component, lazy-load to avoid SSR:
+
+```tsx
+import dynamic from 'next/dynamic';
+
+const ExportButton = dynamic(() => import('./ExportButton'), { ssr: false });
+```
+
+> **Note:** Server-side Excel generation (e.g. from an API route) is not supported. The library is designed for browser downloads only.
+
+### Vite
+
+Works out of the box with Vite via the ESM entry point (`dist/index.mjs`). No additional config needed.
+
+If you encounter CJS interop warnings with an older version of this package, add to `vite.config.ts`:
+
+```ts
+optimizeDeps: { include: ['react-xlsx-wrapper', 'xlsx-js-style'] }
+```
+
+### TanStack (Router / Query / Table)
+
+Fully compatible. Pass filtered/sorted rows from TanStack Table directly as the `data` prop:
+
+```tsx
+'use client'; // if using Next.js App Router
+
+import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import { ExcelFile, ExcelSheet, ExcelColumn } from 'react-xlsx-wrapper';
+
+export function DataTable({ data }) {
+  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+
+  return (
+    <>
+      {/* your table UI */}
+      <ExcelFile filename="export" element={<button>Export</button>}>
+        <ExcelSheet name="Data" data={table.getFilteredRowModel().rows.map(r => r.original)}>
+          <ExcelColumn label="Name" value="name" />
+        </ExcelSheet>
+      </ExcelFile>
+    </>
+  );
+}
+```
+
 ## Code Examples
 
 - [Simple Excel Export](examples/simple_excel_export_01.md)