⚛ Preact migration + minification bundling

.babelrc

@@ -1,3 +1,7 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    ["@babel/plugin-transform-react-jsx", { "pragma": "h" }]
+  ]
+
 }

.gitignore

@@ -1 +1,2 @@
 node_modules
+dist

package.json

@@ -6,9 +6,9 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "npm run watch:css && webpack-dev-server --open --hot",
-    "build": "npm run build:css && webpack --mode production",
+    "build": "npm run build:css && webpack --mode production --devtool source-map",
     "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
-    "watch:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
+    "watch:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
   },
   "keywords": [
     "Svg",
@@ -20,19 +20,20 @@
   "author": "Anup Aglawe",
   "license": "ISC",
   "dependencies": {
-    "react": "^16.13.1",
+    "preact": "^10.5.4",
     "react-color": "^2.18.1",
-    "react-dom": "^16.13.1",
     "react-toggle-dark-mode": "^1.0.2",
     "save-svg-as-png": "^1.4.17",
     "tailwind-percentage-heights-plugin": "^0.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
+    "@babel/plugin-transform-react-jsx": "^7.10.4",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.1.0",
+    "compression-webpack-plugin": "^6.0.3",
     "css-loader": "^4.3.0",
     "file-loader": "^6.1.0",
     "html-webpack-plugin": "^4.5.0",

src/App.jsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import { h } from 'preact';
+import { useState} from 'preact/hooks'
 import Home from './components/home'
 import './styles/main.css'
 

src/components/alerts.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { h } from 'preact';
 
 function Alert({ content, color }) {
   return (

src/components/canvas.jsx

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react'
+import { h } from 'preact';
+import { useRef } from 'preact/hooks'
 import SVGCode from './svgCode'
 
 function Canvas({ svg }) {

src/components/customBar.jsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import { h } from 'preact';
+import { useState } from 'preact/hooks'
 import './../styles/sideBar.css'
 import Water from './../assets/001-water.svg'
 import { TwitterPicker } from 'react-color'

src/components/home.jsx

@@ -1,4 +1,5 @@
-import React, { useRef, useState } from 'react'
+import { h } from 'preact';
+import { useRef, useState } from 'preact/hooks'
 import Canvas from './canvas'
 import CustomBar from './customBar'
 import Navbar from './nav'
@@ -33,6 +34,7 @@ function Home({ isDark, toggleDarkMode }) {
     <svg
       height="100%"
       width="100%"
+      id="bg-svg"
       viewBox={`0 0 1440 ${height}`}
       xmlns={xmlns}
       ref={svgElement}

src/components/logo.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { h } from 'preact';
 import { shadeColor } from './../helpers/colorBlender';
 
 function Logo({ color}) {

src/components/nav.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { h } from 'preact';
 import { DarkModeSwitch } from 'react-toggle-dark-mode'
 import Github from './../assets/001-github.svg'
 import underWave from './../assets/underwave.png'
@@ -12,8 +12,7 @@ function Navbar({ isDark, toggleDarkMode, color }) {
   return (
     <div className="fixed flex items-center justify-between w-full h-16 bg-white shadow-lg dark:bg-darkish-black dark:text-white">
       <div className="flex items-center px-3 mx-3 font-sans text-lg font-bold nav-item max-h-16">
-        {/* <Logo color={color} /> */}
-        <img src={isDark ? dark : light} alt="" width="60px"/>
+        <img src={isDark ? dark : light} alt="" width="80"/>
         <div className="relative logo-name">
         <span className="text-black nav-logo dark:text-white"> Svg </span>
         <span className="text-black nav-logo dark:text-white"> Wave </span>

src/components/svgCode.jsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import { h } from 'preact';
+import { useState } from 'preact/hooks'
 import { highlightCode } from '../helpers/highlighter'
 import copyBtn from './../assets/001-copy.svg'
 

src/index.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { h, render } from 'preact';
 import App from './App.jsx'
 import './styles/main.css'
 
-ReactDOM.render(<App />, document.getElementById('app'))
+render(<App />, document.getElementById('app'))