Compare commits
2 Commits
a5044cdb44
...
7dbc947abd
| Author | SHA1 | Date |
|---|---|---|
Laurin Weger
|
7dbc947abd | 2 weeks ago |
|
Laurin Weger
|
63646f3e1a | 2 weeks ago |
@ -0,0 +1,79 @@ |
||||
import { defineConfig, devices } from "@playwright/test"; |
||||
|
||||
/** |
||||
* Read environment variables from file. |
||||
* https://github.com/motdotla/dotenv
|
||||
*/ |
||||
// import dotenv from 'dotenv';
|
||||
// import path from 'path';
|
||||
// dotenv.config({ path: path.resolve(__dirname, '.env') });
|
||||
|
||||
/** |
||||
* See https://playwright.dev/docs/test-configuration.
|
||||
*/ |
||||
export default defineConfig({ |
||||
testDir: "./src/frontends/tests", |
||||
/* Run tests in files in parallel */ |
||||
fullyParallel: true, |
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */ |
||||
forbidOnly: !!process.env.CI, |
||||
/* Retry on CI only */ |
||||
retries: process.env.CI ? 2 : 0, |
||||
/* Opt out of parallel tests on CI. */ |
||||
workers: process.env.CI ? 1 : undefined, |
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */ |
||||
reporter: "html", |
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ |
||||
use: { |
||||
/* Base URL to use in actions like `await page.goto('/')`. */ |
||||
baseURL: "http://localhost:4321", |
||||
|
||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ |
||||
trace: "on-first-retry", |
||||
}, |
||||
|
||||
/* Configure projects for major browsers */ |
||||
projects: [ |
||||
{ |
||||
name: "chromium", |
||||
use: { ...devices["Desktop Chrome"] }, |
||||
}, |
||||
|
||||
{ |
||||
name: "firefox", |
||||
use: { ...devices["Desktop Firefox"] }, |
||||
}, |
||||
|
||||
{ |
||||
name: "webkit", |
||||
use: { ...devices["Desktop Safari"] }, |
||||
}, |
||||
|
||||
/* Test against mobile viewports. */ |
||||
// {
|
||||
// name: 'Mobile Chrome',
|
||||
// use: { ...devices['Pixel 5'] },
|
||||
// },
|
||||
// {
|
||||
// name: 'Mobile Safari',
|
||||
// use: { ...devices['iPhone 12'] },
|
||||
// },
|
||||
|
||||
/* Test against branded browsers. */ |
||||
// {
|
||||
// name: 'Microsoft Edge',
|
||||
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
|
||||
// },
|
||||
// {
|
||||
// name: 'Google Chrome',
|
||||
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
|
||||
// },
|
||||
], |
||||
|
||||
/* Run your local dev server before starting the tests */ |
||||
webServer: { |
||||
command: "npm run dev", |
||||
url: "http://localhost:4321", |
||||
reuseExistingServer: !process.env.CI, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,10 @@ |
||||
import { test, expect } from "@playwright/test"; |
||||
|
||||
test("components load", async ({ page }) => { |
||||
await page.goto("/"); |
||||
await page.waitForSelector(".vue astro-island"); |
||||
|
||||
await expect(page.locator(".vue .title")).toHaveText("vue"); |
||||
await expect(page.locator(".react .title")).toHaveText("react"); |
||||
await expect(page.locator(".svelte .title")).toHaveText("svelte"); |
||||
}); |
||||
@ -0,0 +1,84 @@ |
||||
import updateShape from "src/ng-mock/wasm-land/updateShape"; |
||||
import type { Connection, Diff, Scope, Shape } from "../types"; |
||||
import requestShape from "src/ng-mock/wasm-land/requestShape"; |
||||
import { applyDiff } from "./applyDiff"; |
||||
import { batch, deepSignal, watch } from "alien-deepsignals"; |
||||
import { signal as createSignal, computed } from "alien-signals"; |
||||
|
||||
type ReactiveShapeObject = object; |
||||
|
||||
type ShapeObjectSignal = ReturnType< |
||||
typeof createSignal<{ |
||||
content: ReactiveShapeObject | null; |
||||
}> |
||||
>; |
||||
|
||||
const openConnections: Partial<Record<Shape, ShapeObjectSignal>> = {}; |
||||
|
||||
/** |
||||
* Create a signal for a shape object. |
||||
* The function returns a signal of a shape object in the form: |
||||
* `{content: <shapeObject>}` |
||||
**/ |
||||
export function createSignalObjectForShape( |
||||
shape: Shape, |
||||
scope?: Scope, |
||||
poolSignal = true |
||||
) { |
||||
if (poolSignal && openConnections[shape]) return openConnections[shape]; |
||||
|
||||
// DeepSignal has a different API to alien-signals.
|
||||
// Therefore, we need to create a "root signal" wrapper that is
|
||||
// triggered on deepSignal changes.
|
||||
const rootSignal = createSignal<{ |
||||
content: ReactiveShapeObject | null; |
||||
}>({ content: null }); |
||||
|
||||
// State
|
||||
let stopWatcher: any = null; |
||||
let suspendDeepWatcher = false; |
||||
|
||||
const onUpdateFromDb = (diff: Diff, connectionId: Connection["id"]) => { |
||||
const rootSignalValue = rootSignal(); |
||||
console.log("Update received", connectionId, diff); |
||||
// Set new value from applying the diffs to the old value.
|
||||
|
||||
suspendDeepWatcher = true; |
||||
// We need to replace the root signal for now, so this is redundant.
|
||||
batch(() => { |
||||
if (!rootSignalValue) return; // This shouldn't happen but we make the compiler happy.
|
||||
const { content: proxiedShapeObj } = rootSignalValue; |
||||
applyDiff(proxiedShapeObj, diff); |
||||
|
||||
// We put the proxied object into a new object for the root signal to trigger.
|
||||
rootSignal({ content: proxiedShapeObj }); |
||||
}); |
||||
suspendDeepWatcher = false; |
||||
}; |
||||
|
||||
// Do the actual db request.
|
||||
requestShape(shape, scope, onUpdateFromDb).then( |
||||
({ connectionId, shapeObject }) => { |
||||
// Create a deepSignal to put into the vanilla alien-signal.
|
||||
const proxiedShapeObj = deepSignal(shapeObject); |
||||
|
||||
// Notify DB on changes.
|
||||
stopWatcher = watch( |
||||
proxiedShapeObj, |
||||
(newVal, oldVal, onCleanup) => { |
||||
// Don't update when applying changes from db diffs from the db.
|
||||
if (!suspendDeepWatcher) updateShape(connectionId, newVal); |
||||
}, |
||||
{ deep: true } |
||||
); |
||||
|
||||
// Update the root signal.
|
||||
rootSignal({ content: proxiedShapeObj }); |
||||
} |
||||
); |
||||
|
||||
if (poolSignal) openConnections[shape] = rootSignal; |
||||
|
||||
// TODO: Dispose deepSignal root signal disposal.
|
||||
return rootSignal; |
||||
} |
||||
@ -1,75 +0,0 @@ |
||||
import updateShape from "src/ng-mock/wasm-land/updateShape"; |
||||
import type { Connection, Diff, Scope, Shape } from "../types"; |
||||
import requestShape from "src/ng-mock/wasm-land/requestShape"; |
||||
import { applyDiff } from "./applyDiff"; |
||||
import { batch, deepSignal, watch } from "alien-deepsignals"; |
||||
import { signal } from "alien-signals"; |
||||
|
||||
const openConnections: Record<Shape, ReturnType<typeof signal>> = {}; |
||||
|
||||
// TODO: The code is horrible.
|
||||
export function createSignalObjectForShape(shape: Shape, scope?: Scope) { |
||||
if (openConnections[shape]) return openConnections[shape]; |
||||
|
||||
// TODO:
|
||||
// DeepSignal has a different API to alien-signals.
|
||||
// Therefore, we need to create a "root signal" wrapper that is
|
||||
// triggered on deepSignal changes.
|
||||
const rootSignal = signal<null | object>(null); |
||||
|
||||
// State
|
||||
let stopWatcher: any = null; |
||||
let suspendWatcher = false; |
||||
|
||||
// To update the root signal
|
||||
const setUpDeepSignal = ( |
||||
newSignal: ReturnType<typeof deepSignal>, |
||||
connectionId: Connection["id"] |
||||
) => { |
||||
stopWatcher?.(); |
||||
|
||||
// Notify DB on changes.
|
||||
stopWatcher = watch( |
||||
newSignal, |
||||
(newVal, oldVal, onCleanup) => { |
||||
if (!suspendWatcher) updateShape(connectionId, newVal); |
||||
}, |
||||
{ deep: true } |
||||
); |
||||
|
||||
// Update the root signal.
|
||||
rootSignal(newSignal); |
||||
}; |
||||
|
||||
const onUpdateFromDb = (diff: Diff, connectionId: Connection["id"]) => { |
||||
const nestedObj = rootSignal(); |
||||
console.log("Update received", connectionId, diff); |
||||
// Set new value from applying the diffs to the old value.
|
||||
|
||||
// suspendWatcher = true;
|
||||
// We need to replace the root signal for now, so this is redundant.
|
||||
// batch(() => {
|
||||
// if (!nestedObj) return; // This shouldn't happen but we make the compiler happy.
|
||||
// applyDiff(nestedObj, diff);
|
||||
// });
|
||||
// suspendWatcher = false;nestedObj
|
||||
|
||||
// Create a new deep signal.
|
||||
// We need to do that because the deepSignals ref hasn't changed otherwise
|
||||
// and no update is triggered.
|
||||
const newDeepSignal = deepSignal(JSON.parse(JSON.stringify(diff))); |
||||
setUpDeepSignal(newDeepSignal, connectionId); |
||||
}; |
||||
|
||||
// Do the actual db request.
|
||||
requestShape(shape, scope, onUpdateFromDb).then( |
||||
({ connectionId, shapeObject }) => { |
||||
// Create a deepSignal to put into the vanilla alien-signal.
|
||||
const deepSignalFromDb = deepSignal(shapeObject); |
||||
setUpDeepSignal(deepSignalFromDb, connectionId); |
||||
} |
||||
); |
||||
|
||||
openConnections[shape] = rootSignal; |
||||
return rootSignal; |
||||
} |
||||
@ -1,13 +1,14 @@ |
||||
import { useSignal } from "@gn8/alien-signals-vue"; |
||||
import { createSignalObjectForShape } from "src/ng-mock/js-land/connector/ngSignals"; |
||||
import { createSignalObjectForShape } from "src/ng-mock/js-land/connector/createSignalObjectForShape"; |
||||
import type { Scope, Shape } from "src/ng-mock/js-land/types"; |
||||
|
||||
import { computed } from "vue"; |
||||
const useShape = (shape: Shape, scope: Scope) => { |
||||
const signalOfShape = createSignalObjectForShape(shape, scope); |
||||
|
||||
const refOfShape = useSignal(signalOfShape); |
||||
|
||||
return refOfShape; |
||||
// TODO: Maybe `refOfShape.value.content` works too?
|
||||
return computed(() => refOfShape.value.content); |
||||
}; |
||||
|
||||
export default useShape; |
||||
|
||||
Loading…
Reference in new issue