@katis/react-pixi - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/index.d.ts

 export { render } from './internal/render';
-export { Sprite, SpriteProps } from './internal/tags/Sprite';
-export { Container } from './internal/tags/Container';
-export { ContainerProps } from './internal/tags/prop-types';
-export { Text, TextProps } from './internal/tags/Text';
+export { SpriteProps } from './internal/tags/Sprite';
+export { ContainerProps, SpriteBaseProps, DisplayObjectProps } from './internal/tags/prop-types';
+export { TextProps } from './internal/tags/Text';
+export { px, PixiElementFactory, PixiElements } from './internal/px';

dist/index.js

 export { render } from './internal/render';
-export { Sprite } from './internal/tags/Sprite';
-export { Container } from './internal/tags/Container';
-export { Text } from './internal/tags/Text';
+export { px } from './internal/px';

dist/internal/render.d.ts

 /// <reference types="pixi.js" />
 /// <reference types="react" />
 import { Application } from 'pixi.js';
-export declare function render(application: Application, e: React.ReactElement<any>, parentElement: HTMLElement): void;
+import * as React from 'react';
+export declare function render(application: Application, children: React.ReactElement<any>, parentElement: HTMLElement): void;

dist/internal/render.js

@@ -0,108 +1,192 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import Reconciler from 'react-reconciler';
+import { makeDiff } from './makeDiff';
 import { Stage } from './Stage';
-import { createDisplayObject, updateDisplayObject } from './tags';
+import { applyProp, createDisplayObject } from './tags';
 import { tagName as textTagName } from './tags/Text';
