#!/bin/bash
# https://docs.sheetjs.com/docs/demos/frontend/svelte
# NOTE: the svelte scripts explicitly attach id="xport" to the buttons
cd /tmp
rm -rf sheetjs-fe-svelte
mkdir sheetjs-fe-svelte
cd sheetjs-fe-svelte

rm -rf sheetjs-svelte
npm create -y vite@latest sheetjs-svelte -- --template svelte-ts --no-rolldown --no-interactive
cd sheetjs-svelte
npm i
npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
npm i --save puppeteer express@4

cat >test.cjs <<EOF
const puppeteer = require('puppeteer');
const express = require('express');
const app = express();
app.use(express.static('./dist/'));
app.listen(7262, async() => {
  await new Promise((res,rej) => setTimeout(res, 1000));
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.on("console", msg => console.log("PAGE LOG:", msg.text()));
  await page.setViewport({width: 1920, height: 1080});
  const client = await page.target().createCDPSession();
  await client.send('Browser.setDownloadBehavior', {
    behavior: 'allow',
    downloadPath: require("path").resolve('./')
  });
  page.on('request', req => console.log(req.url()));
  await page.goto('http://localhost:7262/');
  await new Promise((res,rej) => setTimeout(res, 1000));
  await page.click("#xport");
  await new Promise((res,rej) => setTimeout(res, 1000));
  await browser.close();
  process.exit();
});
EOF

# Array of Objects

cat >src/App.svelte <<EOF
<script>
import { onMount } from 'svelte';
import { read, utils, writeFileXLSX } from 'xlsx';

/* the component state is an array of presidents */
let pres = [];

/* Fetch and update the state once */
onMount(async() => {
  const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer();
  const wb = read(f); // parse the array buffer
  const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
  pres = utils.sheet_to_json(ws); // generate objects and update state
});

/* get state data and export to XLSX */
function exportFile() {
  const ws = utils.json_to_sheet(pres);
  const wb = utils.book_new();
  utils.book_append_sheet(wb, ws, "Data");
  writeFileXLSX(wb, "SheetJSSvelteAoO.xlsx");
}
</script>

<main>
  <table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
  {#each pres as p}<tr>
    <td>{p.Name}</td>
    <td>{p.Index}</td>
  </tr>{/each}
  </tbody><tfoot><tr><td colSpan={2}>
  <button id="xport" on:click={exportFile}>Export XLSX</button>
  </td></tr></tfoot></table>
</main>
EOF

npm run build

node test.cjs
npx -y xlsx-cli SheetJSSvelteAoO.xlsx

# HTML

cat >src/App.svelte <<EOF
<script>
import { onMount } from 'svelte';
import { read, utils, writeFileXLSX } from 'xlsx';

let html = "";
let tbl;

/* Fetch and update the state once */
onMount(async() => {
  const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer();
  const wb = read(f); // parse the array buffer
  const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
  // highlight-start
  html = utils.sheet_to_html(ws); // generate HTML and update state
  // highlight-end
});

/* get state data and export to XLSX */
function exportFile() {
  // highlight-start
  const elt = tbl.getElementsByTagName("TABLE")[0];
  const wb = utils.table_to_book(elt);
  // highlight-end
  writeFileXLSX(wb, "SheetJSSvelteHTML.xlsx");
}
</script>

<main>
  <button id="xport" on:click={exportFile}>Export XLSX</button>
  <!-- highlight-start -->
  <div bind:this={tbl}>{@html html}</div>
  <!-- highlight-end -->
</main>
EOF

npm run build

node test.cjs
npx -y xlsx-cli SheetJSSvelteHTML.xlsx