chore(tsconfig): add configs directory and ts configuration #3497

calebpollman · 2023-03-02T23:32:03Z

Description of changes

Add configs directory and shared Typscript configuration handling for ui, ui-react, ui-react-core and ui-react-native packages:

add configs directory and initial compilerOptions config files
add tsconfig.dist.json files and add to rollup config files
minor alignment of rollup configs
remove tsconfig.dev.json file from ui-react and update .eslintrc.js accordingly
update file extensions of ui-react/index.tsx and ui-react/internals.tsx to .ts

Issue #, if available

Description of how you validated changes

Checklist

PR description included
yarn test passes
Tests are updated
No side effects or sideEffects field updated
Relevant documentation is changed or added (and PR referenced)

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

changeset-bot · 2023-03-02T23:32:06Z

🦋 Changeset detected

Latest commit: 4043fec

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

This PR includes changesets to release 6 packages

Name	Type
@aws-amplify/ui-react-core	Patch
@aws-amplify/ui-react-native	Patch
@aws-amplify/ui-react	Patch
@aws-amplify/ui	Patch
@aws-amplify/ui-vue	Patch
@aws-amplify/ui-angular	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

calebpollman · 2023-03-02T23:34:57Z

packages/react-core/rollup.config.js

      format: 'es',
      entryFileNames: '[name].mjs',
      preserveModules: true,
      preserveModulesRoot: 'src',
-      sourcemap: false,


Removed the output.sourcemap option in all of the ESM and CJS rollup configs as they are extraneous. The setting of sourceMap to false in the typescript plugin options handles it

calebpollman · 2023-03-02T23:37:01Z

packages/configs/ts/react-native.json

+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "skipLibCheck": true,


React Native only requires skipLibCheck due its incompatible typing with @types/node, see DefinitelyTyped/DefinitelyTyped#15960 for further context

Too bad json doesn't support comments. But maybe we can include this info in the readme?

What if we convert to .ts?

@zhamujun Can you extend .ts files in a tsconfig?

Found a discussion on it microsoft/TypeScript#25271

And there's a package to do it https://www.npmjs.com/package/tsconfig.js

Maybe not worth our time to convert and introduce another dependency

wlee221 · 2023-03-03T00:21:48Z

packages/configs/README.md

+
+All packages are in TS strict mode by default unless opted out at the package configuration level.
+
+### Usage of _tsconfig.dist.json_


What do you think about naming this to _tsconfig.prod.json_ so that this is more explicit?

Not feeling super strongly (so basically feeling minimally strongly) about the name, but prefer tsconfig.dist.json because:

we already use it

it aligns with the dist output directory

Edit: also feel like "prod" is more aligned to application stages ¯\(ツ)/¯

wlee221

LGTM, just one nit above 😄

ioanabrooks · 2023-03-03T00:43:20Z

packages/configs/README.md

@@ -0,0 +1,66 @@
+# Overview


This readme is awesome!

ioanabrooks · 2023-03-03T00:49:50Z

packages/configs/ts/react-native.json

+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "skipLibCheck": true,


Too bad json doesn't support comments. But maybe we can include this info in the readme?

packages/react/tsconfig.json

0618 · 2023-03-03T01:08:35Z

packages/react/rollup.config.js

+// common config settings
+const input = ['src/index.ts', 'src/internal.ts'];
+const sourceMap = false;
+const tsconfig = 'tsconfig.dist.json';


nit: what do you think if we have a const commonConfigSettings = {...} object? Because it's hard to tell where the "common config settings" ends from the comment

0618 · 2023-03-03T01:11:54Z

packages/configs/ts/react-native.json

+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "skipLibCheck": true,


What if we convert to .ts?

…perties definition

calebpollman · 2023-03-03T04:47:07Z

packages/ui/src/types/style-dictionary.d.ts

-declare module 'style-dictionary/lib/utils/flattenProperties' {
-  // based on the typing specified by style-dictionary:
-  // https://github.com/amzn/style-dictionary/blob/main/lib/utils/flattenProperties.js
-  export default function flattenProperties(properties: object, to_ret?: Array): Array;
-}


We added two SD related declaration files in containing the same function signatures in #3312 and #3400.

The definitions for the other two functions were identical, but the definitions of flattenProperties differ. Ultimately usage of the flattenProperties util is from the other file, where the modules decalaration files are appended with .js, making this file unused

