Migrate from Create React App to Vite

.eslintrc.json

@@ -1,7 +1,38 @@
 {
   "plugins": ["react"],
-  "extends": ["react-app", "eslint:recommended", "plugin:prettier/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:flowtype/recommended"
+  ],
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "globals": {
+    "vi": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    },
+    "requireConfigFile": false,
     "sourceType": "module"
+  },
+  "rules": {
+    // This wasn't previously enforced. If we ever fix up our prop-types, remove this.
+    "react/prop-types": ["off"]
   }
 }

.github/workflows/ci-workflow.yaml

@@ -10,21 +10,21 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: '18'
+          node-version: '20'
       - run: npm install
       - run: npm run lint
       - run: npm run prettier
         env:
           CI: true
   test:
-    name: Test on node 18 and ubuntu
+    name: Test on node 20 and ubuntu
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v1
         with:
-          node-version: '18'
+          node-version: '20'
       - run: npm install
       - run: npm test
         env:

.github/workflows/deploy-workflow.yaml

@@ -13,16 +13,16 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: '18'
+          node-version: '20'
       - run: npm install
       - run: npm run build
         env:
-          REACT_APP_BITLY_KEY: ${{ secrets.REACT_APP_BITLY_KEY }}
+          VITE_BITLY_KEY: ${{ secrets.VITE_BITLY_KEY }}
       - name: Publish build to github pages
         uses: peaceiris/[email protected]
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: build
+          publish_dir: dist
           publish_branch: gh-pages
           user_name: 'github-actions[bot]'
           user_email: 'github-actions[bot]@users.noreply.github.com'

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

.prettierignore

@@ -1,3 +1,4 @@
 .vscode
 node_modules
-build
+build
+dist

.tool-versions

@@ -1 +1 @@
-nodejs 18.18.0
+nodejs 20.12.2

BEST-PRACTICES.md

@@ -16,7 +16,7 @@ We recommend the following coding practices for high quality contributions:
 - Use descriptive commit messages.
 - Prefer self-explanatory code as much as possible, but provide helpful comments for complex expressions and code blocks.
 - Add unit tests for any new or changed functionality, and update any existing tests that are impacted by your changes.
-  - FSH Online uses [Jest](https://jestjs.io/) as a testing framework and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) as a utility for testing React components.
+  - FSH Online uses [Vitest](https://vitest.dev/) as a testing framework and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) as a utility for testing React components.
   - To run the full test suite, run `npm test`.
   - Ensure all tests are passing.
 - Follow the code style and conventions as enforced by the lint configuration and as evidenced by the existing code.

README.md

@@ -2,8 +2,6 @@
 
 FSH Online is a web application for authoring [FHIR Shorthand (FSH)](https://build.fhir.org/ig/HL7/fhir-shorthand/) and running the [SUSHI](https://github.com/FHIR/sushi) compiler on the authored FSH directly in a web browser. It also runs the [GoFSH](https://github.com/FHIR/GoFSH) decompiler to translate FHIR definitions into FSH. It is available on https://fshschool.org/FSHOnline/.
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
 ## Getting Started
 
 To run the project locally, [Node.js](https://nodejs.org/) must be installed on the user's system.
@@ -20,7 +18,7 @@ Once the dependencies are installed, the application can be run in development m
 npm start
 ```
 
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits. Lint errors will appear in the console.
+Open [http://localhost:5173/FSHOnline/](http://localhost:5173/FSHOnline/) to view it in the browser. The page will reload if you make edits. Lint and prettier errors will appear in the console.
 
 ## FSH Examples
 
@@ -38,7 +36,7 @@ To run the project's tests, run the following command:
 npm test
 ```
 
-This will launch the test runner in the interactive watch mode. For more information, see the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) in the Create React App documentation.
+This will launch the test runner in the interactive watch mode. For more information, see the [Vitest](https://vitest.dev/) documentation.
 
 ### Lint
 
@@ -70,35 +68,17 @@ To build the app for production, run the following command:
 npm run build
 ```
 
-This will bundle the project in production mode and optimize the build for the best performance. The build will be output to the `build` folder. The build is minified and the filenames include the hashes.
-
-The build can be used to deploy the application. For more information, see the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) in the Create React App documentation.
+This will bundle the project in production mode and optimize the build for the best performance. The build will be output to the `dist` folder. This build is minified and can be used to deploy the application. For more information, see Vite's [Building for Production](https://vitejs.dev/guide/build.html#building-for-production) documentation and the [build CLI options](https://vitejs.dev/guide/cli.html#build.)
 
 ### Serve Build
 
 To serve the built application locally for testing, run the following command:
 
 ```bash
-npm run serve-build
+npm run preview
 ```
 
-This will serve the built application from the `build` directory. It will be served on port 8000. You can access it at the following URL: [http://localhost:8000/FSHOnline/](http://localhost:8000/FSHOnline/).
-
-### Eject
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-To eject this project, run:
-
-```bash
-npm run eject
-```
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+This will serve the built application from the `dist` directory. It will be served on port 4173. You can access it at the following URL: [http://localhost:4173/FSHOnline](http://localhost:4173/FSHOnline).
 
 ## Learn More
 
@@ -108,8 +88,7 @@ To learn more about FHIR Shorthand (FSH), check out the [specification](https://
 
 ### React
 
-To learn React, check out the [React documentation](https://reactjs.org/).
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started) as well.
+To learn React, check out the [React documentation](https://react.dev/).
 
 # License
 

public/index.html → index.html

@@ -2,44 +2,36 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="A web playground to write and share FHIR Shorthand. It's so fun, you're guaranteed to get hooked!" />
 
     <meta property="og:title" content="FSH Online"/>
     <meta property="og:description" content="A web playground to write and share FHIR Shorthand. It's so fun, you're guaranteed to get hooked!"/>
     <meta property="og:url" content="/FSHOnline"/>
-    <meta property="og:image" content="%PUBLIC_URL%/FSH-online-logo.png"/>
+    <meta property="og:image" content="/FSH-online-logo.png"/>
 
     <meta name="twitter:title" content="FSH Online"/>
     <meta name="twitter:description" content="A web playground to write and share FHIR Shorthand. It's so fun, you're guaranteed to get hooked!"/>
     <meta property="twitter:url" content="/FSHOnline"/>
     <meta name="twitter:card" content="summary"/>
-    <meta name="twitter:image" content="%PUBLIC_URL%/FSH-online-logo.png"/>
+    <meta name="twitter:image" content="/FSH-online-logo.png"/>
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="/manifest.json" />
     <title>FSH Online</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.