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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-react"]
}
5 changes: 5 additions & 0 deletions examples/simple/.gitignore
Original file line number Diff line number Diff line change
@@ -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.

Original file line number Diff line number Diff line change
@@ -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
Collaborator 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
Original file line number Diff line number Diff line change
@@ -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
Collaborator 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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"infiniteLoopProtection": true,
"hardReloadOnChange": false,
"view": "browser",
"template": "node",
"container": {
"node": "14"
}
}
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
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.
Original file line number Diff line number Diff line change
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.
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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.
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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',
},
],
};
Loading