@miniplex/react
Version:
React glue for Miniplex.
240 lines (217 loc) • 8.73 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var id = require('@hmans/id');
var useConst = require('@hmans/use-const');
var core = require('@miniplex/core');
var React = require('react');
var useRerender = require('@hmans/use-rerender');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
/* https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a */
var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
var useIsomorphicLayoutEffect$2 = useIsomorphicLayoutEffect$1;
var useEntities = function useEntities(bucket) {
var rerender = useRerender.useRerender();
useIsomorphicLayoutEffect$2(function () {
bucket.onEntityAdded.addListener(rerender);
bucket.onEntityRemoved.addListener(rerender);
return function () {
bucket.onEntityAdded.removeListener(rerender);
bucket.onEntityRemoved.removeListener(rerender);
};
}, [rerender]);
useIsomorphicLayoutEffect$2(rerender, []);
return bucket.entities;
};
var useArchetype = function useArchetype(world) {
for (var _len = arguments.length, properties = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
properties[_key - 1] = arguments[_key];
}
return useEntities(world.archetype.apply(world, properties));
};
var mergeRefs = function mergeRefs(refs) {
return function (v) {
refs.forEach(function (ref) {
if (typeof ref === "function") ref(v);else if (!!ref) ref.current = v;
});
};
};
var _excluded = ["entities"],
_excluded2 = ["bucket"],
_excluded3 = ["components"];
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
var createComponents = function createComponents(world) {
var EntityContext = /*#__PURE__*/React.createContext(null);
var useCurrentEntity = function useCurrentEntity() {
return React.useContext(EntityContext);
};
var useArchetype$1 = function useArchetype$1() {
for (var _len = arguments.length, components = new Array(_len), _key = 0; _key < _len; _key++) {
components[_key] = arguments[_key];
}
return useArchetype.apply(void 0, [world].concat(components));
};
var RawEntity = function RawEntity(_ref) {
var givenChildren = _ref.children,
_ref$entity = _ref.entity,
givenEntity = _ref$entity === void 0 ? {} : _ref$entity,
As = _ref.as;
var entity = useConst.useConst(function () {
return givenEntity;
});
/* Add the entity to the bucket represented by this component if it isn't already part of it. */
useIsomorphicLayoutEffect(function () {
if (world.has(entity)) return;
world.add(entity);
return function () {
world.remove(entity);
};
}, [world, entity]);
var children = typeof givenChildren === "function" ? givenChildren(entity) : givenChildren;
return /*#__PURE__*/React__default["default"].createElement(EntityContext.Provider, {
value: entity
}, As ? /*#__PURE__*/React__default["default"].createElement(As, {
entity: entity
}, children) : children);
};
var Entity = /*#__PURE__*/React.memo(RawEntity);
var Entities = function Entities(_ref2) {
var entities = _ref2.entities,
props = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, entities.map(function (entity) {
return /*#__PURE__*/React__default["default"].createElement(Entity, _extends({
key: id.id(entity),
entity: entity
}, props));
}));
};
var RawBucket = function RawBucket(_ref3) {
var _bucket = _ref3.bucket,
props = _objectWithoutProperties(_ref3, _excluded2);
var source = typeof _bucket === "function" ? world.derive(_bucket) : _bucket;
var entities = useEntities(source);
return /*#__PURE__*/React__default["default"].createElement(Entities, _extends({
entities: entities
}, props));
};
var Bucket = /*#__PURE__*/React.memo(RawBucket);
var Archetype = function Archetype(_ref4) {
var components = _ref4.components,
props = _objectWithoutProperties(_ref4, _excluded3);
return /*#__PURE__*/React__default["default"].createElement(Bucket, _extends({
bucket: core.archetype.apply(void 0, _toConsumableArray(Array.isArray(components) ? components : [components]))
}, props));
};
var Component = function Component(props) {
var entity = React.useContext(EntityContext);
if (!entity) {
throw new Error("<Component> must be a child of <Entity>");
}
/* Handle creation and removal of component with a value prop */
useIsomorphicLayoutEffect(function () {
if (props.value === undefined) return;
world.addComponent(entity, props.name, props.value);
return function () {
world.removeComponent(entity, props.name);
};
}, [entity, props.name]);
/* Handle updates to existing component */
useIsomorphicLayoutEffect(function () {
if (props.value === undefined) return;
world.setComponent(entity, props.name, props.value);
}, [entity, props.name, props.value]);
/* Handle setting of child value */
if (props.children) {
var child = React__default["default"].Children.only(props.children);
var children = /*#__PURE__*/React__default["default"].cloneElement(child, {
ref: mergeRefs([child.ref, function (object) {
if (object) {
world.addComponent(entity, props.name, object);
} else {
world.removeComponent(entity, props.name);
}
}])
});
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
}
return null;
};
return {
Entity: Entity,
Entities: Entities,
Bucket: Bucket,
Archetype: Archetype,
Component: Component,
useCurrentEntity: useCurrentEntity,
useArchetype: useArchetype$1
};
};
exports.createComponents = createComponents;
exports.useArchetype = useArchetype;
exports.useEntities = useEntities;