oslabs-beta / colada Goto Github PK

View Code? Open in Web Editor NEW

98.0 4.0 14.0 889 KB

Time-travel debugging for Pinia, Vue's official state management library.

Home Page: https://colada.dev/

License: MIT License

JavaScript 19.84% CSS 5.16% HTML 2.11% Shell 0.14% Vue 38.74% TypeScript 23.08% SCSS 10.93%

chrome-extension devtools pinia pinia-plugin vue vuejs vuejs-plugin

colada's Introduction

What is Colada?

Time-travel debugging for Pinia🍍, Vue's official state management library

Colada offers a suite of tools for Vue developers working with the Pinia state management library:

Chrome DevTool Extension
NPM package that serves as a plugin for the Vue.js DevTools Chrome Extension
Pinia🍍 plugin to directly access and mutate your app's store

Core Features

✅ Minimal installation and automatic detection of Vue app in Vue.js DevTools
🔄 Direct integration into Vue.js DevTools, so developers can use Colada without leaving their existing devtool configuration
- 🕰️ Time travel debugging
- 🔎 Inspector panel for viewing Pinia state within your Vue app
💻 A Chrome DevTool Extension providing enhanced features, including:
- 🕰️ Time travel debugging
- 🔎 Inspector panel for viewing Pinia state within your Vue app

Getting Started

Installation: Vue DevTools Plugin

Ensure the Vue.js DevTools Chrome Extension is installed
Install the Colada npm package in your app's root directory

npm install colada-plugin --save-dev

Add Colada to your Vue app

// main.js

import { createApp } from 'vue';
import { createPinia } from 'pinia';
// import Colada Plugin
import Colada, { PiniaColadaPlugin } from 'colada-plugin';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
pinia.use(PiniaColadaPlugin);
app.use(Colada);

app.mount('#app');

Installation: Chrome DevTools Extension

NOTE: Ensure the Vue.js DevTools Chrome Extension is installed before installing the Colada DevTool Chrome Extension

There are two ways to install the Colada Chrome Extension:

1. Install from the Chrome Web Store

Navigate to Colada on the Chrome Web Store, and click "Add to Chrome"

2. Install from source

Clone this repository
Run the following commands

cd colada-extension
npm install
npm run build

This will create a new /dist directory in /colada-extension
In Chrome, navigate to chrome://extensions.
In the top right of the Extensions page, there is a toggle for "Developer Mode." Make sure this is toggled ON.
On the top left of the page, select "Load Unpacked", and select the colada/colada-extension/dist directory.

How to Use Colada

Using the Colada Vue DevTools Plugin

Navigate to the Vue.js DevTools

Time Travel Debugging

Select the "Colada" timeline in the timeline view
Turn off screenshots

- Changes in your app's store and state will automatically be tracked on the timeline - Click on timeline events to travel through time and update your app's state

Inspector Panel - View Your App's Stores and State in Real Time

Select "Colada" in the component menu drop down
Click on your Pinia store to view state, actions, and getters updated in real time

Using the Colada Chrome DevTool Extension

Navigate to Colada DevTools in Chrome

Changes in your app's store and state will automatically be tracked on the timeline
Click on a timestamp or use the arrows to travel through time and update your app's state
View your app's state as you time travel in the inspector panel on the right

How to Give Colada a Test Run With Our Demo App

Clone this repository
Navigate to the demo-project directory

cd demo-project

Install packages and run application

npm install
npm run dev

Interact with the app to watch the app's state update in real-time!

Contributing and Issues

Interested in conributing to Colada? Reach out to our core team
Feature requests or issues/bugs to report? Let us know!

Release Notes

Contributors

Parker Steinberg • LinkedIn • Github
Jonathan Chen • LinkedIn • Github
Vaughn Sulit • LinkedIn • Github
Dan Steinbrook • LinkedIn • Github

0.1.1 | Initial release of Colada, more to come!

License

MIT

colada's People

Stargazers

Watchers

Forkers

jonhpc bvaughnsulit parkersteinberg jhpaige matthewmpan mcphail-alex jakejurado chancellorkupersmith krisette codedenma interim17 richard-roberts kels-graner zhangchen91

colada's Issues

when I you use composition api code approach in store it doesn't display any data

`import { defineStore } from "pinia";
import { computed, ref } from "vue";

export const useFormsStore = defineStore({
id: "forms-store",
state: () => {
//properties
const forms = ref();
const filters = ref();
const errors = ref({});
......`

Can't run the plugin due to TypeError: Cannot convert undefined or null to object

Thank you for this tool, it's been sorely needed. 🙏 I'm having trouble getting it to run though, maybe you could help?

I've implemented Colada in my Nuxt 3 app like this:

import Colada, { PiniaColadaPlugin } from 'colada-plugin'

export default defineNuxtPlugin((nuxtApp) => {
  useNuxtApp().$pinia.use(PiniaColadaPlugin)
  nuxtApp.vueApp.use(Colada)
})

Then with the browser extension installed I go into my app and switch to the Colada tab in Vue Dev Tools. It doesn't load at all and I get this set of errors at least twice:

An error occurred in hook 'getInspectorTree' registered by plugin 'colada-plugin' with payload:

TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at getCurrentStores (colada-plugin.esm-browser.js:2870:23)
    at addPiniaStoreLabels (colada-plugin.esm-browser.js:2877:27)
    at colada-plugin.esm-browser.js:3049:17
    at handler (backend.js:725:16)
    at DevtoolsHookable.callHandlers (backend.js:746:17)
    at DevtoolsApi.callHook (backend.js:230:26)
    at async DevtoolsApi.getInspectorTree (backend.js:433:21)
    at async sendInspectorTree (backend.js:2633:21)

Issue with composition api pinia pattern

Hello, first of all congrats, Colada is a fantastic tool.

I've found one issue regarding colada plugin, it throws an error RangeError: Maximum call stack size exceeded when I use composition api pattern.

You can check this issue here: https://gitlab.com/lukasz95/vite-pinia-counter

Navigate to the src/stores/counter.js file, here you can see I'm using composition api pattern and it seems it's not compatible with Colada.

Other than that tool works very well :)

Cheers

'Uncaught SyntaxError: Unexpected end of JSON input' upon installing Colada

Issue

After following the install instructions to add Colada to our project, running the web application results in two JSON parse errors, as shown below:

VM290:1 Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at colada-plugin.esm-browser.js:2985:1

VM292:1 Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at saveMessage (content-script.js:3:58)

Steps to reproduce

Add Pinia to the project, and start setting up reactive stores.
No issues so far.
Follow instructions at https://colada.dev/#install to add Colada.
Load the app in browser (Chrome 117.0.5938.62).
Check Dev Console. Issues displayed as detailed above.

Steps tried so far:

At first, I thought it was linked to the Pinia store code, and maybe there was an issue there, but I went through the code and commented out all references and imports for the reactive stores. So now all that remains is the init code for Pinia and Colada (the app.use etc).

Versions:

vue: 3.3.4
pinia: 2.1.6
colada-plugin: 0.1.0