Skip to content

Commit

Permalink
Add hidden feature to not add keys
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
wooorm committed Feb 2, 2023
1 parent 98117a3 commit ef9ca3f
Showing 1 changed file with 16 additions and 4 deletions.
20 changes: 16 additions & 4 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
* Element type: `Fragment` symbol, tag name (`string`), component.
* @param {Props} props
* Element props, `children`, and maybe `node`.
* @param {string | undefined} key
* @param {string | undefined} [key]
* Dynamicly generated key to use.
* @returns {JSX.Element}
* An element from your framework.
Expand Down Expand Up @@ -101,6 +101,8 @@
* File path.
* @property {Partial<Components>} components
* Components to swap.
* @property {boolean} passKeys
* Generate keys to optimize frameworks that support them.
* @property {boolean} passNode
* Pass `node` to components.
* @property {ElementAttributeNameCase} elementAttributeNameCase
Expand All @@ -126,6 +128,10 @@
*
* Passed in source info to `jsxDEV` when using the automatic runtime with
* `development: true`.
* @property {boolean | null | undefined} [passKeys=true]
* Generate keys to optimize frameworks that support them.
*
* > 👉 **Note**: Solid currently fails if keys are passed.
* @property {boolean | null | undefined} [passNode=false]
* Pass the hast element node to components.
* @property {ElementAttributeNameCase | null | undefined} [elementAttributeNameCase='react']
Expand Down Expand Up @@ -205,6 +211,9 @@ import {whitespace} from 'hast-util-whitespace'

const own = {}.hasOwnProperty

/** @type {Map<string, number>} */
const emptyMap = new Map()

const cap = /[A-Z]/g
const dashSomething = /-([a-z])/g

Expand Down Expand Up @@ -266,6 +275,7 @@ export function toJsxRuntime(tree, options) {
const state = {
Fragment: options.Fragment,
schema: options.space === 'svg' ? svg : html,
passKeys: options.passKeys !== false,
passNode: options.passNode || false,
elementAttributeNameCase: options.elementAttributeNameCase || 'react',
stylePropertyNameCase: options.stylePropertyNameCase || 'dom',
Expand Down Expand Up @@ -367,7 +377,7 @@ function productionCreate(_, jsx, jsxs) {
function create(_, type, props, key) {
const isStaticChildren = props.children ? props.children.length > 1 : false
const fn = isStaticChildren ? jsxs : jsx
return fn(type, props, key)
return key ? fn(type, props, key) : fn(type, props)
}
}

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

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

if (child.type === 'element') {
if (state.passKeys && child.type === 'element') {
const count = countsByTagName.get(child.tagName) || 0
key = child.tagName + '-' + count
countsByTagName.set(child.tagName, count + 1)
Expand Down

0 comments on commit ef9ca3f

Please sign in to comment.