some ko.computed() to addComputables()/addComputablesTo()

dev/Settings/Admin/General.js

@@ -7,7 +7,8 @@ import {
 	changeTheme,
 	convertThemeName,
 	addObservablesTo,
-	addSubscribablesTo
+	addSubscribablesTo,
+	addComputablesTo
 } from 'Common/Utils';
 
 import { Capa, SaveSettingsStep } from 'Common/Enums';
@@ -74,12 +75,12 @@ export class GeneralAdminSettings {
 				  ].join('')
 				: '';
 
-		this.themesOptions = ko.computed(() =>
+		addComputablesTo(this, {
-			this.themes.map(theme => ({ optValue: theme, optText: convertThemeName(theme) }))
+			themesOptions: () => this.themes.map(theme => ({ optValue: theme, optText: convertThemeName(theme) })),
-		);
 
-		this.languageFullName = ko.computed(() => convertLangName(this.language()));
+			languageFullName: () => convertLangName(this.language()),
-		this.languageAdminFullName = ko.computed(() => convertLangName(this.languageAdmin()));
+			languageAdminFullName: () => convertLangName(this.languageAdmin())
+		});
 
 		this.languageAdminTrigger = ko.observable(SaveSettingsStep.Idle).extend({ debounce: 100 });
 

dev/Settings/Admin/Packages.js

@@ -9,6 +9,7 @@ import Remote from 'Remote/Admin/Fetch';
 import { showScreenPopup } from 'Knoin/Knoin';
 import { PluginPopupView } from 'View/Popup/Plugin';
 import { SettingsGet } from 'Common/Globals';
