Update fixes (#463)

* upgrade rw v6

* fix svg

* camelcase svg properties

* lint fixes

api/package.json

@@ -3,10 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@redwoodjs-stripe/api": "^0.1.0-rc.14",
-    "@redwoodjs/api": "5.4.3",
-    "@redwoodjs/auth-dbauth-api": "5.4.3",
-    "@redwoodjs/graphql-server": "5.4.3",
+    "@redwoodjs-stripe/api": "^1.0.7",
+    "@redwoodjs/api": "7.1.2",
+    "@redwoodjs/auth-dbauth-api": "7.1.2",
+    "@redwoodjs/graphql-server": "7.1.2",
     "graphql-scalars": "1.22.2",
     "nodemailer": "6.9.3",
     "stripe": "12.18.0"

package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.35.1",
-    "@redwoodjs/core": "5.4.3",
+    "@redwoodjs/core": "7.1.2",
     "enquirer": "2.3.6"
   },
   "eslintConfig": {

redwood.toml

@@ -13,4 +13,4 @@
 [api]
   port = 8911
 [browser]
-  open = true
+  open = false

web/package.json

@@ -14,12 +14,12 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "1.0.5",
-    "@redwoodjs-stripe/web": "^0.1.0-rc.14",
-    "@redwoodjs/auth": "5.4.3",
-    "@redwoodjs/auth-dbauth-web": "5.4.3",
-    "@redwoodjs/forms": "5.4.3",
-    "@redwoodjs/router": "5.4.3",
-    "@redwoodjs/web": "5.4.3",
+    "@redwoodjs-stripe/web": "^1.0.7",
+    "@redwoodjs/auth": "7.1.2",
+    "@redwoodjs/auth-dbauth-web": "7.1.2",
+    "@redwoodjs/forms": "7.1.2",
+    "@redwoodjs/router": "7.1.2",
+    "@redwoodjs/web": "7.1.2",
     "@stripe/stripe-js": "1.54.2",
     "@xstate/immer": "0.3.3",
     "@xstate/react": "3.2.2",
@@ -33,6 +33,7 @@
     "xstate": "4.38.0"
   },
   "devDependencies": {
+    "@redwoodjs/vite": "7.1.2",
     "@testing-library/user-event": "14.4.3"
   }
 }

web/src/components/Spinner/Spinner.js

@@ -1,6 +1,6 @@
 import styled, { keyframes } from 'styled-components'
 
-import SpinnerSVG from './spinner.svg'
+import SpinnerSVG from './SpinnerSVG'
 
 const turn = keyframes`
   from {

web/src/components/Spinner/SpinnerSVG.jsx

@@ -0,0 +1,20 @@
+const SpinnerSVG = () => {
+  return (
+    <svg
+      width="38"
+      height="38"
+      viewBox="0 0 38 38"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="#000"
+    >
+      <g fill="none" fillRule="evenodd">
+        <g transform="translate(1 1)" strokeWidth="2">
+          <circle strokeOpacity=".25" cx="18" cy="18" r="18" />
+          <path d="M36 18c0-9.94-8.06-18-18-18" />
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+export default SpinnerSVG

web/src/entry.client.jsx

@@ -0,0 +1,17 @@
+import { hydrateRoot, createRoot } from 'react-dom/client'
+
+import App from './App'
+/**
+ * When `#redwood-app` isn't empty then it's very likely that you're using
+ * prerendering. So React attaches event listeners to the existing markup
+ * rather than replacing it.
+ * https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ */
+const redwoodAppElement = document.getElementById('redwood-app')
+
+if (redwoodAppElement.children?.length > 0) {
+  hydrateRoot(redwoodAppElement, <App />)
+} else {
+  const root = createRoot(redwoodAppElement)
+  root.render(<App />)
+}

web/src/pages/FatalErrorPage/FatalErrorPage.js

@@ -5,13 +5,17 @@
 // You can modify this page as you wish, but it is important to keep things simple to
 // avoid the possibility that it will cause its own error. If it does, Redwood will
 // still render a generic error page, but your users will prefer something a bit more
-// thoughtful. =)
+// thoughtful :)
 
-export default () => (
-  <main>
-    <style
-      dangerouslySetInnerHTML={{
-        __html: `
+// This import will be automatically removed when building for production
+import { DevFatalErrorPage } from '@redwoodjs/web/dist/components/DevFatalErrorPage'
+
+export default DevFatalErrorPage ||
+  (() => (
+    <main>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
               html, body {
                 margin: 0;
               }
@@ -42,13 +46,12 @@ export default () => (
                 color: #2D3748;
               }
             `,
-      }}
-    />
-
-    <section>
-      <h1>
-        <span>Something went wrong</span>
-      </h1>
-    </section>
-  </main>
-)
+        }}
+      />
+      <section>
+        <h1>
+          <span>Something went wrong</span>
+        </h1>
+      </section>
+    </main>
+  ))

web/vite.config.js

@@ -0,0 +1,19 @@
+import dns from 'dns'
+
+import { defineConfig } from 'vite'
+
+import redwood from '@redwoodjs/vite'
+
+// See: https://vitejs.dev/config/server-options.html#server-host
+// So that Vite will load on local instead of 127.0.0.1
+dns.setDefaultResultOrder('verbatim')
+
+/**
+ * https://vitejs.dev/config/
+ * @type {import('vite').UserConfig}
+ */
+const viteConfig = {
+  plugins: [redwood()],
+}
+
+export default defineConfig(viteConfig)