From b7edb4344bf98f82e670796e28d65ad1f6a6c1bc Mon Sep 17 00:00:00 2001 From: Matt Karl Date: Thu, 19 Dec 2024 16:00:09 -0500 Subject: [PATCH 1/5] feat: Add extension template --- package-lock.json | 19 +++++++ src/index.ts | 23 +++++--- templates/template-creation-extension/LICENSE | 22 ++++++++ .../template-creation-extension/README.md | 31 +++++++++++ .../template-creation-extension/_gitignore | 6 ++ .../examples/index.html | 46 ++++++++++++++++ .../template-creation-extension/package.json | 55 +++++++++++++++++++ .../src/__tests__/Rectangle.test.ts | 50 +++++++++++++++++ .../template-creation-extension/src/index.ts | 50 +++++++++++++++++ .../template-creation-extension/tsconfig.json | 3 + 10 files changed, 296 insertions(+), 9 deletions(-) create mode 100644 templates/template-creation-extension/LICENSE create mode 100644 templates/template-creation-extension/README.md create mode 100644 templates/template-creation-extension/_gitignore create mode 100644 templates/template-creation-extension/examples/index.html create mode 100644 templates/template-creation-extension/package.json create mode 100644 templates/template-creation-extension/src/__tests__/Rectangle.test.ts create mode 100644 templates/template-creation-extension/src/index.ts create mode 100644 templates/template-creation-extension/tsconfig.json diff --git a/package-lock.json b/package-lock.json index 1559cf9..b4d17c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35317,6 +35317,10 @@ "safe-buffer": "~5.2.0" } }, + "node_modules/template-creation-extensions": { + "resolved": "templates/template-creation-extension", + "link": true + }, "node_modules/template-creation-web": { "resolved": "templates/template-creation-web", "link": true @@ -39588,6 +39592,21 @@ "webpack-dev-server": "^5.1.0" } }, + "templates/template-creation-extension": { + "name": "template-creation-extensions", + "version": "1.0.0", + "license": "MIT", + "devDependencies": { + "@pixi/extension-scripts": "latest" + }, + "engines": { + "node": ">=16", + "npm": ">=8" + }, + "peerDependencies": { + "pixi.js": ">=8 <9" + } + }, "templates/template-creation-web": { "version": "0.0.0", "dependencies": { diff --git a/src/index.ts b/src/index.ts index 606f849..22bddda 100644 --- a/src/index.ts +++ b/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: creaction-extension' )} 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 = { @@ -96,6 +96,11 @@ const FRAMEWORKS: Framework[] = [ display: "Web", color: yellow, }, + { + name: "creation-extension", + display: "Extension", + color: blueBright, + }, // { // name: "creation-discord", // display: "Discord", diff --git a/templates/template-creation-extension/LICENSE b/templates/template-creation-extension/LICENSE new file mode 100644 index 0000000..40410f1 --- /dev/null +++ b/templates/template-creation-extension/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. + diff --git a/templates/template-creation-extension/README.md b/templates/template-creation-extension/README.md new file mode 100644 index 0000000..7075bf3 --- /dev/null +++ b/templates/template-creation-extension/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 +``` \ No newline at end of file diff --git a/templates/template-creation-extension/_gitignore b/templates/template-creation-extension/_gitignore new file mode 100644 index 0000000..e0fc3d4 --- /dev/null +++ b/templates/template-creation-extension/_gitignore @@ -0,0 +1,6 @@ +.DS_Store +/node_modules +/docs +/dist +/lib +example.api.json* diff --git a/templates/template-creation-extension/examples/index.html b/templates/template-creation-extension/examples/index.html new file mode 100644 index 0000000..3f378ed --- /dev/null +++ b/templates/template-creation-extension/examples/index.html @@ -0,0 +1,46 @@ + + + + Rectangle Helpers Example + + + + + +

Rectangle Helpers

+ + + + diff --git a/templates/template-creation-extension/package.json b/templates/template-creation-extension/package.json new file mode 100644 index 0000000..3af5663 --- /dev/null +++ b/templates/template-creation-extension/package.json @@ -0,0 +1,55 @@ +{ + "name": "template-creation-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-creation-extension/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs-userland/template-creation-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" + } +} diff --git a/templates/template-creation-extension/src/__tests__/Rectangle.test.ts b/templates/template-creation-extension/src/__tests__/Rectangle.test.ts new file mode 100644 index 0000000..4f06464 --- /dev/null +++ b/templates/template-creation-extension/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); + }); + }); +}); diff --git a/templates/template-creation-extension/src/index.ts b/templates/template-creation-extension/src/index.ts new file mode 100644 index 0000000..6593378 --- /dev/null +++ b/templates/template-creation-extension/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 }; diff --git a/templates/template-creation-extension/tsconfig.json b/templates/template-creation-extension/tsconfig.json new file mode 100644 index 0000000..ca656a2 --- /dev/null +++ b/templates/template-creation-extension/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "@pixi/extension-scripts/tsconfig" +} \ No newline at end of file From 7dd7e4d2f6540f9b8d274c144c221669392409d5 Mon Sep 17 00:00:00 2001 From: Matt Karl Date: Thu, 19 Dec 2024 16:01:56 -0500 Subject: [PATCH 2/5] chore: Update readme with new extension template --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0fb3c34..87d853b 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ Currently supported template presets include: - `bundler-esbuild` - `bundler-import-map` - `creation-web` +- `creation-extension` You can use `.` for the project name to scaffold in the current directory. From 77fc7a197831a0c7a31d2d7c4c480b7eb313725d Mon Sep 17 00:00:00 2001 From: Matt Karl Date: Thu, 19 Dec 2024 16:07:54 -0500 Subject: [PATCH 3/5] fix: Update package-lock --- package-lock.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index b4d17c9..9950c61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35317,7 +35317,7 @@ "safe-buffer": "~5.2.0" } }, - "node_modules/template-creation-extensions": { + "node_modules/template-creation-extension": { "resolved": "templates/template-creation-extension", "link": true }, @@ -39593,7 +39593,6 @@ } }, "templates/template-creation-extension": { - "name": "template-creation-extensions", "version": "1.0.0", "license": "MIT", "devDependencies": { From 4fb3f54b456594a357b4547134487fff7fe87526 Mon Sep 17 00:00:00 2001 From: Zyie <24736175+Zyie@users.noreply.github.com> Date: Wed, 8 Jan 2025 14:21:09 +0000 Subject: [PATCH 4/5] update and add website docs --- README.md | 2 +- docs/docs/guide/installation.mdx | 8 ++++++++ src/index.ts | 19 +++++++++++++------ .../LICENSE | 0 .../README.md | 0 .../_gitignore | 0 .../examples/index.html | 0 .../package.json | 6 +++--- .../src/__tests__/Rectangle.test.ts | 0 .../src/index.ts | 0 .../tsconfig.json | 0 11 files changed, 25 insertions(+), 10 deletions(-) rename templates/{template-creation-extension => template-extension-default}/LICENSE (100%) rename templates/{template-creation-extension => template-extension-default}/README.md (100%) rename templates/{template-creation-extension => template-extension-default}/_gitignore (100%) rename templates/{template-creation-extension => template-extension-default}/examples/index.html (100%) rename templates/{template-creation-extension => template-extension-default}/package.json (83%) rename templates/{template-creation-extension => template-extension-default}/src/__tests__/Rectangle.test.ts (100%) rename templates/{template-creation-extension => template-extension-default}/src/index.ts (100%) rename templates/{template-creation-extension => template-extension-default}/tsconfig.json (100%) diff --git a/README.md b/README.md index 87d853b..d0f4246 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ Currently supported template presets include: - `bundler-esbuild` - `bundler-import-map` - `creation-web` -- `creation-extension` +- `extension-default` You can use `.` for the project name to scaffold in the current directory. diff --git a/docs/docs/guide/installation.mdx b/docs/docs/guide/installation.mdx index e741298..3f47d22 100644 --- a/docs/docs/guide/installation.mdx +++ b/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 diff --git a/src/index.ts b/src/index.ts index 22bddda..dcc03af 100644 --- a/src/index.ts +++ b/src/index.ts @@ -37,7 +37,7 @@ ${blueBright('Webpack: bundler-webpack' )} ${yellow ('esbuild: bundler-esbuild' )} ${green ('Import Map: bundler-import-map' )} ${cyan ('Web Creation App: creation-web' )} -${blueBright('Extension: creaction-extension' )} +${blueBright('Extension: extension-default' )} Coming soon: ${blue ('Discord Creation App: creation-discord' )} @@ -96,11 +96,6 @@ const FRAMEWORKS: Framework[] = [ display: "Web", color: yellow, }, - { - name: "creation-extension", - display: "Extension", - color: blueBright, - }, // { // name: "creation-discord", // display: "Discord", @@ -118,6 +113,18 @@ const FRAMEWORKS: Framework[] = [ // }, ], }, + { + name: "extension", + display: "Extension", + color: blueBright, + variants: [ + { + name: "extension-default", + display: "Default", + color: blue, + }, + ], + }, ]; const TEMPLATES = FRAMEWORKS.map( diff --git a/templates/template-creation-extension/LICENSE b/templates/template-extension-default/LICENSE similarity index 100% rename from templates/template-creation-extension/LICENSE rename to templates/template-extension-default/LICENSE diff --git a/templates/template-creation-extension/README.md b/templates/template-extension-default/README.md similarity index 100% rename from templates/template-creation-extension/README.md rename to templates/template-extension-default/README.md diff --git a/templates/template-creation-extension/_gitignore b/templates/template-extension-default/_gitignore similarity index 100% rename from templates/template-creation-extension/_gitignore rename to templates/template-extension-default/_gitignore diff --git a/templates/template-creation-extension/examples/index.html b/templates/template-extension-default/examples/index.html similarity index 100% rename from templates/template-creation-extension/examples/index.html rename to templates/template-extension-default/examples/index.html diff --git a/templates/template-creation-extension/package.json b/templates/template-extension-default/package.json similarity index 83% rename from templates/template-creation-extension/package.json rename to templates/template-extension-default/package.json index 3af5663..5114b18 100644 --- a/templates/template-creation-extension/package.json +++ b/templates/template-extension-default/package.json @@ -1,5 +1,5 @@ { - "name": "template-creation-extension", + "name": "template-extension", "version": "1.0.0", "description": "[Description of extension]", "author": "[Author's name]", @@ -14,11 +14,11 @@ } }, "homepage": "https://pixijs.com/", - "bugs": "https://github.com/pixijs-userland/template-creation-extension/issues", + "bugs": "https://github.com/pixijs-userland/template-extension/issues", "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/pixijs-userland/template-creation-extension.git" + "url": "https://github.com/pixijs-userland/template-extension.git" }, "scripts": { "dev": "xs serve", diff --git a/templates/template-creation-extension/src/__tests__/Rectangle.test.ts b/templates/template-extension-default/src/__tests__/Rectangle.test.ts similarity index 100% rename from templates/template-creation-extension/src/__tests__/Rectangle.test.ts rename to templates/template-extension-default/src/__tests__/Rectangle.test.ts diff --git a/templates/template-creation-extension/src/index.ts b/templates/template-extension-default/src/index.ts similarity index 100% rename from templates/template-creation-extension/src/index.ts rename to templates/template-extension-default/src/index.ts diff --git a/templates/template-creation-extension/tsconfig.json b/templates/template-extension-default/tsconfig.json similarity index 100% rename from templates/template-creation-extension/tsconfig.json rename to templates/template-extension-default/tsconfig.json From affc6ff6d3b108c764005b03dbd8b95e17670636 Mon Sep 17 00:00:00 2001 From: Zyie <24736175+Zyie@users.noreply.github.com> Date: Wed, 8 Jan 2025 14:23:25 +0000 Subject: [PATCH 5/5] fix lock --- package-lock.json | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9950c61..4929b48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35317,10 +35317,6 @@ "safe-buffer": "~5.2.0" } }, - "node_modules/template-creation-extension": { - "resolved": "templates/template-creation-extension", - "link": true - }, "node_modules/template-creation-web": { "resolved": "templates/template-creation-web", "link": true @@ -35329,6 +35325,10 @@ "resolved": "templates/template-bundler-esbuild", "link": true }, + "node_modules/template-extension": { + "resolved": "templates/template-extension-default", + "link": true + }, "node_modules/template-import-map": { "resolved": "templates/template-bundler-import-map", "link": true @@ -39594,6 +39594,7 @@ }, "templates/template-creation-extension": { "version": "1.0.0", + "extraneous": true, "license": "MIT", "devDependencies": { "@pixi/extension-scripts": "latest" @@ -39622,6 +39623,21 @@ "typescript": "~5.7.2", "vite": "^6.0.0" } + }, + "templates/template-extension-default": { + "name": "template-extension", + "version": "1.0.0", + "license": "MIT", + "devDependencies": { + "@pixi/extension-scripts": "latest" + }, + "engines": { + "node": ">=16", + "npm": ">=8" + }, + "peerDependencies": { + "pixi.js": ">=8 <9" + } } } }