From d8140a5982c67aa300404007c186f1aedf41e929 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Thu, 3 Aug 2023 11:29:55 +0200 Subject: [PATCH] Make extension panes hot-reload/reconfigurable --- .../index.html | 0 .../tests/hot-reload-extension-pane/index.tsx | 88 +++++++++++++++++++ .../hot-reload-extension-pane/test.e2e.ts | 26 ++++++ .../hot-reload-extension-toolbar/index.html | 11 +++ .../index.tsx | 2 +- .../test.e2e.ts | 4 +- .../src/tests/reconfigure-extension/App.tsx | 37 -------- theatre/studio/src/PaneManager.ts | 3 +- .../panels/BasePanel/ExtensionPaneWrapper.tsx | 9 +- 9 files changed, 136 insertions(+), 44 deletions(-) rename packages/playground/src/tests/{reconfigure-extension => hot-reload-extension-pane}/index.html (100%) create mode 100644 packages/playground/src/tests/hot-reload-extension-pane/index.tsx create mode 100644 packages/playground/src/tests/hot-reload-extension-pane/test.e2e.ts create mode 100644 packages/playground/src/tests/hot-reload-extension-toolbar/index.html rename packages/playground/src/tests/{reconfigure-extension => hot-reload-extension-toolbar}/index.tsx (96%) rename packages/playground/src/tests/{reconfigure-extension => hot-reload-extension-toolbar}/test.e2e.ts (84%) delete mode 100644 packages/playground/src/tests/reconfigure-extension/App.tsx diff --git a/packages/playground/src/tests/reconfigure-extension/index.html b/packages/playground/src/tests/hot-reload-extension-pane/index.html similarity index 100% rename from packages/playground/src/tests/reconfigure-extension/index.html rename to packages/playground/src/tests/hot-reload-extension-pane/index.html diff --git a/packages/playground/src/tests/hot-reload-extension-pane/index.tsx b/packages/playground/src/tests/hot-reload-extension-pane/index.tsx new file mode 100644 index 0000000..bf49fb3 --- /dev/null +++ b/packages/playground/src/tests/hot-reload-extension-pane/index.tsx @@ -0,0 +1,88 @@ +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: {}, + panes: [], +} + +studio.initialize({usePersistentStorage: false}) + +let currentStep = -1 + +extensionButton( + 'Forward', + () => { + if (currentStep < steps.length - 1) { + currentStep++ + steps[currentStep]() + } + }, + '>', +) + +const steps = [ + function step0() { + studio.extend( + { + ...ext1, + panes: [ + { + class: 'pane1', + mount: ({paneId, node}) => { + const el = document.createElement('div') + el.innerHTML = 'pane1-config1' + node.appendChild(el) + return function unmount() { + node.removeChild(el) + console.log('unmount pane1-config1') + } + }, + }, + ], + }, + + {__experimental_reconfigure: true}, + ) + studio.createPane('pane1') + }, + function step1() { + studio.extend( + { + ...ext1, + panes: [ + { + class: 'pane1', + mount: ({paneId, node}) => { + const el = document.createElement('div') + el.innerHTML = 'pane1-config2' + node.appendChild(el) + return function unmount() { + node.removeChild(el) + console.log('unmount pane1-config2') + } + }, + }, + ], + }, + + {__experimental_reconfigure: true}, + ) + }, + function step2() { + studio.extend( + { + ...ext1, + panes: [], + }, + + {__experimental_reconfigure: true}, + ) + }, + function step3() { + steps[1]() + }, +] diff --git a/packages/playground/src/tests/hot-reload-extension-pane/test.e2e.ts b/packages/playground/src/tests/hot-reload-extension-pane/test.e2e.ts new file mode 100644 index 0000000..f5e6d10 --- /dev/null +++ b/packages/playground/src/tests/hot-reload-extension-pane/test.e2e.ts @@ -0,0 +1,26 @@ +import {test, expect} from '@playwright/test' + +test.describe('hot-reload-extension-pane', () => { + test('works', async ({page}) => { + await page.goto('./tests/hot-reload-extension-pane/') + + const toolbar = page.locator( + '[data-test-id="theatre-extensionToolbar-global"]', + ) + + const forwardButton = toolbar.getByRole('button', {name: '>'}) + await forwardButton.click() + + const pane = page.locator( + '[data-test-id="theatre-pane-content-pane1 \\#1"]', + ) + + expect(await pane.textContent()).toEqual('pane1-config1') + await forwardButton.click() + expect(await pane.textContent()).toEqual('pane1-config2') + await forwardButton.click() + await expect(pane).not.toBeAttached() + await forwardButton.click() + expect(await pane.textContent()).toEqual('pane1-config2') + }) +}) diff --git a/packages/playground/src/tests/hot-reload-extension-toolbar/index.html b/packages/playground/src/tests/hot-reload-extension-toolbar/index.html new file mode 100644 index 0000000..b3a037a --- /dev/null +++ b/packages/playground/src/tests/hot-reload-extension-toolbar/index.html @@ -0,0 +1,11 @@ + + + + + Theatre.js Playground + + + +
+ + diff --git a/packages/playground/src/tests/reconfigure-extension/index.tsx b/packages/playground/src/tests/hot-reload-extension-toolbar/index.tsx similarity index 96% rename from packages/playground/src/tests/reconfigure-extension/index.tsx rename to packages/playground/src/tests/hot-reload-extension-toolbar/index.tsx index 36f5730..733d722 100644 --- a/packages/playground/src/tests/reconfigure-extension/index.tsx +++ b/packages/playground/src/tests/hot-reload-extension-toolbar/index.tsx @@ -28,7 +28,7 @@ const ext1: IExtension = { panes: [], } -studio.initialize() +studio.initialize({usePersistentStorage: false}) let currentStep = -1 diff --git a/packages/playground/src/tests/reconfigure-extension/test.e2e.ts b/packages/playground/src/tests/hot-reload-extension-toolbar/test.e2e.ts similarity index 84% rename from packages/playground/src/tests/reconfigure-extension/test.e2e.ts rename to packages/playground/src/tests/hot-reload-extension-toolbar/test.e2e.ts index fdd181c..5e312ce 100644 --- a/packages/playground/src/tests/reconfigure-extension/test.e2e.ts +++ b/packages/playground/src/tests/hot-reload-extension-toolbar/test.e2e.ts @@ -1,8 +1,8 @@ import {test, expect} from '@playwright/test' -test.describe('reconfigure-extension', () => { +test.describe('hot-reload-extension-toolbar', () => { test('works', async ({page}) => { - await page.goto('./tests/reconfigure-extension/') + await page.goto('./tests/hot-reload-extension-toolbar/') const toolbar = page.locator( '[data-test-id="theatre-extensionToolbar-global"]', diff --git a/packages/playground/src/tests/reconfigure-extension/App.tsx b/packages/playground/src/tests/reconfigure-extension/App.tsx deleted file mode 100644 index daa8cdf..0000000 --- a/packages/playground/src/tests/reconfigure-extension/App.tsx +++ /dev/null @@ -1,37 +0,0 @@ -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 ( -
{ - // return setBgIndex((bgIndex) => (bgIndex + 1) % bgs.length) - }} - style={{ - height: '100vh', - }} - > - - - - - - - - - - - -
- ) -} - -export default App diff --git a/theatre/studio/src/PaneManager.ts b/theatre/studio/src/PaneManager.ts index 86f4478..8e8e1c6 100644 --- a/theatre/studio/src/PaneManager.ts +++ b/theatre/studio/src/PaneManager.ts @@ -1,5 +1,4 @@ import {prism, val} from '@theatre/dataverse' -import {emptyArray} from '@theatre/shared/utils' import type {PaneInstanceId} from '@theatre/shared/utils/ids' import SimpleCache from '@theatre/shared/utils/SimpleCache' import type {$IntentionalAny, StrictRecord} from '@theatre/shared/utils/types' @@ -50,7 +49,7 @@ export default class PaneManager { } return inst }, - emptyArray, + [definition], ) instances[instanceId] = instance diff --git a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx index 19b023c..262439d 100644 --- a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx @@ -27,6 +27,8 @@ const minDims = {width: 300, height: 300} const ExtensionPaneWrapper: React.FC<{ paneInstance: PaneInstance<$FixMe> }> = ({paneInstance}) => { + console.log(paneInstance) + return ( }> = ({ }, [paneInstance]) return ( - + @@ -168,7 +170,10 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({ - + )