feat: show line numbers (#91)

* feat: show line numbers

* chore: update yarn version

* chore fix vulnerabilities

* chore: update readme

* chore: updating packages

* refactor!: removing the initalCollapsedDepth prop

* chore: removed lodash to reduce bundle size

* doc: udpate changelog

* chore: bump version

Author: alissonmbr

.github/workflows/npm-publish.yml

@@ -12,8 +12,12 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
           registry-url: 'https://registry.npmjs.org'
+      - name: Install latest Yarn
+        run: corepack prepare yarn@4 --activate
+      - name: Activate latest Yarn
+        run: yarn set version 4
       - run: yarn
       - run: yarn build
       - run: npm publish --provenance --access public

.github/workflows/qa.yml

@@ -11,11 +11,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
+      - name: Install latest Yarn
+        run: corepack prepare yarn@4 --activate
+      - name: Activate latest Yarn
+        run: yarn set version 4
       - name: Install dependencies
         run: yarn
       - name: Run lint

.gitignore

@@ -4,4 +4,4 @@ dist
 .DS_Store
 coverage
 test.xml
-
+.yarn/

.storybook/main.ts

@@ -5,22 +5,29 @@ const { mergeConfig } = require('vite');
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@chromatic-com/storybook'
   ],
+
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
+
+  docs: {},
+
   async viteFinal(config) {
     return mergeConfig(config, {
       plugins: [viteTsconfig()],
     });
   },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 };
 export default config;

.storybook/preview.ts

@@ -2,7 +2,6 @@ import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CHANGELOG.md

@@ -1,3 +1,19 @@
+## 3.0.0
+_May 25, 2025_
+
+- feat: show line numbers
+- chore: updating dependencies
+- fix: fixing vulnerabilities
+- doc: improving README
+- BREAKING CHANGES: removed the initalCollapsedDepth prop
+- refactor: removed lodash to reduce bundle size
+
+## 2.0.4
+
+_Feb 25, 2025_
+
+- fix: react 19 compatibility
+
 ## 2.0.4
 
 _Oct 22, 2024_

README.md

