diff --git a/docz/docs/03-demos/04-static/06-webpack.md b/docz/docs/03-demos/04-static/06-webpack.md index 2a63add..8026fa5 100644 --- a/docz/docs/03-demos/04-static/06-webpack.md +++ b/docz/docs/03-demos/04-static/06-webpack.md @@ -1,5 +1,6 @@ --- -title: Webpack +title: Packing Sheets with Webpack +sidebar_label: Webpack pagination_prev: demos/net/index pagination_next: demos/mobile/index sidebar_custom_props: @@ -9,6 +10,19 @@ sidebar_custom_props: import current from '/version.js'; import CodeBlock from '@theme/CodeBlock'; +[Webpack](https://webpack.js.org/) is a modern build tool for generating static +sites. It has a robust JavaScript-powered plugin system[^1] + +[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing +data from spreadsheets. + +This demo uses Webpack and SheetJS to pull data from a spreadsheet and display +the content in an HTML table. We'll explore how to load SheetJS in a Webpack 5 +Asset Plugin and generate data for use in webpages. + +The ["Webpack 5 Demo"](#webpack-5-demo) creates a complete website powered by a +XLSX spreadsheet. + :::info pass This demo covers static asset imports. For processing files in the browser, the @@ -17,15 +31,15 @@ importing the SheetJS library in a browser script. ::: -The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported -from Webpack loader scripts. - ## Webpack 5 Asset Module Webpack 5 supports asset modules. With a special option, the loader will receive NodeJS Buffers that can be parsed. The dev server will even watch the files and reload the page in development mode! +The [SheetJS NodeJS module](/docs/getting-started/installation/nodejs) can be +imported from Webpack loader scripts. + The following diagram depicts the workbook waltz: ```mermaid @@ -100,11 +114,12 @@ module.exports = { The SheetJS loader script must export a `raw` property that is set to `true`. -The base export is expected to be the loader function. That function receives -the file contents as a Buffer, which can be parsed with `XLSX.read`. Typically -this script is CommonJS so the `require` form should be used. +The base export is expected to be the loader function. The loader receives the +file bytes as a Buffer, which can be parsed with the SheetJS `read` method[^2]. +`read` returns a SheetJS workbook object[^3]. -The loader in this demo will parse the first worksheet: +The loader in this demo will parse the workbook, pull the first worksheet, and +generate an array of row objects using the `sheet_to_json` method[^4]: ```js title="sheetjs-loader.js" const XLSX = require("xlsx"); @@ -144,7 +159,7 @@ document.body.appendChild(elt); :::note -This demo was last tested on 2023 May 24 against Webpack 5.84.0 +This demo was last tested on 2023 October 10 against Webpack 5.88.2 ::: @@ -156,7 +171,7 @@ This demo was last tested on 2023 May 24 against Webpack 5.84.0 mkdir sheetjs-wp5 cd sheetjs-wp5 npm init -y -npm install webpack@5.84.0 webpack-cli@5.1.1 webpack-dev-server@4.15.0 --save +npm install webpack@5.88.2 webpack-cli@5.1.4 webpack-dev-server@4.15.1 --save mkdir -p dist mkdir -p src mkdir -p data @@ -303,3 +318,8 @@ the file and save. The page will not automatically update. To verify that the data was added to the page, append `main.js` to the URL (`http://localhost:8080/main.js`) and view the source. The source will include president names. It will not include SheetJS library references! + +[^1]: See ["Plugins"](https://webpack.js.org/concepts/plugins/) in the Webpack documentation. +[^2]: See [`read` in "Reading Files"](/docs/api/parse-options) +[^3]: See ["Workbook Object"](/docs/csf/book) +[^4]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output) diff --git a/docz/docs/03-demos/06-desktop/09-cli.md b/docz/docs/03-demos/06-desktop/09-cli.md index 8db5c89..110c5a2 100644 --- a/docz/docs/03-demos/06-desktop/09-cli.md +++ b/docz/docs/03-demos/06-desktop/09-cli.md @@ -17,6 +17,14 @@ it is feasible to build command-line tools for various workflows. This demo covers a number of strategies for building standalone processors. The goal is to generate CSV output from an arbitrary spreadsheet file. +:::tip pass + +The [`xlsx-cli`](https://cdn.sheetjs.com/xlsx-cli/) NodeJS script is available +as a package on the SheetJS CDN. It is an easy-to-use command-line tool for +translating files between supported spreadsheet file formats. + +::: + ## NodeJS There are a few popular tools for compiling NodeJS scripts to CLI programs. @@ -53,7 +61,7 @@ This demo was tested in the following deployments: | Architecture | Version | Node Target | Date | |:-------------|:-------------|:------------|:-----------| -| `darwin-x64` | `4.0.0-rc.2` | `14.15.3` | 2023-05-08 | +| `darwin-x64` | `4.0.0-rc.2` | `14.15.3` | 2023-10-10 | | `darwin-arm` | `4.0.0-rc.2` | `20.7.0` | 2023-09-25 | | `win10-x64` | `4.0.0-rc.2` | `14.15.3` | 2023-10-09 | | `win11-arm` | `4.0.0-rc.2` | `18.17.1` | 2023-09-25 | diff --git a/docz/static/cli/xlsx-cli.js b/docz/static/cli/xlsx-cli.js index 3eb5e0f..638e12f 100644 --- a/docz/static/cli/xlsx-cli.js +++ b/docz/static/cli/xlsx-cli.js @@ -61,6 +61,7 @@ program .option('-F, --field-sep ', 'CSV field separator', ",") .option('-R, --row-sep ', 'CSV row separator', "\n") .option('-n, --sheet-rows ', 'Number of rows to process (0=all rows)') + .option('--date-format ', 'output date format, for example yyyy-mm-dd') .option('--codepage ', 'default to specified codepage when ambiguous') .option('--sst', 'generate shared string table for XLS* formats') .option('--compress', 'use compression when writing XLSX/M/B and ODS') @@ -154,6 +155,7 @@ if(program.all) { } if(program.sparse) opts.dense = false; else opts.dense = true; if(program.codepage) opts.codepage = +program.codepage; +if(program.dateFormat) opts.dateNF = program.dateFormat; if(program.dev) { opts.WTF = true;