Rar9
Refactor SveltyCMS into an Optimized, Flat Nx Monorepo
Objective The current SveltyCMS project is a single monolithic SvelteKit application. This architecture is difficult to test, slow to build, and results in a large production bundle that includes all code for all features (e.g., setup wizard, all database drivers). The goal is to refactor this project into a flat Nx monorepo to isolate concerns, enable separate builds/tests, and create a lean, high-performance cms app. The final production bundle for the cms must be pinpoint-focused and only include the specific dependencies (like the database driver) selected during the setup process.
Implementation Steps Your first task is to set up the new monorepo structure and migrate the existing code. 1. Initialize the Monorepo Structure Initialize Root: Start with the new SveltyCMS directory containing the root package.json (with bun as the package manager) and nx.json. Fix Workspaces: Ensure the root package.json's workspaces array is correctly configured for a flat structure (e.g., ["cms", "setup-wizard", "db-interface", ... ]). Configure Nx: Set "packageManager": "bun" in nx.json. Create Folders: Create the empty project folders in the root: cms, setup-wizard, db-interface, tailwind-config, graphql-logic, api-logic. Merge Dependencies: Move all dependencies, devDependencies, and scripts from the SveltyCMS_old/package.json into the new root package.json. Install: Run bun install to set up the workspace. 2. Migrate the cms Application Move Code: Copy the entire SvelteKit project (the src, static, config folders, svelte.config.js, vite.config.ts, etc.) from SveltyCMS_old into the new cms/ folder. Clean Up: Delete the cms/package.json and cms/bun.lockb files. The cms app must not have its own package.json. Centralize TSConfig: Move all compilerOptions.paths from cms/tsconfig.json to the root tsconfig.base.json. Update the paths to point to the cms folder (e.g., "@src/": ["cms/src/"]). Delete cms/tsconfig.json. Configure Nx: Add the @nxext/sveltekit plugin to nx.json to "infer" the build/serve/test tasks for the cms project. 3. Refactor: Isolate the setup-wizard Make it an App: Turn the setup-wizard folder into its own minimal SvelteKit application. It will need its own svelte.config.js, vite.config.ts, and src/app.html. Move Code: Move all setup-related UI and API code from cms/src/routes/setup and cms/src/routes/api/setup into setup-wizard/src/routes/. Remove from cms: Delete these routes from the cms project. 4. Refactor: Create Pluggable Database Drivers This is the core optimization. db-interface: Create this as a simple JS/TS library. Move your DatabaseAdapter interface definition into it. db-driver-mongo / db-driver-drizzle: Create these as separate JS/TS libraries. These libraries will implement the db-interface. They are the only projects that should list their respective database packages (e.g., mongodb, drizzle-orm) as dependencies in their local package.json files. Update setup-wizard: The wizard's primary function is now to write to the root tsconfig.base.json file, setting the path alias to the chosen driver. Example: If the user selects Drizzle, the wizard writes: "paths": { "@sveltycms/database": ["db-driver-drizzle/src/index.ts"] } Update cms: All database imports in the cms app must be changed to import from the abstract alias: import { db } from '@sveltycms/database'. 5. Refactor: hooks.server.ts & API Logic handleSetup: This hook must be deleted from the cms project's hooks.server.ts file. api-logic: Create this JS/TS library. Move the logic from handleApiRequests.ts (caching, auth) into this library. The cms hook file should now just import and call the function from api-logic. graphql-logic: Create this JS/TS library. Move all logic from api/graphql/+server.ts (schema building, resolvers, Yoga setup) into this library. The cms/+server.ts file must be refactored into a thin wrapper that imports its handler from graphql-logic. 6. Refactor: Shared tailwind-config tailwind-config: Create this as a JS/TS library. Move your app.postcss and a tailwind.preset.js (containing your Skeleton plugin and theme settings) into this library. Update the tailwind.config.js files in both cms and setup-wizard to require and use this shared preset. Acceptance Criteria The task is complete when all the following conditions are met: ✅ The project structure is flat (no packages/ folder). ✅ bun install completes successfully from the root. ✅ The setup-wizard app can be served (bun x nx serve setup-wizard), and completing the setup correctly modifies the root tsconfig.base.json. ✅ The cms app can be served (bun x nx serve cms) and is fully functional after the setup is complete. ✅ The cms app's hooks.server.ts and GraphQL +server.ts files are simple, thin wrappers that import their logic from the new libraries. ✅ Both cms and setup-wizard UIs render the correct, shared Skeleton/Tailwind theme. ✅ (CRITICAL) Running bun x nx build cms (with the Mongo alias active) produces a production build. A bundle analysis (vite-bundle-visualizer) must confirm that drizzle-orm and other unused drivers are not included in the final bundle. ✅ bun x nx affected:test and bun x nx affected:build commands run successfully.