-const debug = false;
-const debugLog = debug ?
-    (name, args) => console.log(name, args) :
-    (name, args) => { };
-const config = {
-    getRootHostContext(stage) {
-        debugLog('getRootHostContext', arguments);
-        return stage;
-    },
+const DEBUG = false;
+function debug(target, propertyKey, descriptor) {
+    if (DEBUG) {
+        const name = descriptor.value.name;
+        const fn = descriptor.value;
+        descriptor.value = function () {
+            const args = Array.prototype.slice.apply(arguments);
+            // tslint:disable-next-line:no-console
+            console.log(name, args);
+            return fn.apply(target, arguments);
+        };
+    }
+}
+class MutableHostConfig {
+    commitUpdate(instance, updatePayload, type, oldProps, newProps, internalInstanceHandle) {
+        for (let i = 0; i < updatePayload.length; i += 2) {
+            const name = updatePayload[i];
+            const value = updatePayload[i + 1];
+            applyProp(type, instance, name, value);
+        }
+    }
+    commitMount(instance, type, newProps, internalInstanceHandle) {
+        // no-op
+    }
+    commitTextUpdate(textInstance, oldText, newText) {
+        // no-op
+    }
+    resetTextContent(instance) {
+        // no-op
+    }
+    appendChild(parentInstance, child) {
+        parentInstance.addChild(child);
+    }
+    appendChildToContainer(container, child) {
+        container.addChild(child);
+    }
+    insertBefore(parentInstance, child, beforeChild) {
+        const i = parentInstance.getChildIndex(beforeChild);
+        parentInstance.addChildAt(child, i);
+    }
+    insertInContainerBefore(container, child, beforeChild) {
+        const i = container.app.stage.getChildIndex(beforeChild);
+        container.app.stage.addChildAt(child, i);
+    }
+    removeChild(parentInstance, child) {
+        parentInstance.removeChild(child);
+    }
+    removeChildFromContainer(container, child) {
+        container.removeChild(child);
+    }
+}
+__decorate([
+    debug
+], MutableHostConfig.prototype, "commitUpdate", null);
+__decorate([
+    debug
+], MutableHostConfig.prototype, "commitMount", null);
+__decorate([
+    debug
+], MutableHostConfig.prototype, "commitTextUpdate", null);
+__decorate([
+    debug
+], MutableHostConfig.prototype, "resetTextContent", null);
+__decorate([
+    debug
+], MutableHostConfig.prototype, "appendChild", null);
+__decorate([
+    debug
+], MutableHostConfig.prototype, "appendChildToContainer", null);
+__decorate([
+    debug
+], MutableHostConfig.prototype, "insertBefore", null);
+__decorate([
+    debug
+], MutableHostConfig.prototype, "insertInContainerBefore", null);
+__decorate([
+    debug
+], MutableHostConfig.prototype, "removeChild", null);
+__decorate([
+    debug
+], MutableHostConfig.prototype, "removeChildFromContainer", null);
+class ReconcilerConfig {
+    constructor() {
+        this.mutation = new MutableHostConfig();
+    }
+    getRootHostContext(rootContainerInstance) {
+        return rootContainerInstance;
+    }
     getChildHostContext(parentHostContext, type, instance) {
-        debugLog('getChildHostContext', arguments);
         return parentHostContext;
-    },
-    createInstance(type, props, stage, childContext, internalInstanceHandle) {
-        debugLog('createInstance', arguments);
+    }
+    getPublicInstance(instance) {
+        return instance;
+    }
+    createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
         return createDisplayObject(type, props, internalInstanceHandle);
-    },
+    }
     appendInitialChild(parentInstance, child) {
-        debugLog('appendInitialChild', arguments);
         parentInstance.addChild(child);
-    },
-    finalizeInitialChildren(dp, type, props, stage, hostContext) {
-        debugLog('finalizeInitialChildren', arguments);
+    }
+    finalizeInitialChildren(parentInstance, type, props, rootContainerInstance, hostContext) {
         return false;
-    },
-    prepareUpdate(container, type, oldProps, newProps, stage, hostContext) {
-        debugLog('prepareUpdate', arguments);
-        return true;
-    },
+    }
+    prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, hostContext) {
+        return makeDiff(oldProps, newProps);
+    }
     shouldSetTextContent(type, props) {
-        debugLog('shouldSetTextContent', arguments);
         return type === textTagName;
-    },
+    }
     shouldDeprioritizeSubtree(type, props) {
         return false;
-    },
-    createTextInstance(text, rootContainerInstance, hostContext, internal) {
-        debugLog('createInstance', arguments);
+    }
+    createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle) {
         return text;
-    },
-    getPublicInstance(inst) {
-        debugLog('getPublicInstance', arguments);
-        return inst;
-    },
-    prepareForCommit(stage) {
-        debugLog('prepareForCommit', arguments);
-        // noop
-    },
-    resetAfterCommit() {
-        debugLog('prepareUpdate', arguments);
-        // noop
-    },
-    now: () => performance.now(),
-    mutation: {
-        commitUpdate(instance, updatePayload, type, oldProps, newProps, internal) {
-            debugLog('commitUpdate', arguments);
-            updateDisplayObject(type, instance, newProps);
-        },
-        commitMount(instance, type, newProps, internal) {
-            debugLog('commitMount', arguments);
-            // noop
-        },
-        commitTextUpdate(textInstance, oldText, newText) {
-            debugLog('commitTextUpdate', arguments);
-        },
-        resetTextContent(instance) {
-            debugLog('resetTextContent', arguments);
-            // noop
-        },
-        appendChild(parentInstance, child) {
-            debugLog('appendChild', arguments);
-            parentInstance.addChild(child);
-        },
-        appendChildToContainer(container, child) {
-            debugLog('appendChildToContainer', arguments);
-            container.addChild(child);
-        },
-        insertBefore(parentInstance, child, beforeChild) {
-            debugLog('insertBefore', arguments);
-            const i = parentInstance.getChildIndex(beforeChild);
-            parentInstance.addChildAt(child, i);
-        },
-        insertInContainerBefore(container, child, beforeChild) {
-            debugLog('insertInContainerBefore', arguments);
-            const i = container.app.stage.getChildIndex(beforeChild);
-            container.app.stage.addChildAt(child, i);
-        },
-        removeChild(container, child) {
-            debugLog('removeChild', arguments);
-            container.removeChild(child);
-        },
-        removeChildFromContainer(container, child) {
-            debugLog('removeChildFromContainer', arguments);
-            container.removeChild(child);
-        },
-    },
-};
-const renderer = Reconciler(config);
-export function render(application, e, parentElement) {
-    const stage = new Stage(application, {});
-    const container = renderer.createContainer(stage);
-    renderer.updateContainer(e, container);
-    parentElement.appendChild(application.view);
+    }
+    prepareForCommit(containerInfo) {
+        // no-op
+    }
+    resetAfterCommit(containerInfo) {
+        // no-op
+    }
+    now() {
+        return performance.now();
+    }
 }
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "getRootHostContext", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "getChildHostContext", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "getPublicInstance", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "createInstance", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "appendInitialChild", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "finalizeInitialChildren", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "prepareUpdate", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "shouldSetTextContent", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "shouldDeprioritizeSubtree", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "createTextInstance", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "prepareForCommit", null);
+__decorate([
+    debug
+], ReconcilerConfig.prototype, "resetAfterCommit", null);
+const renderer = Reconciler(new ReconcilerConfig());
+export function render(application, children, parentElement) {
+    const parent = parentElement;
+    if (parent._reactPixiRootContainer) {
+        renderer.updateContainer(children, parent._reactPixiRootContainer);
+    }
+    else {
+        renderer.injectIntoDevTools({
+            bundleType: 1,
+            version: '0.1.2',
+            rendererPackageName: '@katis/react-pixi',
+            findHostInstanceByFiber: renderer.findHostInstance,
+        });
+        const stage = new Stage(application, {});
+        const container = renderer.createContainer(stage);
+        parent._reactPixiRootContainer = container;
+        renderer.updateContainer(children, container);
+        parentElement.appendChild(application.view);
+    }
+}

