HyperUI Rewritten... What's Changed?

Why Rewrite?

I've known I wanted to rewrite HyperUI for a few months now, however, I wanted the rewrite to have meaning and to provide a benefit to myself and contributors.

I believe, that as developers we fall into the trap of constantly rewriting what we've done. As an example of that, I've had three different personal websites in a year which all do the same thing and if anything, the latest version does less than the first version.

However, that no longer applies as I want changes to have meaning and progress the projects (in this case HyperUI) forward.

So, what was the reason behind the HyperUI rewrite...

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.

The other projects referenced come from https://nextjs.org/examples.

In short, the React and Typescript code of HyperUI didn't feel like it was mine.

Here's how I changed that... 🥁

Added

  • Added the fast-glob package to slim down the tailwind.config.js
  • Added a src folder to hold the React code that powers the site
  • Added a _document.tsx file to control the HTML including the lang attribute
  • Added the tailwind-prettier-plugin as not everyone uses headwind
  • Added a "Skip to main content" button for those using keyboard navigation
  • Added more type checking through Typescript type and interface objects
  • Added scroll restoration through the next.config.js (experimental feature)
  • Added social links to the site footer

Updated

  • Formatted all files with the tailwind-prettier-plugin
  • Swapped to the SWC compiler for JavaScript
  • Improved the names of functions, components and variables to be more declarative
// 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)
  • Cleaned up the site header to be less cluttered on desktop and mobile
  • Switched to a more familiar syntax for React components
type Props = {
  hasDarkMode: boolean
  isDarkMode: boolean
  handleSetIsDarkMode: CallableFunction
}

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

// After
function Dark({ hasDarkMode, isDarkMode, handleSetIsDarkMode }: Props) {}
  • Swapped the name of {global,build}.css files to tailwind.css
  • Included the tailwind.css build file to .gitignore
  • Renamed the sitemap config to be more inline with other configs
  • Cleaned up the How to Contribute blog following changes
  • Improved the Typescript type and interface objects
  • Improve the lib functions that are used for data fetching
  • Fixed an issue with dark mode not applying when switching preview mode
  • Cleaned up the React code for the preview component

Removed

  • Remove old code that was no longer use before or after the update
  • Removed options from tsconfig.json that were relaxing the rules
  • Removed the layout.tsx component
  • Remove unused interface objects that were underused
  • Removed unnecessary information from the README
  • Removed the breakpoint slider component range.tsx
  • Removed the local declaration from the next.config.js

Yup... There were a lot of changes, I believe 440+ files, but that does include the Tailwind CSS components.

It's worth noting that pull requests and commit messages are now adopting a more descriptive approach as well, for example.

// Before
feat/error-page-components

// After
Feature - Added new error page components

You can see the full pull request on GitHub.

Overall, I've been enjoying working with React and Typescript a lot more on HyperUI and this rewrite helped fix a few issues and make some improvements to the site.