Merge pull request #76 from robertmoura/main

Fixed history extension

Author: andrewcourtice

extensions/history/src/constants.ts

@@ -1,12 +1,12 @@
 import type {
-    CommandTasks,
-    CommandType,
+    ChangeCommands,
+    ChangeType,
 } from './types';
 
 export const SENDER = 'extension:history';
 export const MUTATION_FILTER = /^(plugin|extension)/;
 
-export const COMMAND_MAP = {
+export const CHANGE_MAP: Record<ChangeType, Partial<ChangeCommands>> = {
     exec: {
         set: (target, prop, newValue) => target[prop] = newValue,
         deleteProperty: (target, prop) => delete target[prop],
@@ -15,4 +15,4 @@ export const COMMAND_MAP = {
         set: (target, prop, newValue, oldValue) => target[prop] = oldValue,
         deleteProperty: (target, prop, newValue, oldValue) => target[prop] = oldValue,
     },
-} as Record<CommandType, Partial<CommandTasks>>;
+};

extensions/history/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    COMMAND_MAP,
+    CHANGE_MAP,
     MUTATION_FILTER,
     SENDER,
 } from './constants';
@@ -17,12 +17,16 @@ import traceExtension, {
 } from '@harlem/extension-trace';
 
 import {
+    matchGetFilter,
     objectFromPath,
+    typeIsMatchable,
+    typeIsObject,
 } from '@harlem/utilities';
 
 import type {
-    CommandType,
-    HistoryCommand,
+    ChangeType,
+    HistoryGroup,
+    MutationTrace,
     Options,
 } from './types';
 
