forked from cybrespace/pinafore
fix: use emoji-mart all.json, split out json (#839)
This commit is contained in:
parent
2d32a91145
commit
e6ca246527
|
@ -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
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
import crypto from 'crypto'
|
||||
import fs from 'fs'
|
||||
import pify from 'pify'
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
import svgs from './svgs'
|
||||
import path from 'path'
|
||||
import fs from 'fs'
|
||||
|
|
|
@ -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)
|
||||
})
|
|
@ -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",
|
||||
|
|
|
@ -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 })
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -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))
|
||||
}
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue