node_modules/pinia/dist/pinia.iife.js
/**
   * Add the pinia plugin without any store. Allows displaying a Pinia plugin tab
   * as soon as it is added to the application.
   *
   * @param app - Vue application
   * @param pinia - pinia instance
   */
Add the pinia plugin without any store. Allows displaying a Pinia plugin tab
as soon as it is added to the application.

@param app - Vue application
@param pinia - pinia instance
Add the pinia plugin without any store . Allows displaying a Pinia plugin tab as soon as it is added to the application . @param app - Vue application @param pinia - pinia instance
function registerPiniaDevtools(app, pinia) {
      setupDevtoolsPlugin({
          id: 'dev.esm.pinia',
          label: 'Pinia 🍍',
          logo: 'https://pinia.vuejs.org/logo.svg',
          packageName: 'pinia',
          homepage: 'https://pinia.vuejs.org',
          componentStateTypes,
          app,
      }, (api) => {
          if (typeof api.now !== 'function') {
              toastMessage('You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html.');
          }
          api.addTimelineLayer({
              id: MUTATIONS_LAYER_ID,
              label: `Pinia 🍍`,
              color: 0xe5df88,
          });
          api.addInspector({
              id: INSPECTOR_ID,
              label: 'Pinia 🍍',
              icon: 'storage',
              treeFilterPlaceholder: 'Search stores',
              actions: [
                  {
                      icon: 'content_copy',
                      action: () => {
                          actionGlobalCopyState(pinia);
                      },
                      tooltip: 'Serialize and copy the state',
                  },
                  {
                      icon: 'content_paste',
                      action: async () => {
                          await actionGlobalPasteState(pinia);
                          api.sendInspectorTree(INSPECTOR_ID);
                          api.sendInspectorState(INSPECTOR_ID);
                      },
                      tooltip: 'Replace the state with the content of your clipboard',
                  },
                  {
                      icon: 'save',
                      action: () => {
                          actionGlobalSaveState(pinia);
                      },
                      tooltip: 'Save the state as a JSON file',
                  },
                  {
                      icon: 'folder_open',
                      action: async () => {
                          await actionGlobalOpenStateFile(pinia);
                          api.sendInspectorTree(INSPECTOR_ID);
                          api.sendInspectorState(INSPECTOR_ID);
                      },
                      tooltip: 'Import the state from a JSON file',
                  },
              ],
          });
          api.on.inspectComponent((payload, ctx) => {
              const proxy = (payload.componentInstance &&
                  payload.componentInstance.proxy);
              if (proxy && proxy._pStores) {
                  const piniaStores = payload.componentInstance.proxy._pStores;
                  Object.values(piniaStores).forEach((store) => {
                      payload.instanceData.state.push({
                          type: getStoreType(store.$id),
                          key: 'state',
                          editable: true,
                          value: store._isOptionsAPI
                              ? {
                                  _custom: {
                                      value: store.$state,
                                      actions: [
                                          {
                                              icon: 'restore',
                                              tooltip: 'Reset the state of this store',
                                              action: () => store.$reset(),
                                          },
                                      ],
                                  },
                              }
                              : store.$state,
                      });
                      if (store._getters && store._getters.length) {
                          payload.instanceData.state.push({
                              type: getStoreType(store.$id),
                              key: 'getters',
                              editable: false,
                              value: store._getters.reduce((getters, key) => {
                                  try {
                                      getters[key] = store[key];
                                  }
                                  catch (error) {
                                      getters[key] = error;
                                  }
                                  return getters;
                              }, {}),
                          });
                      }
                  });
              }
          });
          api.on.getInspectorTree((payload) => {
              if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
                  let stores = [pinia];
                  stores = stores.concat(Array.from(pinia._s.values()));
                  payload.rootNodes = (payload.filter
                      ? stores.filter((store) => '$id' in store
                          ? store.$id
                              .toLowerCase()
                              .includes(payload.filter.toLowerCase())
                          : PINIA_ROOT_LABEL.toLowerCase().includes(payload.filter.toLowerCase()))
                      : stores).map(formatStoreForInspectorTree);
              }
          });
          api.on.getInspectorState((payload) => {
              if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
                  const inspectedStore = payload.nodeId === PINIA_ROOT_ID
                      ? pinia
                      : pinia._s.get(payload.nodeId);
                  if (!inspectedStore) {
                      return;
                  }
                  if (inspectedStore) {
                      payload.state = formatStoreForInspectorState(inspectedStore);
                  }
              }
          });
          api.on.editInspectorState((payload, ctx) => {
              if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
                  const inspectedStore = payload.nodeId === PINIA_ROOT_ID
                      ? pinia
                      : pinia._s.get(payload.nodeId);
                  if (!inspectedStore) {
                      return toastMessage(`store "${payload.nodeId}" not found`, 'error');
                  }
                  const { path } = payload;
                  if (!isPinia(inspectedStore)) {
                      if (path.length !== 1 ||
                          !inspectedStore._customProperties.has(path[0]) ||
                          path[0] in inspectedStore.$state) {
                          path.unshift('$state');
                      }
                  }
                  else {
                      path.unshift('state');
                  }
                  isTimelineActive = false;
                  payload.set(inspectedStore, path, payload.state.value);
                  isTimelineActive = true;
              }
          });
          api.on.editComponentState((payload) => {
              if (payload.type.startsWith('🍍')) {
                  const storeId = payload.type.replace(/^🍍\s*/, '');
                  const store = pinia._s.get(storeId);
                  if (!store) {
                      return toastMessage(`store "${storeId}" not found`, 'error');
                  }
                  const { path } = payload;
                  if (path[0] !== 'state') {
                      return toastMessage(`Invalid path for store "${storeId}":\n${path}\nOnly state can be modified.`);
                  }
                  path[0] = '$state';
                  isTimelineActive = false;
                  payload.set(store, path, payload.state.value);
                  isTimelineActive = true;
              }
          });
      });
  }
