chore: separate code from chrome

package.json

@@ -10,12 +10,14 @@
     "./packages/*"
   ],
   "scripts": {
+    "clean": "rimraf .upload && rimraf packages/*/dist",
     "postinstall": "patch-package",
     "lint": "eslint --ext .ts,.tsx . && prettier --check .",
     "lint:fix": "eslint --ext .ts,.tsx . --fix && prettier --write .",
     "start": "npm run --ws start --if-present",
     "start:local": "npm run start --workspace @devtool/local --if-present",
     "start:chrome": "npm run start --workspace @devtool/chrome & npm run start --workspace @devtool/example",
+    "prebuild": "npm run clean",
     "build": "npm run --ws build --if-present",
     "postbuild": "mkdir -p .upload && cd ./packages/devtool-chrome && zip -r chrome.zip ./dist/chrome/* && mv chrome.zip ../../.upload/",
     "watch": "npm run --ws watch --if-present",

packages/api/package.json

@@ -25,7 +25,7 @@
     "start": "npm run watch"
   },
   "devDependencies": {
-    "pixi.js": "8.1.4"
+    "pixi.js": "8.1.5"
   },
   "peerDependencies": {
     "pixi.js": "^7 || ^8"

packages/api/src/index.ts

@@ -2,6 +2,9 @@
 /// <reference path="../global.d.ts" />
 import { Devtools, DevtoolsAPI } from './types';
 
+export * from './propertyPlugin';
+export * from './nodeTrackerPlugin';
+export * from './treePlugin';
 export * from './types';
 
 export async function initDevtools(opts: DevtoolsAPI) {
@@ -11,7 +14,7 @@ export async function initDevtools(opts: DevtoolsAPI) {
     throw new Error('You must provide either an app or a renderer and stage');
   }
   if (castOpts.app) {
-    castOpts.renderer = castOpts.app.renderer as import('pixi.js').Renderer;
+    castOpts.renderer = castOpts.app.renderer;
     castOpts.stage = castOpts.app.stage;
   }
 

packages/api/src/nodeTrackerPlugin.ts

@@ -0,0 +1,6 @@
+import { Container } from 'pixi.js';
+
+export interface NodeTrackerPlugin {
+  trackNode: (container: Container, state: Record<string, number>) => boolean;
+  getKeys: () => string[];
+}

packages/api/src/propertyPlugin.ts

@@ -0,0 +1,24 @@
+import type { Container } from 'pixi.js';
+
+type PropertyPanelData = {
+  value: any;
+  prop: string;
+  entry: {
+    section: string;
+    label?: string;
+    type: 'boolean' | 'number' | 'range' | 'select' | 'text' | 'button' | 'vector2' | 'vectorX' | 'color';
+    options?: any;
+    onChange: (value: string | number | boolean) => void;
+  };
+};
+
+type NoOnChange = Omit<PropertyPanelData['entry'], 'onChange'>;
+export type Props = Omit<PropertyPanelData, 'entry'> & { entry: NoOnChange };
+export type PropsData = Omit<PropertyPanelData, 'entry'> & { entry: NoOnChange };
+
+export interface PropertyPlugin {
+  updateProps(container: Container): PropsData[];
+  setValue(container: Container, prop: string, value: any): void;
+  containsProperty(prop: string): boolean;
+  props: Props[];
+}

packages/api/src/treePlugin.ts

@@ -0,0 +1,12 @@
+import { Container } from 'pixi.js';
+
+export interface TreePlugin {
+  /** to implement */
+  onRename: (container: Container, newName: string) => void;
+  onDeleted: (container: Container) => void;
+  onCreate: (container: Container) => void;
+  onSwap: (container: Container, newIndex: number) => void;
+  /** to implement */
+
+  getName: (container: Container, data: any) => { name: string; suffix: string };
+}

packages/api/src/types.ts

@@ -1,38 +1,12 @@
 import type { Container, Renderer, Application } from 'pixi.js';
+import { PropertyPlugin } from './propertyPlugin';
+import { NodeTrackerPlugin } from './nodeTrackerPlugin';
 
-type PropertyPanelData = {
-  value: any;
-  prop: string;
-  entry: {
-    section: string;
-    label?: string;
-    type: 'boolean' | 'number' | 'range' | 'select' | 'text' | 'button' | 'vector2' | 'vectorX' | 'color';
-    options?: any;
-    onChange: (value: string | number | boolean) => void;
-  };
-};
-
-export interface NodeTrackerPlugin {
-  trackNode: (container: Container, state: Record<string, number>) => boolean;
-  getKeys: () => string[];
-}
-
-type NoOnChange = Omit<PropertyPanelData['entry'], 'onChange'>;
-export type Props = Omit<PropertyPanelData, 'entry'> & { entry: NoOnChange };
-export type PropsData = Omit<PropertyPanelData, 'entry'> & { entry: NoOnChange };
-
-export interface PropertyPlugin {
-  updateProps(container: Container): PropsData[];
-  setValue(container: Container, prop: string, value: any): void;
-  containsProperty(prop: string): boolean;
-  props: Props[];
-}
-
-interface DevtoolApp {
+export interface DevtoolApp extends DevtoolPixi {
   app: Application;
 }
 
-interface DevtoolRenderer {
+export interface DevtoolRenderer extends DevtoolPixi {
   renderer: Renderer;
   stage: Container;
 }
@@ -45,5 +19,5 @@ interface DevtoolPixi {
   };
 }
 
-export type DevtoolsAPI = (DevtoolApp | DevtoolRenderer) & DevtoolPixi;
-export type Devtools = Partial<DevtoolApp & DevtoolRenderer & DevtoolPixi>;
+export type DevtoolsAPI = DevtoolApp | DevtoolRenderer;
+export type Devtools = Partial<DevtoolApp & DevtoolRenderer>;

packages/backend/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@devtool/backend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {},
+  "dependencies": {}
+}

packages/devtool-chrome/src/inject/utils/poller.ts → packages/backend/src/utils/poller.ts

@@ -1,5 +1,4 @@
 import { DevtoolMessage } from '@devtool/frontend/types';
-import { convertPostMessage } from '../../messageUtils';
 import { PixiDevtools } from '../pixi';
 
 // Constants
@@ -46,7 +45,6 @@ function tryDetectPixi(foundCallback: () => void) {
     if (pixiDetectionResult === DevtoolMessage.active) {
       stopPolling();
       foundCallback();
-      window.postMessage(convertPostMessage(DevtoolMessage.active, {}), '*');
     }
   } catch (error) {
     // If an error occurred, stop polling

packages/devtool-chrome/package.json

@@ -13,6 +13,7 @@
     "start": "npm run watch"
   },
   "dependencies": {
-    "@devtool/frontend": "*"
+    "@devtool/frontend": "*",
+    "@devtool/backend": "*"
   }
 }

packages/devtool-chrome/src/inject/index.ts

@@ -1,7 +1,9 @@
 // Note: this file is compiled to `dist/content-inject/index.js` and is used by the content script
 
-import { PixiDevtools } from './pixi';
-import { pollPixi } from './utils/poller';
+import { PixiDevtools } from '@devtool/backend/pixi';
+import { pollPixi } from '@devtool/backend/utils/poller';
+import { convertPostMessage } from '../messageUtils';
+import { DevtoolMessage } from '@devtool/frontend/types';
 
 function attach() {
   const renderer = PixiDevtools.renderer;
@@ -15,6 +17,8 @@ function attach() {
       },
     });
   }
