Allow jsxFactory and jsxFragment to be passed in buildOptions for use…

… by esbuild (#1838) * Allow jsxFactory and jsxFragment to be passed in buildOptions for use by esbuild * Fixes as per FredKSchott's feedback Co-authored-by: Robert Hurst <[email protected]>
FredKSchott · Dec 7, 2020 · 1f42e44 · 1f42e44 · vercel · Dec 7, 2020
1 parent 844f322
commit 1f42e44
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/snowpack/src/config.ts b/snowpack/src/config.ts
@@ -171,6 +171,8 @@ const configSchema = {
         watch: {type: 'boolean'},
         ssr: {type: 'boolean'},
         htmlFragments: {type: 'boolean'},
+        jsxFactory: {type: 'string'},
+        jsxFragment: {type: 'string'},
       },
     },
     testOptions: {

diff --git a/snowpack/src/plugins/plugin-esbuild.ts b/snowpack/src/plugins/plugin-esbuild.ts
@@ -31,10 +31,12 @@ export function esbuildPlugin(config: SnowpackConfig, {input}: {input: string[]}
       esbuildService = esbuildService || (await startService());
       const contents = await fs.readFile(filePath, 'utf-8');
       const isPreact = checkIsPreact(filePath, contents);
+      let jsxFactory = config.buildOptions.jsxFactory ?? (isPreact ? 'h' : undefined);
+      let jsxFragment = config.buildOptions.jsxFragment ?? (isPreact ? 'Fragment' : undefined);
       const {code, map, warnings} = await esbuildService!.transform(contents, {
         loader: getLoader(filePath),
-        jsxFactory: isPreact ? 'h' : undefined,
-        jsxFragment: isPreact ? 'Fragment' : undefined,
+        jsxFactory,
+        jsxFragment,
         sourcefile: filePath,
         sourcemap: config.buildOptions.sourceMaps,
       });

diff --git a/snowpack/src/types/snowpack.ts b/snowpack/src/types/snowpack.ts
@@ -229,6 +229,8 @@ export interface SnowpackConfig {
     sourceMaps: boolean;
     watch: boolean;
     htmlFragments: boolean;
+    jsxFactory: string | undefined;
+    jsxFragment: string | undefined;
   };
   testOptions: {
     files: string[];

diff --git a/www/_template/reference/configuration.md b/www/_template/reference/configuration.md
@@ -194,6 +194,14 @@ module.exports = {
 
 - Rename your web modules directory.
 
+#### buildOptions.jsxFactory | `string` | Default: `React.createElement` (or `h` if Preact import is detected)
+
+- Set the name of the used function to create JSX elements.
+
+#### buildOptions.jsxFragment | `string` | Default: `React.Fragment` (or `Fragment` if Preact import is detected)
+
+- Set the name of the used function to create JSX fragments.
+
 ### config.testOptions
 
 #### testOptions.files | `string[]` | Default: `["__tests__/**/*", "**/*.@(spec|test).*"]`