https://github.com/hexagon6/svelte-solid-store

https://github.com/hexagon6/svelte-solid-store

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/hexagon6/svelte-solid-store
• Owner: hexagon6
• License: mit
• Created: 2023-05-14T15:45:45.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-21T09:51:29.000Z (8 months ago)
• Last Synced: 2024-11-09T03:18:49.605Z (about 2 months ago)
• Language: JavaScript
• Size: 106 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @hexagon6/svelte-solid-store

## Purpose

Using svelte & sveltekit is nice. Using solid (social linked data) should be nice too, so svelte-solid store gives you easy access to webId, username, preferencesFile, publicTypeIndex & privateTypeIndex to get you started.

## Usage (with sveltekit and ssr disabled)

1. Install with a package manager, e.g. npm : `npm i @hexagon6/svelte-solid-store`

2. Add it to your svelte component:

```svelte

// $lib/components/username.svelte

import {username} from '@hexagon6/svelte-solid-store'

Hello, my name is {$username}

```

3. Set a session in your page (example with @inrupt/solid-client-authn-browser -> ssr = false)

```javascript

// +page.js

import { session } from "@hexagon6/svelte-solid-store";

import { browser } from "$app/environment";

import {

  handleIncomingRedirect,

  getDefaultSession,

} from "@inrupt/solid-client-authn-browser";

export async function load({ url }) {

  if (browser) {

    await handleIncomingRedirect({

      url: url.href,

      restorePreviousSession: true,

    });

    session.set(getDefaultSession());

  }

}

export const ssr = false;

```

```svelte

// +page.svelte

  import { page } from '$app/stores'

  import { login, logout } from '@inrupt/solid-client-authn-browser'

  import { session } from '@hexagon6/svelte-solid-store'

  import Username from '$lib/components/username.svelte'

  // change this to your pod

  let oidcIssuer = 'https://yoursolidpod.local'

  const handleLogin = () => {

    login({

      // make sure you make oidcIssuer (=pod Url) user-configurable

      oidcIssuer: oidcIssuer,

      // solid pod will redirect to current page after login

      redirectUrl: $page.url.href,

      // clientName is what your pod will show you

      clientName: 'Your Sveltekit App Name',

    })

  }

  const handleLogout = () => {

    logout()

    session.set(null)

  }

svelte-solid-store



  

  Login

  Logout



```