@gem-sdk/eslint-plugin 0.0.2 → 0.0.4

package/README.md

@@ -1,13 +1,15 @@
-# eslint-plugin-gem-fe
+# @gem-sdk/eslint-plugin
 
 Shared ESLint rules for all GemPages frontend repositories.
 
 Consolidates every custom rule from `web-builder-shopify-app`, `web-builder`, and `web-builder-elements` into a single publishable npm package. The architecture rules support both React (`.tsx`) and Vue (`.vue`) files.
 
+> The package name is `@gem-sdk/eslint-plugin`, so its ESLint plugin prefix is **`@gem-sdk`** (scoped packages drop the `eslint-plugin-` segment). Reference rules as `@gem-sdk/<rule>` and shareable configs as `plugin:@gem-sdk/<config>`.
+
 ## Installation
 
 ```bash
-yarn add -D eslint-plugin-gem-fe
+yarn add -D @gem-sdk/eslint-plugin
 ```
 
 ## Usage
@@ -18,7 +20,7 @@ Choose the config that matches your tech stack:
 
 ```json
 {
-  "extends": ["plugin:gem-fe/react"]
+  "extends": ["plugin:@gem-sdk/react"]
 }
 ```
 
@@ -26,7 +28,7 @@ Choose the config that matches your tech stack:
 
 ```json
 {
-  "extends": ["plugin:gem-fe/vue"]
+  "extends": ["plugin:@gem-sdk/vue"]
 }
 ```
 
@@ -34,7 +36,7 @@ Choose the config that matches your tech stack:
 
 ```json
 {
-  "extends": ["plugin:gem-fe/recommended"]
+  "extends": ["plugin:@gem-sdk/recommended"]
 }
 ```
 
@@ -42,18 +44,41 @@ Choose the config that matches your tech stack:
 
 ```json
 {
-  "plugins": ["gem-fe"],
+  "plugins": ["@gem-sdk"],
   "rules": {
-    "gem-fe/module-structure": "error",
-    "gem-fe/no-module-barrel": "error",
-    "gem-fe/module-import-boundary": "error",
-    "gem-fe/pure-ui-layer": "error",
-    "gem-fe/module-index-required": "error",
-    "gem-fe/no-t-for-variable": "error",
-    "gem-fe/not-use-store-to-refs": "error",
-    "gem-fe/not-use-custom-color-class": "warn",
-    "gem-fe/no-export-type-from-tsx": "error",
-    "gem-fe/no-import-from-package-path": "error"
+    "@gem-sdk/module-structure": "error",
+    "@gem-sdk/no-module-barrel": "error",
+    "@gem-sdk/module-import-boundary": "error",
+    "@gem-sdk/pure-ui-layer": "error",
+    "@gem-sdk/module-index-required": "error",
+    "@gem-sdk/no-t-for-variable": "error",
+    "@gem-sdk/not-use-store-to-refs": "error",
+    "@gem-sdk/not-use-custom-color-class": "warn",
+    "@gem-sdk/no-export-type-from-component": "error",
+    "@gem-sdk/no-export-type-from-tsx": "error",
+    "@gem-sdk/no-import-from-package-path": "error",
+    "@gem-sdk/no-multiple-component-exports": "error"
   }
 }
 ```
+
+## What each config enables
+
+| Rule | `recommended` | `vue` | `react` |
+| --- | :---: | :---: | :---: |
+| `module-structure` | error | error | error |
+| `no-module-barrel` | error | error | error |
+| `module-import-boundary` | error | error | error |
+| `pure-ui-layer` | error | error | error |
+| `module-index-required` | error | error | error |
+| `no-t-for-variable` | error | error | error |
+| `not-use-store-to-refs` | — | error | — |
+| `not-use-custom-color-class` | — | warn | — |
+| `no-export-type-from-component` | — | error | — |
+| `no-export-type-from-tsx` | — | — | error |
+| `no-import-from-package-path` | — | — | error |
+| `no-multiple-component-exports` | — | — | error |
+
+`vue` and `react` both extend `recommended`. Vue configs require `vue-eslint-parser`.
+
+`no-export-type-from-component` and `no-export-type-from-tsx` enforce the same thing (no `export type`/`export interface` from a component file) — the former also matches `.vue` files, the latter is React-only. They're kept separate so each config only reports once per file.

