Skip to content

Commit 936496a

Browse files
marcin-kordas-hocmarcin-kordas-hoc
committed
Fix: HF-85 revert framework integration guide changes (out of scope)
The Basic Usage sections added in earlier HF-85 commits duplicate the framework integration guides being delivered in PR #1653 (HF-122). Reverting them here keeps HF-85's scope strictly to D-functions and avoids three-way conflict when #1653 merges first.
1 parent 2b08000 commit 936496a

4 files changed

Lines changed: 0 additions & 208 deletions

File tree

‎docs/guide/integration-with-angular.md‎

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,70 +4,6 @@ Installing HyperFormula in an Angular application works the same as with vanilla
44

55
For more details, see the [client-side installation](client-side-installation.md) section.
66

7-
## Basic usage
8-
9-
### Step 1. Create a service
10-
11-
Wrap HyperFormula in an Angular service. Create the instance in the constructor and expose methods for reading data.
12-
13-
```typescript
14-
import { Injectable, OnDestroy } from '@angular/core';
15-
import { HyperFormula } from 'hyperformula';
16-
17-
@Injectable({ providedIn: 'root' })
18-
export class SpreadsheetService implements OnDestroy {
19-
private hf: HyperFormula;
20-
private sheetId = 0;
21-
22-
constructor() {
23-
// Create a HyperFormula instance with initial data.
24-
this.hf = HyperFormula.buildFromArray(
25-
[
26-
[10, 20, '=SUM(A1:B1)'],
27-
[30, 40, '=SUM(A2:B2)'],
28-
],
29-
{ licenseKey: 'gpl-v3' }
30-
);
31-
}
32-
33-
/** Return calculated values for the entire sheet. */
34-
getSheetValues(): (number | string | null)[][] {
35-
return this.hf.getSheetValues(this.sheetId);
36-
}
37-
38-
ngOnDestroy(): void {
39-
this.hf.destroy();
40-
}
41-
}
42-
```
43-
44-
### Step 2. Use the service in a component
45-
46-
Inject the service and display the calculated values.
47-
48-
```typescript
49-
import { Component } from '@angular/core';
50-
import { SpreadsheetService } from './spreadsheet.service';
51-
52-
@Component({
53-
selector: 'app-spreadsheet',
54-
template: `
55-
<table>
56-
<tr *ngFor="let row of data">
57-
<td *ngFor="let cell of row">{{ cell }}</td>
58-
</tr>
59-
</table>
60-
`,
61-
})
62-
export class SpreadsheetComponent {
63-
data: (number | string | null)[][];
64-
65-
constructor(private spreadsheet: SpreadsheetService) {
66-
this.data = this.spreadsheet.getSheetValues();
67-
}
68-
}
69-
```
70-
717
## Demo
728

739
Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/angular-demo?v=${$page.buildDateURIEncoded}).

‎docs/guide/integration-with-react.md‎

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,62 +4,6 @@ Installing HyperFormula in a React application works the same as with vanilla Ja
44

55
For more details, see the [client-side installation](client-side-installation.md) section.
66

7-
## Basic usage
8-
9-
### Step 1. Initialize HyperFormula
10-
11-
Use `useRef` to hold the HyperFormula instance so it persists across re-renders. Initialize it inside a `useEffect` hook.
12-
13-
```javascript
14-
import { useRef, useEffect, useState } from 'react';
15-
import { HyperFormula } from 'hyperformula';
16-
17-
function SpreadsheetComponent() {
18-
const hfRef = useRef(null);
19-
const [sheetData, setSheetData] = useState([]);
20-
21-
useEffect(() => {
22-
// Create a HyperFormula instance with initial data.
23-
hfRef.current = HyperFormula.buildFromArray(
24-
[
25-
[10, 20, '=SUM(A1:B1)'],
26-
[30, 40, '=SUM(A2:B2)'],
27-
],
28-
{ licenseKey: 'gpl-v3' }
29-
);
30-
31-
// Read calculated values from the sheet.
32-
const sheetId = 0;
33-
setSheetData(hfRef.current.getSheetValues(sheetId));
34-
35-
return () => {
36-
// Clean up the instance when the component unmounts.
37-
hfRef.current?.destroy();
38-
};
39-
}, []);
40-
```
41-
42-
### Step 2. Render the results
43-
44-
Display the calculated values in a table.
45-
46-
```javascript
47-
return (
48-
<table>
49-
<tbody>
50-
{sheetData.map((row, rowIdx) => (
51-
<tr key={rowIdx}>
52-
{row.map((cell, colIdx) => (
53-
<td key={colIdx}>{cell}</td>
54-
))}
55-
</tr>
56-
))}
57-
</tbody>
58-
</table>
59-
);
60-
}
61-
```
62-
637
## Demo
648

