chore: add linting

.github/workflows/checks.yml

@@ -24,6 +24,8 @@ jobs:
             cmd: yarn test
           - name: Types
             cmd: yarn test:types
+          - name: Lint
+            cmd: yarn lint
     steps:
       - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29
       - uses: actions/setup-node@aca7b64a59c0063db8564e0ffdadd3887f1cbae5

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  "presets": ["module:metro-react-native-babel-preset"],
+  presets: ['module:metro-react-native-babel-preset'],
 }

benchmark/chart/chart.js

@@ -1,10 +1,10 @@
 /* global Chart, results */
 
-Chart.defaults.global.defaultFontFamily = 'Open Sans';
-Chart.defaults.global.legend.display = false;
+Chart.defaults.global.defaultFontFamily = 'Open Sans'
+Chart.defaults.global.legend.display = false
 
 const createChart = () => {
-  const chart = new Chart(document.getElementById('chart'), {
+  return new Chart(document.querySelector('#chart'), {
     type: 'horizontalBar',
     data: {
       labels: Object.keys(results),
@@ -15,21 +15,19 @@ const createChart = () => {
             'rgba(40, 167, 69, 0.2)',
             'rgba(0, 92, 197, 0.2)',
             'rgba(111, 66, 193, 0.2)',
-            'rgba(215, 58, 73, 0.2)'
+            'rgba(215, 58, 73, 0.2)',
           ],
           borderColor: [
             'rgb(40, 167, 69)',
             'rgb(0, 92, 197)',
             'rgb(111, 66, 193)',
-            'rgb(215, 58, 73)'
+            'rgb(215, 58, 73)',
           ],
-          borderWidth: 1
-        }
-      ]
-    }
-  });
+          borderWidth: 1,
+        },
+      ],
+    },
+  })
+}
 
-  return chart;
-};
-
-createChart();
+createChart()

benchmark/index.test.js

@@ -1,82 +1,78 @@
-import React from 'react';
+import React from 'react'
 
-import { create as r } from 'react-test-renderer';
+import { create as r } from 'react-test-renderer'
 
-import fs from 'fs';
+import fs from 'fs'
 
-import Benchmark from 'benchmark';
+import Benchmark from 'benchmark'
 
 import styled from 'styled-components/native'
-import emotion from '@emotion/native';
+import emotion from '@emotion/native'
 
-import shakl from '../src/rn';
-
-const suite = new Benchmark.Suite();
+import shakl from '../src/rn'
 
+const suite = new Benchmark.Suite()
 
 suite.add('Shakl', () => {
-  const Foo = shakl.View({ padding: 10 });
-  r(<Foo />);
-});
+  const Foo = shakl.View({ padding: 10 })
+  r(<Foo />)
+})
 
 suite.add('Emotion', () => {
   const Foo = emotion.View`padding: 10px`
   r(<Foo />)
-});
+})
 
 suite.add('Styled Components', () => {
-  const Foo = styled.View`padding: 10px`
+  const Foo = styled.View`
+    padding: 10px;
+  `
   r(<Foo />)
-});
+})
 
-const results = {};
+const results = {}
+
+afterAll(() => {
+  const result = `const results = ${JSON.stringify(results, null, 2)};\n`
+  fs.writeFileSync(`${__dirname}/results.js`, result)
+})
 
 it('runs', () => {
   suite
-    .on('complete', e => {
+    .on('complete', (e) => {
       const {
         stats: { mean: first },
-        name: firstFunc
-      } = e.currentTarget[0];
+        name: firstFunc,
+      } = e.currentTarget[0]
 
-      let min = first;
-      let max = first;
+      let min = first
+      let max = first
 
-      let minFunc = firstFunc;
-      let maxFunc = firstFunc;
+      let minFunc = firstFunc
 
-      let output = '';
+      let output = ''
 
       e.currentTarget.forEach(({ stats: { mean }, name }) => {
         if (mean < min) {
-          min = mean;
-          minFunc = name;
+          min = mean
+          minFunc = name
         }
 
         if (mean > max) {
-          max = mean;
-          maxFunc = name;
+          max = mean
         }
 
-        const result = mean * 1000;
+        const result = mean * 1000
 
-        results[name] = result;
+        results[name] = result
 
-        output += `${name} averaged ${result} ms\n`;
-      });
+        output += `${name} averaged ${result} ms\n`
+      })
 
-      output += `\n${minFunc} is min, ${min * 1000} ms\n`;
-      output += `diff is ${(((max - min) / max) * 100).toFixed(2)}%\n`;
+      output += `\n${minFunc} is min, ${min * 1000} ms\n`
+      output += `diff is ${(((max - min) / max) * 100).toFixed(2)}%\n`
 
-      console.log(output);
+      console.log(output)
     })
-    .run();
-});
-
-afterAll(() => {
-  const result = `const results = ${JSON.stringify(results, null, 2)};\n`
-  fs.writeFileSync(
-    `${__dirname}/results.js`,
-    result
-  );
-});
+    .run()
+})

