diff --git a/package.json b/package.json index 83c3c4de..0e061389 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/routes/_actions/emoji.js b/src/routes/_actions/emoji.js index 1289818a..25031f42 100644 --- a/src/routes/_actions/emoji.js +++ b/src/routes/_actions/emoji.js @@ -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 }) + } } ) } diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html index a5196013..2a90e098 100644 --- a/src/routes/_components/dialog/components/EmojiDialog.html +++ b/src/routes/_components/dialog/components/EmojiDialog.html @@ -9,7 +9,7 @@ >
{#if loaded} - +
{:elseif error}
Failed to load emoji picker: {error}
{: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) { diff --git a/src/routes/_react/createEmojiMartPickerFromData.js b/src/routes/_react/createEmojiMartPickerFromData.js index 45d4ff16..2dc34384 100644 --- a/src/routes/_react/createEmojiMartPickerFromData.js +++ b/src/routes/_react/createEmojiMartPickerFromData.js @@ -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)) ) } diff --git a/yarn.lock b/yarn.lock index 2de30730..7d933e56 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"