[eslint-plugin-expo] initial setup for eslint-plugin-expo

packages/eslint-plugin-expo/.eslintignore

@@ -0,0 +1 @@
+build

packages/eslint-plugin-expo/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: 'universe/node',
+};

packages/eslint-plugin-expo/.gitignore

@@ -0,0 +1,2 @@
+build
+coverage

packages/eslint-plugin-expo/CONTRIBUTING.md

@@ -0,0 +1,16 @@
+## Creating a new rule
+
+To create a new rules, add the rule definition, a test, and documentation:
+```bash
+touch src/rules/newRule.ts
+touch src/__tests__/newRule.ts
+touch docs/rules/newRule.md
+```
+
+and make sure you add the new rule to `src/rules/index.ts`.
+
+Now you can implement your rule in `src/rules` (run `yarn test` to run the tests). The [AST explorer](https://astexplorer.net/) can come in handy here when writing the rule.
+
+Now update the documentation for the new rule in `docs/rules`.
+
+And finally make sure it's added to the table and config in `README.md`.

packages/eslint-plugin-expo/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-present Expo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/eslint-plugin-expo/README.md

@@ -0,0 +1,49 @@
+# eslint-plugin-expo
+
+ESLint rules for Expo apps
+
+## Installation
+
+You'll first need to install [ESLint](https://eslint.org/):
+
+```sh
+npx expo install eslint --save-dev
+```
+
+Next, install `eslint-plugin-expo`:
+
+```sh
+npx expo install eslint-plugin-expo --save-dev
+```
+
+## Usage
+
+Add `expo` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
+
+```json
+{
+  "plugins": [
+    "expo"
+    ]
+}
+```
+
+
+Then configure the rules you want to use under the rules section.
+
+```json
+{
+  "rules": {
+    "expo/no-env-var-destructuring": "error",
+    "expo/no-dynamic-env-var": "error",
+  }
+}
+```
+
+
+## Rules
+
+| Name                                                               | Description                                          |
+| :----------------------------------------------------------------- | :--------------------------------------------------- |
+| [no-dynamic-env-var](docs/rules/noDynamicEnvVar.md)             | Prevents process.env from being accessed dynamically |
+| [no-env-var-destructuring](docs/rules/noEnvVarDestructuring.md) | Disallow desctructuring of environment variables     |

packages/eslint-plugin-expo/docs/rules/noDynamicEnvVar.md

@@ -0,0 +1,35 @@
+# Prevents process.env from being accessed dynamically (`expo/no-dynamic-env-var`)
+
+Expo's Metro config injects build settings that can be used in the client bundle via environment variables. The environment variables (`process.env.*`) are replaced with the appropriate values at build time. This means that `process.env` is not a standard JavaScript object, and dynamically accessing its values will break inlining of environment variables.
+
+## Rule Details
+
+This rule aims to prevent users from encountering errors due to dynamically accessing variables from `process.env`.
+
+Examples of **incorrect** code for this rule:
+
+```js
+
+const myVar = process.env["MY_VAR"]
+
+
+const dynamicVar = "MY_VAR";
+const myVar = process.env[dynamicVar];
+
+```
+
+Examples of **correct** code for this rule:
+
+```js
+
+const myVar = process.env.MY_VAR;
+
+```
+
+## When Not To Use It
+
+If you're not using Expo.
+
+## Further Reading
+
+- [Metro environment settings](https://docs.expo.dev/versions/latest/config/metro/#environment-settings)

packages/eslint-plugin-expo/docs/rules/noEnvVarDestructuring.md

@@ -0,0 +1,31 @@
+# Disallow desctructuring of environment variables (`expo/no-env-var-destructuring`)
+
+Expo's Metro config injects build settings that can be used in the client bundle via environment variables. The environment variables (`process.env.*`) are replaced with the appropriate values at build time. This means that `process.env` is not a standard JavaScript object, and destructuring will break inlining on environment variables.
+
+## Rule Details
+
+This rule aims to prevent users from encountering errors due to destructuring environment variables.
+
+Examples of **incorrect** code for this rule:
+
+```js
+
+const { MY_VAR } = process.env;
+
+```
+
+Examples of **correct** code for this rule:
+
+```js
+
+const myVar = process.env.MY_VAR;
+
+```
+
+## When Not To Use It
+
+If you're not using Expo.
+
+## Further Reading
+
+- [Metro environment settings](https://docs.expo.dev/versions/latest/config/metro/#environment-settings)

packages/eslint-plugin-expo/jest.config.js

@@ -0,0 +1,9 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  ...require('expo-module-scripts/jest-preset-cli.js'),
+  preset: 'ts-jest',
+  clearMocks: true,
+  displayName: require('./package').name,
+  rootDir: __dirname,
+  roots: ['src'],
+};

packages/eslint-plugin-expo/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "eslint-plugin-expo",
+  "version": "0.0.1",
+  "description": "ESLint rules for Expo apps",
+  "keywords": [
+    "eslint",
+    "eslintplugin",
+    "eslint-plugin"
+  ],
+  "author": "Expo",
+  "main": "./build/index.js",
+  "files": [
+    "README.md",
+    "build"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/expo/expo.git",
+    "directory": "packages/eslint-plugin-expo"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "test": "jest",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@typescript-eslint/types": "^7.2.0",
+    "@typescript-eslint/utils": "^7.2.0"
+  },
+  "devDependencies": {
+    "@types/eslint": "^8.56.5",
+    "@types/jest": "^29.5.12",
+    "@typescript-eslint/rule-tester": "^7.2.0",
+    "eslint-config-universe": "^12.0.0",
+    "eslint-plugin-eslint-plugin": "^5.0.0",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.1.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "peerDependencies": {
+    "eslint": ">=8"
+  },
+  "license": "MIT"
+}

packages/eslint-plugin-expo/src/__tests__/noDynamicEnvVar.test.ts

@@ -0,0 +1,40 @@
+import { RuleTester } from '@typescript-eslint/rule-tester';
+
+import { noDynamicEnvVar } from '../rules/noDynamicEnvVar';
+
+const ruleTester = new RuleTester({
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run('noDynamicEnvVar', noDynamicEnvVar, {
+  valid: [{ code: 'const myVar = process.env.MY_VAR;' }],
+  invalid: [
+    {
+      code: 'const myVar = process.env["MY_VAR"]',
+      errors: [
+        {
+          messageId: 'unexpectedDynamicAccess',
+          data: {
+            value: 'MY_VAR',
+          },
+        },
+      ],
+    },
+    {
+      code: 'const dynamicVar = "MY_VAR"; const myVar = process.env[dynamicVar];',
+      errors: [
+        {
+          messageId: 'unexpectedDynamicAccess',
+          data: {
+            value: 'dynamicVar',
+          },
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-expo/src/__tests__/noEnvVarDestructuring.test.ts

@@ -0,0 +1,54 @@
+import { RuleTester } from '@typescript-eslint/rule-tester';
+
+import { noEnvVarDestructuring } from '../rules/noEnvVarDestructuring';
+
+const ruleTester = new RuleTester({
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run('noEnvVarDestructuring', noEnvVarDestructuring, {
+  valid: [
+    {
+      code: 'const myVar = process.env.MY_VAR;',
+    },
+    {
+      code: "const food = 'potato';",
+    },
+  ],
+
+  invalid: [
+    {
+      code: 'const { MY_VAR } = process.env;',
+      errors: [
+        {
+          messageId: 'unexpectedDestructuring',
+          data: {
+            value: 'MY_VAR',
+          },
+        },
+      ],
+    },
+    {
+      code: 'const { MY_VAR, ANOTHER_VAR } = process.env;',
+      errors: [
+        {
+          messageId: 'unexpectedDestructuring',
+          data: {
+            value: 'MY_VAR',
+          },
+        },
+        {
+          messageId: 'unexpectedDestructuring',
+          data: {
+            value: 'ANOTHER_VAR',
+          },
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-expo/src/index.ts

@@ -0,0 +1,20 @@
+import { RuleModule } from '@typescript-eslint/utils/ts-eslint';
+import { ESLint } from 'eslint';
+
+import { rules } from './rules';
+
+type RuleKey = keyof typeof rules;
+
+interface Plugin extends Omit<ESLint.Plugin, 'rules'> {
+  rules: Record<RuleKey, RuleModule<any, any, any>>;
+}
+
+const plugin: Plugin = {
+  meta: {
+    name: 'eslint-plugin-expo',
+    version: '0.0.1',
+  },
+  rules,
+};
+
+export default plugin;

packages/eslint-plugin-expo/src/rules/index.ts

@@ -0,0 +1,7 @@
+import { noDynamicEnvVar } from './noDynamicEnvVar';
+import { noEnvVarDestructuring } from './noEnvVarDestructuring';
+
+export const rules = {
+  'no-dynamic-env-var': noDynamicEnvVar,
+  'no-env-var-destructuring': noEnvVarDestructuring,
+};

packages/eslint-plugin-expo/src/rules/noDynamicEnvVar.ts

@@ -0,0 +1,46 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+
+const createRule = ESLintUtils.RuleCreator((name) => `https://my-website.io/eslint/${name}`);
+
+export const noDynamicEnvVar = createRule({
+  name: 'no-dynamic-env-var',
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Prevents process.env from being accessed dynamically',
+    },
+    schema: [],
+    messages: {
+      unexpectedDynamicAccess:
+        'Unexpected dynamic access. Cannot dynamically access {{value}} from process.env',
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    return {
+      VariableDeclarator(node) {
+        const isProcessEnv =
+          node.init?.type === 'MemberExpression' &&
+          node.init.object.type === 'MemberExpression' &&
+          node.init.object.object.type === 'Identifier' &&
+          node.init.object.object.name === 'process' &&
+          node.init.object.property.type === 'Identifier' &&
+          node.init.object.property.name === 'env';
+
+        if (isProcessEnv && node.init?.type === 'MemberExpression' && node.init.computed) {
+          const identifierName =
+            node.init.property.type === 'Identifier' ? node.init.property.name : '';
+          const literalValue =
+            node.init.property.type === 'Literal' ? node.init.property?.value : '';
+          context.report({
+            node,
+            messageId: 'unexpectedDynamicAccess',
+            data: {
+              value: identifierName || literalValue,
+            },
+          });
+        }
+      },
+    };
+  },
+});