Merge pull request #600 from epaew/miscs/toolchain

Use Biome instead of ESLint and Prettier

.github/workflows/tests.yaml

@@ -9,8 +9,8 @@ on:
     - cron: '0 0 * * 0' # 0:00 UTC on every sunday
 
 jobs:
-  eslint:
-    name: ESLint
+  lint:
+    name: Lint
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -19,19 +19,7 @@ jobs:
           node-version: 'lts/*'
           cache: npm
       - run: npm ci
-      - run: npm run eslint
-
-  prettier:
-    name: Prettier
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 'lts/*'
-          cache: npm
-      - run: npm ci
-      - run: npm run prettier
+      - run: npm run lint:ci
 
   test:
     name: Jest w/ react@${{ matrix.react.react-version }} @line/liff@${{ matrix.liff-sdk.sdk-version }}

CHANGELOG.md

@@ -10,6 +10,8 @@
 
 - [#599](https://github.com/epaew/react-liff/pull/599)
   - Tests with `@line/[email protected]`.
+- [#600](https://github.com/epaew/react-liff/pull/600)
+  - Use Biome instead of ESLint and Prettier.
 
 # v2.1.0
 

__mocks__/@line/liff.ts

@@ -1,6 +1,6 @@
-import { Liff } from '@line/liff';
+import { Liff } from "@line/liff";
 
-type IdWritableLiff = Omit<Liff, 'id'> & { id: string | null };
+type IdWritableLiff = Omit<Liff, "id"> & { id: string | null };
 
 let loginState = false;
 
@@ -19,5 +19,4 @@ const liffMock: Partial<IdWritableLiff> = {
   use: jest.fn(),
 };
 
-// eslint-disable-next-line import/no-default-export
 export default liffMock;

biome.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.3.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 120
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}

examples/simple/package.json

@@ -19,10 +19,6 @@
       "last 1 safari version"
     ]
   },
-  "eslintConfig": {
-    "extends": "react-app",
-    "root": true
-  },
   "dependencies": {
     "@line/liff": "^2.20.2",
     "@line/liff-mock": "^1.0.1",

examples/simple/src/App.js

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useEffect, useState } from "react";
+import "./App.css";
+import logo from "./logo.svg";
 
-import { useLiff } from 'react-liff';
+import { useLiff } from "react-liff";
 
 function App() {
   const { error, isLoggedIn, isReady, liff } = useLiff();
-  const [displayName, setDisplayName] = useState('');
+  const [displayName, setDisplayName] = useState("");
 
   useEffect(() => {
     if (!isLoggedIn) return;
@@ -15,7 +15,7 @@ function App() {
       const profile = await liff.getProfile();
       setDisplayName(profile.displayName);
     })();
-  });
+  }, [isLoggedIn, liff.getProfile]);
 
   const loginHandler = () => {
     liff.login();
@@ -29,15 +29,21 @@ function App() {
     if (!isReady) return <p>Loading...</p>;
 
     if (!isLoggedIn) {
-      return <button className="App-button" onClick={loginHandler}>Login</button>;
+      return (
+        <button className="App-button" onClick={loginHandler} type="submit">
+          Login
+        </button>
+      );
     }
     return (
       <>
         <p>Welcome to the react-liff demo app, {displayName}!</p>
-        <button className="App-button" onClick={logoutHandler}>Logout</button>
+        <button className="App-button" onClick={logoutHandler} type="submit">
+          Logout
+        </button>
       </>
     );
-  }
+  };
 
   return (
     <div className="App">

examples/simple/src/index.js

@@ -1,20 +1,20 @@
-import { LiffMockPlugin } from '@line/liff-mock';
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import './index.css';
-import App from './App';
+import { LiffMockPlugin } from "@line/liff-mock";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
 
-import { LiffProvider } from 'react-liff';
+import { LiffProvider } from "react-liff";
 
-const liffId = process.env.REACT_APP_LINE_LIFF_ID ?? '';
-const mockEnabled = process.env.NODE_ENV !== 'production';
+const liffId = process.env.REACT_APP_LINE_LIFF_ID ?? "";
+const mockEnabled = process.env.NODE_ENV !== "production";
 const liffPlugins = [new LiffMockPlugin()];
 
-const root = createRoot(document.getElementById('root'));
+const root = createRoot(document.getElementById("root"));
 root.render(
   <StrictMode>
     <LiffProvider liffId={liffId} mock={mockEnabled} plugins={liffPlugins}>
       <App />
     </LiffProvider>
-  </StrictMode>
+  </StrictMode>,
 );

jest.config.js

@@ -1,12 +1,11 @@
-// eslint-disable-next-line import/no-default-export
 export default {
-  collectCoverageFrom: ['<rootDir>/src/**/*.ts{,x}', '!<rootDir>/src/**/*.test.ts{,x}'],
+  collectCoverageFrom: ["<rootDir>/src/**/*.ts{,x}", "!<rootDir>/src/**/*.test.ts{,x}"],
   moduleNameMapper: {
-    '^(\\.{1,2}/.*)\\.js$': '$1',
+    "^(\\.{1,2}/.*)\\.js$": "$1",
   },
-  preset: 'ts-jest/presets/default-esm',
-  testEnvironment: 'jsdom',
+  preset: "ts-jest/presets/default-esm",
+  testEnvironment: "jsdom",
   transform: {
-    '\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json', useESM: true }],
+    "\\.tsx?$": ["ts-jest", { tsconfig: "tsconfig.test.json", useESM: true }],
   },
 };