wasp-lang/wasp
1
1
Fork 0
mirror of https://github.com/wasp-lang/wasp.git synced 2024-09-11 15:26:19 +03:00
Code Issues Projects Releases Wiki Activity

Fix import/export JS errors in Mage (#1607)

Browse Source
This commit is contained in:
Janko Vidaković 2024-01-02 16:43:35 +01:00 committed by GitHub
parent 994a58f0dc
commit e41fc5792c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
waspc/src/Wasp/AI/GenerateNewProject/Common/Prompts.hs
View File

@ -93,7 +93,7 @@ waspFileExample =
component: import Login from "@client/pages/auth/Login.jsx"
}
route DashboardRoute { path: "/", to: Dashboard }
route DashboardRoute { path: "/", to: DashboardPage }
page DashboardPage {
authRequired: true,
component: import Dashboard from "@client/pages/Dashboard.jsx"

20
waspc/src/Wasp/AI/GenerateNewProject/Page.hs
View File

@ -109,11 +109,18 @@ generatePage newProjectDetails entityPlans queries actions pPlan = do
Example of such JSON:
{
"pageWaspDecl": "route ExampleRoute { path: \"/\", to: ExamplePage }\npage ExamplePage {\n component: import { ExamplePage } from \"@client/ExamplePage.jsx\",\n authRequired: true\n}",
"pageWaspDecl": "route ExampleRoute { path: \"/\", to: ExamplePage }\npage ExamplePage {\n component: import ExamplePage from \"@client/ExamplePage.jsx\",\n authRequired: true\n}",
"pageJsImpl": "JS imports + React component implementing the page.",
}
There should be no other text in the response.
When writing the javascript implementation, make sure to always use the default export.
Concretely, define the main component with `const ${pageName} = () => {...}`,
and then at the end export it with `export default ${pageName}`.
It is also really important that the ${pageName} is then imported as a default import
in "pageWaspDecl": use `import ${pageName}` instead of `import { ${pageName} }`.
This is very important to me, please do as I say.
${appDescriptionBlock}
|]
@ -127,7 +134,7 @@ makePageDocPrompt =
```wasp
route TasksRoute { path: "/", to: ExamplePage }
page TasksPage {
component: import { Tasks } from "@client/Tasks.jsx",
component: import Tasks from "@client/Tasks.jsx",
authRequired: true
}
```
@ -142,7 +149,7 @@ makePageDocPrompt =
import createTask from '@wasp/actions/createTask';
import toggleTask from '@wasp/actions/toggleTask';
export function Tasks() {
const Tasks = () => {
const { data: tasks, isLoading, error } = useQuery(getTasks);
const createTaskFn = useAction(createTask);
const toggleTaskFn = useAction(toggleTask);
@ -193,6 +200,7 @@ makePageDocPrompt =
);
}
export default Tasks;
```
Here's another example of a Page declaration in Wasp:
@ -200,7 +208,7 @@ makePageDocPrompt =
```wasp
route DashboardRoute { path: "/dashboard", to: DashboardPage }
page DashboardPage {
component: import { Dashboard } from "@client/Dashboard.jsx",
component: import Dashboard from "@client/Dashboard.jsx",
authRequired: true
}
```
@ -215,7 +223,7 @@ makePageDocPrompt =
import getUsers from '@wasp/queries/getUsers';
import deleteUser from '@wasp/actions/deleteUser';
export function DashboardPage() {
const DashboardPage = () => {
const { data: users, isLoading, error } = useQuery(getUsers);
const deleteUserFn = useAction(deleteUser);
@ -250,6 +258,8 @@ makePageDocPrompt =
</div>
);
}
export default DashboardPage;
```
Make sure to style the page with Tailwind CSS and make it as beautiful as possible.

1
waspc/src/Wasp/AI/GenerateNewProject/PageComponentFile.hs
View File

@ -169,6 +169,7 @@ fixPageComponent newProjectDetails waspFilePath pageComponentPath = do
- If there are any js imports of local modules (`from "./`, `from "../`),
remove them and instead add the needed implementation directly in the file we are fixing right now.
- Remove redundant imports, but don't change any of the remaining ones.
- Make sure that the component is exported as a default export.
With this in mind, generate a new, fixed React component (${pageComponentPathText}).
Do actual fixes, don't leave comments with "TODO"!

2
waspc/src/Wasp/AI/GenerateNewProject/Plan.hs
View File

@ -82,7 +82,7 @@ generatePlan newProjectDetails planRules = do
"pages": [{ "pageName": string, "componentPath": string, "routeName": string, "routePath": string, "pageDesc": string }]
}
Here is an example of a plan (a bit simplified, as we didn't list all of the entities/actions/queries/pages):
Here is an example of a plan (a bit simplified, as we didn't list all of the entities/actions/queries/pages):
{
"entities": [{

10
waspc/src/Wasp/AI/GenerateNewProject/WaspFile.hs
View File

@ -90,12 +90,20 @@ fixWaspFile newProjectDetails waspFilePath plan = do
${compileErrorsText}
Some common mistakes to look for:
- Using non-default imports in page components.
In a Wasp `page` declaration, the `component` should always use the "default import" JS syntax.
Instead of `component: import { PageName } from ...`, it should
always be `component: import PageName from ...`.
Fix these by identifying named imports in wasp `page` declarations, and replacing
them with default imports. This only relates to wasp `page` declarations, other parts
of a Wasp file do not have to use the default imports.
- Missing ',' between dictionary entries, for example before `entities` field in action/query.
Fix these by adding missing ','.
For example, the following is missing ',' after the component field:
```wasp
page ExamplePage {
component: import { ExamplePage } from "@client/pages/ExamplePage.jsx" // <- missing ','
component: import ExamplePage from "@client/pages/ExamplePage.jsx" // <- missing ','
authRequired: true
}
```