44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Vue components using Composition API #230

Browse Source 
- Migrate `StatefulVue`:
  - Introduce `UseCollectionState` that replaces its behavior and acts
    as a shared state store.
  - Add more encapsulated, granular functions based on read or write
    access to state in CollectionState.
- Some linting rules get activates due to new code-base compability to
  modern parses, fix linting errors.
  - Rename Dialog to ModalDialog as after refactoring,
    eslintvue/no-reserved-component-names does not allow name Dialog.
  - To comply with `vue/multi-word-component-names`, rename:
    - `Code`          -> `CodeInstruction`
    - `Handle`        -> `SliderHandle`
    - `Documentable`  -> `DocumentableNode`
    - `Node`          -> `NodeContent`
    - `INode`         -> `INodeContent`
    - `Responsive`    -> `SizeObserver`
- Remove `vue-property-decorator` and `vue-class-component`
  dependencies.
- Refactor `watch` with computed properties when possible for cleaner
  code.
  - Introduce `UseApplication` to reduce repeated code in new components
    that use `computed` more heavily than before.
- Change TypeScript target to `es2017` to allow top level async calls
  for getting application context/state/instance to simplify the code by
  removing async calls. However, mocha (unit and integration) tests do
  not run with top level awaits, so a workaround is used.
This commit is contained in:
undergroundwires
2023-08-07 13:16:39 +02:00
parent 3a594ac7fd
commit 1b9be8fe2d
67 changed files with 2135 additions and 1267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/presentation/components/Scripts/Menu/MenuOptionList.vue
View File

@@ -8,12 +8,16 @@
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { defineComponent } from 'vue';
@Component
export default class MenuOptionList extends Vue {
@Prop() public label: string;
}
export default defineComponent({
props: {
label: {
type: String,
default: undefined,
},
},
});
</script>
<style scoped lang="scss">

40
src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
View File

@@ -6,26 +6,42 @@
enabled: enabled,
}"
v-non-collapsing
@click="enabled && onClicked()">{{label}}</span>
@click="onClicked()">{{label}}</span>
</span>
</template>
<script lang="ts">
import {
Component, Prop, Emit, Vue,
} from 'vue-property-decorator';
import { defineComponent } from 'vue';
import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
@Component({
export default defineComponent({
directives: { NonCollapsing },
})
export default class MenuOptionListItem extends Vue {
@Prop() public enabled: boolean;
props: {
enabled: {
type: Boolean,
required: true,
},
label: {
type: String,
required: true,
},
},
emits: [
'click',
],
setup(props, { emit }) {
const onClicked = () => {
if (!props.enabled) {
return;
}
emit('click');
};
@Prop() public label: string;
@Emit('click') public onClicked() { /* do nothing except firing event */ }
}
return {
onClicked,
};
},
});
</script>
<style scoped lang="scss">

74
src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
View File