package/dist/index.d.ts

@@ -5,47 +5,51 @@ export declare const rules: {
     'pure-ui-layer': import("eslint").Rule.RuleModule;
     'module-index-required': import("eslint").Rule.RuleModule;
     'no-t-for-variable': import("eslint").Rule.RuleModule;
+    'no-export-type-from-component': import("eslint").Rule.RuleModule;
     'not-use-store-to-refs': import("eslint").Rule.RuleModule;
     'not-use-custom-color-class': import("eslint").Rule.RuleModule;
     'no-export-type-from-tsx': import("eslint").Rule.RuleModule;
     'no-import-from-package-path': import("eslint").Rule.RuleModule;
+    'no-multiple-component-exports': import("eslint").Rule.RuleModule;
 };
 export declare const configs: {
     recommended: {
-        readonly plugins: readonly ['gem-fe'];
+        readonly plugins: readonly ['@gem-sdk'];
         readonly rules: {
-            readonly 'gem-fe/module-structure': 'error';
-            readonly 'gem-fe/no-module-barrel': 'error';
-            readonly 'gem-fe/module-import-boundary': 'error';
-            readonly 'gem-fe/pure-ui-layer': 'error';
-            readonly 'gem-fe/module-index-required': 'error';
-            readonly 'gem-fe/no-t-for-variable': 'error';
+            readonly '@gem-sdk/module-structure': 'error';
+            readonly '@gem-sdk/no-module-barrel': 'error';
+            readonly '@gem-sdk/module-import-boundary': 'error';
+            readonly '@gem-sdk/pure-ui-layer': 'error';
+            readonly '@gem-sdk/module-index-required': 'error';
+            readonly '@gem-sdk/no-t-for-variable': 'error';
         };
     };
     vue: {
-        readonly plugins: readonly ['gem-fe'];
+        readonly plugins: readonly ['@gem-sdk'];
         readonly rules: {
-            readonly 'gem-fe/module-structure': 'error';
-            readonly 'gem-fe/no-module-barrel': 'error';
-            readonly 'gem-fe/module-import-boundary': 'error';
-            readonly 'gem-fe/pure-ui-layer': 'error';
-            readonly 'gem-fe/module-index-required': 'error';
-            readonly 'gem-fe/no-t-for-variable': 'error';
-            readonly 'gem-fe/not-use-store-to-refs': 'error';
-            readonly 'gem-fe/not-use-custom-color-class': 'warn';
+            readonly '@gem-sdk/module-structure': 'error';
+            readonly '@gem-sdk/no-module-barrel': 'error';
+            readonly '@gem-sdk/module-import-boundary': 'error';
+            readonly '@gem-sdk/pure-ui-layer': 'error';
+            readonly '@gem-sdk/module-index-required': 'error';
+            readonly '@gem-sdk/no-t-for-variable': 'error';
+            readonly '@gem-sdk/not-use-store-to-refs': 'error';
+            readonly '@gem-sdk/not-use-custom-color-class': 'warn';
+            readonly '@gem-sdk/no-export-type-from-component': 'error';
         };
     };
     react: {
-        readonly plugins: readonly ['gem-fe'];
+        readonly plugins: readonly ['@gem-sdk'];
         readonly rules: {
-            readonly 'gem-fe/module-structure': 'error';
-            readonly 'gem-fe/no-module-barrel': 'error';
-            readonly 'gem-fe/module-import-boundary': 'error';
-            readonly 'gem-fe/pure-ui-layer': 'error';
-            readonly 'gem-fe/module-index-required': 'error';
-            readonly 'gem-fe/no-t-for-variable': 'error';
-            readonly 'gem-fe/no-export-type-from-tsx': 'error';
-            readonly 'gem-fe/no-import-from-package-path': 'error';
+            readonly '@gem-sdk/module-structure': 'error';
+            readonly '@gem-sdk/no-module-barrel': 'error';
+            readonly '@gem-sdk/module-import-boundary': 'error';
+            readonly '@gem-sdk/pure-ui-layer': 'error';
+            readonly '@gem-sdk/module-index-required': 'error';
+            readonly '@gem-sdk/no-t-for-variable': 'error';
+            readonly '@gem-sdk/no-export-type-from-tsx': 'error';
+            readonly '@gem-sdk/no-import-from-package-path': 'error';
+            readonly '@gem-sdk/no-multiple-component-exports': 'error';
         };
     };
 };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,KAAK;;;;;;;;;;;CAegB,CAAC;AAyCnC,eAAO,MAAM,OAAO;;oCAnCR,QAAQ;;qBAEhB,yBAAyB,EAAE,OAAO;qBAClC,yBAAyB,EAAE,OAAO;qBAClC,+BAA+B,EAAE,OAAO;qBACxC,sBAAsB,EAAE,OAAO;qBAC/B,8BAA8B,EAAE,OAAO;qBACvC,0BAA0B,EAAE,OAAO;;;;oCAQ3B,QAAQ;;gDAbW,OAAO;gDACP,OAAO;sDACD,OAAO;6CAChB,OAAO;qDACC,OAAO;iDACX,OAAO;qDAWH,OAAO;0DACF,MAAM;;;;oCAQnC,QAAQ;;gDAzBW,OAAO;gDACP,OAAO;sDACD,OAAO;6CAChB,OAAO;qDACC,OAAO;iDACX,OAAO;uDAuBD,OAAO;2DACH,OAAO;;;CAIC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAkBgB,CAAC;AA2CnC,eAAO,MAAM,OAAO;;oCArCR,UAAU;;qBAElB,2BAA2B,EAAE,OAAO;qBACpC,2BAA2B,EAAE,OAAO;qBACpC,iCAAiC,EAAE,OAAO;qBAC1C,wBAAwB,EAAE,OAAO;qBACjC,gCAAgC,EAAE,OAAO;qBACzC,4BAA4B,EAAE,OAAO;;;;oCAQ7B,UAAU;;kDAbW,OAAO;kDACP,OAAO;wDACD,OAAO;+CAChB,OAAO;uDACC,OAAO;mDACX,OAAO;uDAWH,OAAO;4DACF,MAAM;+DACH,OAAO;;;;oCAQzC,UAAU;;kDA1BW,OAAO;kDACP,OAAO;wDACD,OAAO;+CAChB,OAAO;uDACC,OAAO;mDACX,OAAO;yDAwBD,OAAO;6DACH,OAAO;+DACL,OAAO;;;CAIH,CAAC"}

