Investigate possible monorepo's

[niktek]

https://monorepo.tools/#understanding-monorepos

Aim: Minimal touch to get started and see a benefit. JS/TS as first class citizen. Doesn't impact our current deployment strategy. Nice to have automatic test runner as part of deploy.

Contenders: Turborepo ✅ https://turbo.build - Vercel Lage ✅ https://microsoft.github.io/lage/ just a task runner - Microsoft Rush ✅ https://rushjs.io - Microsoft Lerna ✅ https://lerna.js.org (Lerna and NX are like turbo repo and turbo pack) - Nrwl Nx ✅ https://nx.dev - Nrwl Pants ❌ no apparent first class support for JS/TS Bazel ❌ no apparent first class support for JS/TS Gradle ❌ no apparent first class support for JS/TS

[niktek]

Issues that arise.

• At least for turbo, it will take control of things like linting, formatting, testing, running dev and build process.
• npm and yarn have a different process of creating workspaces than pnpm. Because of course they fucking do.
• https://pnpm.io/6.x/using-changesets or Rush for managing version numbers and release notes (yes kitchen sinking is happening)
• Things like import statements could be affected to be workspace references instead of normal Vite alias' https://turbo.build/repo/docs/getting-started/create-new#understanding-imports-and-exports

VSCode workspaces are completely separate from package manager workspaces. But here is a way of suggesting required extensions for things like Prettier and Linting. https://code.visualstudio.com/docs/editor/extension-marketplace#_workspace-recommended-extensions @leranjun has provided his .vscode/settings.json file as a reference for linting on save

{
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[svelte]": {
        "editor.defaultFormatter": "svelte.svelte-vscode"
    },
    "editor.codeActionsOnSave": [
        "source.fixAll.eslint"
    ],
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "eslint.probe": [
        "javascript",
        "typescript",
        "svelte",
        "json"
    ],
    "eslint.validate": [
        "javascript",
        "typescript",
        "svelte",
        "json"
    ],
    "svelte.enable-ts-plugin": true
}

[endigo9740]

@niktek you might post your final results here and close this out if this is complete for now. Please and thanks!

[niktek]

• Workspaces are not required for monorepos.
• Shoving the existing Skeleton down into a new sub-folder is trivial (and can preserve all commit history on all files)
• The harder part comes from splitting docs site from skeleton-ui - thankfully, because of the existing @brainandbones alias, we can fix a large lot of these easily. vite.config.js and tsconfig.js need the @brainandbones alias adjusted.
• I already have a basis of a script going to try and do this in a bulk automated manner (and fixes the multiple account git commits too) - but I suspect that the previous dot point is going to require a more manual approach.

[niktek]

The aliases change the context of how skeleton-ui runs. So if you are running in docsite and import a component using: import { Dialog } from '@brainandbones/skeleton and Dialog in turn has a import { dialogStore } from '$lib/utilities/Dialog/stores'; then $lib will be pointing to docsite/src/lib and error out. There are a few ways to work around this, everything in skeleton-ui uses a new alias called $sklib and that alias is applied to both docsite and skeleton-ui OR we make sure that they use relative file pathing (which for dialogStore in Dialog was actually much shorter). Something doesn't quite feel right about this.

[niktek]

Also a note to myself more than anything: tsconfig aliases and vite aliases can have undesirable conflicts when they are the same e.g. @brainandbones/skeleton for tsconfig will intercept an import before Vite's @brainandbones/skeleton/components - this has implications for the Sveld and the theme.css?inline imports.

[niktek]

Two separate instances of Vite running and messing up aliases - https://github.com/sveltejs/kit/issues/2879 Package.json needs to have values in dev mode that are changed on publish - https://github.com/sveltejs/kit/issues/6824 (such as exported css files and types etc.

There are workarounds for these and hopefully better native solutions will come later from upstream

[HuakunShen]

I can't get it working with turbo repo. Does the current latest version of skeleton still work with turbo repo? @niktek

[endigo9740]

@HuakunShen we use PNPM workspaces. You can find instruction here:

• https://www.skeleton.dev/docs/contributing/requirements#monorepo