supa svelte

Cybernetically enhanced supabase apps

What is sveltesupa

Svelte supa is build on top of svelte to give svelte users an easier way to access their supabase.

How to use sveltesupa

I created an example app which is visible out here.

Getting started

Create a folder and run these commands in that directory.

  npx degit sveltejs/template
  npm install supabase supasvelte
  npm run dev

Documentation

Initalization

Go to or create your supabase project. In the API sidebar, go to Authenication. This is where you find your SUPABASE_KEY and SUPABASE_URL. Paste these in your project. To initialze the project use.

  import {sveltesupa} from "sveltesupa"

  sveltesupa.init({
    url: "<YOUR_SUPABASE_URL>", 
    key: "<YOUR_SUPABASE_key>"
  })

Auth

  import {Auth} from "sveltesupa"
  <Auth {sveltesupa} />

Props

• sveltesupa: [Required] An initialized sveltesupa.

Slots

• user - Current user in session, if no user is in session than user is null or false.
• error - String of error that happened while preforming auth action.
• signIn: [Function] - Takes parameters email and password to sign in a user.
• signUp: [Function] - Takes parameters email and password to sign up a user.
• signOut: [Function] - Signs the user out.

Example

<script>
  import {Auth, sveltesupa} from "sveltesupa"
  sveltesupa.init({url:"<YOUR_SUPABASE_URL>", key: "<YOUR_SUPABASE_KEY>"})
  let credentials = {email:"", password:""}
</script>

<Auth {sveltesupa} let:user let:signIn let:signOut let:error>
  <pre>{JSON.stringify(user, null, 2)}</pre>

  <button on:click={signOut}>Sign out</button>

  <div slot="logged-out">
    <form on:submit={signIn(credentials)}>
      <input type="email" bind:value={credentials.email} required/>
      <input type="password" bind:value={credentials.email} required />
      <input type="submit">
    </form>
  </div>
</Auth>

Table

Props

• name: [String] - [Required] - A name of a certain table in your database.
• select: [String] - A comma seperated string of collums in a database. Default is all columns.
• limit: [String | Num | false] - Limit the amount of rows
• order: [">" | "<" | false] - Order row id from large to small or small to large.
• range: [[String, String] | false] - From, to row
• single: [String | false] - Returns only one data item
• where: [[[String], [String], [String]] | false ] - ["Column name", "Filter type", "value"]

Filter types

• == - alias for equal to, eq.
• === - alias for strictly equal to, is
• < - alias for less than, lt
• \> - alias for greater than, gt
• <= - alias for less than or equal to, lte
• \>= - alias for greater than or equal to, gte
• % - alias for like
• i% - alias for ilike
• contains
• containedBy
• in
• rangeGt
• rangeGte
• rangeLt
• rangeLte
• rangeAdjacent
• overlaps
• textseatch

Slots

• data - array of rows
• error - String of errors that happen during Table actions.
• refresh: [Function] - Will manually refresh the data

Example

  <Table name="Users" select="name, surname" limit={3} where={["id",">=","3"]}  let:data let:error let:refresh>
    <h1>data</h1>
    <pre>{JSON.stringify(data, null, 2)}</pre>
    <button on:click={refresh}>Click here to refresh data</button>
    <div slot="error">
      <h1>There was an error:</p>
      <p>{error}</p>
      </div>
  </Table>

Storage

import {Storage} from "sveltesupa"

⚠️ Don't forget to set your policies where users have at least access to SELECT

Props

• bucket: [String] - [Required] - Bucket name
• file: [String] - [Required] - Path to file name

Example

Download a image from bucket

<Storage bucket="cats" file="IMG_123.png" let:src let:error let:delete>
  <img {src} alt="blob">

  <button on:click={delete}>Delete file</button>

  {#if error}
    <pre>error: {JSON.stringify(error, null, 2)}</pre>
  {/if}
</Storage>

Uplaod image to bucket

  <script>
    let files;
  </script>

<Storage bucket="cats" let:src let:error let:upload>
  {#if src}
    <img {src} alt="blob">
  {/if}

  <input type="file" bind:files>

  <button on:click={() => upload(files)}>Delete file</button>

  {#if error}
    <pre>error: {JSON.stringify(error, null, 2)}</pre>
  {/if}
</Storage>

What we are working on

1. Sort rows by a specified column name order
2. Add third party auth providers
3. Able to upload row in Table
4. Able to delete row in Table

Change log

Version 0.1.0

• Added storage component
• Added count for Table
• Removed error text for Table component

Version 0.1.1

• Added auto updated (subscription) table

Version 0.1.2

• Able to delete files

Version 0.1.3

• Able to upload files