From b02e2ff1021e1355fc6795437247ce36f90520e3 Mon Sep 17 00:00:00 2001
From: Faouzi Oudouh <faouzi.oudouh@shopify.com>
Date: Wed, 5 Oct 2022 13:56:08 +0200
Subject: [PATCH] add jsx-transform support to extensions build

---
 .changeset/light-buttons-do.md                           | 5 +++++
 packages/app/src/cli/services/extensions/bundle.test.ts  | 1 +
 packages/app/src/cli/services/extensions/bundle.ts       | 1 +
 packages/app/src/cli/services/generate/extension.ts      | 9 +++++++++
 .../ui-extensions/projects/checkout_ui/README.md         | 2 +-
 .../ui-extensions/projects/checkout_ui/src/index.liquid  | 1 -
 .../ui-extensions/projects/checkout_ui/tsconfig.json     | 9 +++++++++
 7 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/light-buttons-do.md
 create mode 100644 packages/app/templates/ui-extensions/projects/checkout_ui/tsconfig.json

diff --git a/.changeset/light-buttons-do.md b/.changeset/light-buttons-do.md
new file mode 100644
index 0000000000..97bbcd80d1
--- /dev/null
+++ b/.changeset/light-buttons-do.md
@@ -0,0 +1,5 @@
+---
+'@shopify/app': patch
+---
+
+add jsx transform support to extensions build
diff --git a/packages/app/src/cli/services/extensions/bundle.test.ts b/packages/app/src/cli/services/extensions/bundle.test.ts
index 3f501ede1d..059b4bb040 100644
--- a/packages/app/src/cli/services/extensions/bundle.test.ts
+++ b/packages/app/src/cli/services/extensions/bundle.test.ts
@@ -65,6 +65,7 @@ describe('buildExtension', () => {
     expect(options.legalComments).toEqual('none')
     expect(options.minify).toBeTruthy()
     expect(options.target).toEqual('es6')
+    expect(options.jsx).toEqual('automatic')
     expect(options.resolveExtensions).toEqual(['.tsx', '.ts', '.js', '.json', '.esnext', '.mjs', '.ejs'])
     expect(options.define).toEqual({
       'process.env.FOO': JSON.stringify('BAR'),
diff --git a/packages/app/src/cli/services/extensions/bundle.ts b/packages/app/src/cli/services/extensions/bundle.ts
index c26df014d8..52195376e5 100644
--- a/packages/app/src/cli/services/extensions/bundle.ts
+++ b/packages/app/src/cli/services/extensions/bundle.ts
@@ -83,6 +83,7 @@ function getESBuildOptions(options: BundleOptions): Parameters<typeof esBuild>[0
     sourceRoot: path.dirname(options.sourceFilePath),
     bundle: true,
     define,
+    jsx: 'automatic',
     loader: {
       '.esnext': 'ts',
       '.js': 'jsx',
diff --git a/packages/app/src/cli/services/generate/extension.ts b/packages/app/src/cli/services/generate/extension.ts
index 4122b5e185..76cf084889 100644
--- a/packages/app/src/cli/services/generate/extension.ts
+++ b/packages/app/src/cli/services/generate/extension.ts
@@ -127,6 +127,7 @@ async function uiExtensionInit({
 
           if (extensionFlavor) {
             await changeIndexFileExtension(extensionDirectory, extensionFlavor)
+            await removeUnwantedTemplateFilesPerFlavor(extensionDirectory, extensionFlavor)
           }
 
           task.title = `${getExtensionOutputConfig(extensionType).humanKey} extension generated`
@@ -180,6 +181,14 @@ async function changeIndexFileExtension(extensionDirectory: string, extensionFla
   }
 }
 
+async function removeUnwantedTemplateFilesPerFlavor(extensionDirectory: string, extensionFlavor: ExtensionFlavor) {
+  // tsconfig.json file is only needed in extension folder to inform the IDE
+  // About the `react-jsx` tsconfig option, so IDE don't complain about missing react import
+  if (extensionFlavor !== 'typescript-react') {
+    await file.remove(path.join(extensionDirectory, 'tsconfig.json'))
+  }
+}
+
 async function functionExtensionInit(options: FunctionExtensionInitOptions) {
   const url = options.cloneUrl || blocks.functions.defaultUrl
   await file.inTemporaryDirectory(async (tmpDir) => {
diff --git a/packages/app/templates/ui-extensions/projects/checkout_ui/README.md b/packages/app/templates/ui-extensions/projects/checkout_ui/README.md
index e0ad126953..fd9c9dc259 100644
--- a/packages/app/templates/ui-extensions/projects/checkout_ui/README.md
+++ b/packages/app/templates/ui-extensions/projects/checkout_ui/README.md
@@ -16,7 +16,7 @@ For creating an extension:
 
 To add specific features to an extension
 * [Adding field validation](https://shopify.dev/apps/checkout/validation)
-* [Localizing an exstension](https://shopify.dev/apps/checkout/localize-ui-extensions)
+* [Localizing an extension](https://shopify.dev/apps/checkout/localize-ui-extensions)
 
 ## Getting Started
 Initially, your extension will have the following files:
diff --git a/packages/app/templates/ui-extensions/projects/checkout_ui/src/index.liquid b/packages/app/templates/ui-extensions/projects/checkout_ui/src/index.liquid
index 8d02d1f6b1..6338462a76 100644
--- a/packages/app/templates/ui-extensions/projects/checkout_ui/src/index.liquid
+++ b/packages/app/templates/ui-extensions/projects/checkout_ui/src/index.liquid
@@ -1,5 +1,4 @@
 {%- if flavor == "react" -%}
-import React from 'react';
 import {
   useExtensionApi,
   render,
diff --git a/packages/app/templates/ui-extensions/projects/checkout_ui/tsconfig.json b/packages/app/templates/ui-extensions/projects/checkout_ui/tsconfig.json
new file mode 100644
index 0000000000..8952aa423b
--- /dev/null
+++ b/packages/app/templates/ui-extensions/projects/checkout_ui/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  // This tsconfig.json file is only needed to inform the IDE
+  // About the `react-jsx` tsconfig option, so IDE don't complain about missing react import
+  // Changing options here won't affect the build of your extension
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+  "include": ["./src"]
+}