Skip to content

[feat] Upgrade templates and Cookiecutter to utilize Vite, modern React + TypeScript versions #102

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 24 commits into
base: master
Choose a base branch
from
Open

[feat] Upgrade templates and Cookiecutter to utilize Vite, modern React + TypeScript versions #102

wants to merge 24 commits into from

Conversation

sfc-gh-bnisco
Copy link
Contributor

@sfc-gh-bnisco sfc-gh-bnisco commented Apr 16, 2025 •
edited
Loading

Problems:

  • Create React App (and its underlying react-scripts) have been deprecated by the React Team.
  • The templates and examples are based on React 16 (outdated version of React)
    • The templates and examples utilize an older version of TypeScript
  • There are some unnecessary traces of React in the template-reactless template

Solutions:

  • This PR migrates away from CRA in favor of a simple Vite setup for both React and Reactless templates
  • This updates React to v18
    • Leverages the createRoot API since ReactDOM.render is deprecated
  • Upgrades to latest version of TypeScript
  • Removes unnecessary traces of react in the template-reactless template
  • Updates inline JSDoc comments

sfc-gh-bnisco
sfc-gh-bnisco commented Apr 16, 2025
View reviewed changes
examples/MaterialLogin/material_login/frontend/src/MaterialLogin.tsx
}

const onReset = () => Streamlit.setComponentValue({})
const formik = useFormik<LoginFormValues>({
Copy link
Contributor Author

Choose a reason for hiding this comment

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

note: I migrated this to leverage useFormik instead of the render prop version it used before. Might be easier to review without whitespace showing.

examples/MaterialLogin/material_login/frontend/src/MaterialLogin.tsx
import Typography from '@material-ui/core/Typography'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import Button from "@mui/material/Button"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

note: Had to update to the latest Material UI since the version it was on did not support React 18

examples/MaterialLogin/e2e/test_material_login.py

email_field = frame.get_by_placeholder("username@domain.com")
password_field = frame.get_by_placeholder("your password")
invalid_username_text = frame.get_by_text("username must be a valid email")
Copy link
Contributor Author

Choose a reason for hiding this comment

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

note: The logic for when validation is run is slightly different given the formik changes

...okiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx

/**
* This is a React-based component template. The passed props are coming from the
* Streamlit library. Your custom args can be accessed via the `args` props.
* A template for creating Streamlit components with React
Copy link
Contributor Author

Choose a reason for hiding this comment

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

note: I updated a lot of comments in this file since this is a first touchpoint for people writing custom components and I wanted it to be clearer.

...okiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx
Comment on lines 57 to -29
useEffect(() => {
Streamlit.setComponentValue(numClicks)
}, [numClicks])
Copy link
Contributor Author

Choose a reason for hiding this comment

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

note: This fixes an issue where this code wasn't following the best practices of React Hooks.

cookiecutter/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/.env
@@ -1,6 +1,3 @@
# Run the component's dev server on :3001
# (The Streamlit dev server already runs on :3000)
PORT=3001

# Don't automatically open the web browser on `npm run start`.
BROWSER=none
Copy link
Contributor Author

Choose a reason for hiding this comment

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

note: Vite does not open the browser by default, so this is unnecessary

...ter/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/index.html
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Streamlit Component" />
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="/bootstrap.min.css" />
Copy link
Contributor Author

Choose a reason for hiding this comment

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

note: This change is to align with how Vite handles static asset paths

@sfc-gh-bnisco sfc-gh-bnisco marked this pull request as ready for review April 16, 2025 22:27
@sfc-gh-bnisco sfc-gh-bnisco requested review from a team as code owners April 16, 2025 22:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kajarenc kajarenc kajarenc approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@sfc-gh-bnisco @kajarenc