1
0
mirror of synced 2025-12-09 07:18:18 +08:00

Compare commits

..

1 Commits

Author SHA1 Message Date
Jamie Peabody
3f4e89ae0c fix: trace only when debug enabled 2024-05-06 08:38:12 +01:00
11 changed files with 4172 additions and 5135 deletions

View File

@@ -1,52 +1,3 @@
## [5.3.2](https://github.com/wickedest/Mergely/compare/v5.3.1...v5.3.2) (2024-07-31)
### Bug Fixes
* Removed debug code ([c7b0fd0](https://github.com/wickedest/Mergely/commit/c7b0fd03b01cb3267d292c2985ca8b62adda11e0))
## [5.3.1](https://github.com/wickedest/Mergely/compare/v5.3.0...v5.3.1) (2024-06-19)
### Bug Fixes
* Fixed a regression rendering inline markup for numbers, punctuation, and symbols ([#199](https://github.com/wickedest/Mergely/issues/199)) ([c40672c](https://github.com/wickedest/Mergely/commit/c40672c458723bdd0d9a0062ef1457e435866765))
# [5.3.0](https://github.com/wickedest/Mergely/compare/v5.2.0...v5.3.0) (2024-06-16)
### Features
* Supports unicode diacritical marks when rendering line diff (fixes [#169](https://github.com/wickedest/Mergely/issues/169)) ([#197](https://github.com/wickedest/Mergely/issues/197)) ([a469a65](https://github.com/wickedest/Mergely/commit/a469a6510122356a7cae3fb1259e999e6cc34c94))
# [5.2.0](https://github.com/wickedest/Mergely/compare/v5.1.4...v5.2.0) (2024-06-09)
### Features
* Allows height to be not explicit height, e.g. 'inherit' or '100%' ([#196](https://github.com/wickedest/Mergely/issues/196)) ([b9e3641](https://github.com/wickedest/Mergely/commit/b9e3641c852a8926db5efdf33e65a607d5f2df5e))
## [5.1.4](https://github.com/wickedest/Mergely/compare/v5.1.3...v5.1.4) (2024-05-17)
### Bug Fixes
* removed accidental change that enabled code display modes (e.g. javascript, python, html) ([692d01f](https://github.com/wickedest/Mergely/commit/692d01f1653ae8f1163a2c6228f457549086b75d))
## [5.1.3](https://github.com/wickedest/Mergely/compare/v5.1.2...v5.1.3) (2024-05-06)
### Bug Fixes
* **chore:** updated deps ([#195](https://github.com/wickedest/Mergely/issues/195)) ([c4c6e8a](https://github.com/wickedest/Mergely/commit/c4c6e8abd8f02762d5803774789673f76a95e932))
## [5.1.2](https://github.com/wickedest/Mergely/compare/v5.1.1...v5.1.2) (2024-05-06)
### Bug Fixes
* trace only when debug enabled ([#194](https://github.com/wickedest/Mergely/issues/194)) ([60d18f8](https://github.com/wickedest/Mergely/commit/60d18f8d5c0df349b4806b2e8a6c0f79d9f8074e))
## [5.1.1](https://github.com/wickedest/Mergely/compare/v5.1.0...v5.1.1) (2024-03-11)

8967
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,6 @@
{
"name": "mergely",
"version": "5.3.2",
"version": "5.1.1",
"description": "A javascript UI for diff/merge",
"license": "(GPL-3.0 OR LGPL-3.0 OR MPL-1.1 OR SEE LICENSE IN LICENSE)",
"author": {
@@ -57,7 +57,7 @@
"karma-sourcemap-loader": "^0.4.0",
"karma-webpack": "^5.0.0",
"mocha": "^9.1.4",
"semantic-release": "^21.1.2",
"semantic-release": "^21.0.1",
"simple-mock": "^0.8.0",
"standard-version": "^9.3.2",
"style-loader": "^3.3.1",

View File

@@ -2,6 +2,11 @@ const CodeMirror = require('codemirror');
require('codemirror/addon/search/searchcursor.js');
require('codemirror/addon/selection/mark-selection.js');
require('codemirror/lib/codemirror.css');
require('codemirror/mode/go/go.js');
require('codemirror/mode/javascript/javascript.js');
require('codemirror/mode/htmlmixed/htmlmixed.js');
require('codemirror/mode/markdown/markdown.js');
require('codemirror/mode/python/python.js');
const dom = require('./dom.js');
const VDoc = require('./vdoc');
@@ -65,6 +70,7 @@ CodeMirrorDiffView.prototype.unbind = function() {
this.el.removeChild(this.el.lastChild);
}
if (this._origEl) {
this.el.style = this._origEl.style;
this.el.className = this._origEl.className;
}
this._unbound = true;
@@ -256,17 +262,16 @@ CodeMirrorDiffView.prototype.resize = function() {
CodeMirrorDiffView.prototype.bind = function(container) {
this.trace('api#bind', container);
this._origEl = {
style: container.style,
className: container.className
};
const el = dom.getMergelyContainer({ clazz: container.className });
const computedStyle = window.getComputedStyle(container);
if (!el.style.height
&& (!computedStyle.height || computedStyle.height === '0px')
) {
if (!computedStyle.height || computedStyle.height === '0px') {
throw new Error(
`The element "${container.id}" requires an explicit height`);
}
this._origEl = {
className: container.className
};
this.id = `${container.id}`;
this.lhsId = `${container.id}-lhs`;
this.rhsId = `${container.id}-rhs`;
@@ -449,6 +454,7 @@ CodeMirrorDiffView.prototype.bind = function(container) {
ev.preventDefault();
return;
}
const ed = this.editor[side];
// See if the user clicked the line number of a difference:
let found = false;
for (let i = 0; i < this.changes.length; ++i) {
@@ -752,9 +758,6 @@ CodeMirrorDiffView.prototype._set_top_offset = function (side) {
// this is the distance from the top of the screen to the top of the
// content of the first codemirror editor
const topnode = this._queryElement('.CodeMirror-measure');
if (!topnode.offsetParent) {
return false;
}
const top_offset = topnode.offsetParent.offsetTop + 4;
// restore editor's scroll position

View File

@@ -241,13 +241,10 @@ function CodeifyText(lhs, rhs, options) {
this.ctxs = {};
this.options = options;
this.options.split = this.options.split || 'lines';
const exp = /\p{Letter}\p{Mark}*|\p{Number}\p{Mark}*|\p{Punctuation}\p{Mark}*|\p{Symbol}\p{Mark}*|\p{White_Space}/gu;
if (typeof lhs === 'string') {
if (this.options.split === 'chars') {
// split characters and include their diacritical marks
this.lhs = lhs.match(exp) || [];
// this.lhs = [...lhs];
this.lhs = lhs.split('');
} else if (this.options.split === 'words') {
this.lhs = lhs.split(/\s/);
} else if (this.options.split === 'lines') {
@@ -258,9 +255,7 @@ function CodeifyText(lhs, rhs, options) {
}
if (typeof rhs === 'string') {
if (this.options.split === 'chars') {
// split characters and include their diacritical marks
this.rhs = rhs.match(exp) || [];
// this.rhs = [...rhs];
this.rhs = rhs.split('');
} else if (this.options.split === 'words') {
this.rhs = rhs.split(/\s/);
} else if (this.options.split === 'lines') {

View File

@@ -46,9 +46,7 @@ class Mergely {
}
const computedStyle = window.getComputedStyle(element);
if (!element.style.height
&& (!computedStyle.height || computedStyle.height === '0px')
) {
if (!computedStyle.height || computedStyle.height === '0px') {
throw new Error(
`The element "${selector}" requires an explicit height`);
}
@@ -122,11 +120,13 @@ class Mergely {
const colors = dom.getColors(this.el);
this._options = {
...defaultOptions,//lgpl
...(this._options || this._initOptions),
...this._initOptions,
...options//lgpl-separate-notice
};
this._viewOptions = {
...this._options,
...defaultOptions,
...this._initOptions,
...options,
_colors: colors
};
}

View File

@@ -2,10 +2,6 @@ const diff = require('./diff');
const trace = console.log;
const expLetters = new RegExp(
/\p{Letter}\p{Mark}*|\p{Number}\p{Mark}*|\p{Punctuation}\p{Mark}*|\p{Symbol}\p{Mark}*|\p{White_Space}/gu
);
class VDoc {
constructor(options) {
this.options = options;
@@ -279,18 +275,15 @@ class VLine {
editor.setGutterMarker(this.id, name, item);
}
if (this.markup.length) {
// while Mergely diffs unicode chars (letters+mark), CM is by character,
// so diffs need to be mapped.
const mapped = mapLettersToChars(editor.getValue());
for (const markup of this.markup) {
const [ charFrom, charTo, className ] = markup;
const fromPos = { line: this.id };
const toPos = { line: this.id };
if (charFrom >= 0) {
fromPos.ch = mapped[charFrom];
fromPos.ch = charFrom;
}
if (charTo >= 0) {
toPos.ch = mapped[charTo];
toPos.ch = charTo;
}
this._clearMarkup.push(
editor.markText(fromPos, toPos, { className }));
@@ -341,15 +334,4 @@ function getExtents(side, change) {
};
}
function mapLettersToChars(text) {
let match;
let mapped = {};
let index = 0;
expLetters.lastIndex = 0;
while ((match = expLetters.exec(text)) !== null) {
mapped[index++] = match.index;
}
return mapped;
}
module.exports = VDoc;

View File

@@ -42,7 +42,6 @@ describe('markup', () => {
const LHS_CHANGE_START = '.mergely.lhs.c.CodeMirror-linebackground.start';
const LHS_CHANGE_END = '.mergely.lhs.c.CodeMirror-linebackground.end';
const LHS_CHANGE_START_AND_END = '.mergely.lhs.c.CodeMirror-linebackground.start.end';
const RHS_CHANGE_START = '.mergely.rhs.c.CodeMirror-linebackground.start';
const RHS_CHANGE_END = '.mergely.rhs.c.CodeMirror-linebackground.end';
@@ -234,130 +233,7 @@ describe('markup', () => {
expect(rhs_spans[1].innerText).to.equal('h');
expect(rhs_spans[2].innerText).to.equal('ir');
}
},
{
name: 'single word single diacritic non-spacing marks',
lhs: 'كلمة',
rhs: 'كَلمة',
check: (editor) => {
expect(editor.querySelectorAll(LHS_CHANGE_START + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(LHS_CHANGE_END + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(RHS_CHANGE_START + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(RHS_CHANGE_END + '.cid-0')).to.have.length(1);
const lhs_spans = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
expect(lhs_spans).to.have.length(1);
expect(lhs_spans[0].innerText).to.equal('ك');
const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
expect(rhs_spans).to.have.length(1);
expect(rhs_spans[0].innerText).to.equal('كَ');
}
},
{
name: 'single word multiple diacritic non-spacing marks',
lhs: ['\u006E', '\u0061', '\u0314', '\u0065'].join(''), // na̔e
rhs: ['\u006E', '\u0061', '\u0314', '\u034A', '\u0065'].join(''), // na̔͊e
check: (editor) => {
expect(editor.querySelectorAll(LHS_CHANGE_START + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(LHS_CHANGE_END + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(RHS_CHANGE_START + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(RHS_CHANGE_END + '.cid-0')).to.have.length(1);
const lhs_spans = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
expect(lhs_spans).to.have.length(1);
expect(lhs_spans[0].innerText).to.equal(['\u0061', '\u0314'].join(''));
const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
expect(rhs_spans).to.have.length(1);
expect(rhs_spans[0].innerText).to.equal('a̔͊');
}
},
{
name: 'multiple words diacritic non-spacing marks',
lhs: 'كلمة اخرى',
rhs: 'كْلمة اخرى',
check: (editor) => {
expect(editor.querySelectorAll(LHS_CHANGE_START + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(LHS_CHANGE_END + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(RHS_CHANGE_START + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(RHS_CHANGE_END + '.cid-0')).to.have.length(1);
const lhs_spans = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
expect(lhs_spans).to.have.length(1);
expect(lhs_spans[0].innerText).to.equal('ك');
const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
expect(rhs_spans).to.have.length(1);
expect(rhs_spans[0].innerText).to.equal('كْ');
}
},
{
name: 'nonnormalizable diacritic non-spacing marks',
lhs: 'naeg',
// there are 2 marks on 'e', tilde (0303) and x (0353)
rhs: ['\u006E', '\u0061', '\u0353', '\u0065', '\u0353', '\u0303', '\u0067'].join(''),
check: (editor) => {
expect(editor.querySelectorAll(LHS_CHANGE_START + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(LHS_CHANGE_END + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(RHS_CHANGE_START + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(RHS_CHANGE_END + '.cid-0')).to.have.length(1);
const lhs_spans = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
expect(lhs_spans).to.have.length(1);
expect(lhs_spans[0].innerText).to.equal('ae');
const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
expect(rhs_spans).to.have.length(1);
expect(rhs_spans[0].innerText).to.equal(
['\u0061', '\u0353', '\u0065', '\u0353', '\u0303'].join('')
);
}
},
{
name: 'nonnormalizable diacritic non-spacing marks',
lhs: [
'\u0065', '\u0353', '\u0303',
'\u0065', '\u0353', '\u0303',
'\u0065', '\u0353', '\u0303',
'x',
'\u0065', '\u0353', '\u0303',
].join(''),
// there are 2 marks on 'e', tilde (0303) and x (0353)
rhs: [
'\u0065', '\u0353', '\u0303',
'\u0065', '\u0353', '\u0303',
'\u0065', '\u0353', '\u0303',
'y',
'\u0065', '\u0353', '\u0303',
].join(''),
check: (editor) => {
expect(editor.querySelectorAll(LHS_CHANGE_START + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(LHS_CHANGE_END + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(RHS_CHANGE_START + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(RHS_CHANGE_END + '.cid-0')).to.have.length(1);
const lhs_spans = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
expect(lhs_spans).to.have.length(1);
expect(lhs_spans[0].innerText).to.equal('x');
const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
expect(rhs_spans).to.have.length(1);
expect(rhs_spans[0].innerText).to.equal('y');
}
},
{
name: 'Changes with non-letter chars',
lhs: '~# 00 == ! (dog) \n',
rhs: '~? 11 ++ ] (fox) .\n',
check: (editor) => {
expect(editor.querySelectorAll(LHS_CHANGE_START_AND_END + '.cid-0')).to.have.length(1);
expect(editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0')).to.have.length(6);
expect(editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0')).to.have.length(7);
const lhs_changes = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
const rhs_changes = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
const lhs_values = [];
for (const value of lhs_changes.values()) {
lhs_values.push(value.innerText);
}
const rhs_values = [];
for (const value of rhs_changes.values()) {
rhs_values.push(value.innerText);
}
expect(lhs_values).to.deep.equal(['#', '00', '==', '!', 'd', 'g']);
expect(rhs_values).to.deep.equal(['?', '11', '++', ']', 'f', 'x', '.']);
}
},
}
];
// to debug, add `only: true` to the test `opts` above, and run `npm run debug`

View File

@@ -62,17 +62,19 @@ describe('mergely', function () {
try {
const { children } = editor.el.children[0];
const items = Array.from(children).map(a => a.className);
expect(items[0] == 'mergely-margin');
expect(items[1] == 'mergely-column');
// NOTE: if running karma debug, these tests can fail because
// the debugger grabs the focus and the CodeMirror instance
// loses `CodeMirror-focused`
expect(items[2].indexOf('CodeMirror cm-s-default' == 0));
expect(items[3] == 'mergely-margin');
expect(items[4] == 'mergely-column');
expect(items[5] == 'CodeMirror cm-s-default');
expect(items[6] == 'mergely-column');
expect(items[7] == 'mergely-splash');
expect(items).to.deep.equal([
'mergely-margin',
'mergely-column',
'CodeMirror cm-s-default CodeMirror-focused',
'mergely-canvas',
'mergely-column',
'CodeMirror cm-s-default',
'mergely-margin',
'mergely-splash'
]);
expect(editor.get('lhs')).to.equal('');
expect(editor.get('rhs')).to.equal('');
done();
@@ -97,17 +99,15 @@ describe('mergely', function () {
// NOTE: if running karma debug, these tests can fail because
// the debugger grabs the focus and the CodeMirror instance
// loses `CodeMirror-focused`
expect(items[0] == 'mergely-margin');
expect(items[1] == 'mergely-column');
// NOTE: if running karma debug, these tests can fail because
// the debugger grabs the focus and the CodeMirror instance
// loses `CodeMirror-focused`
expect(items[2].indexOf('CodeMirror cm-s-default' == 0));
expect(items[3] == 'mergely-margin');
expect(items[4] == 'mergely-column');
expect(items[5] == 'CodeMirror cm-s-default');
expect(items[6] == 'mergely-column');
expect(items[7] == 'mergely-splash');
expect(items).to.deep.equal([
'mergely-margin',
'mergely-column',
'CodeMirror cm-s-default CodeMirror-focused',
'mergely-canvas',
'mergely-column',
'CodeMirror cm-s-default',
'mergely-margin'
]);
expect(editor.get('lhs')).to.equal('left-hand side text');
expect(editor.get('rhs')).to.equal('right-hand side text');
done();
@@ -129,17 +129,18 @@ describe('mergely', function () {
try {
const { children } = editor.el.children[0];
const items = Array.from(children).map(a => a.className);
expect(items[0] == 'mergely-margin');
expect(items[1] == 'mergely-column');
// NOTE: if running karma debug, these tests can fail because
// the debugger grabs the focus and the CodeMirror instance
// loses `CodeMirror-focused`
expect(items[2].indexOf('CodeMirror cm-s-default' == 0));
expect(items[3] == 'mergely-margin');
expect(items[4] == 'mergely-column');
expect(items[5] == 'CodeMirror cm-s-default');
expect(items[6] == 'mergely-column');
expect(items[7] == 'mergely-splash');
expect(items).to.deep.equal([
'mergely-margin',
'mergely-column',
'CodeMirror cm-s-default CodeMirror-focused',
'mergely-canvas',
'mergely-column',
'CodeMirror cm-s-default',
'mergely-margin'
]);
expect(editor.get('lhs')).to.equal('left-hand side text');
expect(editor.get('rhs')).to.equal('right-hand side text');
done();
@@ -160,17 +161,18 @@ describe('mergely', function () {
try {
const { children } = editor.el.children[0];
const items = Array.from(children).map(a => a.className);
expect(items[0] == 'mergely-margin');
expect(items[1] == 'mergely-column');
// NOTE: if running karma debug, these tests can fail because
// the debugger grabs the focus and the CodeMirror instance
// loses `CodeMirror-focused`
expect(items[2].indexOf('CodeMirror cm-s-default' == 0));
expect(items[3] == 'mergely-margin');
expect(items[4] == 'mergely-column');
expect(items[5] == 'CodeMirror cm-s-default');
expect(items[6] == 'mergely-column');
expect(items[7] == 'mergely-splash');
expect(items).to.deep.equal([
'mergely-margin',
'mergely-column',
'CodeMirror cm-s-default CodeMirror-focused',
'mergely-canvas',
'mergely-column',
'CodeMirror cm-s-default',
'mergely-margin'
]);
expect(children[0].style.visibility).to.equal('hidden');
expect(children[6].style.visibility).to.equal('hidden');
done();
@@ -501,24 +503,6 @@ describe('mergely', function () {
});
});
it('should preserve changed option', function (done) {
const editor = init({
change_timeout: 0,
license: 'lgpl-separate-notice',
lhs: 'left-hand side text',
rhs: 'right-hand side text'
});
editor.once('updated', () => {
editor.options({ sidebar: false });
expect(editor.options().wrap_lines).to.equal(false, 'wrap_lines');
expect(editor.options().sidebar).to.equal(false, 'sidebar');
editor.options({ wrap_lines: false });
expect(editor.options().wrap_lines).to.equal(false, 'wrap_lines-2');
expect(editor.options().sidebar).to.equal(false, 'sidebar-2');
done();
});
});
it('should ignore white-space', function (done) {
const editor = init({
height: 100,

View File

@@ -1,5 +1,4 @@
const path = require('path')
const chalk = require('chalk');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
@@ -51,8 +50,8 @@ module.exports = {
compiler.hooks.entryOption.tap('MyPlugin', (context, entry) => {
console.log('-'.repeat(78));
console.log('Applications:');
console.log(chalk.bold(chalk.underline(chalk.cyan('http://localhost:8080/app.html'))));
console.log(chalk.bold(chalk.underline(chalk.cyan('http://localhost:8080/app-styles.html'))));
console.log('http://localhost:8080/app.html');
console.log('http://localhost:8080/app-styles.html');
console.log('-'.repeat(78));
});
}

View File

@@ -15,10 +15,6 @@ module.exports = (mode) => {
...webpackDevConfig.output,
path: path.join(__dirname, 'lib'),
filename: './[name].js',
library: {
name: 'mergely',
type: 'umd',
}
},
optimization: {
minimize: true,