Merge pull request #577 from Shopify/add-jsx-transform-support-to-extensions-build

Add jsx-transform support to extensions build

Author: faouzioudouh

.changeset/light-buttons-do.md

@@ -0,0 +1,5 @@
+---
+'@shopify/app': patch
+---
+
+add jsx transform support to extensions build

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'),

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',

packages/app/src/cli/services/generate/extension.ts

@@ -132,6 +132,7 @@ async function uiExtensionInit({
 
           if (extensionFlavor) {
             await changeIndexFileExtension(extensionDirectory, extensionFlavor)
+            await removeUnwantedTemplateFilesPerFlavor(extensionDirectory, extensionFlavor)
           }
 
           task.title = `${getExtensionOutputConfig(extensionType).humanKey} extension generated`
@@ -185,6 +186,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) => {

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:

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,

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"]
+}