Skip to content

Commit

Permalink
refactor: Assign component location directly to the owner
Browse files Browse the repository at this point in the history 
Instead of importing setComponentLocation from solid-devtools/setup
  • Loading branch information
@thetarnav
thetarnav committed Jan 1, 2025
1 parent 2e466ad commit ed4215b
Show file tree
Hide file tree
Showing 11 changed files with 141 additions and 174 deletions.
8 changes: 8 additions & 0 deletions .changeset/hot-coats-repeat.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@solid-devtools/debugger": minor
"solid-devtools": minor
---

Assign component location directly to the owner
Instead of importing setComponentLocation from solid-devtools/setup
Fixes (#299)
20 changes: 11 additions & 9 deletions packages/debugger/src/inspector/inspector.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {misc} from '@nothing-but/utils'
import {untrackedCallback} from '@solid-devtools/shared/primitives'
import {parseLocationString} from '../locator/index.ts'
import {parseLocationString, type SourceLocation} from '../locator/index.ts'
import {NodeType, ValueItemType} from '../main/constants.ts'
import {ObjectType, getSdtId} from '../main/id.ts'
import {observeValueUpdate, removeValueUpdateObserver} from '../main/observe.ts'
Expand Down Expand Up @@ -309,14 +309,16 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (

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

let location = (owner.component as any).location
if (
// get location from component.location
(typeof location === 'string' && (location = parseLocationString(location))) ||
// get location from the babel plugin marks
((location = setup.get_owner_location(owner)) &&
(location = parseLocationString(location)))
) {
let location: string | SourceLocation | undefined
if ((
(location = owner.sdtLocation) &&
typeof location === 'string' &&
(location = parseLocationString(location))
) || (
(location = (owner.component as any).location) &&
typeof location === 'string' &&
(location = parseLocationString(location))
)) {
details.location = location
}
} else {
Expand Down
2 changes: 2 additions & 0 deletions packages/debugger/src/locator/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import {type HighlightElementPayload, type LocatorOptions} from './types.ts'

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

export * from './types.ts'

export function createLocator(props: {
locatorEnabled: s.Accessor<boolean>
setLocatorEnabledSignal(signal: s.Accessor<boolean>): void
Expand Down
2 changes: 2 additions & 0 deletions packages/debugger/src/main/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,5 @@ export enum ValueItemType {
}

export const UNKNOWN = 'unknown'

export const OWNER_LOCATION_PROP = 'sdtLocation'
3 changes: 2 additions & 1 deletion packages/debugger/src/main/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type {EncodedValue, PropGetterState} from '../inspector/types.ts'
import type {SourceLocation} from '../locator/types.ts'
import {NodeType, ValueItemType} from './constants.ts'
import {NodeType, OWNER_LOCATION_PROP, ValueItemType} from './constants.ts'

//
// EXPOSED SOLID API
Expand Down Expand Up @@ -70,6 +70,7 @@ declare module 'solid-js/types/reactive/signal.d.ts' {
interface Owner {
sdtType?: NodeType
sdtSubRoots?: Solid.Owner[] | null
[OWNER_LOCATION_PROP]?: string
}
}

Expand Down
16 changes: 0 additions & 16 deletions packages/debugger/src/setup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,6 @@ import {error} from '@solid-devtools/shared/utils'
import type {LocatorOptions} from './locator/types.ts'
import type {Solid} from './main/types.ts'

const OwnerLocationMap = new WeakMap<Solid.Owner, string>()

/**
* Set the location of the owner in source code.
* Used by the babel plugin.
*/
export function setOwnerLocation(location: string) {
const owner = s.getOwner()
owner && OwnerLocationMap.set(owner, location)
}

export function getOwnerLocation(owner: Solid.Owner) {
return OwnerLocationMap.get(owner) ?? null
}

let PassedLocatorOptions: LocatorOptions | null = null
/** @deprecated use `setLocatorOptions` */
Expand Down Expand Up @@ -73,7 +59,6 @@ declare global {
get_solid(): string | null
get_expected_solid(): string | null
}
get_owner_location(owner: Solid.Owner): string | null
}
}

Expand Down Expand Up @@ -116,7 +101,6 @@ if (!s.DEV || !store.DEV) {
get_solid() {return SolidVersion},
get_expected_solid() {return ExpectedSolidVersion},
},
get_owner_location: getOwnerLocation,
}

s.DEV.hooks.afterCreateOwner = owner => {
Expand Down
46 changes: 16 additions & 30 deletions packages/main/src/babel/babel.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,13 @@ import * as plugin from './babel.ts'


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

function assertTransform(
src: string,
expected: string,
plugin: babel.PluginObj<any>,
trim = false,
): void {
const ast = parser.parse(src, {
sourceType: 'module',
Expand All @@ -28,8 +27,8 @@ function assertTransform(

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

test.expect(output).toBe(expectedOutput)
}
Expand All @@ -39,15 +38,14 @@ function testTransform(
src: string,
expected: string,
plugin: babel.PluginObj<any>,
trim = false,
): void {
test.test(name, () => {
assertTransform(src, expected, plugin, trim)
assertTransform(src, expected, plugin)
})
}


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

test.describe('location', () => {
const testData: [
Expand All @@ -59,36 +57,36 @@ test.describe('location', () => {
[
'function component',
`function Button(props) {
return <button>Click me</button>
return <button>Click me</button>
}`,
`${setLocationImport}
function Button(props) {
${plugin.SET_COMPONENT_LOC_LOCAL}("${file}:1:0");
return <button>Click me</button>;
if (${plugin.SDT_GET_OWNER}()) ${plugin.SDT_GET_OWNER}().${debug.OWNER_LOCATION_PROP} = "${file}:1:0";
return <button>Click me</button>;
}
globalThis.${debug.WINDOW_PROJECTPATH_PROPERTY} = "${cwd}";`,
{jsx: false, components: true},
],
[
'arrow component',
`const Button = props => {
return <button>Click me</button>
return <button>Click me</button>
}`,
`${setLocationImport}
const Button = props => {
${plugin.SET_COMPONENT_LOC_LOCAL}("${file}:1:6");
return <button>Click me</button>;
if (${plugin.SDT_GET_OWNER}()) ${plugin.SDT_GET_OWNER}().${debug.OWNER_LOCATION_PROP} = "${file}:1:6";
return <button>Click me</button>;
};
globalThis.${debug.WINDOW_PROJECTPATH_PROPERTY} = "${cwd}";`,
{jsx: false, components: true},
],
[
'jsx',
`function Button(props) {
return <button>Click me</button>
return <button>Click me</button>
}`,
`function Button(props) {
return <button ${debug.LOCATION_ATTRIBUTE_NAME}="${file}:2:11">Click me</button>;
return <button ${debug.LOCATION_ATTRIBUTE_NAME}="${file}:2:13">Click me</button>;
}
globalThis.${debug.WINDOW_PROJECTPATH_PROPERTY} = "${cwd}";`,
{jsx: true, components: false},
Expand Down Expand Up @@ -132,7 +130,6 @@ test.describe('autoname: returning primitives', () => {
name: "signal"
});`,
plugin.namePlugin,
true,
)

testTransform(
Expand All @@ -144,7 +141,6 @@ test.describe('autoname: returning primitives', () => {
name: "signal"
});`,
plugin.namePlugin,
true,
)

testTransform(
Expand All @@ -164,7 +160,6 @@ const var_foo = 123,
}),
var_bar = 321;`,
plugin.namePlugin,
true,
)

testTransform(
Expand All @@ -180,7 +175,6 @@ const var_foo = 123,
});`,

plugin.namePlugin,
true,
)

testTransform(
Expand All @@ -198,7 +192,6 @@ const var_foo = 123,
});`,

plugin.namePlugin,
true,
)

testTransform(
Expand All @@ -216,7 +209,6 @@ const var_foo = 123,
});`,

plugin.namePlugin,
true,
)

testTransform(
Expand All @@ -230,7 +222,6 @@ const var_foo = 123,
});`,

plugin.namePlugin,
true,
)

testTransform(
Expand All @@ -244,7 +235,6 @@ const var_foo = 123,
});`,

plugin.namePlugin,
true,
)
})
}
Expand All @@ -262,14 +252,14 @@ const var_foo = 123,
test.test(`no import`, () => {
const src = `const signal = ${create}();`

assertTransform(src, src, plugin.namePlugin, true)
assertTransform(src, src, plugin.namePlugin)
})

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

assertTransform(src, src, plugin.namePlugin, true)
assertTransform(src, src, plugin.namePlugin)
})
})
}
Expand Down Expand Up @@ -301,7 +291,6 @@ test.describe('autoname: effect primitives', () => {
});
}`,
plugin.namePlugin,
true,
)
})

Expand All @@ -318,7 +307,6 @@ test.describe('autoname: effect primitives', () => {
});
};`,
plugin.namePlugin,
true,
)

testTransform(
Expand All @@ -334,7 +322,6 @@ test.describe('autoname: effect primitives', () => {
});
};`,
plugin.namePlugin,
true,
)

testTransform(
Expand All @@ -350,7 +337,6 @@ test.describe('autoname: effect primitives', () => {
});
});`,
plugin.namePlugin,
true,
)
}
})
Expand All @@ -364,7 +350,7 @@ test.describe('autoname: effect primitives', () => {
${create}(() => {});
}`

assertTransform(src, src, plugin.namePlugin, true)
assertTransform(src, src, plugin.namePlugin)
})
})
}
Expand Down
Loading

0 comments on commit ed4215b

Please sign in to comment.