変更履歴と移行手順¶

@aptpod/data-viz-create-visual-parts-react の変更履歴は以下のとおりです。

v1.0.0¶

初回リリース。

v1.0.1¶

使用するvisual-parts-sdkをv1.0.1にアップデートしました（visual-parts-sdkの変更は、README内のコード例の変更のみ）。

v1.1.0¶

デプロイをシンプルにするため、ライセンスファイルへのリンクを固定の相対パスとしました。

新しい ./build/app.js の先頭行は以下のようになります:

/*! For license information please see ./licenses.txt */

上記変更に伴い、v1.1.0 以降では以下の手順は不要になります。

.env ファイルの作成
.env での BASE_URL の指定

v1.0.0またはv1.0.1からv1.1.0への移行手順¶

data-viz-create-visual-parts-react v1.0.0またはv1.0.1を使用して作成したワークスペースは、以下の操作を行うことで、v1.1.0を使用して作成したワークスペースと同じ状態にすることができます。

注意

この移行手順を実行しなくても、v1.0.0またはv1.0.1で作成したビジュアルパーツは継続して使用することが可能です。
過去のバージョンで作成したビジュアルパーツを、v1.1.0で作成したビジュアルパーツと同じ状態にしたい場合のみ、この移行手順を実行してください。

ワークスペース直下にあるwebpackの設定ファイルを更新します。

webpack.dev.js

--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -5,8 +5,6 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin')
 const dotenv = require('dotenv')
 const { formatHowToUseDevPluginURLs } = require('./webpack.utils')

