fix: use emoji-mart all.json, split out json (#839)

.gitignore

@@ -7,4 +7,5 @@ node_modules
 /static/*.css
 /static/robots.txt
 /static/inline-script.js.map
+/static/emoji-mart-all.json
 /inline-script-checksum.json

bin/build-inline-script.js

@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-
 import crypto from 'crypto'
 import fs from 'fs'
 import pify from 'pify'

bin/build-sass.js

@@ -1,14 +1,10 @@
-#!/usr/bin/env node
-
 import sass from 'node-sass'
 import path from 'path'
 import fs from 'fs'
 import pify from 'pify'
-import CleanCSS from 'clean-css'
 
 const writeFile = pify(fs.writeFile.bind(fs))
 const readdir = pify(fs.readdir.bind(fs))
-const readFile = pify(fs.readFile.bind(fs))
 const render = pify(sass.render.bind(sass))
 
 const globalScss = path.join(__dirname, '../scss/global.scss')
@@ -41,13 +37,7 @@ async function compileThemesSass () {
   }))
 }
 
-async function compileThirdPartyCss () {
-  let css = await readFile(path.resolve(__dirname, '../node_modules/emoji-mart/css/emoji-mart.css'), 'utf8')
-  css = `/* compiled from emoji-mart.css */` + new CleanCSS().minify(css).styles
-  await writeFile(path.resolve(__dirname, '../static/emoji-mart.css'), css, 'utf8')
-}
-
 export async function buildSass () {
-  let [ result ] = await Promise.all([compileGlobalSass(), compileThemesSass(), compileThirdPartyCss()])
+  let [ result ] = await Promise.all([compileGlobalSass(), compileThemesSass()])
   return result
 }

bin/build-svg.js

@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-
 import svgs from './svgs'
 import path from 'path'
 import fs from 'fs'

bin/build-third-party-assets.js

@@ -0,0 +1,33 @@
+import path from 'path'
+import fs from 'fs'
+import pify from 'pify'
+import CleanCSS from 'clean-css'
+
+const writeFile = pify(fs.writeFile.bind(fs))
+const readFile = pify(fs.readFile.bind(fs))
+const copyFile = pify(fs.copyFile.bind(fs))
+
+async function compileThirdPartyCss () {
+  let css = await readFile(path.resolve(__dirname, '../node_modules/emoji-mart/css/emoji-mart.css'), 'utf8')
+  css = `/* compiled from emoji-mart.css */` + new CleanCSS().minify(css).styles
+  await writeFile(path.resolve(__dirname, '../static/emoji-mart.css'), css, 'utf8')
+}
+
+async function compileThirdPartyJson () {
+  await copyFile(
+    path.resolve(__dirname, '../node_modules/emoji-mart/data/all.json'),
+    path.resolve(__dirname, '../static/emoji-mart-all.json')
+  )
+}
+
+async function main () {
+  await Promise.all([
+    compileThirdPartyCss(),
+    compileThirdPartyJson()
+  ])
+}
+
+main().catch(err => {
+  console.error(err)
+  process.exit(1)
+})

package.json

@@ -5,17 +5,18 @@
   "scripts": {
     "lint": "standard && standard --plugin html 'src/routes/**/*.html'",
     "lint-fix": "standard --fix && standard --fix --plugin html 'src/routes/**/*.html'",
-    "dev": "run-s build-template-html serve-dev",
+    "dev": "run-s build-template-html build-third-party-assets serve-dev",
     "serve-dev": "run-p --race build-template-html-watch sapper-dev",
     "sapper-dev": "cross-env NODE_ENV=development PORT=4002 sapper dev",
     "sapper-prod": "cross-env PORT=4002 node __sapper__/build",
     "build": "cross-env NODE_ENV=production npm run build-steps",
-    "build-steps": "run-s build-template-html sapper-build",
+    "build-steps": "run-s build-template-html build-third-party-assets sapper-build",
     "sapper-build": "sapper build",
     "start": "cross-env NODE_ENV=production npm run sapper-prod",
     "build-and-start": "run-s build start",
     "build-template-html": "node -r esm ./bin/build-template-html.js",
     "build-template-html-watch": "node -r esm ./bin/build-template-html.js --watch",
+    "build-third-party-assets": "node -r esm ./bin/build-third-party-assets.js",
     "run-mastodon": "node -r esm ./bin/run-mastodon.js",
     "test": "cross-env BROWSER=chrome:headless npm run test-browser",
     "test-browser": "run-p --race run-mastodon build-and-start test-mastodon",

src/routes/_components/dialog/components/EmojiDialog.html

@@ -50,18 +50,16 @@
   import { close } from '../helpers/closeDialog'
   import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
   import { define } from 'remount/es6'
-  import { loadCSS } from '../../../_utils/loadCSS'
   import LoadingSpinner from '../../../_components/LoadingSpinner.html'
-  import { importEmojiMart } from '../../../_utils/asyncModules'
   import { on } from '../../../_utils/eventBus'
+  import { createEmojiMartPicker } from '../../../_react/createEmojiMartPicker'
 
   export default {
     async oncreate () {
       onCreateDialog.call(this)
       on('emoji-selected', this, emoji => this.onEmojiSelected(emoji))
       try {
-        loadCSS('/emoji-mart.css')
-        let Picker = await importEmojiMart()
+        let Picker = await createEmojiMartPicker()
         if (!customElements.get('emoji-mart')) {
           define({ 'emoji-mart': Picker })
         }

src/routes/_react/createEmojiMartPicker.js

@@ -0,0 +1,20 @@
+import { importEmojiMart } from '../_utils/asyncModules'
+import { loadCSS } from '../_utils/loadCSS'
+
+async function fetchEmojiMartData () {
+  return (await fetch('/emoji-mart-all.json')).json()
+}
+
+let Picker // cache so we don't have to recreate every time
+
+export async function createEmojiMartPicker () {
+  if (!Picker) {
+    loadCSS('/emoji-mart.css')
+    let [data, createEmojiMartPickerFromData] = await Promise.all([
+      fetchEmojiMartData(),
+      importEmojiMart()
+    ])
+    Picker = createEmojiMartPickerFromData(data)
+  }
+  return Picker
+}

src/routes/_react/emoji-mart.js → src/routes/_react/createEmojiMartPickerFromData.js

@@ -3,7 +3,6 @@
 // using `remount` to pass in functions as attributes, since everything is stringified. So
 // I just fire a global event here when an emoji is clicked.
 
-import data from 'emoji-mart/data/messenger.json'
 import NimblePicker from 'emoji-mart/dist-es/components/picker/nimble-picker'
 import React from 'react'
 import { emit } from '../_utils/eventBus'
@@ -12,9 +11,11 @@ function onEmojiSelected (emoji) {
   emit('emoji-selected', emoji)
 }
 
-export default props => React.createElement(NimblePicker, Object.assign({
-  set: 'messenger',
-  data,
-  native: true,
-  onSelect: onEmojiSelected
-}, props))
+export default function createEmojiMartPickerFromData (data) {
+  return props => React.createElement(NimblePicker, Object.assign({
+    set: 'all',
+    data,
+    native: true,
+    onSelect: onEmojiSelected
+  }, props))
+}

src/routes/_utils/asyncModules.js

@@ -37,5 +37,5 @@ export const importLoggedInObservers = () => import(
   ).then(getDefault)
 
 export const importEmojiMart = () => import(
-  /* webpackChunkName: 'emoji-mart.js' */ '../_react/emoji-mart.js'
+  /* webpackChunkName: 'createEmojiMartPickerFromData.js' */ '../_react/createEmojiMartPickerFromData.js'
   ).then(getDefault)