From ae2a3e7177283fe32b2bd893c6e244224a4e4e34 Mon Sep 17 00:00:00 2001 From: SheetJS Date: Mon, 25 Jul 2022 16:48:10 -0400 Subject: [PATCH] snowpack --- .../03-demos/07-headless.md | 2 +- .../04-getting-started/03-demos/08-ml.mdx | 4 +- .../04-getting-started/03-demos/09-bundler.md | 105 +++++++++++++++++- .../03-demos/10-database.md | 11 +- .../docs/04-getting-started/03-demos/index.md | 1 + docz/docs/06-solutions/05-output.md | 2 +- 6 files changed, 112 insertions(+), 13 deletions(-) diff --git a/docz/docs/04-getting-started/03-demos/07-headless.md b/docz/docs/04-getting-started/03-demos/07-headless.md index 23a04f3..cc4725a 100644 --- a/docz/docs/04-getting-started/03-demos/07-headless.md +++ b/docz/docs/04-getting-started/03-demos/07-headless.md @@ -154,7 +154,7 @@ const { webkit } = require('playwright'); // import desired browser PhantomJS is a headless web browser powered by WebKit. Standalone binaries are available at -:::warning +:::warning This information is provided for legacy deployments. PhantomJS development has been suspended and there are known vulnerabilities, so new projects should use diff --git a/docz/docs/04-getting-started/03-demos/08-ml.mdx b/docz/docs/04-getting-started/03-demos/08-ml.mdx index 6e775a4..c951ad7 100644 --- a/docz/docs/04-getting-started/03-demos/08-ml.mdx +++ b/docz/docs/04-getting-started/03-demos/08-ml.mdx @@ -77,7 +77,7 @@ function SheetJSToTFJSCSV() { model.compile({ optimizer: tf.train.sgd(0.000001), loss: 'meanSquaredError' }); let base = output; await model.fitDataset(flat, { epochs: 10, callbacks: { onEpochEnd: async (epoch, logs) => { - setOutput(base += "\n" + epoch + ":" + logs.loss); + setOutput(base += "\n" + epoch + ":" + logs.loss); }}}); model.summary(); }); @@ -165,7 +165,7 @@ async function getData() { :::caution While it is more efficient to use low-level operations, JS or CSV interchange -is strongly recommended when possible. +is strongly recommended when possible. ::: diff --git a/docz/docs/04-getting-started/03-demos/09-bundler.md b/docz/docs/04-getting-started/03-demos/09-bundler.md index 36c58c4..10445a0 100644 --- a/docz/docs/04-getting-started/03-demos/09-bundler.md +++ b/docz/docs/04-getting-started/03-demos/09-bundler.md @@ -77,7 +77,7 @@ npx browserify xlsxworker.js > worker.js 4) Spin up a local web server: ``` -npx http-server +npx http-server ``` 5) Access the site and use the file input element to @@ -343,7 +343,7 @@ Parcel Bundler should play nice with SheetJS out of the box. :::warning Parcel Bug -Errors of the form `Could not statically evaluate fs call` stem from a +Errors of the form `Could not statically evaluate fs call` stem from a [parcel bug](https://github.com/parcel-bundler/parcel/pull/523). Upgrade to Parcel version 1.5.0 or later. @@ -429,4 +429,103 @@ npx -y parcel index.html 4) Access the page listed in the output (typically `http://localhost:1234`) and click the "Click to Export!" button to generate a file. - \ No newline at end of file + + +## Snowpack + +Snowpack works with no caveats. + +
Complete Example (click to show) + +1) Install the tarball using a package manager: + + + +
{`\
+$ npm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+
+ + +
{`\
+$ pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+
+ + +
{`\
+$ yarn add --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+
+ + + +2) Save the following to `index.js`: + +```js title="index.js" +// highlight-next-line +import { set_fs, utils, version, writeFile } from 'xlsx/xlsx.mjs'; + +document.getElementById("xport").addEventListener("click", async() => { +/* fetch JSON data and parse */ +const url = "https://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")); + +/* 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 */ +writeFile(workbook, "Presidents.xlsx"); +}); +``` + +3) Create a small HTML page that loads the script. Save to `index.html`: + +```html title="index.html" + + + + +

SheetJS Presidents Demo

+ + + + +``` + +:::note + +Unlike other bundlers, Snowpack requires a full page including `HEAD` element. + +::: + +4) Build for production: + +```bash +npx snowpack build +``` + +5) Start a local HTTP server, then go to http://localhost:8080/ + +```bash +npx http-server build/ +``` + +Click on "Click here to export" to generate a file. + +
diff --git a/docz/docs/04-getting-started/03-demos/10-database.md b/docz/docs/04-getting-started/03-demos/10-database.md index 2b72523..3b1b6d1 100644 --- a/docz/docs/04-getting-started/03-demos/10-database.md +++ b/docz/docs/04-getting-started/03-demos/10-database.md @@ -121,7 +121,7 @@ function generate_sql(ws, wsname) { const types = {}, hdr = []; // loop across each row object - aoo.forEach(row => + aoo.forEach(row => // Object.entries returns a row of [key, value] pairs. Loop across those Object.entries(row).forEach(([k,v]) => { @@ -147,7 +147,7 @@ function generate_sql(ws, wsname) { // The final array consists of the CREATE TABLE query and a series of INSERTs return [ // generate CREATE TABLE query and return batch - `CREATE TABLE \`${wsname}\` (${hdr.map(h => + `CREATE TABLE \`${wsname}\` (${hdr.map(h => // column name must be wrapped in backticks `\`${h}\` ${PG[types[h]]}` ).join(", ")});` @@ -164,7 +164,7 @@ function generate_sql(ws, wsname) { fields.push(`\`${k}\``); // when the field type is numeric, `true` -> 1 and `false` -> 0 if(types[k] == "n") values.push(typeof v == "boolean" ? (v ? 1 : 0) : v); - // otherwise, + // otherwise, else values.push(`'${v.toString().replaceAll("'", "''")}'`); }) if(fields.length) return `INSERT INTO \`${wsname}\` (${fields.join(", ")}) VALUES (${values.join(", ")})`; @@ -371,8 +371,8 @@ const db = openDatabase('sheetql', '1.0', 'SheetJS WebSQL Test', 2097152); const stmts = generate_sql(ws, wsname); // NOTE: tx.executeSql and db.transaction use callbacks. This wraps in Promises for(var i = 0; i < stmts.length; ++i) await new Promise((res, rej) => { - db.transaction(tx => - tx.executeSql(stmts[i], [], + db.transaction(tx => + tx.executeSql(stmts[i], [], (tx, data) => res(data), // if the query is successful, return the data (tx, err) => rej(err) // if the query fails, reject with the error )); @@ -528,7 +528,6 @@ const wb = XLSX.utils.json_to_sheet(aoo); ``` - ### MongoDB Structured Collections :::warning MongoDB Relicense diff --git a/docz/docs/04-getting-started/03-demos/index.md b/docz/docs/04-getting-started/03-demos/index.md index 0623fbc..146a4e6 100644 --- a/docz/docs/04-getting-started/03-demos/index.md +++ b/docz/docs/04-getting-started/03-demos/index.md @@ -59,6 +59,7 @@ The demo projects include small runnable examples and short explainers. - [`parcel`](./bundler#parcel) - [`requirejs`](https://github.com/SheetJS/SheetJS/tree/master/demos/requirejs/) - [`rollup`](https://github.com/SheetJS/SheetJS/tree/master/demos/rollup/) +- [`snowpack`](./bundler#snowpack) - [`systemjs`](https://github.com/SheetJS/SheetJS/tree/master/demos/systemjs/) - [`typescript`](https://github.com/SheetJS/SheetJS/tree/master/demos/typescript/) - [`webpack 2.x`](https://github.com/SheetJS/SheetJS/tree/master/demos/webpack/) diff --git a/docz/docs/06-solutions/05-output.md b/docz/docs/06-solutions/05-output.md index a45b35a..60b7348 100644 --- a/docz/docs/06-solutions/05-output.md +++ b/docz/docs/06-solutions/05-output.md @@ -465,7 +465,7 @@ export default { - +