Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate Simple example To Vite Instead Of Webpack For Faster Development #5857

Merged
merged 15 commits into from Feb 16, 2021
2 changes: 1 addition & 1 deletion examples/demo/package.json
Expand Up @@ -8,7 +8,7 @@
"@types/inflection": "^1.5.28",
"@types/recharts": "^1.8.10",
"data-generator-retail": "^3.9.0",
"fakerest": "^2.2.0",
"fakerest": "^3.0.0",
"fetch-mock": "~6.3.0",
"json-graphql-server": "~2.1.3",
"proxy-polyfill": "^0.3.0",
Expand Down
3 changes: 3 additions & 0 deletions examples/simple/.babelrc
@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-react"]
}
5 changes: 5 additions & 0 deletions examples/simple/.gitignore
@@ -0,0 +1,5 @@
node_modules
.DS_Store
dist
dist-ssr
*.local
24 changes: 0 additions & 24 deletions examples/simple/babel.config.js

This file was deleted.

@@ -1,19 +1,19 @@
<!DOCTYPE html>
<html>

<head>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you change that?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the old values didn't provide any value AFAIK. Besides, minimum-scale can be an accessibility issue for browsers that still respect them (those I use don't actually)

<title>React Admin</title>
<style>
body {
margin: 0;
}
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>
</head>
<body>
<div id="root"></div>
<script>window.global = window</script>
<script src="/bundle.js"></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 = {
Expand All @@ -28,6 +28,5 @@
s.parentNode.insertBefore(wf, s);
})();
</script>
</body>

</body>
</html>
32 changes: 32 additions & 0 deletions examples/simple/index.html
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Admin</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div id="root"></div>
<script>window.global = window</script>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need this for webpack?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed for one of our dependency, can't remember which one though. Not related to webpack

<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 = {
google: { families: ['Roboto:300,400,500,700:latin'] }
};
(function () {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</body>
</html>
81 changes: 34 additions & 47 deletions examples/simple/package.json
@@ -1,49 +1,36 @@
{
"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",
"version": "0.0.0",
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development",
"start": "vite",
fzaninotto marked this conversation as resolved.
Show resolved Hide resolved
"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",
"ts-loader": "^8.0.14",
"html-loader": "~1.3.0",
"html-webpack-plugin": "~4.3.0",
"ignore-not-found-export-plugin": "^1.0.1",
"style-loader": "~1.2.1",
"typescript": "^4.1.3",
"vite": "^2.0.0-beta.62",
"webpack": "~4.5.0",
"webpack-cli": "~2.0.13",
"webpack-dev-server": "~3.1.11"
}
}
9 changes: 9 additions & 0 deletions examples/simple/sandbox.config.json
@@ -0,0 +1,9 @@
{
"infiniteLoopProtection": true,
"hardReloadOnChange": false,
"view": "browser",
"template": "node",
"container": {
"node": "14"
}
}
File renamed without changes.
@@ -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 {
Expand Down
@@ -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';

Expand Down
Expand Up @@ -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

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Expand Up @@ -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 => {
Expand Down
File renamed without changes.
@@ -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';
Expand Down
Expand Up @@ -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 }) => (
Expand Down
Expand Up @@ -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({
Expand Down
File renamed without changes.
File renamed without changes.
@@ -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 => ({
Expand Down
File renamed without changes.
File renamed without changes.
20 changes: 20 additions & 0 deletions examples/simple/tsconfig.json
@@ -0,0 +1,20 @@
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "lib",
"rootDir": "src",
"declaration": true,
"allowJs": false,
"jsx": "react",
"lib": [
"es2017",
"dom"
],
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js"],
"include": ["src"]
}
35 changes: 35 additions & 0 deletions 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',
},
],
};