Splitting Wasp TS Config?
Splitting Wasp TS Config, Can we do it? Overview The early support for TS config of Wasp was introduced in v0.15. It's been out for a while. Some of the goals were to support multiple Wasp files, take advantage of built-in TypeScript support for most editors, and lessen the burden of maintaining the codebase. Unfortunately, at the moment, splitting or using multiple Wasp files is a feature we can anticipate in future updates. However, there is a way we can reduce the lines of code in the wasp file Part 1: Extracting the pages from main.wasp.ts in 2 steps One of the ways we can reduce the code in main.wasp.ts is by moving the pages to a different file and exporting it from there. (Can I call this Factory Pattern?) Step 1: Move the page constants in a file, I'll call it pages.config.ts. Then return. // pages.config.ts export const pagesConfig = (app: any) => { const landingPage = app.page('LandingPage', { component: { importDefault: 'LandingPage', from: '@src/landing-page/LandingPage' } }); // other pages return { landingPage, // other pages } } ** I suggest you also nest the file inside a dedicated directory, maybe name it wasp-config Step 2: Import the pages in main.wasp.ts, pass the app instance to pagesConfig // main.wasp.ts import { pagesConfig } from './pages.config.ts' // other code const { landingPage, // other pages } from pagesConfig(app) app.route('LandingPageRoute', { path: '/', to: landingPage }); Part 2: Extracting jobs, query, actions and other configs Step 1: Move the config to a variable in a new file, let's call it jobs.config.ts. I will give an example for jobs, but the same applies for queries or actions. // jobs.config.ts // import the appropriate type to avoid ts errors import { JobConfig } from "wasp-config"; export const jobConfigs = (app: any) => { const dailyStatsJobConfig: JobConfig = { executor: 'PgBoss', perform: { fn: { import: 'calculateDailyStats', from: '@src/analytics/stats' } }, entities: ['User', 'DailyStats', 'Logs', 'PageViewSource'] } return { dailyStatsJobConfig } } Step 2: Import and use the config in main.wasp.ts, same with what we did for pages // main.wasp.ts import { jobConfigs } from './jobs.config.ts' // other code const { dailyStatsJobConfig, } from jobConfigs(app) app.job('dailyStatsJob', dailyStatsJobConfig); Wrap Up By doing all these extractions, we can significantly reduce the code and somehow organize main.wasp.ts while we wait for the official support for multiple wasp files. ** Please let me know if you have questions or if you found a better solution.
Splitting Wasp TS Config, Can we do it?
Overview
The early support for TS config of Wasp was introduced in v0.15. It's been out for a while. Some of the goals were to support multiple Wasp files, take advantage of built-in TypeScript support for most editors, and lessen the burden of maintaining the codebase. Unfortunately, at the moment, splitting or using multiple Wasp files is a feature we can anticipate in future updates.
However, there is a way we can reduce the lines of code in the wasp file
Part 1: Extracting the pages from main.wasp.ts in 2 steps
One of the ways we can reduce the code in main.wasp.ts is by moving the pages to a different file and exporting it from there. (Can I call this Factory Pattern?)
Step 1: Move the page constants in a file, I'll call it pages.config.ts. Then return.
// pages.config.ts
export const pagesConfig = (app: any) => {
const landingPage = app.page('LandingPage', {
component: { importDefault: 'LandingPage', from: '@src/landing-page/LandingPage' }
});
// other pages
return {
landingPage,
// other pages
}
}
** I suggest you also nest the file inside a dedicated directory, maybe name it wasp-config
Step 2: Import the pages in main.wasp.ts, pass the app instance to pagesConfig
// main.wasp.ts
import { pagesConfig } from './pages.config.ts'
// other code
const {
landingPage,
// other pages
} from pagesConfig(app)
app.route('LandingPageRoute', { path: '/', to: landingPage });
Part 2: Extracting jobs, query, actions and other configs
Step 1: Move the config to a variable in a new file, let's call it jobs.config.ts. I will give an example for jobs, but the same applies for queries or actions.
// jobs.config.ts
// import the appropriate type to avoid ts errors
import { JobConfig } from "wasp-config";
export const jobConfigs = (app: any) => {
const dailyStatsJobConfig: JobConfig = {
executor: 'PgBoss',
perform: {
fn: { import: 'calculateDailyStats', from: '@src/analytics/stats' }
},
entities: ['User', 'DailyStats', 'Logs', 'PageViewSource']
}
return {
dailyStatsJobConfig
}
}
Step 2: Import and use the config in main.wasp.ts, same with what we did for pages
// main.wasp.ts
import { jobConfigs } from './jobs.config.ts'
// other code
const {
dailyStatsJobConfig,
} from jobConfigs(app)
app.job('dailyStatsJob', dailyStatsJobConfig);
Wrap Up
By doing all these extractions, we can significantly reduce the code and somehow organize main.wasp.ts while we wait for the official support for multiple wasp files.
** Please let me know if you have questions or if you found a better solution.
