Skip to content
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
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
24 changes: 14 additions & 10 deletions .github/workflows/build-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,15 @@ jobs:
env:
WORKING_DIRECTORY: ./
steps:
- uses: actions/checkout@v4.2.2
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
with:
persist-credentials: false
- name: Setup Node.js
uses: actions/setup-node@v4.1.0
uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
node-version: 20.19.4
cache: "yarn"
cache-dependency-path: "${{ env.WORKING_DIRECTORY }}/yarn.lock"
node-version-file: '.nvmrc'
cache: 'yarn'
cache-dependency-path: '${{ env.WORKING_DIRECTORY }}/yarn.lock'

- name: Install dependencies
run: yarn install
Expand All @@ -32,13 +34,15 @@ jobs:
env:
WORKING_DIRECTORY: ./
steps:
- uses: actions/checkout@v4.2.2
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
with:
persist-credentials: false
- name: Setup Node.js
uses: actions/setup-node@v4.1.0
uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
node-version: 20.19.4
cache: "yarn"
cache-dependency-path: "${{ env.WORKING_DIRECTORY }}/yarn.lock"
node-version-file: '.nvmrc'
cache: 'yarn'
cache-dependency-path: '${{ env.WORKING_DIRECTORY }}/yarn.lock'

- name: Install dependencies
run: yarn install
Expand Down
73 changes: 73 additions & 0 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
name: Publish

on:
release:
types: [published]
workflow_dispatch:
Comment thread
coderabbitai[bot] marked this conversation as resolved.

# Read-only by default; the publish job opts into `packages: write`.
permissions:
contents: read

concurrency:
group: publish-${{ github.event.release.tag_name || github.ref_name }}
cancel-in-progress: false

jobs:
publish:
name: Publish to GitHub Packages
runs-on: ubuntu-latest
permissions:
contents: read # checkout
packages: write # npm publish to npm.pkg.github.com
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
with:
ref: ${{ github.sha }}
fetch-depth: 0
Comment thread
coderabbitai[bot] marked this conversation as resolved.
persist-credentials: false

- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
node-version-file: '.nvmrc'
registry-url: 'https://npm.pkg.github.com'
scope: '@copia-automation'

- name: Install dependencies
run: yarn install --frozen-lockfile

- name: Lint
run: yarn lint

- name: Build
run: yarn build

- name: Test
run: yarn test

- name: Publish
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
PUBLISH_NEXT: ${{ (github.event_name == 'workflow_dispatch' || github.event.release.prerelease) && 'true' || 'false' }}
run: |
if [ "$PUBLISH_NEXT" != 'true' ]; then
npm publish --tag latest
exit 0
fi

NAME="$(node -p 'require("./package.json").name')"
VERSION="$(node -p 'require("./package.json").version')"

# `next` must only ever point at a prerelease version, e.g. 4.1.0-rc.1.
if [[ "${VERSION%%+*}" != *-* ]]; then
echo "::error::Refusing to publish stable version $VERSION to the next tag; bump package.json to a prerelease version first."
exit 1
Comment thread
ryan2445 marked this conversation as resolved.
fi

# A manual run on an already-published prerelease only moves the tag.
if npm view "$NAME@$VERSION" version >/dev/null 2>&1; then
echo "$NAME@$VERSION is already published; retagging as next."
npm dist-tag add "$NAME@$VERSION" next
else
npm publish --tag next
fi
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
24.19.0
109 changes: 55 additions & 54 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
## Copia Notes
This fork contains a small modification. The ReactDiffView component now has an added `renderNodeWrapper` property, which is a function to render the diff nodes (aka table rows) with a wrapper.

This fork contains a small modification. The ReactDiffView component now has an added `renderNodeWrapper` property, which is a function to render the diff nodes (aka table rows) with a wrapper.

Keep in mind that since this package isn't published to npm, any modifications need to be built using `npm run build` and commited to this repo.

Expand Down Expand Up @@ -31,8 +32,8 @@ npm i react-diff-viewer
## Usage

```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer';
import React, { PureComponent } from 'react'
import ReactDiffViewer from 'react-diff-viewer'

const oldCode = `
const a = 10
Expand All @@ -44,22 +45,22 @@ if(a > 10) {
}

console.log('done')
`;
`
const newCode = `
const a = 10
const boo = 10

if(a === 10) {
console.log('bar')
}
`;
`

class Diff extends PureComponent {
render = () => {
return (
<ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} />
);
};
)
}
}
```

