@hellocoop/svelte 1.0.0

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/Provider.svelte

@@ -0,0 +1,27 @@
+<script context="module" lang="ts">
+  import { type Auth } from './auth'
+  import { setContext, getContext } from 'svelte'
+  
+  export const routeConfig = {
+      login: '/api/hellocoop?login=true',
+      auth: '/api/hellocoop?auth=true',
+      logout: '/api/hellocoop?logout=true',
+  }
+  
+  export const getHelloProviderContext = (): Auth | undefined => {
+      return getContext('HelloProviderContext')
+  }
+</script>
+    
+<script>
+    export let auth = {}
+    export let config = {}
+
+    setContext('HelloProviderContext', auth)
+
+    if (config?.login) routeConfig.login = config.login 
+    if (config?.auth) routeConfig.auth = config.auth 
+    if (config?.logout) routeConfig.logout = config.logout 
+</script>
+    
+<slot/>

package/dist/Provider.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import { type Auth } from './auth';
+export declare const routeConfig: {
+    login: string;
+    auth: string;
+    logout: string;
+};
+export declare const getHelloProviderContext: () => Auth | undefined;
+declare const __propDef: {
+    props: {
+        auth?: {} | undefined;
+        config?: {} | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ProviderProps = typeof __propDef.props;
+export type ProviderEvents = typeof __propDef.events;
+export type ProviderSlots = typeof __propDef.slots;
+export default class Provider extends SvelteComponent<ProviderProps, ProviderEvents, ProviderSlots> {
+}
+export {};

package/dist/auth.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="svelte" />
+import type { Readable } from 'svelte/store';
+import type { Claims } from '@hellocoop/types';
+type AuthCookie = {
+    sub: string;
+    iat: number;
+} & Claims & {
+    [key: string]: any;
+};
+export type Auth = {
+    isLoggedIn: false;
+} | ({
+    isLoggedIn: true;
+} & AuthCookie);
+export type AuthState = {
+    auth: Auth | {};
+    isLoading: Readable<boolean>;
+    isLoggedIn: Readable<boolean> | undefined;
+};
+export declare const useAuth: () => AuthState;
+export {};

package/dist/auth.js

@@ -0,0 +1,26 @@
+/// <reference types="svelte" />
+import { useSWR } from "sswr";
+import { getHelloProviderContext, routeConfig } from "./Provider.svelte";
+const fetcher = async (url) => {
+    try {
+        const response = await fetch(url);
+        const auth = await response.json();
+        return auth;
+    }
+    catch (err) {
+        console.error(err);
+        return undefined;
+    }
+};
+export const useAuth = () => {
+    const defaultAuth = getHelloProviderContext();
+    const { data: auth, isLoading } = useSWR(routeConfig.auth, {
+        fetcher,
+        initialData: defaultAuth
+    });
+    return {
+        auth: auth || {},
+        isLoading,
+        isLoggedIn: auth?.isLoggedIn
+    };
+};

package/dist/buttons/BaseButton.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { routeConfig } from "../Provder.svelte"
+  import { Button, type ProviderHint, type Scope } from '@hellocoop/types'
+
+  interface $$Props {
+    label?: string
+    style?: any
+    color?: Button.Color
+    theme?: Button.Theme
+    hover?: Button.Hover
+    scope?: Scope[]
+    updateScope?: Button.UpdateScope
+    targetURI?: string
+    providerHint?: ProviderHint[],
+    showLoader?: boolean,
+    disabled?: boolean
+  }
+
+  // All prop exports must still be typed standalone and in the $$Props interface
+  export let label: string = "ō&nbsp;&nbsp;&nbsp;Continue with Hellō";
+  export let style: any = {} //TBD any
+  export let color: Button.Color = "black"
+  export let theme: Button.Theme = "ignore-light"
+  export let hover: Button.Hover = "pop"
+  export let scope: Scope[];
+  export let updateScope: Button.UpdateScope;
+  export let targetURI: string = ""
+  export let providerHint: ProviderHint[];
+  export let showLoader: boolean = false
+  export let disabled: boolean = false
+
+  let clicked: boolean = false
+  const loginRoute = new URL(routeConfig.login, window.location.origin)
+  if(scope)
+    loginRoute.searchParams.set("scope", scope.join(" "))
+
+  loginRoute.searchParams.set("target_uri", targetURI || window.location.pathname)
+  
+  if(updateScope)
+      loginRoute.searchParams.set("scope", "profile_update " + updateScope)
+
+  if(providerHint)
+    loginRoute.searchParams.set("provider_hint", providerHint.join(" "))
+
+  const onClickHandler = (): void => {
+      clicked = true
+      window.location.href = loginRoute.href
+  }
+</script>
+
+<button
+  on:click={onClickHandler}
+  class="hello-btn {Button.CLASS_MAPPING[color]?.[theme]} {Button.HOVER_MAPPING[hover]}"
+  class:hello-btn-loader={showLoader || clicked}
+  disabled={disabled || clicked}
+  {style}
+>
+  {@html label}
+</button>

package/dist/buttons/BaseButton.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import { Button } from '@hellocoop/types';
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        style?: any;
+        color?: Button.Color | undefined;
+        theme?: Button.Theme | undefined;
+        hover?: Button.Hover | undefined;
+        scope?: ("name" | "nickname" | "preferred_username" | "given_name" | "family_name" | "email" | "phone" | "picture" | "ethereum" | "discord" | "twitter" | "github" | "gitlab" | "openid" | "profile_update")[] | undefined;
+        updateScope?: Button.UpdateScope | undefined;
+        targetURI?: string | undefined;
+        providerHint?: ("phone" | "ethereum" | "discord" | "twitter" | "github" | "gitlab" | "apple" | "facebook" | "google" | "twitch" | "tumblr" | "mastodon" | "microsoft" | "line" | "wordpress" | "yahoo" | "qrcode" | "apple--" | "microsoft--" | "google--" | "email--" | "passkey--")[] | undefined;
+        showLoader?: boolean | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseButtonProps = typeof __propDef.props;
+export type BaseButtonEvents = typeof __propDef.events;
+export type BaseButtonSlots = typeof __propDef.slots;
+export default class BaseButton extends SvelteComponent<BaseButtonProps, BaseButtonEvents, BaseButtonSlots> {
+}
+export {};

package/dist/buttons/ContinueButton.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import BaseButton from "./BaseButton.svelte";
+</script>
+
+<BaseButton {...$$props}/>

package/dist/buttons/ContinueButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContinueButtonProps = typeof __propDef.props;
+export type ContinueButtonEvents = typeof __propDef.events;
+export type ContinueButtonSlots = typeof __propDef.slots;
+export default class ContinueButton extends SvelteComponent<ContinueButtonProps, ContinueButtonEvents, ContinueButtonSlots> {
+}
+export {};

package/dist/buttons/LoginButton.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import BaseButton from "./BaseButton.svelte";
+</script>
+
+<BaseButton label="ō&nbsp;&nbsp;&nbsp;Login with Hellō" {...$$props} />

package/dist/buttons/LoginButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LoginButtonProps = typeof __propDef.props;
+export type LoginButtonEvents = typeof __propDef.events;
+export type LoginButtonSlots = typeof __propDef.slots;
+export default class LoginButton extends SvelteComponent<LoginButtonProps, LoginButtonEvents, LoginButtonSlots> {
+}
+export {};

package/dist/buttons/UpdateDiscordButton.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import BaseButton from "./BaseButton.svelte";
+</script>
+
+<BaseButton label="ō&nbsp;&nbsp;&nbsp;Update Discord with Hellō" {...$$props} updateScope="discord" />

package/dist/buttons/UpdateDiscordButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UpdateDiscordButtonProps = typeof __propDef.props;
+export type UpdateDiscordButtonEvents = typeof __propDef.events;
+export type UpdateDiscordButtonSlots = typeof __propDef.slots;
+export default class UpdateDiscordButton extends SvelteComponent<UpdateDiscordButtonProps, UpdateDiscordButtonEvents, UpdateDiscordButtonSlots> {
+}
+export {};

package/dist/buttons/UpdateEmailButton.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import BaseButton from "./BaseButton.svelte";
+</script>
+
+<BaseButton label="ō&nbsp;&nbsp;&nbsp;Update Email with Hellō" {...$$props} updateScope="email" />

package/dist/buttons/UpdateEmailButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UpdateEmailButtonProps = typeof __propDef.props;
+export type UpdateEmailButtonEvents = typeof __propDef.events;
+export type UpdateEmailButtonSlots = typeof __propDef.slots;
+export default class UpdateEmailButton extends SvelteComponent<UpdateEmailButtonProps, UpdateEmailButtonEvents, UpdateEmailButtonSlots> {
+}
+export {};

package/dist/buttons/UpdateGitHubButton.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import BaseButton from "./BaseButton.svelte";
+</script>
+
+<BaseButton label="ō&nbsp;&nbsp;&nbsp;Update GitHub with Hellō" {...$$props} updateScope="github" />

package/dist/buttons/UpdateGitHubButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UpdateGitHubButtonProps = typeof __propDef.props;
+export type UpdateGitHubButtonEvents = typeof __propDef.events;
+export type UpdateGitHubButtonSlots = typeof __propDef.slots;
+export default class UpdateGitHubButton extends SvelteComponent<UpdateGitHubButtonProps, UpdateGitHubButtonEvents, UpdateGitHubButtonSlots> {
+}
+export {};

package/dist/buttons/UpdateGitLabButton.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import BaseButton from "./BaseButton.svelte";
+</script>
+
+<BaseButton label="ō&nbsp;&nbsp;&nbsp;Update GitLab with Hellō" {...$$props} updateScope="gitlab" />

package/dist/buttons/UpdateGitLabButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UpdateGitLabButtonProps = typeof __propDef.props;
+export type UpdateGitLabButtonEvents = typeof __propDef.events;
+export type UpdateGitLabButtonSlots = typeof __propDef.slots;
+export default class UpdateGitLabButton extends SvelteComponent<UpdateGitLabButtonProps, UpdateGitLabButtonEvents, UpdateGitLabButtonSlots> {
+}
+export {};

package/dist/buttons/UpdatePictureButton.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import BaseButton from "./BaseButton.svelte";
+</script>
+
+<BaseButton label="ō&nbsp;&nbsp;&nbsp;Update Picture with Hellō" {...$$props} updateScope="picture" />

package/dist/buttons/UpdatePictureButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UpdatePictureButtonProps = typeof __propDef.props;
+export type UpdatePictureButtonEvents = typeof __propDef.events;
+export type UpdatePictureButtonSlots = typeof __propDef.slots;
+export default class UpdatePictureButton extends SvelteComponent<UpdatePictureButtonProps, UpdatePictureButtonEvents, UpdatePictureButtonSlots> {
+}
+export {};

package/dist/buttons/UpdateTwitterButton.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import BaseButton from "./BaseButton.svelte";
+</script>
+
+<BaseButton label="ō&nbsp;&nbsp;&nbsp;Update Twitter with Hellō" {...$$props} updateScope="twitter" />

package/dist/buttons/UpdateTwitterButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UpdateTwitterButtonProps = typeof __propDef.props;
+export type UpdateTwitterButtonEvents = typeof __propDef.events;
+export type UpdateTwitterButtonSlots = typeof __propDef.slots;
+export default class UpdateTwitterButton extends SvelteComponent<UpdateTwitterButtonProps, UpdateTwitterButtonEvents, UpdateTwitterButtonSlots> {
+}
+export {};

package/dist/buttons/index.d.ts

@@ -0,0 +1,8 @@
+export { default as ContinueButton } from './ContinueButton.svelte';
+export { default as LoginButton } from './LoginButton.svelte';
+export { default as UpdateEmailButton } from './UpdateEmailButton.svelte';
+export { default as UpdatePictureButton } from './UpdatePictureButton.svelte';
+export { default as UpdateTwitterButton } from './UpdateTwitterButton.svelte';
+export { default as UpdateDiscordButton } from './UpdateDiscordButton.svelte';
+export { default as UpdateGitHubButton } from './UpdateGitHubButton.svelte';
+export { default as UpdateGitLabButton } from './UpdateGitLabButton.svelte';

package/dist/buttons/index.js

@@ -0,0 +1,9 @@
+/// <reference types="svelte" />
+export { default as ContinueButton } from './ContinueButton.svelte';
+export { default as LoginButton } from './LoginButton.svelte';
+export { default as UpdateEmailButton } from './UpdateEmailButton.svelte';
+export { default as UpdatePictureButton } from './UpdatePictureButton.svelte';
+export { default as UpdateTwitterButton } from './UpdateTwitterButton.svelte';
+export { default as UpdateDiscordButton } from './UpdateDiscordButton.svelte';
+export { default as UpdateGitHubButton } from './UpdateGitHubButton.svelte';
+export { default as UpdateGitLabButton } from './UpdateGitLabButton.svelte';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from '/buttons/';
+export * from '/login-status/';
+export * from '/auth.ts';
+export * from '/logout.ts';
+export * from '/Provider.svelte';

package/dist/index.js

@@ -0,0 +1,6 @@
+/// <reference types="svelte" />
+export * from '/buttons/';
+export * from '/login-status/';
+export * from '/auth.ts';
+export * from '/logout.ts';
+export * from '/Provider.svelte';

package/dist/login-status/LoggedIn.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { useAuth } from "../auth"
+  import type { Readable } from "svelte/store"
+  
+  const isLoggedIn = (): Readable<boolean> | boolean => useAuth()?.isLoggedIn || false
+</script>
+
+{#if isLoggedIn}
+  <slot/>
+{/if}

package/dist/login-status/LoggedIn.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LoggedInProps = typeof __propDef.props;
+export type LoggedInEvents = typeof __propDef.events;
+export type LoggedInSlots = typeof __propDef.slots;
+export default class LoggedIn extends SvelteComponent<LoggedInProps, LoggedInEvents, LoggedInSlots> {
+}
+export {};

package/dist/login-status/LoggedOut.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { useAuth } from "../auth"
+    import type { Readable } from "svelte/store"
+    
+    const isLoggedIn = (): Readable<boolean> | boolean => useAuth()?.isLoggedIn || false
+  </script>
+  
+  {#if !isLoggedIn}
+    <slot/>
+  {/if}

package/dist/login-status/LoggedOut.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LoggedOutProps = typeof __propDef.props;
+export type LoggedOutEvents = typeof __propDef.events;
+export type LoggedOutSlots = typeof __propDef.slots;
+export default class LoggedOut extends SvelteComponent<LoggedOutProps, LoggedOutEvents, LoggedOutSlots> {
+}
+export {};

package/dist/login-status/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoggedIn } from '/LoggedIn.svelte';
+export { default as LoggedOut } from '/LoggedOut.svelte';

package/dist/login-status/index.js

@@ -0,0 +1,3 @@
+/// <reference types="svelte" />
+export { default as LoggedIn } from '/LoggedIn.svelte';
+export { default as LoggedOut } from '/LoggedOut.svelte';

package/dist/logout.d.ts

@@ -0,0 +1,2 @@
+export declare const getLogOutRoute: () => string;
+export declare function logOut(): void;

package/dist/logout.js

@@ -0,0 +1,6 @@
+/// <reference types="svelte" />
+import { routeConfig } from './Provider.svelte';
+export const getLogOutRoute = () => routeConfig.logout;
+export function logOut() {
+    window.location.href = routeConfig.logout;
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+	"name": "@hellocoop/svelte",
+	"version": "1.0.0",
+	"description": "Svelte SDK for Hellō https://hello.dev",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/hellocoop/packages.git"
+	},
+	"homepage": "https://www.hello.dev/docs/sdks/svelte",
+	"scripts": {
+		"build": "svelte-kit sync && svelte-package && publint"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"keywords": [
+		"reactjs",
+		"react",
+		"react.js",
+		"hello",
+		"openid",
+		"oidc",
+		"sso"
+	],
+	"author": {
+		"name": "Hello Identity Co-op",
+		"email": "contact@hello.coop",
+		"url": "https://hello.coop"
+	},
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/hellocoop/packages/issues"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/package": "^2.0.0",
+		"publint": "^0.1.9",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"sswr": "^2.0.0"
+	}
+}