slightly improve Svelte 2.0 compatibility (#244)

* slightly improve Svelte 2.0 compatibility

* fixup

* fix lint
This commit is contained in:
Nolan Lawson 2018-04-29 22:13:41 -07:00 committed by GitHub
parent 8229d1c9e6
commit c309e5842d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 116 additions and 27 deletions

View file

@ -74,6 +74,12 @@
imgLoad, imgLoad,
imgLoadError imgLoadError
}, },
data: () => ({
className: void 0,
loaded: false,
error: void 0,
isLink: false
}),
store: () => store, store: () => store,
computed: { computed: {
computedClass: (className, loaded, size) => (classname( computedClass: (className, loaded, size) => (classname(

View file

@ -60,6 +60,9 @@
</style> </style>
<script> <script>
export default { export default {
data: () => ({
icon: void 0
}),
methods: { methods: {
onGoBack (e) { onGoBack (e) {
e.preventDefault() e.preventDefault()

View file

@ -22,4 +22,11 @@
.external-link-with-icon.normal-icon-color .external-link-svg { .external-link-with-icon.normal-icon-color .external-link-svg {
fill: var(--body-text-color); fill: var(--body-text-color);
} }
</style> </style>
<script>
export default {
data: () => ({
normalIconColor: false
})
}
</script>

View file

@ -105,6 +105,17 @@
import { store } from '../_store/store' import { store } from '../_store/store'
export default { export default {
data: () => ({
big: false,
muted: false,
disabled: false,
svgClassName: void 0,
focusKey: void 0,
pressable: false,
pressed: false,
className: void 0,
delegateKey: void 0
}),
store: () => store, store: () => store,
computed: { computed: {
computedClass: (pressable, pressed, big, muted, className) => { computedClass: (pressable, pressed, big, muted, className) => {

View file

@ -45,6 +45,11 @@
} }
img.src = src img.src = src
stop('LazyImage oncreate()') stop('LazyImage oncreate()')
} },
data: () => ({
displaySrc: void 0,
hidden: false,
ariaHidden: false
})
} }
</script> </script>

View file

@ -26,6 +26,9 @@
this.set({shown: true}) this.set({shown: true})
}, SPINNER_DELAY) }, SPINNER_DELAY)
}, },
data: () => ({
shown: false
}),
components: { components: {
LoadingSpinner LoadingSpinner
} }

View file

@ -1,5 +1,5 @@
<svg class="loading-spinner-icon spin {{maskStyle ? 'mask-style' : ''}}" <svg class="loading-spinner-icon spin {{maskStyle ? 'mask-style' : ''}}"
style="width: {{size || 64}}px; height: {{size || 64}}px;" style="width: {{size}}px; height: {{size}}px;"
aria-label="Loading" aria-label="Loading"
> >
<use xlink:href="#fa-spinner" /> <use xlink:href="#fa-spinner" />
@ -12,4 +12,12 @@
.loading-spinner-icon.mask-style { .loading-spinner-icon.mask-style {
fill: var(--mask-svg-fill); fill: var(--mask-svg-fill);
} }
</style> </style>
<script>
export default {
data: () => ({
maskStyle: false,
size: 64
})
}
</script>

Before

Width:  |  Height:  |  Size: 354 B

After

Width:  |  Height:  |  Size: 449 B

View file

@ -107,7 +107,7 @@
}) })
}, },
methods: { methods: {
once: once, once,
onClick (item) { onClick (item) {
this.fire('autosuggestItemSelected') this.fire('autosuggestItemSelected')
let { realm } = this.get() let { realm } = this.get()
@ -147,7 +147,7 @@
if (!thisComposeFocused) { if (!thisComposeFocused) {
return return
} }
let selectionStart = composeSelectionStartDeferred || 0 let selectionStart = composeSelectionStartDeferred
if (!text || selectionStart < MIN_PREFIX_LENGTH) { if (!text || selectionStart < MIN_PREFIX_LENGTH) {
return return
} }
@ -162,6 +162,10 @@
searchResults.length) searchResults.length)
} }
}, },
data: () => ({
composeFocusedDeferred: void 0,
composeSelectionStartDeferred: 0
}),
store: () => store, store: () => store,
components: { components: {
ComposeAutosuggestionList ComposeAutosuggestionList

View file

@ -151,6 +151,13 @@
ComposeMedia, ComposeMedia,
ComposeContentWarning ComposeContentWarning
}, },
data: () => ({
size: void 0,
isReply: false,
autoFocus: false,
sticky: false,
hideBottomBorder: false
}),
store: () => store, store: () => store,
computed: { computed: {
computedClassName: (overLimit, realm, size, postPrivacyKey, isReply) => (classname( computedClassName: (overLimit, realm, size, postPrivacyKey, isReply) => (classname(

View file

@ -1,5 +1,5 @@
<div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{overLimit ? 'over-char-limit' : ''}}" <div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{overLimit ? 'over-char-limit' : ''}}"
style="transform: scaleX({{lengthAsFractionDeferred || 0}});" style="transform: scaleX({{lengthAsFractionDeferred}});"
aria-hidden="true" aria-hidden="true"
></div> ></div>
<style> <style>
@ -38,6 +38,10 @@
}) })
}, {init: false}) }, {init: false})
}, },
data: () => ({
shouldAnimate: false,
lengthAsFractionDeferred: 0
}),
store: () => store, store: () => store,
computed: { computed: {
lengthAsFraction: (length) => { lengthAsFraction: (length) => {
@ -46,5 +50,5 @@
return (int - (int % 2)) / 100 return (int - (int % 2)) / 100
} }
} }
} }
</script> </script>