659
Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v=${$page.buildDateURIEncoded}).

‎docs/guide/integration-with-svelte.md‎

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,52 +4,6 @@ Installing HyperFormula in a Svelte application works the same as with vanilla J
44

55
For more details, see the [client-side installation](client-side-installation.md) section.
66

7-
## Basic usage
8-
9-
### Step 1. Initialize HyperFormula
10-
11-
Create the HyperFormula instance directly in the component's `<script>` block. Use a reactive variable for the results.
12-
13-
```html
14-
<script>
15-
import { HyperFormula } from 'hyperformula';
16-
17-
// Create a HyperFormula instance with initial data.
18-
const hf = HyperFormula.buildFromArray(
19-
[
20-
[10, 20, '=SUM(A1:B1)'],
21-
[30, 40, '=SUM(A2:B2)'],
22-
],
23-
{ licenseKey: 'gpl-v3' }
24-
);
25-
26-
const sheetId = 0;
27-
let data = [];
28-
29-
function calculate() {
30-
data = hf.getSheetValues(sheetId);
31-
}
32-
</script>
33-
```
34-
35-
### Step 2. Render the results
36-
37-
Display the data in a table and trigger calculation with a button.
38-
39-
```html
40-
<button on:click={calculate}>Calculate</button>
41-
42-
<table>
43-
{#each data as row, rowIdx}
44-
<tr>
45-
{#each row as cell, colIdx}
46-
<td>{cell}</td>
47-
{/each}
48-
</tr>
49-
{/each}
50-
</table>
51-
```
52-
537
## Demo
548

559
Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/svelte-demo?v=${$page.buildDateURIEncoded}).

‎docs/guide/integration-with-vue.md‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,6 @@ Installing HyperFormula in a Vue application works the same as with vanilla Java
44

55
For more details, see the [client-side installation](client-side-installation.md) section.
66

7-
## Basic usage
8-
9-
### Step 1. Initialize HyperFormula
10-
11-
Wrap the HyperFormula instance in `markRaw` to prevent Vue's reactivity system from converting it into a proxy (see [Troubleshooting](#vue-reactivity-issues) below). Use `ref` for the data you want to display.
12-
13-
```javascript
14-
<script setup>
15-
import { ref, markRaw } from 'vue';
16-
import { HyperFormula } from 'hyperformula';
17-
18-
// Create a HyperFormula instance with initial data.
19-
const hf = markRaw(
20-
HyperFormula.buildFromArray(
21-
[
22-
[10, 20, '=SUM(A1:B1)'],
23-
[30, 40, '=SUM(A2:B2)'],
24-
],
25-
{ licenseKey: 'gpl-v3' }
26-
)
27-
);
28-
29-
// Read calculated values from the sheet.
30-
const sheetId = 0;
31-
const data = ref(hf.getSheetValues(sheetId));
32-
</script>
33-
```
34-
35-
### Step 2. Render the results
36-
37-
Display the calculated values in a template.
38-
39-
```html
40-
<template>
41-
<table>
42-
<tr v-for="(row, rowIdx) in data" :key="rowIdx">
43-
<td v-for="(cell, colIdx) in row" :key="colIdx">{{ cell }}</td>
44-
</tr>
45-
</table>
46-
</template>
47-
```
48-
497
## Troubleshooting
508

519
### Vue reactivity issues

0 commit comments

Comments
 (0)