Add a use strict directive to function bodies

Author: wooorm

package-lock.json

@@ -46,20 +46,37 @@ export function recmaJsxBuild(options) {
     // When compiling to a function body, replace the import that was just
     // generated, and get `jsx`, `jsxs`, and `Fragment` from `arguments[0]`
     // instead.
-    if (
-      outputFormat === 'function-body' &&
-      tree.body[0] &&
-      tree.body[0].type === 'ImportDeclaration' &&
-      typeof tree.body[0].source.value === 'string' &&
-      /\/jsx-(dev-)?runtime$/.test(tree.body[0].source.value)
-    ) {
-      tree.body[0] = {
-        type: 'VariableDeclaration',
-        kind: 'const',
-        declarations: specifiersToDeclarations(
-          tree.body[0].specifiers,
-          toIdOrMemberExpression(['arguments', 0])
-        )
+    if (outputFormat === 'function-body') {
+      let index = 0
+
+      // Skip directives: JS currently only has `use strict`, but Acorn allows
+      // arbitrary ones.
+      // Practically things like `use client` could be used?
+      while (index < tree.body.length) {
+        const child = tree.body[index]
+        if ('directive' in child && child.directive) {
+          index++
+        } else {
+          break
+        }
+      }
+
+      const declaration = tree.body[index]
+
+      if (
+        declaration &&
+        declaration.type === 'ImportDeclaration' &&
+        typeof declaration.source.value === 'string' &&
+        /\/jsx-(dev-)?runtime$/.test(declaration.source.value)
+      ) {
+        tree.body[index] = {
+          type: 'VariableDeclaration',
+          kind: 'const',
+          declarations: specifiersToDeclarations(
+            declaration.specifiers,
+            toIdOrMemberExpression(['arguments', 0])
+          )
+        }
       }
     }
   }

packages/mdx/lib/plugin/recma-jsx-build.js

@@ -560,6 +560,14 @@ export function recmaJsxRewrite(options) {
         }
       })
     }
+
+    if (outputFormat === 'function-body') {
+      tree.body.unshift({
+        type: 'ExpressionStatement',
+        expression: {type: 'Literal', value: 'use strict'},
+        directive: 'use strict'
+      })
+    }
   }
 }
 

packages/mdx/lib/plugin/recma-jsx-rewrite.js

@@ -899,4 +899,40 @@ test('@mdx-js/mdx: syntax: MDX (ESM)', async function (t) {
       ].join('\n')
     )
   })
+
+  await t.test(
+    "should add a 'use strict' when generating a `function-body`",
+    async function () {
+      assert.equal(
+        String(await compile('# hi', {outputFormat: 'function-body'})),
+        [
+          '/*@jsxRuntime automatic @jsxImportSource react*/',
+          '"use strict";',
+          'const {jsx: _jsx} = arguments[0];',
+          'function _createMdxContent(props) {',
+          '  const _components = {',
+          '    h1: "h1",',
+          '    ...props.components',
+          '  };',
+          '  return _jsx(_components.h1, {',
+          '    children: "hi"',
+          '  });',
+          '}',
+          'function MDXContent(props = {}) {',
+          '  const {wrapper: MDXLayout} = props.components || ({});',
+          '  return MDXLayout ? _jsx(MDXLayout, {',
+          '    ...props,',
+          '    children: _jsx(_createMdxContent, {',
+          '      ...props',
+          '    })',
+          '  }) : _createMdxContent(props);',
+          '}',
+          'return {',
+          '  default: MDXContent',
+          '};',
+          ''
+        ].join('\n')
+      )
+    }
+  )
 })