@haiku/player
Version:
Haiku Player is a JavaScript library for building user interfaces
1,277 lines (1,256 loc) • 418 kB
JavaScript
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.HaikuDOMPlayer = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
// shim for using process in browser
var process = module.exports = {};
// cached from whatever global is present so that test runners that stub it
// don't break things. But we need to wrap it in a try catch in case it is
// wrapped in strict mode code which doesn't define any globals. It's inside a
// function because try/catches deoptimize in certain engines.
var cachedSetTimeout;
var cachedClearTimeout;
function defaultSetTimout() {
throw new Error('setTimeout has not been defined');
}
function defaultClearTimeout () {
throw new Error('clearTimeout has not been defined');
}
(function () {
try {
if (typeof setTimeout === 'function') {
cachedSetTimeout = setTimeout;
} else {
cachedSetTimeout = defaultSetTimout;
}
} catch (e) {
cachedSetTimeout = defaultSetTimout;
}
try {
if (typeof clearTimeout === 'function') {
cachedClearTimeout = clearTimeout;
} else {
cachedClearTimeout = defaultClearTimeout;
}
} catch (e) {
cachedClearTimeout = defaultClearTimeout;
}
} ())
function runTimeout(fun) {
if (cachedSetTimeout === setTimeout) {
//normal enviroments in sane situations
return setTimeout(fun, 0);
}
// if setTimeout wasn't available but was latter defined
if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
cachedSetTimeout = setTimeout;
return setTimeout(fun, 0);
}
try {
// when when somebody has screwed with setTimeout but no I.E. maddness
return cachedSetTimeout(fun, 0);
} catch(e){
try {
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
return cachedSetTimeout.call(null, fun, 0);
} catch(e){
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
return cachedSetTimeout.call(this, fun, 0);
}
}
}
function runClearTimeout(marker) {
if (cachedClearTimeout === clearTimeout) {
//normal enviroments in sane situations
return clearTimeout(marker);
}
// if clearTimeout wasn't available but was latter defined
if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
cachedClearTimeout = clearTimeout;
return clearTimeout(marker);
}
try {
// when when somebody has screwed with setTimeout but no I.E. maddness
return cachedClearTimeout(marker);
} catch (e){
try {
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
return cachedClearTimeout.call(null, marker);
} catch (e){
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
// Some versions of I.E. have different rules for clearTimeout vs setTimeout
return cachedClearTimeout.call(this, marker);
}
}
}
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
if (!draining || !currentQueue) {
return;
}
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = runTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
runClearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
runTimeout(drainQueue);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.prependListener = noop;
process.prependOnceListener = noop;
process.listeners = function (name) { return [] }
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
},{}],2:[function(_dereq_,module,exports){
"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var interactionModes_1 = _dereq_("./helpers/interactionModes");
var DEFAULTS = {
onHaikuComponentWillInitialize: null,
onHaikuComponentDidMount: null,
onHaikuComponentWillMount: null,
onHaikuComponentDidInitialize: null,
onHaikuComponentWillUnmount: null,
options: {
seed: null,
automount: true,
autoplay: true,
forceFlush: false,
freeze: false,
loop: false,
frame: null,
clock: {},
sizing: null,
alwaysComputeSizing: true,
preserve3d: 'auto',
contextMenu: 'enabled',
position: 'relative',
overflowX: null,
overflowY: null,
overflow: null,
mixpanel: '6f31d4f99cf71024ce27c3e404a79a61',
useWebkitPrefix: void (0),
interactionMode: interactionModes_1.InteractionMode.LIVE,
},
states: null,
eventHandlers: null,
timelines: null,
vanities: null,
children: null,
placeholder: null,
};
function seed() {
return Math.random().toString(36).slice(2);
}
function build() {
var argums = [];
for (var _i = 0; _i < arguments.length; _i++) {
argums[_i] = arguments[_i];
}
var config = {
onHaikuComponentWillInitialize: null,
onHaikuComponentDidMount: null,
onHaikuComponentDidInitialize: null,
onHaikuComponentWillUnmount: null,
options: null,
states: null,
eventHandlers: null,
timelines: null,
template: null,
vanities: null,
children: null,
placeholder: null,
};
var args = argums.slice();
args.unshift(DEFAULTS);
args.forEach(function (incoming) {
if (!incoming || typeof incoming !== 'object') {
return;
}
if (incoming.onHaikuComponentWillInitialize) {
config.onHaikuComponentWillInitialize = incoming.onHaikuComponentWillInitialize;
}
if (incoming.onHaikuComponentDidMount) {
config.onHaikuComponentDidMount = incoming.onHaikuComponentDidMount;
}
if (incoming.onHaikuComponentDidInitialize) {
config.onHaikuComponentDidInitialize = incoming.onHaikuComponentDidInitialize;
}
if (incoming.onHaikuComponentWillUnmount) {
config.onHaikuComponentWillUnmount = incoming.onHaikuComponentWillUnmount;
}
if (incoming.options) {
config.options = __assign({}, config.options, incoming.options);
}
for (var key in incoming) {
if (incoming[key] !== undefined && DEFAULTS.options.hasOwnProperty(key)) {
config.options[key] = incoming[key];
}
}
if (incoming.states) {
config.states = __assign({}, config.states, incoming.states);
}
if (incoming.initialStates && typeof incoming.initialStates === 'object') {
config.states = __assign({}, config.states, incoming.initialStates);
}
if (incoming.eventHandlers) {
config.eventHandlers = __assign({}, config.eventHandlers, incoming.eventHandlers);
}
if (incoming.timelines) {
config.timelines = __assign({}, config.timelines, incoming.timelines);
}
if (incoming.vanities) {
config.vanities = __assign({}, config.vanities, incoming.vanities);
}
if (incoming.children) {
config.children = incoming.children;
}
if (incoming.placeholder) {
config.placeholder = incoming.placeholder;
}
});
if (config.options.overflow && (config.options.overflowX || config.options.overflowY)) {
console.warn('[haiku player] `overflow` overrides `overflowY`/`overflowX`');
config.options.overflowX = null;
config.options.overflowY = null;
}
return config;
}
exports.default = {
build: build,
seed: seed,
DEFAULTS: DEFAULTS,
};
},{"./helpers/interactionModes":34}],3:[function(_dereq_,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var HaikuGlobal_1 = _dereq_("./HaikuGlobal");
var SimpleEventEmitter_1 = _dereq_("./helpers/SimpleEventEmitter");
var assign_1 = _dereq_("./vendor/assign");
var raf_1 = _dereq_("./vendor/raf");
var NUMBER = 'number';
var DEFAULT_OPTIONS = {
frameDuration: 16.666,
frameDelay: 16.666,
marginOfErrorForDelta: 1.0,
};
if (!HaikuGlobal_1.default.HaikuGlobalAnimationHarness) {
HaikuGlobal_1.default.HaikuGlobalAnimationHarness = {};
HaikuGlobal_1.default.HaikuGlobalAnimationHarness.queue = [];
HaikuGlobal_1.default.HaikuGlobalAnimationHarness.frame = function HaikuGlobalAnimationHarnessFrame() {
var queue = HaikuGlobal_1.default.HaikuGlobalAnimationHarness.queue;
var length = queue.length;
for (var i = 0; i < length; i++) {
queue[i]();
}
HaikuGlobal_1.default.HaikuGlobalAnimationHarness.raf = raf_1.default.request(HaikuGlobal_1.default.HaikuGlobalAnimationHarness.frame);
};
HaikuGlobal_1.default.HaikuGlobalAnimationHarness.cancel = function HaikuGlobalAnimationHarnessCancel() {
if (HaikuGlobal_1.default.HaikuGlobalAnimationHarness.raf) {
raf_1.default.cancel(HaikuGlobal_1.default.HaikuGlobalAnimationHarness.raf);
}
};
HaikuGlobal_1.default.HaikuGlobalAnimationHarness.frame();
}
function HaikuClock(tickables, component, options) {
SimpleEventEmitter_1.default.create(this);
this._tickables = tickables;
this._component = component;
this.assignOptions(options);
this._isRunning = false;
this._reinitialize();
HaikuGlobal_1.default.HaikuGlobalAnimationHarness.queue.push(this.run.bind(this));
this.GLOBAL_ANIMATION_HARNESS = HaikuGlobal_1.default.HaikuGlobalAnimationHarness;
this._entityIndex = HaikuClock['clocks'].push(this) - 1;
}
exports.default = HaikuClock;
HaikuClock['clocks'] = [];
HaikuGlobal_1.default['HaikuClock'] = HaikuClock;
HaikuClock.prototype._reinitialize = function _reinitialize() {
this._numLoopsRun = 0;
this._localFramesElapsed = 0;
this._localTimeElapsed = 0;
this._deltaSinceLastTick = 0;
this._localExplicitlySetTime = null;
return this;
};
HaikuClock.prototype.addTickable = function addTickable(tickable) {
this._tickables.push(tickable);
return this;
};
HaikuClock.prototype.assignOptions = function assignOptions(options) {
this.options = assign_1.default(this.options || {}, DEFAULT_OPTIONS, options || {});
return this;
};
HaikuClock.prototype.run = function run() {
if (this.isRunning()) {
if (this._isTimeControlled()) {
this.tick();
}
else {
this._numLoopsRun++;
var prevTime = this._localTimeElapsed;
var nextTime = prevTime + this.options.frameDuration;
var deltaSinceLastTick = nextTime - prevTime + this._deltaSinceLastTick;
if (deltaSinceLastTick >=
this.options.frameDelay - this.options.marginOfErrorForDelta) {
this.tick();
this._localFramesElapsed++;
this._localTimeElapsed = nextTime;
this._deltaSinceLastTick = 0;
}
else {
this._deltaSinceLastTick = deltaSinceLastTick;
}
}
}
return this;
};
HaikuClock.prototype.tick = function tick() {
for (var i = 0; i < this._tickables.length; i++) {
this._tickables[i].performTick();
}
return this;
};
HaikuClock.prototype.getTime = function getTime() {
return this.getExplicitTime();
};
HaikuClock.prototype.setTime = function setTime(time) {
this._localExplicitlySetTime = parseInt(time || 0, 10);
return this;
};
HaikuClock.prototype.getFPS = function getFPS() {
return Math.round(1000 / this.options.frameDuration);
};
HaikuClock.prototype.getExplicitTime = function getExplicitTime() {
if (this._isTimeControlled()) {
return this.getControlledTime();
}
return this.getRunningTime();
};
HaikuClock.prototype.getControlledTime = function getControlledTime() {
return this._localExplicitlySetTime;
};
HaikuClock.prototype._isTimeControlled = function _isTimeControlled() {
return typeof this._localExplicitlySetTime === NUMBER;
};
HaikuClock.prototype.getRunningTime = function getRunningTime() {
return this._localTimeElapsed;
};
HaikuClock.prototype.isRunning = function isRunning() {
return this._isRunning;
};
HaikuClock.prototype.start = function start() {
this._isRunning = true;
return this;
};
HaikuClock.prototype.stop = function stop() {
this._isRunning = false;
return this;
};
HaikuClock.prototype.getFrameDuration = function getFrameDuration() {
return this.options.frameDuration;
};
},{"./HaikuGlobal":6,"./helpers/SimpleEventEmitter":18,"./vendor/assign":96,"./vendor/raf":148}],4:[function(_dereq_,module,exports){
"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var Config_1 = _dereq_("./Config");
var HaikuGlobal_1 = _dereq_("./HaikuGlobal");
var HaikuTimeline_1 = _dereq_("./HaikuTimeline");
var addElementToHashTable_1 = _dereq_("./helpers/addElementToHashTable");
var applyPropertyToElement_1 = _dereq_("./helpers/applyPropertyToElement");
var clone_1 = _dereq_("./helpers/clone");
var consoleErrorOnce_1 = _dereq_("./helpers/consoleErrorOnce");
var cssQueryList_1 = _dereq_("./helpers/cssQueryList");
var interactionModes_1 = _dereq_("./helpers/interactionModes");
var isMutableProperty_1 = _dereq_("./helpers/isMutableProperty");
var manaFlattenTree_1 = _dereq_("./helpers/manaFlattenTree");
var scopifyElements_1 = _dereq_("./helpers/scopifyElements");
var SimpleEventEmitter_1 = _dereq_("./helpers/SimpleEventEmitter");
var upgradeBytecodeInPlace_1 = _dereq_("./helpers/upgradeBytecodeInPlace");
var initializeComponentTree_1 = _dereq_("./helpers/initializeComponentTree");
var Layout3D_1 = _dereq_("./Layout3D");
var ValueBuilder_1 = _dereq_("./ValueBuilder");
var assign_1 = _dereq_("./vendor/assign");
var pkg = _dereq_('./../package.json');
var PLAYER_VERSION = pkg.version;
var STRING_TYPE = 'string';
var OBJECT_TYPE = 'object';
var HAIKU_ID_ATTRIBUTE = 'haiku-id';
var DEFAULT_TIMELINE_NAME = 'Default';
function HaikuComponent(bytecode, context, config, metadata) {
var _this = this;
if (!bytecode) {
throw new Error('Empty bytecode not allowed');
}
if (!bytecode.template) {
throw new Error('Bytecode must define template');
}
if (!context) {
throw new Error('Component requires a context');
}
if (!config.options) {
throw new Error('Config options required');
}
if (!config.options.seed) {
throw new Error('Seed value must be provided');
}
if (!bytecode.timelines) {
bytecode.timelines = {};
}
SimpleEventEmitter_1.default.create(this);
this.PLAYER_VERSION = PLAYER_VERSION;
this.emit('haikuComponentWillInitialize', this);
if (config.onHaikuComponentWillInitialize) {
config.onHaikuComponentWillInitialize(this);
}
if (!config.options.hotEditingMode) {
this._bytecode = clone_1.default(bytecode);
}
else {
this._bytecode = bytecode;
}
upgradeBytecodeInPlace_1.default(this._bytecode, {
referenceUniqueness: (config.options.hotEditingMode)
? void (0)
: Math.random().toString(36).slice(2),
});
this._context = context;
this.cache = {};
this._builder = new ValueBuilder_1.default(this);
this._states = {};
this.state = {};
this._stateChanges = {};
this._anyStateChange = false;
this._eventsFired = {};
this._anyEventChange = false;
this.assignConfig(config);
this._metadata = metadata || {};
this._timelineInstances = {};
this._mutableTimelines = undefined;
this._hydrateMutableTimelines();
this._flatManaTree = [];
if (!this._bytecode.template.attributes[HAIKU_ID_ATTRIBUTE]) {
console.warn('[haiku player] bytecode template has no id');
}
assertTemplate(this._bytecode.template);
if (!config.options.hotEditingMode) {
this._template = cloneTemplate(this._bytecode.template);
}
else {
this._template = this._bytecode.template;
}
this._needsFullFlush = false;
this._alwaysFlush = false;
this._lastTemplateExpansion = null;
this._lastDeltaPatches = null;
this._matchedElementCache = {};
this._renderScopes = {};
this._doesEmitEventsVerbosely = false;
this._frameEventListeners = {};
this._nestedComponentElements = {};
this._hashTableOfIdsToElements = {};
this._registeredElementEventListeners = {};
this._horizonElements = {};
this._controlFlowData = {};
this.on('timeline:tick', function (timelineName, timelineFrame, timelineTime) {
if (_this._frameEventListeners[timelineName]) {
if (_this._frameEventListeners[timelineName][timelineFrame]) {
for (var i = 0; i < _this._frameEventListeners[timelineName][timelineFrame].length; i++) {
_this._frameEventListeners[timelineName][timelineFrame][i](timelineFrame, timelineTime);
}
}
}
});
this.emit('haikuComponentDidInitialize', this);
if (config.onHaikuComponentDidInitialize) {
config.onHaikuComponentDidInitialize(this);
}
this._isDeactivated = false;
this._isSleeping = false;
this._entityIndex = HaikuComponent['components'].push(this) - 1;
}
exports.default = HaikuComponent;
HaikuComponent['PLAYER_VERSION'] = PLAYER_VERSION;
HaikuComponent['components'] = [];
HaikuGlobal_1.default['HaikuComponent'] = HaikuComponent;
HaikuComponent.prototype._markHorizonElement = function _markHorizonElement(virtualElement) {
if (virtualElement && virtualElement.attributes) {
var flexId = virtualElement.attributes[HAIKU_ID_ATTRIBUTE] || virtualElement.attributes.id;
if (flexId) {
this._horizonElements[flexId] = virtualElement;
}
}
};
HaikuComponent.prototype._isHorizonElement = function _isHorizonElement(virtualElement) {
if (virtualElement && virtualElement.attributes) {
var flexId = virtualElement.attributes[HAIKU_ID_ATTRIBUTE] || virtualElement.attributes.id;
return !!this._horizonElements[flexId];
}
return false;
};
HaikuComponent.prototype._getRealElementsAtId = function _getRealElementsAtId(flexId) {
if (!this._hashTableOfIdsToElements[flexId]) {
return [];
}
return this._hashTableOfIdsToElements[flexId];
};
HaikuComponent.prototype._addElementToHashTable = function _addElementToHashTable(realElement, virtualElement) {
addElementToHashTable_1.default(this._hashTableOfIdsToElements, realElement, virtualElement);
return this;
};
HaikuComponent.prototype._didElementRenderSurrogate = function _didElementRenderSurrogate(virtualElement, surrogatePlacementKey, surrogateObject) {
if (!virtualElement) {
return false;
}
if (!virtualElement.attributes) {
return false;
}
var flexId = virtualElement.attributes['haiku-id'] || virtualElement.attributes.id;
if (!flexId) {
return false;
}
if (!this._controlFlowData[flexId]) {
return false;
}
if (!this._controlFlowData[flexId].renderedSurrogates) {
return false;
}
return this._controlFlowData[flexId].renderedSurrogates[surrogatePlacementKey] === surrogateObject;
};
HaikuComponent.prototype._markElementSurrogateAsRendered = function _markElementSurrogateAsRendered(virtualElement, surrogatePlacementKey, surrogateObject) {
var flexId = virtualElement && virtualElement.attributes && (virtualElement.attributes['haiku-id'] || virtualElement.attributes.id);
if (flexId) {
if (!this._controlFlowData[flexId]) {
this._controlFlowData[flexId] = {};
}
if (!this._controlFlowData[flexId].renderedSurrogates) {
this._controlFlowData[flexId].renderedSurrogates = {};
}
this._controlFlowData[flexId].renderedSurrogates[surrogatePlacementKey] = surrogateObject;
}
};
HaikuComponent.prototype.callRemount = function _callRemount(incomingConfig, skipMarkForFullFlush) {
this.emit('haikuComponentWillMount', this);
if (this.config.onHaikuComponentWillMount) {
this.config.onHaikuComponentWillMount(this);
}
if (incomingConfig) {
this.assignConfig(incomingConfig);
}
if (!skipMarkForFullFlush) {
this._markForFullFlush();
this.clearCaches();
}
var timelineInstances = this.getTimelines();
for (var timelineName in timelineInstances) {
var timelineInstance = timelineInstances[timelineName];
if (this.config.options.autoplay) {
if (timelineName === DEFAULT_TIMELINE_NAME) {
timelineInstance.play({ skipMarkForFullFlush: skipMarkForFullFlush });
}
}
else {
timelineInstance.pause();
}
}
this._context.contextMount();
this.emit('haikuComponentDidMount', this);
if (this.config.onHaikuComponentDidMount) {
this.config.onHaikuComponentDidMount(this);
}
};
HaikuComponent.prototype.callUnmount = function _callUnmount(incomingConfig) {
if (incomingConfig) {
this.assignConfig(incomingConfig);
}
var timelineInstances = this.getTimelines();
for (var timelineName in timelineInstances) {
var timelineInstance = timelineInstances[timelineName];
timelineInstance.pause();
}
this._context.contextUnmount();
this.emit('haikuComponentWillUnmount', this);
if (this.config.onHaikuComponentWillUnmount) {
this.config.onHaikuComponentWillUnmount(this);
}
};
HaikuComponent.prototype.assignConfig = function _assignConfig(incomingConfig) {
this.config = Config_1.default.build(this.config || {}, incomingConfig || {});
this._context.assignConfig(this.config, { skipComponentAssign: true });
for (var timelineName in this._timelineInstances) {
var timelineInstance = this._timelineInstances[timelineName];
timelineInstance.assignOptions(this.config.options);
}
bindStates(this._states, this, this.config.states);
bindEventHandlers(this, this.config.eventHandlers);
assign_1.default(this._bytecode.timelines, this.config.timelines);
return this;
};
HaikuComponent.prototype.set = function set(key, value) {
this.state[key] = value;
return this;
};
HaikuComponent.prototype.get = function get(key) {
return this.state[key];
};
HaikuComponent.prototype.setState = function setState(states) {
if (!states) {
return this;
}
if (typeof states !== 'object') {
return this;
}
for (var key in states) {
this.set(key, states[key]);
}
return this;
};
HaikuComponent.prototype.getStates = function getStates() {
return this.state;
};
HaikuComponent.prototype.clearCaches = function clearCaches(options) {
this._states = {};
if (!options || (options && options.clearStates !== false)) {
bindStates(this._states, this, this.config.states);
}
if (options && options.clearPreviouslyRegisteredEventListeners) {
this.clearRegisteredElementEventListeners();
}
if (!options || (options && options.clearEventHandlers !== false)) {
bindEventHandlers(this, this.config.eventHandlers);
}
this._stateChanges = {};
this._anyStateChange = false;
this._eventsFired = {};
this._anyEventChange = false;
this._needsFullFlush = false;
this._lastTemplateExpansion = null;
this._lastDeltaPatches = null;
this._renderScopes = {};
this._controlFlowData = {};
this._rehydrateFlatManaTree();
this._matchedElementCache = {};
this._clearDetectedEventsFired();
this._clearDetectedInputChanges();
this._builder.clearCaches(options);
this._hydrateMutableTimelines();
this.cache = {};
if (this._bytecode.timelines) {
for (var timelineName in this._bytecode.timelines) {
delete this._bytecode.timelines[timelineName].__max;
}
}
return this;
};
HaikuComponent.prototype.getClock = function getClock() {
return this._context.getClock();
};
HaikuComponent.prototype.getTimelines = function getTimelines() {
return this._fetchTimelines();
};
HaikuComponent.prototype._fetchTimelines = function _fetchTimelines() {
var names = Object.keys(this._bytecode.timelines);
for (var i = 0; i < names.length; i++) {
var name_1 = names[i];
if (!name_1) {
continue;
}
var descriptor = this._getTimelineDescriptor(name_1);
var existing = this._timelineInstances[name_1];
if (!existing) {
this._timelineInstances[name_1] = new HaikuTimeline_1.default(this, name_1, descriptor, this.config.options);
}
}
return this._timelineInstances;
};
HaikuComponent.prototype.getTimeline = function getTimeline(name) {
return this.getTimelines()[name];
};
HaikuComponent.prototype.getDefaultTimeline = function getDefaultTimeline() {
var timelines = this.getTimelines();
return timelines[DEFAULT_TIMELINE_NAME];
};
HaikuComponent.prototype.getActiveTimelines = function getActiveTimelines() {
var activeTimelines = {};
var timelines = this.getTimelines();
for (var timelineName in timelines) {
var timelineInstance = timelines[timelineName];
if (timelineInstance.isActive()) {
activeTimelines[timelineName] = timelineInstance;
}
}
return activeTimelines;
};
HaikuComponent.prototype.stopAllTimelines = function stopAllTimelines() {
for (var timelineName in this._timelineInstances) {
this.stopTimeline(timelineName);
}
};
HaikuComponent.prototype.startAllTimelines = function startAllTimelines() {
for (var timelineName in this._timelineInstances) {
this.startTimeline(timelineName);
}
};
HaikuComponent.prototype.startTimeline = function startTimeline(timelineName) {
var time = this._context.clock.getExplicitTime();
var descriptor = this._getTimelineDescriptor(timelineName);
var existing = this._timelineInstances[timelineName];
if (existing) {
existing.start(time, descriptor);
}
else {
var fresh = new HaikuTimeline_1.default(this, timelineName, descriptor, this.config.options);
fresh.start(time, descriptor);
this._timelineInstances[timelineName] = fresh;
}
};
HaikuComponent.prototype.stopTimeline = function startTimeline(timelineName) {
var time = this._context.clock.getExplicitTime();
var descriptor = this._getTimelineDescriptor(timelineName);
var existing = this._timelineInstances[timelineName];
if (existing) {
existing.stop(time, descriptor);
}
};
HaikuComponent.prototype._getTimelineDescriptor = function _getTimelineDescriptor(timelineName) {
return this._bytecode.timelines[timelineName];
};
HaikuComponent.prototype._getInjectables = function _getInjectables(element) {
var injectables = {};
assign_1.default(injectables, this._builder._getSummonablesSchema(element));
for (var key in this._states) {
var type = this._states[key].type;
if (!type) {
type = typeof this._states[key];
}
injectables[key] = type;
}
return injectables;
};
HaikuComponent.prototype._getTopLevelElement = function _getTopLevelElement() {
return this._template;
};
HaikuComponent.prototype.deactivate = function deactivate() {
this._isDeactivated = true;
return this;
};
HaikuComponent.prototype.isDeactivated = function isDeactivated() {
return this._isDeactivated;
};
HaikuComponent.prototype.sleepOn = function sleepOn() {
this._isSleeping = true;
return this;
};
HaikuComponent.prototype.sleepOff = function sleepOff() {
this._isSleeping = false;
return this;
};
HaikuComponent.prototype.isSleeping = function isSleeping() {
return this._isSleeping;
};
HaikuComponent.prototype.clearRegisteredElementEventListeners = function clearRegisteredElementEventListeners() {
for (var flexId in this._registeredElementEventListeners) {
for (var eventName in this._registeredElementEventListeners[flexId]) {
var _a = this._registeredElementEventListeners[flexId][eventName], target = _a.target, handler = _a.handler;
if (target && handler && this._context._renderer.removeListener) {
this._context._renderer.removeListener(target, handler, eventName);
}
delete this._registeredElementEventListeners[flexId][eventName];
}
}
this._frameEventListeners = {};
};
HaikuComponent.prototype.hasRegisteredListenerOnElement = function hasRegisteredListenerOnElement(virtualElement, eventName) {
var flexId = virtualElement.attributes[HAIKU_ID_ATTRIBUTE] || virtualElement.attributes.id;
if (!flexId) {
return false;
}
return this._registeredElementEventListeners[flexId] && this._registeredElementEventListeners[flexId][eventName];
};
HaikuComponent.prototype.markDidRegisterListenerOnElement = function markDidRegisterListenerOnElement(virtualElement, domElement, eventName, listenerFunction) {
var flexId = virtualElement.attributes[HAIKU_ID_ATTRIBUTE] || virtualElement.attributes.id;
if (!flexId) {
return this;
}
if (!this._registeredElementEventListeners[flexId]) {
this._registeredElementEventListeners[flexId] = {};
}
this._registeredElementEventListeners[flexId][eventName] = {
handler: listenerFunction,
target: domElement,
};
return this;
};
HaikuComponent.prototype.dump = function dump() {
var metadata = this.getBytecodeMetadata();
return metadata.relpath + ":" + this.getComponentId() + "[" + this._entityIndex + "]";
};
HaikuComponent.prototype.getComponentId = function getComponentId() {
return this._bytecode.template.attributes[HAIKU_ID_ATTRIBUTE];
};
HaikuComponent.prototype.getBytecodeMetadata = function getBytecodeMetadata() {
return this._bytecode.metadata;
};
HaikuComponent.prototype.getAddressableProperties = function getAddressableProperties(out) {
var _this = this;
if (out === void 0) { out = {}; }
if (!this._bytecode.states) {
return out;
}
var _loop_1 = function (name_2) {
var state = this_1._bytecode.states[name_2];
out[name_2] = {
name: name_2,
type: 'state',
prefix: name_2,
suffix: undefined,
fallback: state.value,
typedef: state.type,
mock: state.mock,
target: this_1,
value: function () {
return _this.state[name_2];
},
};
};
var this_1 = this;
for (var name_2 in this._bytecode.states) {
_loop_1(name_2);
}
return out;
};
function cloneTemplate(mana) {
if (!mana) {
return mana;
}
if (typeof mana === STRING_TYPE) {
return mana;
}
var out = {
elementName: mana.elementName,
attributes: null,
children: null,
};
if (mana.attributes) {
out.attributes = {};
for (var key in mana.attributes) {
if (mana.attributes[key] && typeof mana.attributes[key] === 'object') {
out.attributes[key] = {};
for (var subkey in mana.attributes[key]) {
out.attributes[key][subkey] = mana.attributes[key][subkey];
}
}
else {
out.attributes[key] = mana.attributes[key];
}
}
}
if (mana.children) {
out.children = [];
for (var i = 0; i < mana.children.length; i++) {
out.children[i] = cloneTemplate(mana.children[i]);
}
}
return out;
}
function assertTemplate(template) {
if (!template) {
throw new Error('Empty template not allowed');
}
if (typeof template === OBJECT_TYPE) {
if (!template.elementName) {
console.warn('[haiku player] warning: saw unexpected bytecode template format');
}
return template;
}
throw new Error('Unknown bytecode template format');
}
function bindEventHandlers(component, extraEventHandlers) {
var allEventHandlers = assign_1.default({}, component._bytecode.eventHandlers, extraEventHandlers);
for (var selector in allEventHandlers) {
var handlerGroup = allEventHandlers[selector];
for (var eventName in handlerGroup) {
var eventHandlerDescriptor = handlerGroup[eventName];
bindEventHandler(component, eventHandlerDescriptor, selector, eventName);
}
}
}
function bindEventHandler(component, eventHandlerDescriptor, selector, eventName) {
if (eventHandlerDescriptor.original) {
eventHandlerDescriptor.handler = eventHandlerDescriptor.original;
}
eventHandlerDescriptor.original = eventHandlerDescriptor.handler;
eventHandlerDescriptor.handler = function _wrappedEventHandler(event) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
if (interactionModes_1.isPreviewMode(component.config.options.interactionMode)) {
component._anyEventChange = true;
if (!component._eventsFired[selector]) {
component._eventsFired[selector] = {};
}
component._eventsFired[selector][eventName] =
event || true;
try {
(_a = eventHandlerDescriptor.original).call.apply(_a, [component, event].concat(args));
}
catch (exception) {
consoleErrorOnce_1.default(exception);
return 1;
}
}
var _a;
};
}
function typecheckStateSpec(stateSpec, stateSpecName) {
if (stateSpec.type === 'any' ||
stateSpec.type === '*' ||
stateSpec.type === undefined ||
stateSpec.type === null) {
return void 0;
}
if (stateSpec.type === 'event' || stateSpec.type === 'listener') {
if (typeof stateSpec.value !== 'function' &&
stateSpec.value !== null &&
stateSpec.value !== undefined) {
throw new Error('Property value `' +
stateSpecName +
'` must be an event listener function');
}
return void 0;
}
if (stateSpec.type === 'array') {
if (!Array.isArray(stateSpec.value)) {
throw new Error('Property value `' + stateSpecName + '` must be an array');
}
}
else if (stateSpec.type === 'object') {
if (stateSpec.value && typeof stateSpec.value !== 'object') {
throw new Error('Property value `' + stateSpecName + '` must be an object');
}
}
else {
if (typeof stateSpec.value !== stateSpec.type) {
throw new Error('Property value `' + stateSpecName + '` must be a `' + stateSpec.type + '`');
}
}
}
function bindStates(statesTargetObject, component, extraStates) {
var allStates = assign_1.default({}, component._bytecode.states, extraStates);
for (var stateSpecName in allStates) {
var stateSpec = allStates[stateSpecName];
if (stateSpec.value === undefined) {
throw new Error('Property `' +
stateSpecName +
'` cannot be undefined; use null for empty states');
}
typecheckStateSpec(stateSpec, stateSpecName);
statesTargetObject[stateSpecName] = stateSpec.value;
defineSettableState(component, component.state, statesTargetObject, stateSpec, stateSpecName);
}
}
function defineSettableState(component, statesHostObject, statesTargetObject, stateSpec, stateSpecName) {
Object.defineProperty(statesHostObject, stateSpecName, {
configurable: true,
get: function get() {
return statesTargetObject[stateSpecName];
},
set: function set(inputValue) {
component._stateChanges[stateSpecName] = inputValue;
component._anyStateChange = true;
if (stateSpec.setter) {
statesTargetObject[stateSpecName] = stateSpec.setter.call(component, inputValue);
}
else {
statesTargetObject[stateSpecName] = inputValue;
}
if (component._doesEmitEventsVerbosely) {
component.emit('state:set', stateSpecName, statesTargetObject[stateSpecName], statesTargetObject);
}
return statesTargetObject[stateSpecName];
},
});
}
HaikuComponent.prototype._markForFullFlush = function _markForFullFlush() {
this._needsFullFlush = true;
return this;
};
HaikuComponent.prototype._unmarkForFullFlush = function _unmarkForFullFlush() {
this._needsFullFlush = false;
return this;
};
HaikuComponent.prototype._shouldPerformFullFlush = function _shouldPerformFullFlush() {
return this._needsFullFlush || this._alwaysFlush;
};
HaikuComponent.prototype._clearDetectedEventsFired = function _clearDetectedEventsFired() {
this._anyEventChange = false;
this._eventsFired = {};
return this;
};
HaikuComponent.prototype._clearDetectedInputChanges = function _clearDetectedInputChanges() {
this._anyStateChange = false;
this._stateChanges = {};
return this;
};
HaikuComponent.prototype.patch = function patch(container, patchOptions, skipCache) {
if (skipCache === void 0) { skipCache = false; }
if (this.isDeactivated()) {
return {};
}
var time = this._context.clock.getExplicitTime();
var timelinesRunning = [];
for (var timelineName in this._timelineInstances) {
var timeline = this._timelineInstances[timelineName];
if (timeline.isActive()) {
timeline._doUpdateWithGlobalClockTime(time);
if (timelineName === 'Default' || !timeline.isFinished()) {
timelinesRunning.push(timeline);
}
}
}
this._lastDeltaPatches = gatherDeltaPatches(this, this._template, container, this._context, timelinesRunning, patchOptions, skipCache);
for (var flexId in this._nestedComponentElements) {
var compElement = this._nestedComponentElements[flexId];
this._lastDeltaPatches[flexId] = compElement;
compElement.__instance.patch(compElement, {});
}
this._clearDetectedEventsFired();
this._clearDetectedInputChanges();
return this._lastDeltaPatches;
};
HaikuComponent.prototype._getPrecalcedPatches = function _getPrecalcedPatches() {
if (this.isDeactivated()) {
return {};
}
return this._lastDeltaPatches || {};
};
HaikuComponent.prototype._rehydrateFlatManaTree = function _rehydrateFlatManaTree() {
this._flatManaTree = manaFlattenTree_1.default(this._template, CSS_QUERY_MAPPING);
return this._flatManaTree;
};
HaikuComponent.prototype.render = function render(container, renderOptions) {
if (this.isDeactivated()) {
return void 0;
}
var time = this._context.clock.getExplicitTime();
var prevFlatManaTreeLen = this._flatManaTree.length;
this._rehydrateFlatManaTree();
if (prevFlatManaTreeLen.length !== this._flatManaTree.length) {
this._matchedElementCache = {};
}
for (var timelineName in this._timelineInstances) {
var timeline = this._timelineInstances[timelineName];
if (timeline.isActive()) {
timeline._doUpdateWithGlobalClockTime(time);
}
}
applyContextChanges(this, this._template, container, this._context, renderOptions || {});
this._lastTemplateExpansion = expandTreeElement(this._template, this, this._context);
this._unmarkForFullFlush();
return this._lastTemplateExpansion;
};
HaikuComponent.prototype.findElementsByHaikuId = function findElementsByHaikuId(componentId) {
return findMatchingElementsByCssSelector('haiku:' + componentId, this._flatManaTree, this._matchedElementCache);
};
HaikuComponent.prototype._hydrateMutableTimelines = function _hydrateMutableTimelines() {
this._mutableTimelines = {};
if (this._bytecode.timelines) {
for (var timelineName in this._bytecode.timelines) {
for (var selector in this._bytecode.timelines[timelineName]) {
for (var propertyName in this._bytecode.timelines[timelineName][selector]) {
if (isMutableProperty_1.default(this._bytecode.timelines[timelineName][selector][propertyName], propertyName)) {
var timeline = this._mutableTimelines[timelineName] || {};
var propertyGroup = timeline[selector] || {};
this._mutableTimelines = __assign({}, this._mutableTimelines, (_a = {}, _a[timelineName] = __assign({}, timeline, (_b = {}, _b[selector] = __assign({}, propertyGroup, (_c = {}, _c[propertyName] = this._bytecode.timelines[timelineName][selector][propertyName], _c)), _b)), _a));
}
}
}
}
}
var _a, _b, _c;
};
function bindContextualEventHandlers(component) {
if (component._bytecode.eventHandlers) {
for (var eventSelector in component._bytecode.eventHandlers) {
var eventHandlerGroup = component._bytecode.eventHandlers[eventSelector];
for (var eventName1 in eventHandlerGroup) {
var eventHandlerSpec1 = eventHandlerGroup[eventName1];
if (!eventHandlerSpec1.handler.__subscribed && !eventHandlerSpec1.handler.__external) {
if (eventName1 === 'component:will-mount') {
component.on('haikuComponentWillMount', eventHandlerSpec1.handler);
eventHandlerSpec1.handler.__subscribed = true;
continue;
}
if (eventName1 === 'component:did-mount') {
component.on('haikuComponentDidMount', eventHandlerSpec1.handler);
eventHandlerSpec1.handler.__subscribed = true;
continue;
}
if (eventName1 === 'component:will-unmount') {
component.on('haikuComponentWillUnmount', eventHandlerSpec1.handler);
eventHandlerSpec1.handler.__subscribed = true;
continue;
}
var namePieces = eventName1.split(':');
if (namePieces.length > 1) {
if (namePieces[0] === 'timeline') {
var timelineNamePiece = namePieces[1];
var frameValuePiece = parseInt(namePieces[2], 10);
if (!component._frameEventListeners[timelineNamePiece]) {
component._frameEventListeners[timelineNamePiece] = {};
}
if (!component._frameEventListeners[timelineNamePiece][frameValuePiece]) {
component._frameEventListeners[timelineNamePiece][frameValuePiece] = [];
}
component._frameEventListeners[timelineNamePiece][frameValuePiece].push(eventHandlerSpec1.handler);
eventHandlerSpec1.handler.__subscribed = true;
continue;
}
}
eventHandlerSpec1.handler.__external = true;
}
}
var matchingElementsForEvents = findMatchingElementsByCssSelector(eventSelector, component._flatManaTree, component._matchedElementCache);
if (!matchingElementsForEvents || matchingElementsForEvents.length < 1) {
continue;
}
for (var k = 0; k < matchingElementsForEvents.length; k++) {
for (var eventName in eventHandlerGroup) {
var eventHandlerSpec = eventHandlerGroup[eventName];
if (!eventHandlerSpec.__subscribed) {
applyHandlerToElement(matchingElementsForEvents[k], eventName, eventHandlerSpec.handler);
}
}
}
}
}
}
function applyBehaviors(timelinesRunning, deltas, component, context, isPatchOperation, skipCache) {
if (skipCache === void 0) { skipCache = false; }
if (!isPatchOperation) {
bindContextualEventHandlers(component);
}
for (var i = 0; i < timelinesRunning.length; i++) {
var timelineInstance = timelinesRunning[i];
var timelineName = timelineInstance.getName();
var timelineDescriptor = isPatchOperation && !component.config.options.hotEditingMode
? component._mutableTimelines[timelineName]
: component._bytecode.timelines[timelineName];
if (typeof timelineDescriptor !== 'object') {
continue;
}
var timelineTime = timelineInstance.getBoundedTime();
for (var behaviorSelector in timelineDescriptor) {
var propertiesGroup = timelineDescriptor[behaviorSelector];
if (!propertiesGroup) {
continue;
}
var matchingElementsForBehavior = findMatchingElementsByCssSelector(behaviorSelector, component._flatManaTree, component._matchedElementCache);
if (!matchingElementsForBehavior || matchingElementsForBehavior.length < 1) {
continue;
}
for (var j = 0; j < matchingElementsForBehavior.length; j++) {
var matchingElement = matchingElementsForBehavior[j];
var domId = matchingElement && matchingElement.attributes && matchingElement.attributes.id;
var haikuId = matchingElement && matchingElement.attributes && matchingElement.attributes[HAIKU_ID_ATTRIBUTE];
var flexId = haikuId || domId;
var assembledOutputs = component._builder.build({}, timelineName, timelineTime, flexId, matchingElement, propertiesGroup, isPatchOperation, component, skipCache);
if (assembledOutputs && assembledOutputs.transform) {
matchingElement.__transformed = true;
}
if (assembledOutputs && deltas && flexId) {
deltas[flexId] = matchingElement;
}
if (assembledOutputs) {
for (var behaviorKey in assembledOutputs) {
var behaviorValue = assembledOutputs[behaviorKey];
applyPropertyToElement_1.default(matchingElement, behaviorKey, behaviorValue, context, component);
}
}
}
}
}
}
function gatherDeltaPatches(component, template, conta