@justeattakeaway/eslint-plugin-snacks-pie-migration 0.3.0 → 0.4.0

package/README.md

@@ -168,13 +168,17 @@ processor: '@justeattakeaway/snacks-pie-migration/added-components',
 
 ## How to update the components data
 
-The components data used by the plugin is stored in the file `snacks-components-data.jsonz` file. This data is extracted from the PIE repository, based on the `pieMetadata` key of each component `package.json` file.
+The components data used by the plugin is stored in two files: `snacks-components-data.json` and `snacks-components-solutions.js`
 
-To update this data, run the following command:
+### `snacks-components-data.json`
+It's an auto-generated file that contains the list of deprecated components and their replacement PIE components (if they exist).
 
-```sh
-yarn build
-```
+Please do not update the `snacks-components-data.json` file directly, as it is generated automatically by a script.
+
+To update the data, you need to update the `pieMetadata` key of the components in the PIE repository, and then run the `build` command of this package to regenerate the JSON file.
+
+### `snacks-components-solutions.js`
+This file can be manually updated with solutions that apply to multiple components, such as migration skills, or with specific solutions for individual components that don't have a direct mapping to a PIE component.
 
 ## VSCode usage
 

package/lib/rules/deprecated-components.js

@@ -1,6 +1,13 @@
 const snacksComponentsData = require('../../snacks-components-data.json');
+const solutions = require('../../snacks-components-solutions');
 const { getImportSpecifiers } = require('../util/get-import-specifiers');
 
+function isReplacedByAnotherComponent (componentName) {
+    const replacementData = snacksComponentsData[componentName];
+    const piePackage = replacementData && replacementData.status && replacementData.status === 'stable' ? replacementData.piePackage : false;
+    return piePackage;
+}
+
 /**
  * Checks for imports of deprecated Snacks components
  */
@@ -35,16 +42,26 @@ module.exports = {
                 const [bypassedComponents] = context.options;
 
                 getImportSpecifiers(node).forEach((componentName) => {
-                    const replacementData = snacksComponentsData[componentName];
                     // Specific components can be bypassed if an array of names are provided
                     const isBypassedInOptions = bypassedComponents && bypassedComponents.includes(componentName);
-                    const isDeprecated = replacementData && replacementData.status && replacementData.status === 'stable';
+                    const alternativeSolution = solutions[componentName];
 
-                    if (!isBypassedInOptions && isDeprecated) {
-                        context.report({
-                            node,
-                            message: `The Snacks component "${componentName}" is being deprecated and can be replaced by "${replacementData.piePackage}".`,
-                        });
+                    if (!isBypassedInOptions) {
+                        if (isReplacedByAnotherComponent(componentName)) {
+                            const replacementComponent = isReplacedByAnotherComponent(componentName);
+                            const solutionDetails = alternativeSolution ? `\n${alternativeSolution}` : '';
+                            context.report({
+                                node,
+                                message: `The Snacks component "${componentName}" is being deprecated and can be replaced by "${replacementComponent}".${solutionDetails}`,
+                            });
+                        } else if (alternativeSolution) {
+                            const reason = `The Snacks component "${componentName}" is being deprecated and can be replaced with plain HTML and CSS.`;
+                            const solutionDetails = alternativeSolution ? `\n${alternativeSolution}` : '';
+                            context.report({
+                                node,
+                                message: `${reason}${solutionDetails}`,
+                            });
+                        }
                     }
                 });
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/eslint-plugin-snacks-pie-migration",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "This plugin helps developers to identify deprecated Snacks components and provides suggestions of replacement PIE components",
   "repository": {
     "type": "git",
@@ -27,7 +27,8 @@
   "exports": "./lib/index.js",
   "files": [
     "lib",
-    "snacks-components-data.json"
+    "snacks-components-data.json",
+    "snacks-components-solutions.js"
   ],
   "devDependencies": {
     "@typescript-eslint/parser": "8.46.3",

package/snacks-components-solutions.js

@@ -0,0 +1,12 @@
+// This file is used by the eslint plugin to hint developers on how to migrate away from deprecated Snacks components
+// - Update this file when a Snacks component is deprecated and doesn't map directly to a PIE component
+// - Update this file when a Snacks migration skill is available for components replaced by a PIE component
+// Unlike `snacks-components-data.json`, this file can be edited by hand.
+
+const migrateWithSkill = 'Use the "snacks-migration-assistant" skill to migrate this component.\nCheck this page for more details: https://www.pie.design/agents/resources/#snacks-migration-skill';
+
+module.exports = {
+    Flex: migrateWithSkill,
+    FlexItem: migrateWithSkill,
+    Util: migrateWithSkill,
+};