package/dist/index.js

@@ -7,9 +7,11 @@ exports.configs = exports.rules = void 0;
 const moduleImportBoundary_1 = __importDefault(require("./rules/moduleImportBoundary"));
 const moduleIndexRequired_1 = __importDefault(require("./rules/moduleIndexRequired"));
 const moduleStructure_1 = __importDefault(require("./rules/moduleStructure"));
+const noExportTypeFromComponent_1 = __importDefault(require("./rules/noExportTypeFromComponent"));
 const noExportTypeFromTsx_1 = __importDefault(require("./rules/noExportTypeFromTsx"));
 const noImportFromPackagePath_1 = __importDefault(require("./rules/noImportFromPackagePath"));
 const noModuleBarrel_1 = __importDefault(require("./rules/noModuleBarrel"));
+const noMultipleComponentExports_1 = __importDefault(require("./rules/noMultipleComponentExports"));
 const noTForVariable_1 = __importDefault(require("./rules/noTForVariable"));
 const notUseCustomColorClass_1 = __importDefault(require("./rules/notUseCustomColorClass"));
 const notUseStoreToRefs_1 = __importDefault(require("./rules/notUseStoreToRefs"));
@@ -23,47 +25,52 @@ exports.rules = {
     'module-index-required': moduleIndexRequired_1.default,
     // i18n
     'no-t-for-variable': noTForVariable_1.default,
+    // Shared component rules — target both .tsx and .vue
+    'no-export-type-from-component': noExportTypeFromComponent_1.default,
     // Vue-specific
     'not-use-store-to-refs': notUseStoreToRefs_1.default,
     'not-use-custom-color-class': notUseCustomColorClass_1.default,
     // React/TypeScript-specific
     'no-export-type-from-tsx': noExportTypeFromTsx_1.default,
     'no-import-from-package-path': noImportFromPackagePath_1.default,
+    'no-multiple-component-exports': noMultipleComponentExports_1.default,
 };
 /**
  * Shared architecture + i18n rules for both React and Vue repos.
  */
 const recommended = {
-    plugins: ['gem-fe'],
+    plugins: ['@gem-sdk'],
     rules: {
-        'gem-fe/module-structure': 'error',
-        'gem-fe/no-module-barrel': 'error',
-        'gem-fe/module-import-boundary': 'error',
-        'gem-fe/pure-ui-layer': 'error',
-        'gem-fe/module-index-required': 'error',
-        'gem-fe/no-t-for-variable': 'error',
+        '@gem-sdk/module-structure': 'error',
+        '@gem-sdk/no-module-barrel': 'error',
+        '@gem-sdk/module-import-boundary': 'error',
+        '@gem-sdk/pure-ui-layer': 'error',
+        '@gem-sdk/module-index-required': 'error',
+        '@gem-sdk/no-t-for-variable': 'error',
     },
 };
 /**
  * `recommended` + Vue-specific rules. Use with vue-eslint-parser.
  */
 const vue = {
-    plugins: ['gem-fe'],
+    plugins: ['@gem-sdk'],
     rules: {
         ...recommended.rules,
-        'gem-fe/not-use-store-to-refs': 'error',
-        'gem-fe/not-use-custom-color-class': 'warn',
+        '@gem-sdk/not-use-store-to-refs': 'error',
+        '@gem-sdk/not-use-custom-color-class': 'warn',
+        '@gem-sdk/no-export-type-from-component': 'error',
     },
 };
 /**
  * `recommended` + React/TypeScript-specific rules.
  */
 const react = {
-    plugins: ['gem-fe'],
+    plugins: ['@gem-sdk'],
     rules: {
         ...recommended.rules,
-        'gem-fe/no-export-type-from-tsx': 'error',
-        'gem-fe/no-import-from-package-path': 'error',
+        '@gem-sdk/no-export-type-from-tsx': 'error',
+        '@gem-sdk/no-import-from-package-path': 'error',
+        '@gem-sdk/no-multiple-component-exports': 'error',
     },
 };
 exports.configs = { recommended, vue, react };

package/dist/rules/noExportTypeFromComponent.d.ts

@@ -0,0 +1,8 @@
+import type { Rule } from 'eslint';
+/**
+ * Disallows exporting types and interfaces from component files (.tsx and .vue).
+ * Types should live in a dedicated .ts file.
+ */
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=noExportTypeFromComponent.d.ts.map

package/dist/rules/noExportTypeFromComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noExportTypeFromComponent.d.ts","sourceRoot":"","sources":["../../src/rules/noExportTypeFromComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAInC;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAwBhB,CAAC;eAEa,IAAI"}

package/dist/rules/noExportTypeFromComponent.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const COMPONENT_EXTENSIONS = ['.tsx', '.vue'];
+/**
+ * Disallows exporting types and interfaces from component files (.tsx and .vue).
+ * Types should live in a dedicated .ts file.
+ */
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow export type and interface declarations from .tsx and .vue files',
+        },
+        messages: {
+            noTypeExport: 'Exporting types and interfaces from .tsx and .vue files is not allowed. Move them to a .ts file.',
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            ExportNamedDeclaration(node) {
+                const fileName = context.getFilename();
+                if (COMPONENT_EXTENSIONS.some((ext) => fileName.endsWith(ext)) &&
+                    node.exportKind === 'type') {
+                    context.report({ node, messageId: 'noTypeExport' });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/dist/rules/noMultipleComponentExports.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;
+//# sourceMappingURL=noMultipleComponentExports.d.ts.map

package/dist/rules/noMultipleComponentExports.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noMultipleComponentExports.d.ts","sourceRoot":"","sources":["../../src/rules/noMultipleComponentExports.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA8EnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UA+BhB,CAAC;eAEa,IAAI"}

package/dist/rules/noMultipleComponentExports.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const PASCAL_CASE = /^[A-Z][A-Za-z0-9]*$/;
+function isComponentInit(node) {
+    return !!node && (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression');
+}
+function findLocalComponent(body, name) {
+    for (const statement of body) {
+        if (statement.type === 'VariableDeclaration') {
+            for (const declarator of statement.declarations) {
+                if (declarator.id.type === 'Identifier' && declarator.id.name === name && isComponentInit(declarator.init)) {
+                    return { name, node: declarator };
+                }
+            }
+        }
+        if (statement.type === 'FunctionDeclaration' && statement.id?.name === name) {
+            return { name, node: statement };
+        }
+    }
+    return undefined;
+}
+/**
+ * Detects components exported at the top level of a file, covering `export const X = () => {}`,
+ * `export function X() {}`, `export default`, and `export { X }` re-exports of local declarations.
+ */
+function collectExportedComponents(program) {
+    const components = [];
+    for (const statement of program.body) {
+        if (statement.type === 'ExportNamedDeclaration') {
+            const declaration = statement.declaration;
+            if (declaration?.type === 'VariableDeclaration') {
+                for (const declarator of declaration.declarations) {
+                    if (declarator.id.type === 'Identifier' &&
+                        PASCAL_CASE.test(declarator.id.name) &&
+                        isComponentInit(declarator.init)) {
+                        components.push({ name: declarator.id.name, node: declarator });
+                    }
+                }
+            }
+            else if (declaration?.type === 'FunctionDeclaration' && declaration.id && PASCAL_CASE.test(declaration.id.name)) {
+                components.push({ name: declaration.id.name, node: declaration });
+            }
+            for (const specifier of statement.specifiers) {
+                if (specifier.exported.type !== 'Identifier' || specifier.local.type !== 'Identifier')
+                    continue;
+                const exportedName = specifier.exported.name;
+                if (!PASCAL_CASE.test(exportedName))
+                    continue;
+                const local = findLocalComponent(program.body, specifier.local.name);
+                if (local)
+                    components.push({ name: exportedName, node: specifier });
+            }
+        }
+        if (statement.type === 'ExportDefaultDeclaration') {
+            const declaration = statement.declaration;
+            if (declaration.type === 'FunctionDeclaration' || declaration.type === 'ArrowFunctionExpression' || declaration.type === 'FunctionExpression') {
+                const name = declaration.type === 'FunctionDeclaration' ? declaration.id?.name : undefined;
+                if (!name || PASCAL_CASE.test(name)) {
+                    components.push({ name: name ?? 'default', node: declaration });
+                }
+            }
+            else if (declaration.type === 'Identifier') {
+                const local = findLocalComponent(program.body, declaration.name);
+                if (local)
+                    components.push(local);
+            }
+        }
+    }
+    return components;
+}
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow defining and exporting more than one component from a single file',
+        },
+        messages: {
+            multipleComponents: 'Only one component should be defined and exported per file. "{{name}}" is an additional exported component — move it to its own file.',
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            Program(node) {
+                const filename = context.getFilename();
+                if (!filename.endsWith('.tsx'))
+                    return;
+                const components = collectExportedComponents(node);
+                if (components.length <= 1)
+                    return;
+                for (const component of components.slice(1)) {
+                    context.report({
+                        node: component.node,
+                        messageId: 'multipleComponents',
+                        data: { name: component.name },
+                    });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/eslint-plugin",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Shared ESLint rules for GemPages frontend repos (React + Vue)",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -13,8 +13,8 @@
     "test": "vitest run",
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext .ts",
-    "release": "changeset publish",
-    "release-packages": "yarn build && changeset publish"
+    "release": "set -a && . ./.env && set +a && env npm_config_//registry.npmjs.org/:_authToken=\"$NPM_TOKEN\" changeset publish",
+    "release-packages": "set -a && . ./.env && set +a && yarn build && env npm_config_//registry.npmjs.org/:_authToken=\"$NPM_TOKEN\" changeset publish"
   },
   "peerDependencies": {
     "eslint": ">=8.0.0"