fix processing spinner and search filtering

This commit is contained in:
joshuaboud 2022-05-16 12:23:06 -03:00
parent 8850189771
commit 636df9e14c
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
5 changed files with 219 additions and 150 deletions

View File

@ -1,71 +1,76 @@
<template>
<tr
v-show="!/^\./.test(entry.name) || settings?.directoryView?.showHidden"
v-if="settings.directoryView?.view === 'list'"
@dblclick="doubleClickCallback"
class="hover:!bg-red-600/10"
>
<td class="flex items-center gap-1 !pl-1">
<div :style="{ width: `${24 * level}px` }"></div>
<div class="relative w-6">
<component :is="icon" class="size-icon icon-default" />
<LinkIcon v-if="entry.type === 'link'" class="w-2 h-2 absolute right-0 bottom-0 text-default" />
</div>
<button v-if="directoryLike" @click.stop="showEntries = !showEntries">
<ChevronDownIcon v-if="!showEntries" class="size-icon icon-default" />
<ChevronUpIcon v-else class="size-icon icon-default" />
</button>
<div>{{ entry.name }}</div>
<div v-if="entry.type === 'link'" class="inline-flex gap-1 items-center">
<div class="inline relative">
<ArrowNarrowRightIcon class="text-default size-icon-sm inline" />
<XIcon
v-if="entry.target?.broken"
class="icon-danger size-icon-sm absolute inset-x-0 bottom-0"
/>
<template v-if="settings.directoryView?.view === 'list'">
<tr v-show="show || showEntries" @dblclick="doubleClickCallback" class="hover:!bg-red-600/10">
<td class="flex items-center gap-1 !pl-1">
<div :style="{ width: `${24 * level}px` }"></div>
<div class="relative w-6">
<component :is="icon" class="size-icon icon-default" />
<LinkIcon v-if="entry.type === 'link'" class="w-2 h-2 absolute right-0 bottom-0 text-default" />
</div>
<div>{{ entry.target?.rawPath ?? '' }}</div>
</div>
</td>
<td v-if="settings?.directoryView?.cols?.mode" class="font-mono">{{ entry.modeStr }}</td>
<td v-if="settings?.directoryView?.cols?.owner">{{ entry.owner }}</td>
<td v-if="settings?.directoryView?.cols?.group">{{ entry.group }}</td>
<td v-if="settings?.directoryView?.cols?.size">{{ entry.sizeHuman }}</td>
<td v-if="settings?.directoryView?.cols?.ctime">{{ entry.ctime?.toLocaleString() ?? '-' }}</td>
<td v-if="settings?.directoryView?.cols?.mtime">{{ entry.mtime?.toLocaleString() ?? '-' }}</td>
<td v-if="settings?.directoryView?.cols?.atime">{{ entry.atime?.toLocaleString() ?? '-' }}</td>
</tr>
<button v-if="directoryLike" @click.stop="() => showEntries = !showEntries">
<ChevronDownIcon v-if="!showEntries" class="size-icon icon-default" />
<ChevronUpIcon v-else class="size-icon icon-default" />
</button>
<div>{{ entry.name }}</div>
<div v-if="entry.type === 'link'" class="inline-flex gap-1 items-center">
<div class="inline relative">
<ArrowNarrowRightIcon class="text-default size-icon-sm inline" />
<XIcon
v-if="entry.target?.broken"
class="icon-danger size-icon-sm absolute inset-x-0 bottom-0"
/>
</div>
<div>{{ entry.target?.rawPath ?? '' }}</div>
</div>
</td>
<td v-if="settings?.directoryView?.cols?.mode" class="font-mono">{{ entry.modeStr }}</td>
<td v-if="settings?.directoryView?.cols?.owner">{{ entry.owner }}</td>
<td v-if="settings?.directoryView?.cols?.group">{{ entry.group }}</td>
<td v-if="settings?.directoryView?.cols?.size" class="text-right">{{ entry.sizeHuman }}</td>
<td v-if="settings?.directoryView?.cols?.ctime">{{ entry.ctime?.toLocaleString() ?? '-' }}</td>
<td v-if="settings?.directoryView?.cols?.mtime">{{ entry.mtime?.toLocaleString() ?? '-' }}</td>
<td v-if="settings?.directoryView?.cols?.atime">{{ entry.atime?.toLocaleString() ?? '-' }}</td>
</tr>
<component
:show="show || showEntries"
:is="DirectoryEntryList"
v-if="directoryLike && showEntries"
:path="entry.path"
:isChild="true"
:inheritedSortCallback="inheritedSortCallback"
:searchFilterRegExp="searchFilterRegExp"
@cd="(...args) => $emit('cd', ...args)"
@edit="(...args) => $emit('edit', ...args)"
@startProcessing="(...args) => $emit('startProcessing', ...args)"
@stopProcessing="(...args) => $emit('stopProcessing', ...args)"
ref="directoryViewRef"
:level="level + 1"
/>
</template>
<div
v-else
v-show="!/^\./.test(entry.name) || settings?.directoryView?.showHidden"
v-show="show"
@dblclick="doubleClickCallback"
class="flex flex-col items-center w-20 overflow-hidden"
>
<div class="relative w-20">
<component :is="icon" class="icon-default w-20 h-auto" />
<div :class="[directoryLike ? 'right-3 bottom-5' : 'right-5 bottom-3', 'inline absolute']" :title="`-> ${entry.target?.rawPath ?? '?'}`">
<LinkIcon v-if="entry.type === 'link'" :class="[entry.target?.broken ? 'text-red-300 dark:text-red-800' : 'text-gray-100 dark:text-gray-900','w-4 h-auto']" />
<div
:class="[directoryLike ? 'right-3 bottom-5' : 'right-5 bottom-3', 'inline absolute']"
:title="`-> ${entry.target?.rawPath ?? '?'}`"
>
<LinkIcon
v-if="entry.type === 'link'"
:class="[entry.target?.broken ? 'text-red-300 dark:text-red-800' : 'text-gray-100 dark:text-gray-900', 'w-4 h-auto']"
/>
</div>
</div>
<div class="text-center w-full" style="overflow-wrap: break-word;">{{ entry.name }}</div>
</div>
<component
:is="DirectoryEntryList"
v-if="directoryLike && showEntries"
:path="entry.path"
:isChild="true"
:inheritedSortCallback="inheritedSortCallback"
@cd="(...args) => $emit('cd', ...args)"
@edit="(...args) => $emit('edit', ...args)"
@startProcessing="(...args) => $emit('startProcessing', ...args)"
@stopProcessing="(...args) => $emit('stopProcessing', ...args)"
ref="directoryViewRef"
:level="level + 1"
/>
</template>
<script>
import { ref, inject, watch } from 'vue';
import { ref, inject, watch, nextTick } from 'vue';
import { DocumentIcon, FolderIcon, LinkIcon, DocumentRemoveIcon, ArrowNarrowRightIcon, XIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/solid';
import { settingsInjectionKey } from '../keys';
import DirectoryEntryList from './DirectoryEntryList.vue';
@ -74,6 +79,8 @@ export default {
name: 'DirectoryEntry',
props: {
entry: Object,
show: Boolean,
searchFilterRegExp: RegExp,
inheritedSortCallback: {
type: Function,
required: false,
@ -119,6 +126,7 @@ export default {
doubleClickCallback,
getEntries,
DirectoryEntryList,
nextTick,
}
},
components: {

View File

@ -1,22 +1,35 @@
<template>
<DirectoryEntry
v-for="entry, index in entries"
:key="entry.path"
:entry="entry"
:inheritedSortCallback="sortCallback"
@cd="(...args) => $emit('cd', ...args)"
@edit="(...args) => $emit('edit', ...args)"
@sortEntries="sortEntries"
@updateStats="emitStats"
@startProcessing="(...args) => $emit('startProcessing', ...args)"
@stopProcessing="(...args) => $emit('stopProcessing', ...args)"
ref="entryRefs"
:level="level"
/>
<template v-for="entry, index in entries" :key="entry.path">
<DirectoryEntry
:show="entryFilterCallback(entry)"
:entry="entry"
:inheritedSortCallback="sortCallback"
:searchFilterRegExp="searchFilterRegExp"
@cd="(...args) => $emit('cd', ...args)"
@edit="(...args) => $emit('edit', ...args)"
@sortEntries="sortEntries"
@updateStats="emitStats"
@startProcessing="(...args) => $emit('startProcessing', ...args)"
@stopProcessing="(...args) => $emit('stopProcessing', ...args)"
ref="entryRefs"
:level="level"
/>
</template>
<tr
v-if="show && entries.reduce((sum, entry) => entryFilterCallback(entry) ? sum + 1 : sum, 0) === 0"
>
<td
:colspan="Object.values(settings?.directoryView?.cols ?? {}).reduce((sum, current) => current ? sum + 1 : sum, 1) ?? 100"
class="!pl-1 text-muted text-sm"
>
<div class="inline-block" :style="{ width: `${24 * level}px` }"></div>
<div class="inline-block">No entries.</div>
</td>
</tr>
</template>
<script>
import { ref, reactive, computed, inject, watch } from 'vue';
import { ref, reactive, computed, inject, watch, onBeforeUnmount, onMounted } from 'vue';
import { useSpawn, errorString, errorStringHTML, canonicalPath } from '@45drives/cockpit-helpers';
import { notificationsInjectionKey, settingsInjectionKey } from '../keys';
import DirectoryEntry from './DirectoryEntry.vue';
@ -25,6 +38,12 @@ export default {
name: 'DirectoryEntryList',
props: {
path: String,
searchFilterRegExp: RegExp,
show: {
type: Boolean,
required: false,
default: true,
},
sortCallback: {
type: Function,
required: false,
@ -52,6 +71,23 @@ export default {
return props.sortCallback(a, b);
}
});
const processingHandler = {
count: 0,
start: () => {
emit('startProcessing');
processingHandler.count++;
},
stop: () => {
if (processingHandler.count > 0) {
emit('stopProcessing');
processingHandler.count--;
}
},
resolveDangling: () => {
for (; processingHandler.count > 0; processingHandler.count--)
emit('stopProcessing');
}
}
const getAsyncEntryStats = (cwd, entry, modeStr, path, linkTargetRaw) => {
const procs = [];
@ -90,9 +126,8 @@ export default {
if (linkTargetRaw) {
entry.target = {
rawPath: linkTargetRaw,
path: canonicalPath(linkTargetRaw.replace(/^(?!=\/)/, cwd + '/')),
path: canonicalPath(linkTargetRaw.replace(/^(?!\/)/, cwd + '/')),
};
emit('startProcessing');
procs.push(useSpawn(['stat', '-c', '%A', entry.target.path]).promise()
.then(state => {
getAsyncEntryStats(cwd, entry.target, state.stdout.trim());
@ -101,7 +136,6 @@ export default {
.catch(() => {
entry.target.broken = true;
})
.finally(() => emit('stopProcessing'))
);
}
break;
@ -119,7 +153,6 @@ export default {
break;
}
if (entry.permissions.acl && path) {
emit('startProcessing');
procs.push(useSpawn(['getfacl', '--omit-header', '--no-effective', path], { superuser: 'try' }).promise()
.then(state => {
entry.permissions.acl = state.stdout
@ -139,31 +172,28 @@ export default {
.catch(state => {
console.error(`failed to get ACL for ${path}:`, errorString(state));
})
.finally(() => emit('stopProcessing'))
);
}
if (path) {
emit('startProcessing');
procs.push(useSpawn(['stat', '-c', '%W:%Y:%X', path], { superuser: 'try' }).promise() // birth:modification:access
.then(state => {
const [ctimeStr, mtimeStr, atimeStr] = state.stdout.trim().split(':');
const [ctime, mtime, atime] = state.stdout.trim().split(':').map(str => parseInt(str));
Object.assign(entry, {
ctime: new Date(parseInt(ctimeStr) * 1000),
mtime: new Date(parseInt(mtimeStr) * 1000),
atime: new Date(parseInt(atimeStr) * 1000),
ctime: ctime ? new Date(ctime * 1000) : null,
mtime: mtime ? new Date(mtime * 1000) : null,
atime: atime ? new Date(atime * 1000) : null,
});
})
.catch(state =>
notifications.value.constructNotification(`Failed to get stats for ${path}`, errorStringHTML(state), 'error')
)
.finally(() => emit('stopProcessing'))
);
}
return Promise.all(procs);
}
const getEntries = async () => {
emit('startProcessing');
processingHandler.start();
try {
const cwd = props.path;
const procs = [];
@ -215,15 +245,16 @@ export default {
})
.filter(entry => entry !== null)
?? [];
processingHandler.start();
return Promise.all(procs).then(() => {
emitStats();
sortEntries();
})
}).finally(() => processingHandler.stop());
} catch (error) {
entries.value = [];
notifications.value.constructNotification("Error getting directory entries", errorStringHTML(error), 'error');
} finally {
emit('stopProcessing');
processingHandler.stop();
}
}
@ -238,11 +269,19 @@ export default {
}
const sortEntries = () => {
emit('startProcessing');
processingHandler.start();
entries.value.sort(sortCallbackComputed.value);
emit('stopProcessing');
processingHandler.stop();
}
const entryFilterCallback = (entry) =>
(!/^\./.test(entry.name) || settings?.directoryView?.showHidden)
&& (props.searchFilterRegExp?.test(entry.name) ?? true);
onBeforeUnmount(() => {
processingHandler.resolveDangling();
});
watch(() => props.sortCallback, sortEntries);
watch(entries, sortEntries);
watch(() => settings.directoryView?.separateDirs, sortEntries);
@ -256,6 +295,7 @@ export default {
getEntries,
emitStats,
sortEntries,
entryFilterCallback,
}
},
components: {

View File

@ -38,7 +38,7 @@
</th>
<th v-if="settings?.directoryView?.cols?.size">
<div class="flex flex-row flex-nowrap gap-2 items-center">
<div class="grow">Size</div>
<div class="grow text-right">Size</div>
<SortCallbackButton v-model="sortCallback" :compareFunc="sortCallbacks.size" />
</div>
</th>
@ -66,6 +66,7 @@
<DirectoryEntryList
:path="path"
:sortCallback="sortCallback"
:searchFilterRegExp="searchFilterRegExp"
@cd="(...args) => $emit('cd', ...args)"
@edit="(...args) => $emit('edit', ...args)"
@updateStats="(...args) => $emit('updateStats', ...args)"
@ -80,6 +81,7 @@
<DirectoryEntryList
:path="path"
:sortCallback="sortCallback"
:searchFilterRegExp="searchFilterRegExp"
@cd="(...args) => $emit('cd', ...args)"
@edit="(...args) => $emit('edit', ...args)"
@updateStats="(...args) => $emit('updateStats', ...args)"
@ -101,6 +103,7 @@ import DirectoryEntryList from './DirectoryEntryList.vue';
export default {
props: {
path: String,
searchFilterRegExp: RegExp,
},
setup() {
const settings = inject(settingsInjectionKey);

View File

@ -1,70 +1,73 @@
<template>
<div class="grow overflow-hidden">
<div class="h-full flex flex-col items-stretch">
<div class="flex items-stretch divide-x divide-y divide-default flex-wrap">
<div class="flex items-stretch divide-x divide-default grow-[6] basis-0">
<div class="button-group-row px-4 py-2">
<button
class="p-2 rounded-lg hover:bg-accent relative"
:disabled="!pathHistory.backAllowed()"
@click="back()"
@mouseenter="backHistoryDropdown.mouseEnter"
@mouseleave="backHistoryDropdown.mouseLeave"
<div
class="grid grid-cols-[auto_1fr] grid-rows-[1fr 1fr] md:grid-cols-[auto_3fr_1fr] md:grid-row-[1fr] items-stretch divide-x divide-y divide-default"
>
<div class="button-group-row p-1 md:px-4 md:py-2">
<button
class="p-2 rounded-lg hover:bg-accent relative"
:disabled="!pathHistory.backAllowed()"
@click="back()"
@mouseenter="backHistoryDropdown.mouseEnter"
@mouseleave="backHistoryDropdown.mouseLeave"
>
<ArrowLeftIcon class="size-icon icon-default" />
<ChevronDownIcon
class="w-3 h-3 icon-default absolute bottom-1 right-1"
v-if="pathHistory.backAllowed()"
/>
<div
v-if="backHistoryDropdown.showDropdown"
class="absolute top-full left-0 flex flex-col items-stretch z-50 bg-default shadow-lg rounded-lg overflow-y-auto max-h-80"
>
<ArrowLeftIcon class="size-icon icon-default" />
<ChevronDownIcon
class="w-3 h-3 icon-default absolute bottom-1 right-1"
v-if="pathHistory.backAllowed()"
/>
<div
v-if="backHistoryDropdown.showDropdown"
class="absolute top-full left-0 flex flex-col items-stretch z-50 bg-default shadow-lg rounded-lg overflow-y-auto max-h-80"
>
<div
v-for="item, index in pathHistory.stack.slice(0, pathHistory.index).reverse()"
:key="index"
@click="pathHistory.index = pathHistory.index - index"
class="hover:text-white hover:bg-red-600 px-4 py-2 text-sm text-left whitespace-nowrap"
>{{ item }}</div>
</div>
</button>
<button
class="p-2 rounded-lg hover:bg-accent relative"
:disabled="!pathHistory.forwardAllowed()"
@click="forward()"
@mouseenter="forwardHistoryDropdown.mouseEnter"
@mouseleave="forwardHistoryDropdown.mouseLeave"
v-for="item, index in pathHistory.stack.slice(0, pathHistory.index).reverse()"
:key="index"
@click="pathHistory.index = pathHistory.index - index"
class="hover:text-white hover:bg-red-600 px-4 py-2 text-sm text-left whitespace-nowrap"
>{{ item }}</div>
</div>
</button>
<button
class="p-2 rounded-lg hover:bg-accent relative"
:disabled="!pathHistory.forwardAllowed()"
@click="forward()"
@mouseenter="forwardHistoryDropdown.mouseEnter"
@mouseleave="forwardHistoryDropdown.mouseLeave"
>
<ArrowRightIcon class="size-icon icon-default" />
<ChevronDownIcon
class="w-3 h-3 icon-default absolute bottom-1 right-1"
v-if="pathHistory.forwardAllowed()"
/>
<div
v-if="forwardHistoryDropdown.showDropdown"
class="absolute top-full left-0 flex flex-col items-stretch z-50 bg-default shadow-lg rounded-lg overflow-y-auto max-h-80"
>
<ArrowRightIcon class="size-icon icon-default" />
<ChevronDownIcon
class="w-3 h-3 icon-default absolute bottom-1 right-1"
v-if="pathHistory.forwardAllowed()"
/>
<div
v-if="forwardHistoryDropdown.showDropdown"
class="absolute top-full left-0 flex flex-col items-stretch z-50 bg-default shadow-lg rounded-lg overflow-y-auto max-h-80"
>
<div
v-for="item, index in pathHistory.stack.slice(pathHistory.index + 1)"
:key="index"
@click="pathHistory.index = pathHistory.index + index"
class="hover:text-white hover:bg-red-600 px-4 py-2 text-sm text-left whitespace-nowrap"
>{{ item }}</div>
</div>
</button>
<button class="p-2 rounded-lg hover:bg-accent" @click="up()">
<ArrowUpIcon class="size-icon icon-default" />
</button>
<button class="p-2 rounded-lg hover:bg-accent" @click="directoryViewRef.getEntries()">
<RefreshIcon class="size-icon icon-default" />
</button>
</div>
<div class="grow px-4 py-2">
<PathBreadCrumbs :path="pathHistory.current() ?? '/'" @cd="newPath => cd(newPath)" />
</div>
v-for="item, index in pathHistory.stack.slice(pathHistory.index + 1)"
:key="index"
@click="pathHistory.index = pathHistory.index + index"
class="hover:text-white hover:bg-red-600 px-4 py-2 text-sm text-left whitespace-nowrap"
>{{ item }}</div>
</div>
</button>
<button class="p-2 rounded-lg hover:bg-accent" @click="up()">
<ArrowUpIcon class="size-icon icon-default" />
</button>
<button class="p-2 rounded-lg hover:bg-accent" @click="directoryViewRef.getEntries()">
<RefreshIcon class="size-icon icon-default" />
</button>
</div>
<div class="grow shrink-0 px-4 py-2">
<div
class="p-1 md:px-4 md:py-2 col-start-1 col-end-3 row-start-2 row-end-3 md:col-start-auto md:col-end-auto md:row-start-auto md:row-end-auto"
>
<PathBreadCrumbs :path="pathHistory.current() ?? '/'" @cd="newPath => cd(newPath)" />
</div>
<div class="p-1 md:px-4 md:py-2">
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<SearchIcon class="size-icon icon-default" aria-hidden="true" />
@ -72,8 +75,8 @@
<input
type="text"
class="block input-textlike w-full pl-10"
v-model="searchFilter"
placeholder="Search in directory"
v-model="searchFilterStr"
placeholder="Search in directory (foo*, b?r, *.jpg)"
/>
</div>
</div>
@ -81,6 +84,7 @@
<div class="grow overflow-hidden">
<DirectoryView
:path="pathHistory.current() ?? '/'"
:searchFilterRegExp="searchFilterRegExp"
@cd="newPath => cd(newPath)"
@edit="(...args) => console.log('edit', ...args)"
@updateStats="stats => $emit('updateFooterText', `${stats.files} file${stats.files === 1 ? '' : 's'}, ${stats.dirs} director${stats.dirs === 1 ? 'y' : 'ies'}`)"
@ -98,16 +102,18 @@ import DirectoryView from "../components/DirectoryView.vue";
import { errorStringHTML, canonicalPath } from '@45drives/cockpit-helpers';
import PathBreadCrumbs from '../components/PathBreadCrumbs.vue';
import { checkIfExists, checkIfAllowed } from '../mode';
import { notificationsInjectionKey, pathHistoryInjectionKey, lastPathStorageKey } from '../keys';
import { notificationsInjectionKey, pathHistoryInjectionKey, lastPathStorageKey, settingsInjectionKey } from '../keys';
import { ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, RefreshIcon, ChevronDownIcon, SearchIcon } from '@heroicons/vue/solid';
export default {
setup() {
const settings = inject(settingsInjectionKey);
const notifications = inject(notificationsInjectionKey);
const route = useRoute();
const pathHistory = inject(pathHistoryInjectionKey);
const directoryViewRef = ref();
const searchFilter = ref("");
const searchFilterStr = ref("");
const searchFilterRegExp = ref(/^/g);
const backHistoryDropdown = reactive({
showDropdown: false,
timeoutHandle: null,
@ -156,6 +162,17 @@ export default {
cd(canonicalPath((pathHistory.current() ?? "") + '/..'), saveHistory);
}
watch(searchFilterStr, () => {
searchFilterRegExp.value = new RegExp(
`^${
searchFilterStr.value
.replace(/[.+^${}()|[\]]|\\(?![*?])/g, '\\$&') // escape special chars, \\ only if not before * or ?
.replace(/(?<!\\)\*/g, '.*') // replace * with .* if not escaped
.replace(/(?<!\\)\?/g, '.') // replace ? with . if not escaped
}`
);
}, { immediate: true });
watch(() => route.params.path, async () => {
if (!route.params.path)
return cockpit.location.go('/browse/');
@ -194,7 +211,8 @@ export default {
console,
pathHistory,
directoryViewRef,
searchFilter,
searchFilterStr,
searchFilterRegExp,
backHistoryDropdown,
forwardHistoryDropdown,
cd,

View File

@ -245,9 +245,9 @@ camelcase-css@^2.0.1:
integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001335:
version "1.0.30001340"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001340.tgz#029a2f8bfc025d4820fafbfaa6259fd7778340c7"
integrity sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw==
version "1.0.30001341"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz#59590c8ffa8b5939cf4161f00827b8873ad72498"
integrity sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==
chokidar@^3.5.3:
version "3.5.3"