phavuer - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

package.json

 {
   "name": "phavuer",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Reactive template engine based on Vue 3 for Phaser 3",
@@ -8,2 +8,6 @@ "main": "src/index.js",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/laineus/phavuer.git"
+  },
   "scripts": {
@@ -10,0 +14,0 @@ "dev": "webpack --mode development --watch",

README.md

@@ -8,7 +8,20 @@ # Phavuer
 
-Phavuer is reactive template engine based on Vue 3 for Phaser 3.  
-It makes building components of Phaser 3's GameObjects easier.
+![ScreenShot](ss.png)
 
-[Phavuer vs Phaser's plane API](https://codepen.io/laineus/pen/pobgxdE?editors=0010)
+Phavuer is reactive template engine based on [Vue 3](https://github.com/vuejs/vue-next) for [Phaser 3](https://github.com/photonstorm/phaser).  
+It makes building components easier.
 
+- [Phavuer vs Phaser's plane API](https://codepen.io/laineus/pen/pobgxdE?editors=0010) - Source code of an example UI that written in both of them.
+- [Phavuer Example Game](https://github.com/laineus/phavuer-example) - Source code of simple shooter that written in Phavuer
+
+\*\*\* **Attention** \*\*\*
+
+- This is still WIP.
+- I am not sure if this affect to the performance.
+- If you use Phavuer, the source code is supposed to be quite different from plain Phaser.  
+So please keep in mind that you can not switch the way easily.
+
+However, I am keep going to use this for make my game.  
+Feel free to contribute.
+
 # Usage example
@@ -137,2 +150,4 @@
 
+## Methods
+
 ### `createPhavuerApp(gameInstance, rootComponent)`
@@ -147,45 +162,39 @@
 
-`Object` App instance of Vue
+App instance of Vue
 
-### `initGameObject(gameObject, props, context)`
+### `refTo(value, key)`
 
-This method gives following features to the given gameObject:
+Parameters:
 
-- Having reactivity for given props such as `x` or `y` ([see all](https://github.com/laineus/phavuer/tree/master/src/setters.js))
-- Appended to the parent Container automatically if it exists
-- Appended to the Scene automatically if parent Container not exists
-- Destroyedautomatically when the component is unmounted
-- Able to set interactive events such as `@pointerup`
-- Able to set an event for on create `@create`
-- Able to set an event for its preUpdate with `@update`
+`value`: Initial value
+`key`: Key string of what property of given new value should be set
 
-Parameters:
+Return value:
 
-- `gameObject`: Phaser 3 GameObject instance
-- `props`: Vue 3 props
-- `context`: Vue 3 context
+Instance of `CustomRefImpl`
 
-It is used for define Base Components. ([like this](https://github.com/laineus/phavuer/tree/master/src/components/Sprite.js))
+Usage:
 
-You don't need this method in most cases.
+Can be used to get such as a GameObject easily.
 
-Even when you use your component in your another component,
-You just need to relay props to default components like this:
-
+```js
+const rectangle = refTo(null, 'object')
 ```
-<!-- YourParentComponent: -->
-<template>
-  <YourCustomContainer :x="n * 100" :y="10" v-for="n in count">
-</template>
-```
 
+```vue
+<Rectangle ref="rectangle">
 ```
-<!-- YourCustomContainer: -->
-<template>
-  <Container ref="root" :x="props.x" :y="props.y">
-</template>
-```
 
-### `Scene` component
+### `refObj(value)`
 
+A sugar function for `refTo(value, 'object')`
+
+### `refScene(value)`
+
+A sugar function for `refTo(value, 'scene')`
+
+## Components
+
+### `Scene`
+
 `Scene` component is used for make your scene component.
@@ -249,1 +258,26 @@
 Also you can make base components just in your project. ([refer](https://github.com/laineus/phavuer/tree/master/src/components))
+
+## Methods (for contributers)
+
+### `initGameObject(gameObject, props, context)`
+
+This method gives following features to the given gameObject:
+
+- Having reactivity for given props such as `x` or `y` ([see all](https://github.com/laineus/phavuer/tree/master/src/setters.js))
+- Appended to the parent Container automatically if it exists
+- Appended to the Scene automatically if parent Container not exists
+- Destroyedautomatically when the component is unmounted
+- Able to set interactive events such as `@pointerup`
+- Able to set an event for on create `@create`
+- Able to set an event for its preUpdate with `@update`
+
+Parameters:
+
+- `gameObject`: Phaser 3 GameObject instance
+- `props`: Vue 3 props
+- `context`: Vue 3 context
+
+It is used to define Base Components. ([like this](https://github.com/laineus/phavuer/tree/master/src/components/Sprite.js))
+
+If you just want to use your component in your another component, you don't need this method.  
+For such a case, you just need to relay props to default components.

src/index.js

@@ -1,2 +0,2 @@
-import { createApp, inject, watch, onBeforeUnmount } from 'vue'
+import { createApp, inject, watch, onBeforeUnmount, customRef } from 'vue'
 import components from './components'
@@ -52,1 +52,18 @@ import setters from './setters'
 }
+
+export const refTo = (value, key) => {
+  return customRef((track, trigger) => {
+    return {
+      get () {
+        track()
+        return value
+      },
+      set (newValue) {
+        value = newValue[key]
+        trigger()
+      }
+    }
+  })
+}
+export const refObj = value => refTo(value, 'object')
+export const refScene = value => refTo(value, 'scene')

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63511

increased by138.06%

Number of package files

16

increased by6.67%

Lines of code

141

increased by12.8%

Number of lines in readme file

280

increased by13.82%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes