Skip to content

Commit

Permalink
restructure presentation layer
Browse files Browse the repository at this point in the history
- Move most GUI related code to /presentation
- Move components to /components (separate from bootstrap and style)
- Move shared components helpers to /components/shared
- Rename Bootstrapping to bootstrapping to enforce same naming
  convention in /presentation
  • Loading branch information
undergroundwires committed Mar 7, 2021
1 parent 646db90 commit f3c7413
Show file tree
Hide file tree
Showing 67 changed files with 100 additions and 71 deletions.
20 changes: 17 additions & 3 deletions docs/presentation.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,20 @@
- Desktop application is created using [Electron](https://www.electronjs.org/).
- Event driven as in components simply listens to events from the state and act accordingly.

## Structure

- [`/src/` **`presentation/`**](./../src/presentation/): Contains all presentation related code including Vue and Electron configurations
- [**`bootstrapping/`**](./../src/presentation/bootstrapping/): Registers Vue global objects including components and plugins.
- [**`components/`**](./../src/presentation/components/): Contains all Vue components and their helper classes.
- [**`Shared/`**](./../src/presentation/components/Shared): Contains Vue components and component helpers that are shared across other components.
- [**`styles/`**](./../src/presentation/styles/): Contains shared styles used throughout different components.
- [**`main.ts`**](./../src/presentation/main.ts): Application entry point that mounts and starts Vue application.
- [**`background.ts`**](./../src/presentation/background.ts): Main process of Electron, started as first thing when app starts.
- [**`/public/`**](./../public/): Contains static assets that will simply be copied and not go through webpack.
- [**`/vue.config.js`**](./../vue.config.js): Global Vue CLI configurations loaded by `@vue/cli-service`
- [**`/postcss.config.js`**](./../postcss.config.js): PostCSS configurations that are used by Vue CLI internally
- [**`/babel.config.js`**](./../babel.config.js): Babel configurations for polyfills used by `@vue/cli-plugin-babel`

## Application data

- Components and should use [ApplicationFactory](./../src/application/ApplicationFactory.ts) singleton to reach the application domain.
Expand All @@ -16,9 +30,9 @@

- Stateful components mutate or/and react to state changes in [ApplicationContext](./../src/application/Context/ApplicationContext.ts).
- Stateless components that does not handle state extends `Vue`
- Stateful components that depends on the collection state such as user selection, search queries and more extends [`StatefulVue`](./../src/presentation/StatefulVue.ts)
- The single source of truth is a singleton of the state created and made available to presentation layer by [`StatefulVue`](./../src/presentation/StatefulVue.ts)
- Stateful components that depends on the collection state such as user selection, search queries and more extends [`StatefulVue`](./../src/presentation/components/Shared/StatefulVue.ts)
- The single source of truth is a singleton of the state created and made available to presentation layer by [`StatefulVue`](./../src/presentation/components/Shared/StatefulVue.ts)
- `StatefulVue` includes abstract `handleCollectionState` that is fired once the component is loaded and also each time [collection](./collection-files.md) is changed.
- Do not forget to subscribe from events when component is destroyed or if needed [collection](./collection-files.md) is changed.
- 💡 `events` in base class [`StatefulVue`](./../src/presentation/StatefulVue.ts) makes lifecycling easier
- 💡 `events` in base class [`StatefulVue`](./../src/presentation/components/Shared/StatefulVue.ts) makes lifecycling easier
- 📖 See [Application state | Application layer](./presentation.md#application-state) where the state is implemented using using state pattern.
4 changes: 4 additions & 0 deletions src/background.ts → src/presentation/background.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
'use strict';

// This is main process of Electron, started as first thing when app starts.
// This script is running through entire life of the application.
// It doesn't have any windows which you can see on screen, opens the main window from here.

import { app, protocol, BrowserWindow, shell } from 'electron';
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
Expand Down
10 changes: 5 additions & 5 deletions src/App.vue → src/presentation/components/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TheHeader from '@/presentation/TheHeader.vue';
import TheFooter from '@/presentation/TheFooter/TheFooter.vue';
import TheCodeButtons from '@/presentation/Code/CodeButtons/TheCodeButtons.vue';
import TheScriptArea from '@/presentation/Scripts/TheScriptArea.vue';
import TheSearchBar from '@/presentation/TheSearchBar.vue';
import TheHeader from '@/presentation/components/TheHeader.vue';
import TheFooter from '@/presentation/components/TheFooter/TheFooter.vue';
import TheCodeButtons from '@/presentation/components/Code/CodeButtons/TheCodeButtons.vue';
import TheScriptArea from '@/presentation/components/Scripts/TheScriptArea.vue';
import TheSearchBar from '@/presentation/components/TheSearchBar.vue';
@Component({
components: {
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@

<script lang="ts">
import { Component } from 'vue-property-decorator';
import { StatefulVue } from '@/presentation/StatefulVue';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
import { Clipboard } from '@/infrastructure/Clipboard';
import IconButton from './IconButton.vue';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator';
import { StatefulVue } from '@/presentation/StatefulVue';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import ace from 'ace-builds';
import 'ace-builds/webpack-resolver';
import { ICodeChangedEvent } from '@/application/Context/State/Code/Event/ICodeChangedEvent';
import { IScript } from '@/domain/IScript';
import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import { CodeBuilderFactory } from '@/application/Context/State/Code/Generation/CodeBuilderFactory';
import Responsive from '@/presentation/Responsive.vue';
import Responsive from '@/presentation/components/Shared/Responsive.vue';
@Component({
components: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@

<script lang="ts">
import CardListItem from './CardListItem.vue';
import Responsive from '@/presentation/Responsive.vue';
import Responsive from '@/presentation/components/Shared/Responsive.vue';
import { Component } from 'vue-property-decorator';
import { StatefulVue } from '@/presentation/StatefulVue';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { ICategory } from '@/domain/ICategory';
import { hasDirective } from './NonCollapsingDirective';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@

<script lang="ts">
import { Component, Prop, Watch, Emit } from 'vue-property-decorator';
import ScriptsTree from '@/presentation/Scripts/ScriptsTree/ScriptsTree.vue';
import { StatefulVue } from '@/presentation/StatefulVue';
import ScriptsTree from '@/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
@Component({
components: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

<script lang="ts">
import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
import { NonCollapsing } from '@/presentation/Scripts/Cards/NonCollapsingDirective';
import { NonCollapsing } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';
@Component({
directives: { NonCollapsing },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

<script lang="ts">
import { Component } from 'vue-property-decorator';
import { StatefulVue } from '@/presentation/StatefulVue';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import SelectableOption from './SelectableOption.vue';
import { IScript } from '@/domain/IScript';
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<script lang="ts">
import { Component } from 'vue-property-decorator';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { StatefulVue } from '@/presentation/StatefulVue';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import { ApplicationFactory } from '@/application/ApplicationFactory';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { Component } from 'vue-property-decorator';
import TheOsChanger from './TheOsChanger.vue';
import TheSelector from './Selector/TheSelector.vue';
import TheGrouper from './Grouping/TheGrouper.vue';
import { StatefulVue } from '@/presentation/StatefulVue';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<script lang="ts">
import { Component, Prop, Watch } from 'vue-property-decorator';
import { StatefulVue } from '@/presentation/StatefulVue';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { IScript } from '@/domain/IScript';
import { ICategory } from '@/domain/ICategory';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<script lang="ts">
import { Component, Prop, Watch } from 'vue-property-decorator';
import { IReverter } from './Reverter/IReverter';
import { StatefulVue } from '@/presentation/StatefulVue';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { INode } from './INode';
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
import { getReverter } from './Reverter/ReverterFactory';
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TheCodeArea from '@/presentation/Code/TheCodeArea.vue';
import TheScriptsList from '@/presentation/Scripts/TheScriptsList.vue';
import TheScriptsMenu from '@/presentation/Scripts/Menu/TheScriptsMenu.vue';
import HorizontalResizeSlider from '@/presentation/Scripts/Slider/HorizontalResizeSlider.vue';
import { Grouping } from '@/presentation/Scripts/Menu/Grouping/Grouping';
import TheCodeArea from '@/presentation/components/Code/TheCodeArea.vue';
import TheScriptsList from '@/presentation/components/Scripts/TheScriptsList.vue';
import TheScriptsMenu from '@/presentation/components/Scripts/Menu/TheScriptsMenu.vue';
import HorizontalResizeSlider from '@/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue';
import { Grouping } from '@/presentation/components/Scripts/Menu/Grouping/Grouping';
@Component({
components: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@
</template>

<script lang="ts">
import TheGrouper from '@/presentation/Scripts/Menu/Grouping/TheGrouper.vue';
import ScriptsTree from '@/presentation/Scripts/ScriptsTree/ScriptsTree.vue';
import CardList from '@/presentation/Scripts/Cards/CardList.vue';
import TheGrouper from '@/presentation/components/Scripts/Menu/Grouping/TheGrouper.vue';
import ScriptsTree from '@/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue';
import CardList from '@/presentation/components/Scripts/Cards/CardList.vue';
import { Component, Prop } from 'vue-property-decorator';
import { StatefulVue } from '@/presentation/StatefulVue';
import { Grouping } from '@/presentation/Scripts/Menu/Grouping/Grouping';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { Grouping } from '@/presentation/components/Scripts/Menu/Grouping/Grouping';
import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import { ApplicationFactory } from '@/application/ApplicationFactory';
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { IApplicationContext } from '@/application/Context/IApplicationContext';
import { buildContextAsync } from '@/application/Context/ApplicationContextFactory';
import { IApplicationContextChangedEvent } from '@/application/Context/IApplicationContext';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import { EventSubscriptionCollection } from '../infrastructure/Events/EventSubscriptionCollection';
import { EventSubscriptionCollection } from '@/infrastructure/Events/EventSubscriptionCollection';

// @ts-ignore because https://github.com/vuejs/vue-class-component/issues/91
@Component
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@

<script lang="ts">
import { Component, Watch } from 'vue-property-decorator';
import { StatefulVue } from './StatefulVue';
import { NonCollapsing } from '@/presentation/Scripts/Cards/NonCollapsingDirective';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { NonCollapsing } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';
import { IUserFilter } from '@/application/Context/State/Filter/IUserFilter';
import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
Expand Down
4 changes: 2 additions & 2 deletions src/main.ts → src/presentation/main.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Vue from 'vue';
import App from './App.vue';
import { ApplicationBootstrapper } from './presentation/Bootstrapping/ApplicationBootstrapper';
import App from './components/App.vue';
import { ApplicationBootstrapper } from './bootstrapping/ApplicationBootstrapper';

new ApplicationBootstrapper()
.bootstrap(Vue);
Expand Down
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import 'mocha';
import { expect } from 'chai';
import { NonCollapsing } from '@/presentation/Scripts/Cards/NonCollapsingDirective';
import { hasDirective } from '@/presentation/Scripts/Cards/NonCollapsingDirective';
import { NonCollapsing } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';
import { hasDirective } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';

const expectedAttributeName = 'data-interaction-does-not-collapse';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import 'mocha';
import { expect } from 'chai';
import { getScriptNodeId, getScriptId, getCategoryNodeId, getCategoryId } from '@/presentation/Scripts/ScriptsTree/ScriptNodeParser';
import { CategoryStub } from '../../../stubs/CategoryStub';
import { ScriptStub } from '../../../stubs/ScriptStub';
import { parseSingleCategory, parseAllCategories } from '@/presentation/Scripts/ScriptsTree/ScriptNodeParser';
import { CategoryCollectionStub } from '../../../stubs/CategoryCollectionStub';
import { INode, NodeType } from '@/presentation/Scripts/ScriptsTree/SelectableTree/Node/INode';
import { getScriptNodeId, getScriptId, getCategoryNodeId, getCategoryId } from '@/presentation/components/Scripts/ScriptsTree/ScriptNodeParser';
import { parseSingleCategory,
parseAllCategories } from '@/presentation/components/Scripts/ScriptsTree/ScriptNodeParser';
import { INode, NodeType } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode';
import { IScript } from '@/domain/IScript';
import { ICategory } from '@/domain/ICategory';
import { CategoryStub } from '../../../../stubs/CategoryStub';
import { ScriptStub } from '../../../../stubs/ScriptStub';
import { CategoryCollectionStub } from '../../../../stubs/CategoryCollectionStub';

describe('ScriptNodeParser', () => {
it('can convert script id and back', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import 'mocha';
import { expect } from 'chai';
import { NodeType, INode } from '@/presentation/Scripts/ScriptsTree/SelectableTree/Node/INode';
import { NodePredicateFilter } from '@/presentation/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter';
import { NodeType, INode } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode';
import { NodePredicateFilter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter';
import { ILiquorTreeExistingNode } from 'liquor-tree';

describe('NodePredicateFilter', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import 'mocha';
import { expect } from 'chai';
import { ILiquorTreeNode } from 'liquor-tree';
import { NodeType } from '@/presentation/Scripts/ScriptsTree/SelectableTree/Node/INode';
import { getNewState } from '@/presentation/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater';
import { NodeType } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode';
import { getNewState } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater';

describe('NodeStateUpdater', () => {
describe('getNewState', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import 'mocha';
import { expect } from 'chai';
import { NodeType, INode } from '@/presentation/Scripts/ScriptsTree/SelectableTree/Node/INode';
import { NodeType, INode } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode';
import { ILiquorTreeExistingNode, ILiquorTreeNewNode, ILiquorTreeNodeData, ICustomLiquorTreeData } from 'liquor-tree';
import { convertExistingToNode, toNewLiquorTreeNode } from '@/presentation/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator';
import { convertExistingToNode, toNewLiquorTreeNode } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator';

describe('NodeTranslator', () => {
it('convertExistingToNode', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import 'mocha';
import { expect } from 'chai';
import { ScriptStub } from '../../../../../../stubs/ScriptStub';
import { CategoryReverter } from '@/presentation/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter';
import { getCategoryNodeId } from '@/presentation/Scripts/ScriptsTree/ScriptNodeParser';
import { CategoryStub } from '../../../../../../stubs/CategoryStub';
import { CategoryCollectionStub } from '../../../../../../stubs/CategoryCollectionStub';
import { CategoryReverter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter';
import { getCategoryNodeId } from '@/presentation/components/Scripts/ScriptsTree/ScriptNodeParser';
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
import { CategoryStub } from '../../../../../../../stubs/CategoryStub';
import { CategoryCollectionStub } from '../../../../../../../stubs/CategoryCollectionStub';
import { ScriptStub } from '../../../../../../../stubs/ScriptStub';

describe('CategoryReverter', () => {
describe('getState', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import 'mocha';
import { expect } from 'chai';
import { INode, NodeType } from '@/presentation/Scripts/ScriptsTree/SelectableTree/Node/INode';
import { getReverter } from '@/presentation/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory';
import { ScriptReverter } from '@/presentation/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter';
import { CategoryReverter } from '@/presentation/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter';
import { CategoryCollectionStub } from '../../../../../../stubs/CategoryCollectionStub';
import { CategoryStub } from '../../../../../../stubs/CategoryStub';
import { getScriptNodeId, getCategoryNodeId } from '@/presentation/Scripts/ScriptsTree/ScriptNodeParser';
import { ScriptStub } from '../../../../../../stubs/ScriptStub';
import { INode, NodeType } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode';
import {
getReverter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory';
import { ScriptReverter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter';
import { CategoryReverter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter';
import { getScriptNodeId, getCategoryNodeId } from '@/presentation/components/Scripts/ScriptsTree/ScriptNodeParser';
import { CategoryCollectionStub } from '../../../../../../../stubs/CategoryCollectionStub';
import { CategoryStub } from '../../../../../../../stubs/CategoryStub';
import { ScriptStub } from '../../../../../../../stubs/ScriptStub';

describe('ReverterFactory', () => {
describe('getReverter', () => {
Expand Down

0 comments on commit f3c7413

Please sign in to comment.