docs.sheetjs.com/docz/docs/03-demos/02-frontend/19-bundler/21-swcpack.md

title	sidebar_label	pagination_prev	pagination_next	sidebar_position
Bundling Sheets with SWC	SWC spack	demos/index	demos/grid/index	21

import current from '/version.js'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import CodeBlock from '@theme/CodeBlock';

SWC¹ is a JS toolchain. SWC provides spack (formally called "swcpack") for bundling scripts.

SheetJS is a JavaScript library for reading and writing data from spreadsheets.

This demo uses spack and SheetJS to export data. We'll explore how to bundle SheetJS in a site using spack and how to export data to spreadsheets.

:::note pass

This demo focuses on integration details with the spack bundler.

The demos follow the "Export Tutorial", which covers SheetJS library usage in more detail.

:::

:::note Tested Deployments

This demo was tested in the following environments:

Version	Date
1.2.246	2023-12-04

:::

Integration Details

The "Frameworks" section covers installation with Yarn and other package managers.

After installing the SheetJS module in a SWC spack project, import statements can load relevant parts of the library.

Projects that import data will use methods such as read² to parse workbooks and sheet_to_json³ to generate usable data from files. As sheet_to_json is part of the utils object, the required import is:

import { read, utils } from 'xlsx';

Projects that export data will use methods such as json_to_sheet⁴ to generate worksheets and writeFile⁵ to export files. As json_to_sheet is part of the utils object, the required import is:

import { utils, writeFile } from 'xlsx';

:::danger pass

When this demo was tested against the @swc/core@1.3.100, spack crashed:

thread '<unnamed>' panicked at 'cannot access a scoped thread local variable without calling `set` first',

This is a bug in SWC

Until the bug is fixed, it is strongly recommended to use @swc/core@1.2.246.

:::

Complete Example

0. Initialize a new project:

mkdir sheetjs-spack
cd sheetjs-spack
npm init -y

1. Install the dependencies using a package manager:

{`\ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.2.246`} {`\ pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.2.246`} {`\ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.2.246`}

:::note pass

The regenerator-runtime dependency is used for transpiling fetch and is not required if the interface code does not use fetch or Promises.

:::

2. Save the following to index.js:

import { utils, version, writeFileXLSX } from 'xlsx';

document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
const url = "https://docs.sheetjs.com/executive.json";
const raw_data = await (await fetch(url)).json();

/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));

/* flatten objects */
const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

/* generate worksheet and workbook */
const worksheet = utils.json_to_sheet(rows);
const workbook = utils.book_new();
utils.book_append_sheet(workbook, worksheet, "Dates");

/* fix headers */
utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];

/* create an XLSX file and try to save to Presidents.xlsx */
writeFileXLSX(workbook, "Presidents.xlsx");
});

3. Create an spack.config.js config file:

module.exports = ({
  entry: {
    'web': __dirname + '/index.js',
  },
  output: {
    path: __dirname + '/lib'
  },
  module: {},
});

4. Build for production:

npx spack

This command will create the script lib/web.js

5. Create a small HTML page that loads the generated script:

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <h1>SheetJS Presidents Demo</h1>
    <button id="xport">Click here to export</button>
    <script src="lib/web.js"></script>
  </body>
</html>

6. Start a local HTTP server, then go to http://localhost:8080/

npx http-server .

Click on "Click here to export" to generate a file.

---

1. See "Bundling Configuration" in the SWC documentation for more details. ↩︎

2. See read in "Reading Files" ↩︎

3. See sheet_to_json in "Utilities" ↩︎

4. See json_to_sheet in "Utilities" ↩︎

5. See writeFile in "Writing Files" ↩︎