feat(@aws-amplify/ui-react): react port of @aws-amplify/ui-components #4340
Conversation
| "@aws-amplify/auth": "^1.3.3", | ||
| "@aws-amplify/core": "^1.1.2", | ||
| "@aws-amplify/xr": "^0.1.24" | ||
| "@aws-amplify/xr": "^0.1.24", | ||
| "emotion": "^10.0.9" |
There was a problem hiding this comment.
💁♂️ Dependencies should be added via yarn add for deterministic ordering.
| "jest": "24.8.0", | ||
| "jest-cli": "24.8.0", | ||
| "jest": "24.9.0", | ||
| "jest-cli": "24.9.0", |
There was a problem hiding this comment.
Updating jest + types fixed existing TypeScript build errors.
| "prettier": "^1.17.1", | ||
| "puppeteer": "1.19.0", | ||
| "rimraf": "^3.0.0", |
There was a problem hiding this comment.
Stencil's start templates do yarn clean, but don't have rimraf as a dependency.
| reactOutputTarget({ | ||
| componentCorePackage: '@aws-amplify/ui-components', | ||
| proxiesFile: '../amplify-ui-react/src/components.ts', | ||
| }), |
There was a problem hiding this comment.
This was easy enough, but the weird part is that this output target still needs to be compiled separately.
| "sideEffects": false, | ||
| "version": "0.0.1", | ||
| "private": true, | ||
| "description": "React specific wrapper for @aws-amplify/ui-components", |
There was a problem hiding this comment.
This is largely a copy/paste from https://github.com/ionic-team/stencil-ds-plugins-demo/blob/master/packages/component-library-react/package.json
|
|
||
| import { JSX } from '@aws-amplify/ui-components'; | ||
|
|
||
| import { defineCustomElements, applyPolyfills } from '@aws-amplify/ui-components/loader'; |
There was a problem hiding this comment.
This is where things start to break: it is assumed that there is a /loader.js file in the root of the project, but all Stencil output targets are in /dist.
There was a problem hiding this comment.
Cannot find module '@aws-amplify/ui-components/loader'.ts(2307)
| export const AmplifySignUp = createReactComponent<JSX.AmplifySignUp, HTMLAmplifySignUpElement>('amplify-sign-up'); | ||
| export const AmplifyTooltip = createReactComponent<JSX.AmplifyTooltip, HTMLAmplifyTooltipElement>('amplify-tooltip'); | ||
| export const AmplifyUsernameField = createReactComponent<JSX.AmplifyUsernameField, HTMLAmplifyUsernameFieldElement>('amplify-username-field'); | ||
| export const ContextConsumer = createReactComponent<JSX.ContextConsumer, HTMLContextConsumerElement>('context-consumer'); |
There was a problem hiding this comment.
Namespace 'LocalJSX' has no exported member 'ContextConsumer'.ts(2694)
| @@ -0,0 +1,26 @@ | |||
| { | |||
| "compilerOptions": { | |||
There was a problem hiding this comment.
|
Closing this unless a solution materializes. We can revisit in the near future... |
|
I attempt to resolve conflicts, but it's easier to pluck the specific commits into a new branch based on |
|
This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs. Looking for a help forum? We recommend joining the Amplify Community Discord server |
I was able to get the correct monorepo structure to support it, but there are hundreds TypeScript errors preventing a successful run of:
yarn workspace @aws-amplify/ui-react buildFor implementation, I borrowed from:
There are a couple blockers I ran into:
context-consumerisn't exported intocomponents.ts, likely because it's an internal component: https://github.com/ionic-team/stencil-state-tunnel/wiki/Getting-started@aws-components/ui-components/loaderisn't a valid path, because we publish/dist(per Stencil's examples), so the correct path would be@aws-components/ui-components/dist/loader.By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.