Merge branch 'main' into feat/devtools-client-poc

Author: AlemTuzlak

.github/pull_request_template.md

@@ -0,0 +1,13 @@
+## 🎯 Changes
+
+<!-- What changes are made in this PR? Describe the change and its motivation. -->
+
+## ✅ Checklist
+
+- [ ] I have followed the steps in the [Contributing guide](https://github.com/TanStack/config/blob/main/CONTRIBUTING.md).
+- [ ] I have tested this code locally with `pnpm test:pr`.
+
+## 🚀 Release Impact
+
+- [ ] This change affects published code, and I have generated a [changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).
+- [ ] This change is docs/CI/dev-only (no release).

.github/workflows/autofix.yml

@@ -18,14 +18,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
       - name: Setup Tools
         uses: tanstack/config/.github/setup@main
       - name: Fix formatting
         run: pnpm prettier:write
       # - name: Regenerate docs
       #   run: pnpm docs:generate
       - name: Apply fixes
-        uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef
+        uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27
         with:
           commit-message: 'ci: apply automated fixes'

.github/workflows/pr.yml

@@ -23,13 +23,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
         with:
           fetch-depth: 0
       - name: Setup Tools
         uses: tanstack/config/.github/setup@main
       - name: Get base and head commits for `nx affected`
-        uses: nrwl/nx-set-shas@v4.3.0
+        uses: nrwl/nx-set-shas@v4.3.3
         with:
           main-branch-name: main
       - name: Run Checks
@@ -39,7 +39,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
         with:
           fetch-depth: 0
       - name: Setup Tools
@@ -48,3 +48,15 @@ jobs:
         run: pnpm run build:all
       - name: Publish Previews
         run: pnpx pkg-pr-new publish --pnpm './packages/*' --template './examples/*/*'
+  provenance:
+    name: Provenance
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5.0.0
+        with:
+          fetch-depth: 0
+      - name: Check Provenance
+        uses: danielroe/provenance-action@v0.1.1
+        with:
+          fail-on-downgrade: true

.github/workflows/release.yml

@@ -23,15 +23,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
         with:
           fetch-depth: 0
       - name: Setup Tools
         uses: tanstack/config/.github/setup@main
       - name: Run Tests
         run: pnpm run test:ci
       - name: Run Changesets (version or publish)
-        uses: changesets/action@v1.4.9
+        uses: changesets/action@v1.5.3
         with:
           version: pnpm run changeset:version
           publish: pnpm run changeset:publish

.gitignore

@@ -37,6 +37,7 @@ stats.html
 .vscode/settings.json
 .idea
 
+
 *.log
 .DS_Store
 .cache
@@ -56,4 +57,5 @@ vite.config.ts.timestamp-*
 
 .angular
 .nitro
-.sonda
+.sonda
+ 

.npmrc

@@ -1,3 +1 @@
-link-workspace-packages=true
-prefer-workspace-packages=true
 provenance=true

.nvmrc

@@ -1 +1 @@
-22.12.0
+24.8.0

docs/configuration.md

@@ -106,7 +106,7 @@ createRoot(document.getElementById('root')!).render(
     <App />
 
     <TanStackDevtools
-      config={{ hideUntilHover: true,  }}
+      config={{ hideUntilHover: true }}
       eventBusConfig={{ debug: true }}
       plugins={[
         {

docs/framework/react/guides/custom-plugins.md

@@ -14,18 +14,18 @@ This is our library code:
 counter.ts
 ```tsx
 export function createCounter() {
-  let count = 0;
-  const history = [];
+  let count = 0
+  const history = []
 
   return {
     getCount: () => count,
     increment: () => {
-      history.push(count);
-      count++;
+      count++
+      history.push(count)
     },
     decrement: () => {
-      history.push(count);
-      count--;
+      count--
+      history.push(count)
     },
   };
 }
@@ -49,11 +49,11 @@ import { EventClient } from '@tanstack/devtools-event-client'
 type EventMap = {
   // The key of the event map is a combination of {pluginId}:{eventSuffix}
   // The value is the expected type of the event payload
-  'custom-devtools:counter-state': { count: number, history: number[], }
+  'custom-devtools:counter-state': { count: number, history: number[] }
 }
 
 class CustomEventClient extends EventClient<EventMap> {
-constructor() {
+  constructor() {
     super({
       // The pluginId must match that of the event map key
       pluginId: 'custom-devtools',
@@ -82,20 +82,22 @@ export function createCounter() {
   return {
     getCount: () => count,
     increment: () => {
+      count++
       history.push(count)
 
       // The emit eventSuffix must match that of the EventMap defined in eventClient.ts
       DevtoolsEventClient.emit('counter-state', {
-        count: count++,
-        history: history,
+        count,
+        history,
       })
     },
     decrement: () => {
+      count--
       history.push(count)
 
       DevtoolsEventClient.emit('counter-state', {
-        count: count--,
-        history: history,
+        count,
+        history,
       })
     },
   }
@@ -115,19 +117,19 @@ DevtoolsPanel.ts
 import { DevtoolsEventClient } from './eventClient.ts'
 
 export function DevtoolPanel() {
-  const [state,setState] = useState();
+  const [state, setState] = useState()
 
   useEffect(() => {
     // subscribe to the emitted event
-    const cleanup = client.on("counter-state", e => setState(e.payload)
+    const cleanup = DevtoolsEventClient.on("counter-state", e => setState(e.payload))
     return cleanup
-  }, []);
+  }, [])
 
   return (
     <div>
       <div>{state.count}</div>
       <div>{JSON.stringify(state.history)}</div>
-    <div/>
+    </div>
   )
 }
 ```
@@ -160,7 +162,7 @@ createRoot(document.getElementById('root')!).render(
 
 ## Debugging
 
-Both the TansTack `TanStackDevtools` component and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
+Both the `TanStackDevtools` component and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
 
 TanStackDevtool's debugging mode can be activated like so:
 ```tsx

docs/framework/solid/basic-setup.md

@@ -65,7 +65,7 @@ render(() => (
       ]}
     />
   </>
-), document.getElementById('root')!);
+), document.getElementById('root')!)
 ```
 
 Finally add any additional configuration you desire to the `TanStackDevtools` component, more information can be found under the [TanStack Devtools Configuration](../../../configuration.md) section.