-dotenv.config()
-
 /** @type import('webpack').Configuration */
 module.exports = {
   mode: 'development',

webpack.prod.js

--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -7,17 +7,10 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
   .BundleAnalyzerPlugin
 const ProgressBarPlugin = require('progress-bar-webpack-plugin')

-require('dotenv').config()
-
-/**
- * BASE_URL to be published on the Web
- */
-const BASE_URL = process.env.BASE_URL ?? ''
-
 /**
  * license information
  */
-const LICENSE_TEXT = `For license information please see ${BASE_URL}licenses.txt`
+const LICENSE_TEXT = `For license information please see ./licenses.txt`

 /** @type import('webpack').Configuration */
 module.exports = {

ワークスペース直下にある環境設定ファイル .env.sample と .env を削除します（作成していない場合、 .env ファイルの削除は不要です）。
不要になった依存パッケージを削除します。
```
$ npm uninstall dotenv
```

v1.2.0¶

使用するvisual-parts-sdkを、v1.2.0にアップデートしました（v1.2.0を使用すると、Browser Performance画面でビジュアルパーツごとの負荷を表示することができます）。
ビジュアルパーツのサンプルに、ビジュアルパーツごとの負荷の表示を可能にするコードを追加しました。
描画処理に要した時間をReact Profilerを使って取得するユーティリティーを追加しました。
Production buildにおいて、React Profilerが有効になるようにしました。

v1.1.0 からv1.2.0への移行手順¶

data-viz-create-visual-parts-react v1.1.0を使用して作成したワークスペースは、以下の操作を行うことで、v1.2.0を使用して作成したワークスペースと同じ状態にすることができます。

注意

この移行手順を実行しなくても、v1.1.0以下で作成したビジュアルパーツは継続して使用することが可能です。
Browser Performance画面で、ビジュアルパーツごとの処理占有時間を表示したい場合のみ、この移行手順を実行してください。

npmコマンドを実行し、@aptpod/data-viz-visual-parts-sdkをv1.2.0に更新します。
```
$ npm i -S @aptpod/data-viz-visual-parts-sdk@1.2.0
```

ワークスペース直下にあるwebpackの設定ファイルを以下のように変更します。

webpack.prod.js

--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -28,6 +28,11 @@ module.exports = {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
     alias: {
       src: path.join(__dirname, 'src'),
+      // @memo React Profiler を Production Build で有効にするためのalias設定です。
+      // Visual Parts の描画処理に要した負荷情報の取得が不要な場合は "react-dom$"、 "scheduler/tracing" の alias の設定を削除してください。
+      // cf. https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#gistcomment-2740980
+      'react-dom$': 'react-dom/profiling',
+      'scheduler/tracing': 'scheduler/tracing-profiling',
     },
   },
   node: {

ワークスペース直下に以下のようにディレクトリとファイルを作成します。

+ src/utils/components
  + profiler ........................ ディレクトリを新規作成
    + react-profiler-wrapper ........ ディレクトリを新規作成
      + component.tsx ............... ファイルを新規作成
      + index.ts .................... ファイルを新規作成

src/utils/components/profiler/react-profiler-wrapper/component.tsx

--- /dev/null
+++ b/src/utils/components/profiler/react-profiler-wrapper/component.tsx
@@ -0,0 +1,40 @@
+import React, { useCallback, Profiler, ProfilerOnRenderCallback } from 'react'
+
+type Props = {
+  onProfile?: (payload: { actualDuration: number }) => void
+  children: React.ReactNode
+}
+
+export const ReactProfilerWrapper: React.FC<Props> = (props) => {
+  const { onProfile, children } = props
+
+  // cf. https://ja.reactjs.org/docs/profiler.html
+  const handleProfilerRenderCallback: ProfilerOnRenderCallback = useCallback(
+    (
+      _id: string,
+      _phase: 'mount' | 'update',
+      actualDuration: number,
+      _baseDuration: number,
+      _startTime: number,
+      _commitTime: number,
+    ) => {
+      const actualDurationUnitSec = actualDuration * 1e-3
+
+      if (onProfile) {
+        onProfile({
+          actualDuration: actualDurationUnitSec,
+        })
+      }
+    },
+    [onProfile],
+  )
+
+  return (
+    <Profiler
+      id="react-profiler-wrapper"
+      onRender={handleProfilerRenderCallback}
+    >
+      {children}
+    </Profiler>
+  )
+}

src/utils/components/profiler/react-profiler-wrapper/index.ts

--- /dev/null
+++ b/src/utils/components/profiler/react-profiler-wrapper/index.ts
@@ -0,0 +1 @@
+export { ReactProfilerWrapper } from './component'

ビジュアルパーツのコードに、手順3で追加したReactProfilerWrapperを追加します。

以下は、ワークスペースに含まれるサンプル（Sensor Value）にReactProfilerWrapperを追加する場合の例です。

src/entrypoint/samples/sensor-value/index.tsx

--- a/src/entrypoint/samples/sensor-value/index.tsx
+++ b/src/entrypoint/samples/sensor-value/index.tsx
@@ -11,6 +11,8 @@ import { render, unmountComponentAtNode } from 'react-dom'
 import { StyledShadowStyle } from '../../../styles/shadow'
 // Styled Components を Shadow DOM 以下で適用するための Utility
 import { StyleSheetManagerWrapper } from '../../../utils/components/style/stylesheet-manager-wrapper'
+// React Profiler から描画処理に要した時間を取得するための Utility
+import { ReactProfilerWrapper } from '../../../utils/components/profiler/react-profiler-wrapper'

 import { SensorValueContainer } from './container'
 import { EXTENSION_CONFIGS, defaultExtension } from './extension'
@@ -50,10 +52,13 @@ class PluginRenderer extends Renderer {
     // Reactを使用した描画
     render(
       <StyleSheetManagerWrapper>
-        <>
-          <StyledShadowStyle />
-          <SensorValueContainer comm={comm} />
-        </>
+        {/* comm.renderingProfile は Data Visualizer v3.3.0 以降で利用可能です。 */}
+        <ReactProfilerWrapper onProfile={comm.renderingProfile?.emit}>
+          <>
+            <StyledShadowStyle />
+            <SensorValueContainer comm={comm} />
+          </>
+        </ReactProfilerWrapper>
       </StyleSheetManagerWrapper>,
       el,
     )