Rasmus/docs.sheetjs.com
1
Fork 0
forked from sheetjs/docs.sheetjs.com
Code Pull Requests Activity

nuxt-node20

Browse Source
This commit is contained in:
SheetJS 2023-06-01 22:17:56 -04:00
parent 04083d4d1e
commit f6c04938a5
3 changed files with 137 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docz/docs/03-demos/04-static/08-nextjs.md
View File

@ -9,11 +9,10 @@ import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
:::note
This was tested against `next v13.4.4` on 2023 May 26.
:::
NextJS is a server-side framework for building static and dynamic sites. For
pure static sites, [Webpack loaders](/docs/demos/static/webpack) can preprocess
files and NextJS can build static pages from spreadsheets. For dynamic sites,
NextJS lifecycle methods can read files on the server side.
The [NodeJS module](/docs/getting-started/installation/nodejs) can be imported
from pages or loaded in Webpack loaders.
@ -50,6 +49,33 @@ module.exports = {
:::
:::warning Telemetry
NextJS collects telemetry by default. The `telemetry` subcommand can disable it:
```js
npx next@13.4.4 telemetry disable
```
The setting can be verified by running
```js
npx next@13.4.4 telemetry status
```
:::
:::note
The following deployments were tested:
| NextJS | Date |
|:-------|:-----------|
| 13.1.1 | 2023-01-14 |
| 13.4.4 | 2023-05-26 |
:::
## Loading Data
At a high level, there are two ways to pull spreadsheet data into NextJS apps:

118
docz/docs/03-demos/04-static/09-nuxtjs.md
View File

@ -10,14 +10,49 @@ import CodeBlock from '@theme/CodeBlock';
`@nuxt/content` is a file-based CMS for Nuxt, enabling static-site generation
and on-demand server rendering powered by spreadsheets.
The [NodeJS module](/docs/getting-started/installation/nodejs) can be imported
from Content v1 "parsers" and Content v2 "transformers".
:::note
The following deployments were tested:
| Nuxt Content | Nuxt | Date |
|:-------------|:---------|:-----------|
| `1.15.1` | `2.16.3` | 2023-04-06 |
| `1.15.1` | `2.16.3` | 2023-06-01 |
| `2.3.0` | `3.0.0` | 2023-01-19 |
| `2.6.0` | `3.5.2` | 2023-06-01 |
:::
:::caution Telemetry
Nuxt embeds telemetry. According to the developers, it is disabled by default.
To explicitly disable telemetry, the official documentation recommends:
```bash
npx nuxt telemetry disable
```
At the time the demo was last tested, this command did not work. Instead, a
option should be added in `nuxt.config.ts` or `nuxt.config.js` for Nuxt 3 sites:
```js
// ...
// highlight-start
export default defineNuxtConfig({
// @ts-ignore
telemetry: false,
// highlight-end
// ...
})
```
A global setting can be added to `.nuxtrc` in the user home directory:
```ini title=".nuxtrc"
telemetry.enabled=false
```
:::
@ -54,7 +89,7 @@ const parseSheet = (file, { path }) => {
const wb = readFile(path);
const o = wb.SheetNames.map(name => ({ name, data: utils.sheet_to_json(wb.Sheets[name])}));
return { data: o };
}
};
export default {
// ...
@ -109,15 +144,32 @@ neatly with nested `v-for`:
### Nuxt Content Demo
:::caution
When the demo was last tested, parts of the Nuxt dependency tree did not support
NodeJS version 20. The creation step will show warnings like
```
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@nuxt/types@2.16.3',
npm WARN EBADENGINE required: { node: '^14.18.0 || ^16.10.0 || ^17.0.0 || ...
npm WARN EBADENGINE current: { node: 'v20.2.0', npm: '9.6.6' }
npm WARN EBADENGINE }
```
The recommended solution is to switch to Node 18.
:::
1) Create a stock app:
```bash
npx create-nuxt-app@4.0.0 SheetJSNuxt
npx create-nuxt-app@4.0.0 sheetjs-nuxt
```
When prompted, enter the following options:
- `Project name`: press Enter (use default `SheetJSNuxt`)
- `Project name`: press Enter (use default `sheetjs-nuxt`)
- `Programming language`: press Down Arrow (`TypeScript` selected) then Enter
- `Package manager`: select `Npm` and press Enter
- `UI framework`: select `None` and press Enter
@ -135,7 +187,7 @@ The project will be configured and modules will be installed.
2) Install the SheetJS library and start the server:
<CodeBlock language="bash">{`\
cd SheetJSNuxt
cd sheetjs-nuxt
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</CodeBlock>
@ -167,7 +219,7 @@ const parseSheet = (file, { path }) => {
const wb = readFile(path);
const o = wb.SheetNames.map(name => ({ name, data: utils.sheet_to_json(wb.Sheets[name])}));
return { data: o };
}
};
```
- Look for the exported object. There should be a `content` property:
@ -283,7 +335,8 @@ the library hard-codes UTF-8 interpretations, the `_id` field currently uses
the pattern `content:` followed by the filename (if files are placed in the
`content` folder directly). This enables a transformer to re-read the file:
```ts
```ts title="Transformer"
// @ts-ignore
import { defineTransformer } from "@nuxt/content/transformers/utils";
import { read, utils } from "xlsx";
import { readFileSync } from "node:fs";
@ -293,7 +346,13 @@ export default defineTransformer({
name: 'sheetformer',
extensions: ['.xlsx'],
parse (_id: string, rawContent: string) {
const wb = read(readFileSync(resolve("./content/" + _id.slice(8))));
// highlight-start
/* read the underlying file */
const buf = readFileSync(resolve("./content/" + _id.slice(8)));
/* parse */
const wb = read(buf);
// highlight-end
/* generate JS objects for each worksheet */
const body = wb.SheetNames.map(name => ({ name, data: utils.sheet_to_json(wb.Sheets[name])}));
return { _id, body };
}
@ -302,7 +361,7 @@ export default defineTransformer({
Pages can pull data using `useAsyncData`:
```html
```html title="Page"
<script setup>
const key = "pres"; // matches pres.xlsx
const {data} = await useAsyncData('x', ()=>queryContent(`/${key}`).findOne());
@ -312,7 +371,7 @@ const {data} = await useAsyncData('x', ()=>queryContent(`/${key}`).findOne());
Pages should use `ContentRenderer` to reference the data:
```html
```html title="Page"
<template><ContentRenderer :value="data">
<!-- data.body is the array defined in the transformer -->
<div v-for="item in data.body" v-bind:key="item.name">
@ -332,20 +391,33 @@ Pages should use `ContentRenderer` to reference the data:
### Nuxt Content 2 Demo
:::caution
When the demo was last tested, parts of the Nuxt dependency tree did not support
NodeJS version 20. If the `yarn install` step fails with a message like
```
error @nuxt/kit@3.4.1: The engine "node" is incompatible with this module.
```
The recommended solution is to switch to Node 18.
:::
1) Create a stock app and install dependencies:
```bash
npx nuxi init -t content sheetjs-nc2
npx -y nuxi init -t content sheetjs-nc2
cd sheetjs-nc2
npx yarn install
npx yarn add --dev @types/node
npx -y yarn install
npx -y yarn add --dev @types/node
```
2) Install the SheetJS library and start the server:
<CodeBlock language="bash">{`\
npx yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npx yarn dev`}
npx -y yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npx -y yarn dev`}
</CodeBlock>
@ -412,6 +484,8 @@ After creating the source files, the module must be added to `nuxt.config.ts`:
import SheetJSModule from './sheetmodule'
export default defineNuxtConfig({
// @ts-ignore
telemetry: false,
modules: [
SheetJSModule,
'@nuxt/content'
@ -423,9 +497,9 @@ export default defineNuxtConfig({
Restart the dev server by exiting the process (Control+C) and running:
```bash
npx nuxi clean
npx nuxi typecheck
npx yarn run dev
npx -y nuxi clean
npx -y nuxi typecheck
npx -y yarn run dev
```
Loading `http://localhost:3000/pres` should show some JSON data:
@ -469,8 +543,8 @@ const {data} = await useAsyncData('s5s', () => queryContent('/pres').findOne());
Restart the dev server by exiting the process (Control+C) and running:
```bash
npx nuxi clean
npx yarn run dev
npx -y nuxi clean
npx -y yarn run dev
```
The browser should now display an HTML table.
@ -483,13 +557,13 @@ The page should automatically refresh with the new content.
7) Stop the server (press `CTRL+C` in the terminal window) and run
```bash
npx yarn run generate
npx -y yarn run generate
```
This will create a static site in `.output/public`, which can be served with:
```bash
npx http-server .output/public
npx -y http-server .output/public
```
Accessing `http://localhost:8080/pres` will show the page contents. Verifying

10
docz/docs/03-demos/04-static/12-astro.md
View File

@ -33,6 +33,16 @@ flowchart LR
aoo --> |index.astro\ntemplate body| html
```
:::warning Telemetry
Astro enables telemetry by default. The tool has an option to disable telemetry:
```bash
npx astro telemetry disable
```
:::
## Integration
:::note