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

This commit is contained in:
Nolan Lawson 2018-12-18 12:45:49 -08:00 committed by GitHub
parent 2d32a91145
commit e6ca246527
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 69 additions and 29 deletions

1
.gitignore vendored
View File

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

View File

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

View File

@ -1,14 +1,10 @@
#!/usr/bin/env node
import sass from 'node-sass' import sass from 'node-sass'
import path from 'path' import path from 'path'
import fs from 'fs' import fs from 'fs'
import pify from 'pify' import pify from 'pify'
import CleanCSS from 'clean-css'
const writeFile = pify(fs.writeFile.bind(fs)) const writeFile = pify(fs.writeFile.bind(fs))
const readdir = pify(fs.readdir.bind(fs)) const readdir = pify(fs.readdir.bind(fs))
const readFile = pify(fs.readFile.bind(fs))
const render = pify(sass.render.bind(sass)) const render = pify(sass.render.bind(sass))
const globalScss = path.join(__dirname, '../scss/global.scss') 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 () { export async function buildSass () {
let [ result ] = await Promise.all([compileGlobalSass(), compileThemesSass(), compileThirdPartyCss()]) let [ result ] = await Promise.all([compileGlobalSass(), compileThemesSass()])
return result return result
} }

View File

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

View File

@ -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)
})

View File

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

View File

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

View File

@ -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
}

View File

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

View File

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