dist/internal/tags/Container.d.ts

 /// <reference types="pixi.js" />
-/// <reference types="react" />
-import { Container as PixiContainer, DisplayObject } from 'pixi.js';
-import { StatelessComponent } from 'react';
-import { Props } from '../common';
+import { Container as PixiContainer } from 'pixi.js';
 import { ContainerProps } from './prop-types';
-export declare const tagName = "pixiContainer";
-export declare function update(dp: DisplayObject, props: Props): void;
+import { ApplyProp } from './util';
+export declare const tagName = "container";
+export declare function applyProp(container: PixiContainer, name: keyof ContainerProps, value: any): void;
 export declare function create(props: ContainerProps): PixiContainer;
-export declare const Container: StatelessComponent<ContainerProps>;
 declare const _default: {
     tagName: string;
-    update: typeof update;
+    applyProp: ApplyProp;
     create: typeof create;
 };
 export default _default;

dist/internal/tags/Container.js

 import { Container as PixiContainer } from 'pixi.js';
-import { createWrappedElement } from './createWrappedElement';
-import { copyProps } from './util';
-const manuallySetProps = ['children'];
-const copyContainerProps = copyProps(manuallySetProps);
-export const tagName = 'pixiContainer';
-export function update(dp, props) {
-    copyContainerProps(dp, props);
+import { applyProps } from './util';
+export const tagName = 'container';
+export function applyProp(container, name, value) {
+    if (name !== 'children') {
+        container[name] = value;
+    }
 }
 export function create(props) {
     const container = new PixiContainer();
-    copyContainerProps(container, props);
+    applyProps(applyProp, container, props);
     return container;
 }
-export const Container = props => createWrappedElement(tagName, props);
 export default {
     tagName,
-    update,
+    applyProp: applyProp,
     create,
 };

dist/internal/tags/index.d.ts

@@ -5,2 +5,2 @@ /// <reference types="pixi.js" />
 export declare function createDisplayObject(type: string, props: Props, internal?: InternalInstanceHandle): DisplayObject;
-export declare function updateDisplayObject(type: string, dp: DisplayObject, props: Props, internal?: InternalInstanceHandle): void;
+export declare function applyProp(type: string, dp: DisplayObject, propName: string, value: any): void;

dist/internal/tags/index.js

 import containerHandlers from './Container';
+import graphicsHandlers from './Graphics';
+import ropeHandlers from './Rope';
 import spriteHandlers from './Sprite';
 import textHandlers from './Text';
-function combineHandlers(...tagHandlers) {
-    const updatePropsMap = {};
-    const createMap = {};
-    for (const handler of tagHandlers) {
-        updatePropsMap[handler.tagName] = handler.update;
-        createMap[handler.tagName] = handler.create;
+function getHandler(tag) {
+    switch (tag) {
+        case containerHandlers.tagName:
+            return containerHandlers;
+        case spriteHandlers.tagName:
+            return spriteHandlers;
+        case ropeHandlers.tagName:
+            return ropeHandlers;
+        case graphicsHandlers.tagName:
+            return graphicsHandlers;
+        case textHandlers.tagName:
+            return textHandlers;
+        default:
+            throw Error(`Unknown tag ${tag}`);
     }
-    return { updatePropsMap, createMap };
 }
-const { updatePropsMap, createMap } = combineHandlers(containerHandlers, spriteHandlers, textHandlers);
 export function createDisplayObject(type, props, internal) {
-    const create = createMap[type];
-    if (!create) {
-        throw Error(`Unknown display object type ${type}`);
-    }
-    return create(props, internal);
+    return getHandler(type).create(props, internal);
 }
-export function updateDisplayObject(type, dp, props, internal) {
-    const update = updatePropsMap[type];
-    if (!update) {
-        throw Error(`Unknown display object type ${type}`);
-    }
-    update(dp, props, internal);
+export function applyProp(type, dp, propName, value) {
+    getHandler(type).applyProp(dp, propName, value);
 }

dist/internal/tags/prop-types.d.ts

@@ -19,1 +19,8 @@ export interface Point {
 }
+export interface SpriteBaseProps extends ContainerProps {
+    name?: string;
+    tint?: number;
+    scale?: Point;
+    anchor?: Point;
+    children?: any;
+}

dist/internal/tags/Sprite.d.ts

 /// <reference types="pixi.js" />
-/// <reference types="react" />
-import { DisplayObject, Sprite as PixiSprite } from 'pixi.js';
-import { StatelessComponent } from 'react';
+import { Sprite as PixiSprite, Texture } from 'pixi.js';
 import { Props } from '../common';
-import { ContainerProps, Point } from './prop-types';
-export interface SpriteProps extends ContainerProps {
-    image: string;
-    name?: string;
-    tint?: number;
-    scale?: Point;
-    anchor?: Point;
-    children?: any;
+import { SpriteBaseProps } from './prop-types';
+import { ApplyProp } from './util';
+export interface SpriteProps extends SpriteBaseProps {
+    image: string | Texture;
 }
-export declare const tagName = "pixiSprite";
-export declare function update(dp: DisplayObject, props: Props): void;
+export declare const tagName = "sprite";
+export declare function applyProp(sprite: PixiSprite, name: keyof SpriteProps, value: any): void;
 export declare function create(props: Props): PixiSprite;
-export declare const Sprite: StatelessComponent<SpriteProps>;
 declare const _default: {
     tagName: string;
-    update: typeof update;
+    applyProp: ApplyProp;
     create: typeof create;
 };
 export default _default;

dist/internal/tags/Sprite.js

 import { Sprite as PixiSprite, Texture } from 'pixi.js';
-import { createWrappedElement } from './createWrappedElement';
-import { copyProps } from './util';
-const manuallySetProps = ['image', 'children'];
-const copySpriteProps = copyProps(manuallySetProps);
-export const tagName = 'pixiSprite';
-export function update(dp, props) {
-    const sprite = dp;
-    const spriteProps = props;
-    if (spriteProps.image) {
-        sprite.texture = Texture.fromImage(spriteProps.image);
+import { applyProps } from './util';
+export const tagName = 'sprite';
+function isTexture(image) {
+    return typeof image !== 'string';
+}
+export function applyProp(sprite, name, value) {
+    if (name === 'image') {
+        if (value == null) {
+            sprite.texture = Texture.EMPTY;
+        }
+        else if (isTexture(value)) {
+            sprite.texture = value;
+        }
+        else {
+            sprite.texture = Texture.fromImage(value);
+        }
     }
-    copySpriteProps(sprite, spriteProps);
+    else if (name !== 'children' && value != null) {
+        sprite[name] = value;
+    }
 }
 export function create(props) {
     const spriteProps = props;
-    const sprite = PixiSprite.fromImage(spriteProps.image);
-    copySpriteProps(sprite, spriteProps);
+    let sprite;
+    if (isTexture(spriteProps.image)) {
+        sprite = new PixiSprite(spriteProps.image);
+    }
+    else {
+        sprite = PixiSprite.fromImage(spriteProps.image);
+    }
+    applyProps(applyProp, sprite, props);
     return sprite;
 }
-export const Sprite = props => createWrappedElement(tagName, props);
 export default {
     tagName,
-    update,
+    applyProp: applyProp,
     create,
 };

dist/internal/tags/Text.d.ts

 /// <reference types="pixi.js" />
-/// <reference types="react" />
-import { DisplayObject, Text as PixiText } from 'pixi.js';
-import { StatelessComponent } from 'react';
+import { Text as PixiText } from 'pixi.js';
 import { DisplayObjectProps } from './prop-types';
+import { ApplyProp } from './util';
 export interface TextPropsStyle {
@@ -40,11 +39,10 @@ align?: string;
 }
-export declare const tagName = "pixiText";
-export declare function update(dob: DisplayObject, props: TextProps): void;
+export declare const tagName = "text";
+export declare function applyProp(text: PixiText, name: keyof TextProps, value: any): void;
 export declare function create(props: TextProps): PixiText;
-export declare const Text: StatelessComponent<TextProps>;
 declare const _default: {
     tagName: string;
-    update: typeof update;
+    applyProp: ApplyProp;
     create: typeof create;
 };
 export default _default;

dist/internal/tags/Text.js

 import { Text as PixiText, TextStyle } from 'pixi.js';
-import * as PropTypes from 'prop-types';
-import { createWrappedElement } from './createWrappedElement';
-import { copyProps } from './util';
-const copyTextProps = copyProps(['text', 'style', 'children']);
-export const tagName = 'pixiText';
-export function update(dob, props) {
-    const text = dob;
-    const textProps = props;
-    if (textProps.style) {
-        text.style = new TextStyle(textProps.style);
+import { applyProps } from './util';
+export const tagName = 'text';
+export function applyProp(text, name, value) {
+    if (name === 'children') {
+        text.text = value || '';
     }
-    text.text = textProps.children || '';
-    copyTextProps(text, textProps);
+    else if (name === 'style') {
+        text.style = new TextStyle(value);
+    }
+    else {
+        text[name] = value;
+    }
 }
 export function create(props) {
     const text = new PixiText(props.children || '', props.style);
-    copyTextProps(text, props);
+    applyProps(applyProp, text, props);
     return text;
 }
-export const Text = props => createWrappedElement(tagName, props);
-Text.propTypes = {
-    style: PropTypes.object,
-    children: PropTypes.string,
-};
 export default {
     tagName,
-    update,
+    applyProp: applyProp,
     create,
 };

dist/internal/tags/util.d.ts

@@ -0,1 +1,4 @@
+import { Props } from '../common';
 export declare const copyProps: (manualProps: string[]) => (target: any, props: any) => void;
+export declare type ApplyProp = (target: any, name: string, value: any) => void;
+export declare function applyProps(applyProp: ApplyProp, target: any, props: Props): void;

dist/internal/tags/util.js

@@ -8,1 +8,8 @@ export const copyProps = (manualProps) => (target, props) => {
 };
+export function applyProps(applyProp, target, props) {
+    for (const key in props) {
+        if (props.hasOwnProperty(key)) {
+            applyProp(target, key, props[key]);
+        }
+    }
+}

package.json

 {
   "name": "@katis/react-pixi",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "browser": "dist/index.js",
@@ -12,3 +12,4 @@ "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "watch": "tsc -w"
   },
@@ -15,0 +16,0 @@ "devDependencies": {

readme.md

@@ -7,6 +7,6 @@ # React Pixi renderer
 
-```
+```tsx
 import * as React from 'react'
 import { Application } from 'pixi.js'
-import { render, Container, Sprite, Text } from '@katis/react-pixi'
+import { render, px } from '@katis/react-pixi'
 
@@ -16,6 +16,6 @@ class Player extends React.Component {
         return (
-            <Container position={this.props.position}>
-                <Sprite image="assets/player.png" />
-                <Text position={{x: 0, y: -20}}>Player</Text>
-            </Container>
+            <container position={this.props.position}>
+                <sprite image="assets/player.png" />
+                <text position={{x: 0, y: -20}}>Player</text>
+            </container>
         )
@@ -22,0 +22,0 @@ }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24430

55.49%

Number of package files

33

32%

Lines of code

667

70.59%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes