Use Vite in Simple Example

marmelab · Feb 4, 2021 · df9565a · df9565a
1 parent f99a312
commit df9565a
Show file tree

Hide file tree

Showing 52 changed files with 388 additions and 3,823 deletions.
diff --git a/examples/simple/.babelrc b/examples/simple/.babelrc
@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-react"]
+}
diff --git a/examples/simple/.gitignore b/examples/simple/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/simple/babel.config.js b/examples/simple/babel.config.js
diff --git a/examples/simple/src/index.html → examples/simple/index.html b/examples/simple/src/index.html → examples/simple/index.html
@@ -1,19 +1,14 @@
 <!DOCTYPE html>
-<html>
-
-<head>
-    <title>React Admin</title>
-    <style>
-        body {
-            margin: 0;
-        }
-    </style>
-    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
-</head>
-
-<body>
-    <div id="root">
-    </div>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>window.global = window</script>
+    <script type="module" src="/src/index.tsx"></script>
     <!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
     <script>
         var WebFontConfig = {
@@ -28,6 +23,5 @@
             s.parentNode.insertBefore(wf, s);
         })();
     </script>
-</body>
-
+  </body>
 </html>
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -1,49 +1,26 @@
 {
-    "name": "simple",
-    "private": true,
-    "version": "3.0.0",
-    "description": "",
-    "main": "index.html",
-    "scripts": {
-        "dev": "./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development",
-        "start": "USE_ALIAS=true ./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development",
-        "serve": "./node_modules/.bin/serve --listen 8080 ./dist",
-        "build": "./node_modules/.bin/webpack-cli --color --mode development --hide-modules true"
-    },
-    "author": "",
-    "license": "MIT",
-    "devDependencies": {
-        "@babel/cli": "^7.10.5",
-        "@babel/core": "^7.11.4",
-        "@babel/plugin-proposal-class-properties": "^7.10.4",
-        "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/preset-env": "^7.11.0",
-        "@babel/preset-react": "^7.10.4",
-        "@babel/preset-typescript": "^7.10.4",
-        "babel-loader": "^8.0.4",
-        "html-loader": "~1.3.0",
-        "html-webpack-plugin": "~4.3.0",
-        "ignore-not-found-export-plugin": "^1.0.1",
-        "serve": "^10.1.2",
-        "style-loader": "~1.2.1",
-        "wait-on": "^3.2.0",
-        "webpack": "~4.5.0",
-        "webpack-bundle-analyzer": "^3.3.2",
-        "webpack-cli": "~2.0.13",
-        "webpack-dev-server": "~3.1.11"
-    },
-    "dependencies": {
-        "@babel/polyfill": "^7.10.4",
-        "@material-ui/core": "^4.11.2",
-        "@material-ui/icons": "^4.11.2",
-        "ra-data-fakerest": "^3.9.0",
-        "ra-i18n-polyglot": "^3.9.0",
-        "ra-input-rich-text": "^3.9.0",
-        "ra-language-english": "^3.9.0",
-        "ra-language-french": "^3.9.0",
-        "react": "^17.0.0",
-        "react-admin": "^3.9.0",
-        "react-dom": "^17.0.0"
-    }
+  "name": "simple-vite",
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
+    "ra-data-fakerest": "^3.9.0",
+    "ra-i18n-polyglot": "^3.9.0",
+    "ra-input-rich-text": "^3.9.0",
+    "ra-language-english": "^3.9.0",
+    "ra-language-french": "^3.9.0",
+    "react": "^17.0.0",
+    "react-admin": "^3.9.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.12.10",
+    "@vitejs/plugin-react-refresh": "^1.2.2",
+    "vite": "^2.0.0-beta.62"
+  }
 }
diff --git a/examples/simple/src/Layout.js → examples/simple/src/Layout.tsx b/examples/simple/src/Layout.js → examples/simple/src/Layout.tsx
diff --git a/examples/simple/src/addUploadFeature.js → examples/simple/src/addUploadFeature.tsx b/examples/simple/src/addUploadFeature.js → examples/simple/src/addUploadFeature.tsx
diff --git a/examples/simple/src/authProvider.js → examples/simple/src/authProvider.tsx b/examples/simple/src/authProvider.js → examples/simple/src/authProvider.tsx
diff --git a/...ples/simple/src/comments/CommentCreate.js → ...les/simple/src/comments/CommentCreate.tsx b/...ples/simple/src/comments/CommentCreate.js → ...les/simple/src/comments/CommentCreate.tsx
diff --git a/examples/simple/src/comments/CommentEdit.js → examples/simple/src/comments/CommentEdit.tsx b/examples/simple/src/comments/CommentEdit.js → examples/simple/src/comments/CommentEdit.tsx
@@ -1,5 +1,4 @@
-import Card from '@material-ui/core/Card';
-import Typography from '@material-ui/core/Typography';
+import { Card, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import * as React from 'react';
 import {

diff --git a/examples/simple/src/comments/CommentList.js → examples/simple/src/comments/CommentList.tsx b/examples/simple/src/comments/CommentList.js → examples/simple/src/comments/CommentList.tsx
diff --git a/examples/simple/src/comments/CommentShow.js → examples/simple/src/comments/CommentShow.tsx b/examples/simple/src/comments/CommentShow.js → examples/simple/src/comments/CommentShow.tsx
diff --git a/examples/simple/src/comments/PostPreview.js → examples/simple/src/comments/PostPreview.tsx b/examples/simple/src/comments/PostPreview.js → examples/simple/src/comments/PostPreview.tsx
diff --git a/...es/simple/src/comments/PostQuickCreate.js → ...s/simple/src/comments/PostQuickCreate.tsx b/...es/simple/src/comments/PostQuickCreate.js → ...s/simple/src/comments/PostQuickCreate.tsx
diff --git a/...c/comments/PostQuickCreateCancelButton.js → .../comments/PostQuickCreateCancelButton.tsx b/...c/comments/PostQuickCreateCancelButton.js → .../comments/PostQuickCreateCancelButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from '@material-ui/core/Button';
+import { Button } from '@material-ui/core';
 import IconCancel from '@material-ui/icons/Cancel';
 import { makeStyles } from '@material-ui/core/styles';
 

diff --git a/...simple/src/comments/PostReferenceInput.js → ...imple/src/comments/PostReferenceInput.tsx b/...simple/src/comments/PostReferenceInput.js → ...imple/src/comments/PostReferenceInput.tsx
@@ -3,11 +3,13 @@ import { Fragment, useState, useCallback } from 'react';
 import { FormSpy, useForm } from 'react-final-form';
 
 import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
+import {
+    Button,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+} from '@material-ui/core';
 
 import { ReferenceInput, SelectInput, useTranslate } from 'react-admin'; // eslint-disable-line import/no-unresolved
 

diff --git a/examples/simple/src/comments/index.js → examples/simple/src/comments/index.tsx b/examples/simple/src/comments/index.js → examples/simple/src/comments/index.tsx
diff --git a/examples/simple/src/customRouteLayout.js → examples/simple/src/customRouteLayout.tsx b/examples/simple/src/customRouteLayout.js → examples/simple/src/customRouteLayout.tsx
diff --git a/examples/simple/src/customRouteNoLayout.js → examples/simple/src/customRouteNoLayout.tsx b/examples/simple/src/customRouteNoLayout.js → examples/simple/src/customRouteNoLayout.tsx
diff --git a/examples/simple/src/data.js → examples/simple/src/data.tsx b/examples/simple/src/data.js → examples/simple/src/data.tsx
diff --git a/examples/simple/src/dataProvider.js → examples/simple/src/dataProvider.tsx b/examples/simple/src/dataProvider.js → examples/simple/src/dataProvider.tsx
diff --git a/examples/simple/src/i18n/en.js → examples/simple/src/i18n/en.ts b/examples/simple/src/i18n/en.js → examples/simple/src/i18n/en.ts
diff --git a/examples/simple/src/i18n/fr.js → examples/simple/src/i18n/fr.ts b/examples/simple/src/i18n/fr.js → examples/simple/src/i18n/fr.ts
diff --git a/examples/simple/src/i18n/index.js → examples/simple/src/i18n/index.ts b/examples/simple/src/i18n/index.js → examples/simple/src/i18n/index.ts
diff --git a/examples/simple/src/i18nProvider.js → examples/simple/src/i18nProvider.tsx b/examples/simple/src/i18nProvider.js → examples/simple/src/i18nProvider.tsx
@@ -2,7 +2,7 @@ import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from './i18n/en';
 
 const messages = {
-    fr: () => import('./i18n/fr.js').then(messages => messages.default),
+    fr: () => import('./i18n/fr').then(messages => messages.default),
 };
 
 export default polyglotI18nProvider(locale => {

diff --git a/examples/simple/src/index.js → examples/simple/src/index.tsx b/examples/simple/src/index.js → examples/simple/src/index.tsx
diff --git a/examples/simple/src/posts/PostCreate.js → examples/simple/src/posts/PostCreate.tsx b/examples/simple/src/posts/PostCreate.js → examples/simple/src/posts/PostCreate.tsx
diff --git a/examples/simple/src/posts/PostEdit.js → examples/simple/src/posts/PostEdit.tsx b/examples/simple/src/posts/PostEdit.js → examples/simple/src/posts/PostEdit.tsx
diff --git a/examples/simple/src/posts/PostList.js → examples/simple/src/posts/PostList.tsx b/examples/simple/src/posts/PostList.js → examples/simple/src/posts/PostList.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Children, Fragment, cloneElement, memo } from 'react';
 import BookIcon from '@material-ui/icons/Book';
-import Chip from '@material-ui/core/Chip';
-import { useMediaQuery } from '@material-ui/core';
+import { Chip, useMediaQuery } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import lodashGet from 'lodash/get';
 import jsonExport from 'jsonexport/dist';

diff --git a/examples/simple/src/posts/PostShow.js → examples/simple/src/posts/PostShow.tsx b/examples/simple/src/posts/PostShow.js → examples/simple/src/posts/PostShow.tsx
@@ -23,7 +23,7 @@ import {
     useLocale,
 } from 'react-admin';
 import { Link } from 'react-router-dom';
-import Button from '@material-ui/core/Button';
+import { Button } from '@material-ui/core';
 import PostTitle from './PostTitle';
 
 const CreateRelatedComment = ({ record }) => (

diff --git a/examples/simple/src/posts/PostTitle.js → examples/simple/src/posts/PostTitle.tsx b/examples/simple/src/posts/PostTitle.js → examples/simple/src/posts/PostTitle.tsx
diff --git a/...ples/simple/src/posts/ResetViewsButton.js → ...les/simple/src/posts/ResetViewsButton.tsx b/...ples/simple/src/posts/ResetViewsButton.js → ...les/simple/src/posts/ResetViewsButton.tsx
diff --git a/...les/simple/src/posts/TagReferenceInput.js → ...es/simple/src/posts/TagReferenceInput.tsx b/...les/simple/src/posts/TagReferenceInput.js → ...es/simple/src/posts/TagReferenceInput.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import { useForm } from 'react-final-form';
 import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin';
-import Button from '@material-ui/core/Button';
+import { Button } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({

diff --git a/examples/simple/src/posts/index.js → examples/simple/src/posts/index.tsx b/examples/simple/src/posts/index.js → examples/simple/src/posts/index.tsx
diff --git a/examples/simple/src/tags/TagCreate.js → examples/simple/src/tags/TagCreate.tsx b/examples/simple/src/tags/TagCreate.js → examples/simple/src/tags/TagCreate.tsx
diff --git a/examples/simple/src/tags/TagEdit.js → examples/simple/src/tags/TagEdit.tsx b/examples/simple/src/tags/TagEdit.js → examples/simple/src/tags/TagEdit.tsx
diff --git a/examples/simple/src/tags/TagList.js → examples/simple/src/tags/TagList.tsx b/examples/simple/src/tags/TagList.js → examples/simple/src/tags/TagList.tsx
diff --git a/examples/simple/src/tags/TagShow.js → examples/simple/src/tags/TagShow.tsx b/examples/simple/src/tags/TagShow.js → examples/simple/src/tags/TagShow.tsx
diff --git a/examples/simple/src/tags/index.js → examples/simple/src/tags/index.tsx b/examples/simple/src/tags/index.js → examples/simple/src/tags/index.tsx
diff --git a/examples/simple/src/users/Aside.js → examples/simple/src/users/Aside.tsx b/examples/simple/src/users/Aside.js → examples/simple/src/users/Aside.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Typography from '@material-ui/core/Typography';
+import { Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({

diff --git a/examples/simple/src/users/UserCreate.js → examples/simple/src/users/UserCreate.tsx b/examples/simple/src/users/UserCreate.js → examples/simple/src/users/UserCreate.tsx
diff --git a/examples/simple/src/users/UserEdit.js → examples/simple/src/users/UserEdit.tsx b/examples/simple/src/users/UserEdit.js → examples/simple/src/users/UserEdit.tsx
diff --git a/...ples/simple/src/users/UserEditEmbedded.js → ...les/simple/src/users/UserEditEmbedded.tsx b/...ples/simple/src/users/UserEditEmbedded.js → ...les/simple/src/users/UserEditEmbedded.tsx
diff --git a/examples/simple/src/users/UserList.js → examples/simple/src/users/UserList.tsx b/examples/simple/src/users/UserList.js → examples/simple/src/users/UserList.tsx
diff --git a/examples/simple/src/users/UserShow.js → examples/simple/src/users/UserShow.tsx b/examples/simple/src/users/UserShow.js → examples/simple/src/users/UserShow.tsx
diff --git a/examples/simple/src/users/UserTitle.js → examples/simple/src/users/UserTitle.tsx b/examples/simple/src/users/UserTitle.js → examples/simple/src/users/UserTitle.tsx
diff --git a/examples/simple/src/users/index.js → examples/simple/src/users/index.tsx b/examples/simple/src/users/index.js → examples/simple/src/users/index.tsx
diff --git a/examples/simple/src/validators.js → examples/simple/src/validators.tsx b/examples/simple/src/validators.js → examples/simple/src/validators.tsx
diff --git a/examples/simple/tsconfig.json b/examples/simple/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": ".",
+        "outDir": "lib",
+        "rootDir": "src",
+        "declaration": true,
+        "allowJs": false,
+    },
+    "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js"],
+    "include": ["src"]
+}
diff --git a/examples/simple/vite.config.js b/examples/simple/vite.config.js
@@ -0,0 +1,35 @@
+import reactRefresh from '@vitejs/plugin-react-refresh';
+import path from 'path';
+
+/**
+ * https://vitejs.dev/config/
+ * @type { import('vite').UserConfig }
+ */
+export default {
+    plugins: [reactRefresh()],
+    alias: [
+        {
+            find: /^react-admin$/,
+            replacement: path.resolve(
+                __dirname,
+                '../../packages/react-admin/src'
+            ),
+        },
+        {
+            find: /^ra-(.*)$/,
+            replacement: path.resolve(__dirname, '../../packages/ra-$1/src'),
+        },
+        {
+            find: /^@material-ui\/icons\/(.*)/,
+            replacement: '@material-ui/icons/esm/$1',
+        },
+        {
+            find: /^@material-ui\/core\/(.+)/,
+            replacement: '@material-ui/core/es/$1',
+        },
+        {
+            find: /^@material-ui\/core$/,
+            replacement: '@material-ui/core/es',
+        },
+    ],
+};
diff --git a/examples/simple/webpack.config.js b/examples/simple/webpack.config.js