revert: "feat: add .js file extension to built output + unwrap folder…

… import/export to support native ESM within browser" (microsoft#30803)

change/@fluentui-tokens-40d42cf4-67cd-41b9-b4f3-550ddc3445a6.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "reverting #30770 which caused compilation issues",
+  "packageName": "@fluentui/tokens",
+  "email": "mgodbolt@microsoft.com",
+  "dependentChangeType": "patch"
+}

package.json

@@ -120,8 +120,8 @@
     "@storybook/manager-webpack5": "6.5.15",
     "@storybook/react": "6.5.15",
     "@storybook/theming": "6.5.15",
-    "@swc/cli": "0.1.65",
-    "@swc/core": "1.4.7",
+    "@swc/cli": "0.1.62",
+    "@swc/core": "1.3.87",
     "@swc/helpers": "0.5.1",
     "@testing-library/dom": "8.11.3",
     "@testing-library/jest-dom": "5.16.5",
@@ -320,7 +320,7 @@
     "strip-ansi": "6.0.0",
     "style-loader": "2.0.0",
     "swc-loader": "0.2.3",
-    "swc-plugin-de-indent-template-literal": "1.4.0",
+    "swc-plugin-de-indent-template-literal": "1.0.0",
     "syncpack": "10.6.1",
     "tachometer": "0.7.0",
     "terser": "5.28.1",

packages/tokens/.swcrc

@@ -10,7 +10,6 @@
     "/**/*.test.tsx"
   ],
   "jsc": {
-    "baseUrl": ".",
     "parser": {
       "syntax": "typescript",
       "tsx": true,

scripts/tasks/src/swc/swc.ts → scripts/tasks/src/swc.ts

@@ -2,35 +2,33 @@ import fs from 'fs';
 import path from 'path';
 
 import { transform } from '@swc/core';
+import type { Options as SwcOptions } from '@swc/core';
 import glob from 'glob';
-import * as micromatch from 'micromatch';
+import * as match from 'micromatch';
 
-import { Options } from './types';
-import { postprocessOutput } from './utils';
+type Options = SwcOptions & { module: { type: 'es6' | 'commonjs' | 'amd' }; outputPath: string };
 
 async function swcTransform(options: Options) {
-  const { outputPath, module, root: packageRoot = process.cwd() } = options;
-
-  const moduleType = module.type;
-  const sourceRootDirName = moduleType === 'es6' ? 'src' : 'lib';
+  const { outputPath, module } = options;
+  const packageRoot = process.cwd();
+  const sourceRootDirName = module.type === 'es6' ? 'src' : 'lib';
 
   let sourceFiles: string[] = [];
 
-  if (moduleType === 'es6') {
+  if (module.type === 'es6') {
     sourceFiles = glob.sync(`${sourceRootDirName}/**/*.{ts,tsx}`);
   }
 
-  if (moduleType === 'commonjs' || moduleType === 'amd') {
+  if (module.type === 'commonjs' || module.type === 'amd') {
     sourceFiles = glob.sync(`${sourceRootDirName}/**/*.js`);
   }
 
   const swcConfig = JSON.parse(fs.readFileSync(path.resolve(packageRoot, '.swcrc'), 'utf-8'));
-  const enableResolveFully = Boolean(swcConfig.jsc.baseUrl);
   const tsFileExtensionRegex = /\.(tsx|ts)$/;
 
   for (const fileName of sourceFiles) {
     const srcFilePath = path.resolve(packageRoot, fileName);
-    const isFileExcluded = micromatch.isMatch(srcFilePath, swcConfig.exclude, { contains: true });
+    const isFileExcluded = match.isMatch(srcFilePath, swcConfig.exclude, { contains: true });
 
     if (isFileExcluded) {
       continue;
@@ -40,19 +38,19 @@ async function swcTransform(options: Options) {
 
     const result = await transform(sourceCode, {
       filename: fileName,
-      module: { type: moduleType, resolveFully: enableResolveFully },
+      module: { type: module.type },
       sourceFileName: path.basename(fileName),
       outputPath,
     });
 
-    const resultCode = postprocessOutput(result.code, {
-      addExplicitJsExtensionToImports: enableResolveFully,
-      moduleType,
-    });
+    // Strip @jsx comments, see https://github.com/microsoft/fluentui/issues/29126
+    const resultCode = result.code
+      .replace('/** @jsxRuntime automatic */', '')
+      .replace('/** @jsxImportSource @fluentui/react-jsx-runtime */', '');
 
     const compiledFilePath = path.resolve(packageRoot, fileName.replace(`${sourceRootDirName}`, outputPath));
 
-    // Create directory folder for new compiled file(s) to live in.
+    //Create directory folder for new compiled file(s) to live in.
     await fs.promises.mkdir(compiledFilePath.replace(path.basename(compiledFilePath), ''), { recursive: true });
 
     const compiledFilePathJS = `${compiledFilePath.replace(tsFileExtensionRegex, '.js')}`;