tidy

.github/workflows/main.yml

@@ -1,11 +1,11 @@
 name: Automation
 on:
   push:
-    branches: [ '**' ]
+    branches: ['**']
   release:
-    types: [ published ]
+    types: [published]
   pull_request:
-    branches: [ '**' ]
+    branches: ['**']
 jobs:
   build:
     name: Build
@@ -18,70 +18,70 @@ jobs:
       SOURCE_DIR: 'deploy'
     runs-on: ubuntu-20.04
     steps:
-    - uses: actions/checkout@v3
-    - name: Install xvfb
-      run: sudo apt-get install xvfb
-    - name: Use Node.js 18.x
-      uses: actions/setup-node@v3
-      with:
-        node-version: 18
-    - name: Install Dependencies
-      run: npm ci
+      - uses: actions/checkout@v3
+      - name: Install xvfb
+        run: sudo apt-get install xvfb
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install Dependencies
+        run: npm ci
 
-    - name: Build for Distribution
-      run: xvfb-run --auto-servernum npm run dist
+      - name: Build for Distribution
+        run: xvfb-run --auto-servernum npm run dist
 
-    # All the below are deploy-related steps
-    - name: Extract Branch Name
-      id: branch_name
-      if: github.event_name == 'push' && !contains(github.ref, 'refs/tags')
-      run: echo BRANCH_NAME=${GITHUB_REF/refs\/heads\//} >> $GITHUB_OUTPUT
+      # All the below are deploy-related steps
+      - name: Extract Branch Name
+        id: branch_name
+        if: github.event_name == 'push' && !contains(github.ref, 'refs/tags')
+        run: echo BRANCH_NAME=${GITHUB_REF/refs\/heads\//} >> $GITHUB_OUTPUT
 
-    # Examples:
-    # 1) PR feature/acme merged into dev
-    # 2) branch A merged into branch B
-    # 3) branch A pushed directly to git
-    - name: Deploy Non-Tag Branches
-      uses: jakejarvis/s3-sync-action@master
-      if: github.event_name == 'push' && env.AWS_ACCESS_KEY_ID != ''
-      with:
-        args: --acl public-read --follow-symlinks --delete --cache-control "max-age=60"
-      env:
-        DEST_DIR: ${{ steps.branch_name.outputs.BRANCH_NAME }}
+      # Examples:
+      # 1) PR feature/acme merged into dev
+      # 2) branch A merged into branch B
+      # 3) branch A pushed directly to git
+      - name: Deploy Non-Tag Branches
+        uses: jakejarvis/s3-sync-action@master
+        if: github.event_name == 'push' && env.AWS_ACCESS_KEY_ID != ''
+        with:
+          args: --acl public-read --follow-symlinks --delete --cache-control "max-age=60"
+        env:
+          DEST_DIR: ${{ steps.branch_name.outputs.BRANCH_NAME }}
 
-    # Release is published and deployed into s3://bucket-name/v5.22/
-    - name: Deploy Released Branches
-      uses: jakejarvis/s3-sync-action@master
-      if: github.event_name == 'release' && env.AWS_ACCESS_KEY_ID != ''
-      with:
-        args: --acl public-read --follow-symlinks --delete --cache-control "max-age=2592000"
-      env:
-        DEST_DIR: ${{ github.event.release.tag_name }}
+      # Release is published and deployed into s3://bucket-name/v5.22/
+      - name: Deploy Released Branches
+        uses: jakejarvis/s3-sync-action@master
+        if: github.event_name == 'release' && env.AWS_ACCESS_KEY_ID != ''
+        with:
+          args: --acl public-read --follow-symlinks --delete --cache-control "max-age=2592000"
+        env:
+          DEST_DIR: ${{ github.event.release.tag_name }}
 
-    # Same release from previous deployed into s3://bucket-name/release/
-    - name: Deploy Latest Release
-      uses: jakejarvis/s3-sync-action@master
-      if: github.event_name == 'release' && github.event.release.prerelease == false && env.AWS_ACCESS_KEY_ID != ''
-      with:
-        args: --acl public-read --follow-symlinks --delete --cache-control "max-age=1209600"
-      env:
-        DEST_DIR: 'latest'
+      # Same release from previous deployed into s3://bucket-name/release/
+      - name: Deploy Latest Release
+        uses: jakejarvis/s3-sync-action@master
+        if: github.event_name == 'release' && github.event.release.prerelease == false && env.AWS_ACCESS_KEY_ID != ''
+        with:
+          args: --acl public-read --follow-symlinks --delete --cache-control "max-age=1209600"
+        env:
+          DEST_DIR: 'latest'
 
-    # Publish to NPM
-    - name: Publish Latest Release
-      if: github.event_name == 'release' && github.event.release.prerelease == false && env.NODE_AUTH_TOKEN != ''
-      run: npm run publish-ci
+      # Publish to NPM
+      - name: Publish Latest Release
+        if: github.event_name == 'release' && github.event.release.prerelease == false && env.NODE_AUTH_TOKEN != ''
+        run: npm run publish-ci
 
-    # Publish to NPM with prerelease dist-tag
-    - name: Publish Latest Prerelease
-      if: github.event_name == 'release' && github.event.release.prerelease && env.NODE_AUTH_TOKEN != ''
-      run: npm run publish-ci
-      env:
-        XS_PUBLISH_TAG: prerelease
-    
-    # Automatically attach browser files to release
-    - name: Upload to Release
-      if: github.event_name == 'release'
-      uses: softprops/action-gh-release@v1
-      with:
-        files: dist/*
+      # Publish to NPM with prerelease dist-tag
+      - name: Publish Latest Prerelease
+        if: github.event_name == 'release' && github.event.release.prerelease && env.NODE_AUTH_TOKEN != ''
+        run: npm run publish-ci
+        env:
+          XS_PUBLISH_TAG: prerelease
+
+      # Automatically attach browser files to release
+      - name: Upload to Release
+        if: github.event_name == 'release'
+        uses: softprops/action-gh-release@v1
+        with:
+          files: dist/*

README.md

@@ -7,7 +7,7 @@
 Depending on your version of PixiJS, you'll need to figure out which major version of PixiJS Filters to use.
 
 | PixiJS      | PixiJS Filters |
-|-------------|----------------|
+| ----------- | -------------- |
 | v5.x        | v4.x           |
 | v6.x - v7.x | v5.x           |
 | v8.x        | v6.x           |
@@ -34,8 +34,8 @@ If all else failes, you can manually download the bundled file from the [release
 
 ## Filters
 
-| Filter                                                                                                   | Preview                                                                                                         |
-|----------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------|
+| Filter                                                                                                   | Preview                                                                                              |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | --- |
 | **AdjustmentFilter**<br>_pixi-filters/adjustment_<br>[View demo][Adjustment_demo]                        | ![adjustment](https://filters.pixijs.download/main/screenshots/adjustment.png?v=3)                   |
 | **AdvancedBloomFilter**<br>_pixi-filters/advanced-bloom_<br>[View demo][AdvancedBloom_demo]              | ![advanced-bloom](https://filters.pixijs.download/main/screenshots/advanced-bloom.png?v=3)           |
 | **AsciiFilter**<br>_pixi-filters/ascii_<br>[View demo][Ascii_demo]                                       | ![ascii](https://filters.pixijs.download/main/screenshots/ascii.png?v=3)                             |
@@ -65,8 +65,8 @@ If all else failes, you can manually download the bundled file from the [release
 | **PixelateFilter**<br>_pixi-filters/pixelate_<br>[View demo][Pixelate_demo]                              | ![pixelate](https://filters.pixijs.download/main/screenshots/pixelate.png?v=3)                       |
 | **RadialBlurFilter**<br>_pixi-filters/radial-blur_<br>[View demo][RadialBlur_demo]                       | ![radial-blur](https://filters.pixijs.download/main/screenshots/radial-blur.png?v=3)                 |
 | **ReflectionFilter**<br>_pixi-filters/reflection_<br>[View demo][Reflection_demo]                        | ![reflection](https://filters.pixijs.download/main/screenshots/reflection.png?v=3)                   |
-| **RGBSplitFilter**<br>_pixi-filters/rgb-split_<br>[View demo][RGBSplit_demo]                             | ![rgb split](https://filters.pixijs.download/main/screenshots/rgb.png?v=3)                           |                  |
-| **ShockwaveFilter**<br>_pixi-filters/shockwave_<br>[View demo][Shockwave_demo]           | ![shockwave](https://filters.pixijs.download/main/screenshots/shockwave.gif?v=3)         |
+| **RGBSplitFilter**<br>_pixi-filters/rgb-split_<br>[View demo][RGBSplit_demo]                             | ![rgb split](https://filters.pixijs.download/main/screenshots/rgb.png?v=3)                           |     |
+| **ShockwaveFilter**<br>_pixi-filters/shockwave_<br>[View demo][Shockwave_demo]                           | ![shockwave](https://filters.pixijs.download/main/screenshots/shockwave.gif?v=3)                     |
 | **SimpleLightmapFilter**<br>_pixi-filters/simple-lightmap_<br>[View demo][SimpleLightmap_demo]           | ![simple-lightmap](https://filters.pixijs.download/main/screenshots/simple-lightmap.png?v=3)         |
 | **TiltShiftFilter**<br>_pixi-filters/tilt-shift_<br>[View demo][TiltShift_demo]                          | ![tilt-shift](https://filters.pixijs.download/main/screenshots/tilt-shift.png?v=3)                   |
 | **TwistFilter**<br>_pixi-filters/twist_<br>[View demo][Twist_demo]                                       | ![twist](https://filters.pixijs.download/main/screenshots/twist.png?v=3)                             |
@@ -76,10 +76,10 @@ If all else failes, you can manually download the bundled file from the [release
 
 PixiJS has a handful of core filters that are built-in to the PixiJS library.
 
-| Filter                                                          | Preview                                                                                                                 |
-|-----------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------|
-| **AlphaFilter**<br>[View demo][Alpha_demo]                      | ![alpha](https://filters.pixijs.download/main/screenshots/alpha.png?v=3)                                     |
-| **BlurFilter**<br>[View demo][Blur_demo]                        | ![blur](https://filters.pixijs.download/main/screenshots/blur.png?v=3)                                       |
+| Filter                                                              | Preview                                                                                                      |
+| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| **AlphaFilter**<br>[View demo][Alpha_demo]                          | ![alpha](https://filters.pixijs.download/main/screenshots/alpha.png?v=3)                                     |
+| **BlurFilter**<br>[View demo][Blur_demo]                            | ![blur](https://filters.pixijs.download/main/screenshots/blur.png?v=3)                                       |
 | **ColorMatrixFilter** (contrast)<br>[View demo][ColorMatrix_demo]   | ![color-matrix-contrast](https://filters.pixijs.download/main/screenshots/color-matrix-contrast.png?v=3)     |
 | **ColorMatrixFilter** (desaturate)<br>[View demo][ColorMatrix_demo] | ![color-matrix-desaturate](https://filters.pixijs.download/main/screenshots/color-matrix-desaturate.png?v=3) |
 | **ColorMatrixFilter** (kodachrome)<br>[View demo][ColorMatrix_demo] | ![color-matrix-kodachrome](https://filters.pixijs.download/main/screenshots/color-matrix-kodachrome.png?v=3) |
@@ -89,8 +89,8 @@ PixiJS has a handful of core filters that are built-in to the PixiJS library.
 | **ColorMatrixFilter** (predator)<br>[View demo][ColorMatrix_demo]   | ![color-matrix-predator](https://filters.pixijs.download/main/screenshots/color-matrix-predator.png?v=3)     |
 | **ColorMatrixFilter** (saturate)<br>[View demo][ColorMatrix_demo]   | ![color-matrix-saturate](https://filters.pixijs.download/main/screenshots/color-matrix-saturate.png?v=3)     |
 | **ColorMatrixFilter** (sepia)<br>[View demo][ColorMatrix_demo]      | ![color-matrix-sepia](https://filters.pixijs.download/main/screenshots/color-matrix-sepia.png?v=3)           |
-| **DisplacementFilter**<br>[View demo][Displacement_demo]        | ![displacement](https://filters.pixijs.download/main/screenshots/displacement.png?v=3)                       |
-| **NoiseFilter**<br>[View demo][Noise_demo]                      | ![noise](https://filters.pixijs.download/main/screenshots/noise.png?v=3)                                     |
+| **DisplacementFilter**<br>[View demo][Displacement_demo]            | ![displacement](https://filters.pixijs.download/main/screenshots/displacement.png?v=3)                       |
+| **NoiseFilter**<br>[View demo][Noise_demo]                          | ![noise](https://filters.pixijs.download/main/screenshots/noise.png?v=3)                                     |
 
 ## Building
 
@@ -117,6 +117,7 @@ npm run watch
 API documention can be found [here](http://pixijs.io/filters/docs/).
 
 <!-- references -->
+
 [Adjustment_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AdjustmentFilter
 [AdvancedBloom_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AdvancedBloomFilter
 [Ascii_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AsciiFilter

global.d.ts

@@ -5,6 +5,15 @@ declare global {
     __PIXI_RENDERER__: import('pixi.js').Renderer | undefined;
     __PIXI__: import('pixi.js');
     __PIXI_DEVTOOL_WRAPPER__: any;
+    __PIXI__DEVTOOLS__: {
+      pixi: typeof import('pixi.js');
+      app: import('pixi.js').Application | undefined;
+      stage?: import('pixi.js').Container | undefined;
+      renderer?: import('pixi.js').Renderer | undefined;
+      scenePanel?: {
+        propertyPlugins?: any[];
+      };
+    };
   }
 }
 

package.json

@@ -25,7 +25,8 @@
     "copy:assets": "copyfiles \"{dist,docs,examples}/**\" deploy",
     "deploy": "xs clean,build,docs && xs upload",
     "release": "xs bump,test && run-s deploy && xs git-push",
-    "publish-ci": "xs publish"
+    "publish-ci": "xs publish",
+    "prettier": "prettier . --write"
   },
   "pre-commit": [
     "lint",
@@ -84,6 +85,7 @@
     "patch-package": "^8.0.0",
     "pixi.js": "^8.0.0-rc.8",
     "pre-commit": "^1.2.2",
+    "prettier": "^3.2.5",
     "rimraf": "^4.4.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.3",

src/chrome/src/background/index.ts

@@ -52,7 +52,6 @@ chrome.runtime.onMessage.addListener((request: Message, sender: chrome.runtime.M
   }
 });
 
-
 chrome.runtime.onConnect.addListener(function (port) {
   if (port.name !== 'devtools-connection') return;
 

src/chrome/src/content/index.ts

@@ -29,5 +29,5 @@ window.addEventListener(
       chrome.runtime.sendMessage(message);
     }
   },
-  false
+  false,
 );

src/chrome/src/devtools/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <script type="module" src="./devtools.ts"></script>
 </html>

src/chrome/src/devtools/panel/panel.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

src/chrome/src/inject/index.ts

@@ -1 +1 @@
-import '@lib/src/detection'
+import '@lib/src/detection';

src/chrome/src/popup/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

src/example/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

src/example/interactivity.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

src/example/src/main.ts

@@ -8,8 +8,10 @@ import * as PIXI from 'pixi.js';
   // Initialize the application
   await app.init({ background: '#1099bb', resizeTo: window });
 
-  window.__PIXI_APP__ = app;
-  window.__PIXI__ = PIXI;
+  window.__PIXI__DEVTOOLS__ = {
+    app: app,
+    pixi: PIXI,
+  }
 
   // Append the application canvas to the document body
   document.body.appendChild(app.canvas);

src/example/text.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

src/lib/src/components/Container.tsx

@@ -2,14 +2,12 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   background-color: #292929;
-  padding: 10px;
-  width: calc(100% - 20px);
+  width: calc(100%);
   height: 100vh;
 `;
 
 export const SectionContainer = styled.div`
   margin-bottom: 5px;
-
 `;
 
 export const SectionHeader = styled.div`
@@ -20,16 +18,15 @@ export const TitleGroup = styled.div`
   display: flex;
   flex: 1;
   justify-content: space-between;
-  /*margin-bottom: 10px;*/
 `;
 
 export const Title = styled.span`
-  font-size: 1.3em;
+  font-size: 12px;
   color: #ccc;
   font-weight: light;
 `;
 
 export const OptionsGroup = styled.div`
   display: flex;
   margin: 5px 0;
-`;
+`;