pixijs-react - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

lib/Container.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ContainerFactory = exports.PROPERTIES = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useContainer = _interopRequireDefault(require("./useContainer"));
+
+var PIXI = _interopRequireWildcard(require("pixi.js"));
+
+var _PixijsContainerContext = _interopRequireDefault(require("./context/PixijsContainerContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PROPERTIES = ['anchor', 'x', 'y', 'zIndex', 'interactive', 'buttonMode', 'width', 'height', 'scale', 'sortableChildren'];
+exports.PROPERTIES = PROPERTIES;
+
+const ContainerFactory = (constructor, properties) => props => {
+  const parent = (0, _useContainer.default)();
+  const [container, setContainer] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    if (parent) {
+      const container = new constructor();
+      parent.addChild(container);
+      setContainer(container);
+      return () => {
+        parent === null || parent === void 0 ? void 0 : parent.removeChild(container);
+        setContainer(null);
+      };
+    }
+  }, [parent]);
+
+  for (let key of properties) {
+    (0, _react.useEffect)(() => {
+      if (container && props[key] !== undefined) {
+        container[key] = props[key];
+      }
+    }, [container, props[key]]);
+  }
+
+  return _react.default.createElement(_PixijsContainerContext.default.Provider, {
+    value: container
+  }, container && props.children);
+};
+
+exports.ContainerFactory = ContainerFactory;
+const Container = ContainerFactory(PIXI.Container, PROPERTIES);
+var _default = Container;
+exports.default = _default;

lib/context/PixijsContainerContext.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _react.default.createContext(undefined);
+
+exports.default = _default;

lib/PixijsApp.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PROPERTIES = exports.PixijsAppContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var PIXI = _interopRequireWildcard(require("pixi.js"));
+
+var _PixijsContainerContext = _interopRequireDefault(require("./context/PixijsContainerContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PixijsAppContext = _react.default.createContext(undefined);
+
+exports.PixijsAppContext = PixijsAppContext;
+const PROPERTIES = ['resizeTo', 'backgroundColor', 'transparent'];
+exports.PROPERTIES = PROPERTIES;
+
+const PixijsApp = props => {
+  const {
+    resizeTo
+  } = props;
+  const [app, setApp] = (0, _react.useState)();
+  const viewRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    const params = {
+      view: viewRef.current
+    };
+    PROPERTIES.forEach(key => {
+      if (props[key]) params[key] = props[key];
+    });
+    const app = new PIXI.Application(params);
+    setApp(app);
+  }, []); // for (let key of PROPERTIES) {
+  //   useEffect(() => {
+  //     if (app && props[key] !== undefined) {
+  //       app[key] = props[key]
+  //       console.log(app[key])
+  //     }
+  //   }, [app, props[key]])
+  // }
+
+  return [_react.default.createElement("canvas", {
+    ref: viewRef,
+    key: "appcanvas"
+  }), _react.default.createElement(PixijsAppContext.Provider, {
+    value: app,
+    key: "appcontext"
+  }, _react.default.createElement(_PixijsContainerContext.default.Provider, {
+    value: app === null || app === void 0 ? void 0 : app.stage
+  }, app && props.children))];
+};
+
+var _default = PixijsApp;
+exports.default = _default;

lib/Sprite.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var PIXI = _interopRequireWildcard(require("pixi.js"));
+
+var _Container = require("./Container");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PROPERTIES = _Container.PROPERTIES.concat(['texture']);
+
+const Sprite = (0, _Container.ContainerFactory)(PIXI.Sprite, PROPERTIES);
+var _default = Sprite;
+exports.default = _default;

lib/Text.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var PIXI = _interopRequireWildcard(require("pixi.js"));
+
+var _Container = require("./Container");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PROPERTIES = _Container.PROPERTIES.concat(['text']);
+
+const Text = (0, _Container.ContainerFactory)(PIXI.Text, PROPERTIES);
+var _default = Text;
+exports.default = _default;

