Skip to content

Commit 773c1b8

Browse files
harry-whorlowharry-whorlow
authored
fix(core, devtools): ssr, dayjs, uuid, version bump patch (#1747)
1 parent 891b7d2 commit 773c1b8

File tree

11 files changed

+154
-93
lines changed

11 files changed

+154
-93
lines changed

‎.changeset/chatty-cooks-buy.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@tanstack/form-core': minor
3+
'@tanstack/react-form-devtools': minor
4+
'@tanstack/form-devtools': minor
5+
---
6+
7+
ssr, dayjs, uuid, version bump patch

‎examples/react/devtools/src/index.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,6 @@ createRoot(document.getElementById('root')!).render(
1010
<StrictMode>
1111
<App />
1212

13-
<TanStackDevtools
14-
config={{ hideUntilHover: true }}
15-
plugins={[FormDevtoolsPlugin()]}
16-
/>
13+
<TanStackDevtools plugins={[FormDevtoolsPlugin()]} />
1714
</StrictMode>,
1815
)

‎examples/react/tanstack-start/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
"start": "node .output/server/index.mjs"
1010
},
1111
"dependencies": {
12+
"@tanstack/react-devtools": "^0.6.4",
1213
"@tanstack/react-form": "^1.21.1",
14+
"@tanstack/react-form-devtools": "^0.0.2",
1315
"@tanstack/react-router": "^1.131.41",
1416
"@tanstack/react-start": "^1.131.43",
1517
"@tanstack/react-store": "^0.7.5",

‎examples/react/tanstack-start/src/routes/__root.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
22

3+
import { TanStackDevtools } from '@tanstack/react-devtools'
4+
import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
5+
36
export const Route = createRootRoute({
47
head: () => ({
58
meta: [
@@ -27,6 +30,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
2730
<body>
2831
{children}
2932
<Scripts />
33+
<TanStackDevtools plugins={[FormDevtoolsPlugin()]} />
3034
</body>
3135
</html>
3236
)

‎packages/form-core/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,9 @@
5151
"src"
5252
],
5353
"dependencies": {
54-
"@tanstack/devtools-event-client": "^0.2.4",
55-
"@tanstack/store": "^0.7.5"
54+
"@tanstack/devtools-event-client": "^0.2.5",
55+
"@tanstack/store": "^0.7.5",
56+
"uuid": "^13.0.0"
5657
},
5758
"devDependencies": {
5859
"arktype": "^2.1.22",

‎packages/form-core/src/FormApi.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Derived, Store, batch } from '@tanstack/store'
2+
import { v4 as uuidv4 } from 'uuid'
23
import {
34
deleteBy,
45
determineFormLevelErrorSourceAndValue,
@@ -999,7 +1000,7 @@ export class FormApi<
9991000
formListeners: {} as Record<ListenerCause, never>,
10001001
}
10011002

1002-
this._formId = opts?.formId ?? crypto.randomUUID()
1003+
this._formId = opts?.formId ?? uuidv4()
10031004

10041005
this._devtoolsSubmissionOverride = false
10051006

‎packages/form-devtools/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"src"
5353
],
5454
"dependencies": {
55-
"@tanstack/devtools-ui": "^0.3.4",
55+
"@tanstack/devtools-ui": "^0.3.5",
5656
"@tanstack/form-core": "workspace:*",
5757
"clsx": "^2.1.1",
5858
"dayjs": "^1.11.13",

‎packages/form-devtools/src/components/StateHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import dayjs from 'dayjs'
2-
import relativeTime from 'dayjs/plugin/relativeTime'
2+
import relativeTime from 'dayjs/plugin/relativeTime.js'
33
import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'
44

55
import { useStyles } from '../styles/use-styles'

‎packages/react-form-devtools/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@
3838
"default": "./dist/esm/index.js"
3939
}
4040
},
41+
"./production": {
42+
"import": {
43+
"types": "./dist/esm/production.d.ts",
44+
"default": "./dist/esm/production.js"
45+
}
46+
},
4147
"./package.json": "./package.json"
4248
},
4349
"sideEffects": false,

‎packages/react-form-devtools/src/FormDevtools.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
1-
import { FormDevtoolsCore } from '@tanstack/form-devtools'
2-
import { useEffect, useRef, useState } from 'react'
1+
import { useEffect, useRef } from 'react'
2+
3+
import type { FormDevtoolsCore } from '@tanstack/form-devtools'
34

45
export interface FormDevtoolsReactInit {
56
theme?: 'light' | 'dark'
67
}
78

89
export const FormDevtools = (props?: FormDevtoolsReactInit) => {
910
const devToolRef = useRef<HTMLDivElement>(null)
10-
const [devtools] = useState(() => new FormDevtoolsCore({}))
11+
const devtools = useRef<InstanceType<typeof FormDevtoolsCore> | null>(null)
1112

1213
useEffect(() => {
13-
if (devToolRef.current) {
14-
devtools.mount(devToolRef.current, props?.theme ?? 'dark')
15-
}
14+
if (devtools.current) return
15+
16+
import('@tanstack/form-devtools').then(({ FormDevtoolsCore }) => {
17+
devtools.current = new FormDevtoolsCore()
1618

17-
return () => devtools.unmount()
18-
}, [devtools, props?.theme])
19+
if (devToolRef.current) {
20+
devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
21+
}
22+
})
23+
24+
return () => {
25+
devtools.current?.unmount()
26+
}
27+
}, [props?.theme])
1928

2029
return <div style={{ height: '100%' }} ref={devToolRef} />
2130
}

0 commit comments

Comments
 (0)