docs: added a note to component's children section

.changeset/stupid-pants-hammer.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+added note on children prop to inform about children prop iteration

packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap

@@ -5321,7 +5321,7 @@ exports[`Alpine.js > jsx > Typescript Test > signalsOnUpdate 1`] = `
 </style>
 <div class=\\"test div\\" x-data=\\"myBasicComponent()\\">
  <span x-html=\\"id\\"></span>
- <span x-html=\\"foo.bar.baz\\"></span>
+ <span x-html=\\"foo.value.bar.baz\\"></span>
 </div>
 <script>
  document.addEventListener(\\"alpine:init\\", () => {

packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap

@@ -13288,7 +13288,7 @@ type Props = {
 @Component({
  selector: \\"my-basic-component\\",
  template: \`
- <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+ <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
  \`,
  styles: [
  \`
@@ -13308,7 +13308,7 @@ export default class MyBasicComponent {
  ngOnChanges(changes: SimpleChanges) {
  if (typeof window !== \\"undefined\\") {
  console.log(\\"props.id changed\\", this.id);
- console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
  }
  }
 }

packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap

@@ -13500,7 +13500,7 @@ type Props = {
 @Component({
  selector: \\"my-basic-component\\",
  template: \`
- <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+ <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
  \`,
  styles: [
  \`
@@ -13520,7 +13520,7 @@ export default class MyBasicComponent {
  ngOnChanges(changes: SimpleChanges) {
  if (typeof window !== \\"undefined\\") {
  console.log(\\"props.id changed\\", this.id);
- console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
  }
  }
 }

packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap

@@ -13712,7 +13712,7 @@ type Props = {
 @Component({
  selector: \\"my-basic-component\\",
  template: \`
- <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+ <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
  \`,
  styles: [
  \`
@@ -13732,7 +13732,7 @@ export default class MyBasicComponent {
  ngOnChanges(changes: SimpleChanges) {
  if (typeof window !== \\"undefined\\") {
  console.log(\\"props.id changed\\", this.id);
- console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
  }
  }
 }

packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap

@@ -11939,7 +11939,7 @@ type Props = {
 @Component({
  selector: \\"my-basic-component\\",
  template: \`
- <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+ <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
  \`,
  styles: [
  \`
@@ -11956,7 +11956,7 @@ export default class MyBasicComponent {
  ngOnChanges(changes: SimpleChanges) {
  if (typeof window !== \\"undefined\\") {
  console.log(\\"props.id changed\\", this.id);
- console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
  }
  }
 }

packages/core/src/__tests__/__snapshots__/angular.test.ts.snap

@@ -25036,7 +25036,7 @@ type Props = {
 @Component({
  selector: \\"my-basic-component\\",
  template: \`
- <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+ <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
  \`,
  styles: [
  \`
@@ -25056,7 +25056,7 @@ export default class MyBasicComponent {
  ngOnChanges(changes: SimpleChanges) {
  if (typeof window !== \\"undefined\\") {
  console.log(\\"props.id changed\\", this.id);
- console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
  }
  }
 }
@@ -25086,7 +25086,7 @@ type Props = {
 @Component({
  selector: \\"my-basic-component\\",
  template: \`
- <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+ <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
  \`,
  styles: [
  \`
@@ -25108,7 +25108,7 @@ export default class MyBasicComponent {
  ngOnChanges(changes: SimpleChanges) {
  if (typeof window !== \\"undefined\\") {
  console.log(\\"props.id changed\\", this.id);
- console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
  }
  }
 }

packages/core/src/__tests__/__snapshots__/html.test.ts.snap

@@ -13168,7 +13168,7 @@ exports[`Html > jsx > Typescript Test > showWithRootText 1`] = `
 exports[`Html > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "<div class=\\"test div\\">
  <template data-el=\\"div-1\\"><!-- props.id --></template>
- <template data-el=\\"div-2\\"><!-- props.foo.bar.baz --></template>
+ <template data-el=\\"div-2\\"><!-- props.foo.value.bar.baz --></template>
 </div>
 <style>
  .div {
@@ -13203,13 +13203,13 @@ exports[`Html > jsx > Typescript Test > signalsOnUpdate 1`] = `
  });
 
  document.querySelectorAll(\\"[data-el='div-2']\\").forEach((el) => {
- renderTextNode(el, props.foo.bar.baz);
+ renderTextNode(el, props.foo.value.bar.baz);
  });
 
  destroyAnyNodes();
 
  console.log(\\"props.id changed\\", props.id);
