Skip to content

Latest commit

 

History

History
250 lines (201 loc) · 5.57 KB

namespace.md

File metadata and controls

250 lines (201 loc) · 5.57 KB

Namespace

<solid:for>

Alias for <For>

<solid:for each={state.list} fallback={<div>Loading...</div>}>
  {(item) => <div>{item}</div>}
</solid:for>
import { For as _For } from "solid-js";
<_For each={state.list} fallback={<div>Loading...</div>}>
  {item => <div>{item}</div>}
</_For>;

<solid:index>

Alias for <Index>

<solid:index each={state.list} fallback={<div>Loading...</div>}>
  {(item) => <div>{item()}</div>}
</solid:index>
import { Index as _Index } from "solid-js";
<_Index each={state.list} fallback={<div>Loading...</div>}>
  {item => <div>{item()}</div>}
</_Index>;

<solid:switch> and <solid:match>

Alias for <Switch> and <Match>

<solid:switch fallback={<div>Not Found</div>}>
  <solid:match when={state.route === "home"}>
    <Home />
  </solid:match>
  <solid:match when={state.route === "settings"}>
    <Settings />
  </solid:match>
</solid:switch>
import { Match as _Match } from "solid-js";
import { Switch as _Switch } from "solid-js";
<_Switch fallback={<div>Not Found</div>}>
  <_Match when={state.route === "home"}>
    <Home />
  </_Match>
  <_Match when={state.route === "settings"}>
    <Settings />
  </_Match>
</_Switch>;

<solid:show>

Alias for <Show>

<solid:show when={state.user} fallback={<div>Loading...</div>}>
  {(user) => <div>{user.firstName}</div>}
</solid:show>
import { Show as _Show } from "solid-js";
<_Show when={state.user} fallback={<div>Loading...</div>}>
  {user => <div>{user.firstName}</div>}
</_Show>;

<solid:error-boundary>

Alias for <ErrorBoundary>

<solid:error-boundary
  fallback={(err, reset) => <div onClick={reset}>Error: {err.toString()}</div>}
>
  <MyComp />
</solid:error-boundary>
import { ErrorBoundary as _ErrorBoundary } from "solid-js";
<_ErrorBoundary fallback={(err, reset) => <div onClick={reset}>Error: {err.toString()}</div>}>
  <MyComp />
</_ErrorBoundary>;

<solid:suspense>

Alias for <Suspense>

<solid:suspense fallback={<div>Loading...</div>}>
  <AsyncComponent />
</solid:suspense>
import { Suspense as _Suspense } from "solid-js";
<_Suspense fallback={<div>Loading...</div>}>
  <AsyncComponent />
</_Suspense>;

<solid:suspense-list>

Alias for <SuspenseList>

<solid:suspense-list revealOrder="forwards" tail="collapsed">
  <ProfileDetails user={resource.user} />
  <solid:suspense fallback={<h2>Loading posts...</h2>}>
    <ProfileTimeline posts={resource.posts} />
  </solid:suspense>
  <solid:suspense fallback={<h2>Loading fun facts...</h2>}>
    <ProfileTrivia trivia={resource.trivia} />
  </solid:suspense>
</solid:suspense-list>
import { Suspense as _Suspense } from "solid-js";
import { SuspenseList as _SuspenseList } from "solid-js";
<_SuspenseList revealOrder="forwards" tail="collapsed">
  <ProfileDetails user={resource.user} />
  <_Suspense fallback={<h2>Loading posts...</h2>}>
    <ProfileTimeline posts={resource.posts} />
  </_Suspense>
  <_Suspense fallback={<h2>Loading fun facts...</h2>}>
    <ProfileTrivia trivia={resource.trivia} />
  </_Suspense>
</_SuspenseList>;

<solid:dynamic>

Alias for <Dynamic>

<solid:dynamic component={state.component} someProp={state.something} />
import { Dynamic as _Dynamic } from "solid-js/web";
<_Dynamic component={state.component} someProp={state.something} />;

<solid:portal>

Alias for <Portal>

<solid:portal mount={document.getElementById("modal")}>
  <div>My Content</div>
</solid:portal>
import { Portal as _Portal } from "solid-js/web";
<_Portal mount={document.getElementById("modal")}>
  <div>My Content</div>
</_Portal>;

<solid:assets>

Alias for <Assets>

<solid:assets>
  <link rel="stylesheet" href="/styles.css" />
</solid:assets>
import { Assets as _Assets } from "solid-js/web";
<_Assets>
  <link rel="stylesheet" href="/styles.css" />
</_Assets>;

<solid:hydration-script>

Alias for <HydrationScript>

const App = () => {
  return (
    <html lang="en">
      <head>
        <title>🔥 Solid SSR 🔥</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/styles.css" />
        <solid:hydration-script />
      </head>
      <body>{/*... rest of App*/}</body>
    </html>
  );
}
import { HydrationScript as _HydrationScript } from "solid-js/web";

const App = () => {
  return <html lang="en">
      <head>
        <title>🔥 Solid SSR 🔥</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/styles.css" />
        <_HydrationScript />
      </head>
      <body>{
        /*... rest of App*/
      }</body>
    </html>;
};

<solid:no-hydration>

Alias for <NoHydration>

<solid:no-hydration>
  <ImNotHydrated />
</solid:no-hydration>
import { NoHydration as _NoHydration } from "solid-js/web";
<_NoHydration>
  <ImNotHydrated />
</_NoHydration>;