benchmark/results.js

@@ -1,5 +1,6 @@
+// eslint-disable-next-line no-unused-vars
 const results = {
-  "Shakl": 0.02981142424152011,
-  "Emotion": 0.03720938087122486,
-  "Styled Components": 0.04661131669539433
-};
+  Shakl: 0.029_811_424_241_520_11,
+  Emotion: 0.037_209_380_871_224_86,
+  'Styled Components': 0.046_611_316_695_394_33,
+}

eslint.config.mjs

@@ -0,0 +1,25 @@
+import { createTypescriptReactBabelPreset } from '@exodus/eslint-config-exodus'
+
+const config = [
+  { ignores: ['lib', 'node_modules'] },
+  createTypescriptReactBabelPreset({ project: ['./tsconfig.test.json'] }),
+  {
+    settings: {
+      'import/ignore': ['node_modules/react-native/index\\.js$'],
+    },
+  },
+  {
+    files: ['jest.config.js', 'jest-setup.js'],
+    rules: {
+      'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    },
+  },
+  {
+    files: ['**/*.type-test.ts{x,}'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
+].flat()
+
+export default config

jest-setup.js

@@ -1 +1 @@
-require('react-native-reanimated').setUpTests();
+require('react-native-reanimated').setUpTests()

jest.config.js

@@ -1,13 +1,9 @@
 module.exports = {
-  'collectCoverageFrom': [
-    'src/**/*.js'
+  collectCoverageFrom: ['src/**/*.js'],
+  verbose: true,
+  preset: 'react-native',
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@react-native|react-native|react-native-reanimated)/).*/',
   ],
-  'verbose': true,
-  'preset': 'react-native',
-  'transformIgnorePatterns': [
-    '/node_modules/(?!(@react-native|react-native|react-native-reanimated)/).*/'
-  ],
-  'setupFilesAfterEnv': [
-    './jest-setup.js'
-  ]
+  setupFilesAfterEnv: ['./jest-setup.js'],
 }

package.json

@@ -11,21 +11,27 @@
     "url": "git+https://github.com/sonaye/shakl.git"
   },
   "peerDependencies": {
-    "react": ">=16.3.0"
+    "react": ">=16.3.0",
+    "react-native": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.24.3",
+    "@babel/preset-react": "^7.25.9",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.11.4",
+    "@exodus/eslint-config-exodus": "^1.3.1",
+    "@exodus/prettier": "^1.0.0",
     "@testing-library/react-native": "^12.4.5",
     "@tsconfig/react-native": "^3.0.5",
     "@types/react": "^18.3.11",
     "babel-jest": "^29.7.0",
     "benchmark": "2.1.4",
     "emotion": "9.2.6",
+    "eslint": "^9.13.0",
     "jest": "^29.7.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "microtime": "^3.1.1",
+    "prettier": "^3.3.3",
     "react": "18.2.0",
     "react-native": "^0.73.6",
     "react-native-linear-gradient": "^2.8.3",
@@ -39,6 +45,7 @@
     "test:all": "yarn test && yarn test:types",
     "test": "jest /test",
     "test:types": "tsc -p tsconfig.test.json",
+    "lint": "eslint",
     "coverage": "yarn test --coverage",
     "postcoverage": "open -a Chrome coverage/lcov-report/index.html",
     "benchmark": "jest /benchmark",
@@ -48,5 +55,6 @@
   },
   "files": [
     "lib"
-  ]
+  ],
+  "prettier": "@exodus/prettier"
 }