네이티브 UI 요소를 복제하여 스타일 상속하기

interface CloneButtonOptions {
  /** 복제할 템플릿 요소의 선택자 */
  templateSelector: string
  /** 교체할 새 텍스트 */
  text: string
  /** 교체할 새 아이콘 (선택사항) */
  icon?: string | HTMLElement
  /** 클릭 핸들러 */
  onClick: (event: MouseEvent) => void
}

/**
 * 호스트 앱의 기존 버튼을 복제하여 새 버튼 생성
 */
export const cloneNativeButton = (
  options: CloneButtonOptions
): HTMLElement | null => {
  const { templateSelector, text, icon, onClick } = options

  // 템플릿 요소 가져오기
  const template = document.querySelector<HTMLElement>(templateSelector)
  if (!template) {
    console.warn(`Template not found: ${templateSelector}`)
    return null
  }

  // 깊은 복제 생성 (이벤트 핸들러 제외)
  const cloned = template.cloneNode(true) as HTMLElement

  // 텍스트 노드 교체
  const textNode = findTextNode(cloned)
  if (textNode) {
    textNode.textContent = text
  }

  // 아이콘 교체 (지정된 경우)
  if (icon) {
    const iconElement = findIconElement(cloned)
    if (iconElement) {
      const newIcon = typeof icon === 'string'
        ? createIconFromString(icon)
        : icon
      iconElement.replaceWith(newIcon)
    }
  }

  // 이벤트 리스너는 복제되지 않으므로 새로 설정
  cloned.addEventListener('click', onClick)

  // ID가 있으면 제거 (중복 방지)
  if (cloned.id) {
    cloned.removeAttribute('id')
  }

  return cloned
}

/**
 * 요소 내 첫 번째 텍스트 노드 찾기
 */
const findTextNode = (element: HTMLElement): Text | null => {
  const walker = document.createTreeWalker(
    element,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: (node) => {
        // 공백만 있는 노드 제외
        return node.textContent?.trim()
          ? NodeFilter.FILTER_ACCEPT
          : NodeFilter.FILTER_REJECT
      }
    }
  )
  return walker.nextNode() as Text | null
}

/**
 * 요소 내 첫 번째 아이콘 요소 찾기 (svg, img, i 등)
 */
const findIconElement = (element: HTMLElement): Element | null => {
  return (
    element.querySelector('svg') ||
    element.querySelector('img') ||
    element.querySelector('i[class*="icon"]') ||
    element.querySelector('[role="img"]')
  )
}

/**
 * HTML 문자열에서 아이콘 요소 생성
 */
const createIconFromString = (html: string): HTMLElement => {
  const template = document.createElement('template')
  template.innerHTML = html.trim()
  return template.content.firstElementChild as HTMLElement
}

// GitHub의 기존 버튼 스타일 재사용
const myButton = cloneNativeButton({
  templateSelector: '.Button--primary',
  text: 'Deploy',
  icon: '<svg>...</svg>',
  onClick: () => {
    console.log('Deploying...')
  }
})

// DOM에 추가
document.querySelector('.toolbar')?.appendChild(myButton)