jazz-vue 0.11.5 → 0.11.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +23 -0
- package/dist/composables.d.ts +240 -240
- package/dist/index.js +5 -2
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/ProgressiveImg.vue +5 -1
package/dist/index.js
CHANGED
|
@@ -363,7 +363,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
363
363
|
maxWidth: {}
|
|
364
364
|
},
|
|
365
365
|
setup(__props) {
|
|
366
|
-
function useProgressiveImg(image, maxWidth) {
|
|
366
|
+
function useProgressiveImg(image, maxWidth, targetWidth) {
|
|
367
367
|
const current2 = ref({});
|
|
368
368
|
let cleanup;
|
|
369
369
|
const unsubscribe = watch(
|
|
@@ -376,7 +376,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
376
376
|
if (!image.value) return;
|
|
377
377
|
const unsub = image.value.subscribe({}, (update) => {
|
|
378
378
|
var _a, _b;
|
|
379
|
-
const highestRes = update == null ? void 0 : update.highestResAvailable({
|
|
379
|
+
const highestRes = update == null ? void 0 : update.highestResAvailable({
|
|
380
|
+
maxWidth,
|
|
381
|
+
targetWidth
|
|
382
|
+
});
|
|
380
383
|
if (highestRes) {
|
|
381
384
|
if (highestRes.res !== lastHighestRes) {
|
|
382
385
|
lastHighestRes = highestRes.res;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/composables.ts","../src/auth/useIsAuthenticated.ts","../src/auth/useDemoAuth.ts","../src/auth/usePassphraseAuth.ts","../src/auth/usePasskeyAuth.ts","../src/auth/DemoAuthBasicUI.vue","../src/ProgressiveImg.vue"],"sourcesContent":["import { consumeInviteLinkFromWindowLocation } from \"jazz-browser\";\nimport {\n Account,\n AnonymousJazzAgent,\n AuthSecretStorage,\n CoValue,\n CoValueClass,\n DeeplyLoaded,\n DepthsIn,\n ID,\n JazzAuthContext,\n JazzContextType,\n JazzGuestContext,\n subscribeToCoValue,\n} from \"jazz-tools\";\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n ComputedRef,\n MaybeRef,\n Ref,\n ShallowRef,\n computed,\n inject,\n onMounted,\n onUnmounted,\n ref,\n shallowRef,\n toRaw,\n unref,\n watch,\n} from \"vue\";\nimport {\n JazzAuthContextSymbol,\n JazzContextSymbol,\n RegisteredAccount,\n} from \"./provider.js\";\n\nexport const logoutHandler = ref<() => void>();\n\nexport function useJazzContext() {\n const context =\n inject<Ref<JazzContextType<RegisteredAccount>>>(JazzContextSymbol);\n if (!context?.value) {\n throw new Error(\"useJazzContext must be used within a JazzProvider\");\n }\n return context;\n}\n\nexport function useAuthSecretStorage() {\n const context = inject<AuthSecretStorage>(JazzAuthContextSymbol);\n if (!context) {\n throw new Error(\"useAuthSecretStorage must be used within a JazzProvider\");\n }\n return context;\n}\n\nexport function createUseAccountComposables<Acc extends Account>() {\n function useAccount(): {\n me: ComputedRef<Acc>;\n logOut: () => void;\n };\n function useAccount<D extends DepthsIn<Acc>>(\n depth: D,\n ): {\n me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | null>;\n logOut: () => void;\n };\n function useAccount<D extends DepthsIn<Acc>>(\n depth?: D,\n ): {\n me: ComputedRef<Acc | DeeplyLoaded<Acc, D> | undefined | null>;\n logOut: () => void;\n } {\n const context = useJazzContext();\n\n if (!context.value) {\n throw new Error(\"useAccount must be used within a JazzProvider\");\n }\n\n if (!(\"me\" in context.value)) {\n throw new Error(\n \"useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()\",\n );\n }\n\n const contextMe = context.value.me as Acc;\n\n const me = useCoState<Acc, D>(\n contextMe.constructor as CoValueClass<Acc>,\n contextMe.id,\n depth,\n );\n\n return {\n me: computed(() => {\n const value =\n depth === undefined\n ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)\n : me.value;\n\n return value ? toRaw(value) : value;\n }),\n logOut: context.value.logOut,\n };\n }\n\n function useAccountOrGuest(): {\n me: ComputedRef<Acc | AnonymousJazzAgent>;\n };\n function useAccountOrGuest<D extends DepthsIn<Acc>>(\n depth: D,\n ): {\n me: ComputedRef<\n DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent\n >;\n };\n function useAccountOrGuest<D extends DepthsIn<Acc>>(\n depth?: D,\n ): {\n me: ComputedRef<\n Acc | DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent\n >;\n } {\n const context = useJazzContext();\n\n if (!context.value) {\n throw new Error(\"useAccountOrGuest must be used within a JazzProvider\");\n }\n\n const contextMe = computed(() =>\n \"me\" in context.value ? (context.value.me as Acc) : undefined,\n );\n\n const me = useCoState<Acc, D>(\n contextMe.value?.constructor as CoValueClass<Acc>,\n contextMe.value?.id,\n depth,\n );\n\n if (\"me\" in context.value) {\n return {\n me: computed(() =>\n depth === undefined\n ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)\n : me.value,\n ),\n };\n } else {\n return {\n me: computed(() => toRaw((context.value as JazzGuestContext).guest)),\n };\n }\n }\n\n return {\n useAccount,\n useAccountOrGuest,\n };\n}\n\nconst { useAccount, useAccountOrGuest } =\n createUseAccountComposables<RegisteredAccount>();\n\nexport { useAccount, useAccountOrGuest };\n\nexport function useCoState<V extends CoValue, D>(\n Schema: CoValueClass<V>,\n id: MaybeRef<ID<CoValue> | undefined>,\n depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,\n): Ref<DeeplyLoaded<V, D> | undefined | null> {\n const state: ShallowRef<DeeplyLoaded<V, D> | undefined | null> =\n shallowRef(undefined);\n const context = useJazzContext();\n\n if (!context.value) {\n throw new Error(\"useCoState must be used within a JazzProvider\");\n }\n\n let unsubscribe: (() => void) | undefined;\n\n watch(\n [() => unref(id), () => context, () => Schema, () => depth],\n () => {\n if (unsubscribe) unsubscribe();\n\n const idValue = unref(id);\n if (!idValue) return;\n\n unsubscribe = subscribeToCoValue(\n Schema,\n idValue,\n \"me\" in context.value\n ? toRaw(context.value.me)\n : toRaw(context.value.guest),\n depth,\n (value) => {\n state.value = value;\n },\n () => {\n state.value = null;\n },\n true,\n );\n },\n { deep: true, immediate: true },\n );\n\n onUnmounted(() => {\n if (unsubscribe) unsubscribe();\n });\n\n const computedState = computed(() => state.value);\n\n return computedState;\n}\n\nexport function useAcceptInvite<V extends CoValue>({\n invitedObjectSchema,\n onAccept,\n forValueHint,\n}: {\n invitedObjectSchema: CoValueClass<V>;\n onAccept: (projectID: ID<V>) => void;\n forValueHint?: string;\n}): void {\n const context = useJazzContext();\n\n if (!context.value) {\n throw new Error(\"useAcceptInvite must be used within a JazzProvider\");\n }\n\n if (!(\"me\" in context.value)) {\n throw new Error(\n \"useAcceptInvite can't be used in a JazzProvider with auth === 'guest'.\",\n );\n }\n\n const runInviteAcceptance = () => {\n const result = consumeInviteLinkFromWindowLocation({\n as: toRaw((context.value as JazzAuthContext<RegisteredAccount>).me),\n invitedObjectSchema,\n forValueHint,\n });\n\n result\n .then((res) => res && onAccept(res.valueID))\n .catch((e) => {\n console.error(\"Failed to accept invite\", e);\n });\n };\n\n onMounted(() => {\n runInviteAcceptance();\n });\n\n watch(\n () => onAccept,\n (newOnAccept, oldOnAccept) => {\n if (newOnAccept !== oldOnAccept) {\n runInviteAcceptance();\n }\n },\n );\n}\n","import { onMounted, onUnmounted, ref } from \"vue\";\nimport { useAuthSecretStorage } from \"../composables.js\";\n\nexport function useIsAuthenticated() {\n const authSecretStorage = useAuthSecretStorage();\n const isAuthenticated = ref(authSecretStorage.isAuthenticated);\n\n const handleUpdate = () => {\n isAuthenticated.value = authSecretStorage.isAuthenticated;\n };\n\n onMounted(() => {\n const cleanup = authSecretStorage.onUpdate(handleUpdate);\n onUnmounted(cleanup);\n });\n\n return isAuthenticated;\n}\n","import { DemoAuth } from \"jazz-tools\";\nimport { computed, ref, watch } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\nexport function useDemoAuth() {\n const context = useJazzContext();\n const authSecretStorage = useAuthSecretStorage();\n\n if (\"guest\" in context.value) {\n throw new Error(\"Demo auth is not supported in guest mode\");\n }\n\n const authMethod = computed(\n () => new DemoAuth(context.value.authenticate, authSecretStorage),\n );\n\n const existingUsers = ref<string[]>([]);\n const isAuthenticated = useIsAuthenticated();\n\n watch(authMethod, () => {\n authMethod.value.getExistingUsers().then((users) => {\n existingUsers.value = users;\n });\n });\n\n return computed(() => ({\n state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n logIn(username: string) {\n authMethod.value.logIn(username);\n },\n signUp(username: string) {\n authMethod.value.signUp(username);\n },\n existingUsers: existingUsers.value,\n }));\n}\n","import { PassphraseAuth } from \"jazz-tools\";\nimport { computed, ref, watchEffect } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePassphraseAuth` composable provides a `JazzAuth` object for passphrase authentication.\n *\n * @example\n * ```ts\n * const auth = usePassphraseAuth({ wordlist });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePassphraseAuth({\n wordlist,\n}: {\n wordlist: string[];\n}) {\n const context = useJazzContext();\n const authSecretStorage = useAuthSecretStorage();\n const isAuthenticated = useIsAuthenticated();\n\n if (\"guest\" in context.value) {\n throw new Error(\"Passphrase auth is not supported in guest mode\");\n }\n\n const authMethod = computed(() => {\n return new PassphraseAuth(\n context.value.node.crypto,\n context.value.authenticate,\n context.value.register,\n authSecretStorage,\n wordlist,\n );\n });\n\n const passphrase = ref(authMethod.value.passphrase);\n\n watchEffect((onCleanup) => {\n authMethod.value.loadCurrentAccountPassphrase();\n\n const unsubscribe = authMethod.value.subscribe(() => {\n passphrase.value = authMethod.value.passphrase;\n });\n\n onCleanup(unsubscribe);\n });\n\n return computed(() => ({\n state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n logIn: authMethod.value.logIn,\n signUp: authMethod.value.signUp,\n registerNewAccount: authMethod.value.registerNewAccount,\n generateRandomPassphrase: authMethod.value.generateRandomPassphrase,\n passphrase: passphrase.value,\n }));\n}\n","import { BrowserPasskeyAuth } from \"jazz-browser\";\nimport { computed } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePasskeyAuth` composable provides a `JazzAuth` object for passkey authentication.\n *\n * @example\n * ```ts\n * const auth = usePasskeyAuth({ appName, appHostname });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePasskeyAuth({\n appName,\n appHostname,\n}: {\n appName: string;\n appHostname?: string;\n}) {\n const context = useJazzContext();\n const authSecretStorage = useAuthSecretStorage();\n const isAuthenticated = useIsAuthenticated();\n\n if (\"guest\" in context.value) {\n throw new Error(\"Passkey auth is not supported in guest mode\");\n }\n\n const authMethod = computed(() => {\n return new BrowserPasskeyAuth(\n context.value.node.crypto,\n context.value.authenticate,\n authSecretStorage,\n appName,\n appHostname,\n );\n });\n\n return computed(() => ({\n state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n logIn: authMethod.value.logIn,\n signUp: authMethod.value.signUp,\n }));\n}\n","<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useDemoAuth } from \"./useDemoAuth.js\";\n\ninterface Props {\n appName: string;\n}\n\ndefineProps<Props>();\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst auth = useDemoAuth();\nconst username = ref(\"\");\n\nconst darkMode =\n typeof window !== \"undefined\"\n ? window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n : false;\n\nconst handleSubmit = (e: Event) => {\n e.preventDefault();\n auth.value.signUp(username.value);\n};\n</script>\n\n<template>\n <slot v-if=\"auth.state === 'signedIn'\" />\n <div\n v-else\n :style=\"{\n minHeight: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n width: '18rem',\n maxWidth: 'calc(100vw - 2rem)',\n gap: '2rem',\n margin: '0 auto'\n }\"\n >\n <h1\n :style=\"{\n color: darkMode ? '#fff' : '#000',\n textAlign: 'center',\n fontSize: '1.5rem',\n fontWeight: 'bold'\n }\"\n >\n {{ appName }}\n </h1>\n\n <form\n :style=\"{\n display: 'flex',\n flexDirection: 'column',\n gap: '0.5rem'\n }\"\n @submit=\"handleSubmit\"\n >\n <input\n v-model=\"username\"\n placeholder=\"Display name\"\n autocomplete=\"webauthn\"\n :style=\"{\n border: darkMode ? '1px solid #444' : '1px solid #ddd',\n padding: '11px 8px',\n borderRadius: '6px',\n background: darkMode ? '#000' : '#fff',\n color: darkMode ? '#fff' : '#000'\n }\"\n >\n <input\n type=\"submit\"\n value=\"Sign up\"\n :style=\"{\n padding: '13px 5px',\n border: 'none',\n borderRadius: '6px',\n cursor: 'pointer',\n background: darkMode ? '#444' : '#ddd',\n color: darkMode ? '#fff' : '#000'\n }\"\n >\n </form>\n\n <div\n v-if=\"auth.existingUsers.length > 0\"\n :style=\"{\n display: 'flex',\n flexDirection: 'column',\n gap: '0.5rem'\n }\"\n >\n <p\n :style=\"{\n color: darkMode ? '#e2e2e2' : '#000',\n textAlign: 'center',\n paddingTop: '0.5rem',\n borderTop: '1px solid',\n borderColor: darkMode ? '#111' : '#e2e2e2'\n }\"\n >\n Log in as\n </p>\n <button\n v-for=\"user in auth.existingUsers\"\n :key=\"user\"\n @click=\"auth.logIn(user)\"\n type=\"button\"\n :aria-label=\"`Log in as ${user}`\"\n :style=\"{\n background: darkMode ? '#0d0d0d' : '#eee',\n color: darkMode ? '#fff' : '#000',\n padding: '0.5rem',\n border: 'none',\n borderRadius: '6px'\n }\"\n >\n {{ user }}\n </button>\n </div>\n </div>\n</template>","<script setup lang=\"ts\">\nimport type { ImageDefinition } from \"jazz-tools\";\nimport { type Ref, onUnmounted, ref, toRef, watch } from \"vue\";\n\ninterface ImageState {\n src?: string;\n res?: `${number}x${number}` | \"placeholder\";\n originalSize?: readonly [number, number];\n}\n\nfunction useProgressiveImg(\n image: Ref<ImageDefinition | null | undefined>,\n maxWidth?: number,\n) {\n const current = ref<ImageState>({});\n\n let cleanup: (() => void) | undefined;\n const unsubscribe = watch(\n () => [image.value?.id, maxWidth],\n () => {\n let lastHighestRes: string | undefined;\n\n if (!image.value) return;\n\n const unsub = image.value.subscribe({}, (update) => {\n const highestRes = update?.highestResAvailable({ maxWidth });\n\n if (highestRes) {\n if (highestRes.res !== lastHighestRes) {\n lastHighestRes = highestRes.res;\n const blob = highestRes.stream.toBlob();\n\n if (blob) {\n const blobURI = URL.createObjectURL(blob);\n current.value = {\n src: blobURI,\n res: highestRes.res,\n originalSize: image.value?.originalSize,\n };\n\n if (cleanup) cleanup();\n cleanup = () => {\n setTimeout(() => URL.revokeObjectURL(blobURI), 200);\n };\n }\n }\n } else {\n current.value = {\n src: update?.placeholderDataURL,\n res: \"placeholder\",\n originalSize: image.value?.originalSize,\n };\n }\n });\n\n return unsub;\n },\n );\n\n onUnmounted(() => {\n unsubscribe();\n if (cleanup) cleanup();\n });\n\n return current;\n}\n\nconst props = defineProps<{\n image: ImageDefinition | null | undefined;\n maxWidth?: number;\n}>();\n\nconst current = useProgressiveImg(toRef(props, \"image\"), props.maxWidth);\n</script>\n\n<template>\n <slot\n :src=\"current.src\"\n :res=\"current.res\"\n :original-size=\"current.originalSize\"\n />\n</template>"],"names":["useAccount","useAccountOrGuest","current"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/composables.ts","../src/auth/useIsAuthenticated.ts","../src/auth/useDemoAuth.ts","../src/auth/usePassphraseAuth.ts","../src/auth/usePasskeyAuth.ts","../src/auth/DemoAuthBasicUI.vue","../src/ProgressiveImg.vue"],"sourcesContent":["import { consumeInviteLinkFromWindowLocation } from \"jazz-browser\";\nimport {\n Account,\n AnonymousJazzAgent,\n AuthSecretStorage,\n CoValue,\n CoValueClass,\n DeeplyLoaded,\n DepthsIn,\n ID,\n JazzAuthContext,\n JazzContextType,\n JazzGuestContext,\n subscribeToCoValue,\n} from \"jazz-tools\";\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n ComputedRef,\n MaybeRef,\n Ref,\n ShallowRef,\n computed,\n inject,\n onMounted,\n onUnmounted,\n ref,\n shallowRef,\n toRaw,\n unref,\n watch,\n} from \"vue\";\nimport {\n JazzAuthContextSymbol,\n JazzContextSymbol,\n RegisteredAccount,\n} from \"./provider.js\";\n\nexport const logoutHandler = ref<() => void>();\n\nexport function useJazzContext() {\n const context =\n inject<Ref<JazzContextType<RegisteredAccount>>>(JazzContextSymbol);\n if (!context?.value) {\n throw new Error(\"useJazzContext must be used within a JazzProvider\");\n }\n return context;\n}\n\nexport function useAuthSecretStorage() {\n const context = inject<AuthSecretStorage>(JazzAuthContextSymbol);\n if (!context) {\n throw new Error(\"useAuthSecretStorage must be used within a JazzProvider\");\n }\n return context;\n}\n\nexport function createUseAccountComposables<Acc extends Account>() {\n function useAccount(): {\n me: ComputedRef<Acc>;\n logOut: () => void;\n };\n function useAccount<D extends DepthsIn<Acc>>(\n depth: D,\n ): {\n me: ComputedRef<DeeplyLoaded<Acc, D> | undefined | null>;\n logOut: () => void;\n };\n function useAccount<D extends DepthsIn<Acc>>(\n depth?: D,\n ): {\n me: ComputedRef<Acc | DeeplyLoaded<Acc, D> | undefined | null>;\n logOut: () => void;\n } {\n const context = useJazzContext();\n\n if (!context.value) {\n throw new Error(\"useAccount must be used within a JazzProvider\");\n }\n\n if (!(\"me\" in context.value)) {\n throw new Error(\n \"useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()\",\n );\n }\n\n const contextMe = context.value.me as Acc;\n\n const me = useCoState<Acc, D>(\n contextMe.constructor as CoValueClass<Acc>,\n contextMe.id,\n depth,\n );\n\n return {\n me: computed(() => {\n const value =\n depth === undefined\n ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)\n : me.value;\n\n return value ? toRaw(value) : value;\n }),\n logOut: context.value.logOut,\n };\n }\n\n function useAccountOrGuest(): {\n me: ComputedRef<Acc | AnonymousJazzAgent>;\n };\n function useAccountOrGuest<D extends DepthsIn<Acc>>(\n depth: D,\n ): {\n me: ComputedRef<\n DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent\n >;\n };\n function useAccountOrGuest<D extends DepthsIn<Acc>>(\n depth?: D,\n ): {\n me: ComputedRef<\n Acc | DeeplyLoaded<Acc, D> | undefined | null | AnonymousJazzAgent\n >;\n } {\n const context = useJazzContext();\n\n if (!context.value) {\n throw new Error(\"useAccountOrGuest must be used within a JazzProvider\");\n }\n\n const contextMe = computed(() =>\n \"me\" in context.value ? (context.value.me as Acc) : undefined,\n );\n\n const me = useCoState<Acc, D>(\n contextMe.value?.constructor as CoValueClass<Acc>,\n contextMe.value?.id,\n depth,\n );\n\n if (\"me\" in context.value) {\n return {\n me: computed(() =>\n depth === undefined\n ? me.value || toRaw((context.value as JazzAuthContext<Acc>).me)\n : me.value,\n ),\n };\n } else {\n return {\n me: computed(() => toRaw((context.value as JazzGuestContext).guest)),\n };\n }\n }\n\n return {\n useAccount,\n useAccountOrGuest,\n };\n}\n\nconst { useAccount, useAccountOrGuest } =\n createUseAccountComposables<RegisteredAccount>();\n\nexport { useAccount, useAccountOrGuest };\n\nexport function useCoState<V extends CoValue, D>(\n Schema: CoValueClass<V>,\n id: MaybeRef<ID<CoValue> | undefined>,\n depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,\n): Ref<DeeplyLoaded<V, D> | undefined | null> {\n const state: ShallowRef<DeeplyLoaded<V, D> | undefined | null> =\n shallowRef(undefined);\n const context = useJazzContext();\n\n if (!context.value) {\n throw new Error(\"useCoState must be used within a JazzProvider\");\n }\n\n let unsubscribe: (() => void) | undefined;\n\n watch(\n [() => unref(id), () => context, () => Schema, () => depth],\n () => {\n if (unsubscribe) unsubscribe();\n\n const idValue = unref(id);\n if (!idValue) return;\n\n unsubscribe = subscribeToCoValue(\n Schema,\n idValue,\n \"me\" in context.value\n ? toRaw(context.value.me)\n : toRaw(context.value.guest),\n depth,\n (value) => {\n state.value = value;\n },\n () => {\n state.value = null;\n },\n true,\n );\n },\n { deep: true, immediate: true },\n );\n\n onUnmounted(() => {\n if (unsubscribe) unsubscribe();\n });\n\n const computedState = computed(() => state.value);\n\n return computedState;\n}\n\nexport function useAcceptInvite<V extends CoValue>({\n invitedObjectSchema,\n onAccept,\n forValueHint,\n}: {\n invitedObjectSchema: CoValueClass<V>;\n onAccept: (projectID: ID<V>) => void;\n forValueHint?: string;\n}): void {\n const context = useJazzContext();\n\n if (!context.value) {\n throw new Error(\"useAcceptInvite must be used within a JazzProvider\");\n }\n\n if (!(\"me\" in context.value)) {\n throw new Error(\n \"useAcceptInvite can't be used in a JazzProvider with auth === 'guest'.\",\n );\n }\n\n const runInviteAcceptance = () => {\n const result = consumeInviteLinkFromWindowLocation({\n as: toRaw((context.value as JazzAuthContext<RegisteredAccount>).me),\n invitedObjectSchema,\n forValueHint,\n });\n\n result\n .then((res) => res && onAccept(res.valueID))\n .catch((e) => {\n console.error(\"Failed to accept invite\", e);\n });\n };\n\n onMounted(() => {\n runInviteAcceptance();\n });\n\n watch(\n () => onAccept,\n (newOnAccept, oldOnAccept) => {\n if (newOnAccept !== oldOnAccept) {\n runInviteAcceptance();\n }\n },\n );\n}\n","import { onMounted, onUnmounted, ref } from \"vue\";\nimport { useAuthSecretStorage } from \"../composables.js\";\n\nexport function useIsAuthenticated() {\n const authSecretStorage = useAuthSecretStorage();\n const isAuthenticated = ref(authSecretStorage.isAuthenticated);\n\n const handleUpdate = () => {\n isAuthenticated.value = authSecretStorage.isAuthenticated;\n };\n\n onMounted(() => {\n const cleanup = authSecretStorage.onUpdate(handleUpdate);\n onUnmounted(cleanup);\n });\n\n return isAuthenticated;\n}\n","import { DemoAuth } from \"jazz-tools\";\nimport { computed, ref, watch } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\nexport function useDemoAuth() {\n const context = useJazzContext();\n const authSecretStorage = useAuthSecretStorage();\n\n if (\"guest\" in context.value) {\n throw new Error(\"Demo auth is not supported in guest mode\");\n }\n\n const authMethod = computed(\n () => new DemoAuth(context.value.authenticate, authSecretStorage),\n );\n\n const existingUsers = ref<string[]>([]);\n const isAuthenticated = useIsAuthenticated();\n\n watch(authMethod, () => {\n authMethod.value.getExistingUsers().then((users) => {\n existingUsers.value = users;\n });\n });\n\n return computed(() => ({\n state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n logIn(username: string) {\n authMethod.value.logIn(username);\n },\n signUp(username: string) {\n authMethod.value.signUp(username);\n },\n existingUsers: existingUsers.value,\n }));\n}\n","import { PassphraseAuth } from \"jazz-tools\";\nimport { computed, ref, watchEffect } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePassphraseAuth` composable provides a `JazzAuth` object for passphrase authentication.\n *\n * @example\n * ```ts\n * const auth = usePassphraseAuth({ wordlist });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePassphraseAuth({\n wordlist,\n}: {\n wordlist: string[];\n}) {\n const context = useJazzContext();\n const authSecretStorage = useAuthSecretStorage();\n const isAuthenticated = useIsAuthenticated();\n\n if (\"guest\" in context.value) {\n throw new Error(\"Passphrase auth is not supported in guest mode\");\n }\n\n const authMethod = computed(() => {\n return new PassphraseAuth(\n context.value.node.crypto,\n context.value.authenticate,\n context.value.register,\n authSecretStorage,\n wordlist,\n );\n });\n\n const passphrase = ref(authMethod.value.passphrase);\n\n watchEffect((onCleanup) => {\n authMethod.value.loadCurrentAccountPassphrase();\n\n const unsubscribe = authMethod.value.subscribe(() => {\n passphrase.value = authMethod.value.passphrase;\n });\n\n onCleanup(unsubscribe);\n });\n\n return computed(() => ({\n state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n logIn: authMethod.value.logIn,\n signUp: authMethod.value.signUp,\n registerNewAccount: authMethod.value.registerNewAccount,\n generateRandomPassphrase: authMethod.value.generateRandomPassphrase,\n passphrase: passphrase.value,\n }));\n}\n","import { BrowserPasskeyAuth } from \"jazz-browser\";\nimport { computed } from \"vue\";\nimport { useAuthSecretStorage, useJazzContext } from \"../composables.js\";\nimport { useIsAuthenticated } from \"./useIsAuthenticated.js\";\n\n/**\n * `usePasskeyAuth` composable provides a `JazzAuth` object for passkey authentication.\n *\n * @example\n * ```ts\n * const auth = usePasskeyAuth({ appName, appHostname });\n * ```\n *\n * @category Auth Providers\n */\nexport function usePasskeyAuth({\n appName,\n appHostname,\n}: {\n appName: string;\n appHostname?: string;\n}) {\n const context = useJazzContext();\n const authSecretStorage = useAuthSecretStorage();\n const isAuthenticated = useIsAuthenticated();\n\n if (\"guest\" in context.value) {\n throw new Error(\"Passkey auth is not supported in guest mode\");\n }\n\n const authMethod = computed(() => {\n return new BrowserPasskeyAuth(\n context.value.node.crypto,\n context.value.authenticate,\n authSecretStorage,\n appName,\n appHostname,\n );\n });\n\n return computed(() => ({\n state: isAuthenticated.value ? \"signedIn\" : \"anonymous\",\n logIn: authMethod.value.logIn,\n signUp: authMethod.value.signUp,\n }));\n}\n","<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useDemoAuth } from \"./useDemoAuth.js\";\n\ninterface Props {\n appName: string;\n}\n\ndefineProps<Props>();\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst auth = useDemoAuth();\nconst username = ref(\"\");\n\nconst darkMode =\n typeof window !== \"undefined\"\n ? window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n : false;\n\nconst handleSubmit = (e: Event) => {\n e.preventDefault();\n auth.value.signUp(username.value);\n};\n</script>\n\n<template>\n <slot v-if=\"auth.state === 'signedIn'\" />\n <div\n v-else\n :style=\"{\n minHeight: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n width: '18rem',\n maxWidth: 'calc(100vw - 2rem)',\n gap: '2rem',\n margin: '0 auto'\n }\"\n >\n <h1\n :style=\"{\n color: darkMode ? '#fff' : '#000',\n textAlign: 'center',\n fontSize: '1.5rem',\n fontWeight: 'bold'\n }\"\n >\n {{ appName }}\n </h1>\n\n <form\n :style=\"{\n display: 'flex',\n flexDirection: 'column',\n gap: '0.5rem'\n }\"\n @submit=\"handleSubmit\"\n >\n <input\n v-model=\"username\"\n placeholder=\"Display name\"\n autocomplete=\"webauthn\"\n :style=\"{\n border: darkMode ? '1px solid #444' : '1px solid #ddd',\n padding: '11px 8px',\n borderRadius: '6px',\n background: darkMode ? '#000' : '#fff',\n color: darkMode ? '#fff' : '#000'\n }\"\n >\n <input\n type=\"submit\"\n value=\"Sign up\"\n :style=\"{\n padding: '13px 5px',\n border: 'none',\n borderRadius: '6px',\n cursor: 'pointer',\n background: darkMode ? '#444' : '#ddd',\n color: darkMode ? '#fff' : '#000'\n }\"\n >\n </form>\n\n <div\n v-if=\"auth.existingUsers.length > 0\"\n :style=\"{\n display: 'flex',\n flexDirection: 'column',\n gap: '0.5rem'\n }\"\n >\n <p\n :style=\"{\n color: darkMode ? '#e2e2e2' : '#000',\n textAlign: 'center',\n paddingTop: '0.5rem',\n borderTop: '1px solid',\n borderColor: darkMode ? '#111' : '#e2e2e2'\n }\"\n >\n Log in as\n </p>\n <button\n v-for=\"user in auth.existingUsers\"\n :key=\"user\"\n @click=\"auth.logIn(user)\"\n type=\"button\"\n :aria-label=\"`Log in as ${user}`\"\n :style=\"{\n background: darkMode ? '#0d0d0d' : '#eee',\n color: darkMode ? '#fff' : '#000',\n padding: '0.5rem',\n border: 'none',\n borderRadius: '6px'\n }\"\n >\n {{ user }}\n </button>\n </div>\n </div>\n</template>","<script setup lang=\"ts\">\nimport type { ImageDefinition } from \"jazz-tools\";\nimport { type Ref, onUnmounted, ref, toRef, watch } from \"vue\";\n\ninterface ImageState {\n src?: string;\n res?: `${number}x${number}` | \"placeholder\";\n originalSize?: readonly [number, number];\n}\n\nfunction useProgressiveImg(\n image: Ref<ImageDefinition | null | undefined>,\n maxWidth?: number,\n targetWidth?: number,\n) {\n const current = ref<ImageState>({});\n\n let cleanup: (() => void) | undefined;\n const unsubscribe = watch(\n () => [image.value?.id, maxWidth],\n () => {\n let lastHighestRes: string | undefined;\n\n if (!image.value) return;\n\n const unsub = image.value.subscribe({}, (update) => {\n const highestRes = update?.highestResAvailable({\n maxWidth,\n targetWidth,\n });\n\n if (highestRes) {\n if (highestRes.res !== lastHighestRes) {\n lastHighestRes = highestRes.res;\n const blob = highestRes.stream.toBlob();\n\n if (blob) {\n const blobURI = URL.createObjectURL(blob);\n current.value = {\n src: blobURI,\n res: highestRes.res,\n originalSize: image.value?.originalSize,\n };\n\n if (cleanup) cleanup();\n cleanup = () => {\n setTimeout(() => URL.revokeObjectURL(blobURI), 200);\n };\n }\n }\n } else {\n current.value = {\n src: update?.placeholderDataURL,\n res: \"placeholder\",\n originalSize: image.value?.originalSize,\n };\n }\n });\n\n return unsub;\n },\n );\n\n onUnmounted(() => {\n unsubscribe();\n if (cleanup) cleanup();\n });\n\n return current;\n}\n\nconst props = defineProps<{\n image: ImageDefinition | null | undefined;\n maxWidth?: number;\n}>();\n\nconst current = useProgressiveImg(toRef(props, \"image\"), props.maxWidth);\n</script>\n\n<template>\n <slot\n :src=\"current.src\"\n :res=\"current.res\"\n :original-size=\"current.originalSize\"\n />\n</template>"],"names":["useAccount","useAccountOrGuest","current"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jazz-vue",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "src/index.ts",
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
}
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"jazz-tools": "0.11.
|
|
19
|
+
"jazz-browser": "0.11.7",
|
|
20
|
+
"cojson": "0.11.7",
|
|
21
|
+
"jazz-tools": "0.11.7"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@scure/bip39": "^1.3.0",
|
package/src/ProgressiveImg.vue
CHANGED
|
@@ -11,6 +11,7 @@ interface ImageState {
|
|
|
11
11
|
function useProgressiveImg(
|
|
12
12
|
image: Ref<ImageDefinition | null | undefined>,
|
|
13
13
|
maxWidth?: number,
|
|
14
|
+
targetWidth?: number,
|
|
14
15
|
) {
|
|
15
16
|
const current = ref<ImageState>({});
|
|
16
17
|
|
|
@@ -23,7 +24,10 @@ function useProgressiveImg(
|
|
|
23
24
|
if (!image.value) return;
|
|
24
25
|
|
|
25
26
|
const unsub = image.value.subscribe({}, (update) => {
|
|
26
|
-
const highestRes = update?.highestResAvailable({
|
|
27
|
+
const highestRes = update?.highestResAvailable({
|
|
28
|
+
maxWidth,
|
|
29
|
+
targetWidth,
|
|
30
|
+
});
|
|
27
31
|
|
|
28
32
|
if (highestRes) {
|
|
29
33
|
if (highestRes.res !== lastHighestRes) {
|