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,
imgLoadError
},
data: () => ({
className: void 0,
loaded: false,
error: void 0,
isLink: false
}),
store: () => store,
computed: {
computedClass: (className, loaded, size) => (classname(

View file

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

View file

@ -22,4 +22,11 @@
.external-link-with-icon.normal-icon-color .external-link-svg {
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'
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,
computed: {
computedClass: (pressable, pressed, big, muted, className) => {

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<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"
>
<use xlink:href="#fa-spinner" />
@ -12,4 +12,12 @@
.loading-spinner-icon.mask-style {
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: {
once: once,
once,
onClick (item) {
this.fire('autosuggestItemSelected')
let { realm } = this.get()
@ -147,7 +147,7 @@
if (!thisComposeFocused) {
return
}
let selectionStart = composeSelectionStartDeferred || 0
let selectionStart = composeSelectionStartDeferred
if (!text || selectionStart < MIN_PREFIX_LENGTH) {
return
}
@ -162,6 +162,10 @@
searchResults.length)
}
},
data: () => ({
composeFocusedDeferred: void 0,
composeSelectionStartDeferred: 0
}),
store: () => store,
components: {
ComposeAutosuggestionList

View file

@ -151,6 +151,13 @@
ComposeMedia,
ComposeContentWarning
},
data: () => ({
size: void 0,
isReply: false,
autoFocus: false,
sticky: false,
hideBottomBorder: false
}),
store: () => store,
computed: {
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' : ''}}"
style="transform: scaleX({{lengthAsFractionDeferred || 0}});"
style="transform: scaleX({{lengthAsFractionDeferred}});"
aria-hidden="true"
></div>
<style>
@ -38,6 +38,10 @@
})
}, {init: false})
},
data: () => ({
shouldAnimate: false,
lengthAsFractionDeferred: 0
}),
store: () => store,
computed: {
lengthAsFraction: (length) => {
@ -46,5 +50,5 @@
return (int - (int % 2)) / 100
}
}
}
}
</script>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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