diff --git a/.gitignore b/.gitignore index b6c3ceb..a93c9ba 100644 --- a/.gitignore +++ b/.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 diff --git a/bin/build-inline-script.js b/bin/build-inline-script.js index 789fe24..b2cb3f2 100644 --- a/bin/build-inline-script.js +++ b/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' diff --git a/bin/build-sass.js b/bin/build-sass.js index 9ba424c..7e0d3d4 100755 --- a/bin/build-sass.js +++ b/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 } diff --git a/bin/build-svg.js b/bin/build-svg.js index de7c924..0ad477c 100755 --- a/bin/build-svg.js +++ b/bin/build-svg.js @@ -1,5 +1,3 @@ -#!/usr/bin/env node - import svgs from './svgs' import path from 'path' import fs from 'fs' diff --git a/bin/build-third-party-assets.js b/bin/build-third-party-assets.js new file mode 100644 index 0000000..dbb5e6c --- /dev/null +++ b/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) +}) diff --git a/package.json b/package.json index 0ba31ed..e8be23d 100644 --- a/package.json +++ b/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", diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html index a09eef2..a1398a2 100644 --- a/src/routes/_components/dialog/components/EmojiDialog.html +++ b/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 }) } diff --git a/src/routes/_react/createEmojiMartPicker.js b/src/routes/_react/createEmojiMartPicker.js new file mode 100644 index 0000000..b6c4d3b --- /dev/null +++ b/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 +} diff --git a/src/routes/_react/emoji-mart.js b/src/routes/_react/createEmojiMartPickerFromData.js similarity index 71% rename from src/routes/_react/emoji-mart.js rename to src/routes/_react/createEmojiMartPickerFromData.js index 5148034..deaaddd 100644 --- a/src/routes/_react/emoji-mart.js +++ b/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)) +} diff --git a/src/routes/_utils/asyncModules.js b/src/routes/_utils/asyncModules.js index 1439cdf..e08ec8f 100644 --- a/src/routes/_utils/asyncModules.js +++ b/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)