Skip to content

Commit c43a5b8

Browse files
ctrl-escpctrl-escp
committed
Overhaul WiP
1 parent 8785a49 commit c43a5b8

18 files changed

+2074
-3633
lines changed

‎package-lock.json

+301-3,012
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/flast.js

+1,499-511
Large diffs are not rendered by default.

‎src/App.vue

+29-47
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<script setup>
2-
import IconBandaid from './components/icons/IconBandaid.vue';
3-
import IconGithub from './components/icons/IconGithub.vue';
4-
import InputCodeEditor from './components/InputCodeEditor.vue';
5-
import FileLoader from './components/FileLoader.vue';
6-
import ParseButton from './components/ParseButton.vue';
7-
import NodesList from './components/NodesList.vue';
8-
import FilterEditor from './components/FilterEditor.vue';
2+
import store from './store';
3+
import {computed} from 'vue';
94
import ToasterView from './components/ToasterView.vue';
5+
import ExplorationTab from './tabs/ExplorationTab.vue';
6+
import IconGithub from './components/icons/IconGithub.vue';
7+
import IconBandaid from './components/icons/IconBandaid.vue';
8+
// import TransformationTab from './tabs/TransformationTab.vue';
9+
10+
const tabs = {
11+
explore: ExplorationTab,
12+
// transform: TransformationTab,
13+
};
14+
15+
const availableTabs = computed(() => Object.keys(tabs));
1016
11-
const navItems = [
12-
FileLoader,
13-
ParseButton,
14-
];
1517
</script>
1618

