Handsontable 11.0.0：React、Angular 和 Vue 的模塊化

更新：使用Handsontable 11.0.1，它修復(fù)了11.0.0中發(fā)現(xiàn)的Angular UMD包中的一個(gè)退步。

我們剛剛發(fā)布了Handsontable 11.0.0.這個(gè)版本為框架包裝器增加了模塊化功能，改進(jìn)了monorepo結(jié)構(gòu)，增加了一個(gè)新的locale選項(xiàng)，等等。

React、Angular和Vue的模塊化

模塊化是一種很好的方式，可以專注于對(duì)你重要的功能，定制你的網(wǎng)格，并減少你的應(yīng)用程序的大小。

自從Handsontable 8.3.0以來(lái)，你已經(jīng)能夠在Handsontable的vanilla JavaScript版本中使用模塊?，F(xiàn)在，你也可以在Handsontable的每個(gè)框架版本（React、Angular和Vue）中使用模塊。

雖然這對(duì)我們所有的React、Angular和Vue用戶來(lái)說(shuō)是個(gè)好消息，但這也是一個(gè)突破性的變化，因?yàn)槟悻F(xiàn)在需要導(dǎo)入你想要使用的每個(gè)模塊。例如，要導(dǎo)入U(xiǎn)ndoRedo插件的模塊：

// import the `handsontable/base` module

import Handsontable from 'handsontable/base';

 

// import the `UndoRedo` module and the `registerPlugin()` function

import {

  registerPlugin,

  UndoRedo,

} from 'handsontable/plugins';

 

// register the `UndoRedo` module

registerPlugin(UndoRedo);

對(duì)模塊化不感興趣？不要害怕：我們還引入了新的方法，讓你一次性導(dǎo)入和注冊(cè)一個(gè)特定類別的所有模塊。

要了解更多關(guān)于Handsontable的模塊，請(qǐng)看我們的文檔。

要了解如何在你的框架中使用模塊，請(qǐng)看其中的一個(gè)指南：

• 在React中使用模塊
• 在Angular中使用模塊
• 在Vue中使用模塊

修訂和模塊化的TypeScript定義

自從我們?cè)贖andsontable 8.3.0中引入模塊化后，我們想讓每個(gè)模塊都能完全支持TypeScript。

為了實(shí)現(xiàn)這一目標(biāo)，我們決定刪除龐大的、涵蓋所有TypeScript定義的文件（以前位于根目錄：./handsontable.d.ts）。取而代之的是，我們用一組整齊的小文件（現(xiàn)在位于一個(gè)新的目錄：./handsontable/types）取代它，專門用于Handsontable的各個(gè)部分。

因此，我們仔細(xì)檢查并修改了幾乎所有的Handsontable的類型定義。為什么這很重要？有幾個(gè)原因：

• 所有Handsontable模塊現(xiàn)在都支持TypeScript。每個(gè)模塊都有自己的TypeScript定義文件。 你可以在TypeScript環(huán)境中使用所有的模塊，導(dǎo)入它們不會(huì)出現(xiàn)錯(cuò)誤。
• TypeScript定義文件的結(jié)構(gòu)現(xiàn)在遵循源文件的結(jié)構(gòu)。 類型定義現(xiàn)在更加透明，并且更容易理解。
• 你導(dǎo)入的任何類型現(xiàn)在都與你在運(yùn)行時(shí)發(fā)現(xiàn)的一致。

從TypeScript用戶的角度來(lái)看，如果你導(dǎo)入整個(gè)Handsontable庫(kù)，一切都會(huì)保持不變。所有的類型定義都在導(dǎo)入Handsontable包時(shí)被加載。

import Handsontable from 'handsontable';

新的事情是，現(xiàn)在，當(dāng)你導(dǎo)入個(gè)別模塊時(shí)，類型定義也會(huì)自動(dòng)加載，例如：

import Handsontable from 'handsontable/base';

 

import { registerPlugin, HiddenRows } from 'handsontable/plugins';

 

const hiddenRows = Handsontable.plugins.HiddenRows;

