Summary:

⚠️ We couldn't build/test your project to verify our changes. Add a Dockerfile to significantly improve code quality.

Issue: resolves #2195

Implementation:

Step 1: Update webpack resolve configuration in vue.config.js

Update the webpack resolve configuration in the vue.config.js file in the /apps/studio/ and /apps/sqltools/ directories to include the .vue extension in all import statements. Here's an example of how to do this:

resolve: {
  alias: {
    "@shared": path.resolve(__dirname, '../../shared/src')
  },
  extensions: ['.js', '.json', '.vue']
}

This will make webpack resolve .js, .json, and .vue files, and it will fail for .vue files if the extension is not provided.

Step 2: Create a script to check import statements

Create a script using Node.js to traverse through the codebase, read each file, and check the import statements. If an import statement is found without a .vue extension, the script should throw an error. Here's a basic example of how you might structure this script:

const fs = require('fs');
const path = require('path');

function checkFile(filePath) {
  const content = fs.readFileSync(filePath, 'utf8');
  const regex = /import .+ from ['"](.+)['"]/g;
  let match;
  while (match = regex.exec(content)) {
    if (path.extname(match[1]) !== '.vue') {
      throw new Error(`Missing .vue extension in import statement in file ${filePath}`);
    }
  }
}

function traverseDirectory(directory) {
  const files = fs.readdirSync(directory);
  for (const file of files) {
    const filePath = path.join(directory, file);
    if (fs.statSync(filePath).isDirectory()) {
      traverseDirectory(filePath);
    } else if (path.extname(filePath) === '.js' || path.extname(filePath) === '.vue') {
      checkFile(filePath);
    }
  }
}

traverseDirectory('./src');

This script starts by traversing the 'src' directory. For each file it finds, it checks if the file is a directory. If it is, it recursively traverses that directory. If it's a .js or .vue file, it reads the file and checks the import statements. If it finds an import statement without a .vue extension, it throws an error.

You can run this script as part of your build process to ensure that all import statements include the .vue extension.

Report:

Something look wrong?: If this Pull Request doesn't contain the expected changes, add more information to #2195. Then, try again. For more information, check the documentation.