Runtime auto

[alex-page]

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[alex-page]

There were a lot of build errors related to this.

[BPScott]

Errors relating to this would occur because of code that uses import {SomeType} instead of import type {SomeType}.

I can't see the errors but stuff like this, where React becomes referenced as some globally accessible type, rather than imported from react might be related.

In the past I've saw that the react codemod doesn't touch types when you do things like import React and then type Blah = React.FunctionComponent.

It would potentially be worth trying out my fork of the codemod that handles that better: reactjs/react-codemod#305

[BPScott]

Yep had a quick poke at it, It's because the codemod doesn't handle our "you should use import type if you're only importing types" restriction either. That's fine, that's really the remit of some linting you run after the codemod anyway. My fork doesn't help with that either, so ignore that suggestion.

importsNotUsedAsValues: error basically enforces "if you only use types from an import then it must use import type. Previously import React, {SomeType} from 'react' wasn't a violation - you used React at runtime so that import declaration was considered ok. With the automatic runtime you don't need the default export anymore, so the codemod transforms that code into import {SomeType} from 'react'. And then typescript shouts at you because you're only accessing types but you're using import, not import type.

You've got two approaches here:

The low-key just-get-it-out-approach: Manually go adjust those import {SomeType} from 'react' lines that TS complains about to import type {SomeType} from 'react'. There's like 11 violating files that seems pretty easy if you want to style it out in this PR.

The somewhat sweatier approach: Go enable the @typescript-eslint/consistent-type-imports and @typescript-eslint/consistent-type-exports lint rules on the main branch, then rebase the v11 branch, then rebase this branch. These are autofixable rules that will force usage of import type when you import a type. See https://typescript-eslint.io/blog/consistent-type-imports-and-exports-why-and-how for more context. This is actually a little stricter than the "importsNotUsedAsValues": "error", stuff described above - the linter will change the existing usage of import React, {SomeType} from 'react' to be import React from 'react'; import type {SomeType} from 'react'. If you do this, then get this branch rebased atop of that change, then running eslint --fix will pull these files into a shape that will keep tsc happy without needing any manual touch ups

[alex-page]

I tried moving this to the external plugin. I was a little bit confused around if these then need to be added to the package.json as it seems to be looking there. For now I left it as is to try and get this working.

[BPScott]

I think it should be ok for this to be external: ['react/jsx-runtime'],`

[alex-page]

CI is going to be unhappy with this change