Skip to content

Commit

Permalink
Upgrade react, tailwindcss etc. and replace mdx.macro with @mdx-js/lo…
Browse files Browse the repository at this point in the history
…ader

For mdx we need to reintroduce craco because of a bug in CRA 5 (see
facebook/create-react-app#12166 and
https://mdxjs.com/docs/getting-started/#create-react-app-cra).

Also we need to add @babel/core for lingui to work.
  • Loading branch information
cmil committed Sep 28, 2022
1 parent 360d94a commit e33dc21
Show file tree
Hide file tree
Showing 10 changed files with 2,029 additions and 4,206 deletions.
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["babel-preset-react-app"]
}
21 changes: 21 additions & 0 deletions craco.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
const {addAfterLoader, loaderByName} = require('@craco/craco')

module.exports = {
webpack: {
configure(webpackConfig) {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.mdx?$/,
loader: require.resolve('@mdx-js/loader')
})
return webpackConfig
}
},
style: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}
}
}
75 changes: 39 additions & 36 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,60 +3,60 @@
"version": "1.2.1",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",
"@headlessui/react": "^1.4.2",
"@lingui/detect-locale": "^3.12.1",
"@lingui/react": "^3.12.1",
"@tailwindcss/typography": "^0.4.1",
"@craco/craco": "^6.4.5",
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-brands-svg-icons": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.7.2",
"@lingui/detect-locale": "^3.14.0",
"@lingui/react": "^3.14.0",
"@tailwindcss/typography": "^0.5.7",
"@tanstack/react-table": "^8.5.13",
"@testing-library/jest-dom": "5.11.5",
"@testing-library/react": "11.1.0",
"@testing-library/user-event": "12.1.10",
"@types/jest": "26.0.15",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/leaflet": "^1.5.23",
"@types/node": "14.14.2",
"@types/react": "17.0.1",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "17.0.0",
"@types/react-helmet": "^6.1.3",
"@types/react-router-bootstrap": "^0.24.5",
"@types/react-dom": "^18.0.0",
"@types/react-router-dom": "^5.3.3",
"autoprefixer": "^9",
"js-yaml": "4.0.0",
"js-yaml": "4.1.0",
"leaflet": "^1.7.1",
"mdx.macro": "^0.2.9",
"postcss": "^8",
"react": "17.0.1",
"react-copy-to-clipboard": "^5.0.4",
"react-dom": "17.0.1",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-leaflet": "^3.1.0",
"react-markdown": "8.0.3",
"react-router-dom": "^6.2.1",
"react-leaflet": "^4.1.0",
"react-markdown": "^8.0.3",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"sass": "^1.43.4",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"sass": "^1.55.0",
"tailwindcss": "^3.1.8",
"tailwindcss-classnames": "^2.2.5",
"typescript": "^4.4.2"
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"csv": "ts-node -O '{\"isolatedModules\":false,\"module\":\"CommonJS\"}' yml2csv.ts && cp ./data.csv ./public/",
"json": "ts-node -O '{\"isolatedModules\":false,\"module\":\"CommonJS\"}' yml2json.ts && cp ./data.json ./src/ && cp ./data.json ./public/",
"beacon": "ts-node -O '{\"isolatedModules\":false,\"module\":\"CommonJS\"}' yml2beacon.ts",
"authors": "ts-node -O '{\"isolatedModules\":false,\"module\":\"CommonJS\"}' fetch-authors.ts",
"locations": "ts-node -O '{\"isolatedModules\":false,\"module\":\"CommonJS\"}' fetch-locations.ts",
"start": "TAILWIND_MODE=watch yarn compile && yarn csv && yarn json && react-scripts start",
"build": "yarn compile && yarn csv && yarn json && yarn beacon && react-scripts build",
"start": "yarn compile && yarn csv && yarn json && craco start",
"build": "yarn compile && yarn csv && yarn json && yarn beacon && craco build",
"test": "yarn compile && yarn csv && yarn json && react-scripts test",
"extract": "lingui extract",
"compile": "lingui compile",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
Expand All @@ -71,10 +71,13 @@
]
},
"devDependencies": {
"@lingui/cli": "^3.12.1",
"@lingui/macro": "^3.12.1",
"@types/js-yaml": "4.0.0",
"@babel/core": "^7.19.1",
"@lingui/cli": "^3.14.0",
"@lingui/macro": "^3.14.0",
"@mdx-js/loader": "^2.1.3",
"@types/js-yaml": "^4.0.5",
"axios": "^0.27.2",
"mdx-loader": "^3.0.2",
"ts-node": "^10.9.1"
}
}
6 changes: 6 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
12 changes: 4 additions & 8 deletions src/components/About.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
import React, {lazy, Suspense} from 'react';
import React from 'react';
import {Helmet} from 'react-helmet-async';
import {Trans, t} from '@lingui/macro';
import {importMDX} from 'mdx.macro';

const Content = lazy(() => importMDX('../about.mdx'));
import {t} from '@lingui/macro';
import Content from '../about.mdx';

export default function About () {
return (
<div className="page p-4 markdown max-w-screen-lg">
<Helmet>
<title>Einakter: {t`About`}</title>
</Helmet>
<Suspense fallback={<div><Trans>Loading...</Trans></div>}>
<Content/>
</Suspense>
<Content/>
</div>
);
}
20 changes: 11 additions & 9 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client';
import {HelmetProvider} from 'react-helmet-async';
import { I18nProvider } from '@lingui/react';
import i18n from './i18n';
import App from './App';
import * as serviceWorker from './serviceWorker';
import reportWebVitals from './reportWebVitals';

import './index.css';

ReactDOM.render(
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<I18nProvider i18n={i18n}>
<HelmetProvider>
<App />
</HelmetProvider>
</I18nProvider>
</React.StrictMode>,
document.getElementById('root')
</React.StrictMode>
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
5 changes: 0 additions & 5 deletions src/mdx.d.ts

This file was deleted.

15 changes: 15 additions & 0 deletions src/reportWebVitals.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};

export default reportWebVitals;
14 changes: 5 additions & 9 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
const { NONAME } = require('dns')

/** @type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
content: [
'./src/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {
colors: {
Expand Down Expand Up @@ -43,15 +42,12 @@ module.exports = {
},
},
},
},
},
height: {
'calc-full-0.75': 'calc(100% - 0.75rem)',
},
},
},
variants: {
extend: {},
},
plugins: [
require('@tailwindcss/typography')({
className: 'markdown',
Expand Down
Loading

0 comments on commit e33dc21

Please sign in to comment.