improve caching & perf + fix citation overwriting issues

gulpfile.ts

@@ -24,15 +24,15 @@ process.env.FORCE_COLOR = '1';
 type Callback = () => void;
 
 // prettier-ignore
-const reload = (cb: Callback) => { browserSync.reload(); cb(); }
-const clean = async () => exec(`rm -rf ${__dirname}/dist/*`);
+const reload = (cb: Callback): void => { browserSync.reload(); cb(); }
+const clean = async (): Promise<any> => exec(`rm -rf ${__dirname}/dist/*`);
 export { clean, reload };
 
 /**
  * Version bump the required files according to the version in package.json
  * Append link to changelog for current version in readme.txt
  */
-export function bump() {
+export function bump(): NodeJS.ReadWriteStream {
     const re = `== Changelog ==\n(?!\n= ${VERSION})`;
     const repl =
         '== Changelog ==\n\n' +
@@ -58,7 +58,7 @@ export function bump() {
 }
 
 // Translations
-export function pot() {
+export function pot(): NodeJS.ReadWriteStream {
     return gulp
         .src('./src/**/*.php', { base: 'dist/*' })
         .pipe(sort())
@@ -80,7 +80,7 @@ export function pot() {
 //              PHP/Static Asset Tasks
 // ==================================================
 
-export function staticFiles() {
+export function staticFiles(): NodeJS.ReadWriteStream {
     const misc = gulp
         .src('src/**/*.{po,pot,mo,html,txt,json,php}', {
             base: './src',
@@ -101,7 +101,7 @@ export function staticFiles() {
 //                 Style Tasks
 // ==================================================
 
-export function styles() {
+export function styles(): NodeJS.ReadWriteStream {
     let stream = gulp.src('src/css/**/[^_]*.scss', { base: './src' });
 
     if (!IS_PRODUCTION) {
@@ -133,7 +133,7 @@ export function styles() {
 //                 Javascript Tasks
 // ==================================================
 
-export function bundle(cb: Callback) {
+export function bundle(cb: Callback): void {
     const args = IS_PRODUCTION ? ['-p'] : [];
     const child = spawn(`${__dirname}/node_modules/.bin/webpack`, args, {
         env: process.env,
@@ -164,7 +164,7 @@ export function bundle(cb: Callback) {
     if (!IS_PRODUCTION) return cb();
 }
 
-export function js() {
+export function js(): NodeJS.ReadWriteStream {
     let stream = gulp.src('src/**/*.js', { base: './src' });
     if (IS_PRODUCTION) {
         stream = stream.pipe(uglify());

lib/scripts/before-test.ts

@@ -19,11 +19,11 @@ window.ABT = {
 class Storage {
     private items = new Map<string, string>();
 
-    getItem(key: string) {
+    getItem(key: string): string | null {
         return this.items.get(key) || null;
     }
 
-    setItem(key: string, value: string) {
+    setItem(key: string, value: string): void {
         this.items.set(key, value);
     }
 }

lib/scripts/update-styles.ts

@@ -69,7 +69,7 @@ async function getData(): Promise<StyleResponse> {
             }
         }
     `;
-    return new Promise<StyleResponse>((resolve, reject) => {
+    return new Promise<StyleResponse>((resolve, reject): void => {
         const options = {
             hostname: 'api.github.com',
             path: '/graphql',
@@ -156,7 +156,7 @@ function getNewStyles(before: StyleData, after: StyleObj[]): string[] {
     return Array.from(newlyAddedStyles);
 }
 
-async function main() {
+(async (): Promise<void> => {
     let newData: StyleData;
     try {
         newData = await getData().then(parseStyleObj);
@@ -171,8 +171,4 @@ async function main() {
         path.resolve(__dirname, '../../src/vendor/', 'citation-styles.json'),
         JSON.stringify(newData, null, 4),
     );
-}
-
-main().catch(e => {
-    throw e;
-});
+})();

lib/scripts/update-translations.ts

@@ -77,7 +77,7 @@ const LANGS: ReadonlyMap<string, string[]> = new Map([
     ],
 ]);
 
-async function getTranslations() {
+async function getTranslations(): Promise<void> {
     await exec(`rm -f ${ROOT_DIR}/src/languages/*`);
     const languages = (await sendRequest<Langs>('/languages/list', {})).result.languages.filter(
         l => l.percentage > 0 && l.code !== 'en-us',
@@ -101,7 +101,7 @@ async function getTranslations() {
     }
 }
 
-async function updateTerms() {
+async function updateTerms(): Promise<void> {
     const req = `
         curl -X POST https://api.poeditor.com/v2/projects/upload \
         -F api_token="${TOKEN}" \
@@ -118,7 +118,7 @@ async function updateTerms() {
     );
 }
 
-async function updateTranslationStatus() {
+async function updateTranslationStatus(): Promise<void> {
     interface LangWithContribs extends Language {
         contributors: string[];
     }
@@ -182,14 +182,14 @@ async function updateTranslationStatus() {
     await writeFile(`${ROOT_DIR}/README.md`, newReadme);
 }
 
-(async () => {
+(async (): Promise<void> => {
     await updateTerms();
     await getTranslations();
     await updateTranslationStatus();
 })();
 
 async function sendRequest<T>(endpoint: string, data: object): Promise<API<T>> {
-    return new Promise<API<T>>((resolve, reject) => {
+    return new Promise<API<T>>((resolve, reject): void => {
         const qs = stringify({
             api_token: TOKEN,
             id: PROJECT_ID,

lib/types/globals.d.ts

@@ -77,4 +77,5 @@ declare module 'react-select-fast-filter-options';
 declare module 'react-virtualized-select';
 declare module 'rollbar-sourcemap-webpack-plugin';
 declare module 'rollbar/dist/rollbar.umd';
+declare module 'string-hash';
 declare module 'uglify-es';

package.json

@@ -46,7 +46,7 @@
     "@types/jest": "^21.1.4",
     "@types/jquery": "^3.2.15",
     "@types/node": "^8.0.46",
-    "@types/react": "^16.0.16",
+    "@types/react": "^16.0.18",
     "@types/react-dom": "^16.0.2",
     "@types/react-motion": "^0.0.23",
     "@types/react-test-renderer": "^16.0.0",
@@ -105,6 +105,7 @@
     "react-motion": "^0.5.2",
     "react-select-fast-filter-options": "^0.2.3",
     "react-virtualized-select": "^3.1.0",
+    "string-hash": "^1.1.3",
     "styled-jsx": "^2.1.2",
     "tinycolor2": "^1.4.1",
     "typescript": "^2.5.3",

src/academic-bloggers-toolkit.pot

@@ -23,7 +23,7 @@ msgstr ""
 msgid "<strong>Notice:</strong> Rich editing must be enabled to use the Academic Blogger's Toolkit plugin"
 msgstr ""
 
-#: php/backend.php:121
+#: php/backend.php:109
 msgid "Reference List"
 msgstr ""
 

src/js/components/badge.tsx

@@ -12,7 +12,7 @@ export default class Badge extends React.PureComponent<Props> {
     static defaultProps: Partial<Props> = {
         color: `${colors.blue}`,
     };
-    render() {
+    render(): JSX.Element {
         const { count, color } = this.props;
         return (
             <div style={{ background: color }}>

src/js/components/button.tsx

@@ -36,15 +36,15 @@ export default class Button extends React.PureComponent<Props, State> {
         };
     }
 
-    hideTooltip = () => {
+    hideTooltip = (): void => {
         this.setState(prev => ({ ...prev, isShowingTooltip: false }));
     };
 
-    openLink = () => {
+    openLink = (): void => {
         window.open(this.props.href, '_blank');
     };
 
-    showTooltip = (e: React.MouseEvent<HTMLButtonElement>) => {
+    showTooltip = (e: React.MouseEvent<HTMLButtonElement>): void => {
         const { position } = this.props.tooltip!;
         const rect = e.currentTarget.getBoundingClientRect();
         this.setState(() => ({
@@ -55,7 +55,7 @@ export default class Button extends React.PureComponent<Props, State> {
 
     // Below is disabled because the class fallbacks aren't complexity-adding.
     // tslint:disable-next-line cyclomatic-complexity
-    render() {
+    render(): JSX.Element {
         const {
             flat,
             focusable,

src/js/components/callout.tsx

@@ -24,7 +24,7 @@ export default class Callout extends React.PureComponent<Props> {
         error: top.ABT.i18n.errors.prefix,
     };
 
-    render() {
+    render(): JSX.Element | null {
         const { title, children, intent, isVisible, onDismiss, ...divProps } = this.props;
         const defaultTitle =
             intent === 'danger' ? Callout.prefixes.error : Callout.prefixes.warning;

src/js/components/spinner.tsx

@@ -35,7 +35,7 @@ export default class Spinner extends React.PureComponent<Props> {
         this.style.backgroundColor = this.props.overlay ? undefined : this.props.bgColor;
     }
 
-    render() {
+    render(): JSX.Element {
         const cn = this.props.overlay ? 'abt-spinner abt-spinner_overlay' : 'abt-spinner';
         return (
             <div className={cn} style={this.style}>

src/js/components/toggle-switch.tsx

@@ -23,9 +23,9 @@ export default class ToggleSwitch extends React.Component<Props, State> {
         };
     }
 
-    hideTooltip = () => this.setState(prev => ({ ...prev, isShowingTooltip: false }));
+    hideTooltip = (): void => this.setState(prev => ({ ...prev, isShowingTooltip: false }));
 
-    showTooltip = (e: React.MouseEvent<HTMLSpanElement>) => {
+    showTooltip = (e: React.MouseEvent<HTMLSpanElement>): void => {
         const { position } = this.props.tooltip;
         const rect = e.currentTarget.getBoundingClientRect();
         this.setState(() => ({
@@ -34,7 +34,7 @@ export default class ToggleSwitch extends React.Component<Props, State> {
         }));
     };
 
-    render() {
+    render(): JSX.Element {
         const { checked, disabled, onChange, tooltip } = this.props;
         const { isShowingTooltip, transform } = this.state;
         return (

src/js/components/tooltip.tsx

@@ -54,7 +54,7 @@ export default class Tooltip extends React.PureComponent<Props> {
                     translateX(-5px)`;
         }
     };
-    render() {
+    render(): JSX.Element {
         const { active, id, text, transform } = this.props;
         return (
             <div

src/js/core/locale-store.ts

@@ -89,7 +89,7 @@ export class LocaleStore {
      * Takes locale files send via the Workers `postMessage` channel and saves them to the cache.
      * Once all files retrieved, the worker sends `done` and the cache is pushed into localStorage.
      */
-    private receiveMessage = (e: MessageEvent) => {
+    private receiveMessage = (e: MessageEvent): void => {
         if (e.data[0] === 'done') {
             const localeObj: LocaleCache = {
                 time: Date.now(),

src/js/core/processor.ts

@@ -91,9 +91,15 @@ export class Processor {
      * @param csl CSL.Data[].
      */
     prepareInlineCitationData(csl: CSL.Data[]): Citeproc.Citation {
+        // prettier-ignore
+        const citationItems = Array.from(
+            new Set(
+                csl.map(item => item.id)
+            )
+        ).map(id => ({ id }));
         return {
             citationID: generateID(),
-            citationItems: csl.map(({ id }) => ({ id })),
+            citationItems,
             // FIXME: remove this when citeproc fixes the bug
             properties: {},
         };
@@ -128,7 +134,7 @@ export class Processor {
         // "primes the pump" since citeproc currently runs synchronously
         await this.locales.fetch(locale);
         return {
-            retrieveItem: (id: string) => toJS(this.store.citations.CSL.get(id)!),
+            retrieveItem: (id: string): CSL.Data => toJS(this.store.citations.CSL.get(id)!),
             retrieveLocale: this.locales.retrieve,
         };
     }

src/js/dialogs/add/__tests__/manual-entry-container-test.tsx

@@ -67,6 +67,10 @@ describe('<ManualEntryContainer />', () => {
         select.simulate('change', { currentTarget: { value: 'book' } });
         expect(mocks.onTypeChange).toHaveBeenCalledTimes(1);
     });
+    it('should not break when ref callback receives null', () => {
+        const { instance } = setup();
+        expect(() => instance.focusTypeSelect(null)).not.toThrow();
+    });
     describe('wheel event tests', () => {
         const { component } = setup({ fullMount: false });
         const wheelDiv = component.find('.bounded-rect');