lib/useContainer.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _PixijsContainerContext = _interopRequireDefault(require("./context/PixijsContainerContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const useContainer = () => {
+  return (0, _react.useContext)(_PixijsContainerContext.default);
+};
+
+var _default = useContainer;
+exports.default = _default;

lib/useInterpolatedMovement.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _usePixijsApp = _interopRequireDefault(require("./usePixijsApp"));
+
+var _lerp = _interopRequireDefault(require("lerp"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const useLerpMovement = (targetX, targetY, speed = 0.2) => {
+  const [position, setPosition] = (0, _react.useState)([targetX, targetY]);
+  const [x, y] = position;
+  const app = (0, _usePixijsApp.default)();
+  (0, _react.useEffect)(() => {
+    if (x != targetX || y != targetY) {
+      const ticker = app.ticker;
+      let progress = 0;
+      const movement = [[x, targetX], [y, targetY]];
+      const journeyLength = Math.hypot(...movement.map(([s, e]) => s - e));
+
+      const update = () => {
+        progress += ticker.deltaTime;
+        let t = Math.min(progress * (speed / journeyLength), 1); // easy-in - easy-out
+
+        t = t * t * t * (t * (6 * t - 15) + 10);
+        setPosition(movement.map(([start, end]) => (0, _lerp.default)(start, end, t)));
+
+        if (t >= 1) {
+          ticker.remove(update);
+        }
+      };
+
+      ticker.add(update);
+      return () => ticker.remove(update);
+    }
+  }, [targetX, targetY]);
+  return position;
+};
+
+var _default = useLerpMovement;
+exports.default = _default;

lib/usePixijsApp.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _PixijsApp = require("./PixijsApp");
+
+const usePixijsApp = () => {
+  return (0, _react.useContext)(_PixijsApp.PixijsAppContext);
+};
+
+var _default = usePixijsApp;
+exports.default = _default;

package.json

 {
   "name": "pixijs-react",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "lib/index.js",
-  "repository": "[e-mail]:thiagohirata/pixijs-react.git",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thiagohirata/pixijs-react.git"
+  },
   "author": "Thiago Hirata <[e-mail]>",
@@ -11,2 +14,5 @@ "license": "MIT",
   },
+  "files": [
+    "lib/"
+  ],
   "dependencies": {
@@ -13,0 +19,0 @@ "lerp": "^1.0.3",

babel.config.js

-module.exports = function(api) {
-  // Cache the returned value forever and don't call this function again.
-  api.cache(true);
-
-  const config = {
-    presets: [
-      "@babel/preset-react",
-      "@babel/preset-typescript",
-      [
-        "@babel/preset-env",
-        {
-          targets: {
-            node: "current"
-          }
-        }
-      ]
-    ],
-    plugins: [
-      "minify-dead-code-elimination",
-      "@babel/plugin-syntax-dynamic-import",
-      "@babel/plugin-proposal-class-properties",
-      "@babel/plugin-proposal-object-rest-spread",
-      "@babel/plugin-proposal-optional-chaining"
-    ]
-  };
-
-  return config;
-};

src/Container.js

-import React, { useEffect, useState } from 'react'
-import useContainer from './useContainer'
-import * as PIXI from 'pixi.js'
-import PixijsContainerContext from './context/PixijsContainerContext'
-
-export const PROPERTIES = [
-  'anchor',
-  'x',
-  'y',
-  'zIndex',
-  'interactive',
-  'buttonMode',
-  'width',
-  'height',
-  'scale',
-  'sortableChildren',
-]
-
-export const ContainerFactory = (constructor, properties) => props => {
-  const parent = useContainer()
-  const [container, setContainer] = useState()
-
-  useEffect(() => {
-    if (parent) {
-      const container = new constructor()
-      parent.addChild(container)
-
-      setContainer(container)
-      return () => {
-        parent?.removeChild(container)
-        setContainer(null)
-      }
-    }
-  }, [parent])
-
-  for (let key of properties) {
-    useEffect(() => {
-      if (container && props[key] !== undefined) {
-        container[key] = props[key]
-      }
-    }, [container, props[key]])
-  }
-
-  return (
-    <PixijsContainerContext.Provider value={container}>{container && props.children}</PixijsContainerContext.Provider>
-  )
-}
-const Container = ContainerFactory(PIXI.Container, PROPERTIES)
-
-export default Container

src/context/PixijsContainerContext.js

-import React from 'react'
-
-export default React.createContext(undefined)

src/index.ts

-export { default as PixijsApp } from './PixijsApp'
-export { default as Sprite } from './Sprite'
-export { default as Container } from './Container'
-export { default as Text } from './Text'
-export { default as useContainer } from './useContainer'
-export { default as usePixijsApp } from './usePixijsApp'
-export { default as useInterpolatedMovement } from './useInterpolatedMovement'

src/PixijsApp.js

-import React, { useState, useEffect, useRef } from 'react'
-import * as PIXI from 'pixi.js'
-import PixijsContainerContext from './context/PixijsContainerContext'
-export const PixijsAppContext = React.createContext(undefined)
-
-export const PROPERTIES = ['resizeTo', 'backgroundColor', 'transparent']
-
-const PixijsApp = props => {
-  const { resizeTo } = props
-  const [app, setApp] = useState()
-  const viewRef = useRef()
-  useEffect(() => {
-    const params = {
-      view: viewRef.current,
-    }
-    PROPERTIES.forEach(key => {
-      if (props[key]) params[key] = props[key]
-    })
-    const app = new PIXI.Application(params)
-    setApp(app)
-  }, [])
-
-  // for (let key of PROPERTIES) {
-  //   useEffect(() => {
-  //     if (app && props[key] !== undefined) {
-  //       app[key] = props[key]
-  //       console.log(app[key])
-  //     }
-  //   }, [app, props[key]])
-  // }
-  return [
-    <canvas ref={viewRef} key="appcanvas" />,
-    <PixijsAppContext.Provider value={app} key="appcontext">
-      <PixijsContainerContext.Provider value={app?.stage}>{app && props.children}</PixijsContainerContext.Provider>
-    </PixijsAppContext.Provider>,
-  ]
-}
-
-export default PixijsApp

src/Sprite.js

-import * as PIXI from 'pixi.js'
-import { PROPERTIES as ContainerProperties, ContainerFactory } from './Container'
-
-const PROPERTIES = ContainerProperties.concat(['texture'])
-
-const Sprite = ContainerFactory(PIXI.Sprite, PROPERTIES)
-
-export default Sprite

src/Text.js

-import * as PIXI from 'pixi.js'
-import { PROPERTIES as ContainerProperties, ContainerFactory } from './Container'
-
-const PROPERTIES = ContainerProperties.concat(['text'])
-
-const Text = ContainerFactory(PIXI.Text, PROPERTIES)
-
-export default Text

src/useContainer.js

-import { useContext } from 'react'
-import PixijsContainerContext from './context/PixijsContainerContext'
-
-const useContainer = () => {
-  return useContext(PixijsContainerContext)
-}
-
-export default useContainer

src/useInterpolatedMovement.js

-import { useEffect, useState } from "react";
-import usePixijsApp from "./usePixijsApp";
-import lerp from "lerp";
-
-const useLerpMovement = (targetX, targetY, speed = 0.2) => {
-  const [position, setPosition] = useState([targetX, targetY]);
-  const [x, y] = position;
-  const app = usePixijsApp();
-
-  useEffect(() => {
-    if (x != targetX || y != targetY) {
-      const ticker = app.ticker;
-      let progress = 0;
-
-      const movement = [
-        [x, targetX],
-        [y, targetY]
-      ];
-      const journeyLength = Math.hypot(...movement.map(([s, e]) => s - e));
-      const rate = speed / journeyLength;
-      const update = () => {
-        progress += ticker.deltaTime;
-        let t = Math.min(progress * rate, 1);
-        // easy-in - easy-out
-        t = t * t * t * (t * (6 * t - 15) + 10);
-        setPosition(movement.map(([start, end]) => lerp(start, end, t)));
-        if (t >= 1) {
-          ticker.remove(update);
-        }
-      };
-      ticker.add(update);
-      return () => ticker.remove(update);
-    }
-  }, [targetX, targetY]);
-
-  return position;
-};
-
-export default useLerpMovement;

src/usePixijsApp.js

-import { useContext } from 'react'
-import { PixijsAppContext } from './PixijsApp'
-
-const usePixijsApp = () => {
-  return useContext(PixijsAppContext)
-}
-
-export default usePixijsApp

tsconfig.json

-{
-  "compilerOptions": {
-    "jsx": "react",
-    "esModuleInterop": true
-  }
-}

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.

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.

Improved metrics

Total package byte prevSize

14398

53.71%

Lines of code

242

6.61%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Number of package files

12

-20%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes