Adapt example apps to project struct change (#809)

* Separate ext code to client and server

* Use skeleton in createNewProject and refactor

* Refactor Lib.hs to use ExceptT

* Fix formatting

* Pop up returns

* Extract liftIO and add a do block

Co-authored-by: Shayne Czyzewski <[email protected]>

* Address some review comments

* Add skeleton comment

* Extract common CommandError message

* Separate skeleton comment into two rows

* Move server and client dirs into src

* Simplify maybeToEither

* Further refactor Lib.hs

* Further simplify skeleton comment

* Add shared code directory to project structure

* Update e2e test inputs

* Update e2e test outputs

* Fix formatting

* Fix bug in compile function

Co-authored-by: Martin Šošić <[email protected]>

* Change map to fmap in compile function

* Fix formatting

* Force git to include empty directories

* Remove extra empty line from .gitkeep files

* Add .jsconfig to enable go-to-definition

* Watch shared directory for changes

* Add final newline to jsconfigs

* Fix regular and e2e tests

* Update e2e tests

* Fix cli template packaging and update todoApp

* Add a shared function demo to todoApp

* Update waspc and e2e tests

* Fix compiler warnings and rename function

* Rename mkError to mkParserError

* Remove redundant empty line

* Fix test warnings

* Fix formatting

* Update waspc.cabal with jsconfigs

* Minimize jsconfig.json files

* Add jsconfigs to waspc todoApp

* Update e2e tests

* Update e2e tests

* Update docs for new project structure

* Update todoApp example to new structure

* Update ItWaspsOnMyMachine

* Update thoughts

* Update Waspello to new structure

* Update Waspleau to new structure

* Update Realworld to new structure, fix warnings

* Fix directory tree watching on wasp start

* Implement review feedback

* Fix typo in docs

Co-authored-by: Shayne Czyzewski <[email protected]>

* Fix typo in docs

Co-authored-by: Shayne Czyzewski <[email protected]>

* Fix another typo in docs

Co-authored-by: Shayne Czyzewski <[email protected]>

* Add src prefix to file path in docs

Co-authored-by: Shayne Czyzewski <[email protected]>

* Remove env server file

* Apply suggestions from code review

Co-authored-by: Shayne Czyzewski <[email protected]>

* Address code review comments

* Fix incorrect path in docs

* Fix references to ext in docs

* Edit changelog and add migration guide

* Further update docs to new structure

* Update blogs about example apps to new structure

* Fix typo in docs

Co-authored-by: Shayne Czyzewski <[email protected]>

* Update typo on frontpage

Co-authored-by: Shayne Czyzewski <[email protected]>

* Add missing src in docs

Co-authored-by: Shayne Czyzewski <[email protected]>

Co-authored-by: Shayne Czyzewski <[email protected]>
Co-authored-by: Martin Šošić <[email protected]>

examples/realworld/.gitignore

@@ -1,2 +1,3 @@
 /.wasp/
-.env
+/.env.server
+/.env.client

examples/realworld/.wasproot

@@ -1 +1 @@
-File marking the root of Wasp project.
+File marking the root of Wasp project.

examples/realworld/main.wasp

@@ -35,39 +35,39 @@ app Conduit {
 
 route RootRoute { path: "/", to: MainPage }
 page MainPage {
-  component: import Main from "@ext/MainPage.js"
+  component: import Main from "@client/MainPage.js"
 }
 
 route LogInRoute { path: "/login", to: LogInPage }
 page LogInPage {
-  component: import LogIn from "@ext/auth/LoginPage.js"
+  component: import LogIn from "@client/auth/LoginPage.js"
 }
 
 route RegisterRoute { path: "/register", to: SignUpPage }
 page SignUpPage {
-  component: import SignUp from "@ext/auth/SignupPage.js"
+  component: import SignUp from "@client/auth/SignupPage.js"
 }
 
 route UserSettingsRoute { path: "/settings", to: UserSettingsPage }
 page UserSettingsPage {
   authRequired: true,
-  component: import UserSettings from "@ext/user/components/UserSettingsPage.js"
+  component: import UserSettings from "@client/user/components/UserSettingsPage.js"
 }
 
 route UserProfileRoute { path: "/@:username", to: UserProfilePage }
 page UserProfilePage {
-  component: import UserProfile from "@ext/user/components/UserProfilePage.js"
+  component: import UserProfile from "@client/user/components/UserProfilePage.js"
 }
 
 route ArticleEditorRoute { path: "/editor/:articleSlug?", to: ArticleEditorPage }
 page ArticleEditorPage {
   authRequired: true,
-  component: import ArticleEditor from "@ext/article/components/ArticleEditorPage.js"
+  component: import ArticleEditor from "@client/article/components/ArticleEditorPage.js"
 }
 
 route ArticleViewRoute { path: "/article/:articleSlug", to: ArticleViewPage }
 page ArticleViewPage {
-  component: import ArticleView from "@ext/article/components/ArticleViewPage.js"
+  component: import ArticleView from "@client/article/components/ArticleViewPage.js"
 }
 
 // ----------------- Entities ------------------ //
@@ -123,84 +123,84 @@ psl=}
 // ----------------- User operations ------------------ //
 
 query getUser {
-  fn: import { getUser } from "@ext/user/queries.js",
+  fn: import { getUser } from "@server/user/queries.js",
   entities: [User]
 }
 
 action updateUser {
-  fn: import { updateUser } from "@ext/user/actions.js",
+  fn: import { updateUser } from "@server/user/actions.js",
   entities: [User]
 }
 
 action followUser {
-  fn: import { followUser } from "@ext/user/actions.js",
+  fn: import { followUser } from "@server/user/actions.js",
   entities: [User]
 }
 
 // ----------------- Article operations ------------------ //
 
 query getArticlesByUser {
-  fn: import { getArticlesByUser } from "@ext/article/queries.js",
+  fn: import { getArticlesByUser } from "@server/article/queries.js",
   entities: [Article]
 }
 
 query getFavoritedArticles {
-  fn: import { getFavoritedArticles } from "@ext/article/queries.js",
+  fn: import { getFavoritedArticles } from "@server/article/queries.js",
   entities: [Article]
 }
 
 query getFollowedArticles {
-  fn: import { getFollowedArticles } from "@ext/article/queries.js",
+  fn: import { getFollowedArticles } from "@server/article/queries.js",
   entities: [Article, User]
 }
 
 query getAllArticles {
-  fn: import { getAllArticles } from "@ext/article/queries.js",
+  fn: import { getAllArticles } from "@server/article/queries.js",
   entities: [Article]
 }
 
 query getArticle {
-  fn: import { getArticle } from "@ext/article/queries.js",
+  fn: import { getArticle } from "@server/article/queries.js",
   entities: [Article]
 }
 
 query getArticleComments {
-  fn: import { getArticleComments } from "@ext/article/queries.js",
+  fn: import { getArticleComments } from "@server/article/queries.js",
   entities: [Comment]
 }
 
 action createArticle {
-  fn: import { createArticle } from "@ext/article/actions.js",
+  fn: import { createArticle } from "@server/article/actions.js",
   entities: [Article]
 }
 
 action updateArticle {
-  fn: import { updateArticle } from "@ext/article/actions.js",
+  fn: import { updateArticle } from "@server/article/actions.js",
   entities: [Article]
 }
 
 action deleteArticle {
-  fn: import { deleteArticle } from "@ext/article/actions.js",
+  fn: import { deleteArticle } from "@server/article/actions.js",
   entities: [Article]
 }
 
 action setArticleFavorited {
-  fn: import { setArticleFavorited } from "@ext/article/actions.js",
+  fn: import { setArticleFavorited } from "@server/article/actions.js",
   entities: [Article]
 }
 
 action createComment {
-  fn: import { createComment } from "@ext/article/actions.js",
+  fn: import { createComment } from "@server/article/actions.js",
   entities: [Comment]
 }
 
 action deleteComment {
-  fn: import { deleteComment } from "@ext/article/actions.js",
+  fn: import { deleteComment } from "@server/article/actions.js",
   entities: [Comment]
 }
 
 query getTags {
-  fn: import { getTags } from "@ext/article/queries.js",
+  fn: import { getTags } from "@server/article/queries.js",
   entities: [ArticleTag, Article]
 }
 

examples/realworld/ext/MainPage.js → examples/realworld/src/client/MainPage.js

@@ -128,6 +128,7 @@ const Tags = () => {
       <Typography variant="subtitle1" className={classes.title}>Popular tags</Typography>
         { popularTags.map(tag => (
           <Chip
+            key={tag.name}
             className={classes.chip}
             label={`${tag.name} (${tag.numArticles})`}
           />

examples/realworld/ext/article/components/ArticleList.js → examples/realworld/src/client/article/components/ArticleList.js

@@ -75,10 +75,9 @@ const Article = (props) => {
         <Button component={ Link } to={`/article/${article.slug}`} size="small" color="primary">
           Read more
         </Button>
-
         <span className={classes.tags}>
-          { article.tags.map(t => (
-            <Chip className={classes.chip} label={t.name}/>
+          { article.tags.map(tag => (
+            <Chip key={tag.name} className={classes.chip} label={tag.name}/>
           ))}
         </span>
       </CardActions>

examples/realworld/ext/article/components/ArticleViewPage.js → examples/realworld/src/client/article/components/ArticleViewPage.js

@@ -112,7 +112,7 @@ const ArticleViewPage = (props) => {
         <Grid item xs={8}>
           <div className={classes.tags}>
             <span>Tags:</span>
-            { article.tags.map(tag => <Chip label={tag.name} />) }
+            { article.tags.map(tag => <Chip key={tag.name} label={tag.name} />) }
           </div>
 
           { isMyArticle && (

examples/realworld/src/client/jsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // The following settings enable IDE support in user-provided source files.
+    // Editing them might break features like import autocompletion and
+    // definition lookup. Don't change them unless you know what you're doing.
+    //
+    // The relative path to the generated web app's root directory. This must be
+    // set to define the "paths" option.
+    "baseUrl": "../../.wasp/out/web-app/",
+    "paths": {
+      // Resolve all "@wasp" imports to the generated source code.
+      "@wasp/*": [
+        "src/*"
+      ],
+      // Resolve all non-relative imports to the correct node module. Source:
+      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
+      "*": [
+        // Start by looking for the definiton inside the node modules root
+        // directory...
+        "node_modules/*",
+        // ... If that fails, try to find it inside definitely-typed type
+        // definitions.
+        "node_modules/@types/*"
+      ]
+    }
+  }
+}

examples/realworld/src/server/jsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // The following settings enable IDE support in user-provided source files. 
+    // Editing them might break features like import autocompletion and
+    // definition lookup. Don't change them unless you know what you're doing.
+    //
+    // The relative path to the generated web app's root directory. This must be
+    // set to define the "paths" option.
+    "baseUrl": "../../.wasp/out/server/",
+    "paths": {
+      // Resolve all "@wasp" imports to the generated source code.
+      "@wasp/*": [
+        "src/*"
+      ],
+      // Resolve all non-relative imports to the correct node module. Source:
+      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
+      "*": [
+        // Start by looking for the definiton inside the node modules root
+        // directory...
+        "node_modules/*",
+        // ... If that fails, Try to find it inside definitely-typed type
+        // definitions.
+        "node_modules/@types/*"
+      ]
+    }
+  }
+}

examples/realworld/src/shared/jsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    // The following settings enable IDE support in user-provided source files. 
+    // Editing them might break features like import autocompletion and
+    // definition lookup. Don't change them unless you know what you're doing.
+    //
+    // The relative path to the generated web app's root directory. This must be
+    // set to define the "paths" option.
+    "baseUrl": "../../.wasp/out/server",
+    "paths": {
+      // Resolve all non-relative imports to the correct node module. Source:
+      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
+      "*": [
+        // Start by looking for the definiton inside the node modules root
+        // directory...
+        "node_modules/*",
+        // ... If that fails, try to find it inside definitely-typed type
+        // definitions.
+        "node_modules/@types/*"
+      ]
+    }
+  }
+}

examples/thoughts/.gitignore

@@ -1 +1,3 @@
 /.wasp/
+/.env.server
+/.env.client

examples/thoughts/.wasproot

@@ -1 +1 @@
-File marking the root of Wasp project.
+File marking the root of Wasp project.

examples/thoughts/main.wasp

@@ -19,38 +19,38 @@ app Thoughts {
 
 route MainRoute { path: "/", to: MainPage }
 page MainPage {
-  component: import Main from "@ext/MainPage.js",
+  component: import Main from "@client/MainPage.js",
   authRequired: true
 }
 
 route ThoughtsRoute { path: "/thoughts", to: ThoughtsPage }
 page ThoughtsPage {
-  component: import Thoughts from "@ext/ThoughtsPage.js",
+  component: import Thoughts from "@client/ThoughtsPage.js",
   authRequired: true
 }
 
 route LoginRoute { path: "/login", to: LoginPage }
 page LoginPage {
-  component: import Login from "@ext/LoginPage.js"
+  component: import Login from "@client/LoginPage.js"
 }
 
 route SignupRoute { path: "/signup", to: SignupPage }
 page SignupPage {
-  component: import Signup from "@ext/SignupPage"
+  component: import Signup from "@client/SignupPage"
 }
 
 action createThought {
-  fn: import { createThought } from "@ext/actions.js",
+  fn: import { createThought } from "@server/actions.js",
   entities: [Thought, Tag]
 }
 
 query getThoughts {
-  fn: import { getThoughts } from "@ext/queries.js",
+  fn: import { getThoughts } from "@server/queries.js",
   entities: [Thought]
 }
 
 query getTags {
-  fn: import { getTags } from "@ext/queries.js",
+  fn: import { getTags } from "@server/queries.js",
   entities: [Tag]
 }
 

examples/thoughts/src/client/jsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // The following settings enable IDE support in user-provided source files.
+    // Editing them might break features like import autocompletion and
+    // definition lookup. Don't change them unless you know what you're doing.
+    //
+    // The relative path to the generated web app's root directory. This must be
+    // set to define the "paths" option.
+    "baseUrl": "../../.wasp/out/web-app/",
+    "paths": {
+      // Resolve all "@wasp" imports to the generated source code.
+      "@wasp/*": [
+        "src/*"
+      ],
+      // Resolve all non-relative imports to the correct node module. Source:
+      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
+      "*": [
+        // Start by looking for the definiton inside the node modules root
+        // directory...
+        "node_modules/*",
+        // ... If that fails, try to find it inside definitely-typed type
+        // definitions.
+        "node_modules/@types/*"
+      ]
+    }
+  }
+}

examples/thoughts/src/server/jsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // The following settings enable IDE support in user-provided source files. 
+    // Editing them might break features like import autocompletion and
+    // definition lookup. Don't change them unless you know what you're doing.
+    //
+    // The relative path to the generated web app's root directory. This must be
+    // set to define the "paths" option.
+    "baseUrl": "../../.wasp/out/server/",
+    "paths": {
+      // Resolve all "@wasp" imports to the generated source code.
+      "@wasp/*": [
+        "src/*"
+      ],
+      // Resolve all non-relative imports to the correct node module. Source:
+      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
+      "*": [
+        // Start by looking for the definiton inside the node modules root
+        // directory...
+        "node_modules/*",
+        // ... If that fails, Try to find it inside definitely-typed type
+        // definitions.
+        "node_modules/@types/*"
+      ]
+    }
+  }
+}