@pyreon/solid-compat 0.11.5 → 0.11.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -15
- package/lib/index.js.map +1 -1
- package/lib/jsx-runtime.js.map +1 -1
- package/package.json +13 -13
- package/src/index.ts +8 -8
- package/src/jsx-dev-runtime.ts +1 -1
- package/src/jsx-runtime.ts +8 -8
- package/src/tests/repro.test.ts +50 -50
- package/src/tests/setup.ts +1 -1
- package/src/tests/solid-compat.test.ts +121 -121
package/src/tests/repro.test.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import type { ComponentFn } from
|
|
2
|
-
import { ErrorBoundary as CoreEB, Show as CoreShow, Suspense as CoreSuspense } from
|
|
3
|
-
import { mount } from
|
|
4
|
-
import { children, createSignal, ErrorBoundary, onCleanup, onMount, Show, Suspense } from
|
|
5
|
-
import { jsx } from
|
|
6
|
-
|
|
7
|
-
describe(
|
|
8
|
-
it(
|
|
1
|
+
import type { ComponentFn } from '@pyreon/core'
|
|
2
|
+
import { ErrorBoundary as CoreEB, Show as CoreShow, Suspense as CoreSuspense } from '@pyreon/core'
|
|
3
|
+
import { mount } from '@pyreon/runtime-dom'
|
|
4
|
+
import { children, createSignal, ErrorBoundary, onCleanup, onMount, Show, Suspense } from '../index'
|
|
5
|
+
import { jsx } from '../jsx-runtime'
|
|
6
|
+
|
|
7
|
+
describe('DOM integration - children helper', () => {
|
|
8
|
+
it('children helper should render VNode children, not [object Object]', () => {
|
|
9
9
|
function ColoredBox(props: { color: string; children?: any }) {
|
|
10
10
|
const resolved = children(() => props.children)
|
|
11
|
-
return jsx(
|
|
11
|
+
return jsx('div', {
|
|
12
12
|
style: `border: 2px solid ${props.color}`,
|
|
13
13
|
children: resolved(),
|
|
14
14
|
})
|
|
@@ -16,69 +16,69 @@ describe("DOM integration - children helper", () => {
|
|
|
16
16
|
|
|
17
17
|
function App() {
|
|
18
18
|
return jsx(ColoredBox as ComponentFn, {
|
|
19
|
-
color:
|
|
20
|
-
children: jsx(
|
|
19
|
+
color: 'blue',
|
|
20
|
+
children: jsx('p', { children: 'Hello' }),
|
|
21
21
|
})
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
const container = document.createElement(
|
|
24
|
+
const container = document.createElement('div')
|
|
25
25
|
mount(jsx(App, {}), container)
|
|
26
26
|
|
|
27
|
-
expect(container.innerHTML).not.toContain(
|
|
28
|
-
expect(container.innerHTML).toContain(
|
|
27
|
+
expect(container.innerHTML).not.toContain('[object Object]')
|
|
28
|
+
expect(container.innerHTML).toContain('<p>Hello</p>')
|
|
29
29
|
})
|
|
30
30
|
|
|
31
|
-
it(
|
|
31
|
+
it('simple compat component renders children correctly', () => {
|
|
32
32
|
function Wrapper(props: { children?: any }) {
|
|
33
|
-
return jsx(
|
|
33
|
+
return jsx('div', { class: 'wrapper', children: props.children })
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
function App() {
|
|
37
37
|
return jsx(Wrapper as ComponentFn, {
|
|
38
|
-
children: jsx(
|
|
38
|
+
children: jsx('span', { children: 'inner' }),
|
|
39
39
|
})
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
const container = document.createElement(
|
|
42
|
+
const container = document.createElement('div')
|
|
43
43
|
mount(jsx(App, {}), container)
|
|
44
44
|
|
|
45
|
-
expect(container.innerHTML).not.toContain(
|
|
46
|
-
expect(container.innerHTML).toContain(
|
|
45
|
+
expect(container.innerHTML).not.toContain('[object Object]')
|
|
46
|
+
expect(container.innerHTML).toContain('<span>inner</span>')
|
|
47
47
|
})
|
|
48
48
|
|
|
49
|
-
it(
|
|
49
|
+
it('re-exported Show/Suspense/ErrorBoundary are same references as core', () => {
|
|
50
50
|
expect(Show).toBe(CoreShow)
|
|
51
51
|
expect(Suspense).toBe(CoreSuspense)
|
|
52
52
|
expect(ErrorBoundary).toBe(CoreEB)
|
|
53
53
|
})
|
|
54
54
|
|
|
55
|
-
it(
|
|
55
|
+
it('Show from solid-compat works through compat jsx runtime', () => {
|
|
56
56
|
const [visible] = createSignal(true)
|
|
57
57
|
|
|
58
58
|
function App() {
|
|
59
59
|
return jsx(Show as ComponentFn, {
|
|
60
60
|
when: visible,
|
|
61
|
-
children: jsx(
|
|
61
|
+
children: jsx('p', { children: 'visible!' }),
|
|
62
62
|
})
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
const container = document.createElement(
|
|
65
|
+
const container = document.createElement('div')
|
|
66
66
|
mount(jsx(App, {}), container)
|
|
67
67
|
|
|
68
|
-
expect(container.innerHTML).toContain(
|
|
69
|
-
expect(container.innerHTML).not.toContain(
|
|
68
|
+
expect(container.innerHTML).toContain('visible!')
|
|
69
|
+
expect(container.innerHTML).not.toContain('[object Object]')
|
|
70
70
|
})
|
|
71
71
|
|
|
72
|
-
it(
|
|
72
|
+
it('nested compat components with children pass-through', () => {
|
|
73
73
|
function Demo(props: { title: string; children?: any }) {
|
|
74
|
-
return jsx(
|
|
75
|
-
children: [jsx(
|
|
74
|
+
return jsx('section', {
|
|
75
|
+
children: [jsx('h2', { children: props.title }), props.children],
|
|
76
76
|
})
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
function ColoredBox(props: { color: string; children?: any }) {
|
|
80
80
|
const resolved = children(() => props.children)
|
|
81
|
-
return jsx(
|
|
81
|
+
return jsx('div', {
|
|
82
82
|
style: `border: 2px solid ${props.color}`,
|
|
83
83
|
children: resolved(),
|
|
84
84
|
})
|
|
@@ -86,45 +86,45 @@ describe("DOM integration - children helper", () => {
|
|
|
86
86
|
|
|
87
87
|
function App() {
|
|
88
88
|
return jsx(Demo as ComponentFn, {
|
|
89
|
-
title:
|
|
89
|
+
title: 'Test',
|
|
90
90
|
children: jsx(ColoredBox as ComponentFn, {
|
|
91
|
-
color:
|
|
92
|
-
children: jsx(
|
|
91
|
+
color: 'blue',
|
|
92
|
+
children: jsx('p', { children: 'Hello' }),
|
|
93
93
|
}),
|
|
94
94
|
})
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
const container = document.createElement(
|
|
97
|
+
const container = document.createElement('div')
|
|
98
98
|
mount(jsx(App, {}), container)
|
|
99
99
|
|
|
100
|
-
expect(container.innerHTML).not.toContain(
|
|
101
|
-
expect(container.innerHTML).toContain(
|
|
102
|
-
expect(container.innerHTML).toContain(
|
|
100
|
+
expect(container.innerHTML).not.toContain('[object Object]')
|
|
101
|
+
expect(container.innerHTML).toContain('<p>Hello</p>')
|
|
102
|
+
expect(container.innerHTML).toContain('<h2>Test</h2>')
|
|
103
103
|
})
|
|
104
104
|
})
|
|
105
105
|
|
|
106
|
-
describe(
|
|
107
|
-
it(
|
|
106
|
+
describe('child instance preservation - no infinite re-render', () => {
|
|
107
|
+
it('onMount in child does not cause infinite loop when writing parent state', async () => {
|
|
108
108
|
let mountCount = 0
|
|
109
109
|
|
|
110
110
|
function Inner(props: { onEvent: (msg: string) => void }) {
|
|
111
111
|
onMount(() => {
|
|
112
112
|
mountCount++
|
|
113
|
-
props.onEvent(
|
|
113
|
+
props.onEvent('mounted')
|
|
114
114
|
})
|
|
115
|
-
return jsx(
|
|
115
|
+
return jsx('p', { children: 'alive' })
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
function Parent() {
|
|
119
119
|
const [_events, setEvents] = createSignal<string[]>([])
|
|
120
120
|
const addEvent = (msg: string) => setEvents((prev) => [...prev, msg])
|
|
121
121
|
|
|
122
|
-
return jsx(
|
|
122
|
+
return jsx('div', {
|
|
123
123
|
children: jsx(Inner as ComponentFn, { onEvent: addEvent }),
|
|
124
124
|
})
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
-
const container = document.createElement(
|
|
127
|
+
const container = document.createElement('div')
|
|
128
128
|
mount(jsx(Parent, {}), container)
|
|
129
129
|
|
|
130
130
|
// Wait for microtasks (onMount fires via microtask, re-render via microtask)
|
|
@@ -132,18 +132,18 @@ describe("child instance preservation - no infinite re-render", () => {
|
|
|
132
132
|
|
|
133
133
|
// onMount should fire only once, not loop infinitely
|
|
134
134
|
expect(mountCount).toBeLessThanOrEqual(2)
|
|
135
|
-
expect(container.innerHTML).toContain(
|
|
135
|
+
expect(container.innerHTML).toContain('alive')
|
|
136
136
|
})
|
|
137
137
|
|
|
138
|
-
it(
|
|
138
|
+
it('onCleanup in child does not cause infinite loop when writing parent state', async () => {
|
|
139
139
|
let cleanupCount = 0
|
|
140
140
|
|
|
141
141
|
function Inner(props: { onEvent: (msg: string) => void }) {
|
|
142
142
|
onCleanup(() => {
|
|
143
143
|
cleanupCount++
|
|
144
|
-
props.onEvent(
|
|
144
|
+
props.onEvent('cleaned up')
|
|
145
145
|
})
|
|
146
|
-
return jsx(
|
|
146
|
+
return jsx('p', { children: 'alive' })
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
function Parent() {
|
|
@@ -151,7 +151,7 @@ describe("child instance preservation - no infinite re-render", () => {
|
|
|
151
151
|
const [_events, setEvents] = createSignal<string[]>([])
|
|
152
152
|
const addEvent = (msg: string) => setEvents((prev) => [...prev, msg])
|
|
153
153
|
|
|
154
|
-
return jsx(
|
|
154
|
+
return jsx('div', {
|
|
155
155
|
children: jsx(Show as ComponentFn, {
|
|
156
156
|
when: show,
|
|
157
157
|
children: jsx(Inner as ComponentFn, { onEvent: addEvent }),
|
|
@@ -159,13 +159,13 @@ describe("child instance preservation - no infinite re-render", () => {
|
|
|
159
159
|
})
|
|
160
160
|
}
|
|
161
161
|
|
|
162
|
-
const container = document.createElement(
|
|
162
|
+
const container = document.createElement('div')
|
|
163
163
|
mount(jsx(Parent, {}), container)
|
|
164
164
|
|
|
165
165
|
await new Promise((r) => setTimeout(r, 100))
|
|
166
166
|
|
|
167
167
|
// onCleanup should not fire during normal render
|
|
168
168
|
expect(cleanupCount).toBe(0)
|
|
169
|
-
expect(container.innerHTML).toContain(
|
|
169
|
+
expect(container.innerHTML).toContain('alive')
|
|
170
170
|
})
|
|
171
171
|
})
|
package/src/tests/setup.ts
CHANGED