@aerogel/plugin-local-first 0.0.0-next.004d5deedf15bedf609a660bfd4543d3c0df9d9d

package/src/components/AccountModal.vue

@@ -0,0 +1,206 @@
+<template>
+    <Modal
+        ref="$modalRef"
+        title-hidden
+        close-hidden
+        :title="$td('account.title', 'Account')"
+    >
+        <div class="relative flex items-center rounded-md bg-gray-100 p-4 pr-12">
+            <SolidAvatar class="mr-2 size-16 shrink-0" />
+            <div class="flex flex-col overflow-hidden">
+                <span class="font-semibold">{{ $solid.user?.name ?? $td('user.anonymous', 'Anonymous') }}</span>
+                <Link :href="$solid.user?.webId" class="mt-0.5 truncate text-sm font-light text-gray-500">
+                    {{ $solid.user?.webId }}
+                </Link>
+            </div>
+            <Button
+                size="icon"
+                variant="ghost"
+                class="absolute top-1 right-1 hover:bg-gray-200"
+                :aria-label="$td('user.settings', 'Settings')"
+                :title="$td('user.settings', 'Settings')"
+                @click="$ui.modal(SettingsModal)"
+            >
+                <IconCog class="size-5" />
+            </Button>
+        </div>
+
+        <div class="px-2">
+            <div v-if="$cloud.syncing" class="mt-4 flex items-center gap-2">
+                <IconRefresh class="mt-0.5 size-6 shrink-0 animate-spin self-start text-green-500" />
+                <div class="flex w-full flex-col">
+                    <Markdown lang-key="cloud.info.syncing" lang-default="Synchronizing..." />
+                    <ProgressBar v-if="$cloud.syncJob" :job="$cloud.syncJob" filled-class="bg-green-500" />
+                </div>
+            </div>
+            <div v-else-if="$solid.loginOngoing" class="mt-4 flex items-center gap-2">
+                <IconRefresh class="mt-0.5 size-6 shrink-0 animate-spin self-start text-green-500" />
+                <Markdown lang-key="cloud.info.reconnecting" lang-default="Reconnecting..." />
+            </div>
+            <div v-else-if="error" class="mt-4 flex items-center gap-2">
+                <IconWarning class="mt-0.5 size-6 shrink-0 self-start text-red-500" />
+                <div>
+                    <Markdown :text="errorDescription" />
+                    <Link
+                        v-if="showErrorDetails"
+                        class="text-sm text-red-700 opacity-50 hover:opacity-75 focus-visible:opacity-75"
+                        @click="$errors.inspect(error)"
+                    >
+                        {{ $td('errors.viewDetails', 'View details') }}
+                    </Link>
+                </div>
+            </div>
+            <div v-else-if="!$cloud.ready" class="mt-4 flex items-center gap-2">
+                <IconWarning class="mt-0.5 size-6 shrink-0 self-start text-yellow-500" />
+                <Markdown lang-key="cloud.info.setup" lang-default="Your data is not backed up yet." />
+            </div>
+            <div v-else-if="$cloud.dirty" class="mt-4 flex items-center gap-2">
+                <IconWarning class="mt-0.5 size-6 shrink-0 self-start text-yellow-500" />
+                <Markdown
+                    lang-key="cloud.info.changes"
+                    lang-default="Everything is up to date. | There is one local change. | There are {n} local changes."
+                    :lang-params="$cloud.localChanges"
+                />
+            </div>
+            <div v-else-if="$cloud.online" class="mt-4 flex items-center gap-2">
+                <IconCheckmarkOutline class="mt-0.5 size-6 shrink-0 self-start text-green-500" />
+                <Markdown lang-key="cloud.info.changes" lang-default="Everything is up to date." :lang-params="0" />
+            </div>
+            <div v-else class="mt-4 flex items-center gap-2">
+                <IconWarning class="mt-0.5 size-6 shrink-0 self-start text-yellow-500" />
+                <Markdown
+                    lang-key="cloud.info.disconnected"
+                    lang-default="You are disconnected from your Solid account, all the changes you make will remain in your device."
+                />
+            </div>
+            <AdvancedOptions class="mt-2">
+                <ul class="flex flex-col gap-2">
+                    <li>
+                        <Checkbox
+                            v-model="$solid.autoReconnect"
+                            label-class="text-base"
+                            :label="$td('cloud.advanced.reconnect', 'Reconnect on startup')"
+                        />
+                    </li>
+                    <li>
+                        <Checkbox
+                            v-model="$cloud.startupSync"
+                            label-class="text-base"
+                            :label="$td('cloud.advanced.startupSync', 'Synchronize on startup')"
+                        />
+                    </li>
+                    <li>
+                        <Checkbox v-model="$cloud.pollingEnabled" label-class="text-base">
+                            <div class="flex items-center">
+                                <span aria-hidden="true">{{ pollingText[0] }}</span>
+                                <EditableContent
+                                    type="number"
+                                    :text="`${$cloud.pollingMinutes}`"
+                                    :aria-label="
+                                        $td('cloud.advanced.pollingMinutes', 'Synchronization interval (in minutes)')
+                                    "
+                                    class="focus-within:border-primary-600 mx-1 -mb-px border-b"
+                                    @update="$cloud.pollingMinutes = $event as number"
+                                >
+                                    {{ $cloud.pollingMinutes }}
+                                </EditableContent>
+                                <span v-if="pollingText.length > 1" aria-hidden="true">{{ pollingText[1] }}</span>
+                            </div>
+                        </Checkbox>
+                    </li>
+                </ul>
+            </AdvancedOptions>
+        </div>
+
+        <div v-if="!$solid.loginOngoing" class="mt-4 flex flex-row-reverse justify-start gap-2">
+            <Button
+                v-if="$cloud.syncing"
+                variant="secondary"
+                :disabled="cancellingSync"
+                @click="cancelSync()"
+            >
+                <IconStop class="size-5" />
+                <span>{{
+                    cancellingSync ? $td('cloud.stopping', 'Stopping...') : $td('cloud.stop', 'Stop synchronization')
+                }}</span>
+            </Button>
+            <Button v-else-if="!$solid.isLoggedIn()" @click="$solid.reconnect({ force: true })">
+                <IconRefresh class="size-5" />
+                <span>{{ $td('cloud.reconnect', 'Reconnect') }}</span>
+            </Button>
+            <Button v-else-if="$cloud.ready" @click="$cloud.sync({ refreshUserProfile: true })">
+                <IconRefresh class="size-5" />
+                <span>{{ $td('cloud.sync', 'Synchronize') }}</span>
+            </Button>
+            <Button v-else @click="(($cloud.setupDismissed = false), $modal?.close())">
+                <IconCloudUpload class="size-5" />
+                <span>{{ $td('cloud.setup.submit', 'Back up now') }}</span>
+            </Button>
+            <Button v-if="!$cloud.syncing" variant="secondary" @click="$solid.logout()">
+                <IconLogout class="size-5" />
+                <span>{{ $cloud.ready ? $td('cloud.logOut', 'Log out') : $td('cloud.disconnect', 'Disconnect') }}</span>
+            </Button>
+        </div>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import IconCheckmarkOutline from '~icons/zondicons/checkmark-outline';
+import IconCloudUpload from '~icons/ic/sharp-cloud-upload';
+import IconCog from '~icons/zondicons/cog';
+import IconLogout from '~icons/material-symbols/logout-rounded';
+import IconRefresh from '~icons/zondicons/refresh';
+import IconStop from '~icons/ic/baseline-stop';
+import IconWarning from '~icons/ion/warning';
+
+import {
+    AdvancedOptions,
+    Button,
+    Checkbox,
+    EditableContent,
+    Link,
+    Markdown,
+    Modal,
+    ProgressBar,
+    SettingsModal,
+    translateWithDefault,
+    useEvent,
+} from '@aerogel/core';
+import { computed, ref, useTemplateRef } from 'vue';
+import { Solid, SolidAvatar } from '@aerogel/plugin-solid';
+
+import Cloud from '@aerogel/plugin-local-first/services/Cloud';
+
+const $modal = useTemplateRef('$modalRef');
+const cancellingSync = ref(false);
+const pollingText = translateWithDefault('cloud.advanced.polling', 'Synchronize every {minutes} minutes', {
+    minutes: '%%separator%%',
+}).split('%%separator%%');
+const error = computed(() => Solid.error ?? Cloud.syncError);
+const errorDescription = computed(() => {
+    if (!error.value) {
+        return;
+    }
+
+    if (typeof error.value === 'string') {
+        return error.value;
+    }
+
+    return translateWithDefault('cloud.info.error', 'There has been an error connecting.');
+});
+const showErrorDetails = computed(() => error.value && typeof error.value !== 'string');
+
+async function cancelSync() {
+    if (!Cloud.syncJob) {
+        return;
+    }
+
+    cancellingSync.value = true;
+
+    await Promise.race([Cloud.syncJob.cancel(), Cloud.syncJob.completed]);
+
+    cancellingSync.value = false;
+}
+
+useEvent('auth:logout', () => $modal.value?.close());
+</script>

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export { default as Account } from './Account.vue';
+export { default as AccountLoggedIn } from './AccountLoggedIn.vue';
+export { default as AccountLoggedOut } from './AccountLoggedOut.vue';
+export { default as AccountLoginModal } from './AccountLoginModal.vue';
+export { default as AccountModal } from './AccountModal.vue';

