core: add new fields to MitosisComponent type: slots

export const createMitosisComponent = (
  options?: Partial<MitosisComponent>,
): MitosisComponent => ({
  '@type': '@builder.io/mitosis/component',
  imports: [],
  inputs: [],
  meta: {},
  state: {},
  children: [],
  hooks: {},
  context: { get: {}, set: {} },
  name: options?.name || 'MyComponent',
  subComponents: [],
  ...options,
});

a component needs to have all named slots available and I think it should be added here. and inside of children we need Slot nodes

'@type': '@builder.io/mitosis/component',
  slots: {
    mySelectorName: createMitosisComponent({})
  },
  children: [
    createMitosisNode({
      name: 'Slot',
      properties: {
        name: 'mySelectorName'
      } 
    });
  ],

[sahilmob]

@steve8708 Sure thing. would love to add an eslint rule in the future 🚀 🚀 🚀

[steve8708]

great idea. only thing is this should probably be on @builder.io/mitosis/node right? aka when you have

<Layout slotFoo={<Bar />} />

it would become

    {
      "@type": "@builder.io/mitosis/node",
      "name": "Layout",
      "meta": {},
      "properties": {},
      "slots": {
        "foo": { "@type": "@builder.io/mitosis/node", name: "Bar" ... }
      },
      "children": []
    }

this would be a great eslint rule to eventually add too (cc @sahilmob), essentially that

<div foo={<Jsx />} />

is not allowed, you can only put jsx expressions as binding values if the binding name starts with slot