feat: million cli

[kunal00000]

Please describe the changes this PR makes and why it should be merged:
This PR will be adding a CLI for million js setup.

Features

1. Detect package manager
2. Install million(latest version) with detected package manager.
3. Automatically detects the build environment (Next.js, Vite, Webpack, etc.).
4. Creates or updates the Million.js configuration with auto mode options.
5. Ensures compatibility with Next.js and detects the App router (RSC mode) or Pages router.
6. Show changes made in config file so that to confirm it doesn't break.

will resolve #571
/claim #571

Status

• Code changes have been tested against prettier, or there are no code changes
• I know how to update typings and have done so, or typings don't need updating

Semantic versioning classification:

• This PR changes the codebase
  • This PR includes breaking changes (methods removed or renamed, parameters moved or removed)
  • This PR changes the internal workings with no modifications to the external API (bug fixes, performance improvements)
• This PR only includes non-code changes, like changes to documentation, README, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
million-kitchen-sink	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2023 9:39pm
sink	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2023 9:39pm

[CLAassistant]

All committers have signed the CLA.

[rishi-raj-jain]

I'd suggest to use https://github.com/natemoo-re/clack in the CLI by @natemoo-re

[kunal00000]

@rishi-raj-jain this looks nice.
Is there any documentation for it?

[rishi-raj-jain]

I'm afraid not

[AbhiPrasad]

See https://github.com/getsentry/sentry-wizard/blob/master/src/nextjs/nextjs-wizard.ts which is a pretty solid example for using clack on a sdk setup wizard.

[kunal00000]

Thanks @AbhiPrasad . this would really help alot it in the process.

[kunal00000]

Hello @aidenybai . can you test the PR in your local.

Things which are complete by now-

• install and update million js latest version.
• create config file reference taken from installation docs

Things left -

• update pre-existing config
• docs
• publishing package to npm.

One more thing wouldn't it conflict with million currently present in npm registry because of same name?

[kunal00000]

Video demo: https://www.loom.com/share/8f7f87578d24498bbb38b7391aa76187?sid=7561d0c5-98e7-4144-acf4-44e22c48341e

[renhiyama]

Hey, any support for reejs/packit too? @aidenybai In order to check whether the project is a reejs project, look for the file reecfg.json in the project's root directory. Alternatively, look for the packit.config.js and add millionjs there. Once confirmed that it is a reejs project, either the developer/the cli needs to add million to project, and even if reejs supports URL imports, esm.sh (as of now) fails to properly serve millionjs. Therefore, for the serverside, you need to add millionjs via npm. As for the browser side, esm.sh serves it fine. Therefore update the import_map.json and add the following data:

{
  "imports": {
...//other stuff.
//Replace the already existing fields if the below fields were already placed by the developer, ensuring millionjs would even work if the dev added millionjs manually and it failed.
    "million/compiler": "million/compiler",
    "million/react-server": "million/react-server",
   },
   "browserImports": {
//Replace version with the same version millionjs currently uses in the cli.
     "million/react-server": "https://esm.sh/million@<version>/react?external=react,react-dom&bundle",
...//others
    }
}

As questions might arise for someone who doesn't know the inner workings of millionjs compiler: "why are you providing million/react-server instead of million/react, I saw that the compiler actually changes that in your code. And normally other code bundlers like swc would have served million/react for the browsers, packit provides isomorphic code, so it would be sending million/react-server to the browser side too. And that's why you need to link https://esm.sh/million/react for the browser side's import maps.

After adding the necessary import maps data, add millionjs to the configuration file: packit.config.js

import million from "million/compiler";
export default {
  plugins:[
    million.unplugin.vite({ // <- here we chose the vite edition of Millionjs
      mode: 'react', server: true, auto: true
    })
  ]
}

Hopefully you people will add support for reejs too!

@kunal00000 any updates on this?

[kunal00000]

@aidenybai do million support reejs as of now?

Also PR is ready for merge. Added documentation too.

[aidenybai]

@renhiyama afaik there are no users using both million and packit together. we can add packit once there is a feature request for it

[aidenybai]

Make sure to run pnpm lint and pnpm cleanup at root

[aidenybai]

Make sure to run pnpm lint and pnpm cleanup at root