Add scripts that modify the package.json before publishing

[frehner]

In order to get TS types working correctly for "Node16" and "NodeNext"

Closes #267

For normal npm versions:

1. Update release.sh to run update-package-types.js, which
2. Makes a copy of package.json as backup-package.json, and then
3. Writes the necessary changes out to package.json, and then
4. Generates the types with an npm script, and then
5. Reverts package.json from backup-package.json and deletes the backup-package.json.

😓

For next npm versions, it was a bit easier since there was already a NodeJS script modifying package.json, so I just hooked into it to make those changes and made sure the npm script was executed.

---

I'm very open to changing any and all of this if you think there's something that needs to be changed. 👍

[changeset-bot]

🦋 Changeset detected

Latest commit: 9017f71

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@ladle/react	Patch
example	Patch
test-addons	Patch
test-config	Patch
test-config-ts	Patch
test-css	Patch
test-decorators	Patch
test-flow	Patch
playwright	Patch
test-programmatic	Patch
test-provider	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

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

Name	Status	Preview	Updated
ladle	✅ Ready (Inspect)	Visit Preview	Oct 7, 2022 at 9:36PM (UTC)

[tajo]

Lgtm. It was published as @ladle/[email protected]. However, I still see this error (stackblitz):

❯ pnpm typecheck

> [email protected] typecheck /home/projects/ladle-tk5xtu
> tsc --noEmit

src/controls.stories.tsx:1:28 - error TS1471: Module '@ladle/react' cannot
be imported using this construct. The specifier only resolves to an ES
module, which cannot be imported synchronously. Use dynamic import instead.

1 import type { Story } from '@ladle/react';

Is this really expected?

[frehner]

Ugh, ok, yeah, this is an annoying one.

Since @ladle/react is an ESM project (as noted in package.json#type = "module"), then CJS projects on TS's NodeNext / Node16 module resolution will try to import a CJS version of Ladle. It doesn't exist, so TS does the next best thing and gives that error that you see, while resolving to the ESM types (note that the type Story actually still works there, despite the TS error.)

This is a frustrating situation, and there are potentially several soloutions:

1. Tell everyone using CJS and Node16 / NodeNext to add a //@ts-expect-error above the import
2. Tell everyone using CJS and Node16 / NodeNext to migrate to ESM
3. Wait and see if Add import assertions to type only imports and import types to force the resolution mode of the specifier microsoft/TypeScript#47807 solves the problem when it comes out of nightly? (I left a comment there asking if it would solve this issue; it seems like it would, but I'm double checking with the TS team)
4. Hack it by making a copy of exports.d.ts, name it exports.d.cts, and then update the package exports to something like:

"exports": {
  ".": {
      "types": {
          "import": "./lib/app/exports.d.ts",
          "require": "./lib/app/exports.d.cts"
      },
      "default": "./lib/app/exports.ts"
  }
}

(cross reference this issue in the TS repo for some similar discussions)

I think that would work, but would need to test it to be sure. I did do something fairly similar in my own library and it works, but it's just different enough that I would want to test it first to be sure.

Ugh

[frehner]

Just tested out option 4 above and it looks like it would work. I can make another PR to update things if that's the direction you want to go.

[tajo]

Appreciate your thoroughness! Yea, I think let's go with the option 4 if there's no other side-effect.