HyperUI 재작성... 무엇이 변경되었습니까?

몇 달 전부터 HyperUI를 다시 작성하고 싶었지만, 그 재작성에도 의미가 있고 저와 기여자에게 도움이 되기를 원했습니다.

저는 개발자로서 우리가 한 일을 계속해서 다시 작성해야 하는 함정에 빠진다고 생각합니다. 예를 들어, 저는 1년에 세 개의 서로 다른 개인 웹 사이트를 운영했는데 모두 동일한 작업을 수행했으며 최신 버전은 첫 번째 버전보다 작업이 적었습니다.

그러나 변경 사항이 의미를 갖고 프로젝트(이 경우 HyperUI)를 진행하기를 원하므로 더 이상 적용되지 않습니다.

그렇다면 HyperUI를 재작성한 이유는 무엇이었습니까?

HyperUI is a mixture of React and Typescript code that comes from other projects, code that I've written to match the structure of the code from the other projects and code that I've written how I'd like it to be written but with adjustments so it matches the rest of the project.

참조된 다른 프로젝트는 https://nextjs.org/examples 에서 가져옵니다.

요컨대 HyperUI의 React 및 Typescript 코드는 내 것 같지 않았습니다.

제가 변경한 방법은 다음과 같습니다... 🥁

추가됨

tailwind.config.js를 슬림하게 하기 위해 fast-glob 패키지를 추가했습니다.

사이트를 강화하는 React 코드를 보관하기 위해 src 폴더를 추가했습니다

.

_document.tsx 속성을 포함하여 HTML을 제어하기 위해 lang 파일을 추가했습니다.

모든 사람이 사용하는 것은 아니므로 tailwind-prettier-plugin을 추가했습니다headwind.

키보드 탐색을 사용하는 사용자를 위해 "기본 콘텐츠로 건너뛰기"버튼을 추가했습니다

.

Typescripttype 및 interface 개체

를 통해 더 많은 유형 검사를 추가했습니다.

next.config.js(실험적 기능)을 통해 두루마리 복원을 추가했습니다

.

사이트 바닥글에 소셜 링크를 추가했습니다

.

업데이트됨

모든 파일을 tailwind-prettier-plugin로 포맷했습니다.

JavaScript용 컴파일러SWC로 교체됨

함수, 구성 요소 및 변수의 이름이 보다 선언적이도록 개선되었습니다.

// Before
const [code, setCode] = useState<string>()
const [html, setHtml] = useState<string>()
const [view, setView] = useState<boolean>(true)
const [width, setWidth] = useState<string>('100%')
const [variant, setVariant] = useState<string>('base')
const [themed, setThemed] = useState<boolean>(false)
const [dark, setDark] = useState<boolean>(false)
const [loading, setLoading] = useState<boolean>(false)

// After
const [componentCode, setComponentCode] = useState<string>()
const [componentHtml, setComponentHtml] = useState<string>()
const [showPreview, setShowPreview] = useState<boolean>(true)
const [previewWidth, setPreviewWidth] = useState<string>('100%')
const [selectedVariant, setSelectedVariant] = useState<string>('base')
const [hasDarkMode, setHasDarkMode] = useState<boolean>(false)
const [isDarkMode, setIsDarkMode] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState<boolean>(false)

데스크탑 및 모바일에서 사이트 머리글을 덜 어지럽게 정리했습니다

.

React 구성 요소에 대해 더 친숙한 구문으로 전환됨

type Props = {
  hasDarkMode: boolean
  isDarkMode: boolean
  handleSetIsDarkMode: CallableFunction
}

// Before
const Dark: FunctionComponent<Props> = ({
  hasDarkMode,
  isDarkMode,
  handleSetIsDarkMode,
}) => {}

// After
function Dark({ hasDarkMode, isDarkMode, handleSetIsDarkMode }: Props) {}

{global,build}.css 파일의 이름을 tailwind.css로 바꿨습니다.

tailwind.css 빌드 파일을 .gitignore에 포함

다른 구성과 보다 인라인이 되도록 사이트맵 구성의 이름을 변경했습니다

.

변경 사항

에 따라 How to Contribute 블로그를 정리했습니다.

Typescripttype 및 interface 개체가 개선됨

데이터 가져오기에 사용되는 기능lib 개선

미리 보기 모드를 전환할 때 어두운 모드가 적용되지 않는 문제를 수정했습니다

.

미리 보기 구성 요소에 대한 React 코드를 정리했습니다

.

제거됨

업데이트 전후에 더 이상 사용하지 않는 이전 코드를 제거합니다

.

규칙을 완화하는 옵션을 tsconfig.json에서 제거했습니다

.

layout.tsx 구성 요소 제거됨

충분히 사용되지 않은 개체interface를 제거합니다

.

README에서 불필요한 정보를 제거했습니다

.

중단점 슬라이더 구성 요소를 제거했습니다range.tsx.

next.config.js에서 로컬 선언을 제거했습니다.

예... 많은 변경 사항이 있었습니다. 440개 이상의 파일이 있다고 생각하지만 여기에는 Tailwind CSS 구성 요소가 포함됩니다.

예를 들어 풀 리퀘스트와 커밋 메시지가 이제 더 설명적인 접근 방식을 채택하고 있다는 점은 주목할 가치가 있습니다.

// Before
feat/error-page-components

// After
Feature - Added new error page components

GitHub에서 full pull request을 볼 수 있습니다.

전반적으로 저는 HyperUI에서 React 및 Typescript로 훨씬 더 즐겁게 작업했으며 이 재작성은 몇 가지 문제를 수정하고 사이트를 개선하는 데 도움이 되었습니다.