Inline comp docs (#931)

* allow people to pass handlers to modal close

* docs: improve contributor guide

* docs: mention inline components

Author: thejackshelton

apps/website/src/components/navigation-docs/navigation-docs.tsx

@@ -27,7 +27,7 @@ const defaultLinksGroups: LinkGroup[] = [
     children: [
       {
         name: 'Contributing',
-        href: '/contributing/',
+        href: '/docs/contributing/',
       },
       {
         name: 'Headless',

apps/website/src/routes/docs/contributing/examples/inline.tsx

@@ -0,0 +1,41 @@
+import { component$, PropsOf, useSignal } from '@builder.io/qwik';
+import { findComponent, processChildren } from '@qwik-ui/utils';
+
+export default component$(() => {
+  const isRenderedSig = useSignal(false);
+
+  return (
+    <div>
+      <button onClick$={() => (isRenderedSig.value = true)}>render on the client</button>
+      {isRenderedSig.value && (
+        <ExampleRoot>
+          <Item />
+          <Item />
+          <Item />
+          <Item />
+        </ExampleRoot>
+      )}
+    </div>
+  );
+});
+
+const ExampleRoot = ({ children }: PropsOf<'div'>) => {
+  let currItemIndex = 0;
+
+  findComponent(Item, (itemProps) => {
+    itemProps._index = currItemIndex;
+    currItemIndex++;
+  });
+
+  processChildren(children);
+
+  return <div>{children}</div>;
+};
+
+const Item = component$(({ _index }: { _index?: number }) => {
+  if (_index === undefined) {
+    throw new Error('Qwik UI: Example inline component cannot find its proper index.');
+  }
+
+  return <div>Item {_index + 1}</div>;
+});

apps/website/src/routes/docs/contributing/examples/server.tsx

@@ -0,0 +1,25 @@
+import { component$, Signal, useSignal, useTask$ } from '@builder.io/qwik';
+
+export default component$(() => {
+  const countSig = useSignal(0);
+
+  return (
+    <div>
+      rendered on the server
+      <Item countSig={countSig} />
+      <Item countSig={countSig} />
+      <Item countSig={countSig} />
+      <Item countSig={countSig} />
+    </div>
+  );
+});
+
+const Item = component$(({ countSig }: { countSig: Signal<number> }) => {
+  const itemNum = useSignal(0);
+
+  useTask$(() => {
+    itemNum.value = ++countSig.value;
+  });
+
+  return <div>Item {itemNum.value}</div>;
+});

apps/website/src/routes/docs/contributing/examples/the-problem.tsx

@@ -0,0 +1,32 @@
+import { component$, Signal, useSignal, useTask$ } from '@builder.io/qwik';
+
+export default component$(() => {
+  const isItemsRenderedSig = useSignal(false);
+  const countSig = useSignal(0);
+
+  return (
+    <div>
+      <button onClick$={() => (isItemsRenderedSig.value = true)}>
+        render on the client
+      </button>
+      {isItemsRenderedSig.value && (
+        <>
+          <Item countSig={countSig} />
+          <Item countSig={countSig} />
+          <Item countSig={countSig} />
+          <Item countSig={countSig} />
+        </>
+      )}
+    </div>
+  );
+});
+
+const Item = component$(({ countSig }: { countSig: Signal<number> }) => {
+  const itemNum = useSignal(0);
+
+  useTask$(() => {
+    itemNum.value = ++countSig.value;
+  });
+
+  return <div>Item {itemNum.value}</div>;
+});