Skip to content

chore: support code lint and commit lint #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 10, 2025
Merged

chore: support code lint and commit lint #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be5b355
chore: support code lint and commit lint
Bmongo Aug 10, 2025
fd62f90
test: fix test error (#8)
Bmongo Aug 10, 2025
fd57e96
chore: add test lint (#8)
Bmongo Aug 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .husky/commit-msg
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
#!/usr/bin/env sh
pnpm run commitlint
Comment on lines +1 to +2
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Pass the commit message to commitlint and source husky.sh

Without --edit "$1", commitlint may not validate the message file. Also source husky.sh for environment setup.

Suggested hook:

 #!/usr/bin/env sh
-pnpm run commitlint
+. "$(dirname -- "$0")/_/husky.sh"
+set -e
+pnpm exec commitlint --edit "$1"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
#!/usr/bin/env sh
pnpm run commitlint
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
set -e
pnpm exec commitlint --edit "$1"
🤖 Prompt for AI Agents 
In the .husky/commit-msg file at lines 1 to 2, the commitlint command does not
receive the commit message file as an argument, so it may not validate the
commit message properly. Modify the script to source the husky.sh script for
environment setup and run commitlint with the --edit "$1" option to pass the
commit message file for validation.

2 changes: 2 additions & 0 deletions .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
#!/usr/bin/env sh
pnpm run lint && pnpm run test
6 changes: 6 additions & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
1 change: 1 addition & 0 deletions commitlint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default { extends: ['@commitlint/config-conventional'] };
13 changes: 13 additions & 0 deletions eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import reactPlugin from 'eslint-plugin-react';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import eslintConfigPrettier from 'eslint-config-prettier/flat';
import { defineConfig } from 'eslint/config';
import tseslint from 'typescript-eslint';

export default defineConfig(
tseslint.configs.recommended,
reactPlugin.configs.flat.recommended,
reactPlugin.configs.flat['jsx-runtime'],
eslintPluginPrettierRecommended,
eslintConfigPrettier
);
Comment on lines +1 to +13
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Invalid ESLint flat config composition (defineConfig usage and array/object mixing)

The current export won’t work as intended:

  • defineConfig should be passed a single array/object, not multiple positional args.
  • tseslint.configs.recommended is an array and must be spread into the config list.

Use a single array and spread TS configs:

-import reactPlugin from 'eslint-plugin-react';
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
-import eslintConfigPrettier from 'eslint-config-prettier/flat';
-import { defineConfig } from 'eslint/config';
-import tseslint from 'typescript-eslint';
-
-export default defineConfig(
-  tseslint.configs.recommended,
-  reactPlugin.configs.flat.recommended,
-  reactPlugin.configs.flat['jsx-runtime'],
-  eslintPluginPrettierRecommended,
-  eslintConfigPrettier
-);
+import reactPlugin from 'eslint-plugin-react';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import eslintConfigPrettier from 'eslint-config-prettier/flat';
+import { defineConfig } from 'eslint/config';
+import tseslint from 'typescript-eslint';
+
+export default defineConfig([
+  // TypeScript ESLint recommended (array)
+  ...tseslint.configs.recommended,
+  // React plugin (objects)
+  reactPlugin.configs.flat.recommended,
+  reactPlugin.configs.flat['jsx-runtime'],
+  // Prettier plugin + Prettier config (keep last)
+  eslintPluginPrettierRecommended,
+  eslintConfigPrettier,
+]);

Optional: If you want auto React version detection, you can append a small config object:

{ settings: { react: { version: 'detect' } } }
🤖 Prompt for AI Agents 
In eslint.config.js lines 1 to 13, the defineConfig function is incorrectly
called with multiple positional arguments instead of a single array or object.
To fix this, wrap all configurations in a single array and spread the
tseslint.configs.recommended array into it. Optionally, add a config object with
settings for React version detection at the end of the array.

3 changes: 3 additions & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Video React Wrapper Example</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="./dist/index.js"></script>
</body>

</html>
4 changes: 2 additions & 2 deletions examples/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const App = () => {
<h1>Interactive Video React Wrapper Example</h1>
<div style={{ width: '80%', margin: '0 auto' }}>
<InteractiveVideo
videoUrl="https://interactive-video-labs.github.io/interactive-video-demos/videos/big_buck_bunny.mp4"
videoUrl="https://interactive-video-labs.github.io/assets/sample-interaction-1.mp4"
autoplay={true}
onAnalyticsEvent={(event, payload) => {
console.log('Analytics Event:', event, payload);
Expand All @@ -23,4 +23,4 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
);
27 changes: 24 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@
"require": "./dist/index.cjs"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write --cache"
]
},
"files": [
"dist"
],
Expand All @@ -21,7 +27,9 @@
"dev": "tsup --watch",
"test": "vitest run",
"clean": "rm -rf dist",
"prepare": "pnpm build",
"prepare": "husky",
"lint": "lint-staged",
"commitlint": "commitlint --edit",
"serve-examples": "pnpm build-examples && http-server examples -c-1",
Comment on lines +30 to 33
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify Husky hooks call the right scripts (commit-msg must pass the file to commitlint)

The scripts look good. Please confirm that:

  • .husky/pre-commit invokes lint-staged (e.g., pnpm lint).
  • .husky/commit-msg calls pnpm commitlint --edit "$1".

Run this script to verify hook presence and contents:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Checking Husky hooks..."
if [ ! -d ".husky" ]; then
  echo "❌ .husky directory not found"; exit 1
fi

echo "== .husky/pre-commit =="
if [ -f ".husky/pre-commit" ]; then
  sed -n '1,120p' .husky/pre-commit
  echo
  rg -n "lint-staged|pnpm lint" .husky/pre-commit || echo "⚠️ pre-commit may not run lint-staged"
else
  echo "❌ .husky/pre-commit not found"
fi

echo
echo "== .husky/commit-msg =="
if [ -f ".husky/commit-msg" ]; then
  sed -n '1,120p' .husky/commit-msg
  echo
  rg -n "commitlint\s+--edit\s+\$1|pnpm\s+commitlint\s+--edit\s+\$1" .husky/commit-msg || echo "⚠️ commit-msg may not pass the commit file to commitlint"
else
  echo "❌ .husky/commit-msg not found"
fi

Length of output: 780

Ensure Husky commit-msg hook passes the commit file to commitlint

The pre-commit hook is correctly invoking lint-staged via pnpm run lint. However, the commit-msg hook only runs pnpm run commitlint and doesn’t forward the $1 parameter, so commitlint never sees the commit message file. Please update .husky/commit-msg as shown:

 # .husky/commit-msg
- pnpm run commitlint
+ pnpm run commitlint -- "$1"

Or, if you prefer calling the CLI directly:

 # .husky/commit-msg
- pnpm run commitlint
+ pnpm commitlint --edit "$1"

This will ensure your commit messages are actually passed to commitlint for validation.

🤖 Prompt for AI Agents 
In package.json around lines 30 to 33, the commit-msg hook does not pass the
commit message file parameter to commitlint, so commitlint cannot validate the
commit message. Update the .husky/commit-msg script to forward the $1 argument
to commitlint, either by modifying the script to run "pnpm run commitlint -- $1"
or by calling the commitlint CLI directly with the commit message file argument.
This ensures commitlint receives the commit message file for proper validation.

"build-examples": "esbuild examples/index.tsx --bundle --outfile=examples/dist/index.js --jsx=automatic"
},
Expand Down Expand Up @@ -59,9 +67,22 @@
"vitest": "^3.2.4"
},
"devDependencies": {
"@commitlint/cli": "^19.8.1",
"@commitlint/config-conventional": "^19.8.1",
"@testing-library/jest-dom": "^6.6.4",
"@testing-library/react": "^16.0.0",
"@types/react": "^19.1.9",
"http-server": "^14.1.1"
"@typescript-eslint/eslint-plugin": "^8.39.0",
"@typescript-eslint/parser": "^8.39.0",
"eslint": "^9.33.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.4",
"eslint-plugin-react": "^7.37.5",
"exbuild": "^0.2.2",
"http-server": "^14.1.1",
"husky": "^9.1.7",
"lint-staged": "^16.1.5",
"prettier": "^3.6.2",
"typescript-eslint": "^8.39.0"
}
Comment on lines +70 to 87
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Fix devDependency typo: use esbuild (not exbuild) to match your build script

