Implement using Extension Scripts (#14)

pixijs-userland · Jan 9, 2023 · 500c8fc · 500c8fc
1 parent 674d943
commit 500c8fc
Show file tree

Hide file tree

Showing 15 changed files with 22,935 additions and 4,223 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,28 @@
+name: Build CI
+on:
+  push:
+    branches: [ '**' ]
+    tags: [ '**' ]
+  release:
+    types: [ 'created' ]
+  pull_request:
+    branches: [ '**' ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js 16.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16
+    - name: Install npm
+      run: npm install -g npm@8
+    - name: Install dependencies
+      run: npm ci
+    - name: Build
+      run: npm run build
+    - name: Test
+      uses: GabrielBB/xvfb-action@v1
+      with:
+        run: npm test
diff --git a/.gitignore b/.gitignore
@@ -1,34 +1,6 @@
-# sublime text files
-*.sublime*
-*.*~*.TMP
-
-# temp files
 .DS_Store
-Thumbs.db
-Desktop.ini
-npm-debug.log
-
-# project files
-.project
-
-# vim swap files
-*.sw*
-
-# emacs temp files
-*~
-\#*#
-
-# project ignores
-!.gitkeep
-*__temp
-node_modules
-docs/
-
-# jetBrains IDE ignores
-.idea
-
-# tsc output
-compile
-dist
-lib
-index.d.ts
+/node_modules
+/docs
+/dist
+/lib
+example.api.json*
diff --git a/.npmrc b/.npmrc
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Ivan Popelyshev
+Copyright (c) 2023 [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

diff --git a/README.md b/README.md
@@ -1,47 +1,32 @@
-# PixiJS Plugin Boilerplate
+# PixiJS Extension Boilerplate
 
-Use this project as guidance for creating your own PixiJS plugin.
+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
+## Getting Started
 
-1. Clone or fork this repository.
-2. Update your `package.json` fields:
-  * `name`
-  * `author`
-  * `description`
-  * `version`
-  * `contributors`
-  * `bundle`
-  * `homepage`
-  * `bugs`
-  * `repository`
-3. Update `userConfig` object in `rollup.config.mjs`.
-4. Add your source code to the `src` folder.
-5. Make sure necessary PixiJS packages in `peerDependencies` and `devDependencies`
-6. Modify or remove GlobalMixins from `global.d.ts` (used to mixin types to PixiJS)
-7. Check that project builds `npm run build`
-8. Write a README, and publish your plugin to npm!
-
-### Tips
-
-* When you make changes and want to republish, you can use `npm run release:[patch|minor|major]` to change version of plugin.
-* If you reference `@pixi/layers` or some other plugins, change `rollup.config.mjs` accordingly, otherwise they'll be compiled inside your lib.
-
-## Building
+This project assumes you are familiar with `npm`, `node.js` and **package.json** files.
 
 ```bash
-npm i
+npm install
 npm run build
 ```
 
-## Vanilla JS
+## Structure
 
-All PixiJS v7 plugins has special `iife` build suited for vanilla JavaScript.
-Navigate to `dist/pixi-plugin-boilerplate.js` file.
+| Path | Description |
+|---|---|
+| `./src` | Folder containing the source code for your extension |
+| `./test` | Folder containing the Jest-based unit-tests (i.e., `*.test.ts`) |
+| `./examples` | Folder containing any examples to demonstrate usage |
+| `./global.d.ts` | TypeScript global mixins for PixiJS |
 
-```html
-<script src='lib/pixi.js'></script>
-<script src='lib/pixi-plugin-boilerplate.js'></script>
-```
 
-All exports can be accessed through `PIXI.plugin` global namespace. Please, do not add plugins to the `PIXI` global, instead use your own (e.g., `PIXI.[namespace]`).
+## 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
+```
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,37 @@
+<!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 src="https://pixijs.download/dev/pixi.min.js"></script>
+        <script src="../dist/pixi-rectangle-helpers.js"></script>
+        <script>
+            const app = new PIXI.Application({ background: '#999' });
+            document.body.appendChild(app.view);
+
+            const shape = new PIXI.Sprite(PIXI.Texture.WHITE);
+            shape.scale.set(10);
+            shape.x = (app.screen.width - shape.width) / 2;
+            shape.y = (app.screen.height - shape.height) / 2;
+
+            shape.interactive = true;
+            shape.cursor = 'pointer';
+            shape.onclick = () => {
+                const bounds = shape.getBounds();
+                // Expand the bounds by 10 pixels!
+                Object.assign(shape, bounds.expand(10));
+            };
+            app.stage.addChild(shape);
+        </script>
+    </body>
+</html>
diff --git a/global.d.ts b/global.d.ts
@@ -1,5 +1,9 @@
+/**
+ * PixiJS uses a special global type object called GlobalMixins
+ * this can be used to add methods to existing PixiJS classes.
+ */
 declare namespace GlobalMixins {
 	interface Rectangle {
-		fitY(rectangle: import('@pixi/core').Rectangle, width: number, height: number): import('@pixi/core').Rectangle;
+		expand(amount: number): this;
 	}
 }