View file

@ -1,6 +1,6 @@
<span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}" <span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}"
aria-label={{lengthLabel}}> aria-label={{lengthLabel}}>
{{lengthToDisplayDeferred || '0'}} {{lengthToDisplayDeferred}}
</span> </span>
<style> <style>
.compose-box-length { .compose-box-length {
@ -35,6 +35,9 @@
}) })
}, {init: false}) }, {init: false})
}, },
data: () => ({
lengthToDisplayDeferred: 0
}),
store: () => store, store: () => store,
computed: { computed: {
lengthToDisplay: (length) => CHAR_LIMIT - length, lengthToDisplay: (length) => CHAR_LIMIT - length,

View file

@ -124,6 +124,9 @@
components: { components: {
PseudoVirtualListLazyItem PseudoVirtualListLazyItem
}, },
data: () => ({
intersectionObserver: void 0
}),
store: () => pseudoVirtualListStore store: () => pseudoVirtualListStore
} }
</script> </script>

View file

@ -38,6 +38,9 @@
let { intersectionObserver } = this.get() let { intersectionObserver } = this.get()
intersectionObserver.observe(this.refs.node) intersectionObserver.observe(this.refs.node)
}, },
data: () => ({
hide: false
}),
computed: { computed: {
shouldHide: (isIntersecting, isCached, hide) => { shouldHide: (isIntersecting, isCached, hide) => {
if (isCached) { if (isCached) {

View file

@ -25,6 +25,9 @@
stop('PseudoVirtualListLazyItem set props') stop('PseudoVirtualListLazyItem set props')
} }
}, },
data: () => ({
props: void 0
}),
components: { components: {
PseudoVirtualListItem PseudoVirtualListItem
} }

View file

@ -155,7 +155,8 @@
} }
}, },
data: () => ({ data: () => ({
oneTransparentPixel: ONE_TRANSPARENT_PIXEL oneTransparentPixel: ONE_TRANSPARENT_PIXEL,
mouseover: void 0
}), }),
store: () => store, store: () => store,
events: { events: {

View file

@ -138,6 +138,11 @@
StatusSpoiler, StatusSpoiler,
StatusComposeBox StatusComposeBox
}, },
data: () => ({
notification: void 0,
replyVisibility: void 0,
contentPreloaded: false
}),
store: () => store, store: () => store,
methods: { methods: {
onClickOrKeydown (e) { onClickOrKeydown (e) {

View file

@ -1,5 +1,6 @@
<div class="lazy-timeline"> <div class="lazy-timeline">
{{#await importTimeline}} {{#await importTimeline}}
<!-- awaiting promise -->
{{then constructor}} {{then constructor}}
<:Component {constructor} :timeline /> <:Component {constructor} :timeline />
{{catch error}} {{catch error}}

View file

@ -5,6 +5,7 @@
on:blurWithCapture="clearFocus(event)" on:blurWithCapture="clearFocus(event)"
> >
{{#await componentsPromise}} {{#await componentsPromise}}
<!-- awaiting promise -->
{{then result}} {{then result}}
<:Component {result.listComponent} <:Component {result.listComponent}
component={{result.listItemComponent}} component={{result.listItemComponent}}

View file

@ -36,6 +36,9 @@
} }
}, {init: false}) }, {init: false})
}, },
data: () => ({
fadedIn: false
}),
store: () => virtualListStore, store: () => virtualListStore,
methods: { methods: {
doCalculateHeight () { doCalculateHeight () {

View file

@ -20,6 +20,9 @@
stop('VirtualListLazyItem set props') stop('VirtualListLazyItem set props')
} }
}, },
data: () => ({
props: void 0
}),
components: { components: {
VirtualListItem VirtualListItem
} }