Expand Down Expand Up @@ -106,8 +107,8 @@ An example using [Prism JS](https://prismjs.com)
```

```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer';
import React, { PureComponent } from 'react'
import ReactDiffViewer from 'react-diff-viewer'

const oldCode = `
const a = 10
Expand All @@ -119,25 +120,25 @@ if(a > 10) {
}

console.log('done')
`;
`
const newCode = `
const a = 10
const boo = 10

if(a === 10) {
console.log('bar')
}
`;
`

class Diff extends PureComponent {
highlightSyntax = str => (
highlightSyntax = (str) => (
<pre
style={{ display: 'inline' }}
dangerouslySetInnerHTML={{
__html: Prism.highlight(str, Prism.languages.javascript),
__html: Prism.highlight(str, Prism.languages.javascript)
}}
/>
);
)

render = () => {
return (
Expand All @@ -147,8 +148,8 @@ class Diff extends PureComponent {
splitView={true}
renderContent={this.highlightSyntax}
/>
);
};
)
}
}
```

Expand All @@ -169,22 +170,22 @@ enum DiffMethod {
```

```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
import React, { PureComponent } from 'react'
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'

const oldCode = `
{
"name": "Original name",
"description": null
}
`;
`
const newCode = `
{
"name": "My updated name",
"description": "Brand new description",
"status": "running"
}
`;
`

class Diff extends PureComponent {
render = () => {
Expand All @@ -195,8 +196,8 @@ class Diff extends PureComponent {
compareMethod={DiffMethod.WORDS}
splitView={true}
/>
);
};
)
}
}
```

Expand Down Expand Up @@ -293,8 +294,8 @@ To override any style, just pass the new style object to the `styles` prop. New
For keys other than `variables`, the value can either be an object or string interpolation.

```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer';
import React, { PureComponent } from 'react'
import ReactDiffViewer from 'react-diff-viewer'

const oldCode = `
const a = 10
Expand All @@ -306,41 +307,41 @@ if(a > 10) {
}

console.log('done')
`;
`
const newCode = `
const a = 10
const boo = 10

if(a === 10) {
console.log('bar')
}
`;
`

class Diff extends PureComponent {
highlightSyntax = str => (
highlightSyntax = (str) => (
<span
style={{ display: 'inline' }}
dangerouslySetInnerHTML={{
__html: Prism.highlight(str, Prism.languages.javascript),
__html: Prism.highlight(str, Prism.languages.javascript)
}}
/>
);
)

render = () => {
const newStyles = {
variables: {
dark: {
highlightBackground: '#fefed5',
highlightGutterBackground: '#ffcd3c',
},
highlightGutterBackground: '#ffcd3c'
}
},
line: {
padding: '10px 2px',
'&:hover': {
background: '#a26ea1',
},
},
};
background: '#a26ea1'
}
}
}

return (
<ReactDiffViewer
Expand All @@ -350,8 +351,8 @@ class Diff extends PureComponent {
splitView={true}
renderContent={this.highlightSyntax}
/>
);
};
)
}
}
```

Expand All @@ -369,20 +370,20 @@ Check package.json for more build scripts.

MIT

## Publish this package to github package registry

1. Run `yarn build`
2. Generate a Personal Access Token (PAT)
a. Navigate to "github.com" > "settings"
b. Click on "Developer Settings"
c. Click on "Personal Access Tokens"
d. Click on "Tokens (classic)"
e. Click on "Generate New Token"
f. Enable read/write packages and create token
g. Save the token to 1password
3. In your cli enter: `npm login --registry=https://npm.pkg.github.com`
4. Enter your github username
5. Enter your new PAT as the password
6. If prompted, enter your email
7. Version and run `npm publish`
8. Navigate to the copia-automation package repository to view your package: https://github.com/copia-automation/acd-parser/pkgs/npm/acd-parser
## Releasing

Publishing to the GitHub package registry is automated by
[`.github/workflows/publish.yml`](.github/workflows/publish.yml).

1. Bump the `version` field in `package.json` and open a PR.
2. Merge the PR to `main`.
3. Create a [GitHub release](https://github.com/copia-automation/react-diff-viewer/releases/new)
targeting `main` with a new tag matching the version you just merged — `v<version>` or
`<version>` both work. Publish the release.
4. The `Publish` workflow lints, builds, tests, and runs `npm publish`. Watch it in the
[Actions tab](https://github.com/copia-automation/react-diff-viewer/actions/workflows/publish.yml).
5. The published package appears at
https://github.com/copia-automation/react-diff-viewer/pkgs/npm/react-diff-viewer.

Releases marked as a pre-release publish under the `next` dist-tag instead of `latest`, so they
won't be installed by default.
6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@copia-automation/react-diff-viewer",
"version": "4.0.6",
"version": "4.0.7",
"private": false,
"description": "A simple and beautiful text diff viewer component made with diff and React",
"keywords": [
Expand All @@ -24,6 +24,10 @@
},
"license": "MIT",
"author": "Copia Automation (originally Pranesh Ravi <praneshpranesh@gmail.com>)",
"repository": {
"type": "git",
"url": "git+https://github.com/copia-automation/react-diff-viewer.git"
},
"main": "lib/index",
"typings": "lib/index",
"scripts": {
Expand Down
Loading