- console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
 
  pendingUpdate = false;
  }

packages/core/src/__tests__/__snapshots__/lit.test.ts.snap

@@ -8432,7 +8432,7 @@ export default class MyBasicComponent extends LitElement {
 
  updated() {
  console.log(\\"props.id changed\\", this.id);
- console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
  }
 
  render() {
@@ -8441,7 +8441,7 @@ export default class MyBasicComponent extends LitElement {
  padding: 10px;
 }
 </style>
- <div>\${this.id} \${this.foo.bar.baz}</div>
+ <div>\${this.id} \${this.foo.value.bar.baz}</div>
 
  \`;
  }

packages/core/src/__tests__/__snapshots__/marko.test.ts.snap

@@ -4804,16 +4804,19 @@ exports[`Marko > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "class {
  onRender() {
  console.log(\\"props.id changed\\", this.input.id);
- console.log(\\"props.foo.value.bar.baz changed\\", this.input.foo.bar.baz);
+ console.log(
+ \\"props.foo.value.bar.baz changed\\",
+ this.input.foo.value.bar.baz
+ );
  }
 }
 
 style { 
- .div-52492278 {
+ .div-70a61356 {
  padding: 10px;
  }
 }
-<div class=\\"test div-52492278\\">\${input.id} \${input.foo.bar.baz}</div>"
+<div class=\\"test div-70a61356\\">\${input.id} \${input.foo.value.bar.baz}</div>"
 `;
 
 exports[`Marko > jsx > Typescript Test > spreadAttrs 1`] = `

packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap

@@ -19602,8 +19602,8 @@ import { useEffect } from \\"react\\";
 function MyBasicComponent(props) {
  useEffect(() => {
  console.log(\\"props.id changed\\", props.id);
- console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
- }, [props.id, props.foo.bar.baz]);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+ }, [props.id, props.foo.value.bar.baz]);
 
  return (
  <div
@@ -19613,7 +19613,7 @@ function MyBasicComponent(props) {
  }}
  >
  {props.id}
- {props.foo.bar.baz}
+ {props.foo.value.bar.baz}
  </div>
  );
 }

packages/core/src/__tests__/__snapshots__/preact.test.ts.snap