更清潔的 monorepo 結(jié)構(gòu)

在 Handsontable 8.3.2 中，我們將所有 Handsontable 版本（JavaScript、Angular、React 和 Vue）放在一個(gè)單一的單一存儲(chǔ)庫(kù)中。

現(xiàn)在，為了更輕松地管理 monorepo，并為 Snyk 或 npm-audit 等第三方工具添加更好的支持，我們將 Handsontable 的主要 JavaScript 包放置在其自己的專用工作區(qū)中。 我們將它從根目錄移動(dòng)到一個(gè)新的子目錄：./handsontable，將它放置在與框架包裝器相同的級(jí)別：

前：

后：

關(guān)于構(gòu)建如果您計(jì)劃為 Handsontable 的存儲(chǔ)庫(kù)做出貢獻(xiàn)，或者您在本地構(gòu)建自己的 Handsontable 版本，則此更改可能會(huì)影響您。 除此之外，它不應(yīng)以任何方式影響您的應(yīng)用程序。

了解 Handsontable 的構(gòu)建過(guò)程概覽。

Monorepo

Handsontable 存儲(chǔ)庫(kù) （打開(kāi)新窗口）是一個(gè) monorepo （打開(kāi)新窗口），其中包含以下項(xiàng)目：

項(xiàng)目	位置	描述
handsontable	./handsontable	Main Handsontable project
@handsontable/angular	./wrappers/angular	Angular wrapper
@handsontable/react	./wrappers/react	React wrapper
@handsontable/vue	./wrappers/vue	Vue 2 wrapper

所有項(xiàng)目都在同一版本號(hào)下一起發(fā)布。 但是每個(gè)項(xiàng)目都有自己的構(gòu)建和測(cè)試流程。

構(gòu)建過(guò)程

構(gòu)建過(guò)程將位于 ./handsontable/src/ 目錄中的源文件轉(zhuǎn)換為以下輸出文件：