package/src/components/settings/PurgeData.vue

@@ -0,0 +1,43 @@
+<template>
+    <details v-if="!$solid.hasLoggedIn()" class="mt-4">
+        <summary>
+            <span class="text-base font-semibold">{{ $td('settings.dangerZone', 'Danger zone') }}</span>
+        </summary>
+        <Button variant="danger" class="mt-4" @click="purgeData()">
+            <IconTrash class="size-4" />
+            <span class="ml-1">{{ $td('settings.purge', 'Purge data') }}</span>
+        </Button>
+    </details>
+</template>
+
+<script setup lang="ts">
+import IconTrash from '~icons/zondicons/trash';
+
+import { Button, Storage, UI, translateWithDefault } from '@aerogel/core';
+
+import AccountLoginModal from '@aerogel/plugin-local-first/components/AccountLoginModal.vue';
+
+async function purgeData(): Promise<void> {
+    const confirmed = await UI.confirm(
+        translateWithDefault('settings.purgeConfirmTitle', 'Delete everything?'),
+        translateWithDefault(
+            'settings.purgeConfirmMessage',
+            'If you proceed, all your data will be deleted forever. ' +
+                'If you want to save it before wiping this device, ' +
+                'you can [connect to your Solid account](#action:connect) first.',
+        ),
+        {
+            acceptVariant: 'danger',
+            acceptText: translateWithDefault('settings.purgeConfirmAccept', 'Purge data'),
+            actions: { connect: () => UI.modal(AccountLoginModal) },
+        },
+    );
+
+    if (!confirmed) {
+        return;
+    }
+
+    await UI.closeAllModals();
+    await Storage.purge();
+}
+</script>