@@ -31,18 +35,23 @@ export * from './types';
 function getOptions(options?: Partial<Options>): Options {
     return {
         max: 50,
-        mutations: [],
+        mutations: '*',
         ...options,
     };
 }
 
 export default function historyExtension<TState extends BaseState>(options?: Partial<Options>) {
     const _options = getOptions(options);
-    const mutationLookup = new Map(_options.mutations.map(({ name, description }) => [name, description]));
+    const groups = getMutationGroups(_options.mutations);
+
     const createTraceExtension = traceExtension<TState>({
         autoStart: true,
     });
 
+    function mutationFilter(mutation: string) {
+        return groups.some(({ filter }) => filter(mutation));
+    }
+
     return (store: InternalStore<TState>) => {
         store.register('extensions', 'history', () => _options);
 
@@ -52,21 +61,51 @@ export default function historyExtension<TState extends BaseState>(options?: Par
             onTraceResult,
         } = createTraceExtension(store);
 
-        let position = 0;
-        let commands = [] as HistoryCommand[];
-        let results = [] as TraceResult<any>[];
+        const createHistoryState = () => {
+            const results: TraceResult<any>[] = [];
+            const historyGroups = groups.reduce((out, { key }) => {
+                out[key] = {
+                    position: -1,
+                    history: [],
+                };
+
+                return out;
+            }, {} as Record<string, HistoryGroup>);
+
+            return {
+                results,
+                groups: historyGroups,
+            };
+        };
 
-        function executeCommand(type: CommandType, command: HistoryCommand) {
-            store.write(`extension:history:${type}`, SENDER, state => {
-                const tasks = COMMAND_MAP[type];
+        let historyState = createHistoryState();
+
+        store.on(EVENTS.mutation.before, (event?: EventPayload<TriggerEventData>) => {
+            if (!event || MUTATION_FILTER.test(event.data.name) || !mutationFilter(event.data.name)) {
+                return;
+            }
 
-                let {
-                    results,
-                } = command;
+            startTrace([
+                'set',
+                'deleteProperty',
+            ]);
 
-                if (type === 'undo') {
-                    results = results.slice().reverse();
-                }
+            const listener = onTraceResult(result => historyState.results.push(result));
+
+            store.once(EVENTS.mutation.after, () => {
+                stopTrace();
+                processResults(event.data.name);
+
+                listener.dispose();
+            });
+        });
+
+        function applyChange(type: ChangeType, change: MutationTrace) {
+            store.write(`extension:history:${type}`, SENDER, state => {
+                const tasks = CHANGE_MAP[type];
+                const results = type === 'exec'
+                    ? change.results
+                    : change.results.slice().reverse();
 
                 results.forEach(({ gate, nodes, prop, newValue, oldValue }) => {
                     const target = objectFromPath(state, nodes);
@@ -78,68 +117,65 @@ export default function historyExtension<TState extends BaseState>(options?: Par
             });
         }
 
-        function processResults(name: string) {
-            if (results.length === 0) {
+        function processResults(mutation: string) {
+            if (historyState.results.length === 0) {
                 return;
             }
 
-            if (commands.length >= _options.max) {
-                commands.shift();
-            }
-
-            commands.push({
-                name,
-                results: Array.from(results),
-            });
+            for (const { key, filter } of groups) {
+                if (!filter(mutation)) {
+                    continue;
+                }
 
-            results = [];
-            position = commands.length - 1;
-        }
+                const historyGroup = historyState.groups[key];
 
-        store.on(EVENTS.mutation.before, (event?: EventPayload<TriggerEventData>) => {
-            if (!event || MUTATION_FILTER.test(event.data.name) || (mutationLookup.size > 0 && !mutationLookup.has(event.data.name))) {
-                return;
-            }
+                if (historyGroup.history.length - 1 !== historyGroup.position) {
+                    historyGroup.history = historyGroup.history.slice(0, historyGroup.position + 1);
+                }
 
-            startTrace([
-                'set',
-                'deleteProperty',
-            ]);
+                if (historyGroup.history.length >= _options.max) {
+                    historyGroup.history.shift();
+                }
 
-            const listener = onTraceResult(result => results.push(result));
+                historyGroup.history.push({
+                    name: mutation,
+                    results: Array.from(historyState.results),
+                });
 
-            store.once(EVENTS.mutation.after, () => {
-                stopTrace();
-                processResults(event.data.name);
+                historyGroup.position = historyGroup.history.length - 1;
+            }
 
-                listener.dispose();
-            });
-        });
+            historyState.results = [];
+        }
 
-        function run(type: CommandType, offset: number) {
-            const command = commands[position];
+        function run(groupKey: string, type: ChangeType, offset: number) {
+            const historyGroup = historyState.groups[groupKey];
 
-            if (!command) {
+            if (!historyGroup) {
                 return;
             }
 
-            executeCommand(type, command);
+            const changeIndex = historyGroup.position + (offset === -1 ? 0 : 1);
+            const change = historyGroup.history[changeIndex];
+
+            if (!change) {
+                return;
+            }
 
-            position = Math.max(0, Math.min(commands.length - 1, position + offset));
+            applyChange(type, change);
+            historyGroup.position = Math.max(-1, Math.min(historyGroup.history.length - 1, historyGroup.position + offset));
         }
 
-        function undo() {
-            run('undo', -1);
+        function undo(group: string = '') {
+            run(group, 'undo', -1);
         }
 
-        function redo() {
-            run('exec', 1);
+        function redo(group: string = '') {
+            run(group, 'exec', 1);
         }
 
         function clearHistory() {
-            position = 0;
-            commands = [];
-            results = [];
+            historyState = createHistoryState();
         }
 
         return {
@@ -148,4 +184,25 @@ export default function historyExtension<TState extends BaseState>(options?: Par
             clearHistory,
         };
     };
+}
+
+function getMutationGroups(mutations: Options['mutations']) {
+    const hasGroups = typeIsObject(mutations) && 'groups' in mutations;
+    const groups = hasGroups ? mutations.groups : {};
+
+    if (!hasGroups || typeIsMatchable(mutations)) {
+        groups[''] = mutations;
+    }
+
+    return Object.entries(groups)
+        .map(([key, matcher]) => {
+            const matchable = typeIsMatchable(matcher) ? matcher : {
+                include: matcher,
+            };
+
+            return {
+                key,
+                filter: matchGetFilter(matchable),
+            };
+        });
 }

extensions/history/src/types.ts

@@ -1,28 +1,32 @@
-import {
+import type {
     TraceGate,
     TraceResult,
 } from '@harlem/extension-trace';
 
-export type CommandType = 'exec' | 'undo';
-export type CommandTask = (target: any, prop: PropertyKey, newValue: unknown, oldValue: unknown) => void;
-export type CommandTasks = Record<TraceGate<any>, CommandTask>;
+import type {
+    Matchable,
+    Matcher,
+} from '@harlem/utilities';
 
-export interface MutationPayload {
-    type: CommandType;
-    command: HistoryCommand;
-}
+export type ChangeType = 'exec' | 'undo';
+export type ChangeCommand = (target: any, prop: PropertyKey, newValue: unknown, oldValue: unknown) => void;
+export type ChangeCommands = Record<TraceGate<any>, ChangeCommand>;
 
-export interface HistoryCommand {
+export type MutationTrace = {
     name: string;
     results: TraceResult<any>[];
-}
+};
 
-export interface HistoryMutation {
-    name: string;
-    description?: string;
+export type HistoryGroup = {
+    position: number;
+    history: MutationTrace[];
 }
 
-export interface Options {
+export type MutationGroups = {
+    groups: Record<string, Matcher | Matchable>;
+};
+
+export type Options = {
     max: number;
-    mutations: HistoryMutation[];
-}
+    mutations: Matcher | Matchable | MutationGroups | Matchable & MutationGroups;
+};

extensions/history/test/history.test.ts

@@ -18,11 +18,17 @@ describe('History Extension', () => {
 
     const getInstance = () => getStore({
         extensions: [
-            historyExtension(),
+            historyExtension({
+                mutations: {
+                    groups: {
+                        userDetails: ['set-user-details'],
+                    },
+                },
+            }),
         ],
     });
 
-    let instance = getInstance();
+    let instance: ReturnType<typeof getInstance>;
 
     beforeAll(() => bootstrap());
     beforeEach(() => {
@@ -49,11 +55,31 @@ describe('History Extension', () => {
             firstName: 'John',
         });
 
+        setUserDetails({
+            firstName: 'More things',
+        });
+
+        expect(state.details.firstName).toBe('More things');
+        undo('userDetails');
         expect(state.details.firstName).toBe('John');
-        undo();
+        undo('userDetails');
         expect(state.details.firstName).toBe('');
-        // redo();
-        // expect(state.details.firstName).toBe('John');
+        redo('userDetails');
+        expect(state.details.firstName).toBe('John');
+        redo('userDetails');
+        expect(state.details.firstName).toBe('More things');
+        undo('userDetails');
+        expect(state.details.firstName).toBe('John');
+
+        setUserDetails({
+            firstName: 'After',
+        });
+
+        expect(state.details.firstName).toBe('After');
+        undo('userDetails');
+        expect(state.details.firstName).toBe('John');
+        redo('userDetails');
+        expect(state.details.firstName).toBe('After');
     });
 
 });

harlem/README.md

@@ -83,7 +83,7 @@ Register the Harlem plugin with your Vue app instance:
 import App from './app.vue';
 
 import {
-    createVuePLugin
+    createVuePlugin
 } from 'harlem';
 
 createApp(App)