Component per file pattern

I was wondering, what’s the reason for choosing the “react-style” source code layout of components - as opposed to a more Svelte-like code layout, where every file is implicitly a component that can be instantiated?

To illustrate what I mean - taking this example:

import { useState } from "@builder.io/mitosis";

export default function MyComponent(props) {
  const [name, setName] = useState("Steve");

  return (
    <div>
      <input
        css={{
          color: "red",
        }}
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      Hello! I can run in React, Vue, Solid, or Liquid!
    </div>
  );
}

You could instead have something like:

let name = "Steve";

function setName(event) {
  name = event.target.value;
}

export default (
  <div>
    <input
      css={{
        color: "red",
      }}
      value={name}
      onChange={setName}
    />
    Hello! I can run in React, Vue, Solid, or Liquid!
  </div>
);

Obviously this isn’t meaningful Typescript on it’s own - this pattern assumes a component-per-file pattern (which most people will likely prefer anyway) and the compiler would take care of all the instance-related stuff, binding variables to reactive state containers, etc.

Since your intermediary format is just JSON, implementing something like this wouldn’t require much more than the TS parser API and an analysis layer that identifies reactive variables and so on.

Thoughts? 🙂

[PatrickJS]

I think its better to lower the scope of mitosis. So going the babel route.

Mitosis provides a as much info on a mitosis file (the json file) and the dev can use that to generate the correct file(s). Mitosis can provide their own versions of each one framework as examples. And mitosis can talk about tradeoffs etc. This will allow the dev to have full control over the output conventions to fit their use. Otherwise mitosis would have to support unlimited amount of output conventions.

[steve8708]

For future readers: one thing this really helps solve is understanding that:

1. Mitosis is not react
2. Mitosis is static, declarative, and each file can only have one component. There are currently a lot of gotchas if you treat mitosis like react and try to add all kind of random variable declarations, multiple components in a file, etc which this helps make the rules more intuitive in clear