Merge pull request #197 from oracle/viteMigration

Vite migration and dependency updates

templates/ords-remix-jwt-sample/README.md

@@ -40,7 +40,7 @@ To set up your Auth0 tenant and application follow the steps outlined in [The Au
 
 #### 3. configure your `.env` file as it follows
 
-You can create a `.env` file or rename the `.env.example` file to `.env` and use it to fill the following environment variables: 
+You can create a `.env` file or rename the `.env.example` file to `.env` and use it to fill the following environment variables:
 
 ```bash
 # We refer to some variables as Autonomous Database specific but you can use whichever ORDS URL you want/have as well as the user, as long as this user is capable of creating and REST Enabling other schemas.
@@ -180,14 +180,11 @@ Once the server is up you will see the following output on your console:
 
 ```bash
 > [email protected] dev
-> remix dev --manual
+> remix vite:dev
 
-
- 💿  remix dev
-
- info  building...
- info  built (3.1s)
-[remix-serve] http://localhost:3000 (http://<IP_HERE>:3000)
+  ➜  Local:   http://localhost:3000/
+  ➜  Network: use --host to expose
+  ➜  press h + enter to show help
 ```
 
 Now you can go to `http://localhost:3000` and see the ORDS Concert App in action fell free to explore the Discover Functionalities and don't forget to Enable the Tooltips functionality to learn more about Oracle REST Data Services!
@@ -212,4 +209,4 @@ All names, characters, organizations, places, events and portrayals are entirely
 
 Copyright (c) 2024 Oracle and/or its affiliates.
 
-Released under the Universal Permissive License v1.0 as shown at https://oss.oracle.com/licenses/upl/.
+Released under the Universal Permissive License v1.0 as shown at <https://oss.oracle.com/licenses/upl/>.

templates/ords-remix-jwt-sample/app/components/concerts/ConcertCard.tsx

@@ -88,7 +88,7 @@ function ConcertCard(props: ConcertCardProps) {
               </AccordionComponent>
               )
             }
-            <Link to={`/concerts/${concert.event_id}`}>
+            <Link to={`../concerts/${concert.event_id}`}>
               <h1 className="font-sans font-bold hover:underline">
                 {concertTitle}
               </h1>

templates/ords-remix-jwt-sample/app/components/homepage/ArtistCard.tsx

@@ -40,7 +40,7 @@ function ArtistCard(props: ArtistCardProps) {
           <CardContent>
             <div className="flex flex-row justify-center">
               <div className="flex flex-col items-center">
-                <Link to={`/artists/${artist.artist_id}${enableTooltips ? '?tooltips' : ''}`}>
+                <Link to={`../artists/${artist.artist_id}${enableTooltips ? '?tooltips' : ''}`}>
                   <h3 className="my-2 text-xl font-medium hover:underline">
                     { artist.name }
                   </h3>

templates/ords-remix-jwt-sample/app/components/homepage/ConcertCard.tsx

@@ -44,7 +44,7 @@ function ConcertCard(props: ConcertCardProps) {
         <CardContent sx={{ maxWidth: '500px' }}>
           <div className="mx-4">
             <div className="flex items-center">
-              <Link to={`/concerts/${concert.event_id}?${enableTooltips ? 'tooltips' : ''}`}>
+              <Link to={`../concerts/${concert.event_id}?${enableTooltips ? 'tooltips' : ''}`}>
                 <h1 className="font-sans font-bold hover:underline">
                   {`${concert.artist_name} at ${concert.venue_name}, ${concert.city_name}`}
                 </h1>

templates/ords-remix-jwt-sample/app/components/search/DatePicker.tsx

@@ -4,7 +4,8 @@
 ** All rights reserved
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/
 */
-import ReactDatePicker from 'react-datepicker';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css?url';
 
 interface DateRangePickerProps {
   startDate: null | Date;
@@ -22,7 +23,6 @@ function DateRangePicker(props : DateRangePickerProps) {
     startDate, endDate, handleSetEndDate, handleSetStartDate,
   } = props;
 
-  const DatePicker = ReactDatePicker.default;
   return (
     <div className="flex flex-col items-center justify-center space-y-4">
       <DatePicker

templates/ords-remix-jwt-sample/app/root.tsx

@@ -5,13 +5,11 @@
 ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/
 */
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
 } from '@remix-run/node';
 import { json, ErrorResponse } from '@remix-run/node';
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -22,7 +20,6 @@ import {
 } from '@remix-run/react';
 import { ReactElement } from 'react';
 import { StyledEngineProvider } from '@mui/material';
-import datepicker from 'react-datepicker/dist/react-datepicker.css';
 import stylesheet from './tailwind.css?url';
 import type { LoaderError } from './models/LoaderError';
 import {
@@ -83,7 +80,6 @@ export function ErrorBoundary() : ReactElement {
             <TooltipButton />
             <ScrollRestoration />
             <Scripts />
-            <LiveReload />
           </StyledEngineProvider>
         </body>
       </html>
@@ -108,7 +104,6 @@ export function ErrorBoundary() : ReactElement {
             <TooltipButton />
             <ScrollRestoration />
             <Scripts />
-            <LiveReload />
           </StyledEngineProvider>
         </body>
       </html>
@@ -117,15 +112,8 @@ export function ErrorBoundary() : ReactElement {
   return <h1 className="text-3xl font-semibold">Unknown Error</h1>;
 }
 
-export const links: LinksFunction = () => [
-  {
-    rel: 'stylesheet',
-    href: stylesheet,
-  },
-  {
-    rel: 'stylesheet',
-    href: datepicker,
-  },
+export const links = () => [
+  { rel: 'stylesheet', href: stylesheet },
 ];
 
 /**
@@ -153,7 +141,6 @@ export default function App() : ReactElement {
           <Footer />
           <ScrollRestoration />
           <Scripts />
-          <LiveReload />
         </StyledEngineProvider>
       </body>
     </html>

templates/ords-remix-jwt-sample/app/routes/private.tsx

@@ -82,13 +82,13 @@ export default function Screen() : ReactElement {
       </div>
       <div className="flex h-4/5 flex-row justify-center p-8">
         <div className="flex w-1/5 flex-col items-start">
-          <Link to="/private/profile" onClick={() => { handleTabSelect(Tabs.PROFILE); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.PROFILE ? 'bg-slate-100' : ''}`}>
+          <Link to="../private/profile" onClick={() => { handleTabSelect(Tabs.PROFILE); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.PROFILE ? 'bg-slate-100' : ''}`}>
             Profile
           </Link>
-          <Link to="/private/followed-artists" onClick={() => { handleTabSelect(Tabs.FOLLOWED_ARTISTS); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.FOLLOWED_ARTISTS ? 'bg-slate-100' : ''}`}>
+          <Link to="../private/followed-artists" onClick={() => { handleTabSelect(Tabs.FOLLOWED_ARTISTS); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.FOLLOWED_ARTISTS ? 'bg-slate-100' : ''}`}>
             Followed Artists
           </Link>
-          <Link to="/private/followed-events" onClick={() => { handleTabSelect(Tabs.UPCOMING_SHOWS); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.UPCOMING_SHOWS ? 'bg-slate-100' : ''}`}>
+          <Link to="../private/followed-events" onClick={() => { handleTabSelect(Tabs.UPCOMING_SHOWS); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.UPCOMING_SHOWS ? 'bg-slate-100' : ''}`}>
             Followed Events
           </Link>
         </div>

templates/ords-remix-jwt-sample/package.json

@@ -4,7 +4,7 @@
   "description": "ORDS sample application",
   "main": "index.js",
   "scripts": {
-    "build": "remix build",
+    "build": "remix vite:build",
     "migrate": "node ./ords/migrate.js",
     "seed": "node ./ords/seed.js",
     "drop": "node ./ords/drop.js",
@@ -14,10 +14,10 @@
     "lint:frontend": "eslint ./app --ext .js,.jsx,.ts,.tsx",
     "lint:backend": "eslint ./ords --ext .js,.ts",
     "lint": "npm run lint:frontend && npm run lint:backend",
-    "start": "remix-serve ./build/index.js",
+    "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc",
     "icons": "npx @svgr/cli --out-dir app/components/icons -- app/assets/icons",
-    "dev": "remix dev --manual"
+    "dev": "remix vite:dev"
   },
   "watch": {
     "icons": {
@@ -36,12 +36,12 @@
     "@emotion/cache": "^11.13.0",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "6.0.2",
-    "@mui/material": "6.0.2",
-    "@remix-run/css-bundle": "2.13.1",
-    "@remix-run/node": "2.13.1",
-    "@remix-run/react": "2.13.1",
-    "@remix-run/serve": "2.13.1",
+    "@mui/icons-material": "5.16.14",
+    "@mui/material": "5.16.14",
+    "@remix-run/dev": "2.15.2",
+    "@remix-run/node": "2.15.2",
+    "@remix-run/react": "2.15.2",
+    "@remix-run/serve": "2.15.2",
     "dotenv": "^16.4.5",
     "embla-carousel": "^8.2.0",
     "embla-carousel-react": "^8.2.0",
@@ -50,13 +50,13 @@
     "material-ui-popup-state": "^5.3.1",
     "node-fetch": "3.3.2",
     "react": "18.3.1",
-    "react-datepicker": "7.3.0",
+    "react-datepicker": "7.5.0",
     "react-dom": "18.3.1",
     "remix-auth": "3.7.0",
-    "remix-auth-auth0": "1.10.0"
+    "remix-auth-auth0": "1.10.0",
+    "vite": "5.4.11"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.13.1",
     "@svgr/cli": "8.1.0",
     "@svgr/plugin-jsx": "8.1.0",
     "@svgr/plugin-prettier": "8.1.0",
@@ -76,10 +76,11 @@
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.34.3",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-tailwindcss": "3.17.4",
-    "eslint-plugin-tsdoc": "0.2.17",
+    "eslint-plugin-tailwindcss": "3.17.5",
+    "eslint-plugin-tsdoc": "0.4.0",
     "postcss": "8.4.47",
     "tailwindcss": "3.4.3",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}

templates/ords-remix-jwt-sample/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+      tailwindcss: {},
+    },
+  };
+

templates/ords-remix-jwt-sample/tsconfig.json

@@ -6,6 +6,7 @@
       "isolatedModules": true,
       "esModuleInterop": true,
       "jsx": "react-jsx",
+      "module": "ESNext",
       "moduleResolution": "Bundler",
       "resolveJsonModule": true,
       "target": "ES2022",

templates/ords-remix-jwt-sample/vite.config.ts

@@ -0,0 +1,28 @@
+import { vitePlugin as remix } from '@remix-run/dev';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+declare module '@remix-run/node' {
+  // or cloudflare, deno, etc.
+  interface Future {
+    v3_singleFetch: true;
+  }
+}
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [remix(
+    {
+      future: {
+        unstable_optimizeDeps: true,
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+        v3_lazyRouteDiscovery: true,
+        v3_singleFetch: true,
+      },
+    },
+  ), tsconfigPaths()],
+});