webcomponent output has TypeScript in a .js file

[kylecordes]

• I am interested in helping provide a fix!

Scope

• This only impacts specific generators/outputs (please list them here): webcomponent

Describe the bug

The webcomponent output has a ".js" file, which has TypeScript code in it. Downstream tools... are not expecting this.

To Reproduce

yarn
yarn build

look at packages/e2e-app/output/webcomponent/src/components/my-component.js

Expected behavior

Ideally: Emit TS, compile it to JS+d.ts for proper downstream consumption.

OK: Emit JS (in a .js file).

Screenshots

[samijaber]

Good catch.

Fixing default extensions

Now that we are starting to add types to the Mitosis generators' output, we need to rename the default extension(s) that our mitosis build command uses to .ts/.tsx probably:

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

Lines 3 to 16 in ab0708f

	export const getFileExtensionForTarget = (target: Target) => {
	switch (target) {
	case 'vue':
	return '.vue';
	case 'swift':
	return '.swift';
	case 'svelte':
	return '.svelte';
	case 'solid':
	return '.jsx';
	default:
	return '.js';
	}
	};

Allow CLI to toggle outputs

Also, we might want to add some logic to toggle TS output on/off in the CLI commands, and select .ts/.js (or .jsx/.tsx) based on that. To do that:

• have the core generators always emit TS, and add a MitosisConfig["outputs"]: ["typescript" | "javascript"] flag to the CLI.
  • If the outputs array contains typescript, we output the TS code as-is.
  • If the outputs array contains javascript, an additional transpilation step is executed that takes the TS code and transpiles it down to JS, and saves that to a file

The outputs array can contain 1 or both of those flags. If it's empty, we default to typescript 🤔.

PS: We can probably reuse this function for transpilation:

mitosis/packages/cli/src/build/helpers/transpile.ts

Line 17 in ab0708f

export const transpile = async ({

[kylecordes]

An a PR coming soon I’m looking to address just the first part of this, getting the extensions right.

Once Mitosis can emit valid TypeScript in all cases, there shouldn't be any need to have another code path to directly emit JavaScript; TypeScript could be emitted always, with a flag/option to ask Mitosis to call esbuild to quickly get JS; or Mitosis could be scoped to emitting TypeScript (which is incredibly popular nowadays), and the consumer could process it to JS is needed.

[samijaber]

@kylecordes spun out #511 for the second part.

You'd be surprised at how many people still refuse to use TypeScript today 😄. I think we should allow folks to toggle whether Mitosis should output JS, TS, or both.

It won't really be any additional code-path to directly emit JS: Mitosis generators will always output TS, and the JS option will be an esbuild transpiler on top of that, which we already have built in our CLI as per my comment, and make use of in certain cases.