From fdf268ad437e98f0ba45582b5de51334f412188f Mon Sep 17 00:00:00 2001
From: vezwork <elliot@theatrejs.com>
Date: Thu, 4 Aug 2022 12:04:10 -0400
Subject: [PATCH] Add comments and remove extra performance measure

Co-authored-by: Cole Lawrence <cole@colelawrence.com>
---
 packages/dataverse/src/Ticker.ts                    |  3 +++
 .../src/shared/hello-world-extension/App.tsx        |  8 ++++++--
 .../src/shared/hello-world-extension/index.tsx      | 13 +++++++++++--
 .../playground/src/tests/r3f-stress-test/App.tsx    |  6 ++++--
 .../playground/src/tests/r3f-stress-test/index.tsx  | 11 ++++-------
 5 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/dataverse/src/Ticker.ts b/packages/dataverse/src/Ticker.ts
index b4ac8a3..a540a9a 100644
--- a/packages/dataverse/src/Ticker.ts
+++ b/packages/dataverse/src/Ticker.ts
@@ -45,6 +45,9 @@ export default class Ticker {
   /**
    * Counts up for every tick executed.
    * Internally, this is used to measure ticks per second.
+   *
+   * This is "public" to TypeScript, because it's a tool for performance measurements.
+   * Consider this as experimental, and do not rely on it always being here in future releases.
    */
   public __ticks = 0
 
diff --git a/packages/playground/src/shared/hello-world-extension/App.tsx b/packages/playground/src/shared/hello-world-extension/App.tsx
index 4d85034..9156225 100644
--- a/packages/playground/src/shared/hello-world-extension/App.tsx
+++ b/packages/playground/src/shared/hello-world-extension/App.tsx
@@ -1,10 +1,14 @@
 import {editable as e, SheetProvider} from '@theatre/r3f'
 import {Stars, TorusKnot} from '@react-three/drei'
-import {getProject} from '@theatre/core'
+import {getProject, onChange} from '@theatre/core'
 import React from 'react'
 import {Canvas} from '@react-three/fiber'
 
 function App() {
+  const sheet = getProject('Space').sheet('Scene')
+  onChange(sheet.sequence.pointer, (a) => {
+    console.log('gasp!!', a)
+  })
   return (
     <div
       onClick={() => {
@@ -20,7 +24,7 @@ function App() {
         gl={{preserveDrawingBuffer: true}}
         frameloop="demand"
       >
-        <SheetProvider sheet={getProject('Space').sheet('Scene')}>
+        <SheetProvider sheet={sheet}>
           <ambientLight intensity={0.75} />
           <e.group uniqueName="trefoil">
             <TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}>
diff --git a/packages/playground/src/shared/hello-world-extension/index.tsx b/packages/playground/src/shared/hello-world-extension/index.tsx
index ea029b8..752b0e5 100644
--- a/packages/playground/src/shared/hello-world-extension/index.tsx
+++ b/packages/playground/src/shared/hello-world-extension/index.tsx
@@ -37,7 +37,7 @@ studio.extend({
             title: 'Example Icon',
             svgSource: '👁‍🗨',
             onClick: () => {
-              console.log('hello')
+              studio.createPane('example')
             },
           },
         ])
@@ -49,7 +49,16 @@ studio.extend({
       }
     },
   },
-  panes: [],
+  panes: [
+    {
+      class: 'example',
+      mount: ({paneId, node}) => {
+        studio.ui.renderToolset('global', node)
+
+        return () => {}
+      },
+    },
+  ],
 })
 studio.initialize()
 
diff --git a/packages/playground/src/tests/r3f-stress-test/App.tsx b/packages/playground/src/tests/r3f-stress-test/App.tsx
index 4fe5df4..9cad10a 100644
--- a/packages/playground/src/tests/r3f-stress-test/App.tsx
+++ b/packages/playground/src/tests/r3f-stress-test/App.tsx
@@ -42,6 +42,7 @@ function Model({url}: {url: string}) {
   )
 }
 
+// Initially, just copied from the shared/dom example
 const textInterpolate = (left: string, right: string, progression: number) => {
   if (!left || right.startsWith(left)) {
     const length = Math.floor(
@@ -52,7 +53,7 @@ const textInterpolate = (left: string, right: string, progression: number) => {
   return left
 }
 
-const boxObjectConfig = {
+const allPropsObjectConfig = {
   test: types.string('Typing', {interpolate: textInterpolate}),
   testLiteral: types.stringLiteral('a', {a: 'Option A', b: 'Option B'}),
   bool: types.boolean(false),
@@ -77,7 +78,8 @@ function App() {
   const sheet = project.sheet('Scene')
   project.ready.then(() => sheet.sequence.play({iterationCount: Infinity}))
 
-  sheet.object('everything', boxObjectConfig)
+  const allPropsObj = sheet.object('All Props Tester', allPropsObjectConfig)
+  console.log('allPropsObj', allPropsObj)
 
   return (
     <div
diff --git a/packages/playground/src/tests/r3f-stress-test/index.tsx b/packages/playground/src/tests/r3f-stress-test/index.tsx
index 6f34fff..a02b5fd 100644
--- a/packages/playground/src/tests/r3f-stress-test/index.tsx
+++ b/packages/playground/src/tests/r3f-stress-test/index.tsx
@@ -12,13 +12,9 @@ ReactDOM.render(<App />, document.getElementById('root'))
 
 const raf = Ticker.raf
 
-setInterval(() => {
-  const id = Date.now().toString(36) + '-'
-  performance.mark(id)
-  setTimeout(() => {
-    performance.measure('---', id)
-  }, 2000)
-}, 2000)
+// Show "ticks per second" information in performance measurements using the User Timing API
+// See https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API
+// See https://web.dev/user-timings/
 setInterval(() => {
   const start = {
     ticks: raf.__ticks,
@@ -29,6 +25,7 @@ setInterval(() => {
   setTimeout(() => {
     const ticksPerSec =
       ((raf.__ticks - start.ticks) * 1000) / (Date.now() - start.now)
+    // This shows up in the performance tab of devtools if you record!
     performance.measure(
       `${ticksPerSec.toFixed(0)}t/1s - ${(ticksPerSec * 0.5).toFixed(
         0,