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,
     )
 