The examples script uses esbuild, but devDependencies add exbuild. This will break pnpm run build-examples with pnpm because pnpm doesn’t link transitive bins to the root.

Replace exbuild with esbuild:

-    "exbuild": "^0.2.2",
+    "esbuild": "^0.24.0",

Note: Adjust the version if your CI constraints differ; any recent 0.2x should work. Ensure esbuild is a direct devDependency so its CLI is available at node_modules/.bin/esbuild under pnpm.

You can validate locally with:

  • pnpm i
  • pnpm esbuild --version
  • pnpm run build-examples

🏁 Script executed:

#!/bin/bash
set -eo pipefail

# Display the "scripts" section of package.json to confirm build-examples usage
sed -n '1,200p' package.json | sed -n '/"scripts"/,/\}/p'

# Check for the typo "exbuild" in devDependencies
grep -R '"exbuild"' -n package.json || echo "No exbuild found outside snippet."

# Search the entire repo for any references to esbuild in code or scripts
grep -R 'esbuild' -n . || echo "No esbuild references found."

Length of output: 266639

Fix typo in devDependencies: replace exbuild with esbuild

The build-examples script invokes esbuild, but you’ve added exbuild as a devDependency, so pnpm run build-examples will fail to find the CLI. Update your package.json devDependencies:

   "devDependencies": {
-    "exbuild": "^0.2.2",
+    "esbuild": "^0.25.0",
     // …other deps
   }