@@ -1,101 +1,139 @@
 [Buy me a coffee ☕](https://www.buymeacoffee.com/alissonmbr)
 
-
 # react-xml-viewer
+
 [![NPM](https://img.shields.io/npm/v/react-xml-viewer.svg)](https://www.npmjs.com/package/react-xml-viewer)\
 Simple and configurable React component to prettify XMLs.
 
-
-
 <img src="https://raw.githubusercontent.com/alissonmbr/react-xml-viewer/example.png" width="300"/>
 
 ## Live demo
-[![Edit react-xml-view](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-xml-viewer-v2-example-6xh9yq)
 
+[![Edit react-xml-view](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-xml-viewer-v2-example-6xh9yq)
 
 ## Install
 
 #### npm
+
 ```bash
 npm install --save react-xml-viewer
 ```
 
 #### yarn
+
 ```bash
 yarn add react-xml-viewer
 ```
 
 ## Usage
 
 ```jsx
-import React, { Component } from 'react'
-import XMLViewer from 'react-xml-viewer'
+import React, { Component } from 'react';
+import XMLViewer from 'react-xml-viewer';
 
-const xml = '<hello>World</hello>'
+const xml = '<hello>World</hello>';
 
 export function App() {
-    return (
-      <div>
-        <XMLViewer xml={xml} />
-      </div>
-    )
+  return (
+    <div>
+      <XMLViewer xml={xml} />
+    </div>
+  );
 }
 ```
 
 ## Props
-### xml (string)
-A xml string to prettify.\
-**Default**: undefined\
-**Example**: `<hello>World</hello>`
-
-### indentSize (number)
-The size of the indentation.\
-**Default**: 2
-
-### invalidXml (JSX.Element)
-When the xml is invalid, invalidXml component will be returned.\
-**Default**: `<div>Invalid XML!</div>`
-
-### collapsible (boolean)
-Allow collapse/expand tags by click on them. When tag is collapsed its content and attributes are hidden.\
-**Default**: false
-
-### initialCollapsedDepth (number)
-When the **collapsible** is true, this set the level that will be started as collapsed. For example, if you want to everything starts as collapsed, set 0.\
-**Default**: undefined
-
-### theme (object)
-An object to customize the default theme.
-
-| Key | Type | Default | Description |
-| --- | ---- | ------- | ----------- |
-| attributeKeyColor | color | #2a7ab0 | Set the attribute key color (`<tag attribute-key="hello" />`) |
-| attributeValueColor | color | #008000 | Set the attribute value color (` <tag attr="Attribute value">`) |
-| cdataColor | color | #1D781D | Set the cdata element color (`<![CDATA[some stuff]]>`) |
-| commentColor | color | #aaa | Set the comment color (`<!-- this is a comment -->`)
-| fontFamily | font | monospace | Set the font family
-| separatorColor | color | #333 | Set the separators colors (`<, >, </, />, =, <?, ?>`)
-| tagColor | color | #d43900 | Set the tag name color (`<tag-name />`) |
-| textColor | color | #333 | Set the text color (`<tag>Text</tag>`)|
+
+```tsx
+<XMLViewer
+  // A xml string to prettify.
+  // Default: undefined
+  xml="<hello>World</hello>"
+
+  // The size of the indentation.
+  // Default: 2
+  indentSize={2}
+
+  // When the xml is invalid, invalidXml component will be displayed.
+  // Default: <div>Invalid XML!</div>
+  invalidXml={<div>Invalid XML!</div>}
+
+  // Enable collapsing or expanding tags by clicking on them.
+  // Default: false
+  collapsible={false}
+
+  // When collapsible is true, this sets the level that will be started as collapsed.
+  // Default: undefined
+  initialCollapsedDepth={undefined}
+
+  // Displays line numbers on the left side when set to true.
+  // Default: false
+  showLineNumbers={false}
+
+  // An object to customize the theme.
+  theme={{
+    // Set the attribute key color (<tag attribute-key="hello" />)
+    // Default: #2a7ab0
+    attributeKeyColor: '#2a7ab0',
+
+    // Set the attribute value color (<tag attr="Attribute value">)
+    // Default: #008000
+    attributeValueColor: '#008000',
+
+    // Set the cdata element color (<![CDATA[some stuff]]>)
+    // Default: #1D781D
+    cdataColor: '#1D781D',
+
+    // Set the comment color (<!-- this is a comment -->)
+    // Default: #aaa
+    commentColor: '#aaa',
+
+    // Set the font family
+    // Default: monospace
+    fontFamily: 'monospace',
+
+    // Set the separators colors (<, >, </, />, =, <?, ?>)
+    // Default: #333
+    separatorColor: '#333',
+
+    // Set the tag name color (<tag-name />)
+    // Default: #d43900
+    tagColor: '#d43900',
+
+    // Set the text color (<tag>Text</tag>)
+    // Default: #333
+    textColor: '#333',
+
+    // Set the line numbers container background color
+    // Default: #eee
+    lineNumberBackground: '#eee',
+
+    // Set the line numbers color
+    // Default: #222
+    lineNumberColor: '#222',
+  }}
+/>
+```
 
 **Example**:
 Changing attribute key and value color
-``` jsx
-import React, { Component } from 'react'
-import XMLViewer from 'react-xml-viewer'
 
-const xml = '<hello attr="World" />'
+```jsx
+import React, { Component } from 'react';
+import XMLViewer from 'react-xml-viewer';
+
+const xml = '<hello attr="World" />';
 const customTheme = {
-  "attributeKeyColor": "#FF0000",
-  "attributeValueColor": "#000FF"
-}
+  attributeKeyColor: '#FF0000',
+  attributeValueColor: '#000FF',
+};
 
 export function App() {
   return (
     <div>
       <XMLViewer xml={xml} theme={customTheme} />
     </div>
-  )
+  );
 }
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-xml-viewer",
-  "version": "2.0.5",
+  "version": "3.0.0",
   "description": "Simple xml viewer component for React",
   "author": "alissonmbr",
   "license": "MIT",
@@ -31,7 +31,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "jest",
-    "test-coverage": "jest --coverage"
+    "test-coverage": "jest --coverage",
+    "analyze": "npx vite-bundle-visualizer"
   },
   "peerDependencies": {
     "react": ">= 16.8.4",
@@ -40,14 +41,15 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
-    "@storybook/addon-essentials": "^7.0.23",
-    "@storybook/addon-interactions": "^7.0.23",
-    "@storybook/addon-links": "^7.0.23",
-    "@storybook/blocks": "^7.0.23",
-    "@storybook/react": "^7.0.23",
-    "@storybook/react-vite": "^7.0.23",
-    "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@chromatic-com/storybook": "^3",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.2",
     "@types/react": "^18.2.14",
@@ -71,10 +73,10 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.23",
+    "storybook": "^8.6.14",
     "ts-jest": "^29.1.0",
     "typescript": "~5.0.2",
-    "vite": "^4.3.9",
+    "vite": "^4.5.11",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0"
@@ -83,7 +85,7 @@
     "dist"
   ],
   "dependencies": {
-    "fast-xml-parser": "^4.5.0",
-    "lodash": "^4.17.21"
-  }
+    "fast-xml-parser": "^4.5.0"
+  },
+  "packageManager": "[email protected]"
 }

src/components/CDataTag/index.tsx

@@ -1,21 +1,25 @@
 import { useXMLViewerContext } from 'context/xml-viewer-context';
+import { useLineNumber } from 'hooks/useLineNumber';
 import { ReactNode } from 'react';
 
 export interface CDataTagProps {
   indentation: string;
   children: ReactNode;
   isInline: boolean;
+  keyValue: string;
 }
 
 export function CDataTag(props: CDataTagProps) {
-  const { indentation, children, isInline } = props;
+  const { indentation, children, isInline, keyValue } = props;
   const { theme } = useXMLViewerContext();
+  const openTagRef = useLineNumber<HTMLSpanElement>(keyValue);
+  const closeTagRef = useLineNumber<HTMLSpanElement>(`${keyValue}-close`, !isInline);
 
   return (
     <div style={{ color: theme.cdataColor }}>
-      <span>{`${indentation}<![CDATA[`}</span>
+      <span ref={openTagRef}>{`${indentation}<![CDATA[`}</span>
       {children}
-      <span>{`${isInline ? '' : indentation}]]>`}</span>
+      <span ref={closeTagRef}>{`${isInline ? '' : indentation}]]>`}</span>
     </div>
   );
 }