@@ -6991,14 +6991,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
  useEffect(() => {
  console.log(\\"props.id changed\\", props.id);
- console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
- }, [props.id, props.foo.bar.baz]);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+ }, [props.id, props.foo.value.bar.baz]);
 
  return (
  <Fragment>
  <div className=\\"test div\\">
  {props.id}
- {props.foo.bar.baz}
+ {props.foo.value.bar.baz}
  </div>
  <style jsx>{\`
  .div {

packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap

@@ -8480,15 +8480,15 @@ export const MyBasicComponent = component$((props: Props) => {
 
  useTask$(({ track }) => {
  track(() => props.id);
- track(() => props.foo.bar.baz);
+ track(() => props.foo.value.bar.baz);
  console.log(\\"props.id changed\\", props.id);
- console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
  });
 
  return (
  <div class=\\"test div-MyBasicComponent\\">
  {props.id}
- {props.foo.bar.baz}
+ {props.foo.value.bar.baz}
  </div>
  );
 });

packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap

@@ -9613,13 +9613,13 @@ type Props = {
 function MyBasicComponent(props: Props) {
  useEffect(() => {
  console.log(\\"props.id changed\\", props.id);
- console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
- }, [props.id, props.foo.bar.baz]);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+ }, [props.id, props.foo.value.bar.baz]);
 
  return (
  <View style={styles.view1}>
  <Text>{props.id}</Text>
- <Text>{props.foo.bar.baz}</Text>
+ <Text>{props.foo.value.bar.baz}</Text>
  </View>
  );
 }

packages/core/src/__tests__/__snapshots__/react.test.ts.snap

@@ -6807,14 +6807,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
  useEffect(() => {
  console.log(\\"props.id changed\\", props.id);
- console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
- }, [props.id, props.foo.bar.baz]);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+ }, [props.id, props.foo.value.bar.baz]);
 
  return (
  <>
  <div className=\\"test div\\">
  {props.id}
- {props.foo.bar.baz}
+ {props.foo.value.bar.baz}
  </div>
  <style jsx>{\`
  .div {

packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap

@@ -6265,14 +6265,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
  useEffect(() => {
  console.log(\\"props.id changed\\", props.id);
- console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
- }, [props.id, props.foo.bar.baz]);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+ }, [props.id, props.foo.value.bar.baz]);
 
  return (
  <>
  <div className=\\"test div\\">
  {props.id}
- {props.foo.bar.baz}
+ {props.foo.value.bar.baz}
  </div>
  <style jsx>{\`
  .div {

packages/core/src/__tests__/__snapshots__/solid.test.ts.snap

@@ -14086,25 +14086,27 @@ type Props = {
 
 function MyBasicComponent(props: Props) {
  const onUpdateFn_0_props_id = createMemo(() => props.id);
- const onUpdateFn_0_props_foo_bar_baz = createMemo(() => props.foo.bar.baz);
+ const onUpdateFn_0_props_foo_value_bar_baz = createMemo(
+ () => props.foo.value.bar.baz
+ );
  function onUpdateFn_0() {
  console.log(\\"props.id changed\\", props.id);
- console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
  }
  createEffect(
  on(
- () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_bar_baz()],
+ () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_value_bar_baz()],
  onUpdateFn_0
  )
  );
 
  return (
  <>
- <div class=\\"test div-52492278\\">
+ <div class=\\"test div-70a61356\\">
  {props.id}
- {props.foo.bar.baz}
+ {props.foo.value.bar.baz}
  </div>
- <style>{\`.div-52492278 {
+ <style>{\`.div-70a61356 {
  padding: 10px;
 }\`}</style>
  </>
@@ -14129,25 +14131,27 @@ type Props = {
 
 function MyBasicComponent(props: Props) {
  const onUpdateFn_0_props_id = createMemo(() => props.id);
- const onUpdateFn_0_props_foo_bar_baz = createMemo(() => props.foo.bar.baz);
+ const onUpdateFn_0_props_foo_value_bar_baz = createMemo(
+ () => props.foo.value.bar.baz
+ );
  function onUpdateFn_0() {
  console.log(\\"props.id changed\\", props.id);
- console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
  }
  createEffect(
  on(
- () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_bar_baz()],
+ () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_value_bar_baz()],
  onUpdateFn_0
  )
  );
 
  return (
  <>
- <div class=\\"test div-52492278\\">
+ <div class=\\"test div-70a61356\\">
  {props.id}
- {props.foo.bar.baz}
+ {props.foo.value.bar.baz}
  </div>
- <style>{\`.div-52492278 {
+ <style>{\`.div-70a61356 {
  padding: 10px;
 }\`}</style>
  </>

packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap

@@ -7123,14 +7123,14 @@ export class MyBasicComponent {
 
  componentDidUpdate() {
  console.log(\\"props.id changed\\", this.id);
- console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+ console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
  }
 
  render() {
  return (
  <div class=\\"test div\\">
  {this.id}
- {this.foo.bar.baz}
+ {this.foo.value.bar.baz}
  </div>
  );
  }