Pick a recent 0.x version (your lockfile shows 0.25.8), then run:

  • pnpm install
  • pnpm esbuild --version
  • pnpm run build-examples
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"@commitlint/cli": "^19.8.1",
"@commitlint/config-conventional": "^19.8.1",
"@testing-library/jest-dom": "^6.6.4",
"@testing-library/react": "^16.0.0",
"@types/react": "^19.1.9",
"http-server": "^14.1.1"
"@typescript-eslint/eslint-plugin": "^8.39.0",
"@typescript-eslint/parser": "^8.39.0",
"eslint": "^9.33.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.4",
"eslint-plugin-react": "^7.37.5",
"exbuild": "^0.2.2",
"http-server": "^14.1.1",
"husky": "^9.1.7",
"lint-staged": "^16.1.5",
"prettier": "^3.6.2",
"typescript-eslint": "^8.39.0"
}
"devDependencies": {
"@commitlint/cli": "^19.8.1",
"@commitlint/config-conventional": "^19.8.1",
"@testing-library/jest-dom": "^6.6.4",
"@testing-library/react": "^16.0.0",
"@types/react": "^19.1.9",
"@typescript-eslint/eslint-plugin": "^8.39.0",
"@typescript-eslint/parser": "^8.39.0",
"eslint": "^9.33.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.4",
"eslint-plugin-react": "^7.37.5",
- "exbuild": "^0.2.2",
+ "esbuild": "^0.25.0",
"http-server": "^14.1.1",
"husky": "^9.1.7",
"lint-staged": "^16.1.5",
"prettier": "^3.6.2",
"typescript-eslint": "^8.39.0"
}
🤖 Prompt for AI Agents 
In package.json lines 70 to 87, the devDependency "exbuild" is a typo and should
be replaced with "esbuild" to match the build script usage. Update the
devDependencies by removing "exbuild" and adding "esbuild" with a recent 0.x
version, such as 0.25.8. After updating, run "pnpm install" to update the
lockfile, verify the installation with "pnpm esbuild --version", and then run
"pnpm run build-examples" to confirm the fix.

}
}
Loading