Allow for slots to be used in attributes

apps/docs/data/initial-html-editor-data.ts

@@ -1494,7 +1494,13 @@ export const initialComponents: any = [
     tagName: 'Heading',
     value: {
       tagName: 'h1',
-      attributes: {},
+      attributes: {
+        title: {
+          type: 'slot',
+          name: 'title',
+          value: 'The title for heading 1',
+        },
+      },
       style: {
         color: '#4e4fec',
         fontSize: {
@@ -1539,7 +1545,13 @@ export const initialComponents: any = [
     tagName: 'Heading2',
     value: {
       tagName: 'h1',
-      attributes: {},
+      attributes: {
+        title: {
+          type: 'slot',
+          name: 'title',
+          value: 'The title for heading 2',
+        },
+      },
       style: {
         color: 'tomato',
         fontSize: {
@@ -1586,7 +1598,11 @@ export const initialComponents: any = [
       tagName: 'a',
       attributes: {
         href: '#!',
-        title: 'A navigation link',
+        title: {
+          type: 'slot',
+          name: 'title',
+          value: 'A nav link',
+        },
       },
       style: {
         color: 'tomato',

packages/gui/src/components/html/CanvasProvider.tsx

@@ -3,7 +3,7 @@ import { toCSSObject } from '../../lib/codegen/to-css-object'
 import { toReactProps } from '../../lib/codegen/to-react-props'
 import { useTheme } from '../providers/ThemeContext'
 import { useHtmlEditor } from './Provider'
-import { ElementPath, HtmlNode } from './types'
+import { ComponentData, ElementPath, HtmlNode } from './types'
 import { cleanAttributesForCanvas, isSamePath } from './util'
 
 const DEFAULT_CANVAS_VALUE = {}
@@ -18,6 +18,7 @@ type CanvasProviderType = {
 export type CanvasElementProps = {
   path: ElementPath
   value: HtmlNode
+  component?: ComponentData
   onClick?(e: MouseEvent): void
 }
 
@@ -26,7 +27,12 @@ export function useCanvas() {
   return context
 }
 
-export function useCanvasProps({ path, value, onClick }: CanvasElementProps) {
+export function useCanvasProps({
+  path,
+  value,
+  component,
+  onClick,
+}: CanvasElementProps) {
   const { canvas } = useContext(CanvasContext)
   const { selected, setSelected } = useHtmlEditor()
   const theme = useTheme()
@@ -66,6 +72,7 @@ export function useCanvasProps({ path, value, onClick }: CanvasElementProps) {
     ...(canvas ? cleanAttributesForCanvas(attributes) : attributes),
     ...(canvas ? { 'data-path': path.join('-') } : {}),
     sx,
+    outerProps: component?.props,
     onClick: handleSelect,
   })
 

packages/gui/src/components/html/Component/Editor.tsx

@@ -1,9 +1,9 @@
 import { ChangeEvent } from 'react'
 import fuzzysort from 'fuzzysort'
 import { Label, Combobox } from '../../primitives'
-import { ComponentData } from '../types'
+import { ComponentData, Slot } from '../types'
 import { useHtmlEditor } from '../Provider'
-import { getSlots } from '../../../lib/codegen/util'
+import { getSlots, isSlot } from '../../../lib/codegen/util'
 import { mergeComponentAttributes } from './util'
 
 interface ComponentEditorProps {
@@ -101,7 +101,12 @@ export const ComponentEditor = ({ value, onChange }: ComponentEditorProps) => {
         {attributeEntries.length ? (
           <>
             {attributeEntries.map((entry) => {
-              const [key, val] = entry
+              const [key, rawValue] = entry
+
+              const val = isSlot(rawValue as Slot)
+                ? (rawValue as Slot).value
+                : rawValue
+
               return (
                 <div key={key}>
                   <Label>
@@ -114,7 +119,7 @@ export const ComponentEditor = ({ value, onChange }: ComponentEditorProps) => {
                       }}
                     >
                       <input
-                        value={val}
+                        value={val as string}
                         onChange={handleAttributeChange(key)}
                       />
                     </div>

packages/gui/src/components/html/Editors/AttributeEditor.tsx

@@ -1,13 +1,15 @@
 import { X } from 'react-feather'
 import { Label } from '../../primitives'
 import IconButton from '../../ui/IconButton'
-import { useEffect } from 'react'
+import { ChangeEvent, useEffect } from 'react'
 import { Combobox } from '../../primitives'
 import { ATTRIBUTE_MAP } from '../../../data/attributes'
+import { isSlot } from '../../../lib/codegen/util'
+import { Slot } from '../types'
 
 interface AttributeEditorProps {
-  value: Record<string, string>
-  onChange(value: Record<string, string>): void
+  value: Record<string, string | Slot>
+  onChange(value: Record<string, string | Slot>): void
   element: string
 }
 
@@ -49,6 +51,27 @@ export const AttributeEditor = ({
     onChange(newValue)
   }
 
+  const handleSlotToggle = (key: string) => {
+    const val = value[key]
+    const slotValue = val as unknown as Slot
+
+    if (isSlot(slotValue)) {
+      onChange({
+        ...value,
+        [key]: slotValue.value as string,
+      })
+    } else {
+      onChange({
+        ...value,
+        [key]: {
+          type: 'slot',
+          name: key,
+          value: val as string,
+        },
+      })
+    }
+  }
+
   return (
     <div>
       <div sx={{ px: 3 }}>
@@ -62,25 +85,115 @@ export const AttributeEditor = ({
       </div>
       {/* @ts-ignore */}
       {Object.entries(value).map(([key, attrValue]) => {
+        if (isSlot(attrValue as unknown as Slot)) {
+          return (
+            <SlotAttributeEditor
+              key={key}
+              name={key}
+              value={attrValue as unknown as Slot}
+              onChange={(newValue: Slot) =>
+                onChange({ ...value, [key]: newValue })
+              }
+              onRemove={() => handleItemRemoved(key)}
+              onSlot={() => handleSlotToggle(key)}
+            />
+          )
+        }
+
         return (
-          <div sx={{ px: 3, pt: 3 }}>
-            <Label>
-              <span sx={{ display: 'block', width: '100%' }}>{key}</span>
-              <div sx={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
-                <input
-                  value={attrValue}
-                  onChange={(e) =>
-                    onChange({ ...value, [key]: e.target.value })
-                  }
-                />
-                <IconButton onClick={() => handleItemRemoved(key)}>
-                  <X size={14} strokeWidth={3} />
-                </IconButton>
-              </div>
-            </Label>
-          </div>
+          <StringAttributeEditor
+            key={key}
+            name={key}
+            value={attrValue as string}
+            onChange={(e) => onChange({ ...value, [key]: e.target.value })}
+            onRemove={() => handleItemRemoved(key)}
+            onSlot={() => handleSlotToggle(key)}
+          />
         )
       })}
     </div>
   )
 }
+
+interface StringAttributeEditorProps {
+  name: string
+  value: string
+  onChange(e: ChangeEvent<HTMLInputElement>): void
+  onRemove(): void
+  onSlot(): void
+}
+const StringAttributeEditor = ({
+  name,
+  value,
+  onChange,
+  onRemove,
+  onSlot,
+}: StringAttributeEditorProps) => {
+  return (
+    <div sx={{ px: 3, pt: 3 }}>
+      <Label>
+        <span sx={{ display: 'block', width: '100%' }}>{name}</span>
+        <div sx={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
+          <input value={value} onChange={onChange} />
+          <IconButton onClick={onRemove}>
+            <X size={14} strokeWidth={3} />
+          </IconButton>
+          <IconButton onClick={onSlot}>Make slot</IconButton>
+        </div>
+      </Label>
+    </div>
+  )
+}
+
+interface SlotAttributeEditorProps {
+  name: string
+  value: Slot
+  onChange(newValue: Slot): void
+  onRemove(): void
+  onSlot(): void
+}
+const SlotAttributeEditor = ({
+  name,
+  value,
+  onChange,
+  onRemove,
+  onSlot,
+}: SlotAttributeEditorProps) => {
+  return (
+    <div sx={{ px: 3, pt: 3 }}>
+      <span sx={{ display: 'block', width: '100%' }}>{name}</span>
+      <Label>
+        <span sx={{ display: 'block', width: '100%' }}>Name</span>
+        <div sx={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
+          <input
+            value={value.name}
+            onChange={(e) =>
+              onChange({
+                ...value,
+                name: e.target.value,
+              })
+            }
+          />
+        </div>
+      </Label>
+      <Label>
+        <span sx={{ display: 'block', width: '100%' }}>Value</span>
+        <div sx={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
+          <input
+            value={value.value}
+            onChange={(e) =>
+              onChange({
+                ...value,
+                value: e.target.value,
+              })
+            }
+          />
+          <IconButton onClick={onRemove}>
+            <X size={14} strokeWidth={3} />
+          </IconButton>
+          <IconButton onClick={onSlot}>Make string</IconButton>
+        </div>
+      </Label>
+    </div>
+  )
+}

packages/gui/src/components/html/Renderer/Element.tsx

@@ -12,10 +12,11 @@ export function ElementRenderer({
   path,
   ...canvasElementProps
 }: CanvasElementProps) {
-  const { selectComponent } = useComponent()
+  const { selectComponent, value: componentValue } = useComponent()
   const { onClick, ...props } = useCanvasProps({
     value,
     path,
+    component: componentValue,
     ...canvasElementProps,
   })
 

packages/gui/src/components/html/types.ts

@@ -1,7 +1,7 @@
 export interface ElementData {
   type: 'element' | 'text'
   tagName?: string
-  attributes?: Record<string, string>
+  attributes?: Record<string, string | Slot>
   // `style` is an attribute, but we treat it specially for CSS.gui
   style?: Record<string, any>
   value?: string
@@ -17,7 +17,7 @@ export interface Slot {
   name: string
   value?: string
   tagName?: string
-  attributes?: Record<string, string>
+  attributes?: Record<string, string | Slot>
   style?: Record<string, any>
   children?: HtmlNode[]
   props?: Props
@@ -28,7 +28,7 @@ export interface ComponentData {
   tagName: string
   props?: Props
   value: HtmlNode
-  attributes?: Record<string, string>
+  attributes?: Record<string, string | Slot>
   style?: Record<string, any>
   children?: HtmlNode[]
 }

packages/gui/src/components/html/util.ts

@@ -1,4 +1,4 @@
-import { HtmlNode, ElementPath } from './types'
+import { HtmlNode, ElementPath, Slot } from './types'
 import { isNil } from 'lodash-es'
 
 export const isSamePath = (
@@ -19,7 +19,7 @@ export const removeTailFromPath = (path: ElementPath) => {
 }
 
 export const cleanAttributesForCanvas = (
-  attributes: Record<string, string>
+  attributes: Record<string, string | Slot>
 ) => {
   const newAttributes = { ...attributes }
 

packages/gui/src/lib/codegen/to-react-props.ts

@@ -1,9 +1,10 @@
 import * as propInfo from 'property-information'
+import { stringifySlotInProp } from './util'
 
 const SCHEMA = 'html' as unknown as propInfo.Schema
 
 type Props = Record<string, any>
-export const toReactProps = (props: Props): Props => {
+export const toReactProps = ({ outerProps, ...props }: Props): Props => {
   return Object.entries(props).reduce((acc, curr) => {
     const [key, value] = curr
 
@@ -15,12 +16,12 @@ export const toReactProps = (props: Props): Props => {
       const propName = info.property || key
 
       return {
-        [propName]: value,
+        [propName]: stringifySlotInProp(value, outerProps),
         ...acc,
       }
     } catch (e) {
       return {
-        [key]: value,
+        [key]: stringifySlotInProp(value, outerProps),
         ...acc,
       }
     }