Auto-scan for config files from ExtJS

Question

I am creating ExtJS 6.2 application from scratch. I am pretty new to this framework so I could use some help with scaffolding of application.

The designed application is supposed to have separate 'plugins' that (on the code/packages level) will be totally separated. We also are having some kind of Router that will register some info per view name (path/controller/model/additional info). I would like it to be working in a way similar to the template method design pattern. When I add new plugin/module I also add file with specific name pattern - eg. ModuleACMEGlobalConf. I want ExtJS application (or component/class - whatever) to somehow scan whole class tree for files with such name pattern, read their contents and then put in my router config/global namespace variable.

And the question is - what is the best way to achieve that?

UPDATE:

Structure I want to have:

MyAppFolder  
---Module1  
.....MyConfigGlobal1.js  
---Module2  
.....MyConfigGlobal2.js  
---  
---Router.js  -> I want this file to scan whole 'MyAppFolder' tree, find files with *ConfigGlobal*.js pattern, read them and store in global namespace  

MyConfigGlobal1.js

var config = { configProp1:  'test', configProp2:  'test2'}

MyConfigGlobal2.js

var config = {configProp3: 'test3', configProp4: 'test4'}

Router.js

var configsMap = EXT.SOMETHING.FIND.ME.CLASSES.FROM.TREE.WITH.NAME('*MyConfigGlobal*')

And I want the router to load everything (it can be on the class level, not file level) - whether it is one class or one hundred. And with this solution I do not have to change Router.js ever - just add another config class with in a new module I am creating. So there is no need to retest previous modules.

But if I am having something like this in Router:

var requiredConfigs = ['MyGlobalConfig1.js','MyGlobalConfig2.js']

And I am about to add third file/class to this list in Router it means that the policy is broken and I have to retest module1 and module2 because code common for them in some way was modified.

Answer 1

Without brute forcing or a call to backend, you can't. It is a browser limitation.

The reason is security. Because if you could, then one could theoretically use JavaScript to scan websites and get directory structures, probably seeing or even accessing files without authorization.

The best and perhaps most efficient way is to write a method that scans your web directory in your backend and deliver a list like you mentioned in your requiredConfigs idea as JSON object. Even something like

<script type="text/javascript" source="configFiles.js"></script>

in your index.html file will work reliably. Then you have a list of files to be loaded. Then you can modify your bootstrap file in a way that these files will be included in your required list, which can be done with pure JavaScript, right before ExtJS is initialized.