Adds support for root component

waspc/ChangeLog.md

@@ -1,9 +1,13 @@
 # Changelog
+
 ## v0.8.2
 
 ### Bug fixes
 - Fixes a file lock error that kills CLI when changing entities with `wasp start` running on newer Macs.
 
+### Support for defining the web app's root component
+You can now define a root component for your client app. This is useful if you want to wrap your app in a provider or have a common layout. You can define it in `app.client.rootComponent` in your `.wasp` file.
+
 ### `wasp deploy` CLI command added
 We have made it much easier to deploy your Wasp apps via a new CLI command, `wasp deploy`. 🚀 This release adds support for Fly.io, but we hope to add more hosting providers soon!
 

waspc/data/Generator/templates/react-app/src/index.js

@@ -4,22 +4,25 @@ import ReactDOM from 'react-dom'
 import { QueryClientProvider } from '@tanstack/react-query'
 
 import router from './router'
-import { 
+import {
   initializeQueryClient,
   queryClientInitialized,
 } from './queryClient'
 import * as serviceWorker from './serviceWorker'
 
-{=# doesClientSetupFnExist =}
-{=& clientSetupJsFnImportStatement =}
-{=/ doesClientSetupFnExist =}
+{=# setupFn.isDefined =}
+{=& setupFn.importStatement =}
+{=/ setupFn.isDefined =}
+{=# rootComponent.isDefined =}
+{=& rootComponent.importStatement =}
+{=/ rootComponent.isDefined =}
 
 startApp()
 
 async function startApp() {
-  {=# doesClientSetupFnExist =}
-  await {= clientSetupJsFnIdentifier =}()
-  {=/ doesClientSetupFnExist =}
+  {=# setupFn.isDefined =}
+  await {= setupFn.importIdentifier =}()
+  {=/ setupFn.isDefined =}
   initializeQueryClient()
 
   await render()
@@ -34,7 +37,13 @@ async function render() {
   const queryClient = await queryClientInitialized
   ReactDOM.render(
     <QueryClientProvider client={queryClient}>
-      { router }
+      {=# rootComponent.isDefined =}
+      <{= rootComponent.importIdentifier =}>
+      {=/ rootComponent.isDefined =}
+      {router}
+      {=# rootComponent.isDefined =}
+      </{= rootComponent.importIdentifier =}>
+      {=/ rootComponent.isDefined =}
     </QueryClientProvider>,
     document.getElementById('root')
   )

waspc/examples/todoApp/src/client/App.jsx

@@ -0,0 +1,10 @@
+export function App({ children }) {
+    return (
+        <div className="p-6">
+            <header className="mb-6">
+                <h1 className="text-3xl font-bold">ToDo App</h1>
+            </header>
+            {children}
+        </div>
+    );
+}

waspc/examples/todoApp/todoApp.wasp

@@ -29,6 +29,7 @@ app todoApp {
     setupFn: import setup from "@server/serverSetup.js"
   },
   client: {
+    rootComponent: import { App } from "@client/App.jsx",
     setupFn: import setup from "@client/clientSetup"
   },
   db: {

waspc/src/Wasp/AppSpec/App/Client.hs

@@ -9,6 +9,7 @@ import Data.Data (Data)
 import Wasp.AppSpec.ExtImport (ExtImport)
 
 data Client = Client
-  { setupFn :: Maybe ExtImport
+  { setupFn :: Maybe ExtImport,
+    rootComponent :: Maybe ExtImport
   }
   deriving (Show, Eq, Data)

waspc/src/Wasp/Generator/JsImport.hs

@@ -1,9 +1,11 @@
 module Wasp.Generator.JsImport
   ( extImportToJsImport,
-    ImportLocation,
+    jsImportToImportJson,
   )
 where
 
+import Data.Aeson (KeyValue ((.=)), object)
+import qualified Data.Aeson as Aeson
 import StrongPath (Dir, File', Path, Posix, Rel, (</>))
 import qualified StrongPath as SP
 import qualified Wasp.AppSpec.ExtImport as EI
@@ -12,15 +14,14 @@ import Wasp.Generator.ExternalCodeGenerator.Common (GeneratedExternalCodeDir)
 import Wasp.JsImport
   ( JsImport,
     JsImportName (JsImportField, JsImportModule),
+    getJsImportStmtAndIdentifier,
     makeJsImport,
   )
 
-type ImportLocation = ()
-
 extImportToJsImport ::
   GeneratedSrcDir d =>
   Path Posix (Rel d) (Dir GeneratedExternalCodeDir) ->
-  Path Posix (Rel ImportLocation) (Dir d) ->
+  Path Posix (Rel importLocation) (Dir d) ->
   EI.ExtImport ->
   JsImport
 extImportToJsImport pathFromSrcDirToExtCodeDir pathFromImportLocationToSrcDir extImport = makeJsImport importPath importName
@@ -32,3 +33,17 @@ extImportToJsImport pathFromSrcDirToExtCodeDir pathFromImportLocationToSrcDir ex
     extImportNameToJsImportName :: EI.ExtImportName -> JsImportName
     extImportNameToJsImportName (EI.ExtImportModule name) = JsImportModule name
     extImportNameToJsImportName (EI.ExtImportField name) = JsImportField name
+
+jsImportToImportJson :: Maybe JsImport -> Aeson.Value
+jsImportToImportJson maybeJsImport = maybe notDefinedValue mkTmplData maybeJsImport
+  where
+    notDefinedValue = object ["isDefined" .= False]
+
+    mkTmplData :: JsImport -> Aeson.Value
+    mkTmplData jsImport =
+      let (jsImportStmt, jsImportIdentifier) = getJsImportStmtAndIdentifier jsImport
+       in object
+            [ "isDefined" .= True,
+              "importStatement" .= jsImportStmt,
+              "importIdentifier" .= jsImportIdentifier
+            ]

waspc/src/Wasp/Generator/ServerGenerator.hs

@@ -222,7 +222,7 @@ genServerJs spec =
     (maybeSetupJsFnImportStmt, maybeSetupJsFnImportIdentifier) =
       (fst <$> maybeSetupJsFnImportDetails, snd <$> maybeSetupJsFnImportDetails)
 
-    relPathToServerSrcDir :: Path Posix (Rel ()) (Dir C.ServerSrcDir)
+    relPathToServerSrcDir :: Path Posix (Rel importLocation) (Dir C.ServerSrcDir)
     relPathToServerSrcDir = [reldirP|./|]
 
 genRoutesDir :: AppSpec -> Generator [FileDraft]

waspc/src/Wasp/Generator/ServerGenerator/ExternalAuthG.hs

@@ -142,7 +142,7 @@ getTmplDataForAuthMethodConfig auth authMethod =
     maybeOnSignInFnImportDetails = getJsImportStmtAndIdentifier' <$> maybeGetUserFieldsFn
     (maybeOnSignInFnImportStmt, maybeOnSignInFnImportIdentifier) = (fst <$> maybeOnSignInFnImportDetails, snd <$> maybeOnSignInFnImportDetails)
 
-    relPathFromAuthConfigToServerSrcDir :: Path Posix (Rel ()) (Dir C.ServerSrcDir)
+    relPathFromAuthConfigToServerSrcDir :: Path Posix (Rel importLocation) (Dir C.ServerSrcDir)
     relPathFromAuthConfigToServerSrcDir = [reldirP|../../../../|]
 
 depsRequiredByPassport :: AppSpec -> [App.Dependency.Dependency]

waspc/src/Wasp/Generator/ServerGenerator/JobGenerator.hs

@@ -78,7 +78,7 @@ genJob (jobName, job) =
         ]
     maybeJobSchedule = jobScheduleTmplData <$> J.schedule job
 
-    relPathFromJobsDirToServerSrcDir :: Path Posix (Rel ()) (Dir C.ServerSrcDir)
+    relPathFromJobsDirToServerSrcDir :: Path Posix (Rel importLocation) (Dir C.ServerSrcDir)
     relPathFromJobsDirToServerSrcDir = [reldirP|../|]
 
 -- Creates a file that is imported on the server to ensure all job JS modules are loaded

waspc/src/Wasp/Generator/ServerGenerator/JsImport.hs

@@ -4,7 +4,6 @@ import Data.Maybe (fromJust)
 import StrongPath (Dir, Path, Posix, Rel)
 import qualified StrongPath as SP
 import qualified Wasp.AppSpec.ExtImport as EI
-import Wasp.Generator.JsImport (ImportLocation)
 import qualified Wasp.Generator.JsImport as GJI
 import Wasp.Generator.ServerGenerator.Common (ServerSrcDir)
 import Wasp.Generator.ServerGenerator.ExternalCodeGenerator (extServerCodeDirInServerSrcDir)
@@ -16,13 +15,13 @@ import Wasp.JsImport
 import qualified Wasp.JsImport as JI
 
 getJsImportStmtAndIdentifier ::
-  Path Posix (Rel ImportLocation) (Dir ServerSrcDir) ->
+  Path Posix (Rel importLocation) (Dir ServerSrcDir) ->
   EI.ExtImport ->
   (JsImportStatement, JsImportIdentifier)
 getJsImportStmtAndIdentifier pathFromImportLocationToExtCodeDir = JI.getJsImportStmtAndIdentifier . extImportToJsImport pathFromImportLocationToExtCodeDir
 
 extImportToJsImport ::
-  Path Posix (Rel ImportLocation) (Dir ServerSrcDir) ->
+  Path Posix (Rel importLocation) (Dir ServerSrcDir) ->
   EI.ExtImport ->
   JsImport
 extImportToJsImport = GJI.extImportToJsImport serverExtDir

waspc/src/Wasp/Generator/ServerGenerator/OperationsG.hs

@@ -134,5 +134,5 @@ operationTmplData operation =
   where
     (importStmt, importIdentifier) = getJsImportStmtAndIdentifier relPathFromOperationsDirToServerSrcDir (AS.Operation.getFn operation)
 
-    relPathFromOperationsDirToServerSrcDir :: Path Posix (Rel ()) (Dir C.ServerSrcDir)
+    relPathFromOperationsDirToServerSrcDir :: Path Posix (Rel importLocation) (Dir C.ServerSrcDir)
     relPathFromOperationsDirToServerSrcDir = [reldirP|../|]

waspc/src/Wasp/Generator/WebAppGenerator.hs

@@ -8,7 +8,6 @@ where
 
 import Data.Aeson (object, (.=))
 import Data.List (intercalate)
-import Data.Maybe (fromMaybe, isJust)
 import StrongPath
   ( Dir,
     File',
@@ -46,7 +45,7 @@ import Wasp.Generator.WebAppGenerator.ExternalCodeGenerator
   ( extClientCodeGeneratorStrategy,
     extSharedCodeGeneratorStrategy,
   )
-import Wasp.Generator.WebAppGenerator.JsImport (getJsImportStmtAndIdentifier)
+import Wasp.Generator.WebAppGenerator.JsImport (extImportToImportJson)
 import Wasp.Generator.WebAppGenerator.OperationsGenerator (genOperations)
 import Wasp.Generator.WebAppGenerator.RouterGenerator (genRouter)
 import Wasp.Util ((<++>))
@@ -246,16 +245,13 @@ genIndexJs spec =
       (C.asWebAppFile [relfile|src/index.js|])
       ( Just $
           object
-            [ "doesClientSetupFnExist" .= isJust maybeSetupJsFunction,
-              "clientSetupJsFnImportStatement" .= fromMaybe "" maybeSetupJsFnImportStmt,
-              "clientSetupJsFnIdentifier" .= fromMaybe "" maybeSetupJsFnImportIdentifier
+            [ "setupFn" .= extImportToImportJson relPathToWebAppSrcDir maybeSetupJsFunction,
+              "rootComponent" .= extImportToImportJson relPathToWebAppSrcDir maybeRootComponent
             ]
       )
   where
     maybeSetupJsFunction = AS.App.Client.setupFn =<< AS.App.client (snd $ getApp spec)
-    maybeSetupJsFnImportDetails = getJsImportStmtAndIdentifier relPathToWebAppSrcDir <$> maybeSetupJsFunction
-    (maybeSetupJsFnImportStmt, maybeSetupJsFnImportIdentifier) =
-      (fst <$> maybeSetupJsFnImportDetails, snd <$> maybeSetupJsFnImportDetails)
+    maybeRootComponent = AS.App.Client.rootComponent =<< AS.App.client (snd $ getApp spec)
 
-    relPathToWebAppSrcDir :: Path Posix (Rel ()) (Dir C.WebAppSrcDir)
+    relPathToWebAppSrcDir :: Path Posix (Rel importLocation) (Dir C.WebAppSrcDir)
     relPathToWebAppSrcDir = [reldirP|./|]

waspc/src/Wasp/Generator/WebAppGenerator/JsImport.hs

@@ -1,10 +1,14 @@
 module Wasp.Generator.WebAppGenerator.JsImport where
 
+import qualified Data.Aeson as Aeson
 import Data.Maybe (fromJust)
 import StrongPath (Dir, Path, Posix, Rel)
 import qualified StrongPath as SP
+import Wasp.AppSpec.ExtImport (ExtImport)
 import qualified Wasp.AppSpec.ExtImport as EI
-import Wasp.Generator.JsImport (ImportLocation)
+import Wasp.Generator.JsImport
+  ( jsImportToImportJson,
+  )
 import qualified Wasp.Generator.JsImport as GJI
 import Wasp.Generator.WebAppGenerator.Common (WebAppSrcDir)
 import Wasp.Generator.WebAppGenerator.ExternalCodeGenerator (extClientCodeDirInWebAppSrcDir)
@@ -15,14 +19,22 @@ import Wasp.JsImport
   )
 import qualified Wasp.JsImport as JI
 
+extImportToImportJson ::
+  Path Posix (Rel importLocation) (Dir WebAppSrcDir) ->
+  Maybe ExtImport ->
+  Aeson.Value
+extImportToImportJson pathFromImportLocationToSrcDir maybeExtImport = jsImportToImportJson jsImport
+  where
+    jsImport = extImportToJsImport pathFromImportLocationToSrcDir <$> maybeExtImport
+
 getJsImportStmtAndIdentifier ::
-  Path Posix (Rel ImportLocation) (Dir WebAppSrcDir) ->
+  Path Posix (Rel importLocation) (Dir WebAppSrcDir) ->
   EI.ExtImport ->
   (JsImportStatement, JsImportIdentifier)
 getJsImportStmtAndIdentifier pathFromImportLocationToSrcDir = JI.getJsImportStmtAndIdentifier . extImportToJsImport pathFromImportLocationToSrcDir
 
 extImportToJsImport ::
-  Path Posix (Rel ImportLocation) (Dir WebAppSrcDir) ->
+  Path Posix (Rel importLocation) (Dir WebAppSrcDir) ->
   EI.ExtImport ->
   JsImport
 extImportToJsImport = GJI.extImportToJsImport webAppExtDir

waspc/src/Wasp/Generator/WebAppGenerator/RouterGenerator.hs

@@ -167,7 +167,7 @@ createPageTemplateData page =
     importStmt :: String
     (importStmt, _) = getJsImportStmtAndIdentifier $ applyJsImportAlias (Just importAlias) $ extImportToJsImport relPathToWebAppSrcDir pageComponent
 
-    relPathToWebAppSrcDir :: Path Posix (Rel ()) (Dir C.WebAppSrcDir)
+    relPathToWebAppSrcDir :: Path Posix (Rel importLocation) (Dir C.WebAppSrcDir)
     relPathToWebAppSrcDir = [reldirP|./|]
 
     pageComponent :: AS.ExtImport.ExtImport