package/src/components/settings/index.ts

@@ -0,0 +1,10 @@
+import { defineSettings } from '@aerogel/core';
+
+import PurgeData from './PurgeData.vue';
+
+export default defineSettings([
+    {
+        priority: 0,
+        component: PurgeData,
+    },
+]);

package/src/index.css

@@ -0,0 +1 @@
+@source './';

package/src/index.ts

@@ -0,0 +1,33 @@
+import { App, bootServices } from '@aerogel/core';
+import type { Plugin } from '@aerogel/core';
+
+import Cloud from '@aerogel/plugin-local-first/services/Cloud';
+import DocumentsCache from '@aerogel/plugin-local-first/services/DocumentsCache';
+
+import settings from './components/settings';
+
+const services = { $cloud: Cloud };
+
+export { Cloud };
+export * from './components';
+export * from './services/Cloud';
+
+export type LocalFirstServices = typeof services;
+
+export default function localFirst(): Plugin {
+    return {
+        name: '@aerogel/local-first',
+        async install(app) {
+            settings.forEach((setting) => App.addSetting(setting));
+
+            await bootServices(app, {
+                ...services,
+                $_documentsCache: DocumentsCache,
+            });
+        },
+    };
+}
+
+declare module '@aerogel/core' {
+    interface Services extends LocalFirstServices {}
+}

