feat: add angular devtools support and fix core devtools reactivity#6248
feat: add angular devtools support and fix core devtools reactivity#6248riccardoperra wants to merge 6 commits into
Conversation
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
riccardoperra
changed the title
|
View your CI Pipeline Execution ↗ for commit cd854d6
☁️ Nx Cloud last updated this comment at |
![nx-cloud[bot]](https://avatars.githubusercontent.com/in/80458?s=60&v=4){kind=small}
There was a problem hiding this comment.
Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud is proposing a fix for your failed CI:
We resolved two CI failures introduced by the angular devtools integration. The sherif failure was fixed by reordering dependencies alphabetically in the composable-tables example, and the knip failures were fixed by removing the unused @tanstack/angular-devtools dependency from the package, adding the missing tslib dependency required by importHelpers, and removing the export keyword from the internal-only generateId function.
Tip
✅ We verified this fix by re-running table:test:sherif, table:test:knip.
Suggested Fix changes
diff --git a/examples/angular/composable-tables/package.json b/examples/angular/composable-tables/package.json
index 2663831d..3d441290 100644
--- a/examples/angular/composable-tables/package.json
+++ b/examples/angular/composable-tables/package.json
@@ -19,8 +19,8 @@
"@angular/router": "^21.2.11",
"@faker-js/faker": "^10.4.0",
"@tanstack/angular-devtools": "https://pkg.pr.new/TanStack/devtools/@tanstack/angular-devtools@368",
- "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"@tanstack/angular-table": "^9.0.0-alpha.45",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/packages/angular-table-devtools/package.json b/packages/angular-table-devtools/package.json
index 7bf1bf22..2df42e78 100644
--- a/packages/angular-table-devtools/package.json
+++ b/packages/angular-table-devtools/package.json
@@ -44,10 +44,10 @@
"src"
],
"dependencies": {
- "@tanstack/angular-devtools": "https://pkg.pr.new/TanStack/devtools/@tanstack/angular-devtools@368",
"@tanstack/devtools-utils": "https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-utils@368",
"@tanstack/table-core": "workspace:*",
- "@tanstack/table-devtools": "workspace:*"
+ "@tanstack/table-devtools": "workspace:*",
+ "tslib": "^2.8.1"
},
"peerDependencies": {
"@angular/core": ">=21.0.0"
diff --git a/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts b/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts
index 40303e30..e769ae3b 100644
--- a/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts
+++ b/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts
@@ -24,7 +24,7 @@ function normalizeName(name?: string) {
}
let autoId = 0
-export function generateId(): string {
+function generateId(): string {
const appId = inject(APP_ID)
return `tanstacktable-${appId}_${autoId++}${Date.now().toString(36)}`
}
Or Apply changes locally with:
npx nx-cloud apply-locally DsIG-vU7o
Apply fix locally with your editor ↗ View interactive diff ↗
🎓 Learn more about Self-Healing CI on nx.dev
riccardoperra
force-pushed
the
feat/angular-devtools
branch
2 times, most recently
from
9a3e490 to
d397a99
Compare
riccardoperra
changed the title
riccardoperra
force-pushed
the
feat/angular-devtools
branch
2 times, most recently
from
5b002f3 to
926dcf9
Compare
riccardoperra
changed the title
riccardoperra
force-pushed
the
feat/angular-devtools
branch
from
17bc739 to
cd854d6
Compare
Refactor devtools panel with a more solid-idiomatic approach, using memo and dynamic `useTableState` subscription via Accessor getter to not break reactivity.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
riccardoperra
force-pushed
the
feat/angular-devtools
branch
from
2967e10 to
20b40f9
Compare
riccardoperra
force-pushed
the
feat/angular-devtools
branch
from
20b40f9 to
bdd89ba
Compare
| @@ -137,6 +141,12 @@ export function useTable< | |||
| tableOptions: TableOptions<TFeatures, TData>, | |||
| selector?: (state: TableState<TFeatures>) => TSelected, | |||
| ): ReactTable<TFeatures, TData, TSelected> { | |||
| const instanceIdRef = useRef<string | undefined>(undefined) | |||
| const id = useId() | |||
There was a problem hiding this comment.
this technically makes this a React 18+ package now. We could just require an id/key table option in order for devtools to work, and then remove the 2nd arg from useTanStackTableDevtools(table)
There was a problem hiding this comment.
What about removing entirely useId 🤔 ? There is still the generation logic provided next. it was just added as a prefix but probably unnecessary
- const id = useId()
if (!instanceIdRef.current) {
// eslint-disable-next-line @eslint-react/purity
- instanceIdRef.current = `${id}-${Math.random().toString(36).slice(2, 9)}`
+ instanceIdRef.current = Math.random().toString(36).slice(2, 9);
}2 participants
TanStack Devtools Angular package is not published yet in npm