yarn react build|dev #195
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,4 @@ | ||
|
There was a problem hiding this comment. Removing TODOs feels great! |
||
| module.exports = { | ||
| reactStrictMode: true, | ||
| pageExtensions: ['page.tsx'], | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| { | ||
| "private": true, | ||
| "scripts": { | ||
| "install": "yarn run theme-base build:all && yarn core build && yarn react build", | ||
|
There was a problem hiding this comment. Going to replace this with There was a problem hiding this comment. ohh I like, now I can just run install and then start up the docs or example next server There was a problem hiding this comment. Exactly right @dbanksdesign – I want the majority of the packages/examples/docs/etc. to "just work" with The only exception is really In the future, we can even avoid that by including |
||
| "postinstall": "patch-package", | ||
| "build": "yarn workspaces run build", | ||
| "angular": "yarn workspace @aws-amplify/ui-angular", | ||
|
|
@@ -37,7 +37,8 @@ | |
| }, | ||
| "dependencies": { | ||
| "patch-package": "^6.4.7", | ||
| "postinstall-postinstall": "^2.1.0", | ||
| "tsup": "^4.14.0" | ||
|
There was a problem hiding this comment.
|
||
| }, | ||
| "devDependencies": { | ||
| "husky": ">=6", | ||
|
|
||
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
|
|
@@ -2,15 +2,17 @@ | |||||||
| "private": true, | ||||||||
| "name": "@aws-amplify/ui-core", | ||||||||
| "version": "0.0.1", | ||||||||
| "type": "module", | ||||||||
| "main": "dist/index.cjs", | ||||||||
| "module": "dist/index.js", | ||||||||
| "types": "dist/index.d.ts", | ||||||||
| "files": [ | ||||||||
| "dist" | ||||||||
| ], | ||||||||
| "scripts": { | ||||||||
| "prebuild": "rimraf dist", | ||||||||
|
There was a problem hiding this comment. Should we have a separate
Suggested change
There was a problem hiding this comment. You know, I went back-and-forth on this. What I noticed was that it was tough to trace when something was being used and where. ( Having I hope the indirection from (I don't have a strong opinion – I've done NPM scripts every which way since per-env) There was a problem hiding this comment. Is there a use-case to run only a clean? I've realized whenever I'm doing a clean it's because I want to blow up the build artifacts and rebuild them, so just being part of There was a problem hiding this comment. Great question. I don't have one. Your use-case models my experience as well:
I suppose there could be a reason to clean and do dev, but IME |
||||||||
| "build": "tsup --minify", | ||||||||
| "dev": "tsup --watch src", | ||||||||
| "test": "echo \"Skipped: no test specified\"" | ||||||||
| }, | ||||||||
| "dependencies": { | ||||||||
|
|
@@ -21,5 +23,8 @@ | |||||||
| "@types/lodash": "^4.14.170", | ||||||||
| "@types/webpack-env": "^1.16.2", | ||||||||
| "tslib": "^2.3.0" | ||||||||
| }, | ||||||||
| "peerDependencies": { | ||||||||
| "aws-amplify": "3.x.x || 4.x.x" | ||||||||
|
There was a problem hiding this comment. Otherwise our |
||||||||
| } | ||||||||
| } | ||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| /** | ||
| * This shim exists for `esbuild` to `inject` into every .tsx file. | ||
| * Otherwise, `import * as React from 'react'` would need to be added manually | ||
| * | ||
| * See: https://esbuild.github.io/content-types/#auto-import-for-jsx | ||
| * See: https://github.com/egoist/tsup/issues/390 | ||
| */ | ||
|
|
||
| // No shims needed for core |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * @type {import("tsup").Options} | ||
| */ | ||
| module.exports = { | ||
| dts: true, | ||
| entryPoints: ['src/index.ts'], | ||
| format: ['cjs', 'esm'], | ||
| sourcemap: 'both', | ||
| splitting: false, | ||
| }; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * This shim exists for `esbuild` to `inject` into every .tsx file. | ||
| * Otherwise, `import * as React from 'react'` would need to be added manually | ||
| * | ||
| * See: https://esbuild.github.io/content-types/#auto-import-for-jsx | ||
| * See: https://github.com/egoist/tsup/issues/390 | ||
| */ | ||
|
|
||
| import * as React from 'react'; | ||
| export { React }; | ||
|
Comment on lines
+9
to
+10
There was a problem hiding this comment. Vite does this automatically. I had to patch |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| import './styles.css'; | ||
|
There was a problem hiding this comment. This is really nice – building (via PostCSS) styles as part of a single package & process. There was a problem hiding this comment. Dumb question: if we import the styles here, developers using the React components would no longer need to import the styles like There was a problem hiding this comment. Somehow the SCSS stuff just worked?? I need to check the docs to be sure... There was a problem hiding this comment. Good question @dbanksdesign! No, What This is consistent with how, say, an application is bundled with webpack: even though your app has JS, CSS, SVGs, PNGs, whatever, the bundler identifies all dependencies and outputs them based on your configuration. |
||
|
|
||
| export * from './components'; | ||
| export * from './hooks'; | ||
| export * from './primitives'; | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| @import './components/Authenticator/styles.css'; | ||
| @import './primitives/styles.css'; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,16 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "moduleResolution": "node", | ||
| "baseUrl": ".", | ||
|
Comment on lines
+3
to
+4
There was a problem hiding this comment. I thought this was the default, but |
||
| "declaration": true, | ||
| "esModuleInterop": true, | ||
| "jsx": "react-jsx", | ||
| "rootDir": "./src", | ||
| "outDir": "./dist", | ||
| "skipLibCheck": true, | ||
| "sourceMap": true, | ||
| "module": "esnext", | ||
|
There was a problem hiding this comment. So, TIL : https://stackoverflow.com/questions/41993811/understanding-target-and-module-in-tsconfig
|
||
| "target": "es2015" | ||
|
There was a problem hiding this comment.
Targeting evergreen browsers, this could even be But the less TS has to transpile, the faster our builds will be. |
||
| }, | ||
| "exclude": ["node_modules"], | ||
| "include": ["src/**/*.ts", "src/**/*.tsx"] | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * @type {import("tsup").Options} | ||
| */ | ||
| module.exports = { | ||
|
There was a problem hiding this comment. I did it this way for type safety vs. |
||
| dts: true, | ||
| entryPoints: ['src/index.tsx'], | ||
| format: ['cjs', 'esm'], | ||
| sourcemap: 'both', | ||
| splitting: false, | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -24,8 +24,5 @@ | |
| "rimraf": "^3.0.2", | ||
| "sass": "^1.35.2", | ||
| "style-dictionary": "^3.0.1" | ||
|
Comment on lines
-27
to
-29
There was a problem hiding this comment. The bundler had issues with WOFF files inside of this dependency. Admittedly, this is weird to me as part of a library. Because fonts require asset files (e.g. Normally, I see styles only specify
Because fonts can be very expensive, I think we should revisit #165 and try to make bundle-size as much of an opt-in as possible, like https://tailwindui.com/documentation#optional-add-the-inter-font-family. If a customer doesn't want it, If a customer wants to load it in a blocking way, they can use If a customer wants to load it in a non-blocking way, they can do what Next.js does: |
||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| diff --git a/node_modules/tsup/dist/index.js b/node_modules/tsup/dist/index.js | ||
|
There was a problem hiding this comment. |
||
| index 1fd3ea9..8f84cf0 100644 | ||
| --- a/node_modules/tsup/dist/index.js | ||
| +++ b/node_modules/tsup/dist/index.js | ||
| @@ -13633,6 +13633,7 @@ async function runEsbuild(options, { format, css }) { | ||
| jsxFactory: options.jsxFactory, | ||
| jsxFragment: options.jsxFragment, | ||
| sourcemap: options.sourcemap, | ||
| + inject: ['./src/globals.js'], | ||
|
There was a problem hiding this comment. |
||
| target: options.target === "es5" ? "es2016" : options.target, | ||
| plugins: [ | ||
| externalPlugin({ | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we mention
yarn core build --watch?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yarn core devis the answer for local development (including watching).(I also learned that the build tool may not always be the dev tool!)