-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
dylankyc
authored and
dylan
committed
Dec 18, 2024
0 parents
commit 1dc19d2
Showing
44 changed files
with
10,780 additions
and
0 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 |
---|---|---|
@@ -0,0 +1,54 @@ | ||
# Sample workflow for building and deploying a mdBook site to GitHub Pages | ||
# | ||
# To get started with mdBook see: https://rust-lang.github.io/mdBook/index.html | ||
# | ||
name: Deploy mdBook site to Pages | ||
on: | ||
# Runs on pushes targeting the default branch | ||
push: | ||
branches: ["main"] | ||
# Allows you to run this workflow manually from the Actions tab | ||
workflow_dispatch: | ||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages | ||
permissions: | ||
contents: read | ||
pages: write | ||
id-token: write | ||
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. | ||
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. | ||
concurrency: | ||
group: "pages" | ||
cancel-in-progress: false | ||
jobs: | ||
# Build job | ||
build: | ||
runs-on: ubuntu-latest | ||
env: | ||
MDBOOK_VERSION: 0.4.43 | ||
steps: | ||
- uses: actions/checkout@v4 | ||
- name: Install mdBook | ||
run: | | ||
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf -y | sh | ||
rustup update | ||
cargo install --version ${MDBOOK_VERSION} mdbook | ||
- name: Setup Pages | ||
id: pages | ||
uses: actions/configure-pages@v5 | ||
- name: Build with mdBook | ||
run: mdbook build | ||
- name: Upload artifact | ||
uses: actions/upload-pages-artifact@v3 | ||
with: | ||
path: ./book | ||
# Deployment job | ||
deploy: | ||
environment: | ||
name: github-pages | ||
url: ${{ steps.deployment.outputs.page_url }} | ||
runs-on: ubuntu-latest | ||
needs: build | ||
steps: | ||
- name: Deploy to GitHub Pages | ||
id: deployment | ||
uses: actions/deploy-pages@v4 |
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 @@ | ||
book |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,6 @@ | ||
[book] | ||
authors = ["dylan"] | ||
language = "en" | ||
multilingual = false | ||
src = "src" | ||
title = "Dylan's Blog" |
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,5 @@ | ||
#!/bin/bash | ||
|
||
mdbook serve | ||
|
||
# open localhost:3000 |
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,33 @@ | ||
# Summary | ||
|
||
# Solana | ||
|
||
- [Quickstart]() | ||
- [使用 TypeScript 创建账户](solana/quickstart/使用TypeScript创建账户.md) | ||
- [不使用 Anchor 开发 solana program(Native Program)](solana/quickstart/不使用Anchor开发solana的program.md) | ||
|
||
# React | ||
|
||
- [Functional Component]() | ||
- [Render all chartjs charts in react typescript tailwindcss projects](react/functional-component/render-all-chartjs-charts.md) | ||
|
||
# Rust | ||
|
||
- [GRPC]() | ||
- [Rust grpc helloworld](rust/grpc/rust-grpc-helloworld.md) | ||
- [Diesel]() | ||
- [Upgrade diesel to 2.0](rust/diesel/upgrade-diesel-to-2.0.md) | ||
- [Use jsonb in diesel](rust/diesel/use-jsonb-in-diesel.md) | ||
- [Tokio]() | ||
- [Tokio Codec](rust/tokio/tokio-codec.md) | ||
- [Async Healthcheck Multiple Endpoints](rust/tokio/async-healthcheck-multiple-endpoints.md) | ||
- [Actix]() | ||
- [prometheus support for actix-web project](rust/actix/prometheus-support-to-actix-web.md) | ||
- [Send Http Request in Handle function And started function When Using Actix crate](rust/actix/send-http-request-in-handle-function-and-started-function-when-using-actix-crate.md) | ||
- [Serde]() | ||
- [Serialize time::OffsetDataTime type using serde_as in serde_with crate](rust/serde/serialize-time-offsetdatetime-type-using-serde-as-in-serde-with-crate.md) | ||
|
||
# MUI | ||
|
||
- [Upgrade]() | ||
- [Upgrade from v4 to v5](mui/upgrade/upgrade-from-v4-to-v5.md) |
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,81 @@ | ||
# Title: Upgrading Material-UI from v4 to v5: A Comprehensive Guide | ||
|
||
<!-- toc --> | ||
|
||
- [Introduction:](#introduction) | ||
- [Step 1: Upgrade React to 17.0.0:](#step-1-upgrade-react-to-1700) | ||
- [Step 2: Update MUI packages and peer dependencies:](#step-2-update-mui-packages-and-peer-dependencies) | ||
- [Step 3: Run codemods:](#step-3-run-codemods) | ||
- [Step 4: Fix broken code:](#step-4-fix-broken-code) | ||
- [Step 5: Replace all imports:](#step-5-replace-all-imports) | ||
- [Step 6: Test and finalize:](#step-6-test-and-finalize) | ||
- [References:](#references) | ||
|
||
<!-- tocstop --> | ||
|
||
# Introduction: | ||
|
||
Material-UI is a popular React component library that provides a set of pre-built UI components for building modern and responsive web applications. With the release of Material-UI v5, there have been significant changes and improvements, making it essential for developers to upgrade from v4 to v5. In this blog post, we will walk you through the step-by-step process of upgrading Material-UI to its latest version. | ||
|
||
# Step 1: Upgrade React to 17.0.0: | ||
|
||
To start the upgrade process, it is necessary to update React to version 17.0.0 or above. This can be done using the following command: | ||
|
||
```bash | ||
yarn upgrade @material-ui/core@^4.11.2 react@^17.0.0 | ||
``` | ||
|
||
# Step 2: Update MUI packages and peer dependencies: | ||
|
||
Next, we need to update the Material-UI packages and their peer dependencies. Run the following commands to install the required packages: | ||
|
||
```bash | ||
yarn add @mui/material @mui/styles | ||
yarn add @mui/lab | ||
yarn add @mui/icons-material | ||
yarn add @emotion/react @emotion/styled | ||
``` | ||
|
||
# Step 3: Run codemods: | ||
|
||
Material-UI provides codemods that automatically adjust your code to account for breaking changes in v5. These codemods help in migrating your codebase efficiently. Run the following command to apply the preset-safe codemod: | ||
|
||
```bash | ||
npx @mui/codemod v5.0.0/preset-safe <path> | ||
``` | ||
|
||
Additionally, you can run specific codemods for individual components or pages if needed. For example: | ||
|
||
```bash | ||
npx @mui/codemod v5.0.0/preset-safe components | ||
npx @mui/codemod v5.0.0/preset-safe pages | ||
``` | ||
|
||
# Step 4: Fix broken code: | ||
|
||
After running the codemods, it's important to review your codebase for any broken code. One common issue is the usage of the `theme.spacing()` function, which has changed in v5. Replace instances of `theme.spacing(2)` with `2`, `theme.spacing(4)` with `4`, and so on, to fix this issue. | ||
|
||
# Step 5: Replace all imports: | ||
|
||
With the release of v5, the package names have changed from `@material-ui/*` to `@mui/*`. To ensure compatibility with the latest version, replace all imports accordingly. Here are some examples: | ||
|
||
```bash | ||
yarn remove @material-ui/core | ||
yarn remove @material-ui/icons | ||
yarn remove @material-ui/lab | ||
yarn remove @material-ui/pickers | ||
|
||
yarn remove @mui/x-data-grid | ||
yarn add @mui/x-data-grid | ||
``` | ||
|
||
# Step 6: Test and finalize: | ||
|
||
After completing the above steps, thoroughly test your application to ensure that it runs without any errors. Make any necessary adjustments or fixes as required. Once you are confident that your application is functioning correctly, commit the changes and finalize the upgrade process. | ||
|
||
Conclusion: | ||
Upgrading Material-UI from v4 to v5 is an important step to take advantage of the latest features, bug fixes, and improvements. By following the steps outlined in this guide, you can smoothly upgrade your Material-UI-based application to the latest version. Remember to thoroughly test your application after the upgrade to ensure everything is functioning as expected. Happy coding with Material-UI v5! | ||
|
||
# References: | ||
|
||
- Material-UI Migration Guide: [Migrating to v5: getting started](https://mui.com/material-ui/migration/migration-v4/) |
Oops, something went wrong.