Run EnableCSSHoudini conditionally

[dinohan]

Description

EnableCSSHoudini가 사용처 필요에 따라 import 되고, 실행될 수 있도록 합니다.

Reasons for suggestion

• EnableCSSHoudini의 유일한 목적은 smooth-conrer 입니다.
• smooth-corner의 유일한 사용처는 Avatar입니다.
• 채널톡 프론트에서는 Avatar를 사용하지 않습니다.

프론트 뿐만 아니라, Avatar를 사용하지 않는 모든 어플리케이션에서 PaintWorklet 관련 코드를 import 하고 실행하는 것은 낭비라고 생각합니다.

Proposed solution

Option 1. EnableCSSHoudini를 별개로 export 하고, BezierProvider에서 호출 부분을 제거

/* ~/src/index.ts */

/* Worklets */
export { default as EnableCSSHoudini } from '~/src/worklets/EnableCSSHoudini'

• 사용처 코드 수정이 없으면 동작 달라짐.
• treeshaking 됨.
• 필요에 따라 houdini 실행 가능
  • 기본값: 실행 안 함.

Option 2. FoundationProvider에 houdini 사용 여부를 결정하는 prop 추가

interface BezierProviderProps {
  foundation: Foundation & GlobalStyleProp
  children: React.ReactNode
  themeVarsScope?: ThemeVarsAdditionalType['scope']
  smoothCorners?: boolean
}

function BezierProvider({
  foundation,
  children,
  themeVarsScope,
  smoothCorners = true,
}: BezierProviderProps) {
  EnableCSSHoudini({ smoothCorners })

  return (
    <FoundationProvider foundation={foundation}>
      <GlobalStyle foundation={foundation} />
      <ThemeVars
        foundation={foundation}
        scope={themeVarsScope}
      />
      { children }
    </FoundationProvider>
  )
}

• 사용처에서 코드 수정 없이 기존 동작 유지 가능
• treeshaking 안 됨.
• 필요에 따라 houdini 실행 가능
  • 기본값: 실행 함 (기존 사용처 수정을 최소화 하기 위해)

References

• fix(houdini): remove side effect of enablecsshoudini and move it to foundation provider #603
  • treeshaking 안되게 하기 위해 이렇게 고쳤으나, 사용처 필요에 따라 treeshaking 되도록 하는 게 맞는 것 같습니다.

[dinohan]

Option 3. EnableCSSHoudini를 포함하지 않는 새로운 Provider 생성

ex) AlphaBezierProvider

• 사용처에서 코드 수정 없이 기존 동작 유지 가능
• treeshaking 됨.
• 필요에 따라 Provider 취사 선택
• Option 1. 과 함께 진행 가능
  • 기존 사용처 동작 유지를 위해 BezierProvider는 EnableCSSHoudini를 사용하도록 합니다.
  • 이후 새로 생성하는 프로젝트나, 프론트 등 EnableCSSHoudini를 떼고 싶은 사용처에서는 AlphaBezierProvider를 사용하도록 합니다.
  • AlphaBezierProvider사용처에서 EnableCSSHoudini를 쓰고 싶다면 별개로 export 된 EnableCSSHoudini를 직접 import하고 실행합니다.