Optimize outline-react bundles (#214)

* Optimize outline-react bundles

* Format file
This commit is contained in:
Dominic Gannaway
2021-04-14 18:20:33 +01:00
committed by acywatson
parent b7369309d7
commit 0174151fee
13 changed files with 47 additions and 37 deletions

View File

@ -23,8 +23,8 @@ module.name_mapper='^outline-react/useOutlineRichText' -> '<PROJECT_ROOT>/packag
module.name_mapper='^outline-react/useOutlinePlainText' -> '<PROJECT_ROOT>/packages/outline-react/src/useOutlinePlainText.js'
module.name_mapper='^outline-react/useOutlineEditorEvents' -> '<PROJECT_ROOT>/packages/outline-react/src/useOutlineEditorEvents.js'
module.name_mapper='^outline-react/useOutlineAutoFormatter' -> '<PROJECT_ROOT>/packages/outline-react/src/useOutlineAutoFormatter.js'
module.name_mapper='^outline-react/useOutlineHistory' -> '<PROJECT_ROOT>/packages/outline-react/src/useOutlineHistory.js'
module.name_mapper='^outline-react/useOutlineDragonSupport' -> '<PROJECT_ROOT>/packages/outline-react/src/useOutlineDragonSupport.js'
module.name_mapper='^outline-react/OutlineHistory' -> '<PROJECT_ROOT>/packages/outline-react/src/OutlineHistory.js'
module.name_mapper='^outline-react/OutlineKeyHelpers' -> '<PROJECT_ROOT>/packages/outline-react/src/OutlineKeyHelpers.js'
module.name_mapper='^outline-react/OutlineSelectionHelpers' -> '<PROJECT_ROOT>/packages/outline-react/src/OutlineSelectionHelpers.js'
module.name_mapper='^outline-react/OutlineTextHelpers' -> '<PROJECT_ROOT>/packages/outline-react/src/OutlineTextHelpers.js'

View File

@ -7,7 +7,7 @@ import * as React from 'react';
import {isBlockNode, isTextNode} from 'outline';
import {useCallback, useEffect, useRef, useState} from 'react';
import {findTextIntersectionFromCharacters} from 'outline-react/OutlineTextHelpers';
import {updateWithoutHistory} from 'outline-react/useOutlineHistory';
import {updateWithoutHistory} from 'outline-react/OutlineHistory';
const CHARACTER_LIMIT = 30;

View File

@ -10,13 +10,11 @@ import useEmojis from './useEmojis';
import useMentions from './useMentions';
import usePlainText from 'outline-react/useOutlinePlainText';
import useOutlineAutoFormatter from 'outline-react/useOutlineAutoFormatter';
import {useOutlineHistory} from 'outline-react/useOutlineHistory';
import useToolbar from './useToolbar';
import useHashtags from './useHashtags';
import BlockControls from './BlockControls';
import useStepRecorder from './useStepRecorder';
import CharacterLimit from './CharacterLimit';
import useOutlineDragonSupport from 'outline-react/useOutlineDragonSupport';
import {Typeahead} from './Typeahead';
const editorStyle = {
@ -152,8 +150,6 @@ export function RichTextEditor({
useEmojis(outlineEditor);
useHashtags(outlineEditor);
useOutlineAutoFormatter(outlineEditor);
useOutlineHistory(outlineEditor);
useOutlineDragonSupport(outlineEditor);
return (
<>
@ -188,8 +184,6 @@ export function PlainTextEditor({
useOutlineOnChange(outlineEditor, onChange);
useEmojis(outlineEditor);
useHashtags(outlineEditor);
useOutlineHistory(outlineEditor);
useOutlineDragonSupport(outlineEditor);
const stepRecorder = useStepRecorder(outlineEditor);
return (

View File

@ -0,0 +1,3 @@
'use strict';
module.exports = require('./dist/OutlineHistory');

View File

@ -0,0 +1,24 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
*/
import type {ViewModel, OutlineEditor, View} from 'outline';
export const viewModelsWithoutHistory: Set<ViewModel> = new Set();
export function updateWithoutHistory(
editor: OutlineEditor,
updateFn: (view: View) => void,
): boolean {
const res = editor.update(updateFn);
const pendingViewModel = editor._pendingViewModel;
if (pendingViewModel !== null) {
viewModelsWithoutHistory.add(pendingViewModel);
}
return res;
}

View File

@ -13,7 +13,6 @@ import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-dom/test-utils';
import useOutlineRichText from 'outline-react/useOutlineRichText';
import {useOutlineHistory} from 'outline-react/useOutlineHistory';
import {
insertText,
@ -79,7 +78,6 @@ describe('OutlineSelection tests', () => {
function TestBase() {
editor = useOutlineEditor(ref);
const props = useOutlineRichText(editor, false);
useOutlineHistory(editor);
return <div ref={ref} contentEditable={true} {...props} />;
}

View File

@ -9,7 +9,7 @@
import type {OutlineEditor} from 'outline';
import {insertRichText} from 'outline-react/OutlineSelectionHelpers';
import {insertRichText} from './OutlineSelectionHelpers';
import {useEffect} from 'react';

View File

@ -7,13 +7,12 @@
* @flow strict-local
*/
import type {OutlineEditor, ViewModel, View} from 'outline';
import type {OutlineEditor, ViewModel} from 'outline';
import {isTextNode} from 'outline';
import {isRedo, isUndo} from './OutlineKeyHelpers';
import {useEffect, useMemo} from 'react';
const viewModelsWithoutHistory = new Set();
import {viewModelsWithoutHistory} from 'outline-react/OutlineHistory';
const MERGE = 0;
const NO_MERGE = 1;
@ -83,25 +82,13 @@ function getMergeAction(
return NO_MERGE;
}
export function updateWithoutHistory(
editor: OutlineEditor,
updateFn: (view: View) => void,
): boolean {
const res = editor.update(updateFn);
const pendingViewModel = editor._pendingViewModel;
if (pendingViewModel !== null) {
viewModelsWithoutHistory.add(pendingViewModel);
}
return res;
}
type OutlineHistoryStacks = [Array<ViewModel>, Array<ViewModel>];
type OutlineHistorySetter = (
undoStack: Array<ViewModel>,
redoStack: Array<ViewModel>,
) => void;
export function useOutlineHistory(
export default function useOutlineHistory(
editor: OutlineEditor,
): [OutlineHistoryStacks, OutlineHistorySetter] {
const historyState: {

View File

@ -36,6 +36,8 @@ import {
onPolyfilledBeforeInput,
onNativeInput,
} from './OutlineEventHandlers';
import useOutlineDragonSupport from './useOutlineDragonSupport';
import useOutlineHistory from './useOutlineHistory';
function initEditor(editor: OutlineEditor): void {
editor.update((view) => {
@ -101,6 +103,8 @@ export default function useOutlinePlainText(
}, [editor]);
useOutlineEditorEvents(events, editor, eventHandlerState);
useOutlineDragonSupport(editor);
useOutlineHistory(editor);
return CAN_USE_BEFORE_INPUT
? emptyObject

View File

@ -40,6 +40,8 @@ import {
onNativeInput,
onFocus,
} from './OutlineEventHandlers';
import useOutlineDragonSupport from './useOutlineDragonSupport';
import useOutlineHistory from './useOutlineHistory';
function initEditor(editor: OutlineEditor): void {
editor.update((view) => {
@ -124,6 +126,8 @@ export default function useOutlineRichText(
}, [editor]);
useOutlineEditorEvents(events, editor, eventHandlerState);
useOutlineDragonSupport(editor);
useOutlineHistory(editor);
return CAN_USE_BEFORE_INPUT
? emptyObject

View File

@ -1,3 +0,0 @@
'use strict';
module.exports = require('./dist/useOutlineDragonSupport');

View File

@ -1,3 +0,0 @@
'use strict';
module.exports = require('./dist/useOutlineHistory');

View File

@ -192,11 +192,13 @@ build(
);
outlineReactModules.forEach((outlineReactModule) => {
// We don't want to sync these modules
// We don't want to sync these modules, as they're bundled in the other
// modules already.
if (
isWWW &&
(outlineReactModule === 'OutlineEnv' ||
outlineReactModule === 'OutlineReactUtils')
outlineReactModule === 'OutlineEnv' ||
outlineReactModule === 'useOutlineHistory' ||
outlineReactModule === 'useOutlineDragonSupport' ||
outlineReactModule === 'OutlineReactUtils'
) {
return;
}