Pin to three 0.133 and add a visual regression test for it

packages/playground/devEnv/playwright.config.ts

@@ -51,6 +51,10 @@ const config: PlaywrightTestConfig = {
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
+        launchOptions: {
+          // args: ["--headless","--no-sandbox","--use-angle=gl"]
+          args: ['--no-sandbox'],
+        },
       },
     },
 

packages/playground/src/tests/hot-reload-extension-pane/test.e2e.ts

@@ -5,15 +5,13 @@ test.describe('hot-reload-extension-pane', () => {
     await page.goto('./tests/hot-reload-extension-pane/')
 
     const toolbar = page.locator(
-      '[data-test-id="theatre-extensionToolbar-global"]',
+      '[data-testid="theatre-extensionToolbar-global"]',
     )
 
     const forwardButton = toolbar.getByRole('button', {name: '>'})
     await forwardButton.click()
 
-    const pane = page.locator(
+    const pane = page.locator('[data-testid="theatre-pane-content-pane1 \\#1"]')
-      '[data-test-id="theatre-pane-content-pane1 \\#1"]',
-    )
 
     expect(await pane.textContent()).toEqual('pane1-config1')
     await forwardButton.click()

packages/playground/src/tests/hot-reload-extension-toolbar/test.e2e.ts

@@ -5,7 +5,7 @@ test.describe('hot-reload-extension-toolbar', () => {
     await page.goto('./tests/hot-reload-extension-toolbar/')
 
     const toolbar = page.locator(
-      '[data-test-id="theatre-extensionToolbar-global"]',
+      '[data-testid="theatre-extensionToolbar-global"]',
     )
 
     const forwardButton = toolbar.getByRole('button', {name: '>'})

packages/playground/src/tests/r3f-dynamic-tree/App.tsx

@@ -51,9 +51,13 @@ const cube1Config3 = cube1Config2
 function Scene() {
   const [state, setState] = useState(1)
 
-  useExtensionButton('Step forward', () => {
+  useExtensionButton(
-    setState((s) => s + 1)
+    'Step forward',
-  })
+    () => {
+      setState((s) => s + 1)
+    },
+    '>',
+  )
 
   useEffect(() => {}, [])
 

packages/playground/src/tests/r3f-dynamic-tree/index.tsx

@@ -5,6 +5,6 @@ import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
 
 studio.extend(extension)
-studio.initialize()
+studio.initialize({usePersistentStorage: false})
 
 ReactDOM.render(<App />, document.getElementById('root'))

packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts

@@ -0,0 +1,24 @@
+import {test, expect} from '@playwright/test'
+
+test.describe('r3f-dynamic-tree', () => {
+  test('works', async ({page}) => {
+    test.setTimeout(30000)
+    await page.goto('./tests/r3f-dynamic-tree/')
+
+    const toolbar = page.locator(
+      '[data-testid="theatre-extensionToolbar-global"]',
+    )
+
+    const snapshotButton = toolbar.getByRole('button').nth(0)
+    await snapshotButton.click()
+
+    const pane = page.getByTestId('theatre-pane-content-snapshot #1')
+    await expect(pane).toHaveScreenshot({})
+
+    const forwardButton = toolbar.getByRole('button', {name: '>'})
+    await forwardButton.click()
+    await forwardButton.click()
+    await forwardButton.click()
+    await expect(pane).toHaveScreenshot({})
+  })
+})

packages/r3f/package.json

@@ -54,6 +54,7 @@
     "@types/node": "^15.6.2",
     "@types/react": "^17.0.9",
     "@types/styled-components": "^5.1.9",
+    "@types/three": "0.131.0",
     "esbuild": "^0.18.17",
     "esbuild-register": "^3.4.2",
     "lodash-es": "^4.17.21",
@@ -65,6 +66,7 @@
     "react-use-measure": "^2.0.4",
     "reakit": "^1.3.8",
     "styled-components": "^5.3.5",
+    "three": "0.131.3",
     "typescript": "^4.4.2",
     "zustand": "^3.5.1"
   },

theatre/package.json

@@ -40,7 +40,6 @@
     "@types/redux-actions": "^2.6.1",
     "@types/shallowequal": "^1.1.1",
     "@types/styled-components": "^5.1.9",
-    "@types/three": "^0.129.0",
     "@types/uuid": "^8.3.0",
     "blob-compare": "1.1.0",
     "circular-dependency-plugin": "^5.2.2",

theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx

@@ -158,7 +158,7 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
   }, [paneInstance])
 
   return (
-    <Container data-test-id={`theatre-pane-wrapper-${paneInstance.instanceId}`}>
+    <Container data-testid={`theatre-pane-wrapper-${paneInstance.instanceId}`}>
       <PanelDragZone>
         <TitleBar>
           <PaneTools>
@@ -171,7 +171,7 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
       </PanelDragZone>
       <ErrorBoundary FallbackComponent={ErrorFallback}>
         <F2
-          data-test-id={`theatre-pane-content-${paneInstance.instanceId}`}
+          data-testid={`theatre-pane-content-${paneInstance.instanceId}`}
           ref={setMountingPoint}
         />
       </ErrorBoundary>

theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx

@@ -71,7 +71,7 @@ export const ExtensionToolbar: React.FC<{
   if (groups.length === 0) return null
 
   return (
-    <Container data-test-id={`theatre-extensionToolbar-${toolbarId}`}>
+    <Container data-testid={`theatre-extensionToolbar-${toolbarId}`}>
       {showLeftDivider ? <GroupDivider></GroupDivider> : undefined}
       {groups}
     </Container>

yarn.lock

@@ -7807,6 +7807,7 @@ __metadata:
     "@types/node": ^15.6.2
     "@types/react": ^17.0.9
     "@types/styled-components": ^5.1.9
+    "@types/three": 0.131.0
     esbuild: ^0.18.17
     esbuild-register: ^3.4.2
     lodash-es: ^4.17.21
@@ -7818,6 +7819,7 @@ __metadata:
     react-use-measure: ^2.0.4
     reakit: ^1.3.8
     styled-components: ^5.3.5
+    three: 0.131.3
     typescript: ^4.4.2
     zustand: ^3.5.1
   peerDependencies:
@@ -8629,10 +8631,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/three@npm:^0.129.0":
+"@types/three@npm:0.131.0":
-  version: 0.129.0
+  version: 0.131.0
-  resolution: "@types/three@npm:0.129.0"
+  resolution: "@types/three@npm:0.131.0"
-  checksum: ab698c6d2b0f96c0760525cd5e72e7970bb11daf2abc6510784ce184301d087819c6a5e4d3d15f35ed5a5ceaf7b3675a53d286245a2c33bdd767b09f0f820041
+  checksum: 3d8def97d9a42855a7726f26bfd3339fc6f0565adf6206852cb2d6e4296af8372fb5dc9c39312fa8472824776664e16b20f860e7560697f0a3ec4e8db222dcb9
   languageName: node
   linkType: hard
 
@@ -30859,7 +30861,6 @@ fsevents@^1.2.7:
     "@types/redux-actions": ^2.6.1
     "@types/shallowequal": ^1.1.1
     "@types/styled-components": ^5.1.9
-    "@types/three": ^0.129.0
     "@types/uuid": ^8.3.0
     blob-compare: 1.1.0
     circular-dependency-plugin: ^5.2.2
@@ -30998,6 +30999,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"three@npm:0.131.3":
+  version: 0.131.3
+  resolution: "three@npm:0.131.3"
+  checksum: 947308298088de498c61ebbcbc5d9ae2b1acdd876855f4b3bd98214797706b96902d136eab330d8a8ae93c0edb6ac2324442b1c00abccb50bf55f7db98ea60ec
+  languageName: node
+  linkType: hard
+
 "three@npm:^0.130.1":
   version: 0.130.1
   resolution: "three@npm:0.130.1"