feat(@lexical/devtools): Added DevTools panel + shared state

facebook · Mar 20, 2024 · dbd547b · dbd547b
1 parent b1caaee
commit dbd547b
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lexical-devtools/entrypoints/background.ts b/packages/lexical-devtools/entrypoints/background.ts
@@ -5,9 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import store from '../store';
+
 export default defineBackground(() => {
   // eslint-disable-next-line no-console
   console.log('Hello from Lexical DevTools extension content script.', {
     id: browser.runtime.id,
   });
+
+  // listen state changes
+  store.subscribe((state) => {
+    // console.log(state);
+  });
 });
diff --git a/packages/lexical-devtools/entrypoints/devtools-panel/App.tsx b/packages/lexical-devtools/entrypoints/devtools-panel/App.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import * as React from 'react';
+
+import lexicalLogo from '/lexical.svg';
+
+import useStore from '../../store';
+
+function App() {
+  const counter = useStore((state) => state.counter);
+  const increase = useStore((state) => state.increase);
+
+  return (
+    <>
+      <div>
+        <a href="https://lexical.dev" target="_blank">
+          <img src={lexicalLogo} className="logo" alt="Lexical logo" />
+        </a>
+      </div>
+      <div className="card">
+        <button onClick={() => increase(1)}>count is {counter}</button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+    </>
+  );
+}
+
+export default App;
diff --git a/packages/lexical-devtools/entrypoints/devtools-panel/index.html b/packages/lexical-devtools/entrypoints/devtools-panel/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/lexical-devtools/entrypoints/devtools-panel/main.tsx b/packages/lexical-devtools/entrypoints/devtools-panel/main.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/packages/lexical-devtools/entrypoints/devtools/index.html b/packages/lexical-devtools/entrypoints/devtools/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="./main.ts"></script>
+  </head>
+</html>
diff --git a/packages/lexical-devtools/entrypoints/devtools/main.ts b/packages/lexical-devtools/entrypoints/devtools/main.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// Create the panel which appears within the browser devtools
+browser.devtools.panels.create(
+  'Lexical',
+  'icon/128.png',
+  'devtools-panel.html',
+);
diff --git a/packages/lexical-devtools/entrypoints/popup/App.tsx b/packages/lexical-devtools/entrypoints/popup/App.tsx
@@ -7,13 +7,15 @@
  */
 import './App.css';
 
-import {useState} from 'react';
 import * as React from 'react';
 
 import lexicalLogo from '/lexical.svg';
 
+import useStore from '../../store';
+
 function App() {
-  const [count, setCount] = useState(0);
+  const counter = useStore((state) => state.counter);
+  const increase = useStore((state) => state.increase);
 
   return (
     <>
@@ -23,7 +25,7 @@ function App() {
         </a>
       </div>
       <div className="card">
-        <button onClick={() => setCount((c) => c + 1)}>count is {count}</button>
+        <button onClick={() => increase(1)}>count is {counter}</button>
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>

diff --git a/packages/lexical-devtools/entrypoints/popup/main.tsx b/packages/lexical-devtools/entrypoints/popup/main.tsx
@@ -10,10 +10,15 @@ import './style.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
+import {storeReadyPromise} from '../../store';
 import App from './App.tsx';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+storeReadyPromise
+  .then(() =>
+    ReactDOM.createRoot(document.getElementById('root')!).render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>,
+    ),
+  )
+  .catch(console.error);
diff --git a/packages/lexical-devtools/package.json b/packages/lexical-devtools/package.json
@@ -16,7 +16,9 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "webext-zustand": "0.2.0",
+    "zustand": "^4.5.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.46",

diff --git a/packages/lexical-devtools/store.ts b/packages/lexical-devtools/store.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {wrapStore} from 'webext-zustand';
+import {create} from 'zustand';
+
+interface ExtensionState {
+  counter: number;
+  increase: (by: number) => void;
+}
+
+export const useExtensionStore = create<ExtensionState>()((set) => ({
+  counter: 0,
+  increase: (by) => set((state) => ({counter: state.counter + by})),
+}));
+
+export const storeReadyPromise = wrapStore(useExtensionStore);
+
+export default useExtensionStore;
diff --git a/packages/lexical-devtools/types.d.ts b/packages/lexical-devtools/types.d.ts
@@ -0,0 +1,6 @@
+// To be fixed in https://github.com/sinanbekar/webext-zustand/pull/3
+declare module 'webext-zustand' {
+  declare const wrapStore: <T>(
+    store: import('zustand').StoreApi<T>,
+  ) => Promise<void>;
+}