Delegate types generation to extension package

[cezaraugusto]

This adds support to pnpm. Fix #147.

How to test

Run the create command via pnpx, then the `dev1 command.

pnpx extension@latest create my-extension
cd my-extension
pnpm dev

cc @karlhorky this is in v2.0.0-alpha.8 already. Feel free to test/review and let me know if this doesn't work somehow.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

[OSpoon]

Seems to be working well.

[pkg-pr-new]

Open in Stackblitz

yarn add https://pkg.pr.new/extension-js/extension.js/[email protected]

yarn add https://pkg.pr.new/extension-js/extension.js/[email protected]

yarn add https://pkg.pr.new/extension-js/extension.js/[email protected]

commit: bd81814

[karlhorky]

I tried out [email protected] with --template content-react and there are 3 problems:

1. Corepack is setting packageManager to Yarn v1 for some reason, which will cause Yarn v1 to be used for installing packages, and also throw an error out of the box when running pnpm dev:

   $ pnpx extension@latest create my-extension --template content-react
   
   Packages: +819
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   Progress: resolved 828, reused 796, downloaded 23, added 819, done
   Library/Caches/pnpm/dlx/nnuvrqu4ldr24declcbxs25maq/191b37c0948-8e38/node_modules/.pnpm/[email protected]/node_modules/core-js-pure: Running postinstall script, done in 44ms
   Library/Caches/pnpm/dlx/nnuvrqu4ldr24declcbxs25maq/191b37c0948-8e38/node_modules/.pnpm/@[email protected]/node_modules/@swc/core: Running postinstall script, done in 42ms
   🐣 - Starting a new browser extension named my-extension...
   🤝 - Ensuring my-extension folder exists...
   🤞 - Checking if destination path is writeable...
   🔎 - Scanning for potential conflicting files...
   🧰 - Installing my-extension...
   📝 - Writing package.json metadata...
   🛠  - Installing dependencies... (takes a moment)
   📄 - Writing README.md metadata...
   📜 - Writing manifest.json metadata...
   🌲 - Initializing git repository for my-extension...
   🙈 - Writing .gitignore lines...
   🧩 - Success! Extension my-extension created.
   
   Now cd my-extension and yarn dev to open a new browser instance
   with your extension installed, loaded, and enabled for development.
   
   You are ready. Time to hack on your extension!
   
   $ cd my-extension
   $ pnpm dev
   
   /opt/homebrew/Cellar/node@20/20.15.0/lib/node_modules/corepack/dist/lib/corepack.cjs:23512
                 throw new UsageError(`This project is configured to use ${result.spec.name} because ${result.target} has a "packageManager" field`);
                       ^
   UsageError: This project is configured to use yarn because /Users/k/p/my-extension/package.json has a "packageManager" field
       at Engine.findProjectSpec (/opt/homebrew/Cellar/node@20/20.15.0/lib/node_modules/corepack/dist/lib/corepack.cjs:23512:21)
       at async Engine.executePackageManagerRequest (/opt/homebrew/Cellar/node@20/20.15.0/lib/node_modules/corepack/dist/lib/corepack.cjs:23542:24)
       at async Object.runMain (/opt/homebrew/Cellar/node@20/20.15.0/lib/node_modules/corepack/dist/lib/corepack.cjs:24235:5) {
     clipanion: { type: 'usage' }
   }
   
   Node.js v20.15.0
   
   $ cat package.json
   {
   
   ...
   
     "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
   }
   
   $ ls -al
   total 584
   drwxr-xr-x    9 k  staff     288 Sep  2 18:08 .
   drwxr-xr-x   79 k  staff    2528 Sep  2 18:05 ..
   ...
   -rw-r--r--    1 k  staff  300263 Sep  2 18:08 yarn.lock

2. If I fix the packageManager in package.json using rm and yq and pnpm i, then run pnpm tsc (to type check all files), then I receive errors (probably "noEmit": true shouuld be set in tsconfig.json):

   $ rm yarn.lock
   
   $ yq --inplace 'del(.packageManager)' package.json
   
   $ pnpm i
   ! The local project doesn't define a 'packageManager' field. Corepack will now add one referencing [email protected]+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1.
   ! For more details about this field, consult the documentation at https://nodejs.org/api/packages.html#packagemanager
   
    WARN  Moving @types/react-dom that was installed by a different package manager to "node_modules/.ignored"
    WARN  Moving @types/react that was installed by a different package manager to "node_modules/.ignored"
    WARN  Moving typescript that was installed by a different package manager to "node_modules/.ignored"
    WARN  Moving extension that was installed by a different package manager to "node_modules/.ignored"
    WARN  Moving react that was installed by a different package manager to "node_modules/.ignored"
    WARN  2 other warnings
   Packages: +827
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   Progress: resolved 836, reused 827, downloaded 0, added 827, done
   
   dependencies:
   + react 18.3.1
   + react-dom 18.3.1
   + tailwindcss 3.4.10
   
   devDependencies:
   + @types/react 18.3.5
   + @types/react-dom 18.3.0
   + extension 2.0.0-alpha.8
   + typescript 5.3.3 (5.5.4 is available)
   
   Done in 7.9s
   
   $ pnpm tsc
   error TS5055: Cannot write file '/Users/k/p/my-extension/postcss.config.js' because it would overwrite input file.
   
   error TS5055: Cannot write file '/Users/k/p/my-extension/tailwind.config.js' because it would overwrite input file.
   
   
   Found 2 errors

3. If I fix the noEmit in tsconfig.json using yq, then tsc passes... but adding a usage of the chrome global (from @types/chrome) to background.ts then fails:

   $ yq --inplace '.compilerOptions.noEmit = true' tsconfig.json
   $ pnpm tsc
   $ echo "chrome.action.onClicked.addListener(() => {})" >> background.ts
   $ pnpm tsc                                                                
   background.ts:2:1 - error TS2304: Cannot find name 'chrome'.
   
   2 chrome.action.onClicked.addListener(() => {});
     ~~~~~~
   
   Found 1 error in background.ts:2

   Seems like @types/chrome is not in the top-level node_modules:
   
   Everything that the extension types use should be direct dependencies of the user's top-level package.json, that applies to both @types/node and @types/chrome:

   /// <reference types="node" />
   
   /// <reference types="chrome" />

   

   With npm and pnpm you can mark these as peerDependencies, because both of these package managers install peerDependencies by default. With Yarn v2+ IIRC there's something else going on, but maybe peerDependencies is ok for it too...

So a few things still open for pnpm + tsc support, but getting closer!

[cezaraugusto]

@karlhorky thanks for the follow-up! Hopefully fixed in #165