97 lines
4.0 KiB
JavaScript
97 lines
4.0 KiB
JavaScript
const FunctionHistory = {
|
|
oninit: function(vnode) {
|
|
// Initialize indices in state
|
|
vnode.state.leftIndex = vnode.attrs.versions.length - 1; // Earliest
|
|
vnode.state.rightIndex = 0; // Latest
|
|
},
|
|
view: function (vnode) {
|
|
const versions = vnode.attrs.versions;
|
|
return m("div", [
|
|
m("div.flex.gap-4.mb-4", [
|
|
m("div.flex-1", [
|
|
m("label.block.text-sm.font-medium.text-gray-700", "Left Version"),
|
|
m("select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm", {
|
|
onchange: (e) => {
|
|
vnode.state.leftIndex = parseInt(e.target.value);
|
|
vnode.state.leftVersion = versions[vnode.state.leftIndex];
|
|
vnode.state.updateDiff();
|
|
},
|
|
value: vnode.state.leftIndex
|
|
}, versions.map((v, idx) =>
|
|
m("option", { value: idx }, `Version ${v.version_number} (${new Date(v.versioned_at).toLocaleString()})`)
|
|
))
|
|
]),
|
|
m("div.flex-1", [
|
|
m("label.block.text-sm.font-medium.text-gray-700", "Right Version"),
|
|
m("select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm", {
|
|
onchange: (e) => {
|
|
vnode.state.rightIndex = parseInt(e.target.value);
|
|
vnode.state.rightVersion = versions[vnode.state.rightIndex];
|
|
vnode.state.updateDiff();
|
|
},
|
|
value: vnode.state.rightIndex
|
|
}, versions.map((v, idx) =>
|
|
m("option", { value: idx }, `Version ${v.version_number} (${new Date(v.versioned_at).toLocaleString()})`)
|
|
))
|
|
])
|
|
]),
|
|
m("div", {
|
|
id: "diff-container",
|
|
style: "height: 500px; position: relative;"
|
|
})
|
|
]);
|
|
},
|
|
oncreate: function (vnode) {
|
|
const versions = vnode.attrs.versions;
|
|
// Initialize with the earliest and most recent versions if available
|
|
if (versions.length >= 2) {
|
|
vnode.state.leftVersion = versions[versions.length - 1]; // Earliest version
|
|
vnode.state.rightVersion = versions[0]; // Latest version
|
|
} else if (versions.length === 1) {
|
|
vnode.state.leftVersion = versions[0];
|
|
vnode.state.rightVersion = versions[0];
|
|
}
|
|
|
|
vnode.state.updateDiff = function () {
|
|
if (vnode.state.aceDiffer) {
|
|
// Clean up previous instance
|
|
vnode.state.aceDiffer.destroy();
|
|
}
|
|
|
|
vnode.state.aceDiffer = new AceDiff({
|
|
element: '#diff-container',
|
|
mode: "ace/mode/javascript",
|
|
left: {
|
|
content: vnode.state.leftVersion ? vnode.state.leftVersion.script : "",
|
|
editable: false,
|
|
},
|
|
right: {
|
|
content: vnode.state.rightVersion ? vnode.state.rightVersion.script : "",
|
|
editable: false,
|
|
}
|
|
});
|
|
|
|
// Configure both editors
|
|
const editors = vnode.state.aceDiffer.getEditors();
|
|
['left', 'right'].forEach(side => {
|
|
editors[side].setOptions({
|
|
maxLines: 20,
|
|
autoScrollEditorIntoView: true,
|
|
});
|
|
editors[side].session.setOption("useWorker", false);
|
|
});
|
|
};
|
|
|
|
// Initial diff setup
|
|
vnode.state.updateDiff();
|
|
},
|
|
onremove: function (vnode) {
|
|
// Clean up AceDiff when component is removed
|
|
if (vnode.state.aceDiffer) {
|
|
vnode.state.aceDiffer.destroy();
|
|
}
|
|
}
|
|
};
|
|
|
|
export default FunctionHistory;
|