Fix eslint cleanup SDK (#1023)

* Add ESLint ignore patterns for build and test files

Configure ESLint to skip linting build artifacts and test files
(*_test.ts, *_spec.ts, *.bench.ts) during the lint step.

* Add Linting script(package.json)

* Add pnpm >=9.6.0 to sdk engines

Add "pnpm": ">=9.6.0" to the engines field of the SDK package.
Leverage .npmrc’s engine-strict setting to warn when installing dependencies with an incompatible pnpm version.
Ensure all contributors and CI use pnpm version 9.6.0 or higher.

* Align ignorePattern with root ignore

* Add linting script

* Cleanup ESLint(packages/devtools)

* Adjust devDependencies depth of eslint plugins

* Cleanup ESLint(examples & schema)

Author: pengooseDev

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/devtools-publish.yml

@@ -20,14 +20,15 @@ jobs:
       - name: Setup Node 🔧
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '22'
           cache: 'pnpm'
 
       - name: Install and Build 🔧
+        env:
+          PARCEL_WORKER_BACKEND: process
         run: |
-          cd packages/devtools
-          pnpm install
-          pnpm build
+          pnpm i
+          pnpm devtools build
 
       - name: Deploy 🚀
         uses: PlasmoHQ/bpp@v3

.github/workflows/github-page-publish.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node 🔧
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '22'
           cache: 'pnpm'
           cache-dependency-path: pnpm-lock.yaml
 

.github/workflows/npm-publish.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node 🔧
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '22'
           cache: 'pnpm'
           cache-dependency-path: pnpm-lock.yaml
           registry-url: 'https://registry.npmjs.org'

examples/nextjs-quill/lib/utils.ts

@@ -23,8 +23,8 @@ export const toDeltaOperation = <T extends TextValueType>(textValue: T): Op => {
 };
 
 // Convert array of Yorkie OperationInfo to array of Quill Delta Operations
-export const getDeltaOperations = (ops: OperationInfo[]): Op[] => {
-  const operations: Op[] = [];
+export const getDeltaOperations = (ops: Array<OperationInfo>): Array<Op> => {
+  const operations: Array<Op> = [];
   let prevTo = 0;
 
   for (const op of ops) {

package.json

@@ -36,6 +36,8 @@
     "eslint": "^8.57.1",
     "eslint-plugin-jsdoc": "^50.7.1",
     "eslint-plugin-prettier": "^5.2.3",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",
     "only-allow": "^1.2.1"

packages/devtools/package.json

@@ -1,26 +1,27 @@
 {
   "name": "@yorkie-js/devtools",
   "displayName": "Yorkie Devtools",
-  "version": "0.6.0",
+  "version": "0.6.21",
   "description": "A browser extension that helps you debug Yorkie.",
   "homepage": "https://yorkie.dev/",
   "scripts": {
     "dev": "plasmo dev --build-path=dist",
     "build": "plasmo build --build-path=dist --zip",
-    "test": "plasmo test"
+    "test": "plasmo test",
+    "lint": "eslint . --fix --max-warnings=0 --ext .ts,.tsx"
   },
   "dependencies": {
     "@microlink/react-json-view": "^1.23.0",
+    "@yorkie-js/sdk": "workspace:*",
     "classnames": "^2.3.2",
-    "plasmo": "0.84.0",
+    "plasmo": "0.90.5",
     "prism-react-renderer": "^2.3.1",
     "rc-slider": "^10.5.0",
     "react": "18.2.0",
     "react-arborist": "^3.4.0",
     "react-dom": "18.2.0",
     "react-resizable-layout": "^0.7.2",
-    "use-resize-observer": "^9.1.0",
-    "@yorkie-js/sdk": "workspace:*"
+    "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
     "@types/chrome": "0.0.251",

packages/devtools/src/devtools/components/Code.tsx

@@ -62,6 +62,16 @@ const theme: PrismTheme = {
   ],
 };
 
+/**
+ * Renders a syntax-highlighted code block using Prism.
+ *
+ * @param code - The source code string to be highlighted.
+ * @param language - The language identifier supported by Prism
+ *   (See https://prismjs.com/index.html#supported-languages for supported languages).
+ * @param withLineNumbers - Whether to display line numbers before each line.
+ *   Defaults to `false`.
+ * @returns A React element containing the highlighted code block.
+ */
 export function Code({
   code,
   language,

packages/devtools/src/devtools/components/Detail.tsx

@@ -28,7 +28,10 @@ type FlatTreeNodeInfo = Devtools.TreeNodeInfo & {
 };
 
 /**
- * `nodeIDToString` converts the given CRDTTreeNodeIDStruct to a simple string.
+ * Convert a CRDTTreeNodeIDStruct into a readable identifier string.
+ *
+ * @param id - CRDTTreeNodeIDStruct with creation metadata and offset.
+ * @returns A string formatted as `${lamport}:${actorID.slice(-2)}:${delimiter}/${offset}`.
  */
 const nodeIDToString = (id: CRDTTreeNodeIDStruct) => {
   const {
@@ -38,6 +41,11 @@ const nodeIDToString = (id: CRDTTreeNodeIDStruct) => {
   return `${lamport}:${actorID.slice(-2)}:${delimiter}/${offset}`;
 };
 
+/**
+ * Render one tree node with depth-based styling and tooltip info.
+ *
+ * @param props.node - FlatTreeNodeInfo including type, value, id, depth, childIndex, etc.
+ */
 function TreeNode({ node }: { node: FlatTreeNodeInfo }) {
   // NOTE(chacha912): The 'depth' variable is used for styling purposes.
   // For 'text' nodes, when they are not the first child node, 'depth' is
@@ -94,6 +102,11 @@ function TreeNode({ node }: { node: FlatTreeNodeInfo }) {
   );
 }
 
+/**
+ * Flatten the tree and render each node via TreeNode.
+ *
+ * @param props.tree - Root Devtools.TreeNodeInfo to flatten and display.
+ */
 function TreeGraph({ tree }: { tree: Devtools.TreeNodeInfo }) {
   const flattenTreeWithDepth = useCallback(
     (
@@ -119,6 +132,12 @@ function TreeGraph({ tree }: { tree: Devtools.TreeNodeInfo }) {
   );
 }
 
+/**
+ * Show selected node details with JSON or graph view toggle.
+ *
+ * @param props.node - The currently selected RootTreeNode.
+ * @param props.tree - The full Devtools.TreeNodeInfo for graph mode.
+ */
 export function TreeDetail({
   node,
   tree,
@@ -162,6 +181,11 @@ export function TreeDetail({
   );
 }
 
+/**
+ * Display a JSON string in a syntax‑highlighted code block with line numbers.
+ *
+ * @param props.json - The JSON text to render.
+ */
 export function JSONDetail({ json }: { json: string }) {
   return <Code code={json ?? ''} language="json" withLineNumbers />;
 }

packages/devtools/src/devtools/components/JsonView.tsx

@@ -16,6 +16,12 @@
 
 import ReactJsonView from '@microlink/react-json-view';
 
+/**
+ * Render JSON data using ReactJsonView with custom styling and options.
+ *
+ * @param props.src - The JSON object or array to display.
+ * @returns A React element that visualizes the provided JSON.
+ */
 export function JSONView({ src }) {
   return (
     <ReactJsonView