function registerPiniaDevtools ( app , pinia ) { setupDevtoolsPlugin ( { id : 'dev.esm.pinia' , label : 'Pinia 🍍', logo : 'https://pinia.vuejs.org/logo.svg' , packageName : 'pinia' , homepage : 'https://pinia.vuejs.org' , componentStateTypes , app , } , ( api ) => { if ( typeof api . now !== 'function' ) { toastMessage ( 'You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html.' ) ; } api . addTimelineLayer ( { id : MUTATIONS_LAYER_ID , label : ` color : 0xe5df88 , } ) ; api . addInspector ( { id : INSPECTOR_ID , label : 'Pinia 🍍', icon : 'storage' , treeFilterPlaceholder : 'Search stores' , actions : [ { icon : 'content_copy' , action : ( ) => { actionGlobalCopyState ( pinia ) ; } , tooltip : 'Serialize and copy the state' , } , { icon : 'content_paste' , action : async ( ) => { await actionGlobalPasteState ( pinia ) ; api . sendInspectorTree ( INSPECTOR_ID ) ; api . sendInspectorState ( INSPECTOR_ID ) ; } , tooltip : 'Replace the state with the content of your clipboard' , } , { icon : 'save' , action : ( ) => { actionGlobalSaveState ( pinia ) ; } , tooltip : 'Save the state as a JSON file' , } , { icon : 'folder_open' , action : async ( ) => { await actionGlobalOpenStateFile ( pinia ) ; api . sendInspectorTree ( INSPECTOR_ID ) ; api . sendInspectorState ( INSPECTOR_ID ) ; } , tooltip : 'Import the state from a JSON file' , } , ] , } ) ; api . on . inspectComponent ( ( payload , ctx ) => { const proxy = ( payload . componentInstance && payload . componentInstance . proxy ) ; if ( proxy && proxy . _pStores ) { const piniaStores = payload . componentInstance . proxy . _pStores ; Object . values ( piniaStores ) . forEach ( ( store ) => { payload . instanceData . state . push ( { type : getStoreType ( store . $id ) , key : 'state' , editable : true , value : store . _isOptionsAPI ? { _custom : { value : store . $state , actions : [ { icon : 'restore' , tooltip : 'Reset the state of this store' , action : ( ) => store . $reset ( ) , } , ] , } , } : store . $state , } ) ; if ( store . _getters && store . _getters . length ) { payload . instanceData . state . push ( { type : getStoreType ( store . $id ) , key : 'getters' , editable : false , value : store . _getters . reduce ( ( getters , key ) => { try { getters [ key ] = store [ key ] ; } catch ( error ) { getters [ key ] = error ; } return getters ; } , { } ) , } ) ; } } ) ; } } ) ; api . on . getInspectorTree ( ( payload ) => { if ( payload . app === app && payload . inspectorId === INSPECTOR_ID ) { let stores = [ pinia ] ; stores = stores . concat ( Array . from ( pinia . _s . values ( ) ) ) ; payload . rootNodes = ( payload . filter ? stores . filter ( ( store ) => '$id' in store ? store . $id . toLowerCase ( ) . includes ( payload . filter . toLowerCase ( ) ) : PINIA_ROOT_LABEL . toLowerCase ( ) . includes ( payload . filter . toLowerCase ( ) ) ) : stores ) . map ( formatStoreForInspectorTree ) ; } } ) ; api . on . getInspectorState ( ( payload ) => { if ( payload . app === app && payload . inspectorId === INSPECTOR_ID ) { const inspectedStore = payload . nodeId === PINIA_ROOT_ID ? pinia : pinia . _s . get ( payload . nodeId ) ; if ( ! inspectedStore ) { return ; } if ( inspectedStore ) { payload . state = formatStoreForInspectorState ( inspectedStore ) ; } } } ) ; api . on . editInspectorState ( ( payload , ctx ) => { if ( payload . app === app && payload . inspectorId === INSPECTOR_ID ) { const inspectedStore = payload . nodeId === PINIA_ROOT_ID ? pinia : pinia . _s . get ( payload . nodeId ) ; if ( ! inspectedStore ) { return toastMessage ( ` ${ payload . nodeId } ` , 'error' ) ; } const { path } = payload ; if ( ! isPinia ( inspectedStore ) ) { if ( path . length !== 1 || ! inspectedStore . _customProperties . has ( path [ 0 ] ) || path [ 0 ] in inspectedStore . $state ) { path . unshift ( '$state' ) ; } } else { path . unshift ( 'state' ) ; } isTimelineActive = false ; payload . set ( inspectedStore , path , payload . state . value ) ; isTimelineActive = true ; } } ) ; api . on . editComponentState ( ( payload ) => { if ( payload . type . startsWith ( '🍍'))  { const storeId = payload . type . replace ( / ^🍍\s*/,  ' ' ; const store = pinia . _s . get ( storeId ) ; if ( ! store ) { return toastMessage ( ` ${ storeId } ` , 'error' ) ; } const { path } = payload ; if ( path [ 0 ] !== 'state' ) { return toastMessage ( ` ${ storeId } \n ${ path } \n ` ) ; } path [ 0 ] = '$state' ; isTimelineActive = false ; payload . set ( store , path , payload . state . value ) ; isTimelineActive = true ; } } ) ; } ) ; }
Add the pinia plugin without any store.
Add the pinia plugin without any store .
// @ts-expect-error: we just want to show it in devtools // this could be the selected store restored for a different project // so it's better not to say anything here // access only the state // Root access, we can omit the `.value` because the devtools API does it for us // rewrite the first entry to be able to directly set the state as // well as any other path