6 |
7 |
3 |
4 |
5 |
6 |
7 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
91 |
92 | ### 2. **Install from source**
93 |
94 | 1. Clone this repository
95 | 2. Run the following commands
96 | ```
97 | cd colada-extension
98 | npm install
99 | npm run build
100 | ```
101 | 3. This will create a new `/dist` directory in `/colada-extension`
102 | 4. In Chrome, navigate to [chrome://extensions](chrome://extensions).
103 | 5. In the top right of the Extensions page, there is a toggle for "Developer Mode." Make sure this is toggled **ON**.
104 | 6. On the top left of the page, select "Load Unpacked", and select the `colada/colada-extension/dist` directory.
105 |
106 | 
119 | - Changes in your app's store and state will automatically be tracked on the timeline
120 | - Click on timeline events to travel through time and update your app's state
121 | 
128 |
129 |
130 | 
138 |
139 | - Changes in your app's store and state will automatically be tracked on the timeline
140 | - Click on a timestamp or use the arrows to travel through time and update your app's state
141 | - View your app's state as you time travel in the inspector panel on the right
142 | 
144 |
145 | {{element}}
4 |Store: {{info.key}}
4 |State:
5 |
Timestamp: {{timestamp}}
14 |9 | Colada is a developer tool designed to augment the current Vue Devtools and the Pinia State Management Library. 10 |
11 |
18 | To use Colada DevTools, open the Chrome Developer Tools, and select Colada DevTools from the main toolbar. 19 |
20 |21 | For more information, please visit colada.dev 22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/colada-extension/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import vue from '@vitejs/plugin-vue';
3 | import vueJsx from '@vitejs/plugin-vue-jsx';
4 |
5 | export default defineConfig({
6 | plugins: [vue(), vueJsx()],
7 | base: '',
8 | build: { minify: false }
9 | });
10 |
--------------------------------------------------------------------------------
/colada-plugin/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 'env': {
3 | 'browser': true,
4 | 'es2021': true
5 | },
6 | 'extends': [
7 | 'eslint:recommended',
8 | 'plugin:vue/vue3-essential',
9 | 'plugin:@typescript-eslint/recommended'
10 | ],
11 | 'overrides': [
12 | ],
13 | 'parser': '@typescript-eslint/parser',
14 | 'parserOptions': {
15 | 'ecmaVersion': 'latest',
16 | 'sourceType': 'module'
17 | },
18 | 'plugins': [
19 | 'vue',
20 | '@typescript-eslint'
21 | ],
22 | 'rules': {
23 | 'indent': [
24 | 'warn',
25 | 2
26 | ],
27 | 'linebreak-style': [
28 | 'warn',
29 | 'unix'
30 | ],
31 | 'quotes': [
32 | 'warn',
33 | 'single'
34 | ],
35 | 'semi': [
36 | 'warn',
37 | 'always'
38 | ]
39 | }
40 | };
41 |
--------------------------------------------------------------------------------
/colada-plugin/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | rollup.config.mjs
3 | tsconfig.json
4 | .eslintrc.js
--------------------------------------------------------------------------------
/colada-plugin/README.md:
--------------------------------------------------------------------------------
1 | ## How to add Colada to your Vue app...
2 | ```
3 | //main.js
4 | import { createApp } from 'vue';
5 | import { createPinia } from 'pinia';
6 | import Colada, { PiniaColadaPlugin } from 'colada-plugin';
7 | import App from './App.vue';
8 |
9 | const app = createApp(App);
10 | const pinia = createPinia();
11 |
12 | app.use(pinia);
13 | pinia.use(PiniaColadaPlugin);
14 | app.use(Colada);
15 |
16 | app.mount('#app');
17 |
--------------------------------------------------------------------------------
/colada-plugin/__tests__/handleStoreChange.test.js:
--------------------------------------------------------------------------------
1 | import { expect, describe, it } from 'vitest';
2 | import { handleStoreChange } from '../src/ColadaDevToolsPlugin/stateHandler';
3 | import * as _ from 'lodash';
4 |
5 |
6 | describe('handleStoreChange does not mutate inputs', () => {
7 |
8 | it('does not mutate snapshsot argument', () => {
9 | const firstSnapshot =
10 | {
11 | timestamp: 1663784676523,
12 | type: 'Store: counter',
13 | key: 'counter',
14 | value: { 'count': 0 },
15 | state: ['state'],
16 | getters: {},
17 | actions: {},
18 | editable: true
19 | };
20 |
21 | handleStoreChange(firstSnapshot);
22 | expect(firstSnapshot).toEqual({
23 | timestamp: 1663784676523,
24 | type: 'Store: counter',
25 | key: 'counter',
26 | value: { 'count': 0 },
27 | state: ['state'],
28 | getters: {},
29 | actions: {},
30 | editable: true
31 | });
32 |
33 | });
34 |
35 | });
--------------------------------------------------------------------------------
/colada-plugin/__tests__/stateHandler.test.js:
--------------------------------------------------------------------------------
1 | // @vitest-environment jsdom
2 |
3 | import {
4 | setAppState,
5 | } from './src/ColadaDevToolsPlugin/stateHandler';
6 | import {describe, expect, it } from 'vitest';
7 |
8 |
9 |
10 | describe('setAppState tests', () => {
11 | window.store = {
12 | 'counter': {
13 | $state: {}
14 | },
15 | 'store': {
16 | $state: {}
17 | }
18 | };
19 |
20 | const mockSnapshot = {
21 | '1663717295074':
22 | {
23 | counter:
24 | {
25 | timestamp: Date.now(),
26 | type: 'Store: counter',
27 | key: 'counter',
28 | value: { 'count': 0 },
29 | state: ['state'],
30 | getters: {},
31 | actions: {},
32 | editable: true
33 | },
34 | store: {
35 | timestamp: Date.now(),
36 | type: 'Store: store',
37 | key: 'store',
38 | value: {myStr: '', elements: []},
39 | state: ['state'],
40 | getters: {},
41 | actions: {},
42 | editable: true
43 | }
44 | }
45 | };
46 |
47 |
48 | it('updates window.store', () => {
49 | setAppState(mockSnapshot);
50 |
51 | expect(window.store['counter'].$state).toEqual({ count: 0 });
52 | expect(window.store['store'].$state).toEqual({ myStr: '', elements: [] });
53 | });
54 | });
55 |
--------------------------------------------------------------------------------
/colada-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "colada-plugin",
3 | "version": "0.1.0",
4 | "description": "A plugin to support Pinia",
5 | "author": {
6 | "name": "Jonathan Chen, Parker Steinberg, Vaughn Sulit, Dan Steinbrook"
7 | },
8 | "main": "dist/colada-plugin.cjs.js",
9 | "module": "dist/colada-plugin.esm-bundler.js",
10 | "unpkg": "dist/colada-plugin.global.js",
11 | "jsdelivr": "dist/colada-plugin.global.js",
12 | "types": "dist/index.d.ts",
13 | "exports": {
14 | ".": {
15 | "require": "./dist/colada-plugin.cjs.js",
16 | "browser": "./dist/colada-plugin.esm-browser.js",
17 | "import": "./dist/colada-plugin.esm-bundler.js",
18 | "module": "./dist/colada-plugin.esm-bundler.js"
19 | },
20 | "./package.json": "./package.json"
21 | },
22 | "sideEffects": false,
23 | "scripts": {
24 | "prepublish": "npm run dev",
25 | "dev": "rimraf dist && rollup -c rollup.config.mjs",
26 | "ts": "tsc --watch -d",
27 | "test": "vitest",
28 | "coverage": "vitest run --coverage"
29 | },
30 | "dependencies": {
31 | "@rollup/plugin-commonjs": "^22.0.2",
32 | "@rollup/plugin-node-resolve": "^13.3.0",
33 | "@rollup/plugin-replace": "^4.0.0",
34 | "@types/node": "^18.7.14",
35 | "@vue/devtools-api": "^6.2.1",
36 | "lodash.clonedeep": "^4.5.0",
37 | "lodash.debounce": "^4.0.8",
38 | "lodash.isempty": "^4.4.0",
39 | "pascalcase": "^2.0.0",
40 | "pinia": "^2.0.22",
41 | "rimraf": "^3.0.2",
42 | "rollup": "^2.79.0",
43 | "rollup-plugin-terser": "^7.0.2",
44 | "rollup-plugin-typescript2": "^0.33.0",
45 | "rollup-plugin-vue": "^6.0.0",
46 | "typescript": "^4.8.2",
47 | "vue": "^3.2.38"
48 | },
49 | "devDependencies": {
50 | "@types/lodash": "^4.14.185",
51 | "@types/lodash.clonedeep": "^4.5.7",
52 | "@types/lodash.debounce": "^4.0.7",
53 | "@types/lodash.isempty": "^4.4.7",
54 | "@typescript-eslint/eslint-plugin": "^5.37.0",
55 | "@typescript-eslint/parser": "^5.37.0",
56 | "eslint": "^8.23.1",
57 | "eslint-plugin-vue": "^9.5.1",
58 | "jsdom": "^20.0.0",
59 | "vitest": "^0.23.4"
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/colada-plugin/rollup.config.mjs:
--------------------------------------------------------------------------------
1 | import vuePlugin from 'rollup-plugin-vue';
2 | import replace from '@rollup/plugin-replace';
3 | import resolve from '@rollup/plugin-node-resolve';
4 | import commonjs from '@rollup/plugin-commonjs';
5 | import pascalcase from 'pascalcase';
6 | import pkg from './package.json' assert {type:'json'};
7 | import {terser} from 'rollup-plugin-terser';
8 | import ts from 'rollup-plugin-typescript2';
9 | import * as path from 'path';
10 | import { fileURLToPath } from 'url';
11 |
12 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
13 |
14 | //const pkg = require('./package.json')
15 | const name = pkg.name;
16 |
17 | function getAuthors (pkg) {
18 | const { contributors, author } = pkg;
19 |
20 | const authors = new Set();
21 | if (contributors && contributors) {
22 | contributors.forEach((contributor) => {
23 | authors.add(contributor.name);
24 | });
25 | }
26 | if (author) authors.add(author.name);
27 |
28 | return Array.from(authors).join(', ');
29 | }
30 |
31 | const banner = `/*!
32 | * ${pkg.name} v${pkg.version}
33 | * (c) ${new Date().getFullYear()} ${getAuthors(pkg)}
34 | * @license MIT
35 | */`;
36 |
37 | // ensure TS checks only once for each build
38 | let hasTSChecked = false;
39 |
40 | const outputConfigs = {
41 | // each file name has the format: `dist/${name}.${format}.js`
42 | // format being a key of this object
43 | 'esm-bundler': {
44 | file: pkg.module,
45 | format: 'es'
46 | },
47 | cjs: {
48 | file: pkg.main,
49 | format: 'cjs'
50 | },
51 | global: {
52 | file: pkg.unpkg,
53 | format: 'iife'
54 | },
55 | esm: {
56 | file: pkg.module.replace('bundler', 'browser'),
57 | format: 'es'
58 | }
59 | };
60 |
61 | const allFormats = Object.keys(outputConfigs);
62 | const packageFormats = allFormats;
63 | const packageConfigs = packageFormats.map((format) =>
64 | createConfig(format, outputConfigs[format])
65 | );
66 |
67 | // only add the production ready if we are bundling the options
68 | packageFormats.forEach((format) => {
69 | if (format === 'cjs') {
70 | packageConfigs.push(createProductionConfig(format));
71 | } else if (format === 'global') {
72 | packageConfigs.push(createMinifiedConfig(format));
73 | }
74 | });
75 |
76 | export default packageConfigs;
77 |
78 | function createConfig (format, output, plugins = []) {
79 | if (!output) {
80 | console.log(`invalid format: "${format}"`);
81 | process.exit(1);
82 | }
83 |
84 | output.sourcemap = !!process.env.SOURCE_MAP;
85 | output.banner = banner;
86 | output.externalLiveBindings = false;
87 | output.globals = { vue: 'Vue', '@vue/composition-api': 'vueCompositionApi' };
88 |
89 | const isProductionBuild = /\.prod\.js$/.test(output.file);
90 | const isGlobalBuild = format === 'global';
91 | const isRawESMBuild = format === 'esm';
92 | const isNodeBuild = format === 'cjs';
93 | const isBundlerESMBuild = /esm-bundler/.test(format);
94 |
95 | if (isGlobalBuild) output.name = pascalcase(pkg.name);
96 |
97 |
98 | // **************
99 | const shouldEmitDeclarations = !hasTSChecked;
100 |
101 | const tsPlugin = ts({
102 | check: !hasTSChecked,
103 | tsconfig: path.resolve(__dirname, 'tsconfig.json'),
104 | cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
105 | tsconfigOverride: {
106 | compilerOptions: {
107 | sourceMap: output.sourcemap,
108 | declaration: shouldEmitDeclarations,
109 | declarationMap: shouldEmitDeclarations,
110 | },
111 | exclude: ['__tests__', 'test-dts'],
112 | },
113 | });
114 | // we only need to check TS and generate declarations once for each build.
115 | // it also seems to run into weird issues when checking multiple times
116 | // during a single build.
117 | hasTSChecked = true;
118 |
119 | const external = ['vue', '@vue/composition-api'];
120 | if (!isGlobalBuild) {
121 | external.push('@vue/devtools-api');
122 | }
123 |
124 | const nodePlugins = [resolve(), commonjs()];
125 |
126 | return {
127 | input: 'src/index.ts',
128 | //input: 'src/index.js',
129 | // Global and Browser ESM builds inlines everything so that they can be
130 | // used alone.
131 | external,
132 | plugins: [
133 | vuePlugin(),
134 | tsPlugin,
135 | createReplacePlugin(
136 | isProductionBuild,
137 | isBundlerESMBuild
138 | ),
139 | ...nodePlugins,
140 | ...plugins
141 | ],
142 | output
143 | };
144 | }
145 |
146 | function createReplacePlugin (
147 | isProduction,
148 | isBundlerESMBuild
149 | ) {
150 | const replacements = {
151 | 'process.env.NODE_ENV': isBundlerESMBuild
152 | ? // preserve to be handled by bundlers
153 | 'process.env.NODE_ENV'
154 | : // hard coded dev/prod builds
155 | JSON.stringify(isProduction ? 'production' : 'development'),
156 | __VUE_PROD_DEVTOOLS__: isBundlerESMBuild
157 | ? '__VUE_PROD_DEVTOOLS__'
158 | : 'false'
159 | };
160 | // allow inline overrides like
161 | // __RUNTIME_COMPILE__=true yarn build
162 | Object.keys(replacements).forEach((key) => {
163 | if (key in process.env) {
164 | replacements[key] = process.env[key];
165 | }
166 | });
167 | return replace({
168 | preventAssignment: true,
169 | values: replacements
170 | });
171 | }
172 |
173 | function createProductionConfig (format) {
174 | return createConfig(format, {
175 | file: `dist/${name}.${format}.prod.js`,
176 | format: outputConfigs[format].format
177 | });
178 | }
179 |
180 | function createMinifiedConfig (format) {
181 | //const { terser } = require('rollup-plugin-terser')
182 |
183 | return createConfig(
184 | format,
185 | {
186 | file: `dist/${name}.${format}.prod.js`,
187 | format: outputConfigs[format].format
188 | },
189 | [
190 | terser({
191 | module: /^esm/.test(format),
192 | compress: {
193 | ecma: 2015,
194 | pure_getters: true
195 | }
196 | })
197 | ]
198 | );
199 | }
--------------------------------------------------------------------------------
/colada-plugin/src/ColadaDevToolsPlugin/index.ts:
--------------------------------------------------------------------------------
1 | import { setupDevtoolsPlugin } from '@vue/devtools-api';
2 | import { addPiniaStoreLabels, addPiniaStoreData } from './inspector';
3 | import { handleInspectTimelineEvent } from './timeline';
4 | import {
5 | initializeState,
6 | setAppState,
7 | getSnapshotbyTimestamp
8 | } from './stateHandler';
9 |
10 | // declare type for application window
11 | declare const window: any;
12 |
13 |
14 | //*************************************************************************** */
15 | //************* global variables that are used throughout file ************** */
16 | //*************************************************************************** */
17 | const inspectorId = 'colada-plugin';
18 | const timelineLayerId = 'colada-plugin';
19 |
20 |
21 | export function setupDevtools(app: any) {
22 |
23 |
24 | setupDevtoolsPlugin({
25 | id: inspectorId,
26 | label: 'Colada 🥥',
27 | packageName: 'colada-plugin',
28 | homepage: 'https://colada.dev/',
29 | logo: 'https://user-images.githubusercontent.com/34523493/191631808-4dee4315-2638-4214-9c4f-c074316d969e.png',
30 | app,
31 | enableEarlyProxy: true,
32 | settings: {}
33 | }, api => {
34 | //********************************************************************** */
35 | // ************ EVENT LISTENERS *****************************************
36 | //********************************************************************** */
37 |
38 | window.addEventListener('message', (event: any) => {
39 | // parse data from message
40 | const parsed = typeof event.data === 'string' ? JSON.parse(event.data) : '';
41 |
42 | // if source is colada extension, set app's state to snapshot that correspodns with payload's timestamp
43 | if (parsed.source === 'colada-extension') {
44 | const timestamp = parseInt(parsed.payload);
45 | setAppState(getSnapshotbyTimestamp(timestamp));
46 | }
47 | })
48 |
49 | window.addEventListener('DOMContentLoaded', () => {
50 | setTimeout(initializeState, 1000);
51 | });
52 |
53 | //add event listener to the window for 'addTimeLineEvent'
54 | window.addEventListener('addTimelineEvent', (e: any) => {
55 | const eventToAdd = e.detail;
56 |
57 | // grab timestamp from eventToAdd
58 | const currentTimestamp = parseInt(Object.keys(eventToAdd)[0]);
59 | const currentStores = Object.values(eventToAdd[currentTimestamp]);
60 | // iterate over snapshot associated with that timestamp
61 | currentStores.forEach((store: any) => {
62 | // add timelineEvent for each store
63 | api.addTimelineEvent({
64 | layerId: timelineLayerId,
65 | event: {
66 | time: currentTimestamp,
67 | title: store.key,
68 | data: {
69 | state: store.value
70 | },
71 | groupId: store.key
72 | }
73 | });
74 |
75 | });
76 | // refresh inspector state after adding element to timeline
77 | api.sendInspectorState(inspectorId);
78 | //END OF window.addEventListener
79 | });
80 |
81 | api.on.inspectTimelineEvent(handleInspectTimelineEvent);
82 |
83 |
84 | //********************************************************************** */
85 | // ************ COMPONENT SETTINGS *****************************************
86 | //********************************************************************** */
87 |
88 | //Adds a tag to next to the component in the Inspector -> Components Tree
89 | api.on.visitComponentTree((payload) => {
90 | //console.log('context is', context);
91 | const node = payload.treeNode;
92 | if (payload.componentInstance.type.meow) {
93 | node.tags.push({
94 | label: 'colada',
95 | textColor: 0x000000,
96 | backgroundColor: 0xff984f
97 | });
98 | }
99 | });
100 |
101 |
102 | //********************************************************************** */
103 | // ************ INSPECTOR SETTINGS *****************************************
104 | //********************************************************************** */
105 | //adds the Colada label into the Inspector bar
106 | api.addInspector({
107 | id: inspectorId,
108 | label: 'Colada 🥥',
109 | icon: 'code',
110 | treeFilterPlaceholder: 'Searching...',
111 | });
112 |
113 | api.on.getInspectorTree((payload: any) => {
114 | // if payload's inspector id matches our custom Colada inspectorId, add our store labels to the inspector
115 | if (payload.inspectorId === inspectorId) {
116 | addPiniaStoreLabels(payload);
117 | }
118 | });
119 |
120 |
121 | api.on.getInspectorState((payload: any) => {
122 | // if payload inspectorId matches the Colada inspectorId, add the relevant Pinia store data to the inspector panel
123 | if (payload.inspectorId === inspectorId) {
124 | addPiniaStoreData(payload);
125 | }
126 | });
127 |
128 |
129 | //********************************************************************** */
130 | // ************ TIMELINE SETTINGS *****************************************
131 | //********************************************************************** */
132 | //Register a timeline layer
133 | api.addTimelineLayer({
134 | id: timelineLayerId,
135 | color: 0xff984f,
136 | label: 'Colada 🥥',
137 | skipScreenshots: true, // doesn't work :(
138 | });
139 |
140 | });
141 | }
142 |
--------------------------------------------------------------------------------
/colada-plugin/src/ColadaDevToolsPlugin/inspector.ts:
--------------------------------------------------------------------------------
1 | import { getCurrentStores } from './stateHandler';
2 | import { StateObject } from '../types';
3 |
4 | // add elements (names of stores) to inspector
5 | const addPiniaStoreLabels = (payload: any) => {
6 | // iterate over stores and grab each label
7 | const currentStores = getCurrentStores();
8 | // initialize root node for Colada inspector tree
9 | payload.rootNodes = [
10 | {
11 | id: 'root',
12 | label: '🥥 Root',
13 | children: [],
14 | }
15 | ];
16 |
17 | // iterate over currentStores to add children stores to root
18 | Object.values(currentStores).forEach((store: any) => {
19 | const currentLabel = store.key;
20 | // push current store label to children array in payload.rootNodes
21 | payload.rootNodes[0].children.push({
22 | id: currentLabel,
23 | label: `store: ${currentLabel}`
24 | });
25 | });
26 | };
27 |
28 | // add state to inspector
29 | // API: api.on.getInspectorState
30 | // triggered by: when the devtools needs to load the state for the currently selected node in a custom inspector
31 | // iterate over most recent versions of stores and add all that data to the inspector
32 | // make use of getter function exported from stateHandler.ts that grabs the most recent stores from storeHistory
33 | const addPiniaStoreData = (payload: any) => {
34 | // use getCurrentStore from stateHandler to get most recent versions stores
35 | const currentStores = getCurrentStores();
36 |
37 | // initialize a state array
38 | const stateArr: StateObject[] = [];
39 | // initialize a getters array
40 | const gettersArr: any[] = [];
41 | // initialize a actions array
42 | const actionsArr: any[] = [];
43 |
44 | // iterate over currentStores
45 | Object.values(currentStores).forEach((store: any) => {
46 |
47 | const { key, value, getters, actions } = store;
48 | // add state to stateArry, getters to gettersArray, and actions to actionsArray
49 | const stateObj: StateObject = {
50 | key: key,
51 | value: value,
52 | editable: false
53 | };
54 |
55 | const gettersObj: any = {
56 | key: key,
57 | value: getters,
58 | editable: false
59 | };
60 |
61 | const actionsObj: any = {
62 | key: key,
63 | value: actions,
64 | editable: false
65 | };
66 |
67 | stateArr.push(stateObj);
68 | gettersArr.push(gettersObj);
69 | actionsArr.push(actionsObj);
70 |
71 | });
72 |
73 | // if nodeId is root --> add all the data for all stores
74 | if (payload.nodeId === 'root') {
75 | payload.state = {
76 | 'state': stateArr,
77 | 'getters': gettersArr,
78 | 'actions': actionsArr,
79 | };
80 | } else { // if nodeId is not root
81 | // use filter to get state, getters, and actionsArr to match the current node id being selected (which is the selected store)
82 | const filteredStateArr = stateArr.filter((state) => state.key === payload.nodeId);
83 | const filteredGettersArr = gettersArr.filter((getters) => getters.key === payload.nodeId);
84 | const filteredActionsArr = actionsArr.filter((actions) => {
85 | return actions.key === payload.nodeId;
86 | });
87 |
88 | payload.state = {
89 | 'state': filteredStateArr,
90 | 'getters': filteredGettersArr,
91 | 'actions': filteredActionsArr
92 | };
93 | }
94 |
95 | };
96 |
97 | export {
98 | addPiniaStoreLabels,
99 | addPiniaStoreData
100 | };
--------------------------------------------------------------------------------
/colada-plugin/src/ColadaDevToolsPlugin/stateHandler.ts:
--------------------------------------------------------------------------------
1 | import { piniaStores } from '../PiniaColadaPlugin/index';
2 | import * as _ from 'lodash';
3 | import debounce from 'lodash.debounce';
4 | import cloneDeep from 'lodash.clonedeep';
5 | import isEmpty from 'lodash.isempty';
6 |
7 | // delcare global variables
8 | const storeHistory: any = [];
9 | declare const window: any
10 | let combinedSnapshot: any = {};
11 | const storeLabels: any = [];
12 |
13 | /*
14 | * Add missing stores to combinedSnapshot
15 | * Add property hasBeenUpdated to combinedSnapshot and set to false
16 | * push combinedSnapshot to storeHistory
17 | * emit custom addTimelineEvent event with combinedSnapshot as payload
18 | * send data to extension via window.postMessage with combinedSnapshot as payload
19 | */
20 | const outputCombinedSnapshot = debounce(() => {
21 | // delcare variable missing stores, which will have the labels for the missing stores from snapShot
22 | const missingStores = storeLabels.filter((label: any) => {
23 | return !Object.keys(combinedSnapshot[Object.keys(combinedSnapshot)[0]]).includes(label);
24 | });
25 | // iterate over missing stores, find the corresponding most recent snapshot, and add to combinedSnapshot
26 | missingStores.forEach((store: any) => {
27 | // can replace this with getter function below
28 | // need to make a deep clone, otherwise we will be udpated the mostRecentSnapshot inadvertently
29 | const mostRecentSnapshot = getCurrentStores(true);
30 | const mostRecentSnapshotClone: any = cloneDeep(mostRecentSnapshot);
31 | // get correspong store and have to const
32 | const mostRecentStore = mostRecentSnapshotClone[Object.keys(mostRecentSnapshotClone)[0]][store];
33 | // add hasBeenUpdated = false property to snapshot we're adding
34 | mostRecentStore.hasBeenUpdated = false;
35 | // add to combinedSnapshot
36 | combinedSnapshot[Object.keys(combinedSnapshot)[0]][store] = mostRecentStore;
37 | });
38 |
39 | // pushing combinedSnap to storeHistory, triggering custom event, and posting message to window
40 | storeHistory.push(combinedSnapshot);
41 | //emit a custom event with the proxyObj as a payload
42 | const event: any = new CustomEvent('addTimelineEvent', { detail: combinedSnapshot });
43 | window.dispatchEvent(event);
44 |
45 | //send a messsage to the window for the extension to make use of
46 | const messageObj: any = {
47 | source: 'colada',
48 | payload: combinedSnapshot
49 | };
50 |
51 | window.postMessage(JSON.stringify(messageObj), window.location.href);
52 |
53 | // reset combinedSnapshot to empty object
54 | combinedSnapshot = {};
55 | }, 10);
56 |
57 | const handleStoreChange = (snapshot: any) => {
58 |
59 | const snapshotClone = cloneDeep(snapshot)
60 |
61 | // add hasBeenUpdated property to true on snapshotClone
62 | snapshotClone.hasBeenUpdated = true;
63 |
64 | // add snapshots's label ('key' proprety) to storeLabels if it's not already in there
65 | if (!storeLabels.includes(snapshotClone.key)) {
66 | storeLabels.push(snapshotClone.key);
67 | }
68 |
69 | // if finalSnaphsot has no properites, add initial timestamp property along with associated snapshotClone
70 | if (isEmpty(combinedSnapshot)) {
71 | combinedSnapshot[snapshotClone.timestamp] = {
72 | [snapshotClone.key]: snapshotClone
73 | };
74 | }
75 | // else, add a new key to combinedSnapshot at existing timestamp property
76 | else {
77 | combinedSnapshot[Object.keys(combinedSnapshot)[0]][snapshotClone.key] = snapshotClone;
78 | }
79 |
80 | // invoke debounced outputCombinedSnapshot
81 | outputCombinedSnapshot();
82 | };
83 |
84 |
85 | // import the subscribe method and implement associated functionality
86 | const initializeState = () => {
87 | piniaStores.subscribe(handleStoreChange, true);
88 | };
89 |
90 | const resubscribe = () => {
91 | piniaStores.subscribe(handleStoreChange, false);
92 | };
93 |
94 | const unsubscribe = () => {
95 | piniaStores.unsubscribe();
96 | };
97 |
98 |
99 | // NOTE: currently 0(n) ... consider refactoring to use binary search
100 | const getSnapshotbyTimestamp = (timestamp: number) => {
101 | for (const e of storeHistory) {
102 | if (parseInt(Object.keys(e)[0]) === timestamp) return e;
103 | }
104 | };
105 |
106 | const setAppState = (snapshot: any) => {
107 | unsubscribe();
108 | const stores: any = Object.values(snapshot)[0];
109 | for (const key in stores) {
110 | window.store[key].$state = stores[key].value;
111 | }
112 | resubscribe();
113 | };
114 |
115 | /*
116 | @param {boolean} [includeTimestamps=false] - To retrieve data with timestamps. Defaults to false.
117 | */
118 | const getCurrentStores = (includeTimestamps = false) => {
119 | if (includeTimestamps) {
120 | return storeHistory[storeHistory.length - 1];
121 | }
122 | else {
123 | return Object.values(storeHistory[storeHistory.length - 1])[0];
124 | }
125 | };
126 |
127 | export {
128 | initializeState,
129 | getCurrentStores,
130 | getSnapshotbyTimestamp,
131 | setAppState,
132 | resubscribe,
133 | unsubscribe,
134 | handleStoreChange
135 | };
136 |
--------------------------------------------------------------------------------
/colada-plugin/src/ColadaDevToolsPlugin/timeline.ts:
--------------------------------------------------------------------------------
1 | import {
2 | getSnapshotbyTimestamp,
3 | setAppState
4 | } from './stateHandler';
5 |
6 | const handleInspectTimelineEvent = (payload: any): void => {
7 | if (payload.layerId === 'colada-plugin') {
8 | const selectedEventTimestamp: number = payload.event.time;
9 | setAppState(getSnapshotbyTimestamp(selectedEventTimestamp));
10 | return;
11 | }
12 | };
13 |
14 | export { handleInspectTimelineEvent };
15 |
--------------------------------------------------------------------------------
/colada-plugin/src/PiniaColadaPlugin/index.ts:
--------------------------------------------------------------------------------
1 | import { ProxyObject } from '../types';
2 |
3 | declare const window: any;
4 |
5 | const unsubscribeMethods: Array<() => void> = [];
6 | const stores: Array