@devtools-ui/flame-graph 0.1.2--canary.27.1288

package/dist/cjs/index.cjs

@@ -0,0 +1,87 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  FlameGraph: () => FlameGraph2,
+  FlameGraphComponent: () => FlameGraphComponent,
+  flameGraphTransform: () => flameGraphTransform
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/component/index.tsx
+var import_react = __toESM(require("react"));
+var import_react_flame_graph = require("react-flame-graph");
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/hooks/index.ts
+var transformData = (data) => ({
+  name: data?.name || "root",
+  value: data?.value || 0,
+  ...data?.tooltip && { tooltip: data.tooltip },
+  children: data?.children?.map(transformData) || []
+});
+var useFlameGraphProps = (props) => ({
+  ...props,
+  height: props.height || 500,
+  width: props.width || 500,
+  data: transformData(props.data)
+});
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/component/index.tsx
+var FlameGraphComponent = (props) => {
+  const transformedProps = useFlameGraphProps(props);
+  return /* @__PURE__ */ import_react.default.createElement(import_react_flame_graph.FlameGraph, { ...transformedProps });
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/dsl/index.tsx
+var import_react2 = __toESM(require("react"));
+var import_dsl = require("@player-tools/dsl");
+var FlameGraph2 = (props) => {
+  const { children, binding, ...rest } = props;
+  return /* @__PURE__ */ import_react2.default.createElement(import_dsl.Asset, { type: "flame-graph", ...rest }, /* @__PURE__ */ import_react2.default.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/transform/index.ts
+var flameGraphTransform = (asset, options) => {
+  return {
+    ...asset,
+    data: asset.binding ? options.data.model.get(asset.binding, {
+      includeInvalid: true,
+      formatted: false
+    }) : void 0
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlameGraph,
+  FlameGraphComponent,
+  flameGraphTransform
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/component/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/hooks/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/dsl/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/transform/index.ts"],"sourcesContent":["export * from \"./types\";\nexport * from \"./component\";\nexport * from \"./dsl\";\nexport * from \"./transform\";\n","import React from \"react\";\nimport { FlameGraph } from \"react-flame-graph\";\nimport { useFlameGraphProps } from \"../hooks\";\nimport type { TransformedFlameGraph } from \"../types\";\n\nexport const FlameGraphComponent = (props: TransformedFlameGraph) => {\n  const transformedProps = useFlameGraphProps(props);\n\n  return <FlameGraph {...transformedProps} />;\n};\n","import type { Props } from \"react-flame-graph\";\nimport type { TransformedFlameGraph } from \"../types\";\n\nconst transformData = (data: TransformedFlameGraph[\"data\"]): Props[\"data\"] => ({\n  name: data?.name || \"root\",\n  value: data?.value || 0,\n  ...(data?.tooltip && { tooltip: data.tooltip }),\n  children: data?.children?.map(transformData) || [],\n});\n\n/**\n * Hook to translate the properties we get from the Player Content (DSL > JSON > transformer)\n * into what the FlameGraph component expects.\n */\nexport const useFlameGraphProps = (props: TransformedFlameGraph): Props => ({\n  ...props,\n  height: props.height || 500,\n  width: props.width || 500,\n  data: transformData(props.data),\n});\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { FlameGraphAsset } from \"../types\";\n\n/**\n * Defines the component DSL representation, so users of this plugin can author Player-UI\n * content leveraging .jsx/.tsx syntax.\n */\nexport const FlameGraph = (\n  props: Omit<AssetPropsWithChildren<FlameGraphAsset>, \"binding\"> & {\n    /** The binding as a tagged template instance */\n    binding: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n\n  return (\n    <Asset type=\"flame-graph\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { FlameGraphAsset, TransformedFlameGraph } from \"../types\";\n\n/**\n * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)\n * and embeds Player state and methods:\n */\nexport const flameGraphTransform: TransformFunction<\n  FlameGraphAsset,\n  TransformedFlameGraph\n> = (asset, options) => {\n  return {\n    ...asset,\n    data: asset.binding\n      ? options.data.model.get(asset.binding, {\n          includeInvalid: true,\n          formatted: false,\n        })\n      : undefined,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,oBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,+BAA2B;;;ACE3B,IAAM,gBAAgB,CAAC,UAAwD;AAAA,EAC7E,MAAM,MAAM,QAAQ;AAAA,EACpB,OAAO,MAAM,SAAS;AAAA,EACtB,GAAI,MAAM,WAAW,EAAE,SAAS,KAAK,QAAQ;AAAA,EAC7C,UAAU,MAAM,UAAU,IAAI,aAAa,KAAK,CAAC;AACnD;AAMO,IAAM,qBAAqB,CAAC,WAAyC;AAAA,EAC1E,GAAG;AAAA,EACH,QAAQ,MAAM,UAAU;AAAA,EACxB,OAAO,MAAM,SAAS;AAAA,EACtB,MAAM,cAAc,MAAM,IAAI;AAChC;;;ADdO,IAAM,sBAAsB,CAAC,UAAiC;AACnE,QAAM,mBAAmB,mBAAmB,KAAK;AAEjD,SAAO,6BAAAC,QAAA,cAAC,uCAAY,GAAG,kBAAkB;AAC3C;;;AETA,IAAAC,gBAAkB;AAClB,iBAIO;AAOA,IAAMC,cAAa,CACxB,UAIG;AACH,QAAM,EAAE,UAAU,SAAS,GAAG,KAAK,IAAI;AAEvC,SACE,8BAAAC,QAAA,cAAC,oBAAM,MAAK,eAAe,GAAG,QAC5B,8BAAAA,QAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GAC3C,QACH;AAEJ;;;ACnBO,IAAM,sBAGT,CAAC,OAAO,YAAY;AACtB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MAAM,MAAM,UACR,QAAQ,KAAK,MAAM,IAAI,MAAM,SAAS;AAAA,MACpC,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb,CAAC,IACD;AAAA,EACN;AACF;","names":["FlameGraph","React","import_react","FlameGraph","React"]}

package/dist/index.legacy-esm.js

@@ -0,0 +1,50 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/component/index.tsx
+import React from "react";
+import { FlameGraph } from "react-flame-graph";
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/hooks/index.ts
+var transformData = (data) => ({
+  name: data?.name || "root",
+  value: data?.value || 0,
+  ...data?.tooltip && { tooltip: data.tooltip },
+  children: data?.children?.map(transformData) || []
+});
+var useFlameGraphProps = (props) => ({
+  ...props,
+  height: props.height || 500,
+  width: props.width || 500,
+  data: transformData(props.data)
+});
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/component/index.tsx
+var FlameGraphComponent = (props) => {
+  const transformedProps = useFlameGraphProps(props);
+  return /* @__PURE__ */ React.createElement(FlameGraph, { ...transformedProps });
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/dsl/index.tsx
+import React2 from "react";
+import {
+  Asset
+} from "@player-tools/dsl";
+var FlameGraph2 = (props) => {
+  const { children, binding, ...rest } = props;
+  return /* @__PURE__ */ React2.createElement(Asset, { type: "flame-graph", ...rest }, /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/transform/index.ts
+var flameGraphTransform = (asset, options) => {
+  return {
+    ...asset,
+    data: asset.binding ? options.data.model.get(asset.binding, {
+      includeInvalid: true,
+      formatted: false
+    }) : void 0
+  };
+};
+export {
+  FlameGraph2 as FlameGraph,
+  FlameGraphComponent,
+  flameGraphTransform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs

@@ -0,0 +1,50 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/component/index.tsx
+import React from "react";
+import { FlameGraph } from "react-flame-graph";
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/hooks/index.ts
+var transformData = (data) => ({
+  name: data?.name || "root",
+  value: data?.value || 0,
+  ...data?.tooltip && { tooltip: data.tooltip },
+  children: data?.children?.map(transformData) || []
+});
+var useFlameGraphProps = (props) => ({
+  ...props,
+  height: props.height || 500,
+  width: props.width || 500,
+  data: transformData(props.data)
+});
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/component/index.tsx
+var FlameGraphComponent = (props) => {
+  const transformedProps = useFlameGraphProps(props);
+  return /* @__PURE__ */ React.createElement(FlameGraph, { ...transformedProps });
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/dsl/index.tsx
+import React2 from "react";
+import {
+  Asset
+} from "@player-tools/dsl";
+var FlameGraph2 = (props) => {
+  const { children, binding, ...rest } = props;
+  return /* @__PURE__ */ React2.createElement(Asset, { type: "flame-graph", ...rest }, /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/transform/index.ts
+var flameGraphTransform = (asset, options) => {
+  return {
+    ...asset,
+    data: asset.binding ? options.data.model.get(asset.binding, {
+      includeInvalid: true,
+      formatted: false
+    }) : void 0
+  };
+};
+export {
+  FlameGraph2 as FlameGraph,
+  FlameGraphComponent,
+  flameGraphTransform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/component/index.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/hooks/index.ts","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/dsl/index.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/flame-graph/src/transform/index.ts"],"sourcesContent":["import React from \"react\";\nimport { FlameGraph } from \"react-flame-graph\";\nimport { useFlameGraphProps } from \"../hooks\";\nimport type { TransformedFlameGraph } from \"../types\";\n\nexport const FlameGraphComponent = (props: TransformedFlameGraph) => {\n  const transformedProps = useFlameGraphProps(props);\n\n  return <FlameGraph {...transformedProps} />;\n};\n","import type { Props } from \"react-flame-graph\";\nimport type { TransformedFlameGraph } from \"../types\";\n\nconst transformData = (data: TransformedFlameGraph[\"data\"]): Props[\"data\"] => ({\n  name: data?.name || \"root\",\n  value: data?.value || 0,\n  ...(data?.tooltip && { tooltip: data.tooltip }),\n  children: data?.children?.map(transformData) || [],\n});\n\n/**\n * Hook to translate the properties we get from the Player Content (DSL > JSON > transformer)\n * into what the FlameGraph component expects.\n */\nexport const useFlameGraphProps = (props: TransformedFlameGraph): Props => ({\n  ...props,\n  height: props.height || 500,\n  width: props.width || 500,\n  data: transformData(props.data),\n});\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { FlameGraphAsset } from \"../types\";\n\n/**\n * Defines the component DSL representation, so users of this plugin can author Player-UI\n * content leveraging .jsx/.tsx syntax.\n */\nexport const FlameGraph = (\n  props: Omit<AssetPropsWithChildren<FlameGraphAsset>, \"binding\"> & {\n    /** The binding as a tagged template instance */\n    binding: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n\n  return (\n    <Asset type=\"flame-graph\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { FlameGraphAsset, TransformedFlameGraph } from \"../types\";\n\n/**\n * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)\n * and embeds Player state and methods:\n */\nexport const flameGraphTransform: TransformFunction<\n  FlameGraphAsset,\n  TransformedFlameGraph\n> = (asset, options) => {\n  return {\n    ...asset,\n    data: asset.binding\n      ? options.data.model.get(asset.binding, {\n          includeInvalid: true,\n          formatted: false,\n        })\n      : undefined,\n  };\n};\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,kBAAkB;;;ACE3B,IAAM,gBAAgB,CAAC,UAAwD;AAAA,EAC7E,MAAM,MAAM,QAAQ;AAAA,EACpB,OAAO,MAAM,SAAS;AAAA,EACtB,GAAI,MAAM,WAAW,EAAE,SAAS,KAAK,QAAQ;AAAA,EAC7C,UAAU,MAAM,UAAU,IAAI,aAAa,KAAK,CAAC;AACnD;AAMO,IAAM,qBAAqB,CAAC,WAAyC;AAAA,EAC1E,GAAG;AAAA,EACH,QAAQ,MAAM,UAAU;AAAA,EACxB,OAAO,MAAM,SAAS;AAAA,EACtB,MAAM,cAAc,MAAM,IAAI;AAChC;;;ADdO,IAAM,sBAAsB,CAAC,UAAiC;AACnE,QAAM,mBAAmB,mBAAmB,KAAK;AAEjD,SAAO,oCAAC,cAAY,GAAG,kBAAkB;AAC3C;;;AETA,OAAOA,YAAW;AAClB;AAAA,EAEE;AAAA,OAEK;AAOA,IAAMC,cAAa,CACxB,UAIG;AACH,QAAM,EAAE,UAAU,SAAS,GAAG,KAAK,IAAI;AAEvC,SACE,gBAAAD,OAAA,cAAC,SAAM,MAAK,eAAe,GAAG,QAC5B,gBAAAA,OAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GAC3C,QACH;AAEJ;;;ACnBO,IAAM,sBAGT,CAAC,OAAO,YAAY;AACtB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MAAM,MAAM,UACR,QAAQ,KAAK,MAAM,IAAI,MAAM,SAAS;AAAA,MACpC,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb,CAAC,IACD;AAAA,EACN;AACF;","names":["React","FlameGraph"]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@devtools-ui/flame-graph",
+  "version": "0.1.2--canary.27.1288",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    "./dist/index.css": "./dist/index.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/cjs/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@player-tools/dsl": "0.6.0-next.2",
+    "@player-ui/asset-transform-plugin": "0.7.3",
+    "@player-ui/player": "0.7.3",
+    "@player-ui/react": "0.7.3",
+    "@player-ui/types": "0.7.3",
+    "@types/react": "^18.2.51",
+    "dlv": "^1.1.3",
+    "framer-motion": "^11.0.8",
+    "react": "^18.2.0",
+    "react-flame-graph": "^1.4.0",
+    "tslib": "^2.6.2"
+  },
+  "peerDependencies": {}
+}

package/src/component/index.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { FlameGraph } from "react-flame-graph";
+import { useFlameGraphProps } from "../hooks";
+import type { TransformedFlameGraph } from "../types";
+
+export const FlameGraphComponent = (props: TransformedFlameGraph) => {
+  const transformedProps = useFlameGraphProps(props);
+
+  return <FlameGraph {...transformedProps} />;
+};

package/src/dsl/__tests__/index.test.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { describe, expect, test } from "vitest";
+import { render, binding as b } from "@player-tools/dsl";
+import { FlameGraph } from "../";
+
+describe("DSL: FlameGraph", () => {
+  test("Renders flameGraph", async () => {
+    const rendered = await render(
+      <FlameGraph binding={b`my_binding`} height={100} width={200} />
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "flame-graph",
+      binding: "my_binding",
+      height: 100,
+      width: 200,
+    });
+  });
+});

package/src/dsl/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import {
+  AssetPropsWithChildren,
+  Asset,
+  BindingTemplateInstance,
+} from "@player-tools/dsl";
+import type { FlameGraphAsset } from "../types";
+
+/**
+ * Defines the component DSL representation, so users of this plugin can author Player-UI
+ * content leveraging .jsx/.tsx syntax.
+ */
+export const FlameGraph = (
+  props: Omit<AssetPropsWithChildren<FlameGraphAsset>, "binding"> & {
+    /** The binding as a tagged template instance */
+    binding: BindingTemplateInstance;
+  }
+) => {
+  const { children, binding, ...rest } = props;
+
+  return (
+    <Asset type="flame-graph" {...rest}>
+      <property name="binding">{binding.toValue()}</property>
+      {children}
+    </Asset>
+  );
+};

package/src/hooks/__tests__/index.test.ts

@@ -0,0 +1,67 @@
+import { useFlameGraphProps } from "..";
+import { describe, expect, test } from "vitest";
+import type { ProfilerNode, TransformedFlameGraph } from "../../types";
+
+const data: ProfilerNode = {
+  name: "root",
+  value: 5,
+  tooltip: "tooltip",
+  children: [
+    {
+      name: "child1",
+      value: 5,
+      children: [
+        { name: "child1.1", value: 2, children: [] },
+        { name: "child1.2", value: 3, children: [] },
+      ],
+    },
+    { name: "child2", children: [] },
+  ],
+};
+
+const mockProps: TransformedFlameGraph = {
+  id: "test",
+  type: "flame-graph",
+  data,
+};
+
+describe("useFlameGraphProps", () => {
+  test("transforms data correctly", () => {
+    const result = useFlameGraphProps(mockProps);
+
+    expect(result.data).toStrictEqual({
+      name: "root",
+      value: 5,
+      tooltip: "tooltip",
+      children: [
+        {
+          name: "child1",
+          value: 5,
+          children: [
+            { name: "child1.1", value: 2, children: [] },
+            { name: "child1.2", value: 3, children: [] },
+          ],
+        },
+        { name: "child2", value: 0, children: [] },
+      ],
+    });
+  });
+
+  test("returns default height and width when not provided", () => {
+    const result = useFlameGraphProps(mockProps);
+
+    expect(result.height).toBe(500);
+    expect(result.width).toBe(500);
+  });
+
+  test("returns provided height and width", () => {
+    const result = useFlameGraphProps({
+      ...mockProps,
+      height: 300,
+      width: 300,
+    });
+
+    expect(result.height).toBe(300);
+    expect(result.width).toBe(300);
+  });
+});

package/src/hooks/index.ts

@@ -0,0 +1,20 @@
+import type { Props } from "react-flame-graph";
+import type { TransformedFlameGraph } from "../types";
+
+const transformData = (data: TransformedFlameGraph["data"]): Props["data"] => ({
+  name: data?.name || "root",
+  value: data?.value || 0,
+  ...(data?.tooltip && { tooltip: data.tooltip }),
+  children: data?.children?.map(transformData) || [],
+});
+
+/**
+ * Hook to translate the properties we get from the Player Content (DSL > JSON > transformer)
+ * into what the FlameGraph component expects.
+ */
+export const useFlameGraphProps = (props: TransformedFlameGraph): Props => ({
+  ...props,
+  height: props.height || 500,
+  width: props.width || 500,
+  data: transformData(props.data),
+});

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./component";
+export * from "./dsl";
+export * from "./transform";

package/src/transform/index.ts

@@ -0,0 +1,21 @@
+import type { TransformFunction } from "@player-ui/player";
+import { FlameGraphAsset, TransformedFlameGraph } from "../types";
+
+/**
+ * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)
+ * and embeds Player state and methods:
+ */
+export const flameGraphTransform: TransformFunction<
+  FlameGraphAsset,
+  TransformedFlameGraph
+> = (asset, options) => {
+  return {
+    ...asset,
+    data: asset.binding
+      ? options.data.model.get(asset.binding, {
+          includeInvalid: true,
+          formatted: false,
+        })
+      : undefined,
+  };
+};

package/src/types/index.ts

@@ -0,0 +1,31 @@
+import type { Asset } from "@player-ui/types";
+
+export type ProfilerNode = {
+  /** hook name */
+  name: string;
+  /* startTime of the hook */
+  startTime?: number;
+  /** endTime of the hook */
+  endTime?: number;
+  /** duration of hook resolution times in ms */
+  value?: number;
+  /** tooltip to be shown on hover */
+  tooltip?: string;
+  /** subhook profiler nodes */
+  children: ProfilerNode[];
+};
+
+export interface FlameGraphAsset extends Asset<"flame-graph"> {
+  /** Dot separated string Representation of a path within the data-model */
+  binding?: string;
+  /** height of the flame graph */
+  height?: number;
+  /** width of the flame graph */
+  width?: number;
+}
+
+/** A stateful instance of the asset */
+export interface TransformedFlameGraph extends FlameGraphAsset {
+  // The result of the transformation (transform/index.ts)
+  data?: ProfilerNode;
+}

package/types/component/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TransformedFlameGraph } from "../types";
+export declare const FlameGraphComponent: (props: TransformedFlameGraph) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/types/dsl/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { AssetPropsWithChildren, BindingTemplateInstance } from "@player-tools/dsl";
+import type { FlameGraphAsset } from "../types";
+/**
+ * Defines the component DSL representation, so users of this plugin can author Player-UI
+ * content leveraging .jsx/.tsx syntax.
+ */
+export declare const FlameGraph: (props: Omit<AssetPropsWithChildren<FlameGraphAsset>, "binding"> & {
+    /** The binding as a tagged template instance */
+    binding: BindingTemplateInstance;
+}) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/types/hooks/index.d.ts

@@ -0,0 +1,8 @@
+import type { Props } from "react-flame-graph";
+import type { TransformedFlameGraph } from "../types";
+/**
+ * Hook to translate the properties we get from the Player Content (DSL > JSON > transformer)
+ * into what the FlameGraph component expects.
+ */
+export declare const useFlameGraphProps: (props: TransformedFlameGraph) => Props;
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./component";
+export * from "./dsl";
+export * from "./transform";
+//# sourceMappingURL=index.d.ts.map

package/types/transform/index.d.ts

@@ -0,0 +1,8 @@
+import type { TransformFunction } from "@player-ui/player";
+import { FlameGraphAsset, TransformedFlameGraph } from "../types";
+/**
+ * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)
+ * and embeds Player state and methods:
+ */
+export declare const flameGraphTransform: TransformFunction<FlameGraphAsset, TransformedFlameGraph>;
+//# sourceMappingURL=index.d.ts.map

package/types/types/index.d.ts

@@ -0,0 +1,27 @@
+import type { Asset } from "@player-ui/types";
+export type ProfilerNode = {
+    /** hook name */
+    name: string;
+    startTime?: number;
+    /** endTime of the hook */
+    endTime?: number;
+    /** duration of hook resolution times in ms */
+    value?: number;
+    /** tooltip to be shown on hover */
+    tooltip?: string;
+    /** subhook profiler nodes */
+    children: ProfilerNode[];
+};
+export interface FlameGraphAsset extends Asset<"flame-graph"> {
+    /** Dot separated string Representation of a path within the data-model */
+    binding?: string;
+    /** height of the flame graph */
+    height?: number;
+    /** width of the flame graph */
+    width?: number;
+}
+/** A stateful instance of the asset */
+export interface TransformedFlameGraph extends FlameGraphAsset {
+    data?: ProfilerNode;
+}
+//# sourceMappingURL=index.d.ts.map