chromogen-zustand
Version:
simple, interaction-driven Jest test generator for Recoil and React Hooks apps
154 lines (153 loc) • 8.5 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HooksChromogenObserver = void 0;
const react_1 = __importStar(require("react"));
const redux_1 = require("redux");
const hooks_ledger_1 = require("../utils/hooks-ledger");
const hooks_store_1 = require("../utils/hooks-store");
const hooks_component_utils_1 = require("./hooks-component-utils");
const HooksChromogenObserver = function ({ initialState = [], children, }) {
const [file, setFile] = (0, react_1.useState)(undefined);
const [recording, setRecording] = (0, react_1.useState)(true);
const [devtool, setDevtool] = (0, react_1.useState)(false);
const [, setEditFile] = (0, react_1.useState)(undefined);
const receiveMessage = (message) => {
switch (message.data.action) {
case 'connectChromogen':
setDevtool(true);
console.log('inside connectChromogen in HooksChromogenObserver devtool is:', devtool);
window.postMessage({ action: 'moduleConnected' }, '*');
break;
case 'downloadFile':
(0, hooks_component_utils_1.generateHooksFile)(setFile);
break;
case 'editFile':
const array = (0, hooks_component_utils_1.generateHooksFile)(setEditFile);
window.postMessage({ action: 'editFileReceived', data: array }, '*');
break;
case 'toggleRecord':
setRecording(() => {
if (!recording)
return true;
return false;
});
window.postMessage({ action: 'setStatus' }, '*');
break;
default:
}
};
(0, react_1.useEffect)(() => {
window.addEventListener('message', receiveMessage);
return () => window.removeEventListener('message', receiveMessage);
});
(0, react_1.useEffect)(() => document.getElementById('chromogen-hooks-download').click(), [file]);
const omit = (obj, keyToRemove) => Object.keys(obj)
.filter((key) => key !== keyToRemove)
.reduce((acc, key) => {
acc[key] = obj[key];
console.log('obj', obj);
console.log('key', key);
return acc;
}, {});
const store = (0, react_1.useMemo)(() => {
if (typeof window === 'undefined') {
return undefined;
}
const registeredReducers = {};
const storeReducer = (state, action) => {
const actionReducerId = action.type.split('/')[0];
const isInitAction = /\/_init$/.test(action.type);
const isTeardownAction = /\/_teardown$/.test(action.type);
const currentState = isTeardownAction ? omit(state, actionReducerId) : Object.assign({}, state);
const result = Object.keys(registeredReducers).reduce((acc, reducerId) => {
const reducer = registeredReducers[reducerId];
const reducerState = state[reducerId];
const reducerAction = action.payload;
const isForCurrentReducer = actionReducerId === reducerId;
if (isForCurrentReducer) {
const arr = [];
arr[0] = reducerId;
arr[1] = acc[reducerId];
hooks_ledger_1.hooksLedger.previousState.push(arr);
acc[reducerId] = isInitAction ? action.payload : reducer(reducerState, reducerAction);
}
else {
acc[reducerId] = reducerState;
}
return acc;
}, currentState);
const newStateObj = (0, hooks_component_utils_1.createPrevStateObj)(hooks_ledger_1.hooksLedger.previousState);
const newStateTreeObj = (0, hooks_component_utils_1.generateStateTreeObj)(newStateObj);
window.postMessage({ action: 'stateChange', stateObj: newStateTreeObj }, '*');
return result;
};
const store = (0, redux_1.createStore)(storeReducer, initialState);
store.registerHookedReducer = (reducer, initialState, reducerId) => {
registeredReducers[reducerId] = reducer;
store.dispatch({
type: `${reducerId}/_init`,
payload: initialState,
});
return () => {
delete registeredReducers[reducerId];
store.dispatch({
type: `${reducerId}/_teardown`,
});
};
};
return store;
}, []);
(0, react_1.useEffect)(() => {
store && store.dispatch({ type: 'REINSPECT/@@INIT', payload: {} });
}, []);
const [pauseColor, setPauseColor] = (0, react_1.useState)('#90d1f0');
const pauseBorderStyle = {
borderColor: `${pauseColor}`,
};
const [playColor, setPlayColor] = (0, react_1.useState)('transparent transparent transparent #90d1f0');
const playBorderStyle = {
borderColor: `${playColor}`,
};
console.log('dev tool', devtool);
return (react_1.default.createElement(react_1.default.Fragment, null,
true && (react_1.default.createElement(hooks_store_1.ObserverContext.Provider, { value: store },
children,
react_1.default.createElement("div", { style: hooks_component_utils_1.hookStyles.hooksDivStyle },
react_1.default.createElement("button", { "aria-label": recording ? 'pause' : 'record', id: "chromogen-toggle-record", style: Object.assign(Object.assign({}, hooks_component_utils_1.hookStyles.hooksButtonStyle), { backgroundColor: '#7f7f7f' }), type: "button", onClick: () => {
setRecording(() => {
if (!recording)
return true;
return false;
});
}, onMouseEnter: () => recording ? setPauseColor('#f6f071') : setPlayColor('transparent transparent transparent #f6f071'), onMouseLeave: () => recording ? setPauseColor('#90d1f0') : setPlayColor('transparent transparent transparent #90d1f0') },
react_1.default.createElement("a", null, recording ?
react_1.default.createElement("div", { style: Object.assign(Object.assign({}, hooks_component_utils_1.hookStyles.hooksPauseStyle), pauseBorderStyle) })
: react_1.default.createElement("div", { style: Object.assign(Object.assign({}, hooks_component_utils_1.hookStyles.hooksPlayStyle), playBorderStyle) }))),
react_1.default.createElement("button", { "aria-label": "capture test", id: "chromogen-generate-file", style: Object.assign(Object.assign({}, hooks_component_utils_1.hookStyles.hooksButtonStyle), { backgroundColor: '#7f7f7f', marginLeft: '-2px', marginRight: '13px' }), type: "button", onClick: () => (0, hooks_component_utils_1.generateHooksFile)(setFile), onMouseEnter: () => document.getElementById("chromogen-generate-file").style.color = '#f6f071', onMouseLeave: () => document.getElementById("chromogen-generate-file").style.color = '#90d1f0' },
react_1.default.createElement("a", null, 'Download'))))),
react_1.default.createElement("a", { download: "chromogen-hooks.test.js", href: file, id: "chromogen-hooks-download", style: { display: 'none' } }, "Download Test")));
};
exports.HooksChromogenObserver = HooksChromogenObserver;