feat(ui): color code different diff roots
This commit is contained in:
sylenien
Delirium
parent
7244dc8c94
commit
fbf4502dc2
3 changed files with 152 additions and 129 deletions
|
|
@ -32,6 +32,10 @@ function getActionsName(type) {
|
|||
}
|
||||
}
|
||||
|
||||
const PATH_BGS = ['255, 173, 173', '202, 255, 191', '155, 246, 255','255, 198, 255','160, 196, 255', '251, 248, 204', '253, 228, 207', '255, 207, 210', '241, 192, 232', '207, 186, 240', '163, 196, 243', '144, 219, 244', '142, 236, 245', '152, 245, 225', '185, 251, 192']
|
||||
|
||||
const buildBg = (shade) => `rgba(${shade}, 0.15)`
|
||||
|
||||
@connectPlayer(state => ({
|
||||
type: selectStorageType(state),
|
||||
list: selectStorageList(state),
|
||||
|
|
@ -44,6 +48,8 @@ function getActionsName(type) {
|
|||
})
|
||||
//@withEnumToggle('activeTab', 'setActiveTab', DIFF)
|
||||
export default class Storage extends React.PureComponent {
|
||||
pathShades = {}
|
||||
|
||||
lastBtnRef = React.createRef()
|
||||
|
||||
focusNextButton() {
|
||||
|
|
@ -73,12 +79,11 @@ export default class Storage extends React.PureComponent {
|
|||
const stateDiff = diff(prevItem.state, item.state)
|
||||
|
||||
if (!stateDiff) {
|
||||
console.log(prevItem.state, item.state)
|
||||
return <div style={{ flex: 1}} className='flex flex-col p-1 font-mono text-disabled-text'> No diff </div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1}} className='flex flex-col p-1 font-mono'>
|
||||
<div style={{ flex: 1}} className='flex flex-col p-1 font-semibold font-mono'>
|
||||
{stateDiff.map((d, i) => this.renderDiffs(d, i))}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -87,36 +92,46 @@ export default class Storage extends React.PureComponent {
|
|||
renderDiffs(diff, i) {
|
||||
const oldValue = diff.item ? JSON.stringify(diff.item.lhs) : JSON.stringify(diff.lhs)
|
||||
const newValue = diff.item ? JSON.stringify(diff.item.rhs) : JSON.stringify(diff.rhs)
|
||||
const [path, pathRoot] = this.createPathAndBg(diff)
|
||||
|
||||
const createPath = () => {
|
||||
let path = [];
|
||||
|
||||
if (diff.path) {
|
||||
path = path.concat(diff.path);
|
||||
}
|
||||
if (typeof(diff.index) !== 'undefined') {
|
||||
path.push(diff.index);
|
||||
}
|
||||
return path.length ? path.join('.') : '';
|
||||
}
|
||||
|
||||
console.log(this.pathShades[pathRoot])
|
||||
return (
|
||||
<div key={i}>
|
||||
<span className="font-semibold">
|
||||
{createPath()}
|
||||
<div key={i} className="p-1 rounded" style={{ background: this.pathShades[pathRoot] }}>
|
||||
<span>
|
||||
{path}
|
||||
{': '}
|
||||
</span>
|
||||
<span className="line-through">
|
||||
<span className="line-through text-disabled-text">
|
||||
{ oldValue || 'undefined' }
|
||||
</span>
|
||||
{' -> '}
|
||||
<span className={`font-semibold ${!newValue ? 'text-red' : 'text-green'}`}>
|
||||
<span className={`${!newValue ? 'text-red' : 'text-green'}`}>
|
||||
{ newValue || 'undefined'}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
createPathAndBg = (diff) => {
|
||||
let path = [];
|
||||
let pathRoot;
|
||||
|
||||
if (diff.path) {
|
||||
path = path.concat(diff.path);
|
||||
pathRoot = diff.path[0]
|
||||
if (!this.pathShades[pathRoot]) {
|
||||
const randomShade = PATH_BGS[Math.floor(Math.random() * PATH_BGS.length)];
|
||||
this.pathShades[pathRoot] = buildBg(randomShade)
|
||||
}
|
||||
}
|
||||
if (typeof(diff.index) !== 'undefined') {
|
||||
path.push(diff.index);
|
||||
}
|
||||
|
||||
const pathStr = path.length ? path.join('.') : '';
|
||||
return [pathStr, pathRoot]
|
||||
}
|
||||
|
||||
ensureString(actionType) {
|
||||
if (typeof actionType === 'string') return actionType;
|
||||
return "UNKNOWN";
|
||||
|
|
@ -133,7 +148,7 @@ export default class Storage extends React.PureComponent {
|
|||
if (listNow.length === 0) {
|
||||
return "Not initialized"; //?
|
||||
}
|
||||
return <JSONTree src={ listNow[ listNow.length - 1 ].state } />;
|
||||
return <JSONTree collapsed={2} src={ listNow[ listNow.length - 1 ].state } />;
|
||||
}
|
||||
|
||||
renderItem(item, i, prevItem) {
|
||||
|
|
@ -217,15 +232,14 @@ export default class Storage extends React.PureComponent {
|
|||
return (
|
||||
<BottomBlock>
|
||||
<BottomBlock.Header>
|
||||
<span className="font-semibold color-gray-medium mr-4">State</span>
|
||||
{ list.length > 0 &&
|
||||
<div className="flex w-full">
|
||||
{ showStore &&
|
||||
<h3 style={{ width: "40%" }}>
|
||||
<h3 style={{ width: "46%" }}>
|
||||
{"STORE"}
|
||||
</h3>
|
||||
}
|
||||
<h3 style={{ width: "40%" }}>
|
||||
<h3 style={{ width: "50%" }}>
|
||||
{getActionsName(type)}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
@ -253,14 +267,14 @@ export default class Storage extends React.PureComponent {
|
|||
show={ listNow.length === 0 }
|
||||
>
|
||||
{ showStore &&
|
||||
<div className="ph-10 scroll-y" style={{ width: "40%" }} >
|
||||
<div className="ph-10 scroll-y" style={{ width: "25%" }} >
|
||||
{ listNow.length === 0
|
||||
? <div className="color-gray-light font-size-16 mt-20 text-center" >{ "Empty state." }</div>
|
||||
: this.renderTab()
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div className="flex" style={{ width: showStore ? "60%" : "100%" }} >
|
||||
<div className="flex" style={{ width: showStore ? "75%" : "100%" }} >
|
||||
<Autoscroll className="ph-10" >
|
||||
{ listNow.map((item, i) => this.renderItem(item, i, i > 0 ? listNow[i - 1] : undefined)) }
|
||||
</Autoscroll>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
if (tp === null) { return resetPointer() }
|
||||
|
||||
switch (tp) {
|
||||
|
||||
|
||||
case 0: {
|
||||
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
|
||||
return {
|
||||
|
|
@ -25,7 +25,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
timestamp,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 4: {
|
||||
const url = this.readString(); if (url === null) { return resetPointer() }
|
||||
const referrer = this.readString(); if (referrer === null) { return resetPointer() }
|
||||
|
|
@ -37,7 +37,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
navigationStart,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 5: {
|
||||
const width = this.readUint(); if (width === null) { return resetPointer() }
|
||||
const height = this.readUint(); if (height === null) { return resetPointer() }
|
||||
|
|
@ -47,7 +47,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
height,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 6: {
|
||||
const x = this.readInt(); if (x === null) { return resetPointer() }
|
||||
const y = this.readInt(); if (y === null) { return resetPointer() }
|
||||
|
|
@ -57,7 +57,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
y,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 7: {
|
||||
|
||||
return {
|
||||
|
|
@ -65,7 +65,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 8: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const parentID = this.readUint(); if (parentID === null) { return resetPointer() }
|
||||
|
|
@ -81,7 +81,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
svg,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 9: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const parentID = this.readUint(); if (parentID === null) { return resetPointer() }
|
||||
|
|
@ -93,7 +93,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
index,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 10: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const parentID = this.readUint(); if (parentID === null) { return resetPointer() }
|
||||
|
|
@ -105,7 +105,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
index,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 11: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
return {
|
||||
|
|
@ -113,7 +113,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
id,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 12: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const name = this.readString(); if (name === null) { return resetPointer() }
|
||||
|
|
@ -125,7 +125,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
value,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 13: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const name = this.readString(); if (name === null) { return resetPointer() }
|
||||
|
|
@ -135,7 +135,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
name,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 14: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const data = this.readString(); if (data === null) { return resetPointer() }
|
||||
|
|
@ -145,7 +145,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
data,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 15: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const data = this.readString(); if (data === null) { return resetPointer() }
|
||||
|
|
@ -155,7 +155,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
data,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 16: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const x = this.readInt(); if (x === null) { return resetPointer() }
|
||||
|
|
@ -167,7 +167,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
y,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 18: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const value = this.readString(); if (value === null) { return resetPointer() }
|
||||
|
|
@ -179,7 +179,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
mask,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 19: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const checked = this.readBoolean(); if (checked === null) { return resetPointer() }
|
||||
|
|
@ -189,7 +189,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
checked,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 20: {
|
||||
const x = this.readUint(); if (x === null) { return resetPointer() }
|
||||
const y = this.readUint(); if (y === null) { return resetPointer() }
|
||||
|
|
@ -199,7 +199,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
y,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 22: {
|
||||
const level = this.readString(); if (level === null) { return resetPointer() }
|
||||
const value = this.readString(); if (value === null) { return resetPointer() }
|
||||
|
|
@ -209,7 +209,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
value,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 37: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const rule = this.readString(); if (rule === null) { return resetPointer() }
|
||||
|
|
@ -221,7 +221,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
index,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 38: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const index = this.readUint(); if (index === null) { return resetPointer() }
|
||||
|
|
@ -231,7 +231,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
index,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 39: {
|
||||
const method = this.readString(); if (method === null) { return resetPointer() }
|
||||
const url = this.readString(); if (url === null) { return resetPointer() }
|
||||
|
|
@ -251,7 +251,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
duration,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 40: {
|
||||
const name = this.readString(); if (name === null) { return resetPointer() }
|
||||
const duration = this.readUint(); if (duration === null) { return resetPointer() }
|
||||
|
|
@ -265,7 +265,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
result,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 41: {
|
||||
const key = this.readString(); if (key === null) { return resetPointer() }
|
||||
const value = this.readString(); if (value === null) { return resetPointer() }
|
||||
|
|
@ -275,7 +275,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
value,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 44: {
|
||||
const action = this.readString(); if (action === null) { return resetPointer() }
|
||||
const state = this.readString(); if (state === null) { return resetPointer() }
|
||||
|
|
@ -287,7 +287,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
duration,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 45: {
|
||||
const mutation = this.readString(); if (mutation === null) { return resetPointer() }
|
||||
const state = this.readString(); if (state === null) { return resetPointer() }
|
||||
|
|
@ -297,7 +297,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
state,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 46: {
|
||||
const type = this.readString(); if (type === null) { return resetPointer() }
|
||||
const payload = this.readString(); if (payload === null) { return resetPointer() }
|
||||
|
|
@ -307,7 +307,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
payload,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 47: {
|
||||
const action = this.readString(); if (action === null) { return resetPointer() }
|
||||
const state = this.readString(); if (state === null) { return resetPointer() }
|
||||
|
|
@ -319,7 +319,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
duration,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 48: {
|
||||
const operationKind = this.readString(); if (operationKind === null) { return resetPointer() }
|
||||
const operationName = this.readString(); if (operationName === null) { return resetPointer() }
|
||||
|
|
@ -333,7 +333,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
response,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 49: {
|
||||
const frames = this.readInt(); if (frames === null) { return resetPointer() }
|
||||
const ticks = this.readInt(); if (ticks === null) { return resetPointer() }
|
||||
|
|
@ -347,7 +347,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
usedJSHeapSize,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 54: {
|
||||
const downlink = this.readUint(); if (downlink === null) { return resetPointer() }
|
||||
const type = this.readString(); if (type === null) { return resetPointer() }
|
||||
|
|
@ -357,7 +357,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
type,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 55: {
|
||||
const hidden = this.readBoolean(); if (hidden === null) { return resetPointer() }
|
||||
return {
|
||||
|
|
@ -365,7 +365,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
hidden,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 59: {
|
||||
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
|
||||
const duration = this.readUint(); if (duration === null) { return resetPointer() }
|
||||
|
|
@ -385,7 +385,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
containerName,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 60: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const name = this.readString(); if (name === null) { return resetPointer() }
|
||||
|
|
@ -399,7 +399,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
baseURL,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 61: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const data = this.readString(); if (data === null) { return resetPointer() }
|
||||
|
|
@ -411,7 +411,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
baseURL,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 67: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const rule = this.readString(); if (rule === null) { return resetPointer() }
|
||||
|
|
@ -425,7 +425,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
baseURL,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 69: {
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
const hesitationTime = this.readUint(); if (hesitationTime === null) { return resetPointer() }
|
||||
|
|
@ -439,7 +439,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
selector,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 70: {
|
||||
const frameID = this.readUint(); if (frameID === null) { return resetPointer() }
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
|
|
@ -449,7 +449,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
id,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 71: {
|
||||
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
|
||||
const text = this.readString(); if (text === null) { return resetPointer() }
|
||||
|
|
@ -461,7 +461,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
baseURL,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 72: {
|
||||
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
|
||||
const text = this.readString(); if (text === null) { return resetPointer() }
|
||||
|
|
@ -471,7 +471,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
text,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 73: {
|
||||
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
|
||||
const rule = this.readString(); if (rule === null) { return resetPointer() }
|
||||
|
|
@ -485,7 +485,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
baseURL,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 74: {
|
||||
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
|
||||
const rule = this.readString(); if (rule === null) { return resetPointer() }
|
||||
|
|
@ -497,7 +497,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
index,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 75: {
|
||||
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
|
||||
const index = this.readUint(); if (index === null) { return resetPointer() }
|
||||
|
|
@ -507,7 +507,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
index,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 76: {
|
||||
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
|
|
@ -517,7 +517,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
id,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 77: {
|
||||
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
|
||||
const id = this.readUint(); if (id === null) { return resetPointer() }
|
||||
|
|
@ -527,17 +527,19 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
id,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 79: {
|
||||
console.log('here')
|
||||
const mutation = this.readString(); if (mutation === null) { return resetPointer() }
|
||||
const state = this.readString(); if (state === null) { return resetPointer() }
|
||||
console.log(mutation, state)
|
||||
return {
|
||||
tp: "zustand",
|
||||
mutation,
|
||||
state,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 90: {
|
||||
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
|
||||
const projectID = this.readUint(); if (projectID === null) { return resetPointer() }
|
||||
|
|
@ -563,7 +565,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
userCountry,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 93: {
|
||||
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
|
||||
const length = this.readUint(); if (length === null) { return resetPointer() }
|
||||
|
|
@ -577,7 +579,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
payload,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 96: {
|
||||
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
|
||||
const length = this.readUint(); if (length === null) { return resetPointer() }
|
||||
|
|
@ -595,7 +597,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
height,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 100: {
|
||||
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
|
||||
const length = this.readUint(); if (length === null) { return resetPointer() }
|
||||
|
|
@ -611,7 +613,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
y,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 102: {
|
||||
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
|
||||
const length = this.readUint(); if (length === null) { return resetPointer() }
|
||||
|
|
@ -625,7 +627,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
value,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 103: {
|
||||
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
|
||||
const length = this.readUint(); if (length === null) { return resetPointer() }
|
||||
|
|
@ -639,7 +641,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
content,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
case 105: {
|
||||
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
|
||||
const length = this.readUint(); if (length === null) { return resetPointer() }
|
||||
|
|
@ -663,7 +665,7 @@ export default class RawMessageReader extends PrimitiveReader {
|
|||
status,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
default:
|
||||
throw new Error(`Unrecognizable message type: ${ tp }; Pointer at the position ${this.p} of ${this.buf.length}`)
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -1,62 +1,69 @@
|
|||
import { App, Messages } from "@openreplay/tracker";
|
||||
import { Encoder, sha1 } from "./syncod/index.js";
|
||||
import { App, Messages } from '@openreplay/tracker'
|
||||
import { Encoder, sha1 } from './syncod/index.js'
|
||||
|
||||
export interface Options {
|
||||
filter: (mutation: any, state: any) => boolean;
|
||||
transformer: (state: any) => any;
|
||||
mutationTransformer: (mutation: any) => any;
|
||||
filter: (mutation: any, state: any) => boolean
|
||||
transformer: (state: any) => any
|
||||
mutationTransformer: (mutation: any) => any
|
||||
}
|
||||
|
||||
function processMutationAndState(
|
||||
app: App,
|
||||
options: Options,
|
||||
encoder: Encoder,
|
||||
mutation: string[],
|
||||
state: Record<string, any>
|
||||
app: App,
|
||||
options: Options,
|
||||
encoder: Encoder,
|
||||
mutation: string[],
|
||||
state: Record<string, any>,
|
||||
) {
|
||||
if (options.filter(mutation, state)) {
|
||||
try {
|
||||
const _mutation = encoder.encode(options.mutationTransformer(mutation));
|
||||
const _state = encoder.encode(options.transformer(state));
|
||||
const _table = encoder.commit();
|
||||
for (let key in _table) app.send(Messages.OTable(key, _table[key]));
|
||||
app.send(Messages.Zustand(_mutation, _state));
|
||||
} catch (e) {
|
||||
encoder.clear();
|
||||
app.debug.error(e)
|
||||
}
|
||||
}
|
||||
if (options.filter(mutation, state)) {
|
||||
try {
|
||||
const _mutation = encoder.encode(options.mutationTransformer(mutation))
|
||||
const _state = encoder.encode(options.transformer(state))
|
||||
const _table = encoder.commit()
|
||||
for (let key in _table) app.send(Messages.OTable(key, _table[key]))
|
||||
app.send(Messages.Zustand(_mutation, _state))
|
||||
} catch (e) {
|
||||
encoder.clear()
|
||||
app.debug.error(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function(opts: Partial<Options> = {}) {
|
||||
const options: Options = Object.assign(
|
||||
{
|
||||
filter: () => true,
|
||||
transformer: state => state,
|
||||
mutationTransformer: mutation => mutation,
|
||||
},
|
||||
opts
|
||||
);
|
||||
return (app: App | null) => {
|
||||
if (app === null) {
|
||||
return Function.prototype;
|
||||
}
|
||||
const encoder = new Encoder(sha1, 50);
|
||||
const state = {};
|
||||
return (storeName: string = Math.random().toString(36).substring(2, 9)) =>
|
||||
(config: Function) =>
|
||||
(set: (...args: any) => void, get: () => Record<string, any>, api: any) =>
|
||||
config(
|
||||
(...args) => {
|
||||
set(...args)
|
||||
const newState = get();
|
||||
state[storeName] = newState
|
||||
const triggeredActions = args.map(action => action.toString?.())
|
||||
const options: Options = Object.assign(
|
||||
{
|
||||
filter: () => true,
|
||||
transformer: (state) => state,
|
||||
mutationTransformer: (mutation) => mutation,
|
||||
},
|
||||
opts,
|
||||
)
|
||||
return (app: App | null) => {
|
||||
if (app === null) {
|
||||
return Function.prototype
|
||||
}
|
||||
const encoder = new Encoder(sha1, 50)
|
||||
const state = {}
|
||||
return (
|
||||
storeName: string = Math.random()
|
||||
.toString(36)
|
||||
.substring(2, 9),
|
||||
) => (config: Function) => (
|
||||
set: (...args: any) => void,
|
||||
get: () => Record<string, any>,
|
||||
api: any,
|
||||
) =>
|
||||
config(
|
||||
(...args) => {
|
||||
console.log('hi', args)
|
||||
set(...args)
|
||||
const newState = get()
|
||||
state[storeName] = newState
|
||||
const triggeredActions = args.map((action) => action.toString?.())
|
||||
|
||||
processMutationAndState(app, options, encoder, triggeredActions, state)
|
||||
},
|
||||
get,
|
||||
api
|
||||
)
|
||||
};
|
||||
processMutationAndState(app, options, encoder, triggeredActions, state)
|
||||
},
|
||||
get,
|
||||
api,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue