use-secret-code
Version:
Custom hook for adding cheat codes to your React app
193 lines (190 loc) • 5.4 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
useCheatCode: () => useCheatCode,
useSecretCode: () => useSecretCode
});
module.exports = __toCommonJS(src_exports);
var React = __toESM(require("react"));
var import_xstate = require("xstate");
var import_react = require("@xstate/react");
// src/utils.ts
function isEqual(array1, array2) {
return JSON.stringify(array1) === JSON.stringify(array2);
}
function takeRight(array, n) {
if (n < 1)
return [];
return array.slice(-1 * n);
}
// src/index.ts
var initialContext = {
cheatCodeKeys: void 0,
typedKeys: []
};
var cheatCodeMachine = (0, import_xstate.setup)({
types: {
// typegen: {};
context: {},
events: {},
input: {}
},
actions: {
record: (0, import_xstate.assign)({
typedKeys: ({ context, event }) => [...context.typedKeys, event.key]
}),
resetTypedKeys: (0, import_xstate.assign)({
typedKeys: initialContext.typedKeys
})
},
delays: {
doneTyping: 2e3
},
guards: {
cheatCodeEntered: ({ context }) => {
return Array.isArray(context.cheatCodeKeys) && isEqual(
takeRight(context.typedKeys, context.cheatCodeKeys.length),
context.cheatCodeKeys
);
}
}
}).createMachine({
context: ({ input }) => ({ ...initialContext, ...input }),
id: "cheatCodeMachine",
initial: "disabled",
states: {
disabled: {
initial: "idle",
states: {
idle: {
always: {
target: "#cheatCodeMachine.enabled",
guard: "cheatCodeEntered",
actions: "resetTypedKeys"
},
on: {
keydown: {
target: "recording",
actions: "record"
}
}
},
recording: {
after: {
doneTyping: {
target: "#cheatCodeMachine.disabled.idle",
actions: ["resetTypedKeys"],
reenter: true
}
},
always: {
target: "#cheatCodeMachine.enabled",
guard: "cheatCodeEntered",
actions: "resetTypedKeys"
},
on: {
keydown: {
target: "recording",
actions: "record",
reenter: true
}
}
}
}
},
enabled: {
initial: "idle",
states: {
idle: {
always: {
target: "#cheatCodeMachine.disabled",
guard: "cheatCodeEntered",
actions: "resetTypedKeys"
},
on: {
keydown: {
target: "recording",
actions: "record"
}
}
},
recording: {
after: {
doneTyping: {
target: "#cheatCodeMachine.enabled.idle",
actions: ["resetTypedKeys"],
reenter: true
}
},
always: {
target: "#cheatCodeMachine.disabled",
guard: "cheatCodeEntered",
actions: "resetTypedKeys"
},
on: {
keydown: {
target: "recording",
actions: "record",
reenter: true
}
}
}
}
}
}
});
function useCheatCode(cheatCodeKeys) {
const machineOpts = React.useMemo(
() => ({ input: { cheatCodeKeys } }),
[cheatCodeKeys]
);
const [state, send] = (0, import_react.useMachine)(cheatCodeMachine, machineOpts);
React.useEffect(() => {
const handleKeydownEvent = (event) => {
send(event);
};
window.addEventListener("keydown", handleKeydownEvent);
return () => {
window.removeEventListener("keydown", handleKeydownEvent);
};
}, [send]);
return state.matches("enabled");
}
var useSecretCode = (
/* c8 ignore next */
useCheatCode
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useCheatCode,
useSecretCode
});
//# sourceMappingURL=index.js.map