@@ -2,7 +2,7 @@
<MenuOptionList label="Select">
<MenuOptionListItem
label="None"
:enabled="this.currentSelection !== SelectionType.None"
:enabled="currentSelection !== SelectionType.None"
@click="selectType(SelectionType.None)"
v-tooltip="
'Deselect all selected scripts.<br/>'
@@ -11,7 +11,7 @@
/>
<MenuOptionListItem
label="Standard"
:enabled="this.currentSelection !== SelectionType.Standard"
:enabled="currentSelection !== SelectionType.Standard"
@click="selectType(SelectionType.Standard)"
v-tooltip="
'🛡️ Balanced for privacy and functionality.<br/>'
@@ -20,7 +20,7 @@
/>
<MenuOptionListItem
label="Strict"
:enabled="this.currentSelection !== SelectionType.Strict"
:enabled="currentSelection !== SelectionType.Strict"
@click="selectType(SelectionType.Strict)"
v-tooltip="
'🚫 Stronger privacy, disables risky functions that may leak your data.<br/>'
@@ -30,7 +30,7 @@
/>
<MenuOptionListItem
label="All"
:enabled="this.currentSelection !== SelectionType.All"
:enabled="currentSelection !== SelectionType.All"
@click="selectType(SelectionType.All)"
v-tooltip="
'🔒 Strongest privacy, disabling any functionality that may leak your data.<br/>'
@@ -42,47 +42,59 @@
</template>
<script lang="ts">
import { Component } from 'vue-property-decorator';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { defineComponent, ref } from 'vue';
import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import MenuOptionList from '../MenuOptionList.vue';
import MenuOptionListItem from '../MenuOptionListItem.vue';
import { SelectionType, SelectionTypeHandler } from './SelectionTypeHandler';
@Component({
export default defineComponent({
components: {
MenuOptionList,
MenuOptionListItem,
},
})
export default class TheSelector extends StatefulVue {
public SelectionType = SelectionType;
setup() {
const { modifyCurrentState, onStateChange, events } = useCollectionState();
public currentSelection = SelectionType.None;
const currentSelection = ref(SelectionType.None);
private selectionTypeHandler: SelectionTypeHandler;
let selectionTypeHandler: SelectionTypeHandler;
public async selectType(type: SelectionType) {
if (this.currentSelection === type) {
return;
onStateChange(() => {
unregisterMutators();
modifyCurrentState((state) => {
registerStateMutator(state);
});
}, { immediate: true });
function unregisterMutators() {
events.unsubscribeAll();
}
this.selectionTypeHandler.selectType(type);
}
protected handleCollectionState(newState: ICategoryCollectionState): void {
this.events.unsubscribeAll();
this.selectionTypeHandler = new SelectionTypeHandler(newState);
this.updateSelections();
this.events.register(newState.selection.changed.on(() => this.updateSelections()));
}
function registerStateMutator(state: ICategoryCollectionState) {
selectionTypeHandler = new SelectionTypeHandler(state);
updateSelections();
events.register(state.selection.changed.on(() => updateSelections()));
}
private updateSelections() {
this.currentSelection = this.selectionTypeHandler.getCurrentSelectionType();
}
}
function selectType(type: SelectionType) {
if (currentSelection.value === type) {
return;
}
selectionTypeHandler.selectType(type);
}
function updateSelections() {
currentSelection.value = selectionTypeHandler.getCurrentSelectionType();
}
return {
SelectionType,
currentSelection,
selectType,
};
},
});
</script>
<style scoped lang="scss">
</style>

66
src/presentation/components/Scripts/Menu/TheOsChanger.vue
View File

@@ -1,7 +1,7 @@
<template>
<MenuOptionList>
<MenuOptionListItem
v-for="os in this.allOses"
v-for="os in allOses"
:key="os.name"
:enabled="currentOs !== os.os"
@click="changeOs(os.os)"
@@ -11,41 +11,55 @@
</template>
<script lang="ts">
import { Component } from 'vue-property-decorator';
import {
defineComponent, computed,
} from 'vue';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import { ApplicationFactory } from '@/application/ApplicationFactory';
import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
import MenuOptionList from './MenuOptionList.vue';
import MenuOptionListItem from './MenuOptionListItem.vue';
@Component({
interface IOsViewModel {
readonly name: string;
readonly os: OperatingSystem;
}
export default defineComponent({
components: {
MenuOptionList,
MenuOptionListItem,
},
})
export default class TheOsChanger extends StatefulVue {
public allOses: Array<{ name: string, os: OperatingSystem }> = [];
setup() {
const { modifyCurrentContext, currentState } = useCollectionState();
const { application } = useApplication();
public currentOs?: OperatingSystem = null;
const allOses = computed<ReadonlyArray<IOsViewModel>>(() => (
application.getSupportedOsList() ?? [])
.map((os) : IOsViewModel => (
{
os,
name: renderOsName(os),
}
)));
public async created() {
const app = await ApplicationFactory.Current.getApp();
this.allOses = app.getSupportedOsList()
.map((os) => ({ os, name: renderOsName(os) }));
}
const currentOs = computed<OperatingSystem>(() => {
return currentState.value.os;
});
public async changeOs(newOs: OperatingSystem) {
const context = await this.getCurrentContext();
context.changeContext(newOs);
}
function changeOs(newOs: OperatingSystem) {
modifyCurrentContext((context) => {
context.changeContext(newOs);
});
}
protected handleCollectionState(newState: IReadOnlyCategoryCollectionState): void {
this.currentOs = newState.os;
this.$forceUpdate(); // v-bind:class is not updated otherwise
}
}
return {
allOses,
currentOs,
changeOs,
};
},
});
function renderOsName(os: OperatingSystem): string {
switch (os) {
@@ -56,7 +70,3 @@ function renderOsName(os: OperatingSystem): string {
}
}
</script>
<style scoped lang="scss">
</style>

58
src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
View File

@@ -5,53 +5,55 @@
<TheViewChanger
class="item"
v-on:viewChanged="$emit('viewChanged', $event)"
v-if="!this.isSearching" />
v-if="!isSearching" />
</div>
</template>
<script lang="ts">
import { Component } from 'vue-property-decorator';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { defineComponent, ref, onUnmounted } from 'vue';
import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
import TheOsChanger from './TheOsChanger.vue';
import TheSelector from './Selector/TheSelector.vue';
import TheViewChanger from './View/TheViewChanger.vue';
@Component({
export default defineComponent({
components: {
TheSelector,
TheOsChanger,
TheViewChanger,
},
})
export default class TheScriptsMenu extends StatefulVue {
public isSearching = false;
setup() {
const { onStateChange, events } = useCollectionState();
private listeners = new Array<IEventSubscription>();
const isSearching = ref(false);
public destroyed() {
this.unsubscribeAll();
}
onStateChange((state) => {
subscribe(state);
}, { immediate: true });
protected handleCollectionState(newState: IReadOnlyCategoryCollectionState): void {
this.subscribe(newState);
}
private subscribe(state: IReadOnlyCategoryCollectionState) {
this.listeners.push(state.filter.filterRemoved.on(() => {
this.isSearching = false;
}));
state.filter.filtered.on(() => {
this.isSearching = true;
onUnmounted(() => {
unsubscribeAll();
});
}
private unsubscribeAll() {
this.listeners.forEach((listener) => listener.unsubscribe());
this.listeners.splice(0, this.listeners.length);
}
}
function subscribe(state: IReadOnlyCategoryCollectionState) {
events.register(state.filter.filterRemoved.on(() => {
isSearching.value = false;
}));
events.register(state.filter.filtered.on(() => {
isSearching.value = true;
}));
}
function unsubscribeAll() {
events.unsubscribeAll();
}
return {
isSearching,
};
},
});
</script>
<style scoped lang="scss">

65
src/presentation/components/Scripts/Menu/View/TheViewChanger.vue
View File

@@ -3,7 +3,7 @@
label="View"
class="part">
<MenuOptionListItem
v-for="view in this.viewOptions"
v-for="view in viewOptions"
:key="view.type"
:label="view.displayName"
:enabled="currentView !== view.type"
@@ -13,53 +13,54 @@
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { defineComponent, ref } from 'vue';
import MenuOptionList from '../MenuOptionList.vue';
import MenuOptionListItem from '../MenuOptionListItem.vue';
import { ViewType } from './ViewType';
const DefaultView = ViewType.Cards;
interface IViewOption {
readonly type: ViewType;
readonly displayName: string;
}
const viewOptions: readonly IViewOption[] = [
{ type: ViewType.Cards, displayName: 'Cards' },
{ type: ViewType.Tree, displayName: 'Tree' },
];
@Component({
export default defineComponent({
components: {
MenuOptionList,
MenuOptionListItem,
},
})
export default class TheViewChanger extends Vue {
public readonly viewOptions: IViewOption[] = [
{ type: ViewType.Cards, displayName: 'Cards' },
{ type: ViewType.Tree, displayName: 'Tree' },
];
emits: {
/* eslint-disable @typescript-eslint/no-unused-vars */
viewChanged: (viewType: ViewType) => true,
/* eslint-enable @typescript-eslint/no-unused-vars */
},
setup(_, { emit }) {
const currentView = ref<ViewType>();
public ViewType = ViewType;
setView(DefaultView);
public currentView?: ViewType = null;
public mounted() {
this.setView(DefaultView);
}
public groupBy(type: ViewType) {
this.setView(type);
}
private setView(view: ViewType) {
if (this.currentView === view) {
throw new Error(`View is already "${ViewType[view]}"`);
function setView(view: ViewType) {
if (currentView.value === view) {
throw new Error(`View is already "${ViewType[view]}"`);
}
currentView.value = view;
emit('viewChanged', currentView.value);
}
this.currentView = view;
this.$emit('viewChanged', this.currentView);
}
}
return {
ViewType,
viewOptions,
currentView,
setView,
};
},
});
interface IViewOption {
readonly type: ViewType;
readonly displayName: string;
}
</script>
<style scoped lang="scss">
</style>