@hellocoop/svelte 1.0.1 → 1.0.2

package/README.md

@@ -1,58 +1,10 @@
-# create-svelte
+# Svelte package for Hellō
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+[Hellō](https://hello.dev) is an identity network that provides login and registration using the standard OpenID Connect protocol. Hellō offers your users choice between all popular social login providers.
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+This [Svelte](https://svelte.dev/) package provides:
+- Svelte components for buttons and logged in context
 
-## Creating a project
+See the [Svelte SDK documentation](https://www.hello.dev/docs/sdks/svelte) for details.
 
-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

@@ -10,15 +10,15 @@ export const getHelloProviderContext = () => {
 };
 </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>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

@@ -8,8 +8,8 @@ export declare const routeConfig: {
 export declare const getHelloProviderContext: () => Auth | undefined;
 declare const __propDef: {
     props: {
-        auth?: {} | undefined;
-        config?: {} | undefined;
+        auth?: any;
+        config?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/buttons/BaseButton.svelte

@@ -1,16 +1,28 @@
 <script>import { routeConfig } from "../Provider.svelte";
-import { Button } from "@hellocoop/types";
+import { onMount } from "svelte";
+import { Button } from "../types";
 export let label = "\u014D&nbsp;&nbsp;&nbsp;Continue with Hell\u014D";
 export let style = {};
 export let color = "black";
 export let theme = "ignore-light";
 export let hover = "pop";
-export let scope;
-export let updateScope;
+export let scope = [];
+export let updateScope = "";
 export let targetURI = "";
-export let providerHint;
+export let providerHint = [];
 export let showLoader = false;
 export let disabled = false;
+let checkedForStylesheet = false;
+onMount(() => {
+  if (typeof window != "undefined" && !checkedForStylesheet) {
+    const hasStylesheet = Array.from(document.head.getElementsByTagName("link")).find(
+      (element) => element.getAttribute("rel") === "stylesheet" && element.getAttribute("href")?.startsWith(Button.STYLES_URL)
+    );
+    if (!hasStylesheet)
+      console.warn("Could not find Hell\u014D stylesheet. Please add to pages with Hell\u014D buttons. See http://hello.dev/docs/buttons/#stylesheet for more info.");
+    checkedForStylesheet = true;
+  }
+});
 let clicked = false;
 const loginRoute = new URL(routeConfig.login, window.location.origin);
 if (scope)

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { Button } from '@hellocoop/types';
+import { Button } from '../types';
 declare const __propDef: {
     props: {
         label?: string | undefined;

package/dist/index.d.ts

@@ -10,4 +10,4 @@ export { default as LoggedIn } from './login-status/LoggedIn.svelte';
 export { default as LoggedOut } from './login-status/LoggedOut.svelte';
 export * from './auth.js';
 export * from './logout.js';
-export { default as Provider, routeConfig, getHelloProviderContext } from './Provider.svelte';
+export { default as HelloProvider, routeConfig, getHelloProviderContext } from './Provider.svelte';

package/dist/index.js

@@ -16,4 +16,4 @@ export * from './auth.js';
 //Logout
 export * from './logout.js';
 //Provider
-export { default as Provider, routeConfig, getHelloProviderContext } from './Provider.svelte';
+export { default as HelloProvider, routeConfig, getHelloProviderContext } from './Provider.svelte';

package/dist/types.d.ts

@@ -0,0 +1,63 @@
+export declare const PRODUCTION_WALLET: string;
+export declare const DEFAULT_SCOPE: Scope[];
+export declare const DEFAULT_RESPONSE_TYPE: AuthResponseType;
+export declare const DEFAULT_RESPONSE_MODE: AuthResponseMode;
+export declare const DEFAULT_PATH: string;
+export declare const VALID_IDENTITY_CLAIMS: readonly ["name", "nickname", "preferred_username", "given_name", "family_name", "email", "phone", "picture", "ethereum", "discord", "twitter", "github", "gitlab"];
+export declare const VALID_SCOPES: readonly ["name", "nickname", "preferred_username", "given_name", "family_name", "email", "phone", "picture", "ethereum", "discord", "twitter", "github", "gitlab", "openid", "profile_update"];
+export declare const VALID_RESPONSE_TYPE: readonly ["id_token", "code"];
+export declare const VALID_RESPONSE_MODE: string[];
+export declare const VALID_PROVIDER_HINT: readonly ["apple", "discord", "facebook", "github", "gitlab", "google", "twitch", "twitter", "tumblr", "mastodon", "microsoft", "line", "wordpress", "yahoo", "phone", "ethereum", "qrcode", "apple--", "microsoft--", "google--", "email--", "passkey--"];
+export type Scope = typeof VALID_SCOPES[number];
+export type AuthResponseType = typeof VALID_RESPONSE_TYPE[number];
+export type AuthResponseMode = typeof VALID_RESPONSE_MODE[number];
+export type ProviderHint = typeof VALID_PROVIDER_HINT[number];
+type IdentityClaims = typeof VALID_IDENTITY_CLAIMS[number];
+type OptionalClaims = {
+    [K in IdentityClaims]?: unknown;
+};
+export type Claims = OptionalClaims & {
+    sub: string;
+};
+export type TokenPayload = OptionalClaims & {
+    iss: string;
+    aud: string;
+    nonce: string;
+    jti: string;
+    sub: string;
+    scope: string[];
+    iat: number;
+    exp: number;
+};
+export type TokenHeader = {
+    typ: string;
+    alg: string;
+};
+export declare namespace Button {
+    type Color = "black" | "white";
+    type Theme = "ignore-light" | "ignore-dark" | "aware-invert" | "aware-static";
+    type Hover = "pop" | "glow" | "flare" | "none";
+    type UpdateScope = "email" | "picture" | "twitter" | "discord" | "github" | "gitlab";
+    const STYLES_URL = "https://cdn.hello.coop/css/hello-btn.css";
+    const HOVER_MAPPING: {
+        pop: string;
+        glow: string;
+        flare: string;
+        none: string;
+    };
+    const CLASS_MAPPING: {
+        black: {
+            "ignore-light": string;
+            "ignore-dark": string;
+            "aware-invert": string;
+            "aware-static": string;
+        };
+        white: {
+            "ignore-light": string;
+            "ignore-dark": string;
+            "aware-invert": string;
+            "aware-static": string;
+        };
+    };
+}
+export {};

package/dist/types.js

@@ -0,0 +1,95 @@
+export const PRODUCTION_WALLET = 'https://wallet.hello.coop';
+export const DEFAULT_SCOPE = ['openid', 'name', 'email', 'picture'];
+export const DEFAULT_RESPONSE_TYPE = 'code';
+export const DEFAULT_RESPONSE_MODE = 'query';
+export const DEFAULT_PATH = '/authorize?';
+export const VALID_IDENTITY_CLAIMS = [
+    'name',
+    'nickname',
+    'preferred_username',
+    'given_name',
+    'family_name',
+    'email',
+    'phone',
+    'picture',
+    // Hellō extensions -- non-standard claims
+    'ethereum',
+    'discord',
+    'twitter',
+    'github',
+    'gitlab'
+];
+export const VALID_SCOPES = [
+    ...VALID_IDENTITY_CLAIMS,
+    'openid',
+    // Hellō extensions -- non-standard scopes
+    'profile_update',
+];
+export const VALID_RESPONSE_TYPE = ['id_token', 'code']; // Default: 'code'
+export const VALID_RESPONSE_MODE = ['fragment', 'query', 'form_post']; // Default: 'query'
+export const VALID_PROVIDER_HINT = [
+    // 'google' and 'email' are always in default
+    // 'apple' added if on Apple OS
+    // 'microsoft' added if on Microsoft OS
+    'apple',
+    'discord',
+    'facebook',
+    'github',
+    'gitlab',
+    'google',
+    'twitch',
+    'twitter',
+    'tumblr',
+    'mastodon',
+    'microsoft',
+    'line',
+    'wordpress',
+    'yahoo',
+    'phone',
+    'ethereum',
+    'qrcode',
+    // the following will remove provider from recommended list
+    'apple--',
+    'microsoft--',
+    'google--',
+    'email--',
+    'passkey--',
+];
+const CLASS_MAPPING = {
+    black: {
+        "ignore-light": "",
+        "ignore-dark": "hello-btn-black-on-dark",
+        "aware-invert": "hello-btn-black-and-invert",
+        "aware-static": "hello-btn-black-and-static"
+    },
+    white: {
+        "ignore-light": "hello-btn-white-on-light",
+        "ignore-dark": "hello-btn-white-on-dark",
+        "aware-invert": "hello-btn-white-and-invert",
+        "aware-static": "hello-btn-white-and-static"
+    },
+};
+export var Button;
+(function (Button) {
+    Button.STYLES_URL = 'https://cdn.hello.coop/css/hello-btn.css';
+    Button.HOVER_MAPPING = {
+        "pop": "",
+        "glow": "hello-btn-hover-glow",
+        "flare": "hello-btn-hover-flare",
+        "none": "hello-btn-hover-none"
+    };
+    Button.CLASS_MAPPING = {
+        black: {
+            "ignore-light": "",
+            "ignore-dark": "hello-btn-black-on-dark",
+            "aware-invert": "hello-btn-black-and-invert",
+            "aware-static": "hello-btn-black-and-static"
+        },
+        white: {
+            "ignore-light": "hello-btn-white-on-light",
+            "ignore-dark": "hello-btn-white-on-dark",
+            "aware-invert": "hello-btn-white-and-invert",
+            "aware-static": "hello-btn-white-and-static"
+        },
+    };
+})(Button || (Button = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hellocoop/svelte",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "Svelte SDK for Hellō https://hello.dev",
 	"repository": {
 		"type": "git",
@@ -8,7 +8,7 @@
 	},
 	"homepage": "https://www.hello.dev/docs/sdks/svelte",
 	"scripts": {
-		"build": "svelte-kit sync && svelte-package && publint"
+		"build": "cp ../types/types.ts ./src/lib/ && svelte-kit sync && svelte-package && publint"
 	},
 	"exports": {
 		".": {
@@ -57,7 +57,6 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@hellocoop/types": "^1.0.2",
 		"sswr": "^2.0.0"
 	}
 }