Move to Vite

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.4.0
+
+- Switch to Vite for bundling
+- Remove `tsup`
+- Update dependencies
+- Drop support for React v15 & v16
+
 ## 0.3.0
 
 - Use `tsup` for bundling

README.md

@@ -78,3 +78,17 @@ import { BlurhashCanvas } from "react-blurhash";
 ## Browser support
 
 Blurhash depends on `Uint8ClampedArray`, which is supported on all mainstream browsers and >=IE11.
+
+## Development
+
+### Build
+
+```sh
+npm run build
+```
+
+### Start Development Server
+
+```sh
+npm run dev
+```

demo/BlurhashImageEncoder.tsx

@@ -101,6 +101,9 @@ const getImageData = (image: HTMLImageElement, resolutionX: number, resolutionY:
   canvas.width = resolutionX;
   canvas.height = resolutionY;
   const context = canvas.getContext('2d');
+  if (!context) {
+    throw new Error('Failed to get 2D context');
+  }
   context.drawImage(image, 0, 0, resolutionX, resolutionY);
   return context.getImageData(0, 0, resolutionX, resolutionY);
 };
@@ -127,7 +130,11 @@ const BlurhashImageEncoder: React.FunctionComponent<Props> = ({ onChange }) => {
     [data, componentX, componentY],
   );
 
-  useEffect(() => onChange(blurhash), [blurhash]);
+  useEffect(() => {
+    if (blurhash) {
+      onChange(blurhash);
+    }
+  }, [blurhash]);
 
   const handleFileChange = useCallback((file: File) => {
     const imageUrl = URL.createObjectURL(file);
@@ -162,7 +169,7 @@ const BlurhashImageEncoder: React.FunctionComponent<Props> = ({ onChange }) => {
             min="1"
             max="9"
             value={componentX}
-            onChange={e => setComponentX(Number(e.target.value))}
+            onChange={(e) => setComponentX(Number(e.target.value))}
           />
         </Setting>
 
@@ -171,7 +178,7 @@ const BlurhashImageEncoder: React.FunctionComponent<Props> = ({ onChange }) => {
             min="1"
             max="9"
             value={componentY}
-            onChange={e => setComponentY(Number(e.target.value))}
+            onChange={(e) => setComponentY(Number(e.target.value))}
           />
         </Setting>
       </Settings>

demo/Demo.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useMemo } from 'react';
-import { hot } from 'react-hot-loader/root';
 import styled from 'styled-components';
 import { isBlurhashValid } from 'blurhash';
 
@@ -152,7 +151,7 @@ const BlurhashDemo = ({ hash }: { hash: string }) => {
             max="1024"
             step="8"
             value={size}
-            onChange={e => setSize(Number(e.target.value))}
+            onChange={(e) => setSize(Number(e.target.value))}
           />
         </Setting>
 
@@ -162,7 +161,7 @@ const BlurhashDemo = ({ hash }: { hash: string }) => {
             max="128"
             step="1"
             value={resolution}
-            onChange={e => setResolution(Number(e.target.value))}
+            onChange={(e) => setResolution(Number(e.target.value))}
           />
         </Setting>
 
@@ -172,7 +171,7 @@ const BlurhashDemo = ({ hash }: { hash: string }) => {
             max="20"
             step="1"
             value={punch}
-            onChange={e => setPunch(Number(e.target.value))}
+            onChange={(e) => setPunch(Number(e.target.value))}
           />
         </Setting>
       </SettingsContainer>
@@ -204,7 +203,7 @@ const BlurhashCanvasDemo = ({ hash }: { hash: string }) => {
             max="1024"
             step="8"
             value={size}
-            onChange={e => setSize(Number(e.target.value))}
+            onChange={(e) => setSize(Number(e.target.value))}
           />
         </Setting>
 
@@ -214,7 +213,7 @@ const BlurhashCanvasDemo = ({ hash }: { hash: string }) => {
             max="20"
             step="1"
             value={punch}
-            onChange={e => setPunch(Number(e.target.value))}
+            onChange={(e) => setPunch(Number(e.target.value))}
           />
         </Setting>
       </SettingsContainer>
@@ -242,29 +241,29 @@ const Demo = () => {
         <StyledRadioInput
           label="Blurhash string"
           input={{
-            onChange: e => setMode(e.target.value as 'hash'),
+            onChange: (e) => setMode(e.target.value as 'hash'),
             value: 'hash',
             checked: mode === 'hash',
           }}
         />
         <StyledRadioInput
           label="Encode image"
           input={{
-            onChange: e => setMode(e.target.value as 'image'),
+            onChange: (e) => setMode(e.target.value as 'image'),
             value: 'image',
             checked: mode === 'image',
           }}
         />
       </ModeSelect>
 
       {mode === 'hash' && (
-        <TextInput value={hashInput} onChange={e => setHashInput(e.target.value.trim())} />
+        <TextInput value={hashInput} onChange={(e) => setHashInput(e.target.value.trim())} />
       )}
 
       {mode === 'image' && (
         <>
           <Hint>Note: encoding is done in the browser only (no server involved)!</Hint>
-          <BlurhashImageEncoder onChange={hash => setEncodedHash(hash)} value={encodedHash} />
+          <BlurhashImageEncoder onChange={(hash) => setEncodedHash(hash)} value={encodedHash} />
         </>
       )}
 
@@ -312,4 +311,4 @@ const Demo = () => {
   );
 };
 
-export default hot(Demo);
+export default Demo;

demo/FileInput.tsx

@@ -58,9 +58,9 @@ const FileInput: React.FunctionComponent<Props> = ({
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const { files } = event.currentTarget;
-      const newFile = files[0];
+      const newFile = files ? files[0] : undefined;
 
-      if (newFile !== file) {
+      if (newFile && newFile !== file) {
         setFile(newFile);
         onChange(newFile);
       }