• ./handsontable/dist/handsontable.js
• ./handsontable/dist/handsontable.css
• ./handsontable/dist/handsontable.full.js
• ./handsontable/dist/handsontable.full.css
• ./handsontable/dist/handsontable.full.min.js
• ./handsontable/dist/handsontable.full.min.css
• ./handsontable/dist/languages/*

不要修改上面提到的輸出文件。 相反，在 ./handsontable/src/ 目錄中進(jìn)行更改，然后運(yùn)行選定的構(gòu)建。 如果您想通過(guò)拉取請(qǐng)求將更改貢獻(xiàn)回 Handsontable，這一點(diǎn)尤其重要。

構(gòu)建要求

Handsontable 構(gòu)建過(guò)程需要：

• §Node.js （打開(kāi)新窗口）（版本 15.11+）
• §npm （打開(kāi)新窗口）（版本 7.17+）
• §通過(guò) npm install 安裝的節(jié)點(diǎn)模塊（例如 webpack （打開(kāi)新窗口）和 Babel （打開(kāi)新窗口））

package.json 文件

每個(gè) Handsontable 項(xiàng)目都有自己的構(gòu)建過(guò)程，定義在自己的 package.json 文件中。 除此之外，根目錄也有自己的 package.json 文件：

文件	保持構(gòu)建任務(wù)：
./package.json	- 一次所有包 - 單獨(dú)包
./handsontable/package.json	JavaScript包
./wrappers/angular/package.json	Angular包
./wrappers/react/package.json	React包
./wrappers/vue/package.json	Vue包

運(yùn)行你的第一個(gè)構(gòu)建

要運(yùn)行您的第一個(gè)構(gòu)建：

• 安裝 Node.js （打開(kāi)新窗口）（版本 15.11+）。
• 安裝 npm （打開(kāi)新窗口）（版本 7.17+）。
• 克隆 Handsontable 存儲(chǔ)庫(kù) （打開(kāi)新窗口）。
• 從根目錄運(yùn)行 npm install。
• 安裝所有必需的依賴項(xiàng)。
• 從根目錄運(yùn)行 npm run build。
• 所有 Handsontable 軟件包都已構(gòu)建。

構(gòu)建包

您可以一次構(gòu)建所有包，也可以單獨(dú)構(gòu)建每個(gè)包。

構(gòu)建所有包

要一次構(gòu)建所有包：

• 確保您符合建筑要求。
• 進(jìn)入根目錄。
• 運(yùn)行 npm run build。

該腳本構(gòu)建以下包：

• JavaScript包
• Angular包
• React包
• Vue包
• 一個(gè)代碼示例包

構(gòu)建 JavaScript 包

要構(gòu)建 JavaScript 包：

• 確保您符合建筑要求。
• 轉(zhuǎn)到./handsontable。
• 運(yùn)行 npm run build。
  僅構(gòu)建 JavaScript 包。

從根目錄構(gòu)建 JavaScript 包：

• 確保您符合建筑要求。
• 進(jìn)入根目錄。
• 在手動(dòng)構(gòu)建中運(yùn)行 npm run。
  僅構(gòu)建 JavaScript 包。

JavaScript 構(gòu)建任務(wù)

在 ./handsontable 目錄中，您還可以運(yùn)行單獨(dú)的 JavaScript 構(gòu)建任務(wù)：

JavaScript 構(gòu)建任務(wù)

構(gòu)建 Angular 包

要構(gòu)建 Angular 包：

• 確保您符合構(gòu)建要求。
• 轉(zhuǎn)到./wrappers/angular。
• 運(yùn)行 npm run build。
  僅構(gòu)建 Angular 包。

從根目錄構(gòu)建 Angular 包：

• 確保您符合建筑要求。
• 進(jìn)入根目錄。
• 在角度構(gòu)建中運(yùn)行 npm run。
  僅構(gòu)建 Angular 包。

Angular構(gòu)建任務(wù)

從 ./wrappers/angular 目錄，您還可以運(yùn)行單獨(dú)的 Angular 構(gòu)建任務(wù)：

 

Angular構(gòu)建任務(wù)

構(gòu)建 React 包

要構(gòu)建 React 包：

• 確保您符合建筑要求。
• 轉(zhuǎn)到./wrappers/react。
• 運(yùn)行 npm run build。
  只有 React 包構(gòu)建。

從根目錄構(gòu)建 React 包：

• 確保您符合建筑要求。
• 進(jìn)入根目錄。
• 在 react build 中運(yùn)行 npm run。
  只有 React 包構(gòu)建。

React構(gòu)建任務(wù)

從 ./wrappers/react 目錄，您還可以運(yùn)行單獨(dú)的 React 構(gòu)建任務(wù)：

React構(gòu)建任務(wù)

構(gòu)建 Vue 包

要構(gòu)建 Vue 包：

• 確保您符合建筑要求。
• 轉(zhuǎn)到./wrappers/vue。
• 運(yùn)行 npm run build。
  僅構(gòu)建 Vue 包。

從根目錄構(gòu)建 Vue 包：

• 確保您符合建筑要求。
• 進(jìn)入根目錄。
• 在 vue 構(gòu)建中運(yùn)行 npm run。
  僅構(gòu)建 Vue 包。

增強(qiáng)的 populateFromArray() 方法

當(dāng) populateFromArray() 方法的方法參數(shù)設(shè)置為 shift_down 或 shift_right 時(shí)，它的工作方式現(xiàn)在有所不同。

之前，當(dāng)設(shè)置為 shift_down 或 shift_right 時(shí)，populateFromArray() 為每行執(zhí)行單獨(dú)的 spliceRow 操作，或?yàn)槊苛袌?zhí)行單獨(dú)的 spliceColumn 操作。

現(xiàn)在，當(dāng)設(shè)置為 shift_down 或 shift_right 時(shí)，populateFromArray() 會(huì)用一個(gè)大型操作填充行（或列）。 性能上的差異確實(shí)令人印象深刻：

 

如果您使用由每個(gè) spliceRow 和 spliceColumn 操作觸發(fā)的 beforeChange 和 afterChange 掛鉤，則需要適應(yīng)這些變化。

新的語(yǔ)言環(huán)境選項(xiàng)

為了正確處理基于本地的數(shù)據(jù)，我們給了Handsontable一個(gè)新的配置選項(xiàng)，叫做locale。默認(rèn)情況下，它被設(shè)置為en-US。

到目前為止，我們只使用locale來(lái)確保正確過(guò)濾土耳其語(yǔ)的自定義搜索輸入，但我們計(jì)劃在未來(lái)擴(kuò)大其使用范圍，以進(jìn)一步定制功能，如過(guò)濾、搜索或比較不同的基于本地的數(shù)據(jù)集。這是改進(jìn)Handsontable內(nèi)置國(guó)際化功能的一個(gè)很好的起點(diǎn)。

你可以為整個(gè)網(wǎng)格設(shè)置地域選項(xiàng)：

const hot = new Handsontable(container, {
  // set the entire grid's locale to Turkish
  locale: 'tr-TR',
});

但是您也可以為單個(gè)列設(shè)置它：

const hot = new Handsontable(container, {
  columns: [
    {
      // set the first column's locale to Polish
      locale: 'pl-PL',
    },
    {
      // set the second column's locale to German
      locale: 'de-DE',     
    },
    {
      // set the third column's locale to Japanese
      locale: 'ja-JP',
    },
  ],
});

要了解更多信息，請(qǐng)參閱 Handsontable 文檔。

更新文檔

正如所承諾的，我們會(huì)不斷改進(jìn) Handsontable 的文檔。 自上一個(gè) Handsontable 版本以來(lái)，我們對(duì) API 參考的選項(xiàng)部分進(jìn)行了徹底檢查，重寫了一些指南（例如構(gòu)建），重新構(gòu)建了一些其他指南（例如模塊），添加了全新的指南（例如 React 模塊），添加了一些新的部分 現(xiàn)有指南（例如語(yǔ)言環(huán)境設(shè)置）等。

遷移指南

由于我們引入了一些向后不兼容的更改，因此我們準(zhǔn)備了一份遷移指南，引導(dǎo)您逐步從 Handsontable 10 升級(jí)到 Handsontable 11。

第 1 步：React、Angular、Vue——注冊(cè)你的模塊

從 Handsontable 11.0.0 開(kāi)始，React 包裝器、Angular 包裝器和 Vue 包裝器支持模塊化。

如果您不使用任何包裝器，則無(wú)需更改任何內(nèi)容。

使用所有模塊

要繼續(xù)將所有 Handsontable 模塊與您的包裝器一起使用，請(qǐng)使用新的 registerAllModules() 方法注冊(cè)所有模塊。

在應(yīng)用程序的入口點(diǎn)文件中，添加以下代碼：

// import the registerAllModules() methodimport { registerAllModules } from 'handsontable/registry';

// register all Handsontable modulesregisterAllModules();

使用單個(gè)模塊

要開(kāi)始在您的包裝器中使用單個(gè) Handsontable 模塊，請(qǐng)參閱以下指南：

• 在 React 中使用模塊
• 在 Angular 中使用模塊
• 在 Vue 中使用模塊

第 2 步：適應(yīng) TypeScript 定義文件的更改

以前，Handsontable 的所有 TypeScript 定義都保存在一個(gè)大文件中，放在根目錄中：./handsontable.d.ts。

現(xiàn)在，每個(gè)模塊都有自己的 TypeScript 定義文件。 它們都保存在一個(gè)新的類型目錄中：./handsontable/types （打開(kāi)新窗口）。

有關(guān)更多詳細(xì)信息，請(qǐng)參閱此拉取請(qǐng)求 （打開(kāi)新窗口）。

第 3 步：適應(yīng) populateFromArray() 方法的更改

當(dāng) populateFromArray() 方法的方法參數(shù)設(shè)置為 shift_down 或 shift_right 時(shí)，它的工作方式現(xiàn)在有所不同。

前

• populateFromArray() 為每個(gè)填充的行執(zhí)行單獨(dú)的 spliceRow 操作，并為每個(gè)填充的列執(zhí)行單獨(dú)的 spliceColumn 操作。
• beforeChange 和afterChange 鉤子被多次觸發(fā)，分別針對(duì)每個(gè)填充的行和列。
• beforeChange 和 afterChange 掛鉤由每個(gè) spliceRow 和 spliceColumn 操作觸發(fā)，源參數(shù)定義為 spliceRow 或 spliceCol。

new Handsontable(element, {

  afterChange: (changes, source) => {

    if (source === 'spliceRow' || source === 'spliceCol') {

      handleChange(changes[0]);

    }

  }});

現(xiàn)在

• populateFromArray() 用一個(gè)大的操作填充行和列。
• beforeChange 和 afterChange 鉤子只被觸發(fā)一次，對(duì)于所有填充的行和列。
• beforeChange 和 afterChange 鉤子由 populateFromArray() 方法直接觸發(fā)，源參數(shù)定義為 populateFromArray。

new Handsontable(element, {

  afterChange: (changes, source) => {

    if (source === 'populateFromArray') {

      changes.forEach(change =>  handleChange(change))

    }

  }});

 

發(fā)行說(shuō)明：我們添加的內(nèi)容

• 為 Handsontable 的模塊化版本添加了 TypeScript 定義文件。 #7489 [突破性變化]
• Vue：向 Vue 包裝器添加了對(duì)模塊化的支持。 #8820 [突破性變化]
• React：為 React 包裝器添加了對(duì)模塊化的支持。 第8819章【破變】
• Angular：添加了對(duì) Angular 包裝器的模塊化支持。 #8818 [突破性變化]
• 添加了一個(gè)新的包入口點(diǎn)，允許在一個(gè)函數(shù)調(diào)用中導(dǎo)入內(nèi)置模塊：import { registerAllEditors, registerAllRenderers, registerAllValidators, registerAllCellTypes, registerAllPlugins } from 'handsontable/registry'。 #8816
• 添加了新的語(yǔ)言環(huán)境選項(xiàng)，以正確處理基于語(yǔ)言環(huán)境的數(shù)據(jù)。 #8897
• 添加了 GitHub 操作工作流程，其中涵蓋了測(cè)試 Handsontable 和包裝器。 #8652
• 添加了新的方向助手，為未來(lái)的 RTL 支持奠定了基礎(chǔ)。 #8868

發(fā)行說(shuō)明：我們改變了什么

• 更改了 populateFromArray() 方法的工作方式，其方法參數(shù)設(shè)置為 shift_down 或 shift_right。 第888章【破變】
• 將整個(gè) Handsontable 包移動(dòng)到其自己的新子目錄：./handsontable。 #8759
• 用更新的版本替換了許可證文件。 #8877

發(fā)行說(shuō)明：我們修復(fù)的內(nèi)容

• 修復(fù)了使用下拉菜單中的搜索輸入時(shí)基于區(qū)域設(shè)置的數(shù)據(jù)過(guò)濾不正確的問(wèn)題。 第6095章
• 修復(fù)了使用 populateFromArray() 方法并將其方法參數(shù)設(shè)置為 shift_right 時(shí)拋出的錯(cuò)誤。 第6929章
• 修復(fù)了 beforeOnCellMouseDown 和 afterOnCellMouseDown 掛鉤使用錯(cuò)誤坐標(biāo)的問(wèn)題。 #8498
• 修復(fù)了在 Handsontable 的模塊化版本中調(diào)用 updateSettings() 方法時(shí)拋出的類型錯(cuò)誤。 #8830
• 修復(fù)了文檔的 canonicalUrl 條目的兩個(gè)問(wèn)題。 #8886
• 修復(fù)了當(dāng)自動(dòng)填充的來(lái)源是日期單元格時(shí)拋出的錯(cuò)誤。 #8894
• React：修復(fù)了一個(gè) React 包裝器問(wèn)題，即無(wú)法在跨多列重復(fù)使用的編輯器組件中使用不同的 props。 #8527