package/src/jobs/Backup.ts

@@ -0,0 +1,98 @@
+import { Job } from '@aerogel/core';
+import { requireEngine } from 'soukai';
+import { requireUrlParentDirectory } from '@noeldemartin/utils';
+import { ignoreModelsCollection, trackModelsCollection } from '@aerogel/plugin-soukai';
+import type { EngineDocument, IndexedDBEngine } from 'soukai';
+import type { SolidModelConstructor } from 'soukai-solid';
+
+interface Migration {
+    modelClass: SolidModelConstructor;
+    local: string;
+    remote: string;
+}
+
+export default class Backup extends Job {
+
+    private urlMigrations: Migration[] = [];
+    private collectionMigrations: Migration[] = [];
+
+    public migrateUrl(modelClass: SolidModelConstructor, local: string, remote: string): void {
+        this.urlMigrations.push({
+            modelClass,
+            local,
+            remote,
+        });
+    }
+
+    public migrateCollection(modelClass: SolidModelConstructor, local: string, remote: string): void {
+        this.collectionMigrations.push({
+            modelClass,
+            local,
+            remote,
+        });
+    }
+
+    protected async run(): Promise<void> {
+        const engine = requireEngine<IndexedDBEngine>();
+        const collections = await engine.getCollections();
+
+        for (const collection of collections) {
+            const documents = await engine.readMany(collection);
+
+            for (const [id, document] of Object.entries(documents)) {
+                const url = this.replaceUrl(id);
+
+                await engine.create(requireUrlParentDirectory(url), this.replaceDocumentUrls(document), url);
+                await engine.delete(collection, id);
+            }
+        }
+
+        for (const { modelClass, remote } of this.urlMigrations) {
+            trackModelsCollection(modelClass, requireUrlParentDirectory(remote), { refresh: false });
+        }
+
+        for (const { modelClass, local, remote } of this.collectionMigrations) {
+            ignoreModelsCollection(modelClass, local);
+            trackModelsCollection(modelClass, remote, { refresh: false });
+        }
+    }
+
+    protected replaceDocumentUrls(document: EngineDocument): EngineDocument {
+        for (const [key, value] of Object.entries(document)) {
+            if (key === '@id' && typeof value === 'string') {
+                document[key] = this.replaceUrl(value);
+
+                continue;
+            }
+
+            if (typeof value !== 'object' || value === null) {
+                continue;
+            }
+
+            document[key] = this.replaceDocumentUrls(value as EngineDocument);
+        }
+
+        return document;
+    }
+
+    protected replaceUrl(url: string): string {
+        for (const { local, remote } of this.urlMigrations) {
+            if (!url.startsWith(local)) {
+                continue;
+            }
+
+            return url.replace(local, remote);
+        }
+
+        for (const { local, remote } of this.collectionMigrations) {
+            if (!url.startsWith(local)) {
+                continue;
+            }
+
+            return url.replace(local, remote);
+        }
+
+        return url;
+    }
+
+}

package/src/jobs/Migrate.test.ts

