diff --git a/docz/docs/03-demos/01-frontend/03-angular.md b/docz/docs/03-demos/01-frontend/03-angular.md index fb9bf8e..88e8a45 100644 --- a/docz/docs/03-demos/01-frontend/03-angular.md +++ b/docz/docs/03-demos/01-frontend/03-angular.md @@ -28,6 +28,17 @@ should be directed to the Angular project. ::: +:::caution + +Angular CLI enables telemetry by default. When using a recent version, disable +analytics globally through the CLI tool before creating a new project: + +```bash +npx @angular/cli analytics disable -g +``` + +::: + ## Installation @@ -137,6 +148,40 @@ export class AppComponent { } ``` +
How to run the example (click to show) + +:::note + +This demo was last run on 2023 February 21 using Angular CLI `15.1.6` + +::: + +0) Disable telemetry with `npx @angular/cli analytics disable -g` + +1) Run `ng new --minimal --defaults --no-interactive sheetjs-angular`. + +2) Install the SheetJS dependency and start the dev server: + +```bash +cd sheetjs-angular +npm install +npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz +npx @angular/cli analytics disable +npm start +``` + +3) Open a web browser and access the displayed URL (`http://localhost:4200`) + +4) Replace `src/app/app.component.ts` with the code snippet. + +The page will refresh and show a table with an Export button. Click the button +and the page will attempt to download `SheetJSAngularAoA.xlsx`. + +5) Build the site with `npm run build`, then test with `npx http-server dist`. +Access `http://localhost:8080` with a web browser to test the bundled site. + +
+ ### HTML The main disadvantage of the Array of Objects approach is the specific nature @@ -191,6 +236,40 @@ export class AppComponent { } ``` +
How to run the example (click to show) + +:::note + +This demo was last run on 2023 February 21 using Angular CLI `15.1.6` + +::: + +0) Disable telemetry with `npx @angular/cli analytics disable -g` + +1) Run `ng new --minimal --defaults --no-interactive sheetjs-angular`. + +2) Install the SheetJS dependency and start the dev server: + +```bash +cd sheetjs-angular +npm install +npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz +npx @angular/cli analytics disable +npm start +``` + +3) Open a web browser and access the displayed URL (`http://localhost:4200`) + +4) Replace `src/app/app.component.ts` with the code snippet. + +The page will refresh and show a table with an Export button. Click the button +and the page will attempt to download `SheetJSAngularHTML.xlsx`. + +5) Build the site with `npm run build`, then test with `npx http-server dist`. +Access `http://localhost:8080` with a web browser to test the bundled site. + +
+ ### Rows and Columns Some data grids and UI components split worksheet state in two parts: an array @@ -345,7 +424,7 @@ cd SheetJSAngular -- [`package.json.ng2`](pathname:///angular/versions/package.json-ng2) save to `package.json` +- [`package.json-ng2`](pathname:///angular/versions/package.json-ng2) save to `package.json` - [`polyfills.ts-ng2`](pathname:///angular/versions/polyfills.ts-ng2) save to `src/polyfills.ts` ```bash @@ -356,7 +435,7 @@ curl -o src/polyfills.ts -L https://docs.sheetjs.com/angular/versions/polyfills. -- [`package.json.ng4`](pathname:///angular/versions/package.json-ng4) save to `package.json` +- [`package.json-ng4`](pathname:///angular/versions/package.json-ng4) save to `package.json` - [`polyfills.ts-ng4`](pathname:///angular/versions/polyfills.ts-ng4) save to `src/polyfills.ts` ```bash @@ -367,7 +446,7 @@ curl -o src/polyfills.ts -L https://docs.sheetjs.com/angular/versions/polyfills. -- [`package.json.ng5`](pathname:///angular/versions/package.json-ng5) save to `package.json` +- [`package.json-ng5`](pathname:///angular/versions/package.json-ng5) save to `package.json` - [`polyfills.ts-ng5`](pathname:///angular/versions/polyfills.ts-ng5) save to `src/polyfills.ts` ```bash @@ -378,7 +457,7 @@ curl -o src/polyfills.ts -L https://docs.sheetjs.com/angular/versions/polyfills. -- [`package.json.ng6`](pathname:///angular/versions/package.json-ng6) save to `package.json` +- [`package.json-ng6`](pathname:///angular/versions/package.json-ng6) save to `package.json` - [`polyfills.ts-ng6`](pathname:///angular/versions/polyfills.ts-ng6) save to `src/polyfills.ts` - [`angular.json-ng6`](pathname:///angular/versions/angular.json-ng6) save to `angular.json` @@ -391,7 +470,7 @@ curl -o angular.json -L https://docs.sheetjs.com/angular/versions/angular.json-n -- [`package.json.ng7`](pathname:///angular/versions/package.json-ng7) save to `package.json` +- [`package.json-ng7`](pathname:///angular/versions/package.json-ng7) save to `package.json` - [`polyfills.ts-ng7`](pathname:///angular/versions/polyfills.ts-ng7) save to `src/polyfills.ts` - [`angular.json-ng7`](pathname:///angular/versions/angular.json-ng7) save to `angular.json` @@ -404,7 +483,7 @@ curl -o angular.json -L https://docs.sheetjs.com/angular/versions/angular.json-n -- [`package.json.ng8`](pathname:///angular/versions/package.json-ng8) save to `package.json` +- [`package.json-ng8`](pathname:///angular/versions/package.json-ng8) save to `package.json` - [`polyfills.ts-ng8`](pathname:///angular/versions/polyfills.ts-ng8) save to `src/polyfills.ts` - [`angular.json-ng8`](pathname:///angular/versions/angular.json-ng8) save to `angular.json` - [`tsconfig.app.json-ng8`](pathname:///angular/versions/tsconfig.app.json-ng8) save to `tsconfig.app.json` @@ -419,7 +498,7 @@ curl -o tsconfig.app.json -L https://docs.sheetjs.com/angular/versions/tsconfig. -- [`package.json.ng9`](pathname:///angular/versions/package.json-ng9) save to `package.json` +- [`package.json-ng9`](pathname:///angular/versions/package.json-ng9) save to `package.json` - [`polyfills.ts-ng9`](pathname:///angular/versions/polyfills.ts-ng9) save to `src/polyfills.ts` - [`angular.json-ng9`](pathname:///angular/versions/angular.json-ng9) save to `angular.json` - [`tsconfig.app.json-ng9`](pathname:///angular/versions/tsconfig.app.json-ng9) save to `tsconfig.app.json` @@ -434,7 +513,7 @@ curl -o tsconfig.app.json -L https://docs.sheetjs.com/angular/versions/tsconfig. -- [`package.json.ng10`](pathname:///angular/versions/package.json-ng10) save to `package.json` +- [`package.json-ng10`](pathname:///angular/versions/package.json-ng10) save to `package.json` - [`polyfills.ts-ng10`](pathname:///angular/versions/polyfills.ts-ng10) save to `src/polyfills.ts` - [`angular.json-ng10`](pathname:///angular/versions/angular.json-ng10) save to `angular.json` - [`tsconfig.app.json-ng10`](pathname:///angular/versions/tsconfig.app.json-ng10) save to `tsconfig.app.json` @@ -449,7 +528,7 @@ curl -o tsconfig.app.json -L https://docs.sheetjs.com/angular/versions/tsconfig. -- [`package.json.ng11`](pathname:///angular/versions/package.json-ng11) save to `package.json` +- [`package.json-ng11`](pathname:///angular/versions/package.json-ng11) save to `package.json` - [`polyfills.ts-ng11`](pathname:///angular/versions/polyfills.ts-ng11) save to `src/polyfills.ts` - [`angular.json-ng11`](pathname:///angular/versions/angular.json-ng11) save to `angular.json` - [`tsconfig.app.json-ng11`](pathname:///angular/versions/tsconfig.app.json-ng11) save to `tsconfig.app.json` @@ -464,7 +543,7 @@ curl -o tsconfig.app.json -L https://docs.sheetjs.com/angular/versions/tsconfig. -- [`package.json.ng12`](pathname:///angular/versions/package.json-ng12) save to `package.json` +- [`package.json-ng12`](pathname:///angular/versions/package.json-ng12) save to `package.json` - [`polyfills.ts-ng12`](pathname:///angular/versions/polyfills.ts-ng12) save to `src/polyfills.ts` - [`angular.json-ng12`](pathname:///angular/versions/angular.json-ng12) save to `angular.json` - [`tsconfig.app.json-ng12`](pathname:///angular/versions/tsconfig.app.json-ng12) save to `tsconfig.app.json` @@ -479,7 +558,7 @@ curl -o tsconfig.app.json -L https://docs.sheetjs.com/angular/versions/tsconfig. -- [`package.json.ng13`](pathname:///angular/versions/package.json-ng13) save to `package.json` +- [`package.json-ng13`](pathname:///angular/versions/package.json-ng13) save to `package.json` - [`polyfills.ts-ng13`](pathname:///angular/versions/polyfills.ts-ng13) save to `src/polyfills.ts` - [`angular.json-ng13`](pathname:///angular/versions/angular.json-ng13) save to `angular.json` - [`tsconfig.app.json-ng13`](pathname:///angular/versions/tsconfig.app.json-ng13) save to `tsconfig.app.json` @@ -489,6 +568,21 @@ curl -o package.json -L https://docs.sheetjs.com/angular/versions/package.json-n curl -o src/polyfills.ts -L https://docs.sheetjs.com/angular/versions/polyfills.ts-ng13 curl -o angular.json -L https://docs.sheetjs.com/angular/versions/angular.json-ng13 curl -o tsconfig.app.json -L https://docs.sheetjs.com/angular/versions/tsconfig.app.json-ng13 +``` + + + + +- [`package.json-ng14`](pathname:///angular/versions/package.json-ng14) save to `package.json` +- [`polyfills.ts-ng14`](pathname:///angular/versions/polyfills.ts-ng14) save to `src/polyfills.ts` +- [`angular.json-ng14`](pathname:///angular/versions/angular.json-ng14) save to `angular.json` +- [`tsconfig.app.json-ng14`](pathname:///angular/versions/tsconfig.app.json-ng14) save to `tsconfig.app.json` + +```bash +curl -o package.json -L https://docs.sheetjs.com/angular/versions/package.json-ng14 +curl -o src/polyfills.ts -L https://docs.sheetjs.com/angular/versions/polyfills.ts-ng14 +curl -o angular.json -L https://docs.sheetjs.com/angular/versions/angular.json-ng14 +curl -o tsconfig.app.json -L https://docs.sheetjs.com/angular/versions/tsconfig.app.json-ng14 ``` @@ -504,7 +598,7 @@ npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz 3) start a local server with ```bash -npm run serve +npm start ``` The traditional site URL is http://localhost:4200/ . Open the page with a web diff --git a/docz/docs/03-demos/03-desktop/06-reactnative.md b/docz/docs/03-demos/03-desktop/06-reactnative.md index c017562..75472e9 100644 --- a/docz/docs/03-demos/03-desktop/06-reactnative.md +++ b/docz/docs/03-demos/03-desktop/06-reactnative.md @@ -27,7 +27,7 @@ from the main app script. File operations must be written in native code. The "Complete Example" creates an app that looks like the screenshots below: - +
WindowsWin10 macOS
diff --git a/docz/static/angular/versions/angular.json-ng14 b/docz/static/angular/versions/angular.json-ng14 new file mode 100644 index 0000000..e366f0a --- /dev/null +++ b/docz/static/angular/versions/angular.json-ng14 @@ -0,0 +1,112 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "sheetjs": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": { + "@schematics/angular:component": { + "inlineTemplate": true, + "inlineStyle": true, + "skipTests": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true + } + }, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/sheetjs", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "2mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "sheetjs:build:production" + }, + "development": { + "browserTarget": "sheetjs:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "sheetjs:build" + } + } + } + } + }, + "defaultProject": "sheetjs" +} diff --git a/docz/static/angular/versions/package.json-ng14 b/docz/static/angular/versions/package.json-ng14 new file mode 100644 index 0000000..9db830d --- /dev/null +++ b/docz/static/angular/versions/package.json-ng14 @@ -0,0 +1,39 @@ +{ + "name": "angular14", + "version": "0.0.0", + "license": "MIT", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build" + }, + "private": true, + "dependencies": { + "@angular/animations": "14.2.10", + "@angular/common": "14.2.10", + "@angular/compiler": "14.2.10", + + "@angular/core": "14.2.10", + "@angular/forms": "14.2.10", + + "@angular/platform-browser": "14.2.10", + "@angular/platform-browser-dynamic": "14.2.10", + + "@angular/router": "14.2.10", + + + "rxjs": "7.5.0", + "tslib": "2.3.0", + "zone.js": "0.11.4" + }, + "devDependencies": { + "@angular-devkit/build-angular": "14.2.10", + "@angular/cli": "14.2.10", + "@angular/compiler-cli": "14.2.10", + + "@types/node": "12.11.1", + + + "typescript": "~4.7.2" + } +} diff --git a/docz/static/angular/versions/polyfills.ts-ng14 b/docz/static/angular/versions/polyfills.ts-ng14 new file mode 100644 index 0000000..aa09a9f --- /dev/null +++ b/docz/static/angular/versions/polyfills.ts-ng14 @@ -0,0 +1 @@ +import 'zone.js'; diff --git a/docz/static/angular/versions/tsconfig.app.json-ng14 b/docz/static/angular/versions/tsconfig.app.json-ng14 new file mode 100644 index 0000000..f758d98 --- /dev/null +++ b/docz/static/angular/versions/tsconfig.app.json-ng14 @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts", + "src/polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +}