-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(Demo): Update the demo to use vite instead of react-scripts
- Loading branch information
1 parent
7b5126a
commit 024b805
Showing
20 changed files
with
18,560 additions
and
56,051 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| { | ||
| "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], | ||
| "editor.codeActionsOnSave": { | ||
| "source.fixAll.eslint": true | ||
| "source.fixAll.eslint": "explicit" | ||
| }, | ||
| "typescript.tsdk": "node_modules\\typescript\\lib" | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,2 @@ | ||
| REACT_APP_PACKAGE_NAME=react-snowfall | ||
| REACT_APP_GITHUB_URL=https://github.com/cahilfoley/react-snowfall | ||
| VITE_PACKAGE_NAME=react-snowfall | ||
| VITE_GITHUB_URL=https://github.com/cahilfoley/react-snowfall |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }, | ||
| ], | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,24 @@ | ||
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
|
||
| # dependencies | ||
| /node_modules | ||
| /.pnp | ||
| .pnp.js | ||
|
|
||
| # testing | ||
| /coverage | ||
|
|
||
| # production | ||
| /build | ||
|
|
||
| # misc | ||
| .DS_Store | ||
| .env.local | ||
| .env.development.local | ||
| .env.test.local | ||
| .env.production.local | ||
|
|
||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| # Logs | ||
| logs | ||
| *.log | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| pnpm-debug.log* | ||
| lerna-debug.log* | ||
|
|
||
| node_modules | ||
| dist | ||
| dist-ssr | ||
| *.local | ||
|
|
||
| # Editor directories and files | ||
| .vscode/* | ||
| !.vscode/extensions.json | ||
| .idea | ||
| .DS_Store | ||
| *.suo | ||
| *.ntvs* | ||
| *.njsproj | ||
| *.sln | ||
| *.sw? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,30 @@ | ||
| # Snowfall Demo | ||
|
|
||
|  | ||
| # React + TypeScript + Vite | ||
|
|
||
| This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
|
|
||
| Currently, two official plugins are available: | ||
|
|
||
| - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
| - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh | ||
|
|
||
| ## Expanding the ESLint configuration | ||
|
|
||
| If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: | ||
|
|
||
| - Configure the top-level `parserOptions` property like this: | ||
|
|
||
| ```js | ||
| export default { | ||
| // other rules... | ||
| parserOptions: { | ||
| ecmaVersion: 'latest', | ||
| sourceType: 'module', | ||
| project: ['./tsconfig.json', './tsconfig.node.json'], | ||
| tsconfigRootDir: __dirname, | ||
| }, | ||
| } | ||
| ``` | ||
|
|
||
| - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` | ||
| - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` | ||
| - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list |
151 changes: 77 additions & 74 deletions
151
packages/demo/public/index.html → packages/demo/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,77 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> | ||
| <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" | ||
| /> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script> | ||
| <link | ||
| href="https://fonts.googleapis.com/css?family=Montserrat|Work+Sans&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <meta name="theme-color" content="#000000" /> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" /> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" /> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" /> | ||
| <title>Snowfall Demo | %REACT_APP_PACKAGE_NAME%</title> | ||
| <style> | ||
| #github-star-button { | ||
| position: fixed; | ||
| top: 16px; | ||
| left: 16px; | ||
| z-index: 50; | ||
| } | ||
|
|
||
| .pace { | ||
| -webkit-pointer-events: none; | ||
| pointer-events: none; | ||
|
|
||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| user-select: none; | ||
| } | ||
|
|
||
| .pace-inactive { | ||
| display: none; | ||
| } | ||
|
|
||
| .pace .pace-progress { | ||
| background: #29d; | ||
| position: fixed; | ||
| z-index: 2000; | ||
| top: 0; | ||
| right: 100%; | ||
| width: 100%; | ||
| height: 2px; | ||
| } | ||
| </style> | ||
| <script | ||
| src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js" | ||
| integrity="sha256-EPrkNjGEmCWyazb3A/Epj+W7Qm2pB9vnfXw+X6LImPM=" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| </head> | ||
| <body> | ||
| <noscript> You need to enable JavaScript to run this app. </noscript> | ||
| <div id="github-star-button"> | ||
| <a | ||
| class="github-button" | ||
| href="https://github.com/cahilfoley/react-snowfall" | ||
| data-icon="octicon-star" | ||
| aria-label="Star cahilfoley/react-snowfall on GitHub" | ||
| > | ||
| Star | ||
| </a> | ||
| </div> | ||
| <div id="root"></div> | ||
| <script async defer src="https://buttons.github.io/buttons.js"></script> | ||
| </body> | ||
| </html> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="shortcut icon" href="/favicon.ico" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" | ||
| /> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script> | ||
| <link | ||
| href="https://fonts.googleapis.com/css?family=Montserrat|Work+Sans&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <meta name="theme-color" content="#000000" /> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | ||
| <meta | ||
| name="description" | ||
| content="A high performance, canvas based react component that creates a snowfall effect" | ||
| /> | ||
| <title>Snowfall Demo | %VITE_PACKAGE_NAME%</title> | ||
| <style> | ||
| #github-star-button { | ||
| position: fixed; | ||
| top: 16px; | ||
| left: 16px; | ||
| z-index: 50; | ||
| } | ||
|
|
||
| .pace { | ||
| -webkit-pointer-events: none; | ||
| pointer-events: none; | ||
|
|
||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| user-select: none; | ||
| } | ||
|
|
||
| .pace-inactive { | ||
| display: none; | ||
| } | ||
|
|
||
| .pace .pace-progress { | ||
| background: #29d; | ||
| position: fixed; | ||
| z-index: 2000; | ||
| top: 0; | ||
| right: 100%; | ||
| width: 100%; | ||
| height: 2px; | ||
| } | ||
| </style> | ||
| <script | ||
| src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js" | ||
| integrity="sha256-EPrkNjGEmCWyazb3A/Epj+W7Qm2pB9vnfXw+X6LImPM=" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| </head> | ||
| <body> | ||
| <div id="github-star-button"> | ||
| <a | ||
| class="github-button" | ||
| href="https://github.com/cahilfoley/react-snowfall" | ||
| data-icon="octicon-star" | ||
| aria-label="Star cahilfoley/react-snowfall on GitHub" | ||
| > | ||
| Star | ||
| </a> | ||
| </div> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| <script async defer src="https://buttons.github.io/buttons.js"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.