Skip to content

Commit

Permalink
docs: wording improvements
Browse files Browse the repository at this point in the history
Co-authored-by: Stephen Armstrong <[email protected]>
  • Loading branch information
emmenko and industrian committed Jun 30, 2022
1 parent 1c4f2b0 commit 069c038
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ This component must be defined in a parent component where children of this comp

### useProjectExtensionImageRegex

A React hook that allows to access the project images configuration.
A React hook that allows accessing the project images configuration.

```jsx highlightLines="4-6"
import { useProjectExtensionImageRegex } from '@commercetools-frontend/application-shell-connectors';
Expand Down
22 changes: 11 additions & 11 deletions website/src/content/development/adding-typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Custom Applications have full support for developing applications in TypeScript.

<Info>

This feature is available from version `>= 21.8.0`.
This feature is available from version `21.8.0` onwards.

</Info>

Expand All @@ -20,11 +20,11 @@ npx @commercetools-frontend/create-mc-app@latest \
--template starter-typescript
```

The TypeScript starter template is the same as the standard JS starter template in terms of functionality but it includes the additional TypeScript setup.
The TypeScript starter template is the same as the standard JavaScript starter template in terms of functionality but it also includes the additional TypeScript setup.

# Configuration

Every TypeScript project requires a `tsconfig.json` file to instruct TypeScript on how to compile the project.
Every TypeScript project requires a `tsconfig.json` file to instruct TypeScript how to compile the project.

Therefore, we provide a base TSConfig to be used in your `tsconfig.json` file:

Expand Down Expand Up @@ -53,7 +53,7 @@ By default, this is included in the TypeScript starter template `src/index.tsx`
</Info>

You can also include this in the `tsconfig.json` file in the `compilerOptions.types` field but we don't recommend
to use that unless you are very familiar with the [implications of using the `types` field](https://www.typescriptlang.org/tsconfig#types).
doing so unless you are very familiar with the [implications of using the `types` field](https://www.typescriptlang.org/tsconfig#types).

Additional adjustments to other config files are also required, in particular:

Expand All @@ -69,20 +69,20 @@ The TypeScript setup is already preconfigured when using the TypeScript starter

# Migrate to TypeScript

If you have an existing Custom Application project and would like to migrate it to TypeScript, you need to do the following:
If you have an existing Custom Application project and want to migrate to TypeScript, you should do the following:

* Install the `typescript` dependency.
* Add a `tsconfig.json` file. See [configuration](#configuration) for the tooling setup.
* Migrate the JavaScript files to TypeScript, either `.ts` or `.tsx` (if a file contains JSX syntax).
* Migrate the JavaScript files to TypeScript, using either `.ts` or `.tsx` (if a file contains JSX syntax).

<Info>

Migrating source files to TypeScript can be done incrementally. We recommend starting from the "leaf files" and work your way up to the application entry point.
The [migrating from JavaScript documentation](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) can help with setting up a basic plan.
Migrating source files to TypeScript can be done incrementally. We recommend starting from the "leaf files" and working up to the application entry point.
The [migrating from JavaScript documentation](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) can help you set up a basic plan.

All UI Kit and ApplicationKit packages provide declaration files and export useful types when necessary.

During the migration you might need to loosen up the types strictness, for example by allowing explicit `any` types.
During migration you might need to loosen up the types strictness, for example by allowing explicit `any` types.

```json title="tsconfig.json"
{
Expand All @@ -94,8 +94,8 @@ If you have an existing Custom Application project and would like to migrate it
}
```

Please remember to revert that once the migration is over, as using `any` should be avoided.
You should revert these once migration is complete, as using `any` should be avoided.

</Info>

* Add a script command `"typecheck": "tsc --noEmit"` in your `package.json` to run the type checks of the application.
* Add the script command `"typecheck": "tsc --noEmit"` to your `package.json` to run the type checks of the application.
2 changes: 1 addition & 1 deletion website/src/content/development/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ In particular, we'll be going through the following topics:
title="Adding TypeScript"
href="/development/adding-typescript"
>
Learn more about developing in your Custom Application in TypeScript.
Learn more about developing your Custom Application using TypeScript.
</Card>
<Card
title="Going to Production"
Expand Down
2 changes: 1 addition & 1 deletion website/src/content/getting-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ npx @commercetools-frontend/create-mc-app@latest \
--template starter
```

If you want to start with a [TypeScript](https://www.typescriptlang.org/) project you can use the `--template=starter-typescript` option. Read more about TypeScript in the [Adding TypeScript](/development/adding-typescript) page.
To start with a [TypeScript](https://www.typescriptlang.org/) project, use the `--template=starter-typescript` flag. Read more about TypeScript in the [Adding TypeScript](/development/adding-typescript) page.

<Info>

Expand Down
2 changes: 1 addition & 1 deletion website/src/releases/2022-07/release-v21.8.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ This release includes several new features that we would like to present:

* Official support for developing Custom Applications in [TypeScript](https://www.typescriptlang.org/), including a new starter template. Read more about TypeScript in the [Adding TypeScript](/development/adding-typescript) page.
* New policy option for configuring the `audience` field when [integrating your Custom Application with an external API](/concepts/integrate-with-your-own-api#configuring-the-audience-policy).
* Improved accessibility of different elements to use correct ARIA attributes.
* Improved accessibility of different elements using ARIA attributes.
* Simpler and more readable list of time zone data, available from the `@commercetools-frontend/l10n` package.
* New React hook `useProjectExtensionImageRegex` for accessing the project images configuration, available from the `@commercetools-frontend/application-shell-connectors` package.

Expand Down

0 comments on commit 069c038

Please sign in to comment.