feat: initial commit

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@antfu"
+}

.github/workflows/ci.yml

@@ -0,0 +1,57 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Install
+        run: nci
+
+      - name: Lint
+        run: nr lint
+
+  test:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        node: [14.x, 16.x]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set node ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Install
+        run: nci
+
+      - name: Build
+        run: nr build
+
+      - name: Test
+        run: nr test

.github/workflows/release.yml

@@ -0,0 +1,22 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -0,0 +1,81 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE
+.idea

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-PRESENT hairyf <https://github.com/hairyf>
+
+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.

README.md

@@ -0,0 +1,150 @@
+# vue3-pixi-renderer
+
+> Use Vue 3 to create PixiJS applications
+
+This library provides it's own vue renderer that will create PixiJS objects instead of html elments. It's still pretty early in development, but should already support a great amount of features from PixiJS.
+
+```html
+<script setup lang="ts">
+import { State } from "vue3-pixi-renderer";
+import textureUrl from "@/assets/myTexture.png";
+
+const hitArea = new Rectangle(0, 0, 64, 64);
+
+function onClick() {
+  console.log('sprite was clicked!');
+}
+</script>
+
+<template>
+  <state :width="640" :height="480">
+    <container>
+      <sprite :texture="textureUrl" :hit-area="hitArea" @click="onClick" />
+    </container>
+  </state>
+</template>
+```
+
+## Try it Online
+
+> TODO
+
+## Install
+
+```sh
+# install with npm
+npm install vue3-pixi-renderer
+
+# install with yarn
+yarn add vue3-pixi-renderer
+```
+
+## Initialize vue plugin
+
+The vite plugin adds the ability to specify texture paths on sprites & other components that use textures, the same way as the `src` attribute on an image.
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { compilerOptions, transformAssetUrls } from 'vue3-pixi-renderer/compiler'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        // remove the unknown element warnings
+        compilerOptions,
+        // support for asset url conversion
+        transformAssetUrls,
+      },
+    }),
+  ],
+})
+```
+
+### Usage in template
+
+The vue plugin will detect any texture props containing the path to an image, and will replace it with a reference to a texture object.
+
+```html
+<sprite texture="@/assets/myTexture.png" />
+```
+
+## Components
+
+The following PixiJS objects are supported out of the box:
+
+* Container
+* Sprite
+* Graphics
+* Text
+* BitmapText
+* TilingSprite
+* AnimatedSprite
+* Mesh
+* NineSlicePlane
+* SimpleMesh
+* SimplePlane
+* SimpleRope
+
+## Props
+
+Most props will work just as the properties on the corresponding PixiJS objects. However, props that accept a `Point` are handeled a bit different. They can also be used with X/Y suffix (except for the `position` prop, which just uses the `x`/`y` props instead).
+```html
+<container :scale-x="10" :skew-y="0.5" />
+```
+
+## Events
+
+All events emitted by pixi objects are supported. *Some* of vue's event modifiers will work, like `@click.left`, however more often than not using them will cause an error. Adding an event listener to an element will currently automatically set the element's `eventMode` to `static`.
+
+### Graphics @draw event
+When using `<grahpics />` there is a special `@draw` event.
+This will set up a `watchEffect` internally that will automatically call the event handler again if any dependencies on the draw method have changed.
+
+```html
+<script setup lang="ts">
+import { Graphics } from "pixi.js";
+
+const props = defineProps<{
+  x: number
+  y: number
+  width: number
+  height: number
+}>()
+
+function draw(g: Graphics) {
+  g.clear()
+  g.lineStyle(3, 0xffffff)
+
+  const { x, y, width, height } = props
+  g.drawRoundedRect(x, y, width, height, 5)
+}
+</script>
+
+<template>
+  <graphics @draw="draw" />
+</template>
+```
+
+## Creating an application manually
+
+Using the custom renderer inside `vue3-pixi-renderer`
+
+```ts
+import { createApp } from 'vue3-pixi-renderer'
+import App from './App.vue'
+
+const pixiApp = new PIXI.Application()
+
+document.body.appendChild(pixiApp.view)
+
+const app = createApp(App)
+
+app.mount(pixiApp.stage)
+```
+
+## License
+
+[MIT](./LICENSE) License © 2022-PRESENT [hairyf](https://github.com/hairyf)