|
|
|
@ -27,7 +27,6 @@ const readonly = new Set([
|
|
|
|
|
|
|
|
|
|
|
|
/** @extends Wrapper */
|
|
|
|
/** @extends Wrapper */
|
|
|
|
export default class WindowWrapper extends Wrapper {
|
|
|
|
export default class WindowWrapper extends Wrapper {
|
|
|
|
|
|
|
|
|
|
|
|
/** @type {import('../../nodes/Window.js').default} */
|
|
|
|
/** @type {import('../../nodes/Window.js').default} */
|
|
|
|
node;
|
|
|
|
node;
|
|
|
|
|
|
|
|
|
|
|
|
@ -63,19 +62,18 @@ export default class WindowWrapper extends Wrapper {
|
|
|
|
add_event_handlers(block, '@_window', this.handlers);
|
|
|
|
add_event_handlers(block, '@_window', this.handlers);
|
|
|
|
this.node.bindings.forEach((binding) => {
|
|
|
|
this.node.bindings.forEach((binding) => {
|
|
|
|
// TODO: what if it's a MemberExpression?
|
|
|
|
// TODO: what if it's a MemberExpression?
|
|
|
|
const binding_name = ( /** @type {import('estree').Identifier} */(binding.expression.node)).name;
|
|
|
|
const binding_name = /** @type {import('estree').Identifier} */ (binding.expression.node)
|
|
|
|
|
|
|
|
.name;
|
|
|
|
// in dev mode, throw if read-only values are written to
|
|
|
|
// in dev mode, throw if read-only values are written to
|
|
|
|
if (readonly.has(binding.name)) {
|
|
|
|
if (readonly.has(binding.name)) {
|
|
|
|
renderer.readonly.add(binding_name);
|
|
|
|
renderer.readonly.add(binding_name);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
bindings[binding.name] = binding_name;
|
|
|
|
bindings[binding.name] = binding_name;
|
|
|
|
// bind:online is a special case, we need to listen for two separate events
|
|
|
|
// bind:online is a special case, we need to listen for two separate events
|
|
|
|
if (binding.name === 'online')
|
|
|
|
if (binding.name === 'online') return;
|
|
|
|
return;
|
|
|
|
|
|
|
|
const associated_event = associated_events[binding.name];
|
|
|
|
const associated_event = associated_events[binding.name];
|
|
|
|
const property = properties[binding.name] || binding.name;
|
|
|
|
const property = properties[binding.name] || binding.name;
|
|
|
|
if (!events[associated_event])
|
|
|
|
if (!events[associated_event]) events[associated_event] = [];
|
|
|
|
events[associated_event] = [];
|
|
|
|
|
|
|
|
events[associated_event].push({
|
|
|
|
events[associated_event].push({
|
|
|
|
name: binding_name,
|
|
|
|
name: binding_name,
|
|
|
|
value: property
|
|
|
|
value: property
|
|
|
|
@ -91,22 +89,23 @@ export default class WindowWrapper extends Wrapper {
|
|
|
|
const fn = renderer.reference(id.name);
|
|
|
|
const fn = renderer.reference(id.name);
|
|
|
|
if (event === 'scroll') {
|
|
|
|
if (event === 'scroll') {
|
|
|
|
// TODO other bidirectional bindings...
|
|
|
|
// TODO other bidirectional bindings...
|
|
|
|
block.add_variable(scrolling, x `false`);
|
|
|
|
block.add_variable(scrolling, x`false`);
|
|
|
|
block.add_variable(clear_scrolling, x `() => { ${scrolling} = false }`);
|
|
|
|
block.add_variable(clear_scrolling, x`() => { ${scrolling} = false }`);
|
|
|
|
block.add_variable(scrolling_timeout);
|
|
|
|
block.add_variable(scrolling_timeout);
|
|
|
|
const condition = bindings.scrollX && bindings.scrollY
|
|
|
|
const condition =
|
|
|
|
? x `"${bindings.scrollX}" in this._state || "${bindings.scrollY}" in this._state`
|
|
|
|
bindings.scrollX && bindings.scrollY
|
|
|
|
: x `"${bindings.scrollX || bindings.scrollY}" in this._state`;
|
|
|
|
? x`"${bindings.scrollX}" in this._state || "${bindings.scrollY}" in this._state`
|
|
|
|
const scrollX = bindings.scrollX && x `this._state.${bindings.scrollX}`;
|
|
|
|
: x`"${bindings.scrollX || bindings.scrollY}" in this._state`;
|
|
|
|
const scrollY = bindings.scrollY && x `this._state.${bindings.scrollY}`;
|
|
|
|
const scrollX = bindings.scrollX && x`this._state.${bindings.scrollX}`;
|
|
|
|
renderer.meta_bindings.push(b `
|
|
|
|
const scrollY = bindings.scrollY && x`this._state.${bindings.scrollY}`;
|
|
|
|
|
|
|
|
renderer.meta_bindings.push(b`
|
|
|
|
if (${condition}) {
|
|
|
|
if (${condition}) {
|
|
|
|
@_scrollTo(${scrollX || '@_window.pageXOffset'}, ${scrollY || '@_window.pageYOffset'});
|
|
|
|
@_scrollTo(${scrollX || '@_window.pageXOffset'}, ${scrollY || '@_window.pageYOffset'});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
${scrollX && `${scrollX} = @_window.pageXOffset;`}
|
|
|
|
${scrollX && `${scrollX} = @_window.pageXOffset;`}
|
|
|
|
${scrollY && `${scrollY} = @_window.pageYOffset;`}
|
|
|
|
${scrollY && `${scrollY} = @_window.pageYOffset;`}
|
|
|
|
`);
|
|
|
|
`);
|
|
|
|
block.event_listeners.push(x `
|
|
|
|
block.event_listeners.push(x`
|
|
|
|
@listen(@_window, "${event}", () => {
|
|
|
|
@listen(@_window, "${event}", () => {
|
|
|
|
${scrolling} = true;
|
|
|
|
${scrolling} = true;
|
|
|
|
@_clearTimeout(${scrolling_timeout});
|
|
|
|
@_clearTimeout(${scrolling_timeout});
|
|
|
|
@ -114,21 +113,20 @@ export default class WindowWrapper extends Wrapper {
|
|
|
|
${fn}();
|
|
|
|
${fn}();
|
|
|
|
})
|
|
|
|
})
|
|
|
|
`);
|
|
|
|
`);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
else {
|
|
|
|
|
|
|
|
props.forEach((prop) => {
|
|
|
|
props.forEach((prop) => {
|
|
|
|
renderer.meta_bindings.push(b `this._state.${prop.name} = @_window.${prop.value};`);
|
|
|
|
renderer.meta_bindings.push(b`this._state.${prop.name} = @_window.${prop.value};`);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
block.event_listeners.push(x `
|
|
|
|
block.event_listeners.push(x`
|
|
|
|
@listen(@_window, "${event}", ${fn})
|
|
|
|
@listen(@_window, "${event}", ${fn})
|
|
|
|
`);
|
|
|
|
`);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
component.partly_hoisted.push(b `
|
|
|
|
component.partly_hoisted.push(b`
|
|
|
|
function ${id}() {
|
|
|
|
function ${id}() {
|
|
|
|
${props.map((prop) => renderer.invalidate(prop.name, x `${prop.name} = @_window.${prop.value}`))}
|
|
|
|
${props.map((prop) => renderer.invalidate(prop.name, x`${prop.name} = @_window.${prop.value}`))}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
`);
|
|
|
|
block.chunks.init.push(b `
|
|
|
|
block.chunks.init.push(b`
|
|
|
|
@add_render_callback(${fn});
|
|
|
|
@add_render_callback(${fn});
|
|
|
|
`);
|
|
|
|
`);
|
|
|
|
component.has_reactive_assignments = true;
|
|
|
|
component.has_reactive_assignments = true;
|
|
|
|
@ -138,11 +136,11 @@ export default class WindowWrapper extends Wrapper {
|
|
|
|
const condition = renderer.dirty([bindings.scrollX, bindings.scrollY].filter(Boolean));
|
|
|
|
const condition = renderer.dirty([bindings.scrollX, bindings.scrollY].filter(Boolean));
|
|
|
|
const scrollX = bindings.scrollX
|
|
|
|
const scrollX = bindings.scrollX
|
|
|
|
? renderer.reference(bindings.scrollX)
|
|
|
|
? renderer.reference(bindings.scrollX)
|
|
|
|
: x `@_window.pageXOffset`;
|
|
|
|
: x`@_window.pageXOffset`;
|
|
|
|
const scrollY = bindings.scrollY
|
|
|
|
const scrollY = bindings.scrollY
|
|
|
|
? renderer.reference(bindings.scrollY)
|
|
|
|
? renderer.reference(bindings.scrollY)
|
|
|
|
: x `@_window.pageYOffset`;
|
|
|
|
: x`@_window.pageYOffset`;
|
|
|
|
block.chunks.update.push(b `
|
|
|
|
block.chunks.update.push(b`
|
|
|
|
if (${condition} && !${scrolling}) {
|
|
|
|
if (${condition} && !${scrolling}) {
|
|
|
|
${scrolling} = true;
|
|
|
|
${scrolling} = true;
|
|
|
|
@_clearTimeout(${scrolling_timeout});
|
|
|
|
@_clearTimeout(${scrolling_timeout});
|
|
|
|
@ -157,20 +155,19 @@ export default class WindowWrapper extends Wrapper {
|
|
|
|
const name = bindings.online;
|
|
|
|
const name = bindings.online;
|
|
|
|
renderer.add_to_context(id.name);
|
|
|
|
renderer.add_to_context(id.name);
|
|
|
|
const reference = renderer.reference(id.name);
|
|
|
|
const reference = renderer.reference(id.name);
|
|
|
|
component.partly_hoisted.push(b `
|
|
|
|
component.partly_hoisted.push(b`
|
|
|
|
function ${id}() {
|
|
|
|
function ${id}() {
|
|
|
|
${renderer.invalidate(name, x `${name} = @_navigator.onLine`)}
|
|
|
|
${renderer.invalidate(name, x`${name} = @_navigator.onLine`)}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
`);
|
|
|
|
block.chunks.init.push(b `
|
|
|
|
block.chunks.init.push(b`
|
|
|
|
@add_render_callback(${reference});
|
|
|
|
@add_render_callback(${reference});
|
|
|
|
`);
|
|
|
|
`);
|
|
|
|
block.event_listeners.push(x `@listen(@_window, "online", ${reference})`, x `@listen(@_window, "offline", ${reference})`);
|
|
|
|
block.event_listeners.push(
|
|
|
|
|
|
|
|
x`@listen(@_window, "online", ${reference})`,
|
|
|
|
|
|
|
|
x`@listen(@_window, "offline", ${reference})`
|
|
|
|
|
|
|
|
);
|
|
|
|
component.has_reactive_assignments = true;
|
|
|
|
component.has_reactive_assignments = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|