Refactor to remove code coupling with Webpack

Remove using Webpack import syntax such as: `js-yaml-loader!@/..`. It's
a non-standard syntax that couples the code to Webpack.

Configure instead by specifying Webpack loader in Vue configuration
file.

Enable related ESLint rules.

Remove unused dependency `raw-loader` and refactor
`NoUnintendedInlining` test to load files using file system (dropping
webpack dependency).

Refactor to use `import type` for type imports to show the indent
clearly and satisfy failing ESLint rules.

.eslintrc.js

@@ -88,10 +88,6 @@ function getOwnRules() {
 function getTodoRules() { // Should be worked on separate future commits
   return {
     'import/no-extraneous-dependencies': 'off',
-    // Requires webpack configuration change with import '..yaml' files.
-    'import/no-webpack-loader-syntax': 'off',
-    'import/extensions': 'off',
-    'import/no-unresolved': 'off',
     // Accessibility improvements:
     'vuejs-accessibility/form-control-has-label': 'off',
     'vuejs-accessibility/click-events-have-key-events': 'off',

package.json

@@ -71,7 +71,6 @@
     "eslint-plugin-vuejs-accessibility": "^1.1.0",
     "js-yaml-loader": "^1.2.2",
     "markdownlint-cli": "^0.29.0",
-    "raw-loader": "^4.0.2",
     "remark-cli": "^10.0.0",
     "remark-lint-no-dead-urls": "^1.1.0",
     "remark-preset-lint-consistent": "^5.1.0",

src/application/Parser/ApplicationParser.ts

@@ -1,9 +1,9 @@
-import { CollectionData } from 'js-yaml-loader!@/*';
+import type { CollectionData } from '@/application/collections/';
 import { IApplication } from '@/domain/IApplication';
 import { IProjectInformation } from '@/domain/IProjectInformation';
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
-import WindowsData from 'js-yaml-loader!@/application/collections/windows.yaml';
+import WindowsData from '@/application/collections/windows.yaml';
-import MacOsData from 'js-yaml-loader!@/application/collections/macos.yaml';
+import MacOsData from '@/application/collections/macos.yaml';
 import { parseProjectInformation } from '@/application/Parser/ProjectInformationParser';
 import { Application } from '@/domain/Application';
 import { parseCategoryCollection } from './CategoryCollectionParser';

src/application/Parser/CategoryCollectionParser.ts

@@ -1,4 +1,4 @@
-import { CollectionData } from 'js-yaml-loader!@/*';
+import type { CollectionData } from '@/application/collections/';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
 import { CategoryCollection } from '@/domain/CategoryCollection';

src/application/Parser/CategoryParser.ts

@@ -1,6 +1,6 @@
-import {
+import type {
   CategoryData, ScriptData, CategoryOrScriptData, InstructionHolder,
-} from 'js-yaml-loader!@/*';
+} from '@/application/collections/';
 import { Script } from '@/domain/Script';
 import { Category } from '@/domain/Category';
 import { parseDocUrls } from './DocumentationParser';

src/application/Parser/DocumentationParser.ts

@@ -1,4 +1,4 @@
-import { DocumentableData, DocumentationUrlsData } from 'js-yaml-loader!@/*';
+import type { DocumentableData, DocumentationUrlsData } from '@/application/collections/';
 
 export function parseDocUrls(documentable: DocumentableData): ReadonlyArray<string> {
   if (!documentable) {

src/application/Parser/Script/CategoryCollectionParseContext.ts

@@ -1,4 +1,4 @@
-import { FunctionData } from 'js-yaml-loader!@/*';
+import type { FunctionData } from '@/application/collections/';
 import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
 import { ILanguageSyntax } from '@/domain/ScriptCode';
 import { IScriptCompiler } from './Compiler/IScriptCompiler';

src/application/Parser/Script/Compiler/Function/Call/FunctionCallParser.ts

@@ -1,4 +1,4 @@
-import { FunctionCallData, FunctionCallsData, FunctionCallParametersData } from 'js-yaml-loader!@/*';
+import type { FunctionCallData, FunctionCallsData, FunctionCallParametersData } from '@/application/collections/';
 import { IFunctionCall } from './IFunctionCall';
 import { FunctionCallArgumentCollection } from './Argument/FunctionCallArgumentCollection';
 import { FunctionCallArgument } from './Argument/FunctionCallArgument';

src/application/Parser/Script/Compiler/Function/ISharedFunctionsParser.ts

@@ -1,4 +1,4 @@
-import { FunctionData } from 'js-yaml-loader!@/*';
+import type { FunctionData } from '@/application/collections/';
 import { ISharedFunctionCollection } from './ISharedFunctionCollection';
 
 export interface ISharedFunctionsParser {

src/application/Parser/Script/Compiler/Function/SharedFunctionsParser.ts

@@ -1,4 +1,4 @@
-import { FunctionData, InstructionHolder } from 'js-yaml-loader!@/*';
+import type { FunctionData, InstructionHolder } from '@/application/collections/';
 import { createFunctionWithInlineCode, createCallerFunction } from './SharedFunction';
 import { SharedFunctionCollection } from './SharedFunctionCollection';
 import { ISharedFunctionCollection } from './ISharedFunctionCollection';

src/application/Parser/Script/Compiler/IScriptCompiler.ts

@@ -1,4 +1,4 @@
-import { ScriptData } from 'js-yaml-loader!@/*';
+import type { ScriptData } from '@/application/collections/';
 import { IScriptCode } from '@/domain/IScriptCode';
 
 export interface IScriptCompiler {

src/application/Parser/Script/Compiler/ScriptCompiler.ts

@@ -1,4 +1,4 @@
-import { FunctionData, ScriptData } from 'js-yaml-loader!@/*';
+import type { FunctionData, ScriptData } from '@/application/collections/';
 import { IScriptCode } from '@/domain/IScriptCode';
 import { ScriptCode, ILanguageSyntax } from '@/domain/ScriptCode';
 import { IScriptCompiler } from './IScriptCompiler';

src/application/Parser/Script/ScriptParser.ts

@@ -1,4 +1,4 @@
-import { ScriptData } from 'js-yaml-loader!@/*';
+import type { ScriptData } from '@/application/collections/';
 import { Script } from '@/domain/Script';
 import { RecommendationLevel } from '@/domain/RecommendationLevel';
 import { IScriptCode } from '@/domain/IScriptCode';

src/application/Parser/ScriptingDefinition/ScriptingDefinitionParser.ts

@@ -1,4 +1,4 @@
-import { ScriptingDefinitionData } from 'js-yaml-loader!@/*';
+import type { ScriptingDefinitionData } from '@/application/collections/';
 import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
 import { ScriptingDefinition } from '@/domain/ScriptingDefinition';
 import { ScriptingLanguage } from '@/domain/ScriptingLanguage';

src/application/collections/collection.yaml.d.ts

@@ -1,4 +1,4 @@
-declare module 'js-yaml-loader!@/*' {
+declare module '@/application/collections/*' {
   export interface CollectionData {
     readonly os: string;
     readonly scripting: ScriptingDefinitionData;

tests/unit/application/Parser/ApplicationParser.spec.ts

@@ -1,10 +1,10 @@
 import 'mocha';
 import { expect } from 'chai';
-import { CollectionData } from 'js-yaml-loader!@/*';
+import type { CollectionData } from '@/application/collections/';
 import { parseProjectInformation } from '@/application/Parser/ProjectInformationParser';
 import { CategoryCollectionParserType, parseApplication } from '@/application/Parser/ApplicationParser';
-import WindowsData from 'js-yaml-loader!@/application/collections/windows.yaml';
+import WindowsData from '@/application/collections/windows.yaml';
-import MacOsData from 'js-yaml-loader!@/application/collections/macos.yaml';
+import MacOsData from '@/application/collections/macos.yaml';
 import { IProjectInformation } from '@/domain/IProjectInformation';
 import { ProjectInformation } from '@/domain/ProjectInformation';
 import { ICategoryCollection } from '@/domain/ICategoryCollection';

tests/unit/application/Parser/DocumentationParser.spec.ts

@@ -1,6 +1,6 @@
 import 'mocha';
 import { expect } from 'chai';
-import { DocumentableData } from 'js-yaml-loader!@/*';
+import type { DocumentableData } from '@/application/collections/';
 import { parseDocUrls } from '@/application/Parser/DocumentationParser';
 import { itEachAbsentObjectValue } from '@tests/unit/shared/TestCases/AbsentTests';
 

tests/unit/application/Parser/Script/Compiler/Function/Call/Compiler/FunctionCallCompiler.spec.ts

@@ -1,6 +1,6 @@
 import 'mocha';
 import { expect } from 'chai';
-import { FunctionCallParametersData } from 'js-yaml-loader!@/*';
+import type { FunctionCallParametersData } from '@/application/collections/';
 import { FunctionCallCompiler } from '@/application/Parser/Script/Compiler/Function/Call/Compiler/FunctionCallCompiler';
 import { ISharedFunctionCollection } from '@/application/Parser/Script/Compiler/Function/ISharedFunctionCollection';
 import { IExpressionsCompiler } from '@/application/Parser/Script/Compiler/Expressions/IExpressionsCompiler';

tests/unit/application/Parser/Script/Compiler/Function/SharedFunctionsParser.spec.ts

@@ -1,6 +1,6 @@
 import 'mocha';
 import { expect } from 'chai';
-import { FunctionData } from 'js-yaml-loader!@/*';
+import type { FunctionData } from '@/application/collections/';
 import { ISharedFunction } from '@/application/Parser/Script/Compiler/Function/ISharedFunction';
 import { SharedFunctionsParser } from '@/application/Parser/Script/Compiler/Function/SharedFunctionsParser';
 import { FunctionDataStub } from '@tests/unit/shared/Stubs/FunctionDataStub';

tests/unit/application/Parser/Script/Compiler/ScriptCompiler.spec.ts

@@ -1,6 +1,6 @@
 import 'mocha';
 import { expect } from 'chai';
-import { FunctionData } from 'js-yaml-loader!@/*';
+import type { FunctionData } from '@/application/collections/';
 import { ILanguageSyntax, ScriptCode } from '@/domain/ScriptCode';
 import { ScriptCompiler } from '@/application/Parser/Script/Compiler/ScriptCompiler';
 import { ISharedFunctionsParser } from '@/application/Parser/Script/Compiler/Function/ISharedFunctionsParser';

tests/unit/application/collections/NoUnintentedInlining.spec.ts

@@ -1,7 +1,7 @@
 import 'mocha';
+import { resolve, join, basename } from 'path';
+import { readdirSync, readFileSync } from 'fs';
 import { expect } from 'chai';
-import WindowsData from 'raw-loader!@/application/collections/windows.yaml';
-import MacOsData from 'raw-loader!@/application/collections/macos.yaml';
 
 /*
   A common mistake when working with yaml files to forget mentioning that a value should
@@ -17,19 +17,13 @@ import MacOsData from 'raw-loader!@/application/collections/macos.yaml';
   These tests can be considered as "linter" more than "unit-test" and therefore can lead
   to false-positives.
 */
-describe('collection files to have no unintended inlining', async () => {
+describe('collection files to have no unintended inlining', () => {
   // arrange
-  const testCases = [{
+  const testCases = createTestCases('src/application/collections/');
-    name: 'macos',
-    fileContent: MacOsData,
-  }, {
-    name: 'windows',
-    fileContent: WindowsData,
-  },
-  ];
   for (const testCase of testCases) {
     it(`${testCase.name}`, async () => {
-      const lines = await findBadLineNumbers(testCase.fileContent);
+      // act
+      const lines = await findBadLineNumbers(testCase.content);
       // assert
       expect(lines).to.be.have.lengthOf(0, printMessage());
       function printMessage(): string {
@@ -57,6 +51,9 @@ function findLineNumbersEndingWith(content: string, ending: string): number[] {
 }
 
 function sanityCheck(content: string, ending: string): void {
+  if (!content) {
+    throw new Error('File content is empty, is the file loaded correctly?');
+  }
   if (!content.includes(ending)) {
     throw new Error(
       `File does not contain string "${ending}" string at all.`
@@ -64,3 +61,22 @@ function sanityCheck(content: string, ending: string): void {
     );
   }
 }
+
+interface ITestCase {
+  name: string;
+  content: string;
+}
+function createTestCases(collectionsDirFromRoot: string): ITestCase[] {
+  const collectionsDir = resolve(`./${collectionsDirFromRoot}`);
+  const fileNames = readdirSync(collectionsDir);
+  if (fileNames.length === 0) {
+    throw new Error(`Could not find any collection in ${collectionsDir}`);
+  }
+  const collectionFilePaths = fileNames
+    .filter((name) => name.endsWith('.yaml'))
+    .map((name) => join(collectionsDir, name));
+  return collectionFilePaths.map((path) => ({
+    name: basename(path),
+    content: readFileSync(path, 'utf-8'),
+  }));
+}

tests/unit/shared/Stubs/CategoryDataStub.ts

@@ -1,4 +1,4 @@
-import { CategoryData, CategoryOrScriptData, DocumentationUrlsData } from 'js-yaml-loader!@/*';
+import type { CategoryData, CategoryOrScriptData, DocumentationUrlsData } from '@/application/collections/';
 import { ScriptDataStub } from './ScriptDataStub';
 
 export class CategoryDataStub implements CategoryData {

tests/unit/shared/Stubs/CollectionDataStub.ts

@@ -1,6 +1,6 @@
-import {
+import type {
   CategoryData, ScriptData, CollectionData, ScriptingDefinitionData, FunctionData,
-} from 'js-yaml-loader!@/*';
+} from '@/application/collections/';
 import { RecommendationLevel } from '@/domain/RecommendationLevel';
 import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
 

tests/unit/shared/Stubs/FunctionCallDataStub.ts

@@ -1,4 +1,4 @@
-import { FunctionCallData, FunctionCallParametersData } from 'js-yaml-loader!@/*';
+import type { FunctionCallData, FunctionCallParametersData } from '@/application/collections/';
 
 export class FunctionCallDataStub implements FunctionCallData {
   public function = 'callDatStubCalleeFunction';

tests/unit/shared/Stubs/FunctionDataStub.ts

@@ -1,4 +1,4 @@
-import { FunctionData, ParameterDefinitionData, FunctionCallsData } from 'js-yaml-loader!@/*';
+import type { FunctionData, ParameterDefinitionData, FunctionCallsData } from '@/application/collections/';
 import { FunctionCallDataStub } from './FunctionCallDataStub';
 
 export class FunctionDataStub implements FunctionData {

tests/unit/shared/Stubs/ParameterDefinitionDataStub.ts

@@ -1,4 +1,4 @@
-import { ParameterDefinitionData } from 'js-yaml-loader!@/*';
+import type { ParameterDefinitionData } from '@/application/collections/';
 
 export class ParameterDefinitionDataStub implements ParameterDefinitionData {
   public name: string;

tests/unit/shared/Stubs/ScriptCompilerStub.ts

@@ -1,4 +1,4 @@
-import { ScriptData } from 'js-yaml-loader!@/*';
+import type { ScriptData } from '@/application/collections/';
 import { IScriptCompiler } from '@/application/Parser/Script/Compiler/IScriptCompiler';
 import { IScriptCode } from '@/domain/IScriptCode';
 

tests/unit/shared/Stubs/ScriptDataStub.ts

@@ -1,4 +1,4 @@
-import { FunctionCallData, ScriptData } from 'js-yaml-loader!@/*';
+import type { FunctionCallData, ScriptData } from '@/application/collections/';
 import { RecommendationLevel } from '@/domain/RecommendationLevel';
 import { FunctionCallDataStub } from '@tests/unit/shared/Stubs/FunctionCallDataStub';
 

tests/unit/shared/Stubs/ScriptingDefinitionDataStub.ts

@@ -1,4 +1,4 @@
-import { ScriptingDefinitionData } from 'js-yaml-loader!@/*';
+import type { ScriptingDefinitionData } from '@/application/collections/';
 import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
 
 export class ScriptingDefinitionDataStub implements ScriptingDefinitionData {

tests/unit/shared/Stubs/SharedFunctionsParserStub.ts

@@ -1,4 +1,4 @@
-import { FunctionData } from 'js-yaml-loader!@/*';
+import type { FunctionData } from '@/application/collections/';
 import { sequenceEqual } from '@/application/Common/Array';
 import { ISharedFunctionCollection } from '@/application/Parser/Script/Compiler/Function/ISharedFunctionCollection';
 import { ISharedFunctionsParser } from '@/application/Parser/Script/Compiler/Function/ISharedFunctionsParser';

vue.config.js

@@ -8,6 +8,7 @@ module.exports = defineConfig({
   transpileDependencies: true,
   chainWebpack: (config) => {
     changeAppEntryPoint('./src/presentation/main.ts', config);
+    addWebpackRule('yaml', /\.ya?ml$/, 'js-yaml-loader', config);
   },
   configureWebpack: {
     resolve: {
@@ -51,6 +52,15 @@ module.exports = defineConfig({
   },
 });
 
+function addWebpackRule(name, test, loader, config) {
+  config.module
+    .rule(name)
+    .test(test)
+    .use(loader)
+    .loader(loader)
+    .end();
+}
+
 function changeAppEntryPoint(entryPath, config) {
   config.entry('app').clear().add(entryPath).end();
 }