msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 9d5492ab27
commit f241b93ef3
1 changed files with 121 additions and 124 deletions
Show Stats Download Patch File Download Diff File

245
src/compiler/compile/render_dom/wrappers/Window.js
Unescape View File

@ -4,109 +4,108 @@ import add_event_handlers from './shared/add_event_handlers.js';
import add_actions from './shared/add_actions.js'; import add_actions from './shared/add_actions.js';
import EventHandler from './Element/EventHandler.js'; import EventHandler from './Element/EventHandler.js';
const associated_events = { const associated_events = {
innerWidth: 'resize', innerWidth: 'resize',
innerHeight: 'resize', innerHeight: 'resize',
outerWidth: 'resize', outerWidth: 'resize',
outerHeight: 'resize', outerHeight: 'resize',
devicePixelRatio: 'resize', devicePixelRatio: 'resize',
scrollX: 'scroll', scrollX: 'scroll',
scrollY: 'scroll' scrollY: 'scroll'
}; };
const properties = { const properties = {
scrollX: 'pageXOffset', scrollX: 'pageXOffset',
scrollY: 'pageYOffset' scrollY: 'pageYOffset'
}; };
const readonly = new Set([ const readonly = new Set([
'innerWidth', 'innerWidth',
'innerHeight', 'innerHeight',
'outerWidth', 'outerWidth',
'outerHeight', 'outerHeight',
'devicePixelRatio', 'devicePixelRatio',
'online' 'online'
]); ]);
/** @extends Wrapper */ /** @extends Wrapper */
export default class WindowWrapper extends Wrapper { export default class WindowWrapper extends Wrapper {
/** @type {import('../../nodes/Window.js').default} */
node;
/** @type {import('../../nodes/Window.js').default} */ /** @type {import('./Element/EventHandler.js').default[]} */
node; handlers;
/** @type {import('./Element/EventHandler.js').default[]} */ /**
handlers; * @param {import('../Renderer.js').default} renderer
* @param {import('../Block.js').default} block
* @param {import('./shared/Wrapper.js').default} parent
* @param {import('../../../interfaces.js').TemplateNode} node
*/
constructor(renderer, block, parent, node) {
super(renderer, block, parent, node);
this.handlers = this.node.handlers.map((handler) => new EventHandler(handler, this));
}
/** /**
* @param {import('../Renderer.js').default} renderer * @param {import('../Block.js').default} block
* @param {import('../Block.js').default} block * @param {import('estree').Identifier} _parent_node
* @param {import('./shared/Wrapper.js').default} parent * @param {import('estree').Identifier} _parent_nodes
* @param {import('../../../interfaces.js').TemplateNode} node */
*/ render(block, _parent_node, _parent_nodes) {
constructor(renderer, block, parent, node) { const { renderer } = this;
super(renderer, block, parent, node); const { component } = renderer;
this.handlers = this.node.handlers.map((handler) => new EventHandler(handler, this));
}
/** /** @type {Record<string, Array<{ name: string; value: string }>>} */
* @param {import('../Block.js').default} block const events = {};
* @param {import('estree').Identifier} _parent_node
* @param {import('estree').Identifier} _parent_nodes
*/
render(block, _parent_node, _parent_nodes) {
const { renderer } = this;
const { component } = renderer;
/** @type {Record<string, Array<{ name: string; value: string }>>} */ /** @type {Record<string, string>} */
const events = {}; const bindings = {};
add_actions(block, '@_window', this.node.actions);
/** @type {Record<string, string>} */ add_event_handlers(block, '@_window', this.handlers);
const bindings = {}; this.node.bindings.forEach((binding) => {
add_actions(block, '@_window', this.node.actions); // TODO: what if it's a MemberExpression?
add_event_handlers(block, '@_window', this.handlers); const binding_name = /** @type {import('estree').Identifier} */ (binding.expression.node)
this.node.bindings.forEach((binding) => { .name;
// TODO: what if it's a MemberExpression? // in dev mode, throw if read-only values are written to
const binding_name = ( /** @type {import('estree').Identifier} */(binding.expression.node)).name; if (readonly.has(binding.name)) {
// in dev mode, throw if read-only values are written to renderer.readonly.add(binding_name);
if (readonly.has(binding.name)) { }
renderer.readonly.add(binding_name); bindings[binding.name] = binding_name;
} // bind:online is a special case, we need to listen for two separate events
bindings[binding.name] = binding_name; if (binding.name === 'online') return;
// bind:online is a special case, we need to listen for two separate events const associated_event = associated_events[binding.name];
if (binding.name === 'online') const property = properties[binding.name] || binding.name;
return; if (!events[associated_event]) events[associated_event] = [];
const associated_event = associated_events[binding.name]; events[associated_event].push({
const property = properties[binding.name] || binding.name; name: binding_name,
if (!events[associated_event]) value: property
events[associated_event] = []; });
events[associated_event].push({ });
name: binding_name, const scrolling = block.get_unique_name('scrolling');
value: property const clear_scrolling = block.get_unique_name('clear_scrolling');
}); const scrolling_timeout = block.get_unique_name('scrolling_timeout');
}); Object.keys(events).forEach((event) => {
const scrolling = block.get_unique_name('scrolling'); const id = block.get_unique_name(`onwindow${event}`);
const clear_scrolling = block.get_unique_name('clear_scrolling'); const props = events[event];
const scrolling_timeout = block.get_unique_name('scrolling_timeout'); renderer.add_to_context(id.name);
Object.keys(events).forEach((event) => { const fn = renderer.reference(id.name);
const id = block.get_unique_name(`onwindow${event}`); if (event === 'scroll') {
const props = events[event]; // TODO other bidirectional bindings...
renderer.add_to_context(id.name); block.add_variable(scrolling, x`false`);
const fn = renderer.reference(id.name); block.add_variable(clear_scrolling, x`() => { ${scrolling} = false }`);
if (event === 'scroll') { block.add_variable(scrolling_timeout);
// TODO other bidirectional bindings... const condition =
block.add_variable(scrolling, x `false`); bindings.scrollX && bindings.scrollY
block.add_variable(clear_scrolling, x `() => { ${scrolling} = false }`); ? x`"${bindings.scrollX}" in this._state || "${bindings.scrollY}" in this._state`
block.add_variable(scrolling_timeout); : x`"${bindings.scrollX || bindings.scrollY}" in this._state`;
const condition = bindings.scrollX && bindings.scrollY const scrollX = bindings.scrollX && x`this._state.${bindings.scrollX}`;
? x `"${bindings.scrollX}" in this._state || "${bindings.scrollY}" in this._state` const scrollY = bindings.scrollY && x`this._state.${bindings.scrollY}`;
: x `"${bindings.scrollX || bindings.scrollY}" in this._state`; renderer.meta_bindings.push(b`
const scrollX = bindings.scrollX && x `this._state.${bindings.scrollX}`;
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,35 +113,34 @@ 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;
}); });
// special case... might need to abstract this out if we add more special cases // special case... might need to abstract this out if we add more special cases
if (bindings.scrollX || bindings.scrollY) { if (bindings.scrollX || bindings.scrollY) {
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});
@ -150,27 +148,26 @@ export default class WindowWrapper extends Wrapper {
${scrolling_timeout} = @_setTimeout(${clear_scrolling}, 100); ${scrolling_timeout} = @_setTimeout(${clear_scrolling}, 100);
} }
`); `);
} }
// another special case. (I'm starting to think these are all special cases.) // another special case. (I'm starting to think these are all special cases.)
if (bindings.online) { if (bindings.online) {
const id = block.get_unique_name('onlinestatuschanged'); const id = block.get_unique_name('onlinestatuschanged');
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(
component.has_reactive_assignments = true; x`@listen(@_window, "online", ${reference})`,
} x`@listen(@_window, "offline", ${reference})`
} );
component.has_reactive_assignments = true;
}
}
} }

Write Preview
Loading…
Cancel
Save