Add expo-sqlite/kv-store docs

packages/state-v2/src/content/docs/guides/persistence.mdx

@@ -337,3 +337,4 @@ Remote persistence plugins just need `get` and `set` functions. If you'd like to
 ## Contribute
 
 The plugin system is designed to be used for all sorts of providers, so please [request additional providers](https://github.com/LegendApp/legend-state/issues) or ideally even submit a PR with an additional plugin provider. If you do build your own plugin, please let us know as we'd love to have a library of many officially supported plugins.
+

packages/state/src/Components/Home/SectionFullSync.tsx

@@ -1,21 +1,15 @@
-import { observable, type ObservableParam } from "@legendapp/state";
-import { Memo, observer, useObservable } from "@legendapp/state/react";
-import { Editor } from "shared/src/Components/Editor/Editor";
-import { SectionTitle } from "./Components";
-import { useMemo, useRef } from "react";
-import { TabsUnderlined } from "../Kit/TabsUnderlined";
-import { Header } from "./Header";
-import { Text } from "./Text";
-import { CodeSample } from "shared/src/Components/CodeSample";
-import { synced } from "@legendapp/state/sync";
-import { ObservablePersistLocalStorage } from "@legendapp/state/persist-plugins/local-storage";
-import { useMeasure } from "@legendapp/state/react-hooks/useMeasure";
-import { TabsRounded } from "../Kit/TabsRounded";
+import { observable } from '@legendapp/state';
+import { Memo, observer, useObservable } from '@legendapp/state/react';
+import { useMemo } from 'react';
+import { Editor } from 'shared/src/Components/Editor/Editor';
+import { TabsRounded } from '../Kit/TabsRounded';
+import { Header } from './Header';
+import { Text } from './Text';
 
 const Backends = {
-  keel: {
-    text: "Keel",
-    code: `
+    keel: {
+        text: 'Keel',
+        code: `
 const { mutations, queries } = client.api
 
 const messages$ = observable(syncedKeel({
@@ -25,10 +19,10 @@ const messages$ = observable(syncedKeel({
   delete: mutations.deleteMessages,
   persist:
 `,
-  },
-  supabase: {
-    text: "Supabase",
-    code: `
+    },
+    supabase: {
+        text: 'Supabase',
+        code: `
 const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
 
 const messages$ = observable(syncedSupabase({
@@ -39,31 +33,31 @@ const messages$ = observable(syncedSupabase({
   realtime: { filter: \`user_id=eq.\${uid}\` },
   persist:
 `,
-  },
-  firebase: {
-    text: "Firebase",
-    code: `
+    },
+    firebase: {
+        text: 'Firebase',
+        code: `
 const messages$ = observable(syncedFirebase({
   refPath: (uid) => \`/users/\${uid}/messages/\`,
   realtime: true,
   mode: 'merge',
   persist:
 `,
-  },
-  crud: {
-    text: "CRUD",
-    code: `
+    },
+    crud: {
+        text: 'CRUD',
+        code: `
 const messages$ = observable(syncedCrud({
   list: getMessages,
   create: createMessages,
   update: updateMessages,
   delete: deleteMessages,
   persist:
 `,
-  },
-  query: {
-    text: "TanStack Query",
-    code: `
+    },
+    query: {
+        text: 'TanStack Query',
+        code: `
 const messages$ = observable(syncedQuery({
   queryClient,
   query: {
@@ -82,34 +76,35 @@ const messages$ = observable(syncedQuery({
   },
   persist:
 `,
-  },
-  fetch: {
-    text: "Fetch",
-    code: `
+    },
+    fetch: {
+        text: 'Fetch',
+        code: `
 const messages$ = observable(syncedFetch({
   get: 'https://myurl/messages',
   set: 'https://myurl/messages'
   persist:
 `,
-  },
-  synced: {
-    text: "Synced",
-    code: `
+    },
+    synced: {
+        text: 'Synced',
+        code: `
 const messages$ = observable(synced({
   get: () =>
     fetch('https://myurl/messages').then((res) => res.json()),
   set: ({ value }) =>
     fetch('https://myurl/messages', { method: 'POST', data: JSON.stringify(value) })
   persist:
 `,
-  },
+    },
 } satisfies Record<string, { text: string; code: string }>;
 
 const Persistences = {
-  LocalStorage: "ObservablePersistLocalStorage",
-  IndexedDB: "ObservablePersistIndexedDB",
-  MMKV: "ObservablePersistMMKV",
-  AsyncStorage: "ObservablePersistAsyncStorage",
+    LocalStorage: 'ObservablePersistLocalStorage',
+    IndexedDB: 'ObservablePersistIndexedDB',
+    MMKV: 'ObservablePersistMMKV',
+    AsyncStorage: 'ObservablePersistAsyncStorage',
+    ExpoSQLite: 'ObservablePersistSQLiteStorage',
 };
 
 const CodeDemoPersist = (persistence: string) => `
@@ -125,79 +120,60 @@ const CodeDemoPersist = (persistence: string) => `
 type Backend = keyof typeof Backends;
 type Persistence = keyof typeof Persistences;
 
-const DemoSync = ({
-  backend,
-  persistence,
-}: {
-  backend: Backend;
-  persistence: Persistence;
-}) => {
-  const code = `${Backends[backend].code.replace(
-    "persist:",
-    CodeDemoPersist(Persistences[persistence]).trim()
-  )}}))`;
+const DemoSync = ({ backend, persistence }: { backend: Backend; persistence: Persistence }) => {
+    const code = `${Backends[backend].code.replace('persist:', CodeDemoPersist(Persistences[persistence]).trim())}}))`;
 
-  return (
-    <Editor
-      code={code}
-      noInline
-      renderCode={`;render(null)`}
-      hideDemo
-      noError
-      showEditing={false}
-      scope={{
-        Memo,
-        observable,
-      }}
-      classNameEditor="home-editor"
-    />
-  );
+    return (
+        <Editor
+            code={code}
+            noInline
+            renderCode={`;render(null)`}
+            hideDemo
+            noError
+            showEditing={false}
+            scope={{
+                Memo,
+                observable,
+            }}
+            classNameEditor="home-editor"
+        />
+    );
 };
 
 export const SectionFullSync = observer(function SectionFullSync() {
-  const backend$ = useObservable<Backend>("keel");
-  const persistence$ = useObservable<Persistence>("LocalStorage");
-  const backends = useMemo(() => Object.keys(Backends) as Backend[], []);
-  const persistences = useMemo(
-    () => Object.keys(Persistences) as Persistence[],
-    []
-  );
+    const backend$ = useObservable<Backend>('keel');
+    const persistence$ = useObservable<Persistence>('LocalStorage');
+    const backends = useMemo(() => Object.keys(Backends) as Backend[], []);
+    const persistences = useMemo(() => Object.keys(Persistences) as Persistence[], []);
 
-  return (
-    <div className="mt-section max-w-3xl mx-auto sm:px-4">
-      <div className="sm:border border-tBorder rounded-xl px-4 sm:px-8 md:px-12 py-8 md:py-12 !mt-8 sm:bg-tBgDark sm:shadow-tShadowDark">
-        <Header size="h2" className="mb-4">
-          Local First with any backend
-        </Header>
-        <div>
-          <Text className="max-w-lg">
-            Use one of our ever-expanding library of sync plugins or build your
-            own on top of the CRUD plugin or the basic synced plugin.
-          </Text>
-          <Header size="h6" className="pt-8">
-            Backend
-          </Header>
-          <div className="flex gap-4">
-            <TabsRounded
-              tabs={backends}
-              tabText={(tab) => Backends[tab].text}
-              $activeTab={backend$}
-            />
-          </div>
-          <Header size="h6" className="!mt-8">
-            Persistence
-          </Header>
-          <div className="flex gap-4">
-            <TabsRounded
-              tabs={persistences}
-              $activeTab={persistence$}
-            />
-          </div>
-        </div>
-        <div>
-          <DemoSync backend={backend$.get()} persistence={persistence$.get()} />
+    return (
+        <div className="mt-section max-w-3xl mx-auto sm:px-4">
+            <div className="sm:border border-tBorder rounded-xl px-4 sm:px-8 md:px-12 py-8 md:py-12 !mt-8 sm:bg-tBgDark sm:shadow-tShadowDark">
+                <Header size="h2" className="mb-4">
+                    Local First with any backend
+                </Header>
+                <div>
+                    <Text className="max-w-lg">
+                        Use one of our ever-expanding library of sync plugins or build your own on top of the CRUD
+                        plugin or the basic synced plugin.
+                    </Text>
+                    <Header size="h6" className="pt-8">
+                        Backend
+                    </Header>
+                    <div className="flex gap-4">
+                        <TabsRounded tabs={backends} tabText={(tab) => Backends[tab].text} $activeTab={backend$} />
+                    </div>
+                    <Header size="h6" className="!mt-8">
+                        Persistence
+                    </Header>
+                    <div className="flex gap-4">
+                        <TabsRounded tabs={persistences} $activeTab={persistence$} />
+                    </div>
+                </div>
+                <div>
+                    <DemoSync backend={backend$.get()} persistence={persistence$.get()} />
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 });