From f91886c9cd8f781951f32f91856603f292482913 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Mon, 4 Sep 2023 17:03:02 +0200 Subject: [PATCH 1/3] Support jsx on the api side (for mail templates, ai-jsx, etc) --- packages/babel-config/src/api.ts | 3 +++ packages/create-redwood-app/templates/js/api/jsconfig.json | 3 ++- packages/create-redwood-app/templates/ts/api/tsconfig.json | 3 ++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/babel-config/src/api.ts b/packages/babel-config/src/api.ts index a19673ebc421..88c4ec3c2712 100644 --- a/packages/babel-config/src/api.ts +++ b/packages/babel-config/src/api.ts @@ -30,6 +30,9 @@ export const getApiSideBabelPresets = ( }, 'rwjs-babel-preset-typescript', ], + // Needed to support `/** @jsxImportSource custom-jsx-library */` + // comments in JSX files + ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }], // Preset-env is required when we are not doing the transpilation with esbuild presetEnv && [ '@babel/preset-env', diff --git a/packages/create-redwood-app/templates/js/api/jsconfig.json b/packages/create-redwood-app/templates/js/api/jsconfig.json index c7cd9eacffc9..369b35f515a3 100644 --- a/packages/create-redwood-app/templates/js/api/jsconfig.json +++ b/packages/create-redwood-app/templates/js/api/jsconfig.json @@ -30,7 +30,8 @@ ], "types": [ "jest" - ] + ], + "jsx": "react-jsx" }, "include": [ "src", diff --git a/packages/create-redwood-app/templates/ts/api/tsconfig.json b/packages/create-redwood-app/templates/ts/api/tsconfig.json index 65c666c923a0..fcbbf9872e43 100644 --- a/packages/create-redwood-app/templates/ts/api/tsconfig.json +++ b/packages/create-redwood-app/templates/ts/api/tsconfig.json @@ -24,7 +24,8 @@ "../node_modules/@types", "./node_modules/@types" ], - "types": ["jest"] + "types": ["jest"], + "jsx": "react-jsx" }, "include": [ "src", From 7a906365e0902d705e656f9630af64b4b79281a2 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Mon, 4 Sep 2023 18:43:31 +0200 Subject: [PATCH 2/3] Update test-project --- .../test-project/api/server.config.js | 2 +- __fixtures__/test-project/api/tsconfig.json | 3 +- __fixtures__/test-project/web/package.json | 2 +- .../src/components/Author/Author.stories.tsx | 6 +-- .../BlogPostPage/BlogPostPage.stories.tsx | 6 +-- .../WaterfallPage/WaterfallPage.stories.tsx | 4 +- package.json | 1 + packages/babel-config/package.json | 1 + .../babel-config/src/__tests__/api.test.ts | 12 ++++- packages/babel-config/src/api.ts | 6 +-- packages/internal/package.json | 1 + yarn.lock | 45 +++++++++++++++++++ 12 files changed, 68 insertions(+), 21 deletions(-) diff --git a/__fixtures__/test-project/api/server.config.js b/__fixtures__/test-project/api/server.config.js index e82b04ea3f52..73dca9225a3e 100644 --- a/__fixtures__/test-project/api/server.config.js +++ b/__fixtures__/test-project/api/server.config.js @@ -33,7 +33,7 @@ const config = { * Note: This configuration does not apply in a serverless deploy. */ -/** @type {import('@redwoodjs/api-server/dist/fastify').FastifySideConfigFn} */ +/** @type {import('@redwoodjs/api-server/dist/types').FastifySideConfigFn} */ const configureFastify = async (fastify, options) => { if (options.side === 'api') { fastify.log.trace({ custom: { options } }, 'Configuring api side') diff --git a/__fixtures__/test-project/api/tsconfig.json b/__fixtures__/test-project/api/tsconfig.json index 65c666c923a0..fcbbf9872e43 100644 --- a/__fixtures__/test-project/api/tsconfig.json +++ b/__fixtures__/test-project/api/tsconfig.json @@ -24,7 +24,8 @@ "../node_modules/@types", "./node_modules/@types" ], - "types": ["jest"] + "types": ["jest"], + "jsx": "react-jsx" }, "include": [ "src", diff --git a/__fixtures__/test-project/web/package.json b/__fixtures__/test-project/web/package.json index e6a8bd5c7ff6..57400c477040 100644 --- a/__fixtures__/test-project/web/package.json +++ b/__fixtures__/test-project/web/package.json @@ -23,7 +23,7 @@ "devDependencies": { "@redwoodjs/vite": "6.0.7", "autoprefixer": "^10.4.15", - "postcss": "^8.4.28", + "postcss": "^8.4.29", "postcss-loader": "^7.3.3", "prettier-plugin-tailwindcss": "0.4.1", "tailwindcss": "^3.3.3" diff --git a/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx b/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx index 5c0f8da3d9c8..d4088a3ac6ce 100644 --- a/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx +++ b/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx @@ -27,8 +27,4 @@ const author = { fullName: 'Story User', } -export const Primary: Story = { - render: () => { - return - } -} +export const Primary: Story = {} diff --git a/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx b/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx index 43074d5880a5..6f7867b5c317 100644 --- a/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx +++ b/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx @@ -10,8 +10,4 @@ export default meta type Story = StoryObj -export const Primary: Story = { - render: (args) => { - return - } -} +export const Primary: Story = {} diff --git a/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx b/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx index ee6a1601562c..b97c5e54151f 100644 --- a/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx +++ b/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx @@ -10,6 +10,4 @@ export default meta type Story = StoryObj -export const Primary: Story = { - render: (args) => , -} +export const Primary: Story = {} diff --git a/package.json b/package.json index 4d29160141eb..03def8c5d92e 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "@babel/plugin-transform-nullish-coalescing-operator": "7.22.11", "@babel/plugin-transform-private-methods": "7.22.5", "@babel/plugin-transform-private-property-in-object": "7.22.11", + "@babel/plugin-transform-react-jsx": "7.22.15", "@babel/plugin-transform-runtime": "7.22.10", "@babel/preset-env": "7.22.14", "@babel/preset-react": "7.22.5", diff --git a/packages/babel-config/package.json b/packages/babel-config/package.json index f09fdf805513..1dd208f0495a 100644 --- a/packages/babel-config/package.json +++ b/packages/babel-config/package.json @@ -26,6 +26,7 @@ "@babel/plugin-transform-class-properties": "7.22.5", "@babel/plugin-transform-private-methods": "7.22.5", "@babel/plugin-transform-private-property-in-object": "7.22.11", + "@babel/plugin-transform-react-jsx": "7.22.15", "@babel/plugin-transform-runtime": "7.22.10", "@babel/preset-env": "7.22.14", "@babel/preset-react": "7.22.5", diff --git a/packages/babel-config/src/__tests__/api.test.ts b/packages/babel-config/src/__tests__/api.test.ts index 3d3a52995c39..ba9d7ebddf32 100644 --- a/packages/babel-config/src/__tests__/api.test.ts +++ b/packages/babel-config/src/__tests__/api.test.ts @@ -24,7 +24,7 @@ describe('api', () => { }) describe('getApiSideBabelPresets', () => { - it('just includes `@babel/preset-typescript` by default', () => { + it('only includes `@babel/preset-typescript` by default', () => { const apiSideBabelPresets = getApiSideBabelPresets() expect(apiSideBabelPresets).toMatchInlineSnapshot(` [ @@ -117,7 +117,7 @@ describe('api', () => { ) const apiSideBabelPlugins = getApiSideBabelPlugins() - expect(apiSideBabelPlugins).toHaveLength(9) + expect(apiSideBabelPlugins).toHaveLength(10) const pluginNames = apiSideBabelPlugins.map(([name]) => name) expect(pluginNames).toMatchInlineSnapshot(` @@ -125,6 +125,7 @@ describe('api', () => { "@babel/plugin-transform-class-properties", "@babel/plugin-transform-private-methods", "@babel/plugin-transform-private-property-in-object", + "@babel/plugin-transform-react-jsx", "@babel/plugin-transform-runtime", "babel-plugin-module-resolver", [Function], @@ -177,6 +178,13 @@ describe('api', () => { }, ]) + expect(apiSideBabelPlugins).toContainEqual([ + '@babel/plugin-transform-react-jsx', + { + runtime: 'automatic', + }, + ]) + const [_, babelPluginModuleResolverConfig] = apiSideBabelPlugins.find( (plugin) => plugin[0] === 'babel-plugin-module-resolver' ) diff --git a/packages/babel-config/src/api.ts b/packages/babel-config/src/api.ts index 88c4ec3c2712..36e8c3800284 100644 --- a/packages/babel-config/src/api.ts +++ b/packages/babel-config/src/api.ts @@ -30,9 +30,6 @@ export const getApiSideBabelPresets = ( }, 'rwjs-babel-preset-typescript', ], - // Needed to support `/** @jsxImportSource custom-jsx-library */` - // comments in JSX files - ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }], // Preset-env is required when we are not doing the transpilation with esbuild presetEnv && [ '@babel/preset-env', @@ -80,6 +77,9 @@ export const getApiSideBabelPlugins = ( const plugins: TransformOptions['plugins'] = [ ...getCommonPlugins(), + // Needed to support `/** @jsxImportSource custom-jsx-library */` + // comments in JSX files + ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }], ['@babel/plugin-transform-runtime', BABEL_PLUGIN_TRANSFORM_RUNTIME_OPTIONS], [ 'babel-plugin-module-resolver', diff --git a/packages/internal/package.json b/packages/internal/package.json index 347f8ad87ac8..07cb90a73f32 100644 --- a/packages/internal/package.json +++ b/packages/internal/package.json @@ -29,6 +29,7 @@ }, "dependencies": { "@babel/parser": "7.22.14", + "@babel/plugin-transform-react-jsx": "7.22.15", "@babel/plugin-transform-typescript": "7.22.11", "@babel/runtime-corejs3": "7.22.11", "@babel/traverse": "7.22.11", diff --git a/yarn.lock b/yarn.lock index 77d0e15be095..b2401c8b4a4f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -588,6 +588,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.22.15": + version: 7.22.15 + resolution: "@babel/helper-module-imports@npm:7.22.15" + dependencies: + "@babel/types": ^7.22.15 + checksum: 4e0d7fc36d02c1b8c8b3006dfbfeedf7a367d3334a04934255de5128115ea0bafdeb3e5736a2559917f0653e4e437400d54542da0468e08d3cbc86d3bbfa8f30 + languageName: node + linkType: hard + "@babel/helper-module-imports@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-module-imports@npm:7.22.5" @@ -688,6 +697,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-validator-identifier@npm:^7.22.15": + version: 7.22.15 + resolution: "@babel/helper-validator-identifier@npm:7.22.15" + checksum: 0473ccfd123cf872206eb916ec506f8963f75db50413560d4d1674aed4cd5d9354826c2514474d6cd40637d3bdc515ba87e8035b4bed683ba62cb607e0081aaf + languageName: node + linkType: hard + "@babel/helper-validator-identifier@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-validator-identifier@npm:7.22.5" @@ -1626,6 +1642,21 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx@npm:7.22.15": + version: 7.22.15 + resolution: "@babel/plugin-transform-react-jsx@npm:7.22.15" + dependencies: + "@babel/helper-annotate-as-pure": ^7.22.5 + "@babel/helper-module-imports": ^7.22.15 + "@babel/helper-plugin-utils": ^7.22.5 + "@babel/plugin-syntax-jsx": ^7.22.5 + "@babel/types": ^7.22.15 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: db37491e3eea5530521e177380312f308f01f806866fa0ce08d48fc5a8c9eaf9a954f778fa1ff477248afb72e916eb66ab3d35254bb6a8979f8b8e74a0fd8873 + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-transform-react-jsx@npm:7.22.5" @@ -2037,6 +2068,17 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.22.15": + version: 7.22.15 + resolution: "@babel/types@npm:7.22.15" + dependencies: + "@babel/helper-string-parser": ^7.22.5 + "@babel/helper-validator-identifier": ^7.22.15 + to-fast-properties: ^2.0.0 + checksum: 9324743c1586c59737b7590bbc44acc0b46317b66971fd98867ef4cfa1252ecdab2237a1a62437f579af8a2b41d998aa3efb9e8f0939d7de5f0781e91c7ac1ae + languageName: node + linkType: hard + "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -8254,6 +8296,7 @@ __metadata: "@babel/plugin-transform-class-properties": 7.22.5 "@babel/plugin-transform-private-methods": 7.22.5 "@babel/plugin-transform-private-property-in-object": 7.22.11 + "@babel/plugin-transform-react-jsx": 7.22.15 "@babel/plugin-transform-runtime": 7.22.10 "@babel/preset-env": 7.22.14 "@babel/preset-react": 7.22.5 @@ -8671,6 +8714,7 @@ __metadata: "@babel/cli": 7.22.10 "@babel/core": 7.22.11 "@babel/parser": 7.22.14 + "@babel/plugin-transform-react-jsx": 7.22.15 "@babel/plugin-transform-typescript": 7.22.11 "@babel/runtime-corejs3": 7.22.11 "@babel/traverse": 7.22.11 @@ -31230,6 +31274,7 @@ __metadata: "@babel/plugin-transform-nullish-coalescing-operator": 7.22.11 "@babel/plugin-transform-private-methods": 7.22.5 "@babel/plugin-transform-private-property-in-object": 7.22.11 + "@babel/plugin-transform-react-jsx": 7.22.15 "@babel/plugin-transform-runtime": 7.22.10 "@babel/preset-env": 7.22.14 "@babel/preset-react": 7.22.5 From b44f87519a3ced1f852a96390d5ca56ab5f8b821 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Mon, 4 Sep 2023 18:56:08 +0200 Subject: [PATCH 3/3] yarn dedupe --- yarn.lock | 50 ++++---------------------------------------------- 1 file changed, 4 insertions(+), 46 deletions(-) diff --git a/yarn.lock b/yarn.lock index b2401c8b4a4f..2e70b1415541 100644 --- a/yarn.lock +++ b/yarn.lock @@ -588,7 +588,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.22.15": +"@babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.22.5": version: 7.22.15 resolution: "@babel/helper-module-imports@npm:7.22.15" dependencies: @@ -597,15 +597,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-module-imports@npm:7.22.5" - dependencies: - "@babel/types": ^7.22.5 - checksum: 04f8c0586c485c33017c63e0fc5fc16bd33b883cef3c88e4b3a8bf7bc807b3f9a7bcb9372fbcc01c0a539a5d1cdb477e7bdec77e250669edab00f796683b6b07 - languageName: node - linkType: hard - "@babel/helper-module-transforms@npm:^7.22.5, @babel/helper-module-transforms@npm:^7.22.9": version: 7.22.9 resolution: "@babel/helper-module-transforms@npm:7.22.9" @@ -697,20 +688,13 @@ __metadata: languageName: node linkType: hard -"@babel/helper-validator-identifier@npm:^7.22.15": +"@babel/helper-validator-identifier@npm:^7.22.15, @babel/helper-validator-identifier@npm:^7.22.5": version: 7.22.15 resolution: "@babel/helper-validator-identifier@npm:7.22.15" checksum: 0473ccfd123cf872206eb916ec506f8963f75db50413560d4d1674aed4cd5d9354826c2514474d6cd40637d3bdc515ba87e8035b4bed683ba62cb607e0081aaf languageName: node linkType: hard -"@babel/helper-validator-identifier@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-validator-identifier@npm:7.22.5" - checksum: 2ff1d3833154d17ccf773b8a71fdc0cd0e7356aa8033179d0e3133787dfb33d97796cbff8b92a97c56268205337dfc720227aeddc677c1bc08ae1b67a95252d7 - languageName: node - linkType: hard - "@babel/helper-validator-option@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-validator-option@npm:7.22.5" @@ -1642,7 +1626,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx@npm:7.22.15": +"@babel/plugin-transform-react-jsx@npm:7.22.15, @babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.22.5": version: 7.22.15 resolution: "@babel/plugin-transform-react-jsx@npm:7.22.15" dependencies: @@ -1657,21 +1641,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-transform-react-jsx@npm:7.22.5" - dependencies: - "@babel/helper-annotate-as-pure": ^7.22.5 - "@babel/helper-module-imports": ^7.22.5 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/plugin-syntax-jsx": ^7.22.5 - "@babel/types": ^7.22.5 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: fa4e5b32233c41686a420ad97b07a8a8b6cec7d484e93d5917db460887ded5179a8a20867a5d56d962b5452535830c0c0f8bfdc7d55853369be1e51b6a79a14a - languageName: node - linkType: hard - "@babel/plugin-transform-react-pure-annotations@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.22.5" @@ -2057,18 +2026,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.1.6, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.13, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.10, @babel/types@npm:^7.22.11, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": - version: 7.22.11 - resolution: "@babel/types@npm:7.22.11" - dependencies: - "@babel/helper-string-parser": ^7.22.5 - "@babel/helper-validator-identifier": ^7.22.5 - to-fast-properties: ^2.0.0 - checksum: 57632c8c409e604697824dd2799c978681c66e910d5bc4fdad04693a3f3e5d50b1119000d8fb215fcb88d095c6a41470814e4a4f34d8856d7da6781b9c39c53c - languageName: node - linkType: hard - -"@babel/types@npm:^7.22.15": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.1.6, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.13, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.10, @babel/types@npm:^7.22.11, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": version: 7.22.15 resolution: "@babel/types@npm:7.22.15" dependencies: