Different results with CLI or with mitosis.config.js

Hello, For sure I’m doing something wrong but I’m having different results using mitosis.config.js than the cli.

module.exports = {
  files: 'src/**/*.lite.tsx',
  dest: 'packages',
  options: {},
  targets: ['react', 'html', 'angular']
};

This generates compiled JS files not components.

but using commands like:

mitosis compile --to=react src/button/button.lite.tsx > packages/react/src/button/button.lite.jsx

Generates the expected component. I’was digging into the docs and config options but I cannot find how to using the config file I can have the same result, I don’t need the code compiled I’m good with just the components.

Sorry for not understanding this, if not possible no problem I’ll use the CLI commands into npm scripts and done

[samijaber]

One thing I noticed: mitosis build and mitosis compile are different commands that do different things:

• mitosis compile is a much simpler command: it takes 1 file and outputs it to one target.
• mitosis build will handle an entire directory, which may include non-mitosis JS/TS files etc.

You have been interchanging the two, so I believe that’s where the discrepancy lies. Looking at https://github.com/CKGrafico/papanasi/commit/722b96790711c559eac73d5ce484dd2d89c4d841#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L8, you were using mitosis build, but in this issue, you’re comparing its output to that of mitosis compile. So the issue is not CLI vs mitosis.config.js, it’s build vs compile.

My thing was that I wanted to manage the transpilation by myself

Yup, I hear you! That’s exactly what we’ve realized as well while generating react-native code. We’re open to remove the transpile step I linked to in the previous comment, and leaving that off to the end-user. Alternatively, we can move it behind a shouldTranspileComponent: boolean flag for react/react-native configurations.

[samijaber]

@ixTec This has indeed been solved. If you provide a typescript: true boolean to a generator’s options, then it will return the original, non-transpiled component:

Example:

// mitosis.config.js
module.exports = {
  files: 'src/**',
  targets: ['reactNative', 'vue2', 'vue3', 'solid', 'svelte', 'react', 'qwik'],
  options: {
    react: {
      typescript: true,
      stylesType: 'style-tag',
    },
    qwik: {
      typescript: true,
    },
    svelte: {
      typescript: true,
    }
  }
}