Skip to content

Commit ef9ca3f

Browse files
committed
Add hidden feature to not add keys
Solid currently sees a third argument, even when `undefined`, as the children. Which results in actual children being ignored. I’m planning to open a PR to solve that. But for now, here’s a little workaround.
1 parent 98117a3 commit ef9ca3f

File tree

1 file changed

+16
-4
lines changed

1 file changed

+16
-4
lines changed

Diff for: lib/index.js

+16-4
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
* Element type: `Fragment` symbol, tag name (`string`), component.
2222
* @param {Props} props
2323
* Element props, `children`, and maybe `node`.
24-
* @param {string | undefined} key
24+
* @param {string | undefined} [key]
2525
* Dynamicly generated key to use.
2626
* @returns {JSX.Element}
2727
* An element from your framework.
@@ -101,6 +101,8 @@
101101
* File path.
102102
* @property {Partial<Components>} components
103103
* Components to swap.
104+
* @property {boolean} passKeys
105+
* Generate keys to optimize frameworks that support them.
104106
* @property {boolean} passNode
105107
* Pass `node` to components.
106108
* @property {ElementAttributeNameCase} elementAttributeNameCase
@@ -126,6 +128,10 @@
126128
*
127129
* Passed in source info to `jsxDEV` when using the automatic runtime with
128130
* `development: true`.
131+
* @property {boolean | null | undefined} [passKeys=true]
132+
* Generate keys to optimize frameworks that support them.
133+
*
134+
* > 👉 **Note**: Solid currently fails if keys are passed.
129135
* @property {boolean | null | undefined} [passNode=false]
130136
* Pass the hast element node to components.
131137
* @property {ElementAttributeNameCase | null | undefined} [elementAttributeNameCase='react']
@@ -205,6 +211,9 @@ import {whitespace} from 'hast-util-whitespace'
205211

206212
const own = {}.hasOwnProperty
207213

214+
/** @type {Map<string, number>} */
215+
const emptyMap = new Map()
216+
208217
const cap = /[A-Z]/g
209218
const dashSomething = /-([a-z])/g
210219

@@ -266,6 +275,7 @@ export function toJsxRuntime(tree, options) {
266275
const state = {
267276
Fragment: options.Fragment,
268277
schema: options.space === 'svg' ? svg : html,
278+
passKeys: options.passKeys !== false,
269279
passNode: options.passNode || false,
270280
elementAttributeNameCase: options.elementAttributeNameCase || 'react',
271281
stylePropertyNameCase: options.stylePropertyNameCase || 'dom',
@@ -367,7 +377,7 @@ function productionCreate(_, jsx, jsxs) {
367377
function create(_, type, props, key) {
368378
const isStaticChildren = props.children ? props.children.length > 1 : false
369379
const fn = isStaticChildren ? jsxs : jsx
370-
return fn(type, props, key)
380+
return key ? fn(type, props, key) : fn(type, props)
371381
}
372382
}
373383

@@ -415,14 +425,16 @@ function createChildren(state, node) {
415425
const children = []
416426
let index = -1
417427
/** @type {Map<string, number>} */
418-
const countsByTagName = new Map()
428+
// Note: test this when Solid doesn’t want to merge my upcoming PR.
429+
/* c8 ignore next */
430+
const countsByTagName = state.passKeys ? new Map() : emptyMap
419431

420432
while (++index < node.children.length) {
421433
const child = node.children[index]
422434
/** @type {string | undefined} */
423435
let key
424436

425-
if (child.type === 'element') {
437+
if (state.passKeys && child.type === 'element') {
426438
const count = countsByTagName.get(child.tagName) || 0
427439
key = child.tagName + '-' + count
428440
countsByTagName.set(child.tagName, count + 1)

0 commit comments

Comments
 (0)