Implement hot-reloading extension toolbars

2023-08-03 10:54:54 +02:00 · 2023-08-03 10:54:54 +02:00 · 4f00443ee1
commit 4f00443ee1
parent cd6f44d9dd
8 changed files with 213 additions and 6 deletions
--- a/packages/playground/src/shared/utils/useExtensionButton.ts
+++ b/packages/playground/src/shared/utils/useExtensionButton.ts
@ -32,5 +32,31 @@ export function useExtensionButton(
  }, [id])
 }

+export function extensionButton(
+  title: string,
+  callback: () => void,
+  svgSource?: string,
+) {
+  const id = 'useExtensionButton#' + idCounter++
+  studio.extend({
+    id: id,
+    toolbars: {
+      global(set) {
+        set([
+          {
+            type: 'Icon',
+            title,
+            onClick() {
+              callback()
+            },
+            svgSource: svgSource ?? stepForward,
+          },
+        ])
+        return () => {}
+      },
+    },
+  })
+}
+
 // FontAwesome FaStepForward
 const stepForward = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z"></path></svg>`
--- a/packages/playground/src/tests/reconfigure-extension/App.tsx
+++ b/packages/playground/src/tests/reconfigure-extension/App.tsx
@ -0,0 +1,37 @@
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import {Stars, TorusKnot} from '@react-three/drei'
+import {getProject} from '@theatre/core'
+import React from 'react'
+import {Canvas} from '@react-three/fiber'
+
+function App() {
+  return (
+    <div
+      onClick={() => {
+        // return setBgIndex((bgIndex) => (bgIndex + 1) % bgs.length)
+      }}
+      style={{
+        height: '100vh',
+      }}
+    >
+      <Canvas
+        dpr={[1.5, 2]}
+        linear
+        gl={{preserveDrawingBuffer: true}}
+        frameloop="demand"
+      >
+        <SheetProvider sheet={getProject('Space').sheet('Scene')}>
+          <ambientLight intensity={0.75} />
+          <e.group theatreKey="trefoil">
+            <TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}>
+              <meshNormalMaterial />
+            </TorusKnot>
+          </e.group>
+          <Stars radius={500} depth={50} count={1000} factor={10} />
+        </SheetProvider>
+      </Canvas>
+    </div>
+  )
+}
+
+export default App
--- a/packages/playground/src/tests/reconfigure-extension/index.html
+++ b/packages/playground/src/tests/reconfigure-extension/index.html
@ -0,0 +1,11 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Theatre.js Playground</title>
+    <script src="./index.tsx" type="module"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/packages/playground/src/tests/reconfigure-extension/index.tsx
+++ b/packages/playground/src/tests/reconfigure-extension/index.tsx
@ -0,0 +1,86 @@
+import type {IExtension} from '@theatre/studio'
+import studio from '@theatre/studio'
+import '@theatre/core'
+import {extensionButton} from '../../shared/utils/useExtensionButton'
+
+const ext1: IExtension = {
+  id: '@theatre/hello-world-extension',
+  toolbars: {
+    global(set, studio) {
+      console.log('mount 1')
+
+      set([
+        {
+          type: 'Icon',
+          title: 'Icon 1',
+          svgSource: '1',
+          onClick: () => {
+            console.log('Icon 1')
+          },
+        },
+      ])
+
+      return () => {
+        console.log('unmount 1')
+      }
+    },
+  },
+  panes: [],
+}
+
+studio.initialize()
+
+let currentStep = -1
+
+extensionButton(
+  'Forward',
+  () => {
+    if (currentStep < steps.length - 1) {
+      currentStep++
+      steps[currentStep]()
+    }
+  },
+  '>',
+)
+
+const steps = [
+  function step1() {
+    studio.extend(ext1)
+  },
+  function step2() {
+    studio.extend(
+      {
+        ...ext1,
+        toolbars: {
+          global(set, studio) {
+            console.log('mount 2')
+
+            set([
+              {
+                type: 'Icon',
+                title: 'Icon 2',
+                svgSource: '2',
+                onClick: () => {
+                  console.log('Icon 2')
+                },
+              },
+            ])
+            return () => {
+              console.log('unmount 2')
+            }
+          },
+        },
+      },
+      {__experimental_reconfigure: true},
+    )
+  },
+  function step3() {
+    studio.extend(
+      {
+        ...ext1,
+        toolbars: {},
+      },
+      {__experimental_reconfigure: true},
+    )
+  },
+]
--- a/packages/playground/src/tests/reconfigure-extension/test.e2e.ts
+++ b/packages/playground/src/tests/reconfigure-extension/test.e2e.ts
@ -0,0 +1,25 @@
+import {test, expect} from '@playwright/test'
+
+test.describe('reconfigure-extension', () => {
+  test('works', async ({page}) => {
+    await page.goto('./tests/reconfigure-extension/')
+
+    const toolbar = page.locator(
+      '[data-test-id="theatre-extensionToolbar-global"]',
+    )
+
+    const forwardButton = toolbar.getByRole('button', {name: '>'})
+    await forwardButton.click()
+
+    const otherButton = toolbar.getByRole('button').nth(1)
+
+    expect(await otherButton.textContent()).toEqual('1')
+
+    await forwardButton.click()
+    expect(await otherButton.textContent()).toEqual('2')
+    await forwardButton.click()
+
+    // expect otherButton not to exist
+    await expect(otherButton).not.toBeAttached()
+  })
+})