calebpollman · 2023-03-03T04:49:04Z

packages/ui/src/theme/types/style-dictionary.d.ts

@@ -19,8 +19,8 @@ declare module 'style-dictionary/lib/utils/deepExtend.js' {
 declare module 'style-dictionary/lib/utils/flattenProperties.js' {
  // based on the typing specified by style-dictionary:
  // https://github.com/amzn/style-dictionary/blob/main/lib/utils/flattenProperties.js#L16-L24
-  export default function flattenProperties(
+  export default function flattenProperties<T, K = T extends Array<infer TK> ? TK : never>(


Added the type inference here to remove the reliance on any:

…ct native types from react-core

calebpollman

Removing skipLibCheck exposed some linting issues that were not caught on build runs.

calebpollman · 2023-03-03T06:16:11Z

docs/package.json

@@ -28,7 +28,7 @@
    "@mdx-js/react": "^2.1.0",
    "@moxy/next-compile-node-modules": "^2.1.1",
    "@xstate/inspect": "^0.4.1",
-    "aws-amplify": "^5.0.1",
+    "aws-amplify": "^5.0.16",


Removing skipLibCheck caused react-core to have linting failures from a type issue in @aws-amplify/storage@5.0.1 which was fixed in aws-amplify/amplify-js#10696.

Upgrading aws-amplify here as it is the version that gets hoisted in to the top level node_modules.

calebpollman · 2023-03-03T06:20:18Z

packages/react/tsconfig.json

-    "module": "esnext",
-    "moduleResolution": "node",
-    "rootDir": "./src",
+    "noImplicitAny": false,
    "skipLibCheck": true,


Added skipLibCheck back as removing exposed a linting error caused by a type error in maplibre-gl-js-amplify:

$ yarn workspace @aws-amplify/ui-react lint $ tsc --noEmit && eslint src --ext .js,.ts,.tsx ../../node_modules/maplibre-gl-js-amplify/lib/esm/AmplifyGeofenceControl/AmplifyMapDraw.d.ts:1:23 - error TS2688: Cannot find type definition file for 'mapbox__mapbox-gl-draw'. 1 /// <reference types="mapbox__mapbox-gl-draw" /> ~~~~~~~~~~~~~~~~~~~~~~ Found 1 error in ../../node_modules/maplibre-gl-js-amplify/lib/esm/AmplifyGeofenceControl/AmplifyMapDraw.d.ts:1

Will add a github issue there to address it and can remove the flag once it's fixed.

calebpollman · 2023-03-03T06:23:14Z

packages/react-core/package.json

@@ -44,7 +44,6 @@
    "@types/jest": "^26.0.23",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.13",
-    "@types/react-native": "^0.63.45",


Removing skipLibCheck in react-core exposed the incompatibility issue with @types/react-native and @types/node.

@types/react-native is unused in this package, and most likely will not be required in the future. If it is can turn back on skipLibCheck at that point

…les aws-amplify versions

…c packages

calebpollman · 2023-03-03T17:53:54Z

docs/package.json

@@ -28,7 +28,7 @@
    "@mdx-js/react": "^2.1.0",
    "@moxy/next-compile-node-modules": "^2.1.1",
    "@xstate/inspect": "^0.4.1",
-    "aws-amplify": "^5.0.1",
+    "aws-amplify": "latest",


To ensure we don't have weird aws-amplify install behavior, aligned the dep version here to what our example apps use, which is latest

Related: #3497 (comment)

calebpollman · 2023-03-03T18:02:06Z

packages/angular/projects/ui-angular/package.json

@@ -14,7 +14,7 @@
    "directory": "packages/angular/projects/ui-angular"
  },
  "peerDependencies": {
-    "aws-amplify": "5.x.x"
+    "aws-amplify": ">= 5.0.1"


Aligned the peerDep version here with other platform packages. 5.x.x was the incorrect version here, aws-amplify@5.0.0 had type issues that were fixed in 5.0.1 (same comment for ui-react)

0618 · 2023-03-03T19:37:45Z

packages/configs/ts/react-native.json

+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "skipLibCheck": true,


Found a discussion on it microsoft/TypeScript#25271

And there's a package to do it https://www.npmjs.com/package/tsconfig.js

Maybe not worth our time to convert and introduce another dependency

chore(tsconfig): add configs directory and ts configuration

e670319

calebpollman requested a review from a team as a code owner March 2, 2023 23:32

calebpollman added 2 commits March 2, 2023 15:32

Merge branch 'main' into configs/add-tsconfigs

12bb08a

Create long-tables-sit.md

b39b9c0

calebpollman commented Mar 2, 2023

View reviewed changes

calebpollman added run-tests Adding this label will trigger tests to run and removed run-tests Adding this label will trigger tests to run labels Mar 2, 2023

wlee221 reviewed Mar 3, 2023

View reviewed changes

wlee221 previously approved these changes Mar 3, 2023

View reviewed changes

ioanabrooks previously approved these changes Mar 3, 2023

View reviewed changes

0618 reviewed Mar 3, 2023

View reviewed changes

0618 previously approved these changes Mar 3, 2023

View reviewed changes

calebpollman added run-tests Adding this label will trigger tests to run and removed run-tests Adding this label will trigger tests to run labels Mar 3, 2023

github-actions bot removed the run-tests Adding this label will trigger tests to run label Mar 3, 2023

remove extra style dictionary types, add type inference to flattenPro…

b509817

…perties definition

calebpollman dismissed stale reviews from 0618, ioanabrooks, and wlee221 via b509817 March 3, 2023 04:20

calebpollman commented Mar 3, 2023

View reviewed changes

add skipLibCheck to ui-react, update docs aws-amplify dep, remove rea…

5a22a03

…ct native types from react-core

calebpollman commented Mar 3, 2023

View reviewed changes

calebpollman added 2 commits March 3, 2023 08:21

align aws-amplify peerDeps of platform packages, align docs and examp…

3d05f35

…les aws-amplify versions

align aws-amplify deps to latest, align aws-amplify peerDeps in publi…

4c5bfeb

…c packages

calebpollman commented Mar 3, 2023

View reviewed changes

remove accidental aws-amplify version updates example app

b53269a

remove accidental aws-amplify version updates for platform packages

4043fec

calebpollman commented Mar 3, 2023

View reviewed changes

calebpollman temporarily deployed to ci March 3, 2023 18:22 — with GitHub Actions Inactive

0618 approved these changes Mar 3, 2023

View reviewed changes

wlee221 approved these changes Mar 3, 2023

View reviewed changes

calebpollman merged commit 5249a45 into main Mar 3, 2023

calebpollman deleted the configs/add-tsconfigs branch March 3, 2023 19:50

This was referenced Mar 3, 2023

Version Packages #3500

Merged

Version Packages 0618/amplify-ui#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(tsconfig): add configs directory and ts configuration #3497

chore(tsconfig): add configs directory and ts configuration #3497

calebpollman commented Mar 2, 2023

changeset-bot bot commented Mar 2, 2023 •

edited

calebpollman Mar 2, 2023

calebpollman Mar 2, 2023

ioanabrooks Mar 3, 2023

0618 Mar 3, 2023

calebpollman Mar 3, 2023

0618 Mar 3, 2023

wlee221 Mar 3, 2023

calebpollman Mar 3, 2023 •

edited

wlee221 left a comment

ioanabrooks Mar 3, 2023

ioanabrooks Mar 3, 2023

0618 Mar 3, 2023 •

edited

0618 Mar 3, 2023

calebpollman Mar 3, 2023

calebpollman Mar 3, 2023

calebpollman left a comment

calebpollman Mar 3, 2023

calebpollman Mar 3, 2023

calebpollman Mar 3, 2023

calebpollman Mar 3, 2023

calebpollman Mar 3, 2023

calebpollman Mar 3, 2023

0618 Mar 3, 2023


		All packages are in TS strict mode by default unless opted out at the package configuration level.

		### Usage of _tsconfig.dist.json_

chore(tsconfig): add configs directory and ts configuration #3497

chore(tsconfig): add configs directory and ts configuration #3497

Conversation

calebpollman commented Mar 2, 2023

Description of changes

Issue #, if available

Description of how you validated changes

Checklist

changeset-bot bot commented Mar 2, 2023 • edited

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calebpollman Mar 3, 2023 • edited

Choose a reason for hiding this comment

wlee221 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

0618 Mar 3, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calebpollman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Mar 2, 2023 •

edited

calebpollman Mar 3, 2023 •

edited

0618 Mar 3, 2023 •

edited