Fix/overrides (BuilderIO#976)

* publish

* add missing cases

* cleanup override file logic

* fix react imports

* check all extensions

* fix override filename logic

* move

* remove logs

* remove

packages/cli/src/build/build.ts

@@ -37,6 +37,7 @@ import {
   INPUT_EXTENSION_REGEX,
 } from './helpers/inputs-extensions';
 import { checkShouldOutputTypeScript } from './helpers/options';
+import { getOverrideFile } from './helpers/overrides';
 import { transformImports, transpile, transpileIfNecessary } from './helpers/transpile';
 
 const cwd = process.cwd();
@@ -322,12 +323,13 @@ async function buildAndOutputComponentFiles({
      * NOTE: we use the default `getTargetPath` even if a user-provided alternative is given. That's because the
      * user-provided alternative is only for the output path, not the override input path.
      */
-    const overrideFilePath = `${options.overridesDir}/${getTargetPath({
+
+    const overrideFilePath = `${options.overridesDir}/${getTargetPath({ target })}`;
+    const overrideFile = await getOverrideFile({
+      filename: outputFilePath,
+      path: overrideFilePath,
       target,
-    })}/${outputFilePath}`;
-    const overrideFile = (await pathExists(overrideFilePath))
-      ? await readFile(overrideFilePath, 'utf8')
-      : null;
+    });
 
     debugTarget(`transpiling ${path}...`);
     let transpiled = '';

packages/cli/src/build/helpers/extensions.ts

@@ -31,8 +31,17 @@ export const getFileExtensionForTarget = ({
     case 'lit':
       return '.ts';
     case 'qwik':
-    case 'react':
       return isTs && type === 'filename' ? '.tsx' : '.jsx';
+    case 'react':
+    case 'reactNative':
+    case 'rsc':
+      switch (type) {
+        // we can't have `.jsx`/`.tsx` extensions in the import paths.
+        case 'import':
+          return isTs ? '.ts' : '.js';
+        case 'filename':
+          return isTs ? '.tsx' : '.jsx';
+      }
     case 'marko':
       return '.marko';
     default:

packages/cli/src/build/helpers/overrides.ts

@@ -0,0 +1,74 @@
+import { Target } from '@builder.io/mitosis';
+import { pathExists, readFile } from 'fs-extra';
+
+const getOverrideFilenames = ({
+  filename,
+  target,
+}: {
+  filename: string;
+  target: Target;
+}): string[] => {
+  switch (target) {
+    case 'alpine':
+    case 'angular':
+    case 'customElement':
+    case 'html':
+    case 'liquid':
+    case 'lit':
+    case 'marko':
+    case 'mitosis':
+    case 'stencil':
+    case 'svelte':
+    case 'swift':
+    case 'template':
+    case 'webcomponent':
+    case 'vue':
+    case 'vue2':
+    case 'vue3':
+      return [filename];
+
+    // For all JSX targets, we want to be flexible and allow any possible extension
+    case 'react':
+    case 'reactNative':
+    case 'rsc':
+    case 'preact':
+    case 'solid':
+    case 'qwik': {
+      // strip 'tsx', 'ts', 'jsx', 'js' from filename
+      const filenameStrippedFromExtensions = filename.replace(/(.jsx?|.tsx?)/, '');
+
+      const EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js'];
+      const filePaths: string[] = EXTENSIONS.map((ext) => filenameStrippedFromExtensions + ext);
+
+      return filePaths;
+    }
+
+    default:
+      return [filename];
+  }
+};
+export const getOverrideFile = async ({
+  path,
+  filename,
+  target,
+}: {
+  path: string;
+  filename: string;
+  target: Target;
+}): Promise<string | null> => {
+  const filePaths = getOverrideFilenames({ filename, target }).map((filename) =>
+    [path, filename].join('/'),
+  );
+
+  const foundFilePath = (
+    await Promise.all(
+      filePaths.map(async (filePath) => ({ filePath, exists: await pathExists(filePath) })),
+    )
+  ).find(({ exists }) => exists);
+
+  if (foundFilePath) {
+    return readFile(foundFilePath.filePath, 'utf8');
+  } else {
+    return null;
+  }
+};