1719
<template>
@@ -21,11 +23,9 @@ const navItems = [
2123
<icon-bandaid/>
2224
<span class="nav-title">fl<b>AST</b>er</span>
2325
</span>
24-
<span class="nav-items">
25-
<span v-for="navItem of navItems" :key="navItem" class="nav-item">
26-
<component :is="navItem"></component>
27-
</span>
28-
</span>
26+
<!-- <span class="tabs">-->
27+
<!-- <button class="btn tab-btn" v-for="tabName in availableTabs" :key="tabName" @click="store.currentTab = tabName">{{tabName}}</button>-->
28+
<!-- </span>-->
2929
<span title="View code on GitHub">
3030
<a href="https://github.com/ctrl-escp/flaster" title="flASTer on GitHub">
3131
<span class="github-text">View on GitHub</span>
@@ -34,15 +34,11 @@ const navItems = [
3434
</span>
3535
</nav>
3636
</header>
37-
<div class="panes">
38-
<div class="pane-top">
39-
<input-code-editor/>
40-
<nodes-list/>
41-
</div>
42-
<div class="pane-bottom">
43-
<filter-editor/>
44-
</div>
45-
</div>
37+
<main>
38+
<keep-alive>
39+
<component :is="tabs[store.currentTab]"/>
40+
</keep-alive>
41+
</main>
4642
<toaster-view/>
4743
</template>
4844

@@ -61,6 +57,10 @@ a:link {
6157
margin-right: 10px;
6258
}
6359
60+
main {
61+
margin-top: .5rem;
62+
}
63+
6464
nav {
6565
background-color: #212121;
6666
display: flex;
@@ -70,15 +70,6 @@ nav {
7070
height: var(--nav-height);
7171
}
7272
73-
.nav-items {
74-
display: flex;
75-
flex-direction: row;
76-
}
77-
78-
.nav-item {
79-
margin: 0 5px;
80-
}
81-
8273
.nav-left {
8374
display: flex;
8475
align-items: center;
@@ -88,22 +79,13 @@ nav {
8879
font-size: 2.4rem;
8980
}
9081
91-
.pane-bottom {
92-
flex: 1;
93-
display: flex;
94-
}
82+
.tab-btn {
83+
text-transform: capitalize;
9584
96-
.pane-top {
97-
flex: 1;
98-
display: flex;
99-
flex-wrap: wrap;
10085
}
10186
102-
.panes {
87+
.tabs {
10388
display: flex;
104-
flex-direction: column;
105-
height: calc(95vh - var(--nav-height));
106-
gap: .2rem;
107-
width: 100%;
89+
gap: 1rem;
10890
}
10991
</style>

‎src/assets/main.css

+5
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ body {
2121
transform: translate(1px, 1px);
2222
}
2323

24+
.btn:disabled {
25+
transform: none;
26+
cursor: not-allowed;
27+
}
28+
2429
.highlighted-code {
2530
background-color: rgba(255, 234, 0, 0.27);
2631
}

‎src/components/CodeEditor.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import {store} from '../store.js';
2+
import store from '../store';
33
import {ref, onMounted} from 'vue';
44
import {lintKeymap} from '@codemirror/lint';
55
import {EditorState} from '@codemirror/state';

‎src/components/CodeViewSwitch.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup>
2+
import {onMounted, ref} from 'vue';
3+
import store from '../store';
4+
5+
const messages = {
6+
isOriginal: 'Show Transformed Code',
7+
isTransformed: 'Show Original Code',
8+
};
9+
10+
const codeViewBtn = ref(null);
11+
12+
onMounted(() => {});
13+
</script>
14+
15+
<template>
16+
<button ref="codeViewBtn" class="btn" @click="store.isShowingTransformedCode = !store.isShowingTransformedCode" :disabled="!store.isTransformed">
17+
{{ store.isShowingTransformedCode ? messages.isTransformed : messages.isOriginal }}
18+
</button>
19+
</template>
20+
21+
<style scoped>
22+
</style>

‎src/components/FileLoader.vue

+5-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script setup>
2+
import store from '../store';
23
import {onMounted, ref} from 'vue';
3-
import {store} from '../store.js';
44
55
const messages = {
6-
noFile: 'Load file',
6+
noFile: 'Load File',
77
loaded: '',
88
};
99
1010
const status = ref(null);
11-
const inputCodeEditorId = 'inputCodeEditor';
11+
const inputCodeEditorId = store.editorIds.inputCodeEditor;
1212
1313
onMounted(() => {
1414
if (status.value) status.value.innerText = messages.noFile;
@@ -20,18 +20,12 @@ function fileChanged(el) {
2020
if (files.length) file = files[0];
2121
if (file) {
2222
file.text().then(c => {
23-
const editor = store.getEditor(inputCodeEditorId);
24-
editor.dispatch({
25-
changes: [
26-
{from: 0, to: editor.state.doc.length},
27-
{from: 0, insert: c},
28-
],
29-
});
23+
store.setContent(store.getEditor(inputCodeEditorId), c);
3024
store.resetParsedState();
3125
});
3226
status.value.innerText = messages.loaded + file.name.substring(0, 30);
3327
} else {
34-
store.getEditor(inputCodeEditorId).dispatch({changes: {from: 0, insert: ''}});
28+
store.setContent(store.getEditor(inputCodeEditorId), '');
3529
status.value.innerText = messages.noFile;
3630
store.resetParsedState();
3731
}

‎src/components/FilterEditor.vue

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup>
2+
import store from '../store';
23
import {computed} from 'vue';
3-
import {store} from '../store.js';
44
import CodeEditor from './CodeEditor.vue';
55
import IconCheckboxActive from './icons/IconCheckboxActive.vue';
66
import IconCheckboxInactive from './icons/IconCheckboxInactive.vue';
@@ -24,6 +24,7 @@ function applyFilter(filterSrc) {
2424
try {
2525
filterSrc = filterSrc.trim();
2626
store.filteredNodes = store.filteredNodes.filter(eval(`n => ${filterSrc}`));
27+
// noinspection JSCheckFunctionSignatures
2728
store.filters.push({
2829
src: filterSrc,
2930
enabled: true,
@@ -75,14 +76,7 @@ function combineEnabledFilters() {
7576
}
7677
7778
function setFilterEditorContent(filterSrc) {
78-
const editor = store.getEditor(store.editorIds.filterEditor);
79-
editor.dispatch({
80-
changes: {
81-
from: 0,
82-
to: editor.state.doc.length,
83-
insert: filterSrc
84-
}
85-
});
79+
store.setContent(store.getEditor(store.editorIds.filterEditor),filterSrc);
8680
}
8781
</script>
8882

@@ -133,6 +127,10 @@ function setFilterEditorContent(filterSrc) {
133127
min-width: 41%;
134128
}
135129
130+
.applied-filters-wrapper > fieldset {
131+
min-width: 40vw;
132+
}
133+
136134
.btn-apply {
137135
background-color: greenyellow;
138136
}
@@ -178,10 +176,10 @@ function setFilterEditorContent(filterSrc) {
178176
179177
.filter-line {
180178
display: flex;
179+
flex: 1;
181180
}
182181
183182
.filter-src {
184-
width: 900px;
185183
white-space: nowrap;
186184
overflow: hidden;
187185
text-overflow: ellipsis;

‎src/components/InputCodeEditor.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup>
2+
import store from '../store';
23
import CodeEditor from './CodeEditor.vue';
3-
import {store} from '../store.js';
44
55
const initialValue = `// This is the default code for flASTer
66
// Click the button at the top to load a file or paste directly into the editor
@@ -14,15 +14,15 @@ const initialValue = `// This is the default code for flASTer
1414

1515
<template>
1616
<fieldset class="code-editor-wrapper">
17-
<legend>Your code</legend>
17+
<legend>Your code <span v-if="store.isShowingTransformedCode">(transformed)</span></legend>
1818
<code-editor :editor-id="store.editorIds.inputCodeEditor" :initial-value="initialValue"/>
1919
</fieldset>
2020
</template>
2121

2222
<style scoped>
2323
.code-editor-wrapper {
2424
flex: 1;
25-
min-width: 0;
25+
min-width: 40vw;
2626
padding: 0;
2727
width: 100%;
2828
height: 50vh;

‎src/components/NodesList.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import {store} from '../store.js';
2+
import store from '../store';
33
import {computed, onMounted, reactive} from 'vue';
44
55
const state = reactive({
@@ -113,6 +113,7 @@ legend {
113113
114114
.node-src {
115115
max-width: calc(50vw - 20rem);
116+
min-width: 30vw;
116117
white-space: nowrap;
117118
overflow: hidden;
118119
text-overflow: ellipsis;

‎src/components/ParseButton.vue

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script setup>
2+
import store from '../store';
23
import {onMounted, ref} from 'vue';
3-
import {store} from '../store.js';
44
55
const messages = {
6-
parseContent: 'Parse content',
7-
contentParsed: 'Content is parsed ',
8-
astParseFail: 'Unable to parse AST',
9-
emptyCode: 'No content',
6+
parseContent: 'Parse Content',
7+
contentParsed: 'Content is Parsed ',
8+
astParseFail: 'Unable to Parse AST',
9+
emptyCode: 'No Content',
1010
};
1111
1212
const parsedStatusEl = ref(null);
@@ -33,7 +33,6 @@ function resetParsedState() {
3333
store.ast = [];
3434
store.matchingNodes = [];
3535
setContentUnparsed();
36-
store.updateNodesInfoMsg();
3736
store.page = 0;
3837
}
3938
@@ -47,7 +46,7 @@ function parseContent() {
4746
try {
4847
resetParsedState();
4948
const code = store.getEditor(store.editorIds.inputCodeEditor).state.doc.toString();
50-
if (!code.length) store.logMessage(messages.emptyCode, 'error');
49+
if (!code?.length) store.logMessage(messages.emptyCode, 'error');
5150
else {
5251
new Promise(() => {
5352
store.filteredNodes = store.ast = [];

‎src/components/ToasterView.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup>
2-
import {onMounted, reactive, ref} from 'vue';
3-
import {store} from '../store.js';
2+
import store from '../store';
3+
import {onMounted, reactive} from 'vue';
44
import ToasterMessage from './ToasterMessage.vue';
55
66
const TOAST_TIMEOUT = 3.5 * 1000;

‎src/store.js

-28
This file was deleted.

‎src/store/exploration.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export default {
2+
3+
nodesPageSize: 100,
4+
page: 0,
5+
isContentParsed: false,
6+
isTransformed: false,
7+
isShowingTransformedCode: false,
8+
filteredNodes: [],
9+
filters: [],
10+
areFiltersActive: true,
11+
// placeholders
12+
resetParsedState() {},
13+
parseContent() {},
14+
};

0 commit comments

Comments
 (0)