├── .github └── workflows │ └── main.yml ├── .gitignore ├── LICENSE ├── README.md ├── examples └── index.html ├── package-lock.json ├── package.json ├── src ├── __tests__ │ └── Rectangle.test.ts └── index.ts └── tsconfig.json /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Automation 2 | on: 3 | push: 4 | branches: ['**'] 5 | tags: ['**'] 6 | release: 7 | types: ['created'] 8 | pull_request: 9 | branches: ['**'] 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v4 15 | - name: Use Node.js 20.x 16 | uses: actions/setup-node@v4 17 | with: 18 | node-version: 20 19 | - name: Install dependencies 20 | run: npm ci 21 | - name: Build 22 | run: npm run build 23 | - name: Test 24 | uses: GabrielBB/xvfb-action@v1 25 | with: 26 | run: npm test -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /node_modules 3 | /docs 4 | /dist 5 | /lib 6 | example.api.json* 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2024 [Author's name] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > [!WARNING] 2 | > This project is no longer maintained and has been moved into [PixiJS Create](https://github.com/pixijs/create-pixi). 3 | 4 | # PixiJS Extension Boilerplate 5 | 6 | This is a simple boilerplate project powered by [PixiJS Extension Scripts](https://github.com/pixijs/extension-scripts). It demonstrates how you can create an extension for PixiJS that works with TypeScript, generates all the necessary build files and supports documentation (with webdoc) and unit-testing (with Jest). 7 | 8 | ## Getting Started 9 | 10 | This project assumes you are familiar with `npm`, `node.js` and **package.json** files. 11 | 12 | ```bash 13 | npm install 14 | npm run build 15 | ``` 16 | 17 | ## Structure 18 | 19 | | Path | Description | 20 | |---|---| 21 | | `./src` | Folder containing the source code for your extension | 22 | | `./src/__tests__` | Folder containing the Jest-based unit-tests (i.e., `*.test.ts`) | 23 | | `./examples` | Folder containing any examples to demonstrate usage | 24 | 25 | 26 | ## Publishing 27 | 28 | When you're ready to publish your extension and share with the world, run the following command. 29 | This will ask you which type of version bump you'd like to do and then do all the necessary steps to build 30 | and package your extension. 31 | 32 | ```bash 33 | npm run release 34 | ``` 35 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Rectangle Helpers Example 5 | 6 | 7 | 13 | 14 | 15 |

Rectangle Helpers

16 | 24 | 45 | 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pixi/rectangle-helpers", 3 | "version": "3.0.0", 4 | "description": "[Description of extension]", 5 | "author": "[Author's name]", 6 | "main": "./lib/index.js", 7 | "module": "./lib/index.mjs", 8 | "types": "./lib/index.d.ts", 9 | "exports": { 10 | ".": { 11 | "import": "./lib/index.mjs", 12 | "require": "./lib/index.js", 13 | "types": "./lib/index.d.ts" 14 | } 15 | }, 16 | "homepage": "https://pixijs.com/", 17 | "bugs": "https://github.com/pixijs-userland/extension-boilerplate/issues", 18 | "license": "MIT", 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/pixijs-userland/extension-boilerplate.git" 22 | }, 23 | "scripts": { 24 | "start": "xs serve", 25 | "watch": "xs watch", 26 | "build": "xs build", 27 | "docs": "xs docs", 28 | "lint": "xs lint", 29 | "types": "xs types", 30 | "release": "xs release", 31 | "test": "xs test" 32 | }, 33 | "publishConfig": { 34 | "access": "public" 35 | }, 36 | "engines": { 37 | "node": ">=16", 38 | "npm": ">=8" 39 | }, 40 | "files": [ 41 | "dist/", 42 | "lib/" 43 | ], 44 | "peerDependencies": { 45 | "pixi.js": ">=8 <9" 46 | }, 47 | "devDependencies": { 48 | "@pixi/extension-scripts": "latest" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/__tests__/Rectangle.test.ts: -------------------------------------------------------------------------------- 1 | import { Rectangle } from '../index'; 2 | 3 | describe('Rectangle', () => 4 | { 5 | describe('expand', () => 6 | { 7 | it('should be added to prototype', () => 8 | { 9 | const rect = new Rectangle(); 10 | 11 | expect('expand' in rect).toBe(true); 12 | }); 13 | 14 | it('should allow return instance', () => 15 | { 16 | const rect = new Rectangle(); 17 | 18 | expect(rect.expand(0)).toBe(rect); 19 | }); 20 | 21 | it('should allow for 0 change', () => 22 | { 23 | const rect = new Rectangle(1, 2, 30, 40); 24 | 25 | rect.expand(0); 26 | 27 | expect(rect.x).toBe(1); 28 | expect(rect.y).toBe(2); 29 | expect(rect.width).toBe(30); 30 | expect(rect.height).toBe(40); 31 | }); 32 | 33 | it('should allow for expand values', () => 34 | { 35 | const rect = new Rectangle(1, 2, 30, 40); 36 | 37 | rect.expand(10); 38 | 39 | expect(rect.x).toBe(-9); 40 | expect(rect.y).toBe(-8); 41 | expect(rect.width).toBe(50); 42 | expect(rect.height).toBe(60); 43 | }); 44 | 45 | it('should allow for contract values', () => 46 | { 47 | const rect = new Rectangle(1, 2, 30, 40); 48 | 49 | rect.expand(-2); 50 | 51 | expect(rect.x).toBe(3); 52 | expect(rect.y).toBe(4); 53 | expect(rect.width).toBe(26); 54 | expect(rect.height).toBe(36); 55 | }); 56 | }); 57 | }); 58 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { Rectangle } from 'pixi.js'; 2 | 3 | // PixiJS uses a special global type object called PixiMixins 4 | // this can be used to add methods to existing PixiJS classes. 5 | declare global 6 | { 7 | // eslint-disable-next-line @typescript-eslint/no-namespace 8 | namespace PixiMixins 9 | { 10 | /** 11 | * PixiJS's Rectangle class. 12 | * @class Rectangle 13 | * @see https://pixijs.download/main/docs/maths.Rectangle.html 14 | * @example 15 | * import { Rectangle } from 'pixi.js'; 16 | * import '@pixi/rectangle-helpers'; 17 | * 18 | * const rect = new Rectangle(0, 0, 100, 100); 19 | * rect.expand(10); 20 | */ 21 | interface Rectangle 22 | { 23 | /** 24 | * Example of a utility function that can be added to PixiJS's Rectangle class. 25 | * This function expands the rectangle by the given amount. Can also be used 26 | * to contract the Rectangle. 27 | * 28 | * @method expand 29 | * @memberof Rectangle 30 | * @example 31 | * const rect = new Rectangle(0, 0, 100, 100); 32 | * rect.expand(10); 33 | * @param {number} amount - The amount to expand (if greater than 0) or contract (if less than 0) 34 | * @return {Rectangle} Instance for chaining. 35 | */ 36 | expand(amount: number): this; 37 | } 38 | } 39 | } 40 | 41 | Rectangle.prototype.expand = function expand(this: Rectangle, amount: number): Rectangle 42 | { 43 | this.x -= amount; 44 | this.y -= amount; 45 | this.width += amount * 2; 46 | this.height += amount * 2; 47 | 48 | return this; 49 | }; 50 | 51 | export { Rectangle }; 52 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@pixi/extension-scripts/tsconfig" 3 | } --------------------------------------------------------------------------------