+
+  window.postMessage(convertPostMessage(DevtoolMessage.active, {}), '*');
 }
 
 pollPixi(attach);

packages/devtool-chrome/vite.chrome.config.ts

@@ -25,6 +25,7 @@ export default defineConfig((config) => {
     resolve: {
       alias: {
         '@devtool/frontend': path.resolve(process.cwd(), '../../packages/frontend/src/'),
+        '@devtool/backend': path.resolve(process.cwd(), '../../packages/backend/src/'),
       },
     },
     plugins: [

packages/devtool-chrome/vite.inject.config.ts

@@ -9,6 +9,7 @@ export default defineConfig((config) => {
     resolve: {
       alias: {
         '@devtool/frontend': path.resolve(process.cwd(), '../../packages/frontend/src/'),
+        '@devtool/backend': path.resolve(process.cwd(), '../../packages/backend/src/'),
       },
     },
     root: resolve(__dirname, 'src/'),

packages/devtool-local/package.json

@@ -9,6 +9,7 @@
     "start": "npm run watch"
   },
   "dependencies": {
-    "@devtool/frontend": "*"
+    "@devtool/frontend": "*",
+    "@devtool/backend": "*"
   }
 }

packages/devtool-local/src/main.tsx

@@ -2,7 +2,7 @@ import App from '@devtool/frontend/App';
 import type { BridgeFn } from '@devtool/frontend/lib/utils';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { PixiDevtools } from '../../devtool-chrome/src/inject/pixi';
+import { PixiDevtools } from '@devtool/backend/pixi';
 import scene from './scene.ts';
 import * as PIXI from 'pixi.js';
 

packages/devtool-local/vite.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@devtool/frontend': path.resolve(process.cwd(), '../../packages/frontend/src/'),
+      '@devtool/backend': path.resolve(process.cwd(), '../../packages/backend/src/'),
     },
   },
 });

packages/frontend/src/App.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import { create } from 'zustand';
@@ -15,8 +14,6 @@ import { ScenePanel } from './pages/scene/ScenePanel';
 import { sceneStateSlice } from './pages/scene/state';
 import { DevtoolState } from './types';
 
-SyntaxHighlighter.registerLanguage('typescript', ts);
-
 const tabComponents = {
   Scene: <ScenePanel />,
   Assets: <AssetsPanel />,
@@ -153,7 +150,7 @@ initDevtools({
               <div className="p-4">
                 <p>1. Using the window.__PIXI_DEVTOOLS__ global variable</p>
                 <div className="relative p-4">
-                  <SyntaxHighlighter language="typescript" style={dracula}>
+                  <SyntaxHighlighter language="javascript" style={dracula}>
                     {windowString}
                   </SyntaxHighlighter>
                   <CopyToClipboardButton data={windowString} />
@@ -170,7 +167,7 @@ initDevtools({
                   <CopyToClipboardButton data={npmInstallString} />
                 </div>
                 <div className="relative p-4 pt-0">
-                  <SyntaxHighlighter language="typescript" style={dracula}>
+                  <SyntaxHighlighter language="javascript" style={dracula}>
                     {npmString}
                   </SyntaxHighlighter>
                   <CopyToClipboardButton data={npmString} />

tsconfig.json

@@ -21,6 +21,7 @@
     "baseUrl": "./",
     "paths": {
       "@devtool/frontend/*": ["packages/frontend/src/*"],
+      "@devtool/backend/*": ["packages/backend/src/*"],
       "@pixi/devtools": ["packages/api/src/index.ts"]
     }
   },