-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useId hook #3402
Closed
Closed
useId hook #3402
Changes from all commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
f4512a8
initial implementation for the useId hook
JoviDeCroock a39127a
ensure uniqueness
JoviDeCroock e815f7d
try rootId approach
JoviDeCroock 420019e
add mangle
JoviDeCroock 0a593fc
fix mistake in tree creation
JoviDeCroock 2bd99b8
fix test
JoviDeCroock 00203de
add failing test
JoviDeCroock ecfa60b
use a global counter instead
JoviDeCroock 832c497
start on 0
JoviDeCroock 5644895
add test assertions
JoviDeCroock 07f10eb
Merge branch 'main' into use-id-hook
JoviDeCroock 4052a14
Merge branch 'main' into use-id-hook
JoviDeCroock d015cbb
make useId more consistent
JoviDeCroock 7cfe884
Update useId.test.js
JoviDeCroock ab2ed5d
start rootId at 1
JoviDeCroock e9c1876
namespace by rootId and add depth
JoviDeCroock 3175c73
Merge branch 'main' into use-id-hook
JoviDeCroock 0db2160
remove rootId
JoviDeCroock d1c4bf1
try server impl
JoviDeCroock File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
import { createElement, render } from 'preact'; | ||
import { setupScratch, teardown } from '../../../test/_util/helpers'; | ||
import { useId } from 'preact/hooks'; | ||
|
||
/** @jsx createElement */ | ||
|
||
describe('useId', () => { | ||
/** @type {HTMLDivElement} */ | ||
let scratch; | ||
|
||
beforeEach(() => { | ||
scratch = setupScratch(); | ||
}); | ||
|
||
afterEach(() => { | ||
teardown(scratch); | ||
}); | ||
|
||
it('keeps the id consistent after an update', () => { | ||
function Comp() { | ||
const id = useId(); | ||
return <div id={id} />; | ||
} | ||
|
||
render(<Comp />, scratch); | ||
const id = scratch.firstChild.getAttribute('id'); | ||
expect(scratch.firstChild.getAttribute('id')).to.equal(id); | ||
|
||
render(<Comp />, scratch); | ||
expect(scratch.firstChild.getAttribute('id')).to.equal(id); | ||
}); | ||
|
||
it('ids are unique according to dom-depth', () => { | ||
function Child() { | ||
const id = useId(); | ||
const spanId = useId(); | ||
return ( | ||
<div id={id}> | ||
<span id={spanId}>h</span> | ||
</div> | ||
); | ||
} | ||
|
||
function Comp() { | ||
const id = useId(); | ||
return ( | ||
<div id={id}> | ||
<Child /> | ||
</div> | ||
); | ||
} | ||
|
||
render(<Comp />, scratch); | ||
expect(scratch.innerHTML).to.equal( | ||
'<div id="_P3"><div id="_P6"><span id="_P7">h</span></div></div>' | ||
); | ||
|
||
render(<Comp />, scratch); | ||
expect(scratch.innerHTML).to.equal( | ||
'<div id="_P3"><div id="_P6"><span id="_P7">h</span></div></div>' | ||
); | ||
}); | ||
|
||
it('ids are unique across siblings', () => { | ||
function Child() { | ||
const id = useId(); | ||
return <span id={id}>h</span>; | ||
} | ||
|
||
function Comp() { | ||
const id = useId(); | ||
return ( | ||
<div id={id}> | ||
<Child /> | ||
<Child /> | ||
<Child /> | ||
</div> | ||
); | ||
} | ||
|
||
render(<Comp />, scratch); | ||
expect(scratch.innerHTML).to.equal( | ||
'<div id="_P6"><span id="_P9">h</span><span id="_P11">h</span><span id="_P13">h</span></div>' | ||
); | ||
|
||
render(<Comp />, scratch); | ||
expect(scratch.innerHTML).to.equal( | ||
'<div id="_P6"><span id="_P9">h</span><span id="_P11">h</span><span id="_P13">h</span></div>' | ||
); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
module.exports = require('./dist/jsx'); // eslint-disable-line | ||
module.exports = require('./dist/server'); // eslint-disable-line |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,16 @@ | ||
import { VNode } from 'preact'; | ||
|
||
export interface Options { | ||
interface Options { | ||
shallow?: boolean; | ||
xml?: boolean; | ||
pretty?: boolean | string; | ||
} | ||
|
||
type RenderFn = (vnode: VNode, context?: any, options?: Options) => string; | ||
export const render: RenderFn; | ||
export const renderToString: RenderFn; | ||
export const renderToStaticMarkup: RenderFn; | ||
|
||
export function shallowRender(vnode: VNode, context?: any): string; | ||
|
||
export interface JsxOptions extends Options { | ||
functions?: boolean; | ||
functionNames?: boolean; | ||
skipFalseAttributes?: boolean; | ||
} | ||
|
||
export function renderToJsxString( | ||
export function render(vnode: VNode, context?: any, options?: Options): string; | ||
export function renderToString( | ||
vnode: VNode, | ||
context?: any, | ||
options: JsxOptions | ||
options?: Options | ||
): string; | ||
export function shallowRender(vnode: VNode, context?: any): string; | ||
export default render; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
_domDepth might be more reliable here as sometimes people wrap their ssr with a wrapper for the routing, ... we could also just remove it as the global id counter should take care of it either way
We could even just do
The only thing that currently bothers me is the fact that this could be annoying when we talk about plugins, maybe we allow for custom prefixes to help them out?
Something like