Lint and format src/compiler/compile/render_dom/wrappers/Window.js

pull/8569/head
Simon Holthausen 3 years ago
parent 9d5492ab27
commit f241b93ef3

@ -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;
} }
} }
} }

Loading…
Cancel
Save