chore: update docs (QwikDev#1706)

IlyasShabi · Oct 13, 2022 · ea0c312 · ea0c312
1 parent 20d6154
commit ea0c312
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 132 deletions.
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -23,7 +23,7 @@
     "@algolia/autocomplete-core": "^1.7.1",
     "@algolia/client-search": "^4.14.2",
     "@builder.io/partytown": "^0.7.1",
-    "@builder.io/qwik": "0.10.0",
+    "@builder.io/qwik": "0.11.0",
     "@builder.io/qwik-city": "0.0.112",
     "@builder.io/sdk-qwik": "^0.0.26",
     "@cloudflare/kv-asset-handler": "0.2.0",

diff --git a/packages/docs/src/components/docsearch/doc-search-modal.tsx b/packages/docs/src/components/docsearch/doc-search-modal.tsx
@@ -1,7 +1,6 @@
 import {
   component$,
   useRef,
-  mutable,
   noSerialize,
   useContextProvider,
   useClientEffect$,
@@ -247,7 +246,7 @@ export const DocSearchModal = component$(
           <header class="DocSearch-SearchBar" ref={formElementRef}>
             <SearchBox
               state={state}
-              autoFocus={mutable(state.initialQuery?.length === 0)}
+              autoFocus={state.initialQuery?.length === 0}
               inputRef={inputRef as any}
               translations={searchBoxTranslations}
               onClose$={() => {
@@ -261,7 +260,7 @@ export const DocSearchModal = component$(
               state={state}
               disableUserPersonalization={disableUserPersonalization}
               inputRef={inputRef as any}
-              translations={mutable(screenStateTranslations)}
+              translations={screenStateTranslations}
             />
           </div>
 

diff --git a/packages/docs/src/components/docsearch/hit.tsx b/packages/docs/src/components/docsearch/hit.tsx
@@ -5,9 +5,9 @@ interface HitProps {
   hit: InternalDocSearchHit | StoredDocSearchHit;
 }
 
-export const Hit = component$(({ hit }: HitProps) => {
+export const Hit = component$((props: HitProps) => {
   return (
-    <a href={hit.url}>
+    <a href={props.hit.url}>
       <Slot />
     </a>
   );

diff --git a/packages/docs/src/components/docsearch/no-results-screen.tsx b/packages/docs/src/components/docsearch/no-results-screen.tsx
@@ -15,53 +15,50 @@ type NoResultsScreenProps = {
   state: DocSearchState;
 };
 
-export const NoResultsScreen = component$(
-  ({ translations = {}, ...props }: NoResultsScreenProps) => {
-    const { noResultsText = 'No results for', suggestedQueryText = 'Try searching for' } =
-      translations;
-    const searchSuggestions: string[] | undefined = props.state.context
-      .searchSuggestions as string[];
-    const context: any = useContext(SearchContext);
+export const NoResultsScreen = component$((props: NoResultsScreenProps) => {
+  const { noResultsText = 'No results for', suggestedQueryText = 'Try searching for' } =
+    props.translations ?? {};
+  const searchSuggestions: string[] | undefined = props.state.context.searchSuggestions as string[];
+  const context: any = useContext(SearchContext);
 
-    return (
-      <div className="DocSearch-NoResults">
-        <div className="DocSearch-Screen-Icon">
-          <NoResultsIcon />
-        </div>
-        <p className="DocSearch-Title">
-          {noResultsText} "<strong>{props.state.query}</strong>"
-        </p>
-
-        {searchSuggestions && searchSuggestions.length > 0 && (
-          <div className="DocSearch-NoResults-Prefill-List">
-            <p className="DocSearch-Help">{suggestedQueryText}:</p>
-            <ul>
-              {searchSuggestions.slice(0, 3).reduce<any[]>(
-                (acc, search) => [
-                  ...acc,
-                  <li key={search}>
-                    <button
-                      className="DocSearch-Prefill"
-                      key={search}
-                      type="button"
-                      onClick$={() => {
-                        context.onInput?.({
-                          target: {
-                            value: search.toLowerCase() + ' ',
-                          },
-                        });
-                      }}
-                    >
-                      {search}
-                    </button>
-                  </li>,
-                ],
-                []
-              )}
-            </ul>
-          </div>
-        )}
+  return (
+    <div className="DocSearch-NoResults">
+      <div className="DocSearch-Screen-Icon">
+        <NoResultsIcon />
       </div>
-    );
-  }
-);
+      <p className="DocSearch-Title">
+        {noResultsText} "<strong>{props.state.query}</strong>"
+      </p>
+
+      {searchSuggestions && searchSuggestions.length > 0 && (
+        <div className="DocSearch-NoResults-Prefill-List">
+          <p className="DocSearch-Help">{suggestedQueryText}:</p>
+          <ul>
+            {searchSuggestions.slice(0, 3).reduce<any[]>(
+              (acc, search) => [
+                ...acc,
+                <li key={search}>
+                  <button
+                    className="DocSearch-Prefill"
+                    key={search}
+                    type="button"
+                    onClick$={() => {
+                      context.onInput?.({
+                        target: {
+                          value: search.toLowerCase() + ' ',
+                        },
+                      });
+                    }}
+                  >
+                    {search}
+                  </button>
+                </li>,
+              ],
+              []
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/packages/docs/src/components/docsearch/result.tsx b/packages/docs/src/components/docsearch/result.tsx
@@ -1,4 +1,4 @@
-import { component$, mutable, Slot, useContext, useStore } from '@builder.io/qwik';
+import { component$, Slot, useContext, useStore } from '@builder.io/qwik';
 import { SearchContext } from './context';
 import type { DocSearchState } from './doc-search';
 import { Snippet } from './snippet';
@@ -59,15 +59,12 @@ export const Result = component$(
               <div class="DocSearch-Hit-content-wrapper">
                 <Snippet
                   class="DocSearch-Hit-title"
-                  hit={mutable(item)}
-                  attribute={mutable('hierarchy.lvl1')}
+                  hit={item}
+                  attribute={'hierarchy.lvl1'}
+                  key="s--1"
                 />
                 {item.content && (
-                  <Snippet
-                    class="DocSearch-Hit-path"
-                    hit={mutable(item)}
-                    attribute={mutable('content')}
-                  />
+                  <Snippet class="DocSearch-Hit-path" hit={item} attribute={'content'} key="s-0" />
                 )}
               </div>
             )}
@@ -80,30 +77,24 @@ export const Result = component$(
                 item.type === 'lvl5' ||
                 item.type === 'lvl6') && (
                 <div class="DocSearch-Hit-content-wrapper">
-                  <Snippet
-                    class="DocSearch-Hit-title"
-                    hit={mutable(item)}
-                    attribute={mutable(undefined)}
-                  />
+                  <Snippet class="DocSearch-Hit-title" hit={item} attribute={undefined} key="s-1" />
                   <Snippet
                     class="DocSearch-Hit-path"
-                    hit={mutable(item)}
-                    attribute={mutable('hierarchy.lvl1')}
+                    hit={item}
+                    attribute={'hierarchy.lvl1'}
+                    key="s-2"
                   />
                 </div>
               )}
 
             {item.type === 'content' && (
               <div class="DocSearch-Hit-content-wrapper">
-                <Snippet
-                  class="DocSearch-Hit-title"
-                  hit={mutable(item)}
-                  attribute={mutable('content')}
-                />
+                <Snippet class="DocSearch-Hit-title" hit={item} attribute={'content'} key="s-3" />
                 <Snippet
                   class="DocSearch-Hit-path"
-                  hit={mutable(item)}
-                  attribute={mutable('hierarchy.lvl1')}
+                  hit={item}
+                  attribute={'hierarchy.lvl1'}
+                  key="s-4"
                 />
               </div>
             )}

diff --git a/packages/docs/src/components/docsearch/results-screen.tsx b/packages/docs/src/components/docsearch/results-screen.tsx
@@ -1,4 +1,4 @@
-import { component$, mutable } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { Result } from './result';
 import { removeHighlightTags } from './utils';
 import { SelectIcon } from './icons/SelectIcon';
@@ -21,7 +21,7 @@ export const ResultsScreen = component$((props: { state: DocSearchState }) => {
             <ul role="listbox" aria-labelledby="docsearch-label" id="docsearch-list">
               {collection.items.map((item, index) => {
                 return (
-                  <Result state={props.state} item={mutable(item)}>
+                  <Result state={props.state} item={item} key={item.objectID}>
                     {item.__docsearch_parent && (
                       <svg q:slot="start-action" class="DocSearch-Hit-Tree" viewBox="0 0 24 54">
                         <g
@@ -41,7 +41,7 @@ export const ResultsScreen = component$((props: { state: DocSearchState }) => {
                       </svg>
                     )}
                     <div q:slot="start-action" class="DocSearch-Hit-icon">
-                      <SourceIcon type={mutable(item.type)} />
+                      <SourceIcon type={item.type} />
                     </div>
                     <div q:slot="end-action" class="DocSearch-Hit-action">
                       <SelectIcon />

diff --git a/packages/docs/src/components/docsearch/screen-state.tsx b/packages/docs/src/components/docsearch/screen-state.tsx
@@ -22,31 +22,31 @@ export interface ScreenStateProps {
   translations: ScreenStateTranslations;
 }
 
-export const ScreenState = component$(
-  ({ translations = {}, state, disableUserPersonalization }: ScreenStateProps) => {
-    if (state.status === 'error') {
-      return <ErrorScreen translations={translations?.errorScreen} />;
-    }
-
-    const hasCollections = state.collections.some((collection) => collection.items.length > 0);
-
-    if (!state.query) {
-      return (
-        <StartScreen
-          disableUserPersonalization={disableUserPersonalization}
-          state={state}
-          translations={translations?.startScreen}
-        />
-      );
-    }
-
-    if (hasCollections === false) {
-      return <NoResultsScreen state={state} translations={translations?.noResultsScreen} />;
-    }
-
-    return <ResultsScreen state={state} />;
+export const ScreenState = component$((props: ScreenStateProps) => {
+  if (props.state.status === 'error') {
+    return <ErrorScreen translations={props.translations?.errorScreen} />;
   }
-);
+
+  const hasCollections = props.state.collections.some((collection) => collection.items.length > 0);
+
+  if (!props.state.query) {
+    return (
+      <StartScreen
+        disableUserPersonalization={props.disableUserPersonalization}
+        state={props.state}
+        translations={props.translations?.startScreen}
+      />
+    );
+  }
+
+  if (hasCollections === false) {
+    return (
+      <NoResultsScreen state={props.state} translations={props.translations?.noResultsScreen} />
+    );
+  }
+
+  return <ResultsScreen state={props.state} />;
+});
 
 // TODO: prevent UI flickering
 // function areEqual(_prevProps, nextProps) {

diff --git a/packages/docs/src/components/docsearch/search-box.tsx b/packages/docs/src/components/docsearch/search-box.tsx
@@ -25,13 +25,13 @@ interface SearchBoxProps {
   translations?: SearchBoxTranslations;
 }
 
-export const SearchBox = component$(({ translations = {}, ...props }: SearchBoxProps) => {
+export const SearchBox = component$((props: SearchBoxProps) => {
   const {
     resetButtonTitle = 'Clear the query',
     resetButtonAriaLabel = 'Clear the query',
     cancelButtonText = 'Cancel',
     cancelButtonAriaLabel = 'Cancel',
-  } = translations;
+  } = props.translations ?? {};
 
   useClientEffect$(() => {
     if (props.autoFocus) {
@@ -115,9 +115,11 @@ export const SearchBox = component$(({ translations = {}, ...props }: SearchBoxP
               // TODO: cancel pending request
             }
             if (event.key === 'Enter') {
-              const { item, itemUrl } = getActiveItem({
-                ...props.state,
-              } as any)!;
+              const activeItem = getActiveItem(props.state as any);
+              if (!activeItem) {
+                return;
+              }
+              const { itemUrl, item } = activeItem;
               if (event.metaKey || event.ctrlKey) {
                 if (itemUrl !== undefined) {
                   context.onSelectItem({ item, event });

diff --git a/packages/docs/src/components/docsearch/start-screen.tsx b/packages/docs/src/components/docsearch/start-screen.tsx
@@ -19,15 +19,15 @@ type StartScreenProps = Pick<ScreenStateProps, 'state' | 'disableUserPersonaliza
   translations?: StartScreenTranslations;
 };
 
-export const StartScreen = component$(({ translations = {}, ...props }: StartScreenProps) => {
+export const StartScreen = component$((props: StartScreenProps) => {
   const {
     recentSearchesTitle = 'Recent',
     noRecentSearchesText = 'No recent searches',
     saveRecentSearchButtonTitle = 'Save this search',
     removeRecentSearchButtonTitle = 'Remove this search from history',
     favoriteSearchesTitle = 'Favorite',
     removeFavoriteSearchButtonTitle = 'Remove this search from favorites',
-  } = translations;
+  } = props.translations ?? {};
   const context: any = useContext(SearchContext);
   const hasCollections = props.state.collections.some((collection) => collection.items.length > 0);
   if (props.state.status === 'idle' && hasCollections === false) {
@@ -56,15 +56,15 @@ export const StartScreen = component$(({ translations = {}, ...props }: StartScr
           {recentCollection &&
             recentCollection.items.map((item, index) => {
               return (
-                <Result state={props.state} item={mutable(item)}>
+                <Result state={props.state} item={item} key={item.objectID}>
                   <div q:slot="start-action" className="DocSearch-Hit-icon">
                     <RecentIcon />
                   </div>
                   <div q:slot="end-action" class="DocSearch-Hit-action">
                     <button
                       className="DocSearch-Hit-action-button"
                       title={saveRecentSearchButtonTitle}
-                      type="submit"
+                      type="button"
                       preventdefault:click
                       onClick$={(event) => {
                         // @ts-ignore

diff --git a/packages/docs/src/components/on-this-page/on-this-page.tsx b/packages/docs/src/components/on-this-page/on-this-page.tsx
@@ -22,7 +22,7 @@ export const OnThisPage = component$(() => {
           <h6>On This Page</h6>
           <ul>
             {contentHeadings.map((h) => (
-              <li>
+              <li key={h.id}>
                 <a
                   href={`#${h.id}`}
                   class={{

diff --git a/packages/qwik/src/core/render/dom/visitor.ts b/packages/qwik/src/core/render/dom/visitor.ts
@@ -1084,20 +1084,16 @@ export const cleanupTree = (
     staticCtx.$rmSlots$.push(parent);
     return;
   }
-  cleanupElement(parent, subsManager);
+  const ctx = tryGetContext(parent);
+  if (ctx) {
+    cleanupContext(ctx, subsManager);
+  }
   const ch = getChildren(parent, 'elements');
   for (const child of ch) {
     cleanupTree(child as QwikElement, staticCtx, subsManager, true);
   }
 };
 
-const cleanupElement = (el: QwikElement, subsManager: SubscriptionManager) => {
-  const ctx = tryGetContext(el);
-  if (ctx) {
-    cleanupContext(ctx, subsManager);
-  }
-};
-
 export const executeContextWithSlots = ({ $static$: ctx }: RenderContext) => {
   executeDOMRender(ctx);
 };