breaking: add extensions api (#36)

.eslintrc.cjs

@@ -1,11 +1,32 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+    'plugin:prettier/recommended',
+  ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: ['react-refresh', 'import'],
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/consistent-type-imports': ['error', { disallowTypeAnnotations: false }],
+    'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+    'import/no-duplicates': ['error'],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'all',
+        argsIgnorePattern: '^_',
+        caughtErrors: 'none',
+        caughtErrorsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
   },
 };

.github/workflows/deploy-docs.yaml

@@ -0,0 +1,33 @@
+name: Reusable Deploy
+
+on:
+  push:
+      branches:
+          - main
+          - docs
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - run: npm ci
+      - run: |
+          git config --global user.name "$GITHUB_ACTOR"
+          git config --global user.email "[email protected]"
+          git remote set-url origin https://git:${GIT_PASS}@github.com/pixijs/devtools.git
+          npm run deploy
+        env:
+          GIT_USER: $GITHUB_ACTOR
+          GIT_PASS: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -2,127 +2,15 @@
 
 <div align="center">
 
-![Your Logo](.github/logo.svg 'PixiJS DevTools')
+<img src=".github/logo.svg" alt="Logo"/>
+<p>A chrome extension for debugging PixiJS applications.<p>
 
 </div>
 
-A chrome extension for debugging PixiJS applications.
 
-# Features
+# Getting Started
 
-This extension is currently in development and has reached only its first phase. In the next phase we will be adding more features to make it easier for developers to diagnose performance issues and visualize the resources that their applications are consuming. The main focus will be around displaying what assets have been loaded by the application.
-
-For now the extension has the following features:
-
-- Display what type of objects your scene is made up of, and how it changes over time.
-- Display the display tree of the application.
-- Ability to inspect and change the properties of objects in the scene.
-- Active node is available in the console as `$pixi`.
-
-## Installation
-
-Installation is available from the chrome web store.
-
-[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/dlkffcaaoccbofklocbjcmppahjjboce.svg)](https://chrome.google.com/webstore/detail/pixijs-devtools/dlkffcaaoccbofklocbjcmppahjjboce)
-
-You can also download the latest release from the [releases page](https://github.com/pixijs/devtools/releases).
-
-## Setup
-
-To use the extension, you need to setup the devtool in your application. This is done by setting the `window.__PIXI_DEVTOOLS__` object to contain the `pixi` and `app` properties.
-The `pixi` property should be the PixiJS library, and the `app` property should be the instance of the `Application` class.
-
-```js
-import * as PIXI from 'pixi.js';
-
-window.__PIXI_DEVTOOLS__ = {
-  pixi: PIXI,
-  app: new Application(),
-};
-```
-
-Alternatively you can install the `@pixi/devtools` package and use the `initDevtools` function to setup the devtool.
-
-```js
-import { initDevtools } from '@pixi/devtools';
-
-initDevtools({
-  app,
-});
-```
-
-This package will automatically import `pixi.js` dynamically if you do not provide `pixi` in the configuration.
-
-### Optional Configuration
-
-You can also pass a configuration object to the `__PIXI_DEVTOOLS__` object. This object can contain the following properties:
-
-- `stage` - The stage of the application. This is used to display the display tree.
-- `renderer` - The renderer of the application. This is used to display the render information.
-- `plugins` - An object containing different types of plugins that can be used to extend the functionality of the devtool.
-  - `stats` - An array of stats plugins to allow you to track the number of any object type in the scene.
-  - `properties` - An array of property plugins to allow you to display whatever properties you want in the scene panel.
-
-```js
-const app = new Application();
-window.__PIXI_DEVTOOLS__ = {
-    pixi: PIXI,
-    app
-    stage: app.stage
-    renderer: app.renderer
-    plugins: {
-        stats: [],
-        properties: []
-    }
-};
-```
-
-### Ignore Objects
-
-You can ignore objects from being displayed in the scene panel by setting the `__devtoolIgnore`/`__devtoolIgnoreChildren` properties to any pixi object. This can be useful for ignoring objects such as particle containers that can have thousands of children and slow down the devtool considerably.
-
-```js
-const container = new Container();
-container.__devtoolIgnore = true;
-
-const particles = new ParticleContainer();
-particles.__devtoolIgnoreChildren = true;
-```
-
-If you install the `@pixi/devtools` package the typings for `__devtoolIgnore`/ `__devtoolIgnoreChildren` will be available.
-
-### Property Plugins
-
-Property plugins are used to display custom properties in the scene panel. Below is an example of a property plugin that displays the `x` and `y` properties of a `Container` object.
-
-```js
-export const XYPlugin: PropertyPlugin = {
-  updateProps(container: Container) {
-    this.props.forEach((property) => {
-      const prop = property.prop as keyof Container | string;
-      const value = container[prop as keyof Container] as any;
-
-      property.value = [value.x, value.y];
-    });
-
-    return this.props;
-  },
-  containsProperty(prop: string) {
-    return this.props.some((property) => property.prop === prop);
-  },
-  setValue(container: Container, prop: string, value: any) {
-    prop = prop as keyof Container;
-    container[prop].set(value[0], value[1]);
-  },
-  props: [
-    {
-      value: null,
-      prop: 'position',
-      entry: { section: 'Transform', options: { x: { label: 'x' }, y: { label: 'y' } }, type: 'vector2' },
-    },
-  ],
-};
-```
+Please follow the documentation at [pixijs.io.devtools](https://pixijs.io.devtools)
 
 ## License