3.0.0-beta.2 vite migration instead of create-react-app.

obss · Oct 30, 2023 · a3a5c8a · a3a5c8a
1 parent c73ab26
commit a3a5c8a
Show file tree

Hide file tree

Showing 15 changed files with 3,385 additions and 10,914 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,2 @@
-PORT=3183
-REACT_APP_VERSION=$npm_package_version
-REACT_APP_NAME=$npm_package_name
-SKIP_PREFLIGHT_CHECK=true
+VITE_REACT_APP_VERSION=$npm_package_version
+VITE_REACT_APP_NAME=$npm_package_name
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -15,7 +15,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [18.12.0]
+                node-version: [18.18.2]
 
         steps:
             - uses: actions/checkout@v3
@@ -30,10 +30,10 @@ jobs:
             - name: Install dependencies
               run: rm -rf node_modules && yarn install
             - run: npm run build-storybook
-            - run: touch ./build/.nojekyll
+            - run: touch ./storybook-dist/.nojekyll
 
             - name: Deploy 🚀
               uses: JamesIves/github-pages-deploy-action@v4.2.5
               with:
                   branch: gh-pages # The branch the action should deploy to.
-                  folder: build # The folder the action should deploy.
+                  folder: storybook-dist # The folder the action should deploy.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@ react-curved-text.iml
 stats.html
 /node_modules
 /build
+/storybook-dist
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="description"
+            content="react-curved-text a library for creating circular / curved texts in React projects"
+        />
+        <title>React Curved Text</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.jsx"></script>
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-curved-text",
-    "version": "3.0.0-beta.1",
+    "version": "3.0.0-beta.2",
     "description": "A library for creating circular / curved texts in React projects",
     "keywords": [
         "react",
@@ -16,8 +16,10 @@
         "build": "rimraf dist && rollup -c --environment NODE_ENV:production",
         "start": "rimraf dist && rollup -c -w --environment NODE_ENV:development",
         "prepublishOnly": "npm run build",
-        "start-storybook": "set PUBLIC_URL=. && react-scripts start",
-        "build-storybook": "react-scripts build"
+        "start-storybook": "vite --port 3183",
+        "preview-storybook": "vite preview",
+        "build-storybook": "vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
     },
     "repository": {
         "type": "git",
@@ -43,6 +45,7 @@
         "@rollup/plugin-json": "4.1.0",
         "@rollup/plugin-node-resolve": "14.0.1",
         "@rollup/plugin-replace": "4.0.0",
+        "@vitejs/plugin-react": "^4.0.4",
         "eslint": "8.23.1",
         "eslint-config-prettier": "8.5.0",
         "eslint-plugin-prettier": "4.2.1",
@@ -52,13 +55,13 @@
         "prettier": "2.7.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-scripts": "5.0.1",
         "rollup": "2.79.0",
         "rollup-plugin-node-builtins": "2.1.2",
         "rollup-plugin-node-globals": "1.4.0",
         "rollup-plugin-peer-deps-external": "2.2.4",
         "rollup-plugin-terser": "7.0.2",
-        "rollup-plugin-visualizer": "5.8.1"
+        "rollup-plugin-visualizer": "5.8.1",
+        "vite": "^4.4.5"
     },
     "dependencies": {
         "svg-path-commander": "1.0.5"

diff --git a/public/index.html b/public/index.html
diff --git a/rollup.config.js b/rollup.config.js
@@ -62,7 +62,7 @@ export default [
 
                 // search for files other than .js files (must already
                 // be transpiled by a previous plugin!)
-                extensions: [ '.js', '.coffee' ],  // Default: [ '.js' ]
+                extensions: [ '.js', '.jsx', '.coffee' ],  // Default: [ '.js' ]
 
                 // if true then uses of `global` won't be dealt with by this plugin
                 ignoreGlobal: false,  // Default: false

diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
diff --git a/src/HeaderInfo.js → src/HeaderInfo.jsx b/src/HeaderInfo.js → src/HeaderInfo.jsx
@@ -1,22 +1,22 @@
 const HeaderInfo = () => {
-    const versionInfo = `Version: ${process.env.REACT_APP_VERSION}`;
+    const versionInfo = `Version: ${import.meta.env.VITE_REACT_APP_VERSION}`;
 
     return (
         <>
             <div className={'logo-div'}>
                 <a href={'https://www.npmjs.com/package/react-curved-text'} target="_blank" rel="noreferrer">
-                    <img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />
+                    <img src={import.meta.env.BASE_URL + '/logo.png'} alt="logo" />
                 </a>
             </div>
             <div className={'header-div'}>
                 <span className={'githubIcon'} title="View on GitHub">
                     <a href={'https://github.com/obss/react-curved-text'} target="_blank" rel="noreferrer">
-                        <img src={process.env.PUBLIC_URL + '/github.png'} alt="github_icon" />
+                        <img src={import.meta.env.BASE_URL + '/github.png'} alt="github_icon" />
                     </a>
                 </span>
                 <span className={'npmIcon'} title="View on npmjs">
                     <a href={'https://www.npmjs.com/package/react-curved-text'} target="_blank" rel="noreferrer">
-                        <img src={process.env.PUBLIC_URL + '/npm.png'} alt="npm_icon" />
+                        <img src={import.meta.env.BASE_URL + '/npm.png'} alt="npm_icon" />
                     </a>
                 </span>
                 <span className={'versionInfo'} title="Current Version">
@@ -27,7 +27,7 @@ const HeaderInfo = () => {
             </div>
             <div className={'obssTriangle'}>
                 <a className={'triangleIcon'} href={'https://obss.tech/'} target={'_blank'} rel="noreferrer">
-                    <img width={50} height={50} src={process.env.PUBLIC_URL + '/obss.png'} alt={'obss'} />
+                    <img width={50} height={50} src={import.meta.env.BASE_URL + '/obss.png'} alt={'obss'} />
                 </a>
             </div>
         </>

diff --git a/src/MyComponent.js → src/MyComponent.jsx b/src/MyComponent.js → src/MyComponent.jsx
diff --git a/src/lib/ReactCurvedText.js → src/lib/ReactCurvedText.jsx b/src/lib/ReactCurvedText.js → src/lib/ReactCurvedText.jsx
diff --git a/src/index.js → src/main.jsx b/src/index.js → src/main.jsx
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        react({
+            include: '**/*.{js,jsx,tsx}',
+        }),
+    ],
+    base: '/react-curved-text/',
+    build: {
+        outDir: 'storybook-dist',
+    },
+});