+import { addComputablesTo } from 'Common/Utils';
 
 export class PackagesAdminSettings {
 	constructor() {
@@ -16,17 +17,13 @@ export class PackagesAdminSettings {
 
 		this.packages = PackageAdminStore;
 
-		this.packagesCurrent = ko.computed(() =>
+		addComputablesTo(this, {
-			PackageAdminStore.filter(item => item && item.installed && !item.canBeUpdated)
+			packagesCurrent: () => PackageAdminStore.filter(item => item && item.installed && !item.canBeUpdated),
-		);
+			packagesAvailableForUpdate: () => PackageAdminStore.filter(item => item && item.installed && !!item.canBeUpdated),
-		this.packagesAvailableForUpdate = ko.computed(() =>
+			packagesAvailableForInstallation: () => PackageAdminStore.filter(item => item && !item.installed),
-			PackageAdminStore.filter(item => item && item.installed && !!item.canBeUpdated)
-		);
-		this.packagesAvailableForInstallation = ko.computed(() =>
-			PackageAdminStore.filter(item => item && !item.installed)
-		);
 
-		this.visibility = ko.computed(() => (PackageAdminStore.loading() ? 'visible' : 'hidden'));
+			visibility: () => (PackageAdminStore.loading() ? 'visible' : 'hidden')
+		});
 
 		this.enabledPlugins = ko.observable(!!SettingsGet('EnabledPlugins'));
 		this.enabledPlugins.subscribe(value =>

dev/Settings/User/General.js

@@ -4,7 +4,7 @@ import { MESSAGES_PER_PAGE_VALUES } from 'Common/Consts';
 import { SaveSettingsStep } from 'Common/Enums';
 import { EditorDefaultType, Layout } from 'Common/EnumsUser';
 import { Settings, SettingsGet } from 'Common/Globals';
-import { isArray, settingsSaveHelperSimpleFunction, addObservablesTo, addSubscribablesTo } from 'Common/Utils';
+import { isArray, settingsSaveHelperSimpleFunction, addObservablesTo, addSubscribablesTo, addComputablesTo } from 'Common/Utils';
 import { i18n, trigger as translatorTrigger, reload as translatorReload, convertLangName } from 'Common/Translator';
 
 import { showScreenPopup } from 'Knoin/Knoin';
@@ -47,7 +47,6 @@ export class GeneralUserSettings {
 		this.replySameFolder = SettingsUserStore.replySameFolder;
 		this.allowLanguagesOnSettings = !!SettingsGet('AllowLanguagesOnSettings');
 
-		this.languageFullName = ko.computed(() => convertLangName(this.language()));
 		this.languageTrigger = ko.observable(SaveSettingsStep.Idle).extend({ debounce: 100 });
 
 		addObservablesTo(this, {
@@ -59,33 +58,37 @@ export class GeneralUserSettings {
 
 		this.identities = IdentityUserStore;
 
-		this.identityMain = ko.computed(() => {
+		addComputablesTo(this, {
-			const list = this.identities();
+			languageFullName: () => convertLangName(this.language()),
-			return isArray(list) ? list.find(item => item && !item.id()) : null;
-		});
 
-		this.identityMainDesc = ko.computed(() => {
+			identityMain: () => {
-			const identity = this.identityMain();
+				const list = this.identities();
-			return identity ? identity.formattedName() : '---';
+				return isArray(list) ? list.find(item => item && !item.id()) : null;
-		});
+			},
 
-		this.editorDefaultTypes = ko.computed(() => {
+			identityMainDesc: () => {
-			translatorTrigger();
+				const identity = this.identityMain();
-			return [
+				return identity ? identity.formattedName() : '---';
-				{ id: EditorDefaultType.Html, name: i18n('SETTINGS_GENERAL/LABEL_EDITOR_HTML') },
+			},
-				{ id: EditorDefaultType.Plain, name: i18n('SETTINGS_GENERAL/LABEL_EDITOR_PLAIN') },
-				{ id: EditorDefaultType.HtmlForced, name: i18n('SETTINGS_GENERAL/LABEL_EDITOR_HTML_FORCED') },
-				{ id: EditorDefaultType.PlainForced, name: i18n('SETTINGS_GENERAL/LABEL_EDITOR_PLAIN_FORCED') }
-			];
-		});
 
-		this.layoutTypes = ko.computed(() => {
+			editorDefaultTypes: () => {
-			translatorTrigger();
+				translatorTrigger();
-			return [
+				return [
-				{ id: Layout.NoPreview, name: i18n('SETTINGS_GENERAL/LABEL_LAYOUT_NO_SPLIT') },
+					{ id: EditorDefaultType.Html, name: i18n('SETTINGS_GENERAL/LABEL_EDITOR_HTML') },
-				{ id: Layout.SidePreview, name: i18n('SETTINGS_GENERAL/LABEL_LAYOUT_VERTICAL_SPLIT') },
+					{ id: EditorDefaultType.Plain, name: i18n('SETTINGS_GENERAL/LABEL_EDITOR_PLAIN') },
-				{ id: Layout.BottomPreview, name: i18n('SETTINGS_GENERAL/LABEL_LAYOUT_HORIZONTAL_SPLIT') }
+					{ id: EditorDefaultType.HtmlForced, name: i18n('SETTINGS_GENERAL/LABEL_EDITOR_HTML_FORCED') },
-			];
+					{ id: EditorDefaultType.PlainForced, name: i18n('SETTINGS_GENERAL/LABEL_EDITOR_PLAIN_FORCED') }
+				];
+			},
+
+			layoutTypes: () => {
+				translatorTrigger();
+				return [
+					{ id: Layout.NoPreview, name: i18n('SETTINGS_GENERAL/LABEL_LAYOUT_NO_SPLIT') },
+					{ id: Layout.SidePreview, name: i18n('SETTINGS_GENERAL/LABEL_LAYOUT_VERTICAL_SPLIT') },
+					{ id: Layout.BottomPreview, name: i18n('SETTINGS_GENERAL/LABEL_LAYOUT_HORIZONTAL_SPLIT') }
+				];
+			}
 		});
 
 		const fReloadLanguageHelper = (saveSettingsStep) => () => {

dev/Settings/User/Templates.js

@@ -8,15 +8,17 @@ import Remote from 'Remote/User/Fetch';
 import { showScreenPopup } from 'Knoin/Knoin';
 
 import { TemplatePopupView } from 'View/Popup/Template';
+import { addComputablesTo } from 'Common/Utils';
 
 export class TemplatesUserSettings {
 	constructor() {
 		this.templates = TemplateUserStore.templates;
 
-		this.processText = ko.computed(() =>
+		addComputablesTo({
-			TemplateUserStore.templates.loading() ? i18n('SETTINGS_TEMPLETS/LOADING_PROCESS') : ''
+			processText: () => TemplateUserStore.templates.loading() ? i18n('SETTINGS_TEMPLETS/LOADING_PROCESS') : '',
-		);
+
-		this.visibility = ko.computed(() => this.processText() ? 'visible' : 'hidden');
+			visibility: () => this.processText() ? 'visible' : 'hidden'
+		});
 
 		this.templateForDeletion = ko.observable(null).deleteAccessHelper();
 	}

dev/Stores/User/Folder.js

@@ -2,7 +2,7 @@ import ko from 'ko';
 
 import { FolderType, FolderSortMode } from 'Common/EnumsUser';
 import { UNUSED_OPTION_VALUE } from 'Common/Consts';
-import { addObservablesTo, addSubscribablesTo } from 'Common/Utils';
+import { addObservablesTo, addSubscribablesTo, addComputablesTo } from 'Common/Utils';
 import { getFolderInboxName, getFolderFromCacheList } from 'Common/Cache';
 import { Settings, SettingsGet } from 'Common/Globals';
 //import Remote from 'Remote/User/Fetch'; Circular dependency
@@ -52,50 +52,44 @@ export const FolderUserStore = new class {
 
 		this.sieveAllowFileintoInbox = !!SettingsGet('SieveAllowFileintoInbox');
 
-		this.draftFolderNotEnabled = ko.computed(
+		addComputablesTo(this, {
-			() => !this.draftFolder() || UNUSED_OPTION_VALUE === this.draftFolder()
-		);
 
-		// foldersListWithSingleInboxRootFolder
+			draftFolderNotEnabled: () => !this.draftFolder() || UNUSED_OPTION_VALUE === this.draftFolder(),
-		/** returns true when there are no non-system folders in the root of the folders tree */
+
-		this.singleRootFolder = ko.computed(() => {
+			// foldersListWithSingleInboxRootFolder
-			let multiple = false;
+			/** returns true when there are no non-system folders in the root of the folders tree */
-			this.folderList.forEach(folder => {
+			singleRootFolder: () => {
-				let subscribed = folder.subscribed(),
+				let multiple = false;
-					hasSub = folder.hasSubscribedSubfolders();
+				this.folderList.forEach(folder => {
-				multiple |= (!folder.isSystemFolder() || (hasSub && !folder.isInbox())) && (subscribed || hasSub)
+					let subscribed = folder.subscribed(),
-			});
+						hasSub = folder.hasSubscribedSubfolders();
-			return !multiple;
+					multiple |= (!folder.isSystemFolder() || (hasSub && !folder.isInbox())) && (subscribed || hasSub)
+				});
+				return !multiple;
+			},
+
+			currentFolderFullNameRaw: () => (this.currentFolder() ? this.currentFolder().fullNameRaw : ''),
+
+			currentFolderFullName: () => (this.currentFolder() ? this.currentFolder().fullName : ''),
+			currentFolderFullNameHash: () => (this.currentFolder() ? this.currentFolder().fullNameHash : ''),
+
+			foldersChanging: () =>
+				this.foldersLoading() | this.foldersCreating() | this.foldersDeleting() | this.foldersRenaming(),
+
+			folderListSystemNames: () => {
+				const list = [getFolderInboxName()],
+				others = [this.sentFolder(), this.draftFolder(), this.spamFolder(), this.trashFolder(), this.archiveFolder()];
+
+				this.folderList().length &&
+					others.forEach(name => name && UNUSED_OPTION_VALUE !== name && list.push(name));
+
+				return list;
+			},
+
+			folderListSystem: () =>
+				this.folderListSystemNames().map(name => getFolderFromCacheList(name)).filter(v => v)
 		});
 
-		this.currentFolderFullNameRaw = ko.computed(() => (this.currentFolder() ? this.currentFolder().fullNameRaw : ''));
-
-		this.currentFolderFullName = ko.computed(() => (this.currentFolder() ? this.currentFolder().fullName : ''));
-		this.currentFolderFullNameHash = ko.computed(() => (this.currentFolder() ? this.currentFolder().fullNameHash : ''));
-
-		this.foldersChanging = ko.computed(() => {
-			const loading = this.foldersLoading(),
-				creating = this.foldersCreating(),
-				deleting = this.foldersDeleting(),
-				renaming = this.foldersRenaming();
-
-			return loading || creating || deleting || renaming;
-		});
-
-		this.folderListSystemNames = ko.computed(() => {
-			const list = [getFolderInboxName()],
-			others = [this.sentFolder(), this.draftFolder(), this.spamFolder(), this.trashFolder(), this.archiveFolder()];
-
-			this.folderList().length &&
-				others.forEach(name => name && UNUSED_OPTION_VALUE !== name && list.push(name));
-
-			return list;
-		});
-
-		this.folderListSystem = ko.computed(() =>
-			this.folderListSystemNames().map(name => getFolderFromCacheList(name)).filter(v => v)
-		);
-
 		const
 			fRemoveSystemFolderType = (observable) => () => {
 				const folder = getFolderFromCacheList(observable());

dev/Stores/User/Pgp.js

@@ -1,7 +1,7 @@
 import ko from 'ko';
 
 import { i18n } from 'Common/Translator';
-import { isArray, arrayLength, pString } from 'Common/Utils';
+import { isArray, arrayLength, pString, addComputablesTo } from 'Common/Utils';
 import { createElement } from 'Common/Globals';
 
 import { AccountUserStore } from 'Stores/User/Account';
@@ -141,8 +141,10 @@ export const PgpUserStore = new class {
 		this.openpgpkeys = ko.observableArray();
 		this.openpgpKeyring = null;
 
-		this.openpgpkeysPublic = ko.computed(() => this.openpgpkeys.filter(item => item && !item.isPrivate));
+		addComputablesTo(this, {
-		this.openpgpkeysPrivate = ko.computed(() => this.openpgpkeys.filter(item => item && item.isPrivate));
+			openpgpkeysPublic: () => this.openpgpkeys.filter(item => item && !item.isPrivate),
+			openpgpkeysPrivate: () => this.openpgpkeys.filter(item => item && item.isPrivate)
+		});
 	}
 
 	/**

dev/View/Popup/DomainAlias.js

@@ -1,5 +1,3 @@
-import ko from 'ko';
-
 import { getNotification } from 'Common/Translator';
 
 import { DomainAdminStore } from 'Stores/Admin/Domain';
@@ -22,11 +20,13 @@ class DomainAliasPopupView extends AbstractViewPopup {
 			alias: ''
 		});
 
-		this.domains = ko.computed(() => DomainAdminStore.filter(item => item && !item.alias));
+		this.addComputables({
+			domains: () => DomainAdminStore.filter(item => item && !item.alias),
 
-		this.domainsOptions = ko.computed(() => this.domains().map(item => ({ optValue: item.name, optText: item.name })));
+			domainsOptions: () => this.domains().map(item => ({ optValue: item.name, optText: item.name })),
 
-		this.canBeSaved = ko.computed(() => !this.saving() && this.name() && this.alias());
+			canBeSaved: () => !this.saving() && this.name() && this.alias()
+		});
 
 		decorateKoCommands(this, {
 			createCommand: self => self.canBeSaved()

dev/View/Popup/Plugin.js

@@ -23,8 +23,10 @@ class PluginPopupView extends AbstractViewPopup {
 
 		this.configures = ko.observableArray();
 
-		this.hasReadme = ko.computed(() => !!this.readme());
+		this.addComputables({
-		this.hasConfiguration = ko.computed(() => 0 < this.configures().length);
+			hasReadme: () => !!this.readme(),
+			hasConfiguration: () => 0 < this.configures().length
+		});
 
 		this.bDisabeCloseOnEsc = true;
 		this.sDefaultScope = Scope.All;

dev/View/User/MailBox/MessageList.js

@@ -66,8 +66,6 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
 		this.allowMessageListActions = Settings.capa(Capa.MessageListActions);
 		this.allowDangerousActions = Settings.capa(Capa.DangerousActions);
 
-		this.popupVisibility = ko.computed(() => 0 < popupVisibilityNames().length);
-
 		this.messageList = MessageUserStore.list;
 
 		this.sortSupported = FolderUserStore.sortSupported;
@@ -78,13 +76,17 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
 		this.isMessageSelected = MessageUserStore.isMessageSelected;
 		this.messageListSearch = MessageUserStore.listSearch;
 		this.messageListError = MessageUserStore.listError;
-		this.folderMenuForMove = ko.computed(() =>
+
-			folderListOptionsBuilder(
+		this.addComputables({
-				[FolderUserStore.currentFolderFullNameRaw()],
+			popupVisibility: () => 0 < popupVisibilityNames().length,
-				[],
+
-				item => item ? item.localName() : ''
+			folderMenuForMove: () =>
-			)
+				folderListOptionsBuilder(
-		);
+					[FolderUserStore.currentFolderFullNameRaw()],
+					[],
+					item => item ? item.localName() : ''
+				)
+		});
 
 		this.useCheckboxesInList = SettingsUserStore.useCheckboxesInList;