View file

@ -105,22 +105,21 @@
import { themes } from '../../../_static/themes' import { themes } from '../../../_static/themes'
export default { export default {
components: { async oncreate () {
SettingsLayout, let { instanceName } = this.get()
ExternalLink, let { instanceThemes } = this.store.get()
Avatar this.set({
selectedTheme: instanceThemes[instanceName] || 'default'
})
await updateVerifyCredentialsForInstance(instanceName)
}, },
store: () => store, store: () => store,
data: () => ({ data: () => ({
themes: themes themes: themes,
selectedTheme: 'default'
}), }),
async oncreate () {
let { instanceName } = this.get()
await updateVerifyCredentialsForInstance(instanceName)
},
computed: { computed: {
instanceName: (params) => params.instanceName, instanceName: (params) => params.instanceName,
selectedTheme: ($instanceThemes, instanceName) => $instanceThemes[instanceName] || 'default',
verifyCredentials: ($verifyCredentials, instanceName) => $verifyCredentials && $verifyCredentials[instanceName] verifyCredentials: ($verifyCredentials, instanceName) => $verifyCredentials && $verifyCredentials[instanceName]
}, },
methods: { methods: {
@ -145,6 +144,11 @@
} }
}) })
} }
},
components: {
SettingsLayout,
ExternalLink,
Avatar
} }
} }
</script> </script>

View file

@ -2,7 +2,7 @@ export function imgLoadError (node, callback) {
node.addEventListener('error', callback) node.addEventListener('error', callback)
return { return {
teardown () { destroy () {
node.removeEventListener('error', callback) node.removeEventListener('error', callback)
} }
} }
@ -12,7 +12,7 @@ export function imgLoad (node, callback) {
node.addEventListener('load', callback) node.addEventListener('load', callback)
return { return {
teardown () { destroy () {
node.removeEventListener('load', callback) node.removeEventListener('load', callback)
} }
} }
@ -28,7 +28,7 @@ export function mouseover (node, callback) {
node.addEventListener('mouseenter', onMouseEnter) node.addEventListener('mouseenter', onMouseEnter)
node.addEventListener('mouseleave', onMouseLeave) node.addEventListener('mouseleave', onMouseLeave)
return { return {
teardown () { destroy () {
node.removeEventListener('mouseenter', onMouseEnter) node.removeEventListener('mouseenter', onMouseEnter)
node.removeEventListener('mouseleave', onMouseLeave) node.removeEventListener('mouseleave', onMouseLeave)
} }
@ -38,7 +38,7 @@ export function mouseover (node, callback) {
export function focusWithCapture (node, callback) { export function focusWithCapture (node, callback) {
node.addEventListener('focus', callback, true) node.addEventListener('focus', callback, true)
return { return {
teardown () { destroy () {
node.removeEventListener('focus', callback, true) node.removeEventListener('focus', callback, true)
} }
} }
@ -47,7 +47,7 @@ export function focusWithCapture (node, callback) {
export function blurWithCapture (node, callback) { export function blurWithCapture (node, callback) {
node.addEventListener('blur', callback, true) node.addEventListener('blur', callback, true)
return { return {
teardown () { destroy () {
node.removeEventListener('blur', callback, true) node.removeEventListener('blur', callback, true)
} }
} }
@ -62,7 +62,7 @@ export function selectionChange (node, callback) {
node.addEventListener(event, listener) node.addEventListener(event, listener)
} }
return { return {
teardown () { destroy () {
for (let event of events) { for (let event of events) {
node.removeEventListener(event, listener) node.removeEventListener(event, listener)
} }

View file

@ -23,11 +23,12 @@ module.exports = {
use: { use: {
loader: 'svelte-loader', loader: 'svelte-loader',
options: { options: {
dev: isDev,
hydratable: true, hydratable: true,
emitCss: !isDev, emitCss: !isDev,
cascade: false, cascade: false,
store: true, store: true,
hot: isDev hotReload: isDev
} }
} }
}, },