Match numbers and string to element-valued properties (#6028)

## Problem
If there's no annotation for a component property, we only treat JSX
elements as matching values for render props, even though strings and
numbers would be valid elements children as well.

## Fix
If we detect a render prop, the matching code treats strings and numbers
as matching as well.

#5979

editor/src/components/inspector/sections/component-section/variables-in-scope-utils.spec.ts

@@ -1,3 +1,5 @@
+import React from 'react'
+import { stripNulls } from '../../../../core/shared/array-utils'
 import * as EP from '../../../../core/shared/element-path'
 import { maybeToArray } from '../../../../core/shared/optional-utils'
 import { emptySet } from '../../../../core/shared/set-utils'
@@ -176,4 +178,53 @@ describe('matchForPropertyValue', () => {
       ]
     `)
   })
+
+  it('matches strings and numbers too if the value of the property is a jsx element', () => {
+    const variableNamesInScope: Array<VariableInfo> = stripNulls([
+      variableInfoFromValue(
+        'data',
+        'data',
+        {
+          size: 300,
+          description: 'relative',
+          open: false,
+          label: React.createElement('div'),
+          likes: ['Alice', 'Bob'],
+          quote: {
+            author: 'E.Poe',
+            text: 'I became insane, with long intervals of horrible sanity.',
+          },
+        },
+        EP.fromString('aaa'),
+        emptySet(),
+      ),
+    ])
+
+    const currentPropertyValue: PropertyValue = {
+      type: 'existing',
+      value: React.createElement('div'),
+    }
+    const targetPropertyName = 'label'
+    const actualResult = matchForPropertyValue(
+      null,
+      currentPropertyValue,
+      targetPropertyName,
+    )(variableNamesInScope)
+
+    const matching = actualResult
+      .flatMap((r) => [
+        r,
+        ...(r.type === 'array' ? r.elements : r.type === 'object' ? r.props : []),
+      ])
+      .filter((r) => r.matches === 'matches')
+      .map((r) => r.expression)
+
+    expect(matching).toMatchInlineSnapshot(`
+      Array [
+        "data.size",
+        "data.description",
+        "data.label",
+      ]
+    `)
+  })
 })

editor/src/components/inspector/sections/component-section/variables-in-scope-utils.ts

@@ -552,7 +552,7 @@ function objectShapesMatch(l: object, r: object): boolean {
 
 function variableShapesMatch(current: unknown, other: unknown): boolean {
   if (React.isValidElement(current)) {
-    return isValidReactNode(other)
+    return isValidReactNode(other) || typeof other === 'string' || typeof other === 'number'
   }
 
   if (Array.isArray(current) && Array.isArray(other)) {