pixi-solid 0.2.0 → 1.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +186 -0
- package/LICENSE +21 -0
- package/README.md +22 -8
- package/dist/components/bind-props/bind-props.js +6 -0
- package/dist/components/bind-props/bind-props.js.map +1 -1
- package/package.json +7 -5
- package/pixi-solid-logo.png +0 -0
- package/dist/types/benchmarks/container-prop-updates/container-prop-updates.bench.d.ts +0 -1
- package/dist/types/benchmarks/point-property-lookup/point-property-lookup.bench.d.ts +0 -1
- package/dist/types/benchmarks/point-property-lookup/point-property-lookup.variant.d.ts +0 -2
- package/dist/types/benchmarks/set-event-property/set-event-property.bench.d.ts +0 -1
- package/dist/types/benchmarks/set-event-property/set-event-property.variant.d.ts +0 -3
- package/dist/types/benchmarks/set-prop-assignment/set-prop-assignment.bench.d.ts +0 -1
- package/dist/types/benchmarks/set-prop-assignment/set-prop-assignment.variant.d.ts +0 -3
- package/dist/types/components/bind-props/bind-children.test.d.ts +0 -1
- package/dist/types/components/bind-props/bind-props.test.d.ts +0 -1
- package/dist/types/components/component-factories.test.d.ts +0 -1
- package/dist/types/components/components.test.d.ts +0 -1
- package/dist/types/components/spread-signal-props.test.d.ts +0 -1
- package/dist/types/on-resize.test.d.ts +0 -1
- package/dist/types/testing/index.d.ts +0 -3
- package/dist/types/testing/pixi-renderer-mock.d.ts +0 -24
- package/dist/types/testing/test-root.d.ts +0 -9
- package/dist/types/testing/test-root.test.d.ts +0 -1
- package/dist/types/use-pixi-screen/use-pixi-screen.test.d.ts +0 -1
- package/dist/types/utils/object-fit-container.test.d.ts +0 -1
- package/dist/types/utils/object-fit.test.d.ts +0 -1
- /package/dist/{types/components → components}/bind-props/bind-children.d.ts +0 -0
- /package/dist/{types/components → components}/bind-props/bind-props.d.ts +0 -0
- /package/dist/{types/components → components}/bind-props/event-names.d.ts +0 -0
- /package/dist/{types/components → components}/bind-props/index.d.ts +0 -0
- /package/dist/{types/components → components}/bind-props/is-event-property.d.ts +0 -0
- /package/dist/{types/components → components}/bind-props/point-property-names.d.ts +0 -0
- /package/dist/{types/components → components}/bind-props/set-point-property.d.ts +0 -0
- /package/dist/{types/components → components}/component-factories.d.ts +0 -0
- /package/dist/{types/components → components}/components.d.ts +0 -0
- /package/dist/{types/components → components}/index.d.ts +0 -0
- /package/dist/{types/index.d.ts → index.d.ts} +0 -0
- /package/dist/{types/on-resize.d.ts → on-resize.d.ts} +0 -0
- /package/dist/{types/on-tick.d.ts → on-tick.d.ts} +0 -0
- /package/dist/{types/pixi-application → pixi-application}/context.d.ts +0 -0
- /package/dist/{types/pixi-application → pixi-application}/get-pixi-app.d.ts +0 -0
- /package/dist/{types/pixi-application → pixi-application}/get-renderer.d.ts +0 -0
- /package/dist/{types/pixi-application → pixi-application}/get-ticker.d.ts +0 -0
- /package/dist/{types/pixi-application → pixi-application}/index.d.ts +0 -0
- /package/dist/{types/pixi-application → pixi-application}/pixi-application-provider.d.ts +0 -0
- /package/dist/{types/pixi-application → pixi-application}/pixi-application.d.ts +0 -0
- /package/dist/{types/pixi-canvas.d.ts → pixi-canvas.d.ts} +0 -0
- /package/dist/{types/use-pixi-screen → use-pixi-screen}/index.d.ts +0 -0
- /package/dist/{types/use-pixi-screen → use-pixi-screen}/pixi-screen-store.d.ts +0 -0
- /package/dist/{types/use-pixi-screen → use-pixi-screen}/use-pixi-screen.d.ts +0 -0
- /package/dist/{types/utils → utils}/delay.d.ts +0 -0
- /package/dist/{types/utils → utils}/index.d.ts +0 -0
- /package/dist/{types/utils → utils}/object-fit.d.ts +0 -0
- /package/dist/{types/utils → utils}/smooth-damp.d.ts +0 -0
- /package/dist/{types/utils → utils}/spring.d.ts +0 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
- ✅ Added for new features.
|
|
9
|
+
- ⚙️ Changed for changes in existing functionality.
|
|
10
|
+
- 😵 Deprecated for soon-to-be removed features.
|
|
11
|
+
- 💀 Removed for now removed features.
|
|
12
|
+
- 🐞 Fixed for any bug fixes.
|
|
13
|
+
|
|
14
|
+
## 1.0.0-rc.0
|
|
15
|
+
|
|
16
|
+
- No public changes yet
|
|
17
|
+
- Added some more tests
|
|
18
|
+
- Updated the docs
|
|
19
|
+
|
|
20
|
+
## 0.2.0
|
|
21
|
+
|
|
22
|
+
- ⚙️ Moved `delay` and `createAsyncDelay` exports from main `pixi-solid` package to `pixi-solid/utils`. Update imports from `import { delay, createAsyncDelay } from "pixi-solid"` to `import { delay, createAsyncDelay } from "pixi-solid/utils"`.
|
|
23
|
+
- ✅ Added `ObjectFitContainer` component for scaling and positioning children with object-fit style layout control.
|
|
24
|
+
- ✅ Added `getRenderer` hook to access the root Pixi Renderer instance.
|
|
25
|
+
- ✅ Enhanced `objectFit` function to add support for custom positioning, local bounds handling, and additional fit modes including `"none"`.
|
|
26
|
+
|
|
27
|
+
## 0.1.22
|
|
28
|
+
|
|
29
|
+
- 🐞 Fixed a the behaviour in `onResize` to make it always fire at the expected times.
|
|
30
|
+
|
|
31
|
+
## 0.1.21
|
|
32
|
+
|
|
33
|
+
- 🐞 Fixed a regression where type inference was broken for the `Graphics` `ref` prop.
|
|
34
|
+
|
|
35
|
+
## 0.1.20
|
|
36
|
+
|
|
37
|
+
- ⚙️ Updated README structure with dedicated install, basic usage, and docs sections.
|
|
38
|
+
- ⚙️ Added an expanded TSX usage example in README.
|
|
39
|
+
- ⚙️ Updated README peer dependency examples to explicit compatible ranges.
|
|
40
|
+
|
|
41
|
+
## 0.1.19
|
|
42
|
+
|
|
43
|
+
- ⚙️ Use more specific peer dependency range
|
|
44
|
+
- Improved test helpers and refactored tests
|
|
45
|
+
- Use dependency overrides for the monorepo instead of having per package versions
|
|
46
|
+
|
|
47
|
+
## 0.1.18
|
|
48
|
+
|
|
49
|
+
- ✅ Added `PixiSolidEventHandlerName` union type to exports.
|
|
50
|
+
- 💀 Removed `PixiEventHandlerMap` type from exports.
|
|
51
|
+
- 💀 Removed `PIXI_EVENT_NAMES` and `PIXI_SOLID_EVENT_HANDLER_NAMES` constants from exports.
|
|
52
|
+
- Renamed internal event types.
|
|
53
|
+
|
|
54
|
+
## 0.1.17
|
|
55
|
+
|
|
56
|
+
- 🐞 Fixed a race condition which could cause inconsistent screen dimensions when the `onResize` hook and the `usePixiScreen` hook are used together.
|
|
57
|
+
|
|
58
|
+
## 0.1.16
|
|
59
|
+
|
|
60
|
+
- ⚙️ Changed the `AnimatedSprite` component to use the nearest ticker context instead of the Pixi `Ticker.shared` for the `autoUpdate` functionality.
|
|
61
|
+
|
|
62
|
+
## 0.1.15
|
|
63
|
+
|
|
64
|
+
- 🐞 Fixed the types for leaf components by removing the `TilingSprite` specific props `tilePosition` and `tileScale` from the prop types.
|
|
65
|
+
|
|
66
|
+
## 0.1.14
|
|
67
|
+
|
|
68
|
+
- ✅ Adds an optional ticker priority argument to the `onTick` hook.
|
|
69
|
+
|
|
70
|
+
## 0.1.13
|
|
71
|
+
|
|
72
|
+
- 🐞 Fix usePixiScreen hook not being reactive on all values.
|
|
73
|
+
|
|
74
|
+
## 0.1.12
|
|
75
|
+
|
|
76
|
+
- 🐞 Fixed component destroy behaviour to be managed by the components own lifecycle rather than in the bind children function.
|
|
77
|
+
Fixes a bug where children would not be destroyed if a `PixiCanvas` was unmounted.
|
|
78
|
+
|
|
79
|
+
## 0.1.11
|
|
80
|
+
|
|
81
|
+
- 🐞 `PixiApplicationProvider` now only destroys the app instance on unmount if it created it.
|
|
82
|
+
|
|
83
|
+
## 0.1.10
|
|
84
|
+
|
|
85
|
+
- 🐞 Fixed event handler reactivity where handlers bound through spread props were not properly unregistered when updated.
|
|
86
|
+
- 🐞 Fixed component prop reactivity if a signal is spread into a component with dynamic properties.
|
|
87
|
+
|
|
88
|
+
## 0.1.9
|
|
89
|
+
|
|
90
|
+
- 🐞 Fixed components that have initial arguments that aren't exposed as public properties on the instance.
|
|
91
|
+
|
|
92
|
+
## 0.1.8
|
|
93
|
+
|
|
94
|
+
- Refactored prop binding to improve performance and added benchmark tests.
|
|
95
|
+
|
|
96
|
+
## 0.1.7
|
|
97
|
+
|
|
98
|
+
- 🐞 Fix timing of ref assignment to be consistent with SolidJS.
|
|
99
|
+
Ref's are meant to be assigned before the element is added to the scene and `onMount` should be used to reference elements after they are added to the scene.
|
|
100
|
+
Reverts the change in `0.1.4`.
|
|
101
|
+
|
|
102
|
+
## 0.1.5
|
|
103
|
+
|
|
104
|
+
- 🐞 Fix context loss in ref callback function scope.
|
|
105
|
+
|
|
106
|
+
## 0.1.4
|
|
107
|
+
|
|
108
|
+
- 🐞 Fix timing of ref callback to make sure the object is added to the scene before the ref is set.
|
|
109
|
+
|
|
110
|
+
## 0.1.3
|
|
111
|
+
|
|
112
|
+
- ✅ Improved error handling for invalid children.
|
|
113
|
+
|
|
114
|
+
## 0.1.2
|
|
115
|
+
|
|
116
|
+
- Cleanup
|
|
117
|
+
|
|
118
|
+
## 0.1.1
|
|
119
|
+
|
|
120
|
+
- Internal refactor to remove the universal renderer
|
|
121
|
+
|
|
122
|
+
## 0.1.0
|
|
123
|
+
|
|
124
|
+
#### ✅ Added
|
|
125
|
+
|
|
126
|
+
- Added `PixiApplicationProvider` component that can be ued to instantiate the Pixi Application allowing the hooks and utilites to work within it's scope.
|
|
127
|
+
- Added option to abort an async delay early by passing in an abort signal.
|
|
128
|
+
|
|
129
|
+
#### ⚙️ Changed
|
|
130
|
+
|
|
131
|
+
- Changed the `PixiCanvas` component to not require a `PixiApplication` as a wrapper.
|
|
132
|
+
It uses the context from the `PixiApplicationProvider` if available or it will instantiate it's own Pixi Application if an existing one isn't found.
|
|
133
|
+
|
|
134
|
+
#### 💀 Removed
|
|
135
|
+
|
|
136
|
+
- Removed the `PixiApplication` component as it's purpose can be solved in a more flexible way.
|
|
137
|
+
|
|
138
|
+
#### 🐞 Fixed
|
|
139
|
+
|
|
140
|
+
- Fixed the `RenderLayer` children from not being removed properly.
|
|
141
|
+
|
|
142
|
+
## 0.0.36
|
|
143
|
+
|
|
144
|
+
#### 💀 Removed
|
|
145
|
+
|
|
146
|
+
- Removed the `PixiStage` component as it provided little value and was a bit of a nuisance.
|
|
147
|
+
The pixi stage component can be accessed from the `getPixiApp` context if required.
|
|
148
|
+
|
|
149
|
+
#### ✅ Added
|
|
150
|
+
|
|
151
|
+
- Added a utility type `PixiComponentProps` that is useful for extending custom component props that users want to pass through.
|
|
152
|
+
|
|
153
|
+
## 0.0.33
|
|
154
|
+
|
|
155
|
+
#### ⚙️ Changed
|
|
156
|
+
|
|
157
|
+
- Added defaults for the `PixiApplication` back in. Set `autoDensity` to `true` and `resolution` to use `window.devicePixelRatio` by default.
|
|
158
|
+
|
|
159
|
+
## 0.0.32
|
|
160
|
+
|
|
161
|
+
#### ✅ Added
|
|
162
|
+
|
|
163
|
+
- Added default styles to the `canvas` element to stop select on long press on touch sreens.
|
|
164
|
+
|
|
165
|
+
## 0.0.31
|
|
166
|
+
|
|
167
|
+
#### ✅ Added
|
|
168
|
+
|
|
169
|
+
- Added support for granular control of PixiJS point properties directly as JSX props (e.g., `positionX`, `scaleY`, `pivotX`).
|
|
170
|
+
|
|
171
|
+
#### ⚙️ Changed
|
|
172
|
+
|
|
173
|
+
- Changed `PixiApplication` component to allow all standard `ApplicationOptions` to be passed directly as props during initialization and removed opinionated defaults.
|
|
174
|
+
|
|
175
|
+
## 0.0.31
|
|
176
|
+
|
|
177
|
+
#### ✅ Added
|
|
178
|
+
|
|
179
|
+
- Added a `useSmoothDamp` hook for smoothly dampening a numeric value towards a target over time, synchronized with the PixiJS ticker.
|
|
180
|
+
- Added a `useSpring` hook for creating spring-based animations for numeric values, synchronized with the PixiJS ticker.
|
|
181
|
+
|
|
182
|
+
## 0.0.30
|
|
183
|
+
|
|
184
|
+
#### ✅ Added
|
|
185
|
+
|
|
186
|
+
- Added a `usePixiScreen` hook that returns the Pixi Screen dimensions as a reactive store that can be subscribed to.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Luke Carl Thompson
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,18 +1,25 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="./pixi-solid-logo.png" alt="Pixi-Solid Logo" width="200" />
|
|
3
|
+
|
|
4
|
+
[](https://www.npmjs.com/package/pixi-solid)
|
|
5
|
+
[](./LICENSE)
|
|
6
|
+
[](https://github.com/LukeCarlThompson/pixi-solid/actions)
|
|
7
|
+
[](https://www.typescriptlang.org/)
|
|
8
|
+
|
|
9
|
+
</div>
|
|
10
|
+
|
|
1
11
|
# Pixi-Solid
|
|
2
12
|
|
|
3
13
|
A custom renderer for [PixiJS](https://pixijs.com/) that lets you build your scene with [SolidJS](https://www.solidjs.com/) JSX components and its fine-grained signals based reactivity.
|
|
4
14
|
|
|
5
|
-
[](https://www.npmjs.com/package/pixi-solid)
|
|
6
|
-
[](https://github.com/your-username/pixi-solid/blob/main/LICENSE)
|
|
7
|
-
|
|
8
15
|
- 💙 Lightweight and flexible SolidJS library for creating PixiJS applications.
|
|
9
16
|
- 🎁 Provides a set of custom SolidJS components that create PixiJS objects instead of HTML elements.
|
|
10
17
|
- 💪 Supports all PixiJS features.
|
|
11
18
|
- 🥳 The convenience and speed of SolidJS stores and signals to manage state.
|
|
12
19
|
- ✨ All events emitted by PixiJS objects are supported.
|
|
13
20
|
- 😎 No limitations. Break out of SolidJS any time and interact directly with PixiJS.
|
|
14
|
-
- 💫 Useful helper utilities
|
|
15
|
-
- 🤩 Full
|
|
21
|
+
- 💫 Useful helper utilities for animations, layout, and async timing.
|
|
22
|
+
- 🤩 Full TypeScript support with strict type safety and auto completion throughout the API.
|
|
16
23
|
|
|
17
24
|
## Install
|
|
18
25
|
|
|
@@ -56,9 +63,11 @@ export const DemoApp = () => {
|
|
|
56
63
|
};
|
|
57
64
|
```
|
|
58
65
|
|
|
59
|
-
##
|
|
66
|
+
## Next Steps
|
|
60
67
|
|
|
61
|
-
Check out the [
|
|
68
|
+
- **New to Pixi Solid?** Check out the [Getting Started guide](https://lukecarlthompson.github.io/pixi-solid/docs/getting-started/project-setup/) to set up your first project.
|
|
69
|
+
- **Explore features** like responsive layout with [`ObjectFitContainer`](https://lukecarlthompson.github.io/pixi-solid/docs/utils/object-fit-container/), animations with [`useSpring`](https://lukecarlthompson.github.io/pixi-solid/docs/utils/use-spring/) and ticker-synced delays.
|
|
70
|
+
- **Browse live examples** in the [documentation site](https://lukecarlthompson.github.io/pixi-solid/).
|
|
62
71
|
|
|
63
72
|
## Why combine SolidJS with PixiJS?
|
|
64
73
|
|
|
@@ -78,9 +87,14 @@ Check out the [documentation site 🧑💻](https://lukecarlthompson.github.i
|
|
|
78
87
|
|
|
79
88
|
- **SolidJS is fully featured**: It has stores, signals, suspense, error boundaries, resource fetching and more. It's a great feature set for simple or complex applications and you won't have to reach for other libraries to manage templating or state.
|
|
80
89
|
|
|
90
|
+
## Quick Links
|
|
91
|
+
|
|
92
|
+
- 📖 **[Full Documentation](https://lukecarlthompson.github.io/pixi-solid/)** — Components, hooks, utilities, and examples
|
|
93
|
+
- 🐛 **[GitHub Issues](https://github.com/LukeCarlThompson/pixi-solid/issues)** — Report bugs or request features
|
|
94
|
+
|
|
81
95
|
## Contributing
|
|
82
96
|
|
|
83
|
-
Contributions are welcome!
|
|
97
|
+
Contributions are welcome! Feel free to open an issue to report a bug, suggest a feature, or submit a pull request.
|
|
84
98
|
|
|
85
99
|
## License
|
|
86
100
|
|
|
@@ -12,6 +12,12 @@ import { createRenderEffect, on, onCleanup } from "solid-js";
|
|
|
12
12
|
* @param props The props object.
|
|
13
13
|
*/
|
|
14
14
|
var bindRuntimeProps = (instance, props) => {
|
|
15
|
+
/**
|
|
16
|
+
* Outer createRenderEffect runs when the props object itself changes.
|
|
17
|
+
* For example if a signal is spread into the props, the outer createRenderEffect will run whenever the signal changes because the props object will be a new reference.
|
|
18
|
+
*
|
|
19
|
+
* The inner createRenderEffects will then set the individual props on the instance and these effects only run if that specific property changes.
|
|
20
|
+
*/
|
|
15
21
|
createRenderEffect(() => {
|
|
16
22
|
for (const key in props) {
|
|
17
23
|
if (key === "as") continue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bind-props.js","names":[],"sources":["../../../src/components/bind-props/bind-props.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createRenderEffect, onCleanup, on } from \"solid-js\";\n\nimport type { ContainerProps } from \"../component-factories\";\n\nimport { bindChildrenToContainer, bindChildrenToRenderLayer } from \"./bind-children\";\nimport { isEventProperty } from \"./is-event-property\";\nimport {\n isPointProperty,\n setPointProperty,\n isPointAxisProperty,\n setPointAxisProperty,\n} from \"./set-point-property\";\n\n/**\n * Binds the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * This is specifically for the runtime props that can't be set at initialisation. These props will be set on the Pixi instance immediately after it is created but before rendering.\n *\n * @param instance The Pixi instance we want to bind the props to.\n * @param props The props object.\n */\nexport const bindRuntimeProps = <\n InstanceType extends Pixi.Container,\n OptionsType extends ContainerProps<InstanceType>,\n>(\n instance: InstanceType,\n props: OptionsType,\n): void => {\n createRenderEffect(() => {\n for (const key in props) {\n if (key === \"as\") continue;\n\n if (key === \"ref\") {\n (props[key] as unknown as (arg: any) => void)(instance);\n\n continue;\n } else if (key === \"children\") {\n if (\"attach\" in instance && \"detach\" in instance) {\n bindChildrenToRenderLayer(instance as unknown as Pixi.RenderLayer, props.children);\n } else {\n bindChildrenToContainer(instance, props.children);\n }\n\n continue;\n }\n\n if (isPointProperty(key)) {\n createRenderEffect(() => setPointProperty(instance, key, props[key]));\n\n continue;\n }\n\n if (isPointAxisProperty(key)) {\n createRenderEffect(() => setPointAxisProperty(instance, key, props[key]));\n continue;\n }\n\n if (isEventProperty(key)) {\n createRenderEffect(() => {\n const eventName = key.slice(2);\n const eventHandler = props[key];\n\n if (eventHandler) {\n instance.on(eventName, eventHandler as any);\n onCleanup(() => {\n instance.off(eventName, eventHandler as any);\n });\n }\n });\n\n continue;\n }\n\n if (key in instance) {\n createRenderEffect(() => ((instance as any)[key] = props[key]));\n continue;\n }\n }\n });\n};\n\n/**\n * Binds the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * This is specifically for the initialisation props that can be set at the time of instance creation. These props will be passed into the Pixi class during instantiation but won't be set on the instance until they are changed again. This is to avoid side effects that can be caused by setting certain props after the instance is created, such as the AnimatedSprite's `textures` prop which stops the animation if it was already instantiated with `autoplay: true`.\n *\n * @param instance The Pixi instance we want to bind the props to.\n * @param props The props object.\n */\nexport const bindInitialisationProps = <\n InstanceType extends Pixi.Container,\n OptionsType extends ContainerProps<InstanceType>,\n>(\n instance: InstanceType,\n props: OptionsType,\n): void => {\n createRenderEffect<boolean>((defer) => {\n for (const key in props) {\n if (isPointProperty(key)) {\n createRenderEffect(\n on(\n () => props[key],\n () => {\n return setPointProperty(instance, key, props[key]);\n },\n { defer },\n ),\n );\n\n continue;\n }\n\n if (key in instance) {\n createRenderEffect(\n on(\n () => props[key],\n () => {\n (instance as any)[key] = props[key];\n },\n { defer },\n ),\n );\n }\n }\n\n return false;\n }, true);\n\n /**\n * Do not throw an error here for invalid prop names because there are some initialisation props that are not available as public properties. We want to allow users to pass these props but not try to set them on the instance.\n */\n};\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAa,oBAIX,UACA,UACS
|
|
1
|
+
{"version":3,"file":"bind-props.js","names":[],"sources":["../../../src/components/bind-props/bind-props.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createRenderEffect, onCleanup, on } from \"solid-js\";\n\nimport type { ContainerProps } from \"../component-factories\";\n\nimport { bindChildrenToContainer, bindChildrenToRenderLayer } from \"./bind-children\";\nimport { isEventProperty } from \"./is-event-property\";\nimport {\n isPointProperty,\n setPointProperty,\n isPointAxisProperty,\n setPointAxisProperty,\n} from \"./set-point-property\";\n\n/**\n * Binds the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * This is specifically for the runtime props that can't be set at initialisation. These props will be set on the Pixi instance immediately after it is created but before rendering.\n *\n * @param instance The Pixi instance we want to bind the props to.\n * @param props The props object.\n */\nexport const bindRuntimeProps = <\n InstanceType extends Pixi.Container,\n OptionsType extends ContainerProps<InstanceType>,\n>(\n instance: InstanceType,\n props: OptionsType,\n): void => {\n /**\n * Outer createRenderEffect runs when the props object itself changes.\n * For example if a signal is spread into the props, the outer createRenderEffect will run whenever the signal changes because the props object will be a new reference.\n *\n * The inner createRenderEffects will then set the individual props on the instance and these effects only run if that specific property changes.\n */\n createRenderEffect(() => {\n for (const key in props) {\n if (key === \"as\") continue;\n\n if (key === \"ref\") {\n (props[key] as unknown as (arg: any) => void)(instance);\n\n continue;\n } else if (key === \"children\") {\n if (\"attach\" in instance && \"detach\" in instance) {\n bindChildrenToRenderLayer(instance as unknown as Pixi.RenderLayer, props.children);\n } else {\n bindChildrenToContainer(instance, props.children);\n }\n\n continue;\n }\n\n if (isPointProperty(key)) {\n createRenderEffect(() => setPointProperty(instance, key, props[key]));\n\n continue;\n }\n\n if (isPointAxisProperty(key)) {\n createRenderEffect(() => setPointAxisProperty(instance, key, props[key]));\n continue;\n }\n\n if (isEventProperty(key)) {\n createRenderEffect(() => {\n const eventName = key.slice(2);\n const eventHandler = props[key];\n\n if (eventHandler) {\n instance.on(eventName, eventHandler as any);\n onCleanup(() => {\n instance.off(eventName, eventHandler as any);\n });\n }\n });\n\n continue;\n }\n\n if (key in instance) {\n createRenderEffect(() => ((instance as any)[key] = props[key]));\n continue;\n }\n }\n });\n};\n\n/**\n * Binds the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * This is specifically for the initialisation props that can be set at the time of instance creation. These props will be passed into the Pixi class during instantiation but won't be set on the instance until they are changed again. This is to avoid side effects that can be caused by setting certain props after the instance is created, such as the AnimatedSprite's `textures` prop which stops the animation if it was already instantiated with `autoplay: true`.\n *\n * @param instance The Pixi instance we want to bind the props to.\n * @param props The props object.\n */\nexport const bindInitialisationProps = <\n InstanceType extends Pixi.Container,\n OptionsType extends ContainerProps<InstanceType>,\n>(\n instance: InstanceType,\n props: OptionsType,\n): void => {\n createRenderEffect<boolean>((defer) => {\n for (const key in props) {\n if (isPointProperty(key)) {\n createRenderEffect(\n on(\n () => props[key],\n () => {\n return setPointProperty(instance, key, props[key]);\n },\n { defer },\n ),\n );\n\n continue;\n }\n\n if (key in instance) {\n createRenderEffect(\n on(\n () => props[key],\n () => {\n (instance as any)[key] = props[key];\n },\n { defer },\n ),\n );\n }\n }\n\n return false;\n }, true);\n\n /**\n * Do not throw an error here for invalid prop names because there are some initialisation props that are not available as public properties. We want to allow users to pass these props but not try to set them on the instance.\n */\n};\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAa,oBAIX,UACA,UACS;;;;;;;CAOT,yBAAyB;EACvB,KAAK,MAAM,OAAO,OAAO;GACvB,IAAI,QAAQ,MAAM;GAElB,IAAI,QAAQ,OAAO;IACjB,MAAO,KAAuC,SAAS;IAEvD;UACK,IAAI,QAAQ,YAAY;IAC7B,IAAI,YAAY,YAAY,YAAY,UACtC,0BAA0B,UAAyC,MAAM,SAAS;SAElF,wBAAwB,UAAU,MAAM,SAAS;IAGnD;;GAGF,IAAI,gBAAgB,IAAI,EAAE;IACxB,yBAAyB,iBAAiB,UAAU,KAAK,MAAM,KAAK,CAAC;IAErE;;GAGF,IAAI,oBAAoB,IAAI,EAAE;IAC5B,yBAAyB,qBAAqB,UAAU,KAAK,MAAM,KAAK,CAAC;IACzE;;GAGF,IAAI,gBAAgB,IAAI,EAAE;IACxB,yBAAyB;KACvB,MAAM,YAAY,IAAI,MAAM,EAAE;KAC9B,MAAM,eAAe,MAAM;KAE3B,IAAI,cAAc;MAChB,SAAS,GAAG,WAAW,aAAoB;MAC3C,gBAAgB;OACd,SAAS,IAAI,WAAW,aAAoB;QAC5C;;MAEJ;IAEF;;GAGF,IAAI,OAAO,UAAU;IACnB,yBAA0B,SAAkB,OAAO,MAAM,KAAM;IAC/D;;;GAGJ;;;;;;;;;;AAWJ,IAAa,2BAIX,UACA,UACS;CACT,oBAA6B,UAAU;EACrC,KAAK,MAAM,OAAO,OAAO;GACvB,IAAI,gBAAgB,IAAI,EAAE;IACxB,mBACE,SACQ,MAAM,YACN;KACJ,OAAO,iBAAiB,UAAU,KAAK,MAAM,KAAK;OAEpD,EAAE,OAAO,CACV,CACF;IAED;;GAGF,IAAI,OAAO,UACT,mBACE,SACQ,MAAM,YACN;IACJ,SAAkB,OAAO,MAAM;MAEjC,EAAE,OAAO,CACV,CACF;;EAIL,OAAO;IACN,KAAK"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixi-solid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-rc.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A library to write PixiJS applications with SolidJS",
|
|
6
6
|
"homepage": "https://lukecarlthompson.github.io/pixi-solid/",
|
|
@@ -13,17 +13,19 @@
|
|
|
13
13
|
"files": [
|
|
14
14
|
"dist",
|
|
15
15
|
"README.md",
|
|
16
|
-
"LICENSE"
|
|
16
|
+
"LICENSE",
|
|
17
|
+
"CHANGELOG.md",
|
|
18
|
+
"pixi-solid-logo.png"
|
|
17
19
|
],
|
|
18
20
|
"type": "module",
|
|
19
21
|
"sideEffects": false,
|
|
20
22
|
"exports": {
|
|
21
23
|
".": {
|
|
22
|
-
"types": "./dist/
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
23
25
|
"import": "./dist/index.js"
|
|
24
26
|
},
|
|
25
27
|
"./utils": {
|
|
26
|
-
"types": "./dist/
|
|
28
|
+
"types": "./dist/utils/index.d.ts",
|
|
27
29
|
"import": "./dist/utils/index.js"
|
|
28
30
|
}
|
|
29
31
|
},
|
|
@@ -37,7 +39,7 @@
|
|
|
37
39
|
"build": "vite build && tsc --project tsconfig.build.json --emitDeclarationOnly",
|
|
38
40
|
"preview": "vite preview",
|
|
39
41
|
"preinstall": "npx only-allow pnpm",
|
|
40
|
-
"test": "vitest",
|
|
42
|
+
"test": "vitest --run",
|
|
41
43
|
"test:bench": "vitest bench",
|
|
42
44
|
"test:bench:save": "vitest bench --outputJson=src/benchmarks/results/baseline.json",
|
|
43
45
|
"test:bench:compare": "vitest bench --compare=src/benchmarks/results/baseline.json"
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import type * as Pixi from "pixi.js";
|
|
2
|
-
export declare const setEventPropertyWithSlice: (node: Pixi.Container, name: string, eventHandler: any, prevEventHandler?: any) => void;
|
|
3
|
-
export declare const setEventPropertyWithMap: (node: Pixi.Container, name: string, eventHandler: any, prevEventHandler?: any) => void;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import type * as Pixi from "pixi.js";
|
|
2
|
-
import type { JSX, ParentProps } from "solid-js";
|
|
3
|
-
export type MockRenderer = {
|
|
4
|
-
screen: {
|
|
5
|
-
width: number;
|
|
6
|
-
height: number;
|
|
7
|
-
x: number;
|
|
8
|
-
y: number;
|
|
9
|
-
};
|
|
10
|
-
addListener: (event: string, listener: () => void) => void;
|
|
11
|
-
removeListener: (event: string, listener: () => void) => void;
|
|
12
|
-
emitResize: (nextScreen?: Partial<{
|
|
13
|
-
width: number;
|
|
14
|
-
height: number;
|
|
15
|
-
x: number;
|
|
16
|
-
y: number;
|
|
17
|
-
}>) => void;
|
|
18
|
-
};
|
|
19
|
-
export declare const createMockRenderer: () => MockRenderer;
|
|
20
|
-
export declare const createMockApp: (renderer: MockRenderer) => Pixi.Application;
|
|
21
|
-
export declare const TestPixiProvider: (props: ParentProps<{
|
|
22
|
-
app: Pixi.Application;
|
|
23
|
-
renderer: MockRenderer;
|
|
24
|
-
}>) => JSX.Element;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
export declare const withTestRoot: <T>(setup: () => T) => {
|
|
3
|
-
value: T;
|
|
4
|
-
dispose: () => void;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* Calls pixi solid components in a pure Solid root without mounting to the Canvas.
|
|
8
|
-
*/
|
|
9
|
-
export declare const mountHeadless: (component: () => JSX.Element) => (() => void);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|