feat: Add extension template

README.md

@@ -63,6 +63,7 @@ Currently supported template presets include:
 - `bundler-esbuild`
 - `bundler-import-map`
 - `creation-web`
+- `extension-default`
 
 You can use `.` for the project name to scaffold in the current directory.
 

docs/docs/guide/installation.mdx

@@ -63,6 +63,13 @@ Currently supported creation templates include:
 - **[Facebook Template](https://www.facebook.com/fbgaminghome/developers)**: Create apps for Facebook Instant Games.
 - **[YouTube Template](https://developers.google.com/youtube/gaming/playables/reference/sdk)**: Develop YouTube Playables.
 
+## Extension Templates
+
+Extension templates are designed for creating libraries and plugins that enhance PixiJS functionality, such as custom filters or plugins that introduce new features.
+
+These templates leverage [PixiJS ExtensionScript](https://github.com/pixijs/extension-scripts), a CLI tool that simplifies the development process for building PixiJS-compatible extensions. To get the most out of this tool, we recommend reviewing the ExtensionScript documentation.
+
+These templates are best suited for experienced developers familiar with PixiJS and common development toolchains.
 
 ## Advanced Usage
 
@@ -91,6 +98,7 @@ You can use `.` for the project name to scaffold in the current directory.
 - `bundler-esbuild`
 - `bundler-import-map`
 - `creation-web`
+- `extension-default`
 
 ## License
 

src/index.ts

@@ -32,17 +32,17 @@ Options:
   -t, --template NAME        use a specific template
 
 Available templates:
-${yellow    ('Vite:                     bundler-vite'       )}
-${blueBright('Webpack:                  bundler-webpack'    )}
-${yellow    ('esbuild:                  bundler-esbuild'    )}
-${green     ('Import Map:               bundler-import-map' )}
-
-${cyan      ('Web Creation App:         creation-web'           )}
+${yellow    ('Vite:                     bundler-vite'        )}
+${blueBright('Webpack:                  bundler-webpack'     )}
+${yellow    ('esbuild:                  bundler-esbuild'     )}
+${green     ('Import Map:               bundler-import-map'  )}
+${cyan      ('Web Creation App:         creation-web'        )}
+${blueBright('Extension:                extension-default'   )}
 
 Coming soon:
-${blue      ('Discord Creation App:     creation-discord'       )}
-${blueBright('Facebook Creation App:    creation-facebook'      )}
-${red       ('YouTube Creation App:     creation-youtube'       )}`
+${blue      ('Discord Creation App:     creation-discord'    )}
+${blueBright('Facebook Creation App:    creation-facebook'   )}
+${red       ('YouTube Creation App:     creation-youtube'    )}`
 
 type ColorFunc = (str: string | number) => string;
 type Framework = {
@@ -113,6 +113,18 @@ const FRAMEWORKS: Framework[] = [
       // },
     ],
   },
+  {
+    name: "extension",
+    display: "Extension",
+    color: blueBright,
+    variants: [
+      {
+        name: "extension-default",
+        display: "Default",
+        color: blue,
+      },
+    ],
+  },
 ];
 
 const TEMPLATES = FRAMEWORKS.map(

templates/template-extension-default/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 [Author's name]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

templates/template-extension-default/README.md

@@ -0,0 +1,31 @@
+# PixiJS Extension Boilerplate
+
+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).
+
+## Getting Started
+
+This project assumes you are familiar with `npm`, `node.js` and **package.json** files.
+
+```bash
+npm install
+npm run build
+```
+
+## Structure
+
+| Path | Description |
+|---|---|
+| `./src` | Folder containing the source code for your extension |
+| `./src/__tests__` | Folder containing the Jest-based unit-tests (i.e., `*.test.ts`) |
+| `./examples` | Folder containing any examples to demonstrate usage |
+
+
+## Publishing
+
+When you're ready to publish your extension and share with the world, run the following command.
+This will ask you which type of version bump you'd like to do and then do all the necessary steps to build
+and package your extension.
+
+```bash
+npm run release
+```

templates/template-extension-default/_gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules
+/docs
+/dist
+/lib
+example.api.json*

templates/template-extension-default/examples/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Rectangle Helpers Example</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <style>
+            body {
+                margin: 0;
+                user-select: none;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Rectangle Helpers</h1>
+        <script type="importmap">
+            {
+                "imports": {
+                    "pixi.js": "https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.mjs",
+                    "extension": "../dist/extension.mjs"
+                }
+            }
+        </script>
+        <script type="module">
+            import { Application, Rectangle, Sprite, Texture } from 'pixi.js';
+            import 'extension';
+            const app = new Application();
+            await app.init({ background: '#999' });
+            document.body.appendChild(app.canvas);
+            app.stage.addChild(new Sprite({
+                texture: Texture.WHITE,
+                width: 100,
+                height: 100,
+                x: (app.screen.width - 100) / 2,
+                y: (app.screen.height - 100) / 2,
+                eventMode: 'static',
+                cursor: 'pointer',
+                onclick: (event) => {
+                    const { rectangle } = event.target.getBounds();
+                    // Expand the bounds by 10 pixels!
+                    Object.assign(event.target, rectangle.expand(10));
+                }
+            }));
+        </script>
+    </body>
+</html>

templates/template-extension-default/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "template-extension",
+  "version": "1.0.0",
+  "description": "[Description of extension]",
+  "author": "[Author's name]",
+  "main": "./lib/index.js",
+  "module": "./lib/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.mjs",
+      "require": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
+  },
+  "homepage": "https://pixijs.com/",
+  "bugs": "https://github.com/pixijs-userland/template-extension/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pixijs-userland/template-extension.git"
+  },
+  "scripts": {
+    "dev": "xs serve",
+    "start": "xs serve",
+    "watch": "xs watch",
+    "build": "xs build",
+    "docs": "xs docs",
+    "lint": "xs lint",
+    "types": "xs types",
+    "release": "xs release",
+    "test": "xs test"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=16",
+    "npm": ">=8"
+  },
+  "files": [
+    "dist/",
+    "lib/"
+  ],
+  "extensionConfig": {
+    "bundle": "dist/extension.js",
+    "bundleModule": "dist/extension.mjs"
+  },
+  "peerDependencies": {
+    "pixi.js": ">=8 <9"
+  },
+  "devDependencies": {
+    "@pixi/extension-scripts": "latest"
+  }
+}

templates/template-extension-default/src/__tests__/Rectangle.test.ts

@@ -0,0 +1,50 @@
+import { Rectangle } from "../index";
+
+describe("Rectangle", () => {
+  describe("expand", () => {
+    it("should be added to prototype", () => {
+      const rect = new Rectangle();
+
+      expect("expand" in rect).toBe(true);
+    });
+
+    it("should allow return instance", () => {
+      const rect = new Rectangle();
+
+      expect(rect.expand(0)).toBe(rect);
+    });
+
+    it("should allow for 0 change", () => {
+      const rect = new Rectangle(1, 2, 30, 40);
+
+      rect.expand(0);
+
+      expect(rect.x).toBe(1);
+      expect(rect.y).toBe(2);
+      expect(rect.width).toBe(30);
+      expect(rect.height).toBe(40);
+    });
+
+    it("should allow for expand values", () => {
+      const rect = new Rectangle(1, 2, 30, 40);
+
+      rect.expand(10);
+
+      expect(rect.x).toBe(-9);
+      expect(rect.y).toBe(-8);
+      expect(rect.width).toBe(50);
+      expect(rect.height).toBe(60);
+    });
+
+    it("should allow for contract values", () => {
+      const rect = new Rectangle(1, 2, 30, 40);
+
+      rect.expand(-2);
+
+      expect(rect.x).toBe(3);
+      expect(rect.y).toBe(4);
+      expect(rect.width).toBe(26);
+      expect(rect.height).toBe(36);
+    });
+  });
+});

templates/template-extension-default/src/index.ts

@@ -0,0 +1,50 @@
+import { Rectangle } from "pixi.js";
+
+// PixiJS uses a special global type object called PixiMixins
+// this can be used to add methods to existing PixiJS classes.
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace PixiMixins {
+    /**
+     * PixiJS's Rectangle class.
+     * @class Rectangle
+     * @see https://pixijs.download/main/docs/maths.Rectangle.html
+     * @example
+     * import { Rectangle } from 'pixi.js';
+     * import '@pixi/rectangle-helpers';
+     *
+     * const rect = new Rectangle(0, 0, 100, 100);
+     * rect.expand(10);
+     */
+    interface Rectangle {
+      /**
+       * Example of a utility function that can be added to PixiJS's Rectangle class.
+       * This function expands the rectangle by the given amount. Can also be used
+       * to contract the Rectangle.
+       *
+       * @method expand
+       * @memberof Rectangle
+       * @example
+       * const rect = new Rectangle(0, 0, 100, 100);
+       * rect.expand(10);
+       * @param {number} amount - The amount to expand (if greater than 0) or contract (if less than 0)
+       * @return {Rectangle} Instance for chaining.
+       */
+      expand(amount: number): this;
+    }
+  }
+}
+
+Rectangle.prototype.expand = function expand(
+  this: Rectangle,
+  amount: number,
+): Rectangle {
+  this.x -= amount;
+  this.y -= amount;
+  this.width += amount * 2;
+  this.height += amount * 2;
+
+  return this;
+};
+
+export { Rectangle };

templates/template-extension-default/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "@pixi/extension-scripts/tsconfig"
+}