slightly improve Svelte 2.0 compatibility (#244)
* slightly improve Svelte 2.0 compatibility * fixup * fix lint
This commit is contained in:
parent
8229d1c9e6
commit
c309e5842d
|
@ -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(
|
||||
|
|
|
@ -60,6 +60,9 @@
|
|||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
icon: void 0
|
||||
}),
|
||||
methods: {
|
||||
onGoBack (e) {
|
||||
e.preventDefault()
|
||||
|
|
|
@ -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>
|
|
@ -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) => {
|
||||
|
|
|
@ -45,6 +45,11 @@
|
|||
}
|
||||
img.src = src
|
||||
stop('LazyImage oncreate()')
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
displaySrc: void 0,
|
||||
hidden: false,
|
||||
ariaHidden: false
|
||||
})
|
||||
}
|
||||
</script>
|
|
@ -26,6 +26,9 @@
|
|||
this.set({shown: true})
|
||||
}, SPINNER_DELAY)
|
||||
},
|
||||
data: () => ({
|
||||
shown: false
|
||||
}),
|
||||
components: {
|
||||
LoadingSpinner
|
||||
}
|
||||
|
|
|
@ -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 |
|
@ -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
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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>
|
|
@ -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,
|
||||
|
|
|
@ -124,6 +124,9 @@
|
|||
components: {
|
||||
PseudoVirtualListLazyItem
|
||||
},
|
||||
data: () => ({
|
||||
intersectionObserver: void 0
|
||||
}),
|
||||
store: () => pseudoVirtualListStore
|
||||
}
|
||||
</script>
|
|
@ -38,6 +38,9 @@
|
|||
let { intersectionObserver } = this.get()
|
||||
intersectionObserver.observe(this.refs.node)
|
||||
},
|
||||
data: () => ({
|
||||
hide: false
|
||||
}),
|
||||
computed: {
|
||||
shouldHide: (isIntersecting, isCached, hide) => {
|
||||
if (isCached) {
|
||||
|
|
|
@ -25,6 +25,9 @@
|
|||
stop('PseudoVirtualListLazyItem set props')
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
props: void 0
|
||||
}),
|
||||
components: {
|
||||
PseudoVirtualListItem
|
||||
}
|
||||
|
|
|
@ -155,7 +155,8 @@
|
|||
}
|
||||
},
|
||||
data: () => ({
|
||||
oneTransparentPixel: ONE_TRANSPARENT_PIXEL
|
||||
oneTransparentPixel: ONE_TRANSPARENT_PIXEL,
|
||||
mouseover: void 0
|
||||
}),
|
||||
store: () => store,
|
||||
events: {
|
||||
|
|
|
@ -138,6 +138,11 @@
|
|||
StatusSpoiler,
|
||||
StatusComposeBox
|
||||
},
|
||||
data: () => ({
|
||||
notification: void 0,
|
||||
replyVisibility: void 0,
|
||||
contentPreloaded: false
|
||||
}),
|
||||
store: () => store,
|
||||
methods: {
|
||||
onClickOrKeydown (e) {
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<div class="lazy-timeline">
|
||||
{{#await importTimeline}}
|
||||
<!-- awaiting promise -->
|
||||
{{then constructor}}
|
||||
<:Component {constructor} :timeline />
|
||||
{{catch error}}
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
on:blurWithCapture="clearFocus(event)"
|
||||
>
|
||||
{{#await componentsPromise}}
|
||||
<!-- awaiting promise -->
|
||||
{{then result}}
|
||||
<:Component {result.listComponent}
|
||||
component={{result.listItemComponent}}
|
||||
|
|
|
@ -36,6 +36,9 @@
|
|||
}
|
||||
}, {init: false})
|
||||
},
|
||||
data: () => ({
|
||||
fadedIn: false
|
||||
}),
|
||||
store: () => virtualListStore,
|
||||
methods: {
|
||||
doCalculateHeight () {
|
||||
|
|
|
@ -20,6 +20,9 @@
|
|||
stop('VirtualListLazyItem set props')
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
props: void 0
|
||||
}),
|
||||
components: {
|
||||
VirtualListItem
|
||||
}
|
||||
|
|
|
@ -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>
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue