fix: remove remount (#1688)

* fix: remove remount

* fixup
This commit is contained in:
Nolan Lawson 2019-12-23 18:10:03 -08:00 committed by GitHub
parent 3129ae7344
commit 78014a7f33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 164 deletions

View File

@ -90,7 +90,6 @@
"preact": "^10.1.0",
"promise-worker": "^2.0.1",
"prop-types": "^15.7.2",
"remount": "^0.11.0",
"requestidlecallback": "^0.3.0",
"rollup": "^1.27.13",
"rollup-plugin-babel": "^4.3.3",

View File

@ -5,6 +5,7 @@ import {
import { database } from '../_database/database'
import { getCustomEmoji } from '../_api/emoji'
import { store } from '../_store/store'
import isEqual from 'lodash-es/isEqual'
async function syncEmojiForInstance (instanceName, syncMethod) {
await syncMethod(
@ -13,8 +14,10 @@ async function syncEmojiForInstance (instanceName, syncMethod) {
emoji => database.setCustomEmoji(instanceName, emoji),
emoji => {
const { customEmoji } = store.get()
customEmoji[instanceName] = emoji
store.set({ customEmoji: customEmoji })
if (!isEqual(customEmoji[instanceName], emoji)) { // avoid triggering updates if nothing's changed
customEmoji[instanceName] = emoji
store.set({ customEmoji })
}
}
)
}

View File

@ -9,7 +9,7 @@
>
<div class="emoji-container" {style} ref:container >
{#if loaded}
<emoji-mart props-json={emojiMartPropsJson} ></emoji-mart>
<div ref:emojiMartMountPoint></div>
{:elseif error}
<div>Failed to load emoji picker: {error}</div>
{:else}
@ -94,21 +94,31 @@
import { show } from '../helpers/showDialog'
import { close } from '../helpers/closeDialog'
import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
import { define } from 'remount'
import LoadingSpinner from '../../../_components/LoadingSpinner.html'
import { on } from '../../../_utils/eventBus'
import { createEmojiMartPicker } from '../../../_react/createEmojiMartPicker'
import { observe } from 'svelte-extras'
import { render, unmountComponentAtNode } from 'react-dom'
import { isDarkTheme } from '../../../_utils/isDarkTheme'
export default {
async oncreate () {
onCreateDialog.call(this)
on('emoji-selected', this, emoji => this.onEmojiSelected(emoji))
try {
const Picker = await createEmojiMartPicker()
if (!customElements.get('emoji-mart')) {
define({ 'emoji-mart': Picker })
}
this.set({ loaded: true })
const { emojiMartMountPoint } = this.refs
this.observe('emojiMartProps', emojiMartProps => {
console.log('rendering react component')
const fullProps = Object.assign({
onSelect: this.onEmojiSelected.bind(this)
}, emojiMartProps)
const reactComponent = Picker(fullProps)
render(reactComponent, emojiMartMountPoint)
})
this.on('destroy', () => {
console.log('destroying react component')
unmountComponentAtNode(emojiMartMountPoint)
})
} catch (error) {
this.set({ error }) // should never happen, but you never know
}
@ -130,16 +140,17 @@
min-height: ${$isVeryTinyMobileSize ? 0 : $isSmallMobileSize ? 300 : 400}px;
${$isVeryTinyMobileSize ? 'overflow-y: auto; overflow-x: hidden;' : ''}
`),
emojiMartPropsJson: ({ emojiMartProps }) => JSON.stringify(emojiMartProps),
emojiMartProps: ({ perLine, customEmoji, categoriesSorted }) => ({
perLine,
custom: customEmoji,
emojiMartProps: ({ perLine, customEmoji, categoriesSorted, darkMode }) => ({
color: 'var(--nav-bg)',
emoji: 'sailboat',
title: 'Emoji',
showPreview: true,
perLine,
custom: customEmoji,
include: categoriesSorted,
showPreview: true
darkMode
}),
darkMode: ({ $currentTheme }) => isDarkTheme($currentTheme),
perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize, $isVeryTinyMobileSize }) => (
$isVeryTinyMobileSize
? 5
@ -193,6 +204,7 @@
autoFocus: ({ $isUserTouching }) => !$isUserTouching
},
methods: {
observe,
show,
close,
onEmojiSelected (emoji) {

View File

@ -4,23 +4,14 @@
// I just fire a global event here when an emoji is clicked.
import NimblePicker from 'emoji-mart/dist-modern/components/picker/nimble-picker'
import React from 'react'
import { emit } from '../_utils/eventBus'
import { store } from '../_store/store'
import { isDarkTheme } from '../_utils/isDarkTheme'
function onEmojiSelected (emoji) {
emit('emoji-selected', emoji)
}
import { createElement } from 'react'
export default function createEmojiMartPickerFromData (data) {
return props => (
React.createElement(NimblePicker, Object.assign({
createElement(NimblePicker, Object.assign({
set: 'twitter', // same as Mastodon frontend
data, // same as Mastodon frontend
native: true,
onSelect: onEmojiSelected,
darkMode: isDarkTheme(store.get().currentTheme)
native: true
}, props))
)
}

138
yarn.lock
View File

@ -29,17 +29,6 @@
semver "^5.4.1"
source-map "^0.5.0"
"@babel/generator@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.5.tgz#873a7f936a3c89491b43536d12245b626664e3cf"
integrity sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==
dependencies:
"@babel/types" "^7.5.5"
jsesc "^2.5.1"
lodash "^4.17.13"
source-map "^0.5.0"
trim-right "^1.0.1"
"@babel/generator@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
@ -74,18 +63,6 @@
"@babel/traverse" "^7.7.4"
"@babel/types" "^7.7.4"
"@babel/helper-create-class-features-plugin@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.5.5.tgz#401f302c8ddbc0edd36f7c6b2887d8fa1122e5a4"
integrity sha512-ZsxkyYiRA7Bg+ZTRpPvB6AbOFKTFFK4LrvTet8lInm0V468MWCaSYJE+I7v2z2r8KNLtYiV+K5kTCnR7dvyZjg==
dependencies:
"@babel/helper-function-name" "^7.1.0"
"@babel/helper-member-expression-to-functions" "^7.5.5"
"@babel/helper-optimise-call-expression" "^7.0.0"
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/helper-replace-supers" "^7.5.5"
"@babel/helper-split-export-declaration" "^7.4.4"
"@babel/helper-create-regexp-features-plugin@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.7.4.tgz#6d5762359fd34f4da1500e4cff9955b5299aaf59"
@ -111,15 +88,6 @@
"@babel/traverse" "^7.7.4"
"@babel/types" "^7.7.4"
"@babel/helper-function-name@^7.1.0":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
integrity sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==
dependencies:
"@babel/helper-get-function-arity" "^7.0.0"
"@babel/template" "^7.1.0"
"@babel/types" "^7.0.0"
"@babel/helper-function-name@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e"
@ -129,13 +97,6 @@
"@babel/template" "^7.7.4"
"@babel/types" "^7.7.4"
"@babel/helper-get-function-arity@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
integrity sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==
dependencies:
"@babel/types" "^7.0.0"
"@babel/helper-get-function-arity@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
@ -150,13 +111,6 @@
dependencies:
"@babel/types" "^7.7.4"
"@babel/helper-member-expression-to-functions@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.5.5.tgz#1fb5b8ec4453a93c439ee9fe3aeea4a84b76b590"
integrity sha512-5qZ3D1uMclSNqYcXqiHoA0meVdv+xUEex9em2fqMnrk/scphGlGgg66zjMrPJESPwrFJ6sbfFQYUSa0Mz7FabA==
dependencies:
"@babel/types" "^7.5.5"
"@babel/helper-member-expression-to-functions@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.7.4.tgz#356438e2569df7321a8326644d4b790d2122cb74"
@ -202,13 +156,6 @@
"@babel/types" "^7.7.4"
lodash "^4.17.13"
"@babel/helper-optimise-call-expression@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz#a2920c5702b073c15de51106200aa8cad20497d5"
integrity sha512-u8nd9NQePYNQV8iPWu/pLLYBqZBa4ZaY1YWRFMuxrid94wKI1QNt67NEZ7GAe5Kc/0LLScbim05xZFWkAdrj9g==
dependencies:
"@babel/types" "^7.0.0"
"@babel/helper-optimise-call-expression@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.4.tgz#034af31370d2995242aa4df402c3b7794b2dcdf2"
@ -239,16 +186,6 @@
"@babel/traverse" "^7.7.4"
"@babel/types" "^7.7.4"
"@babel/helper-replace-supers@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.5.5.tgz#f84ce43df031222d2bad068d2626cb5799c34bc2"
integrity sha512-XvRFWrNnlsow2u7jXDuH4jDDctkxbS7gXssrP4q2nUD606ukXHRvydj346wmNg+zAgpFx4MWf4+usfC93bElJg==
dependencies:
"@babel/helper-member-expression-to-functions" "^7.5.5"
"@babel/helper-optimise-call-expression" "^7.0.0"
"@babel/traverse" "^7.5.5"
"@babel/types" "^7.5.5"
"@babel/helper-replace-supers@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.7.4.tgz#3c881a6a6a7571275a72d82e6107126ec9e2cdd2"
@ -267,13 +204,6 @@
"@babel/template" "^7.7.4"
"@babel/types" "^7.7.4"
"@babel/helper-split-export-declaration@^7.4.4":
version "7.4.4"
resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
integrity sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==
dependencies:
"@babel/types" "^7.4.4"
"@babel/helper-split-export-declaration@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8"
@ -309,11 +239,6 @@
esutils "^2.0.2"
js-tokens "^4.0.0"
"@babel/parser@^7.4.4", "@babel/parser@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.5.tgz#02f077ac8817d3df4a832ef59de67565e71cca4b"
integrity sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==
"@babel/parser@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb"
@ -415,13 +340,6 @@
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-typescript@^7.2.0":
version "7.3.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.3.3.tgz#a7cc3f66119a9f7ebe2de5383cce193473d65991"
integrity sha512-dGwbSMA1YhVS8+31CnPR7LB4pcbrzcV99wQzby4uAfrkZPYZlQ7ImwdpzLqi6Z6IL02b8IAL379CaMwo0x5Lag==
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-transform-arrow-functions@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.7.4.tgz#76309bd578addd8aee3b379d809c802305a98a12"
@ -668,15 +586,6 @@
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-transform-typescript@^7.3.2":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.5.5.tgz#6d862766f09b2da1cb1f7d505fe2aedab6b7d4b8"
integrity sha512-pehKf4m640myZu5B2ZviLaiBlxMCjSZ1qTEO459AXKX5GnPueyulJeCqZFs1nz/Ya2dDzXQ1NxZ/kKNWyD4h6w==
dependencies:
"@babel/helper-create-class-features-plugin" "^7.5.5"
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-typescript" "^7.2.0"
"@babel/plugin-transform-unicode-regex@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.4.tgz#a3c0f65b117c4c81c5b6484f2a5e7b95346b83ae"
@ -742,14 +651,6 @@
js-levenshtein "^1.1.3"
semver "^5.5.0"
"@babel/preset-typescript@^7.3.3":
version "7.3.3"
resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.3.3.tgz#88669911053fa16b2b276ea2ede2ca603b3f307a"
integrity sha512-mzMVuIP4lqtn4du2ynEfdO0+RYcslwrZiJHXu4MGaC1ctJiW2fyaeDrtjJGs7R/KebZ1sgowcIoWf4uRpEfKEg==
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-transform-typescript" "^7.3.2"
"@babel/runtime@^7.7.6":
version "7.7.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
@ -757,15 +658,6 @@
dependencies:
regenerator-runtime "^0.13.2"
"@babel/template@^7.1.0":
version "7.4.4"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
integrity sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==
dependencies:
"@babel/code-frame" "^7.0.0"
"@babel/parser" "^7.4.4"
"@babel/types" "^7.4.4"
"@babel/template@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
@ -775,21 +667,6 @@
"@babel/parser" "^7.7.4"
"@babel/types" "^7.7.4"
"@babel/traverse@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.5.tgz#f664f8f368ed32988cd648da9f72d5ca70f165bb"
integrity sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==
dependencies:
"@babel/code-frame" "^7.5.5"
"@babel/generator" "^7.5.5"
"@babel/helper-function-name" "^7.1.0"
"@babel/helper-split-export-declaration" "^7.4.4"
"@babel/parser" "^7.5.5"
"@babel/types" "^7.5.5"
debug "^4.1.0"
globals "^11.1.0"
lodash "^4.17.13"
"@babel/traverse@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
@ -805,7 +682,7 @@
globals "^11.1.0"
lodash "^4.17.13"
"@babel/types@^7.0.0", "@babel/types@^7.4.4", "@babel/types@^7.5.5":
"@babel/types@^7.0.0":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.5.tgz#97b9f728e182785909aa4ab56264f090a028d18a"
integrity sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==
@ -7192,11 +7069,6 @@ react-is@^16.8.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
react-shadow-dom-retarget-events@^1.0.8:
version "1.0.10"
resolved "https://registry.yarnpkg.com/react-shadow-dom-retarget-events/-/react-shadow-dom-retarget-events-1.0.10.tgz#78c3c039bf2ea4e788d91d390662c9ccaf8d92ad"
integrity sha512-OOt7ugDgSuXiy+PmMOMHqvm4ko6X+cJsre/N124dCJhLBXqv1xVLjwuhpeY7/nv7p/YxytvyfwYG+M19NMnSjQ==
read-file-relative@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/read-file-relative/-/read-file-relative-1.2.0.tgz#98f7d96eaa21d2b4c7a2febd63d2fc8cf35e9f9b"
@ -7414,14 +7286,6 @@ relateurl@0.2.x:
resolved "https://registry.yarnpkg.com/remedial/-/remedial-1.0.8.tgz#a5e4fd52a0e4956adbaf62da63a5a46a78c578a0"
integrity sha512-/62tYiOe6DzS5BqVsNpH/nkGlX45C/Sp6V+NtiN6JQNS1Viay7cWkazmRkrQrdFj2eshDe96SIQNIoMxqhzBOg==
remount@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/remount/-/remount-0.11.0.tgz#3e69a298f7dfedd6bee551d188f959475712fc69"
integrity sha512-UZESX1nFKtlhPJBMVkRbCgR/i3IHlbbYJQ97JZ7BOUPyFOFDip12nYPBqxuuM+I681guCPA5mK1n/izn03QPHQ==
dependencies:
"@babel/preset-typescript" "^7.3.3"
react-shadow-dom-retarget-events "^1.0.8"
remove-trailing-separator@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"