Skip to content

Commit ed4215b

Browse files
thetarnavthetarnav
committed
refactor: Assign component location directly to the owner
Instead of importing setComponentLocation from solid-devtools/setup
1 parent 2e466ad commit ed4215b

11 files changed

Lines changed: 141 additions & 174 deletions

File tree

‎.changeset/hot-coats-repeat.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@solid-devtools/debugger": minor
3+
"solid-devtools": minor
4+
---
5+
6+
Assign component location directly to the owner
7+
Instead of importing setComponentLocation from solid-devtools/setup
8+
Fixes (#299)

‎packages/debugger/src/inspector/inspector.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {misc} from '@nothing-but/utils'
22
import {untrackedCallback} from '@solid-devtools/shared/primitives'
3-
import {parseLocationString} from '../locator/index.ts'
3+
import {parseLocationString, type SourceLocation} from '../locator/index.ts'
44
import {NodeType, ValueItemType} from '../main/constants.ts'
55
import {ObjectType, getSdtId} from '../main/id.ts'
66
import {observeValueUpdate, removeValueUpdateObserver} from '../main/observe.ts'
@@ -309,14 +309,16 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
309309

310310
;({checkProxyProps, props: details.props} = mapProps(owner.props))
311311

312-
let location = (owner.component as any).location
313-
if (
314-
// get location from component.location
315-
(typeof location === 'string' && (location = parseLocationString(location))) ||
316-
// get location from the babel plugin marks
317-
((location = setup.get_owner_location(owner)) &&
318-
(location = parseLocationString(location)))
319-
) {
312+
let location: string | SourceLocation | undefined
313+
if ((
314+
(location = owner.sdtLocation) &&
315+
typeof location === 'string' &&
316+
(location = parseLocationString(location))
317+
) || (
318+
(location = (owner.component as any).location) &&
319+
typeof location === 'string' &&
320+
(location = parseLocationString(location))
321+
)) {
320322
details.location = location
321323
}
322324
} else {

‎packages/debugger/src/locator/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import {type HighlightElementPayload, type LocatorOptions} from './types.ts'
2626

2727
export {parseLocationString} from './find-components.ts'
2828

29+
export * from './types.ts'
30+
2931
export function createLocator(props: {
3032
locatorEnabled: s.Accessor<boolean>
3133
setLocatorEnabledSignal(signal: s.Accessor<boolean>): void

‎packages/debugger/src/main/constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,5 @@ export enum ValueItemType {
5656
}
5757

5858
export const UNKNOWN = 'unknown'
59+
60+
export const OWNER_LOCATION_PROP = 'sdtLocation'

‎packages/debugger/src/main/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type {EncodedValue, PropGetterState} from '../inspector/types.ts'
22
import type {SourceLocation} from '../locator/types.ts'
3-
import {NodeType, ValueItemType} from './constants.ts'
3+
import {NodeType, OWNER_LOCATION_PROP, ValueItemType} from './constants.ts'
44

55
//
66
// EXPOSED SOLID API
@@ -70,6 +70,7 @@ declare module 'solid-js/types/reactive/signal.d.ts' {
7070
interface Owner {
7171
sdtType?: NodeType
7272
sdtSubRoots?: Solid.Owner[] | null
73+
[OWNER_LOCATION_PROP]?: string
7374
}
7475
}
7576

‎packages/debugger/src/setup.ts‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,6 @@ import {error} from '@solid-devtools/shared/utils'
1212
import type {LocatorOptions} from './locator/types.ts'
1313
import type {Solid} from './main/types.ts'
1414

15-
const OwnerLocationMap = new WeakMap<Solid.Owner, string>()
16-
17-
/**
18-
* Set the location of the owner in source code.
19-
* Used by the babel plugin.
20-
*/
21-
export function setOwnerLocation(location: string) {
22-
const owner = s.getOwner()
23-
owner && OwnerLocationMap.set(owner, location)
24-
}
25-
26-
export function getOwnerLocation(owner: Solid.Owner) {
27-
return OwnerLocationMap.get(owner) ?? null
28-
}
2915

3016
let PassedLocatorOptions: LocatorOptions | null = null
3117
/** @deprecated use `setLocatorOptions` */
@@ -73,7 +59,6 @@ declare global {
7359
get_solid(): string | null
7460
get_expected_solid(): string | null
7561
}
76-
get_owner_location(owner: Solid.Owner): string | null
7762
}
7863
}
7964

@@ -116,7 +101,6 @@ if (!s.DEV || !store.DEV) {
116101
get_solid() {return SolidVersion},
117102
get_expected_solid() {return ExpectedSolidVersion},
118103
},
119-
get_owner_location: getOwnerLocation,
120104
}
121105

122106
s.DEV.hooks.afterCreateOwner = owner => {

‎packages/main/src/babel/babel.test.ts‎

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,13 @@ import * as plugin from './babel.ts'
1212

1313

1414
const removeExtraSpaces = (str: string): string => {
15-
return str.replace(/ {2,}/g, ' ').replace(/[\t\n] ?/g, '')
15+
return str.replace(/\s+/g, '')
1616
}
1717

1818
function assertTransform(
1919
src: string,
2020
expected: string,
2121
plugin: babel.PluginObj<any>,
22-
trim = false,
2322
): void {
2423
const ast = parser.parse(src, {
2524
sourceType: 'module',
@@ -28,8 +27,8 @@ function assertTransform(
2827

2928
babel.traverse(ast, plugin.visitor, undefined, {filename: `${cwd}/${file}`})
3029
const res = new generator.CodeGenerator(ast).generate()
31-
const output = trim ? removeExtraSpaces(res.code) : res.code
32-
const expectedOutput = trim ? removeExtraSpaces(expected) : expected
30+
const output = removeExtraSpaces(res.code)
31+
const expectedOutput = removeExtraSpaces(expected)
3332

3433
test.expect(output).toBe(expectedOutput)
3534
}
@@ -39,15 +38,14 @@ function testTransform(
3938
src: string,
4039
expected: string,
4140
plugin: babel.PluginObj<any>,
42-
trim = false,
4341
): void {
4442
test.test(name, () => {
45-
assertTransform(src, expected, plugin, trim)
43+
assertTransform(src, expected, plugin)
4644
})
4745
}
4846

4947

50-
const setLocationImport = `import { ${plugin.SET_COMPONENT_LOC} as ${plugin.SET_COMPONENT_LOC_LOCAL} } from "${plugin.DevtoolsModule.Setup}";`
48+
const setLocationImport = `import { getOwner as ${plugin.SDT_GET_OWNER} } from "solid-js";`
5149

5250
test.describe('location', () => {
5351
const testData: [
@@ -59,36 +57,36 @@ test.describe('location', () => {
5957
[
6058
'function component',
6159
`function Button(props) {
62-
return <button>Click me</button>
60+
return <button>Click me</button>
6361
}`,
6462
`${setLocationImport}
6563
function Button(props) {
66-
${plugin.SET_COMPONENT_LOC_LOCAL}("${file}:1:0");
67-
return <button>Click me</button>;
64+
if (${plugin.SDT_GET_OWNER}()) ${plugin.SDT_GET_OWNER}().${debug.OWNER_LOCATION_PROP} = "${file}:1:0";
65+
return <button>Click me</button>;
6866
}
6967
globalThis.${debug.WINDOW_PROJECTPATH_PROPERTY} = "${cwd}";`,
7068
{jsx: false, components: true},
7169
],
7270
[
7371
'arrow component',
7472
`const Button = props => {
75-
return <button>Click me</button>
73+
return <button>Click me</button>
7674
}`,
7775
`${setLocationImport}
7876
const Button = props => {
79-
${plugin.SET_COMPONENT_LOC_LOCAL}("${file}:1:6");
80-
return <button>Click me</button>;
77+
if (${plugin.SDT_GET_OWNER}()) ${plugin.SDT_GET_OWNER}().${debug.OWNER_LOCATION_PROP} = "${file}:1:6";
78+
return <button>Click me</button>;
8179
};
8280
globalThis.${debug.WINDOW_PROJECTPATH_PROPERTY} = "${cwd}";`,
8381
{jsx: false, components: true},
8482
],
8583
[
8684
'jsx',
8785
`function Button(props) {
88-
return <button>Click me</button>
86+
return <button>Click me</button>
8987
}`,
9088
`function Button(props) {
91-
return <button ${debug.LOCATION_ATTRIBUTE_NAME}="${file}:2:11">Click me</button>;
89+
return <button ${debug.LOCATION_ATTRIBUTE_NAME}="${file}:2:13">Click me</button>;
9290
}
9391
globalThis.${debug.WINDOW_PROJECTPATH_PROPERTY} = "${cwd}";`,
9492
{jsx: true, components: false},
@@ -132,7 +130,6 @@ test.describe('autoname: returning primitives', () => {
132130
name: "signal"
133131
});`,
134132
plugin.namePlugin,
135-
true,
136133
)
137134

138135
testTransform(
@@ -144,7 +141,6 @@ test.describe('autoname: returning primitives', () => {
144141
name: "signal"
145142
});`,
146143
plugin.namePlugin,
147-
true,
148144
)
149145

150146
testTransform(
@@ -164,7 +160,6 @@ const var_foo = 123,
164160
}),
165161
var_bar = 321;`,
166162
plugin.namePlugin,
167-
true,
168163
)
169164

170165
testTransform(
@@ -180,7 +175,6 @@ const var_foo = 123,
180175
});`,
181176

182177
plugin.namePlugin,
183-
true,
184178
)
185179

186180
testTransform(
@@ -198,7 +192,6 @@ const var_foo = 123,
198192
});`,
199193

200194
plugin.namePlugin,
201-
true,
202195
)
203196

204197
testTransform(
@@ -216,7 +209,6 @@ const var_foo = 123,
216209
});`,
217210

218211
plugin.namePlugin,
219-
true,
220212
)
221213

222214
testTransform(
@@ -230,7 +222,6 @@ const var_foo = 123,
230222
});`,
231223

232224
plugin.namePlugin,
233-
true,
234225
)
235226

236227
testTransform(
@@ -244,7 +235,6 @@ const var_foo = 123,
244235
});`,
245236

246237
plugin.namePlugin,
247-
true,
248238
)
249239
})
250240
}
@@ -262,14 +252,14 @@ const var_foo = 123,
262252
test.test(`no import`, () => {
263253
const src = `const signal = ${create}();`
264254

265-
assertTransform(src, src, plugin.namePlugin, true)
255+
assertTransform(src, src, plugin.namePlugin)
266256
})
267257

268258
test.test(`incorrect import`, () => {
269259
const src = `import { ${create} } from "${module}";
270260
const signal = ${create}();`
271261

272-
assertTransform(src, src, plugin.namePlugin, true)
262+
assertTransform(src, src, plugin.namePlugin)
273263
})
274264
})
275265
}
@@ -301,7 +291,6 @@ test.describe('autoname: effect primitives', () => {
301291
});
302292
}`,
303293
plugin.namePlugin,
304-
true,
305294
)
306295
})
307296

@@ -318,7 +307,6 @@ test.describe('autoname: effect primitives', () => {
318307
});
319308
};`,
320309
plugin.namePlugin,
321-
true,
322310
)
323311

324312
testTransform(
@@ -334,7 +322,6 @@ test.describe('autoname: effect primitives', () => {
334322
});
335323
};`,
336324
plugin.namePlugin,
337-
true,
338325
)
339326

340327
testTransform(
@@ -350,7 +337,6 @@ test.describe('autoname: effect primitives', () => {
350337
});
351338
});`,
352339
plugin.namePlugin,
353-
true,
354340
)
355341
}
356342
})
@@ -364,7 +350,7 @@ test.describe('autoname: effect primitives', () => {
364350
${create}(() => {});
365351
}`
366352

367-
assertTransform(src, src, plugin.namePlugin, true)
353+
assertTransform(src, src, plugin.namePlugin)
368354
})
369355
})
370356
}

0 commit comments

Comments
 (0)