@shopgate/eslint-config 7.33.0-beta.2 → 7.33.1-beta.1

package/README.md

@@ -25,19 +25,21 @@ Add the following to the `.eslintrc` in your project:
 ## Rules
 
 1. [General](#general)
-  1.1. [Commented out code](#commented-out-code)
-  1.2. [Comma dangle](#comma-dangle)
-  1.3. [Multiple empty lines](#multiple-empty-lines)
+   - 1.1 [Commented out code](#commented-out-code)
+   - 1.2 [Comma dangle](#comma-dangle)
+   - 1.3 [Multiple empty lines](#multiple-empty-lines)
 2. [Comments](#comments)
-  2.1. [Capitalized comments](#capitalized-comments)
+   - 2.1 [Capitalized comments](#capitalized-comments)
 3. [Functions](#functions)
-  3.1. [Point free](#point-free)
+   - 3.1 [Point free](#point-free)
 4. [Objects](#objects)
-  4.1. [Single line objects](#single-line-objects)
+   - 4.1 [Single line objects](#single-line-objects)
 5. [Documentation](#documentation)
-  5.1. [JSDoc requirement](#jsdoc-required)
+   - 5.1 [JSDoc requirement](#jsdoc-required)
 6. [React](#react)
-  6.1 [Prop Types](#react-proptypes)
+   - 6.1 [Prop Types](#react-proptypes)
+7. [Extensions](#extensions)
+   - 7.1 [Missing config.json](#missing-extension-config)
 
 ### General
 
@@ -249,3 +251,27 @@ static propTypes = {
 ```
 
 **[⬆ back to top](#rules)**
+
+### Extensions
+
+<a id="missing-extension-config"></a><a name="7.1"></a>
+
+#### Missing config.json
+
+The `config.json` inside the `frontend` folder of an extension is generated by the platform SDK
+when the extension is attached and the frontend is started. In a fresh checkout the file doesn't
+exist yet, so imports of it can't be resolved.
+
+`rulesdir/missing-extension-config` reports those imports as a warning instead of the
+`import/no-unresolved` error. Don't change the ESLint config of the extension to hide it; the
+warning disappears as soon as the file was generated.
+
+```javascript
+// warning as long as config.json wasn't generated
+import config from './config.json';
+```
+
+The rule also reports other relative `config` imports that can't be resolved. The PWA monorepo
+raises it to `error` in its own `.eslintrc.js`.
+
+**[⬆ back to top](#rules)**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/eslint-config",
-  "version": "7.33.0-beta.2",
+  "version": "7.33.1-beta.1",
   "description": "Eslint configuration for the Shopgate Connect projects.",
   "author": "Shopgate <support@shopgate.com>",
   "license": "Apache-2.0",
@@ -23,6 +23,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-rulesdir": "^0.2.2",
     "eslint-plugin-tss-unused-classes": "^1.0.4",
     "typescript": "^5.9.3"
   },

package/rules/__tests__/missing-extension-config.spec.js

@@ -0,0 +1,151 @@
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const { RuleTester } = require('eslint');
+const rule = require('../missing-extension-config');
+
+const root = fs.mkdtempSync(path.join(os.tmpdir(), 'missing-extension-config-'));
+const attached = path.join(root, 'attached', 'frontend');
+const detached = path.join(root, 'detached', 'frontend');
+const library = path.join(root, 'library');
+
+fs.mkdirSync(path.join(attached, 'components'), { recursive: true });
+fs.mkdirSync(path.join(detached, 'components'), { recursive: true });
+fs.mkdirSync(path.join(detached, 'helpers', 'config'), { recursive: true });
+fs.mkdirSync(library);
+fs.writeFileSync(path.join(root, 'attached', 'extension-config.json'), '{}');
+fs.writeFileSync(path.join(root, 'detached', 'extension-config.json'), '{}');
+fs.writeFileSync(path.join(attached, 'config.json'), '{}');
+fs.writeFileSync(path.join(detached, 'components', 'config.js'), '');
+fs.writeFileSync(path.join(detached, 'helpers', 'config', 'index.ts'), '');
+
+afterAll(() => {
+  fs.rmSync(root, {
+    recursive: true,
+    force: true,
+  });
+});
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+});
+
+ruleTester.run('missing-extension-config', rule, {
+  valid: [
+    {
+      code: "import config from './config.json';",
+      filename: path.join(attached, 'index.js'),
+    },
+    {
+      code: "import config from './config';",
+      filename: path.join(attached, 'index.js'),
+    },
+    {
+      code: "import { enabled } from '../config';",
+      filename: path.join(attached, 'components', 'Component.jsx'),
+    },
+    {
+      code: "import config from './config';",
+      filename: path.join(detached, 'components', 'Component.jsx'),
+    },
+    {
+      code: "import config from './config';",
+      filename: path.join(detached, 'helpers', 'index.js'),
+    },
+    {
+      code: "import config from './helpers/config.json';",
+      filename: path.join(detached, 'index.js'),
+    },
+    {
+      code: "import config from '@shopgate/pwa-common/helpers/config';",
+      filename: path.join(detached, 'index.js'),
+    },
+    {
+      code: "const config = require('./config.json');",
+      filename: path.join(attached, 'index.js'),
+    },
+    {
+      code: "export { default } from './config.json';",
+      filename: path.join(attached, 'index.js'),
+    },
+    {
+      code: 'const config = require(name);',
+      filename: path.join(detached, 'index.js'),
+    },
+    {
+      code: 'export const enabled = true;',
+      filename: path.join(detached, 'index.js'),
+    },
+  ],
+  invalid: [
+    {
+      code: "import config from './config.json';",
+      filename: path.join(detached, 'index.js'),
+      errors: [{
+        messageId: 'missing',
+        data: { source: './config.json' },
+      }],
+    },
+    {
+      code: "import config from './config';",
+      filename: path.join(detached, 'index.js'),
+      errors: [{ messageId: 'missing' }],
+    },
+    {
+      code: "import { enabled } from '../../config';",
+      filename: path.join(detached, 'helpers', 'config', 'index.ts'),
+      errors: [{ messageId: 'missing' }],
+    },
+    {
+      code: "import config from '../config.json';",
+      filename: path.join(detached, 'components', 'Component.jsx'),
+      errors: [{ messageId: 'missing' }],
+    },
+    {
+      code: "const config = require('./config.json');",
+      filename: path.join(detached, 'index.js'),
+      errors: [{ messageId: 'missing' }],
+    },
+    {
+      code: "const config = require('../config');",
+      filename: path.join(detached, 'helpers', 'index.js'),
+      errors: [{ messageId: 'missing' }],
+    },
+    {
+      code: "export { default } from './config.json';",
+      filename: path.join(detached, 'index.js'),
+      errors: [{ messageId: 'missing' }],
+    },
+    {
+      code: "export * from './config.json';",
+      filename: path.join(detached, 'index.js'),
+      errors: [{ messageId: 'missing' }],
+    },
+    {
+      code: "const config = import('./config.json');",
+      filename: path.join(detached, 'index.js'),
+      errors: [{ messageId: 'missing' }],
+    },
+    {
+      code: "import config from './config.json';",
+      filename: path.join(detached, 'helpers', 'index.js'),
+      errors: [{
+        messageId: 'unresolved',
+        data: { source: './config.json' },
+      }],
+    },
+    {
+      code: "import config from './config';",
+      filename: path.join(library, 'index.js'),
+      errors: [{ messageId: 'unresolved' }],
+    },
+    {
+      code: "const config = require('./config.json');",
+      filename: path.join(library, 'index.js'),
+      errors: [{ messageId: 'unresolved' }],
+    },
+  ],
+});

package/rules/helpers/configImportPattern.js

@@ -0,0 +1 @@
+module.exports = '^(\\./|(\\.\\./)+)config(\\.json)?$';

package/rules/missing-extension-config.js

@@ -0,0 +1,89 @@
+const fs = require('fs');
+const path = require('path');
+const configImportPattern = require('./helpers/configImportPattern');
+
+const CONFIG_IMPORT_REGEX = new RegExp(configImportPattern);
+const MODULE_EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx'];
+
+/**
+ * Checks whether an import target without file extension points to a script module.
+ * @param {string} target The absolute import target.
+ * @returns {boolean}
+ */
+const isScriptModule = target => MODULE_EXTENSIONS.some(extension => (
+  fs.existsSync(`${target}${extension}`) || fs.existsSync(path.join(target, `index${extension}`))
+));
+
+/**
+ * Checks whether a relative config import can be resolved.
+ * @param {string} target The absolute import target.
+ * @returns {boolean}
+ */
+const isResolvable = (target) => {
+  if (target.endsWith('.json')) {
+    return fs.existsSync(target);
+  }
+
+  return isScriptModule(target) || fs.existsSync(`${target}.json`);
+};
+
+/**
+ * Checks whether an import target is the config.json which the platform SDK generates inside
+ * the frontend and extension folders of an extension.
+ * @param {string} target The absolute import target.
+ * @returns {boolean}
+ */
+const isGeneratedConfig = target => (
+  fs.existsSync(path.join(path.dirname(target), '..', 'extension-config.json'))
+);
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Warn about imports of an extension config.json that was not generated yet',
+    },
+    schema: [],
+    messages: {
+      unresolved: 'Unable to resolve path to module "{{source}}".',
+      missing: '"{{source}}" doesn\'t exist yet. The platform SDK generates it for attached extensions ("sgconnect extension attach") when the frontend or backend is started. The warning can be ignored until then; don\'t change code or the ESLint config to hide it.',
+    },
+  },
+  create: (context) => {
+    /**
+     * Reports a source node that points to a config which can't be resolved.
+     * @param {Object} [sourceNode] The node that holds the import source.
+     */
+    const check = (sourceNode) => {
+      const source = sourceNode?.value;
+
+      if (typeof source !== 'string' || !CONFIG_IMPORT_REGEX.test(source)) {
+        return;
+      }
+
+      const target = path.resolve(path.dirname(context.getFilename()), source);
+
+      if (isResolvable(target)) {
+        return;
+      }
+
+      context.report({
+        node: sourceNode,
+        messageId: isGeneratedConfig(target) ? 'missing' : 'unresolved',
+        data: { source },
+      });
+    };
+
+    return {
+      ImportDeclaration: node => check(node.source),
+      ImportExpression: node => check(node.source),
+      ExportNamedDeclaration: node => check(node.source),
+      ExportAllDeclaration: node => check(node.source),
+      CallExpression: (node) => {
+        if (node.callee.name === 'require' && node.arguments.length === 1) {
+          check(node.arguments[0]);
+        }
+      },
+    };
+  },
+};

package/ruleset/extras.js

@@ -1,3 +1,9 @@
+const path = require('path');
+const rulesDirPlugin = require('eslint-plugin-rulesdir');
+const configImportPattern = require('../rules/helpers/configImportPattern');
+
+rulesDirPlugin.RULES_DIR = path.join(__dirname, '..', 'rules');
+
 module.exports = {
   extends: [
     'plugin:eslint-comments/recommended',
@@ -5,6 +11,7 @@ module.exports = {
   plugins: [
     'extra-rules',
     'json',
+    'rulesdir',
     'tss-unused-classes',
   ],
   rules: {
@@ -17,6 +24,12 @@ module.exports = {
     'eslint-comments/no-unused-disable': 'error',
     'eslint-comments/no-unused-enable': 'error',
     'tss-unused-classes/unused-classes': 'warn',
+    'import/no-unresolved': ['error', {
+      commonjs: true,
+      caseSensitive: true,
+      ignore: [configImportPattern],
+    }],
+    'rulesdir/missing-extension-config': 'warn',
     'no-restricted-imports': ['warn', {
       paths: [
         {
@@ -25,7 +38,7 @@ module.exports = {
         },
         {
           name: 'glamor',
-          message: 'glamor is deprecated and will be removed. Write styles with makeStyles from @shopgate/engage/styles.',
+          message: 'glamor is deprecated and will be removed. Write styles with makeStyles and global styles with injectGlobal, both from @shopgate/engage/styles. The shop must be deployed with PWA 7.32.0 or later.',
         },
       ],
     }],