rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update all dependencies (#699)

Browse Source
This commit is contained in:
Mo
2021-10-22 14:47:41 -05:00
committed by GitHub
parent fcc22ffb78
commit 413fe47828
38 changed files with 2767 additions and 4029 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc
View File

@@ -11,6 +11,7 @@
"parserOptions": { "parserOptions": {
"project": "./app/assets/javascripts/tsconfig.json" "project": "./app/assets/javascripts/tsconfig.json"
}, },
"ignorePatterns": [".eslintrc.js", "webpack.*.js"],
"rules": { "rules": {
"standard/no-callback-literal": 0, // Disable this as we have too many callbacks relying on literals "standard/no-callback-literal": 0, // Disable this as we have too many callbacks relying on literals
"no-throw-literal": 0, "no-throw-literal": 0,

14
app/assets/javascripts/components/AccountMenu/Authentication.tsx
View File

@@ -45,7 +45,7 @@ const Authentication = observer(({ application, appState }: Props) => {
useEffect(() => { useEffect(() => {
if (isEmailFocused) { if (isEmailFocused) {
emailInputRef.current.focus(); emailInputRef.current!.focus();
setIsEmailFocused(false); setIsEmailFocused(false);
} }
}, [isEmailFocused]); }, [isEmailFocused]);
@@ -64,9 +64,9 @@ const Authentication = observer(({ application, appState }: Props) => {
application.setCustomHost(value); application.setCustomHost(value);
}; };
const emailInputRef = useRef<HTMLInputElement>(); const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(); const passwordInputRef = useRef<HTMLInputElement>(null);
const passwordConfirmationInputRef = useRef<HTMLInputElement>(); const passwordConfirmationInputRef = useRef<HTMLInputElement>(null);
const handleSignInClick = () => { const handleSignInClick = () => {
setShowSignIn(true); setShowSignIn(true);
@@ -79,8 +79,8 @@ const Authentication = observer(({ application, appState }: Props) => {
}; };
const blurAuthFields = () => { const blurAuthFields = () => {
emailInputRef.current.blur(); emailInputRef.current!.blur();
passwordInputRef.current.blur(); passwordInputRef.current!.blur();
passwordConfirmationInputRef.current?.blur(); passwordConfirmationInputRef.current?.blur();
}; };
@@ -277,7 +277,7 @@ const Authentication = observer(({ application, appState }: Props) => {
onKeyDown={handleKeyPressKeyDown} onKeyDown={handleKeyPressKeyDown}
value={passwordConfirmation} value={passwordConfirmation}
onChange={handlePasswordConfirmationChange} onChange={handlePasswordConfirmationChange}
ref={passwordConfirmationInputRef} ref={passwordConfirmationInputRef!}
/> />
)} )}
<div className="sk-panel-row" /> <div className="sk-panel-row" />

6
app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
View File

@@ -29,7 +29,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
const [isEphemeral, setIsEphemeral] = useState(false); const [isEphemeral, setIsEphemeral] = useState(false);
const [shouldMergeLocal, setShouldMergeLocal] = useState(true); const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
const passwordInputRef = useRef<HTMLInputElement>(); const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
passwordInputRef?.current?.focus(); passwordInputRef?.current?.focus();
@@ -59,7 +59,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
e.preventDefault(); e.preventDefault();
if (!password) { if (!password) {
passwordInputRef?.current.focus(); passwordInputRef?.current!.focus();
return; return;
} }
@@ -89,7 +89,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
.alert(STRING_NON_MATCHING_PASSWORDS) .alert(STRING_NON_MATCHING_PASSWORDS)
.finally(() => { .finally(() => {
setConfirmPassword(''); setConfirmPassword('');
passwordInputRef?.current.focus(); passwordInputRef?.current!.focus();
}); });
} }
}; };

10
app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
View File

@@ -31,12 +31,12 @@ export const CreateAccount: FunctionComponent<Props> = observer(
}) => { }) => {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const emailInputRef = useRef<HTMLInputElement>(); const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(); const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
if (emailInputRef.current) { if (emailInputRef.current) {
emailInputRef.current.focus(); emailInputRef.current!.focus();
} }
}, []); }, []);
@@ -62,12 +62,12 @@ export const CreateAccount: FunctionComponent<Props> = observer(
e.preventDefault(); e.preventDefault();
if (!email || email.length === 0) { if (!email || email.length === 0) {
emailInputRef?.current.focus(); emailInputRef?.current!.focus();
return; return;
} }
if (!password || password.length === 0) { if (!password || password.length === 0) {
passwordInputRef?.current.focus(); passwordInputRef?.current!.focus();
return; return;
} }

2
app/assets/javascripts/components/AccountMenu/DataBackup.tsx
View File

@@ -24,7 +24,7 @@ const DataBackup = observer(({
appState appState
}: Props) => { }: Props) => {
const fileInputRef = useRef<HTMLInputElement | null>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const [isImportDataLoading, setIsImportDataLoading] = useState(false); const [isImportDataLoading, setIsImportDataLoading] = useState(false);
const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu; const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu;

4
app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx
View File

@@ -30,7 +30,7 @@ const PasscodeLock = observer(({
const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu; const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu;
const passcodeInputRef = useRef<HTMLInputElement>(); const passcodeInputRef = useRef<HTMLInputElement>(null);
const [passcode, setPasscode] = useState<string | undefined>(undefined); const [passcode, setPasscode] = useState<string | undefined>(undefined);
const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined); const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined);
@@ -155,7 +155,7 @@ const PasscodeLock = observer(({
useEffect(() => { useEffect(() => {
if (isPasscodeFocused) { if (isPasscodeFocused) {
passcodeInputRef.current.focus(); passcodeInputRef.current!.focus();
setIsPasscodeFocused(false); setIsPasscodeFocused(false);
} }
}, [isPasscodeFocused]); }, [isPasscodeFocused]);

16
app/assets/javascripts/components/AccountMenu/SignIn.tsx
View File

@@ -29,12 +29,12 @@ export const SignInPane: FunctionComponent<Props> = observer(
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [shouldMergeLocal, setShouldMergeLocal] = useState(true); const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
const emailInputRef = useRef<HTMLInputElement>(); const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(); const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
if (emailInputRef?.current) { if (emailInputRef?.current) {
emailInputRef.current.focus(); emailInputRef.current!.focus();
} }
}, []); }, []);
@@ -73,8 +73,8 @@ export const SignInPane: FunctionComponent<Props> = observer(
const signIn = () => { const signIn = () => {
setIsSigningIn(true); setIsSigningIn(true);
emailInputRef?.current.blur(); emailInputRef?.current!.blur();
passwordInputRef?.current.blur(); passwordInputRef?.current!.blur();
application application
.signIn(email, password, isStrictSignin, isEphemeral, shouldMergeLocal) .signIn(email, password, isStrictSignin, isEphemeral, shouldMergeLocal)
@@ -92,7 +92,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
application.alertService.alert(err); application.alertService.alert(err);
} }
setPassword(''); setPassword('');
passwordInputRef?.current.blur(); passwordInputRef?.current!.blur();
}) })
.finally(() => { .finally(() => {
setIsSigningIn(false); setIsSigningIn(false);
@@ -109,12 +109,12 @@ export const SignInPane: FunctionComponent<Props> = observer(
e.preventDefault(); e.preventDefault();
if (!email || email.length === 0) { if (!email || email.length === 0) {
emailInputRef?.current.focus(); emailInputRef?.current!.focus();
return; return;
} }
if (!password || password.length === 0) { if (!password || password.length === 0) {
passwordInputRef?.current.focus(); passwordInputRef?.current!.focus();
return; return;
} }

4
app/assets/javascripts/components/AutocompleteTagHint.tsx
View File

@@ -12,7 +12,7 @@ export const AutocompleteTagHint = observer(
({ appState, closeOnBlur }: Props) => { ({ appState, closeOnBlur }: Props) => {
const { autocompleteTagHintFocused } = appState.noteTags; const { autocompleteTagHintFocused } = appState.noteTags;
const hintRef = useRef<HTMLButtonElement>(); const hintRef = useRef<HTMLButtonElement>(null);
const { autocompleteSearchQuery, autocompleteTagResults } = const { autocompleteSearchQuery, autocompleteTagResults } =
appState.noteTags; appState.noteTags;
@@ -45,7 +45,7 @@ export const AutocompleteTagHint = observer(
useEffect(() => { useEffect(() => {
if (autocompleteTagHintFocused) { if (autocompleteTagHintFocused) {
hintRef.current.focus(); hintRef.current!.focus();
} }
}, [appState.noteTags, autocompleteTagHintFocused]); }, [appState.noteTags, autocompleteTagHintFocused]);

10
app/assets/javascripts/components/AutocompleteTagInput.tsx
View File

@@ -25,17 +25,17 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
const [dropdownMaxHeight, setDropdownMaxHeight] = const [dropdownMaxHeight, setDropdownMaxHeight] =
useState<number | 'auto'>('auto'); useState<number | 'auto'>('auto');
const containerRef = useRef<HTMLDivElement>(); const containerRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(); const inputRef = useRef<HTMLInputElement>(null);
const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => { const [closeOnBlur] = useCloseOnBlur(containerRef as any, (visible: boolean) => {
setDropdownVisible(visible); setDropdownVisible(visible);
appState.noteTags.clearAutocompleteSearch(); appState.noteTags.clearAutocompleteSearch();
}); });
const showDropdown = () => { const showDropdown = () => {
const { clientHeight } = document.documentElement; const { clientHeight } = document.documentElement;
const inputRect = inputRef.current.getBoundingClientRect(); const inputRect = inputRef.current!.getBoundingClientRect();
setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2); setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2);
setDropdownVisible(true); setDropdownVisible(true);
}; };
@@ -93,7 +93,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
useEffect(() => { useEffect(() => {
if (autocompleteInputFocused) { if (autocompleteInputFocused) {
inputRef.current.focus(); inputRef.current!.focus();
} }
}, [appState.noteTags, autocompleteInputFocused]); }, [appState.noteTags, autocompleteInputFocused]);

4
app/assets/javascripts/components/AutocompleteTagResult.tsx
View File

@@ -19,7 +19,7 @@ export const AutocompleteTagResult = observer(
focusedTagResultUuid, focusedTagResultUuid,
} = appState.noteTags; } = appState.noteTags;
const tagResultRef = useRef<HTMLButtonElement>(); const tagResultRef = useRef<HTMLButtonElement>(null);
const onTagOptionClick = async (tag: SNTag) => { const onTagOptionClick = async (tag: SNTag) => {
await appState.noteTags.addTagToActiveNote(tag); await appState.noteTags.addTagToActiveNote(tag);
@@ -68,7 +68,7 @@ export const AutocompleteTagResult = observer(
useEffect(() => { useEffect(() => {
if (focusedTagResultUuid === tagResult.uuid) { if (focusedTagResultUuid === tagResult.uuid) {
tagResultRef.current.focus(); tagResultRef.current!.focus();
appState.noteTags.setFocusedTagResultUuid(undefined); appState.noteTags.setFocusedTagResultUuid(undefined);
} }
}, [appState.noteTags, focusedTagResultUuid, tagResult]); }, [appState.noteTags, focusedTagResultUuid, tagResult]);

2
app/assets/javascripts/components/ConfirmSignoutModal.tsx
View File

@@ -25,7 +25,7 @@ export const ConfirmSignoutContainer = observer((props: Props) => {
const ConfirmSignoutModal = observer(({ application, appState }: Props) => { const ConfirmSignoutModal = observer(({ application, appState }: Props) => {
const [deleteLocalBackups, setDeleteLocalBackups] = useState(false); const [deleteLocalBackups, setDeleteLocalBackups] = useState(false);
const cancelRef = useRef<HTMLButtonElement>(); const cancelRef = useRef<HTMLButtonElement>(null);
function closeDialog() { function closeDialog() {
appState.accountMenu.setSigningOut(false); appState.accountMenu.setSigningOut(false);
} }

2
app/assets/javascripts/components/ConfirmationDialog.tsx
View File

@@ -9,7 +9,7 @@ import { useRef } from 'preact/hooks';
export const ConfirmationDialog: FunctionComponent<{ export const ConfirmationDialog: FunctionComponent<{
title: string | ComponentChildren; title: string | ComponentChildren;
}> = ({ title, children }) => { }> = ({ title, children }) => {
const ldRef = useRef<HTMLButtonElement>(); const ldRef = useRef<HTMLButtonElement>(null);
return ( return (
<AlertDialog leastDestructiveRef={ldRef}> <AlertDialog leastDestructiveRef={ldRef}>

2
app/assets/javascripts/components/FloatingLabelInput.tsx
View File

@@ -29,7 +29,7 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
className = '', className = '',
labelClassName = '', labelClassName = '',
inputClassName = '', inputClassName = '',
}, }: Props,
ref: Ref<HTMLInputElement> ref: Ref<HTMLInputElement>
) => { ) => {
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);

2
app/assets/javascripts/components/InputWithIcon.tsx
View File

@@ -42,7 +42,7 @@ export const InputWithIcon: FunctionComponent<Props> = forwardRef(
disabled, disabled,
toggle, toggle,
placeholder, placeholder,
}, }: Props,
ref: Ref<HTMLInputElement> ref: Ref<HTMLInputElement>
) => { ) => {
const handleToggle = () => { const handleToggle = () => {

6
app/assets/javascripts/components/NoteTag.tsx
View File

@@ -14,9 +14,9 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
const [showDeleteButton, setShowDeleteButton] = useState(false); const [showDeleteButton, setShowDeleteButton] = useState(false);
const [tagClicked, setTagClicked] = useState(false); const [tagClicked, setTagClicked] = useState(false);
const deleteTagRef = useRef<HTMLButtonElement>(); const deleteTagRef = useRef<HTMLButtonElement>(null);
const tagRef = useRef<HTMLButtonElement>(); const tagRef = useRef<HTMLButtonElement>(null);
const deleteTag = () => { const deleteTag = () => {
appState.noteTags.focusPreviousTag(tag); appState.noteTags.focusPreviousTag(tag);
@@ -84,7 +84,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
useEffect(() => { useEffect(() => {
if (focusedTagUuid === tag.uuid) { if (focusedTagUuid === tag.uuid) {
tagRef.current.focus(); tagRef.current!.focus();
} }
}, [appState.noteTags, focusedTagUuid, tag]); }, [appState.noteTags, focusedTagUuid, tag]);

6
app/assets/javascripts/components/NotesContextMenu.tsx
View File

@@ -17,14 +17,14 @@ const NotesContextMenu = observer(({ application, appState }: Props) => {
contextMenuMaxHeight, contextMenuMaxHeight,
} = appState.notes; } = appState.notes;
const contextMenuRef = useRef<HTMLDivElement>(); const contextMenuRef = useRef<HTMLDivElement>(null);
const [closeOnBlur] = useCloseOnBlur( const [closeOnBlur] = useCloseOnBlur(
contextMenuRef, contextMenuRef as any,
(open: boolean) => appState.notes.setContextMenuOpen(open) (open: boolean) => appState.notes.setContextMenuOpen(open)
); );
useCloseOnClickOutside( useCloseOnClickOutside(
contextMenuRef, contextMenuRef as any,
(open: boolean) => appState.notes.setContextMenuOpen(open) (open: boolean) => appState.notes.setContextMenuOpen(open)
); );

6
app/assets/javascripts/components/NotesOptions.tsx
View File

@@ -151,7 +151,7 @@ export const NotesOptions = observer(
const pinned = notes.some((note) => note.pinned); const pinned = notes.some((note) => note.pinned);
const unpinned = notes.some((note) => !note.pinned); const unpinned = notes.some((note) => !note.pinned);
const tagsButtonRef = useRef<HTMLButtonElement>(); const tagsButtonRef = useRef<HTMLButtonElement>(null);
const iconClass = 'color-neutral mr-2'; const iconClass = 'color-neutral mr-2';
@@ -183,7 +183,7 @@ export const NotesOptions = observer(
).fontSize; ).fontSize;
const maxTagsMenuSize = parseFloat(defaultFontSize) * 30; const maxTagsMenuSize = parseFloat(defaultFontSize) * 30;
const { clientWidth, clientHeight } = document.documentElement; const { clientWidth, clientHeight } = document.documentElement;
const buttonRect = tagsButtonRef.current.getBoundingClientRect(); const buttonRect = tagsButtonRef.current!.getBoundingClientRect();
const footerHeight = 32; const footerHeight = 32;
if (buttonRect.top + maxTagsMenuSize > clientHeight - footerHeight) { if (buttonRect.top + maxTagsMenuSize > clientHeight - footerHeight) {
@@ -289,7 +289,7 @@ export const NotesOptions = observer(
onKeyDown={(event) => { onKeyDown={(event) => {
if (event.key === 'Escape') { if (event.key === 'Escape') {
setTagsMenuOpen(false); setTagsMenuOpen(false);
tagsButtonRef.current.focus(); tagsButtonRef.current!.focus();
} }
}} }}
style={{ style={{

10
app/assets/javascripts/components/NotesOptionsPanel.tsx
View File

@@ -24,9 +24,9 @@ export const NotesOptionsPanel = observer(({ application, appState }: Props) =>
right: 0, right: 0,
}); });
const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto'); const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto');
const buttonRef = useRef<HTMLButtonElement>(); const buttonRef = useRef<HTMLButtonElement>(null);
const panelRef = useRef<HTMLDivElement>(); const panelRef = useRef<HTMLDivElement>(null);
const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen); const [closeOnBlur] = useCloseOnBlur(panelRef as any, setOpen);
const [submenuOpen, setSubmenuOpen] = useState(false); const [submenuOpen, setSubmenuOpen] = useState(false);
const onSubmenuChange = (open: boolean) => { const onSubmenuChange = (open: boolean) => {
@@ -37,7 +37,7 @@ export const NotesOptionsPanel = observer(({ application, appState }: Props) =>
<Disclosure <Disclosure
open={open} open={open}
onChange={() => { onChange={() => {
const rect = buttonRef.current.getBoundingClientRect(); const rect = buttonRef.current!.getBoundingClientRect();
const { clientHeight } = document.documentElement; const { clientHeight } = document.documentElement;
const footerHeight = 32; const footerHeight = 32;
setMaxHeight(clientHeight - rect.bottom - footerHeight - 2); setMaxHeight(clientHeight - rect.bottom - footerHeight - 2);
@@ -65,7 +65,7 @@ export const NotesOptionsPanel = observer(({ application, appState }: Props) =>
onKeyDown={(event) => { onKeyDown={(event) => {
if (event.key === 'Escape' && !submenuOpen) { if (event.key === 'Escape' && !submenuOpen) {
setOpen(false); setOpen(false);
buttonRef.current.focus(); buttonRef.current!.focus();
} }
}} }}
ref={panelRef} ref={panelRef}

2
app/assets/javascripts/components/OtherSessionsSignOut.tsx
View File

@@ -23,7 +23,7 @@ export const OtherSessionsSignOutContainer = observer((props: Props) => {
const ConfirmOtherSessionsSignOut = observer( const ConfirmOtherSessionsSignOut = observer(
({ application, appState }: Props) => { ({ application, appState }: Props) => {
const cancelRef = useRef<HTMLButtonElement>(); const cancelRef = useRef<HTMLButtonElement>(null);
function closeDialog() { function closeDialog() {
appState.accountMenu.setOtherSessionsSignOut(false); appState.accountMenu.setOtherSessionsSignOut(false);
} }

26
app/assets/javascripts/components/QuickSettingsMenu.tsx
View File

@@ -79,11 +79,11 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
const [themesMenuPosition, setThemesMenuPosition] = useState({}); const [themesMenuPosition, setThemesMenuPosition] = useState({});
const [defaultThemeOn, setDefaultThemeOn] = useState(false); const [defaultThemeOn, setDefaultThemeOn] = useState(false);
const themesMenuRef = useRef<HTMLDivElement>(); const themesMenuRef = useRef<HTMLDivElement>(null);
const themesButtonRef = useRef<HTMLButtonElement>(); const themesButtonRef = useRef<HTMLButtonElement>(null);
const prefsButtonRef = useRef<HTMLButtonElement>(); const prefsButtonRef = useRef<HTMLButtonElement>(null);
const quickSettingsMenuRef = useRef<HTMLDivElement>(); const quickSettingsMenuRef = useRef<HTMLDivElement>(null);
const defaultThemeButtonRef = useRef<HTMLButtonElement>(); const defaultThemeButtonRef = useRef<HTMLButtonElement>(null);
const reloadThemes = useCallback(() => { const reloadThemes = useCallback(() => {
application.streamItems(ContentType.Theme, () => { application.streamItems(ContentType.Theme, () => {
@@ -119,20 +119,20 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
useEffect(() => { useEffect(() => {
if (themesMenuOpen) { if (themesMenuOpen) {
defaultThemeButtonRef.current.focus(); defaultThemeButtonRef.current!.focus();
} }
}, [themesMenuOpen]); }, [themesMenuOpen]);
useEffect(() => { useEffect(() => {
prefsButtonRef.current.focus(); prefsButtonRef.current!.focus();
}, []); }, []);
const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen); const [closeOnBlur] = useCloseOnBlur(themesMenuRef as any, setThemesMenuOpen);
const toggleThemesMenu = () => { const toggleThemesMenu = () => {
if (!themesMenuOpen) { if (!themesMenuOpen) {
const themesButtonRect = const themesButtonRect =
themesButtonRef.current.getBoundingClientRect(); themesButtonRef.current!.getBoundingClientRect();
setThemesMenuPosition({ setThemesMenuPosition({
left: themesButtonRect.right, left: themesButtonRect.right,
bottom: bottom:
@@ -155,7 +155,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
switch (event.key) { switch (event.key) {
case 'Escape': case 'Escape':
setThemesMenuOpen(false); setThemesMenuOpen(false);
themesButtonRef.current.focus(); themesButtonRef.current!.focus();
break; break;
case 'ArrowRight': case 'ArrowRight':
if (!themesMenuOpen) { if (!themesMenuOpen) {
@@ -167,7 +167,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> =
(event) => { (event) => {
const items: NodeListOf<HTMLButtonElement> = const items: NodeListOf<HTMLButtonElement> =
quickSettingsMenuRef.current.querySelectorAll(':scope > button'); quickSettingsMenuRef.current!.querySelectorAll(':scope > button');
const currentFocusedIndex = Array.from(items).findIndex( const currentFocusedIndex = Array.from(items).findIndex(
(btn) => btn === document.activeElement (btn) => btn === document.activeElement
); );
@@ -198,7 +198,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = ( const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (
event event
) => { ) => {
const themes = themesMenuRef.current.querySelectorAll('button'); const themes = themesMenuRef.current!.querySelectorAll('button');
const currentFocusedIndex = Array.from(themes).findIndex( const currentFocusedIndex = Array.from(themes).findIndex(
(themeBtn) => themeBtn === document.activeElement (themeBtn) => themeBtn === document.activeElement
); );
@@ -208,7 +208,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
case 'ArrowLeft': case 'ArrowLeft':
event.stopPropagation(); event.stopPropagation();
setThemesMenuOpen(false); setThemesMenuOpen(false);
themesButtonRef.current.focus(); themesButtonRef.current!.focus();
break; break;
case 'ArrowDown': case 'ArrowDown':
if (themes[currentFocusedIndex + 1]) { if (themes[currentFocusedIndex + 1]) {

8
app/assets/javascripts/components/SearchOptions.tsx
View File

@@ -33,9 +33,9 @@ const SearchOptions = observer(({ appState }: Props) => {
right: 0, right: 0,
}); });
const [maxWidth, setMaxWidth] = useState<number | 'auto'>('auto'); const [maxWidth, setMaxWidth] = useState<number | 'auto'>('auto');
const buttonRef = useRef<HTMLButtonElement>(); const buttonRef = useRef<HTMLButtonElement>(null);
const panelRef = useRef<HTMLDivElement>(); const panelRef = useRef<HTMLDivElement>(null);
const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef, setOpen); const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef as any, setOpen);
async function toggleIncludeProtectedContents() { async function toggleIncludeProtectedContents() {
setLockCloseOnBlur(true); setLockCloseOnBlur(true);
@@ -47,7 +47,7 @@ const SearchOptions = observer(({ appState }: Props) => {
} }
const updateWidthAndPosition = () => { const updateWidthAndPosition = () => {
const rect = buttonRef.current.getBoundingClientRect(); const rect = buttonRef.current!.getBoundingClientRect();
setMaxWidth(rect.right - 16); setMaxWidth(rect.right - 16);
setPosition({ setPosition({
top: rect.bottom, top: rect.bottom,

2
app/assets/javascripts/components/SessionsModal.tsx
View File

@@ -109,7 +109,7 @@ const SessionsModal: FunctionComponent<{
const [confirmRevokingSessionUuid, setRevokingSessionUuid] = useState(''); const [confirmRevokingSessionUuid, setRevokingSessionUuid] = useState('');
const closeRevokeSessionAlert = () => setRevokingSessionUuid(''); const closeRevokeSessionAlert = () => setRevokingSessionUuid('');
const cancelRevokeRef = useRef<HTMLButtonElement>(); const cancelRevokeRef = useRef<HTMLButtonElement>(null);
const formatter = useMemo( const formatter = useMemo(
() => () =>

12
app/assets/javascripts/components/menu/Menu.tsx
View File

@@ -22,7 +22,7 @@ type MenuProps = {
export const Menu: FunctionComponent<MenuProps> = forwardRef( export const Menu: FunctionComponent<MenuProps> = forwardRef(
( (
{ children, className = '', style, a11yLabel, closeMenu }, { children, className = '', style, a11yLabel, closeMenu }: MenuProps,
ref: Ref<HTMLMenuElement> ref: Ref<HTMLMenuElement>
) => { ) => {
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(0);
@@ -37,12 +37,12 @@ export const Menu: FunctionComponent<MenuProps> = forwardRef(
break; break;
case 'End': case 'End':
setCurrentIndex( setCurrentIndex(
menuItemRefs.current.length ? menuItemRefs.current.length - 1 : 0 menuItemRefs.current!.length ? menuItemRefs.current!.length - 1 : 0
); );
break; break;
case 'ArrowDown': case 'ArrowDown':
setCurrentIndex((index) => { setCurrentIndex((index) => {
if (index + 1 < menuItemRefs.current.length) { if (index + 1 < menuItemRefs.current!.length) {
return index + 1; return index + 1;
} else { } else {
return 0; return 0;
@@ -54,7 +54,7 @@ export const Menu: FunctionComponent<MenuProps> = forwardRef(
if (index - 1 > -1) { if (index - 1 > -1) {
return index - 1; return index - 1;
} else { } else {
return menuItemRefs.current.length - 1; return menuItemRefs.current!.length - 1;
} }
}); });
break; break;
@@ -75,9 +75,9 @@ export const Menu: FunctionComponent<MenuProps> = forwardRef(
Array.from(instance.children).forEach((child) => { Array.from(instance.children).forEach((child) => {
if ( if (
child.getAttribute('role')?.includes('menuitem') && child.getAttribute('role')?.includes('menuitem') &&
!menuItemRefs.current.includes(child as HTMLButtonElement) !menuItemRefs.current!.includes(child as HTMLButtonElement)
) { ) {
menuItemRefs.current.push(child as HTMLButtonElement); menuItemRefs.current!.push(child as HTMLButtonElement);
} }
}); });
} }

4
app/assets/javascripts/components/menu/MenuItem.tsx
View File

@@ -39,7 +39,7 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
icon, icon,
iconClassName, iconClassName,
tabIndex, tabIndex,
}, }: MenuItemProps,
ref: Ref<HTMLButtonElement> ref: Ref<HTMLButtonElement>
) => { ) => {
return type === MenuItemType.SwitchButton && return type === MenuItemType.SwitchButton &&
@@ -90,7 +90,7 @@ type ListElementProps = {
}; };
export const MenuItemListElement: FunctionComponent<ListElementProps> = export const MenuItemListElement: FunctionComponent<ListElementProps> =
forwardRef(({ children, isFirstMenuItem }, ref: Ref<HTMLLIElement>) => { forwardRef(({ children, isFirstMenuItem }: ListElementProps, ref: Ref<HTMLLIElement>) => {
const child = children as VNode<unknown>; const child = children as VNode<unknown>;
return ( return (

2
app/assets/javascripts/components/shared/ModalDialog.tsx
View File

@@ -8,7 +8,7 @@ import { useRef } from '@node_modules/preact/hooks';
import { IconButton } from '@/components/IconButton'; import { IconButton } from '@/components/IconButton';
export const ModalDialog: FunctionComponent = ({ children }) => { export const ModalDialog: FunctionComponent = ({ children }) => {
const ldRef = useRef<HTMLButtonElement>(); const ldRef = useRef<HTMLButtonElement>(null);
return ( return (
<AlertDialog leastDestructiveRef={ldRef}> <AlertDialog leastDestructiveRef={ldRef}>

2
app/assets/javascripts/components/utils.ts
View File

@@ -8,7 +8,7 @@ import { useEffect } from 'react';
* monitored. * monitored.
*/ */
export function useCloseOnBlur( export function useCloseOnBlur(
container: { current: HTMLDivElement }, container: { current?: HTMLDivElement },
setOpen: (open: boolean) => void setOpen: (open: boolean) => void
): [ ): [
(event: { relatedTarget: EventTarget | null }) => void, (event: { relatedTarget: EventTarget | null }) => void,

2
app/assets/javascripts/preferences/panes/Extensions.tsx
View File

@@ -48,7 +48,7 @@ export const Extensions: FunctionComponent<{
useEffect(() => { useEffect(() => {
if (confirmableExtension) { if (confirmableExtension) {
confirmableEnd.current.scrollIntoView({ behavior: 'smooth' }); confirmableEnd.current!.scrollIntoView({ behavior: 'smooth' });
} }
}, [confirmableExtension, confirmableEnd]); }, [confirmableExtension, confirmableEnd]);

2
app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
View File

@@ -47,7 +47,7 @@ const RenameExtension: FunctionComponent<{
useEffect(() => { useEffect(() => {
if (isRenaming) { if (isRenaming) {
inputRef.current.focus(); inputRef.current!.focus();
} }
}, [inputRef, isRenaming]); }, [inputRef, isRenaming]);

2
app/assets/javascripts/preferences/panes/security-segments/DataBackups.tsx
View File

@@ -26,7 +26,7 @@ export const DataBackups = observer(({
appState appState
}: Props) => { }: Props) => {
const fileInputRef = useRef<HTMLInputElement | null>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const [isImportDataLoading, setIsImportDataLoading] = useState(false); const [isImportDataLoading, setIsImportDataLoading] = useState(false);
const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu; const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu;

4
app/assets/javascripts/preferences/panes/security-segments/PasscodeLock.tsx
View File

@@ -32,7 +32,7 @@ export const PasscodeLock = observer(({
const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu; const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu;
const passcodeInputRef = useRef<HTMLInputElement>(); const passcodeInputRef = useRef<HTMLInputElement>(null);
const [passcode, setPasscode] = useState<string | undefined>(undefined); const [passcode, setPasscode] = useState<string | undefined>(undefined);
const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined); const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined);
@@ -157,7 +157,7 @@ export const PasscodeLock = observer(({
useEffect(() => { useEffect(() => {
if (isPasscodeFocused) { if (isPasscodeFocused) {
passcodeInputRef.current.focus(); passcodeInputRef.current!.focus();
setIsPasscodeFocused(false); setIsPasscodeFocused(false);
} }
}, [isPasscodeFocused]); }, [isPasscodeFocused]);

18
app/assets/javascripts/purchaseFlow/panes/CreateAccount.tsx
View File

@@ -28,12 +28,12 @@ export const CreateAccount: FunctionComponent<Props> = observer(
const [isEmailInvalid, setIsEmailInvalid] = useState(false); const [isEmailInvalid, setIsEmailInvalid] = useState(false);
const [isPasswordNotMatching, setIsPasswordNotMatching] = useState(false); const [isPasswordNotMatching, setIsPasswordNotMatching] = useState(false);
const emailInputRef = useRef<HTMLInputElement>(); const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(); const passwordInputRef = useRef<HTMLInputElement>(null);
const confirmPasswordInputRef = useRef<HTMLInputElement>(); const confirmPasswordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
if (emailInputRef.current) emailInputRef.current.focus(); if (emailInputRef.current) emailInputRef.current!.focus();
}, []); }, []);
const handleEmailChange = (e: Event) => { const handleEmailChange = (e: Event) => {
@@ -62,30 +62,30 @@ export const CreateAccount: FunctionComponent<Props> = observer(
const handleCreateAccount = async () => { const handleCreateAccount = async () => {
if (!email) { if (!email) {
emailInputRef?.current.focus(); emailInputRef?.current!.focus();
return; return;
} }
if (!isEmailValid(email)) { if (!isEmailValid(email)) {
setIsEmailInvalid(true); setIsEmailInvalid(true);
emailInputRef?.current.focus(); emailInputRef?.current!.focus();
return; return;
} }
if (!password) { if (!password) {
passwordInputRef?.current.focus(); passwordInputRef?.current!.focus();
return; return;
} }
if (!confirmPassword) { if (!confirmPassword) {
confirmPasswordInputRef?.current.focus(); confirmPasswordInputRef?.current!.focus();
return; return;
} }
if (password !== confirmPassword) { if (password !== confirmPassword) {
setConfirmPassword(''); setConfirmPassword('');
setIsPasswordNotMatching(true); setIsPasswordNotMatching(true);
confirmPasswordInputRef?.current.focus(); confirmPasswordInputRef?.current!.focus();
return; return;
} }

12
app/assets/javascripts/purchaseFlow/panes/SignIn.tsx
View File

@@ -27,11 +27,11 @@ export const SignIn: FunctionComponent<Props> = observer(
const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); const [isPasswordInvalid, setIsPasswordInvalid] = useState(false);
const [otherErrorMessage, setOtherErrorMessage] = useState(''); const [otherErrorMessage, setOtherErrorMessage] = useState('');
const emailInputRef = useRef<HTMLInputElement>(); const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(); const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
if (emailInputRef.current) emailInputRef.current.focus(); if (emailInputRef.current) emailInputRef.current!.focus();
}, []); }, []);
const handleEmailChange = (e: Event) => { const handleEmailChange = (e: Event) => {
@@ -56,18 +56,18 @@ export const SignIn: FunctionComponent<Props> = observer(
const handleSignIn = async () => { const handleSignIn = async () => {
if (!email) { if (!email) {
emailInputRef?.current.focus(); emailInputRef?.current!.focus();
return; return;
} }
if (!isEmailValid(email)) { if (!isEmailValid(email)) {
setIsEmailInvalid(true); setIsEmailInvalid(true);
emailInputRef?.current.focus(); emailInputRef?.current!.focus();
return; return;
} }
if (!password) { if (!password) {
passwordInputRef?.current.focus(); passwordInputRef?.current!.focus();
return; return;
} }

2
app/assets/javascripts/views/challenge_modal/challenge_modal.tsx
View File

@@ -244,7 +244,7 @@ export class ChallengeModal extends WebDirective {
} }
function ChallengeModalView({ ctrl }: { ctrl: ChallengeModalCtrl }) { function ChallengeModalView({ ctrl }: { ctrl: ChallengeModalCtrl }) {
const initialFocusRef = useRef<HTMLInputElement>(); const initialFocusRef = useRef<HTMLInputElement>(null);
return ( return (
<Dialog <Dialog
initialFocusRef={initialFocusRef} initialFocusRef={initialFocusRef}

82
package.json
View File

@@ -19,63 +19,63 @@
"tsc": "tsc --project app/assets/javascripts/tsconfig.json" "tsc": "tsc --project app/assets/javascripts/tsconfig.json"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.15.8",
"@babel/plugin-transform-react-jsx": "^7.12.16", "@babel/plugin-transform-react-jsx": "^7.14.9",
"@babel/preset-env": "^7.12.16", "@babel/preset-env": "^7.15.8",
"@babel/preset-typescript": "^7.12.16", "@babel/preset-typescript": "^7.15.0",
"@reach/disclosure": "^0.14.0", "@reach/disclosure": "^0.16.2",
"@reach/visually-hidden": "^0.14.0", "@reach/visually-hidden": "^0.16.0",
"@svgr/webpack": "^5.5.0", "@svgr/webpack": "^5.5.0",
"@types/angular": "^1.8.0", "@types/angular": "^1.8.3",
"@types/lodash": "^4.14.168", "@types/lodash": "^4.14.176",
"@types/pug": "^2.0.4", "@types/pug": "^2.0.5",
"@types/react": "^17.0.0", "@types/react": "^17.0.31",
"@typescript-eslint/eslint-plugin": "^4.14.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.14.0", "@typescript-eslint/parser": "^5.1.0",
"angular": "^1.8.2", "angular": "^1.8.2",
"apply-loader": "^2.0.0", "apply-loader": "^2.0.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.3",
"babel-plugin-angularjs-annotate": "^0.10.0", "babel-plugin-angularjs-annotate": "^0.10.0",
"connect": "^3.7.0", "connect": "^3.7.0",
"css-loader": "^3.4.2", "css-loader": "^6.4.0",
"dotenv": "^8.2.0", "dotenv": "^10.0.0",
"eslint": "^7.18.0", "eslint": "^8.0.1",
"eslint-config-prettier": "^7.2.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.22.0", "eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^5.1.0", "file-loader": "^6.2.0",
"html-webpack-plugin": "^4.3.0", "html-webpack-plugin": "^5.4.0",
"lodash": "^4.17.20", "lodash": "^4.17.21",
"mini-css-extract-plugin": "^0.9.0", "mini-css-extract-plugin": "^2.4.3",
"ng-cache-loader": "0.0.26", "ng-cache-loader": "0.0.26",
"node-sass": "^4.14.1", "node-sass": "^6.0.1",
"pug": "^3.0.1", "pug": "^3.0.2",
"pug-loader": "^2.4.0", "pug-loader": "^2.4.0",
"sass-loader": "^8.0.2", "sass-loader": "^12.2.0",
"serve-static": "^1.14.1", "serve-static": "^1.14.1",
"sn-stylekit": "5.2.8", "sn-stylekit": "5.2.8",
"ts-loader": "^8.0.17", "ts-loader": "^9.2.6",
"typescript": "4.2.3", "typescript": "4.4.4",
"typescript-eslint": "0.0.1-alpha.0", "typescript-eslint": "0.0.1-alpha.0",
"webpack": "^4.44.1", "webpack": "^5.59.1",
"webpack-cli": "^3.3.12", "webpack-cli": "^4.9.1",
"webpack-dev-server": "^3.11.2", "webpack-dev-server": "^4.3.1",
"webpack-merge": "^5.7.3" "webpack-merge": "^5.8.0"
}, },
"dependencies": { "dependencies": {
"@bugsnag/js": "^7.6.0", "@bugsnag/js": "^7.13.2",
"@reach/alert": "^0.13.0", "@reach/alert": "^0.16.0",
"@reach/alert-dialog": "^0.13.0", "@reach/alert-dialog": "^0.16.2",
"@reach/checkbox": "^0.13.2", "@reach/checkbox": "^0.16.0",
"@reach/dialog": "^0.13.0", "@reach/dialog": "^0.16.2",
"@reach/listbox": "^0.16.1", "@reach/listbox": "^0.16.2",
"@standardnotes/features": "1.7.2", "@standardnotes/features": "1.7.2",
"@standardnotes/sncrypto-web": "1.5.2", "@standardnotes/sncrypto-web": "^1.5.3",
"@standardnotes/snjs": "2.16.0", "@standardnotes/snjs": "2.16.0",
"mobx": "^6.3.2", "mobx": "^6.3.5",
"mobx-react-lite": "^3.2.0", "mobx-react-lite": "^3.2.1",
"preact": "^10.5.12", "preact": "^10.5.15",
"qrcode.react": "^1.0.1" "qrcode.react": "^1.0.1"
} }
} }

208
webpack.config.js
View File

@@ -3,112 +3,106 @@ const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
require('dotenv').config(); require('dotenv').config();
module.exports = ( const WebEnv = {
env = { platform: 'web',
platform: 'web', };
}
) => ({ module.exports = (env) => {
entry: './app/assets/javascripts/index.ts', env = Object.assign(env, WebEnv);
output: { return {
filename: './javascripts/app.js', entry: './app/assets/javascripts/index.ts',
}, output: {
plugins: [ filename: './javascripts/app.js',
new webpack.DefinePlugin({
__VERSION__: JSON.stringify(require('./package.json').version),
__WEB__: JSON.stringify(env.platform === 'web'),
__DESKTOP__: JSON.stringify(env.platform === 'desktop'),
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
filename: './stylesheets/app.css',
ignoreOrder: true, // Enable to remove warnings about conflicting order
}),
],
resolve: {
extensions: ['.ts', '.tsx', '.js'],
alias: {
'%': path.resolve(__dirname, 'app/assets/templates'),
'@': path.resolve(__dirname, 'app/assets/javascripts'),
'@Controllers': path.resolve(
__dirname,
'app/assets/javascripts/controllers'
),
'@Views': path.resolve(__dirname, 'app/assets/javascripts/views'),
'@Services': path.resolve(__dirname, 'app/assets/javascripts/services'),
'@node_modules': path.resolve(__dirname, 'node_modules'),
react: 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react-dom': 'preact/compat',
}, },
}, plugins: [
module: { new webpack.DefinePlugin({
rules: [ __VERSION__: JSON.stringify(require('./package.json').version),
{ __WEB__: JSON.stringify(env.platform === 'web'),
test: /\.(js|tsx?)$/, __DESKTOP__: JSON.stringify(env.platform === 'desktop'),
exclude: /(node_modules)/, }),
use: [ new MiniCssExtractPlugin({
'babel-loader', // Options similar to the same options in webpackOptions.output
{ filename: './stylesheets/app.css',
loader: 'ts-loader', ignoreOrder: true, // Enable to remove warnings about conflicting order
options: { }),
transpileOnly: true,
},
},
],
},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../', // The base assets directory in relation to the stylesheets
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'sass-loader',
],
},
{
test: /\.svg$/,
use: ['@svgr/webpack'],
},
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
},
{
test: /\.html$/,
exclude: [path.resolve(__dirname, 'index.html')],
use: [
{
loader: 'ng-cache-loader',
options: {
prefix: 'templates:**',
},
},
],
},
{
test: /\.pug$/,
use: [
{
loader: 'apply-loader',
},
{
loader: 'pug-loader',
},
],
},
], ],
}, resolve: {
}); extensions: ['.ts', '.tsx', '.js'],
fallback: {
crypto: false,
path: false,
},
alias: {
'%': path.resolve(__dirname, 'app/assets/templates'),
'@': path.resolve(__dirname, 'app/assets/javascripts'),
'@Controllers': path.resolve(
__dirname,
'app/assets/javascripts/controllers'
),
'@Views': path.resolve(__dirname, 'app/assets/javascripts/views'),
'@Services': path.resolve(__dirname, 'app/assets/javascripts/services'),
'@node_modules': path.resolve(__dirname, 'node_modules'),
react: 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react-dom': 'preact/compat',
},
},
module: {
rules: [
{
test: /\.(js|tsx?)$/,
exclude: /(node_modules)/,
use: [
'babel-loader',
{
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
],
},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../', // The base assets directory in relation to the stylesheets
},
},
'css-loader',
'sass-loader',
],
},
{
test: /\.svg$/,
use: ['@svgr/webpack'],
},
{
test: /\.html$/,
exclude: [path.resolve(__dirname, 'index.html')],
use: [
{
loader: 'ng-cache-loader',
options: {
prefix: 'templates:**',
},
},
],
},
{
test: /\.pug$/,
use: [
{
loader: 'apply-loader',
},
{
loader: 'pug-loader',
},
],
},
],
},
};
};

35
webpack.dev.js
View File

@@ -2,32 +2,33 @@ const { merge } = require('webpack-merge');
const config = require('./webpack.config.js'); const config = require('./webpack.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebEnv = {
platform: 'web',
};
module.exports = (env, argv) => { module.exports = (env, argv) => {
const port = argv.port || 3001; const port = argv.port || 3001;
return merge(config(env, argv), { return merge(config(Object.assign(env, WebEnv), argv), {
mode: 'development', mode: 'development',
/** Only create an html file for the dev-server */ optimization: {
plugins: argv.liveReload ? [ minimize: false,
},
plugins: [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: './index.html', template: './index.html',
inject: true,
templateParameters: { templateParameters: {
env: process.env env: process.env,
}, },
}), }),
] : [], ],
devServer: { devServer: {
proxy: { hot: 'only',
'/extensions': { static: './',
target: `http://localhost:${port}`,
pathRewrite: { '^/extensions': '/public/extensions' }
},
'/assets': {
target: `http://localhost:${port}`,
pathRewrite: { '^/assets': '/public/assets' }
},
},
port, port,
writeToDisk: argv.writeToDisk, devMiddleware: {
} writeToDisk: argv.writeToDisk,
},
},
}); });
}; };

6
webpack.prod.js
View File

@@ -1,8 +1,12 @@
const { merge } = require('webpack-merge'); const { merge } = require('webpack-merge');
const config = require('./webpack.config.js'); const config = require('./webpack.config.js');
const WebEnv = {
platform: 'web',
};
module.exports = (env, argv) => { module.exports = (env, argv) => {
return merge(config(env, argv), { return merge(config(Object.assign(env, WebEnv), argv), {
mode: 'production', mode: 'production',
devtool: 'source-map', devtool: 'source-map',
}); });

6258
yarn.lock
View File

File diff suppressed because it is too large Load Diff