@@ -0,0 +1,217 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { Events } from '@aerogel/core';
+import { FakeServer, fakeContainerUrl, fakeDocumentUrl } from '@noeldemartin/testing';
+import { range } from '@noeldemartin/utils';
+import { Solid } from '@aerogel/plugin-solid';
+
+import Cloud from '@aerogel/plugin-local-first/services/Cloud';
+import { getRemoteClass } from '@aerogel/plugin-local-first/lib/mirroring';
+
+import Workspace from '@aerogel/plugin-local-first/testing/stubs/Workspace';
+import SolidMock from '@aerogel/plugin-local-first/testing/mocks/Solid.mock';
+import LegacyTaskSchema from '@aerogel/plugin-local-first/testing/stubs/LegacyTask.schema';
+import TaskSchema from '@aerogel/plugin-local-first/testing/stubs/Task.schema';
+import Task from '@aerogel/plugin-local-first/testing/stubs/Task';
+import { legacyTaskResponse, setupCloudTests, typeIndexResponse } from '@aerogel/plugin-local-first/testing/cloud';
+
+import Migrate from './Migrate';
+
+describe('Migrate', () => {
+
+    beforeEach(setupCloudTests);
+
+    it('Migrates containers', async () => {
+        // Arrange
+        const updates: number[] = [];
+        const {
+            workspace,
+            typeIndexUrl,
+            documentUrls: [documentUrl],
+        } = await setupMigration(1);
+
+        // Act
+        await Cloud.migrate({ onUpdated: (progress) => updates.push(progress) });
+
+        // Assert - Progress
+        expect(updates).toEqual([0, 1]);
+
+        // Assert - Local models
+        expect(Task.rdfsClasses).toEqual(['https://schema.org/Action']);
+
+        const freshWorkspace = await workspace.fresh();
+
+        await freshWorkspace.loadRelation('tasks');
+
+        expect(freshWorkspace.tasks).toHaveLength(1);
+
+        // Assert - Remote models
+        expect(getRemoteClass(Task).rdfsClasses).toEqual(['https://schema.org/Action']);
+
+        expect(FakeServer.getRequests(documentUrl)).toHaveLength(3);
+        expect(FakeServer.getRequests(typeIndexUrl)).toHaveLength(3);
+        expect(FakeServer.getRequests()).toHaveLength(6);
+
+        expect(FakeServer.getRequest('PATCH', documentUrl)?.body).toEqualSparql(`
+            DELETE DATA {
+                @prefix ical: <http://www.w3.org/2002/12/cal/ical#>.
+
+                <#it>
+                    a ical:Vtodo ;
+                    ical:summary "Migrate schemas" .
+            } ;
+
+            INSERT DATA {
+                @prefix schema: <https://schema.org/>.
+
+                <#it>
+                    a schema:Action ;
+                    schema:name "Migrate schemas" .
+            } .
+        `);
+
+        expect(FakeServer.getRequest('PATCH', typeIndexUrl)?.body).toEqualSparql(`
+            DELETE DATA {
+                @prefix solid: <http://www.w3.org/ns/solid/terms#>.
+                @prefix ical: <http://www.w3.org/2002/12/cal/ical#>.
+
+                <#[[registration][.*]]> solid:forClass ical:Vtodo .
+            } ;
+
+            INSERT DATA {
+                @prefix solid: <http://www.w3.org/ns/solid/terms#>.
+                @prefix schema: <https://schema.org/>.
+
+                <#[[registration][.*]]> solid:forClass schema:Action .
+            } .
+        `);
+    });
+
+    it('Tracks progress', async () => {
+        // Arrange
+        const updates: number[] = [];
+
+        await setupMigration(5);
+
+        // Act
+        await Cloud.migrate({ onUpdated: (progress) => updates.push(progress) });
+
+        // Assert
+        expect(updates).toEqual([0, 0.2, 0.4, 0.6, 0.8, 1]);
+    });
+
+    it('Resumes after cancellation', async () => {
+        // Arrange
+        const updates: number[] = [];
+
+        await setupMigration(5);
+
+        // Act - Cancel
+        await Cloud.migrate({
+            onUpdated: (progress) => {
+                updates.push(progress);
+
+                if (progress > 0.5) {
+                    Cloud.migrationJob?.cancel();
+                }
+            },
+        });
+
+        // Assert - Cancel
+        const job = Cloud.migrationJob;
+
+        expect(job?.cancelled).toBe(true);
+        expect(updates).toEqual([0, 0.2, 0.4, 0.6]);
+
+        // Act - Resume
+        await Cloud.migrate({ onUpdated: (progress) => updates.push(progress) });
+
+        // Assert - Resume
+        expect(job?.cancelled).toBe(false);
+        expect(Cloud.migrationJob).toBe(null);
+        expect(updates).toEqual([0, 0.2, 0.4, 0.6, 0.6, 0.8, 1]);
+    });
+
+    it('Resumes after going through serialization', async () => {
+        // Arrange
+        const updates: number[] = [];
+
+        await setupMigration(5);
+
+        // Act - Cancel and serialize
+        await Cloud.migrate({
+            onUpdated: (progress) => {
+                updates.push(progress);
+
+                if (progress > 0.5) {
+                    Cloud.migrationJob?.cancel();
+                }
+            },
+        });
+
+        Cloud.migrationJob = Migrate.restore(JSON.parse(JSON.stringify(Cloud.migrationJob?.serialize())));
+
+        // Assert - Cancel and serialize
+        expect(Cloud.migrationJob?.models).toBeUndefined();
+        expect(updates).toEqual([0, 0.2, 0.4, 0.6]);
+
+        // Act - Resume
+        await Cloud.migrate({
+            onUpdated: (progress) => updates.push(progress),
+        });
+
+        // Assert - Resume
+        expect(Cloud.migrationJob).toBe(null);
+        expect(updates).toEqual([0, 0.2, 0.4, 0.6, 0.6, 0.8, 1]);
+    });
+
+});
+
+async function setupMigration(count: number = 1) {
+    // Arrange - Mint urls
+    const parentContainerUrl = Solid.requireUser().storageUrls[0] + 'tasks/';
+    const containerUrl = fakeContainerUrl({ baseUrl: parentContainerUrl });
+    const documentUrls = range(count).map(() => fakeDocumentUrl({ containerUrl })) as [string, ...string[]];
+
+    // Arrange - Prepare models
+    await Task.updateSchema(LegacyTaskSchema);
+
+    const workspace = await Workspace.at(parentContainerUrl).create({
+        url: containerUrl,
+        name: 'Tasks',
+    });
+
+    for (const documentUrl of documentUrls) {
+        await workspace.relatedTasks.create({
+            url: `${documentUrl}#it`,
+            name: 'Migrate schemas',
+        });
+    }
+
+    // Arrange - Prepare responses
+    const typeIndexUrl = SolidMock.requireUser().privateTypeIndexUrl ?? '';
+    const typeIndex = typeIndexResponse({ [containerUrl]: '<http://www.w3.org/2002/12/cal/ical#Vtodo>' });
+
+    FakeServer.respondOnce(typeIndexUrl, typeIndex);
+    documentUrls.forEach((documentUrl) => {
+        FakeServer.respondOnce(documentUrl, legacyTaskResponse('Migrate schemas'));
+        FakeServer.respondOnce(documentUrl, legacyTaskResponse('Migrate schemas'));
+        FakeServer.respondOnce(documentUrl);
+    });
+    FakeServer.respondOnce(typeIndexUrl, typeIndex);
+    FakeServer.respondOnce(typeIndexUrl);
+
+    // Arrange - Prepare service
+    Cloud.ready = true;
+
+    Cloud.registerSchemaMigration(Task, TaskSchema);
+
+    await Cloud.launch();
+    await Cloud.register(Workspace);
+    await Events.emit('application-ready');
+
+    return {
+        workspace,
+        typeIndexUrl,
+        documentUrls,
+    };
+}