samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding testcase for graphql queries mapping.

Browse Source
This commit is contained in:
Samuel Andert 2023-08-07 14:43:05 +02:00
parent b9e22e1ea4
commit 0c202e0ef6
6 changed files with 207 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/components/refactor/ComposerGraph.svelte Normal file
View File

@ -0,0 +1,16 @@
<script>
export let me;
</script>
<div class="flex flex-col h-screen border-2 border-green-500">
<section class="p-8 h-96">
<p>My ID is: {$me.id}</p>
My state is: {$me.state}
{#if $me.store.todos}
{#each $me.store.todos as todo}
<p>{todo.text}</p>
{/each}
{/if}
</section>
</div>

135
src/lib/components/refactor/ComposerWrap.svelte
View File

@ -1,135 +0,0 @@
<script lang="ts">
import Composer from '$lib/core/refactor/Composer.svelte';
import { queryMessages } from '$lib/data/queryMessages';
import { queryTodos } from '$lib/data/queryTodos';
let composer = {
id: 'ComposerParent',
machine: {
initial: 'NOTREADY',
states: {
NOTREADY: {
on: { TOGGLE: 'READY' }
},
READY: {
on: { TOGGLE: 'NOTREADY' }
}
}
},
layout: {
columns: '1fr 1fr',
rows: 'auto 1fr',
areas: `
"topleft topright"
"mainleft mainright"
`
},
children: [
{
id: 'ComposerCharly',
component: 'ComposerCharly',
slot: 'mainright',
data: {
map: {
todos: queryTodos,
messages: queryMessages
}
},
machine: {
initial: 'LOADING',
states: {
LOADING: {
on: {
TOGGLE: {
target: 'READY'
}
}
},
READY: {
on: {
TOGGLE: {
target: 'LOADING'
}
}
}
}
}
},
{
id: 'ComposerBob',
component: 'ComposerBob',
slot: 'topleft',
machine: {
initial: 'READY',
states: {
NOTREADY: {
on: { TOGGLE: 'READY' }
},
READY: {
on: { TOGGLE: 'NOTREADY' }
}
}
}
},
{
id: 'ComposerAlice',
component: 'ComposerAlice',
slot: 'topright',
machine: {
initial: 'RED',
states: {
GREEN: {
on: { SWITCH: 'YELLOW' }
},
YELLOW: {
on: { SWITCH: 'RED' }
},
RED: {
on: { SWITCH: 'GREEN' }
}
},
on: {
READY: 'GREEN',
NOTREADY: 'RED'
}
}
},
{
id: 'ComposerForm',
component: 'ComposerForm',
slot: 'mainleft',
machine: {
id: 'validation',
initial: 'notValidated',
context: {
isValidated: false
},
states: {
notValidated: {
on: {
VALIDATE: {
target: 'isValidated',
actions: 'setValidated'
}
}
},
isValidated: {
on: {
INVALIDATE: {
target: 'notValidated',
actions: 'setNotValidated'
}
}
}
},
services: {
setValidated: (context) => (context.isValidated = true),
setNotValidated: (context) => (context.isValidated = false)
}
}
}
]
};
</script>
<Composer {composer} />

136
src/routes/composer/+page.svelte
View File

@ -1,5 +1,135 @@
<script>
import ComposerWrap from '$lib/components/refactor/ComposerWrap.svelte';
<script lang="ts">
import Composer from '$lib/core/refactor/Composer.svelte';
import { queryMessages } from '$lib/data/queryMessages';
import { queryTodos } from '$lib/data/queryTodos';
let composer = {
id: 'ComposerParent',
machine: {
initial: 'NOTREADY',
states: {
NOTREADY: {
on: { TOGGLE: 'READY' }
},
READY: {
on: { TOGGLE: 'NOTREADY' }
}
}
},
layout: {
columns: '1fr 1fr',
rows: 'auto 1fr',
areas: `
"topleft topright"
"mainleft mainright"
`
},
children: [
{
id: 'ComposerCharly',
component: 'ComposerCharly',
slot: 'mainright',
data: {
map: {
todos: queryTodos,
messages: queryMessages
}
},
machine: {
initial: 'LOADING',
states: {
LOADING: {
on: {
TOGGLE: {
target: 'READY'
}
}
},
READY: {
on: {
TOGGLE: {
target: 'LOADING'
}
}
}
}
}
},
{
id: 'ComposerBob',
component: 'ComposerBob',
slot: 'topleft',
machine: {
initial: 'READY',
states: {
NOTREADY: {
on: { TOGGLE: 'READY' }
},
READY: {
on: { TOGGLE: 'NOTREADY' }
}
}
}
},
{
id: 'ComposerAlice',
component: 'ComposerAlice',
slot: 'topright',
machine: {
initial: 'RED',
states: {
GREEN: {
on: { SWITCH: 'YELLOW' }
},
YELLOW: {
on: { SWITCH: 'RED' }
},
RED: {
on: { SWITCH: 'GREEN' }
}
},
on: {
READY: 'GREEN',
NOTREADY: 'RED'
}
}
},
{
id: 'ComposerForm',
component: 'ComposerForm',
slot: 'mainleft',
machine: {
id: 'validation',
initial: 'notValidated',
context: {
isValidated: false
},
states: {
notValidated: {
on: {
VALIDATE: {
target: 'isValidated',
actions: 'setValidated'
}
}
},
isValidated: {
on: {
INVALIDATE: {
target: 'notValidated',
actions: 'setNotValidated'
}
}
}
},
services: {
setValidated: (context) => (context.isValidated = true),
setNotValidated: (context) => (context.isValidated = false)
}
}
}
]
};
</script>
<ComposerWrap />
<Composer {composer} />

0
src/routes/test/+page.gql → src/routes/graphql/+page.gql
View File

58
src/routes/graphql/+page.svelte Normal file
View File

@ -0,0 +1,58 @@
<script lang="ts">
import type { PageData } from '../test/$houdini';
import Composer from '$lib/core/refactor/composer.svelte';
import { queryTodos } from '$lib/data/queryTodos';
export let data: PageData;
$: ({ queryTest } = data);
let composer = {
id: 'ComposerParent',
machine: {
initial: 'NOTREADY',
states: {
NOTREADY: {
on: { TOGGLE: 'READY' }
},
READY: {
on: { TOGGLE: 'NOTREADY' }
}
}
},
children: [
{
id: 'ComposerGraph',
component: 'ComposerGraph',
data: {
map: {
todos: queryTodos
}
},
machine: {
initial: 'LOADING',
states: {
LOADING: {
on: {
TOGGLE: {
target: 'READY'
}
}
},
READY: {
on: {
TOGGLE: {
target: 'LOADING'
}
}
}
}
}
}
]
};
</script>
{JSON.stringify($queryTest.data, null, 2)}
<Composer {composer} />

30
src/routes/test/+page.svelte
View File

@ -1,30 +0,0 @@
<script lang="ts">
import Composite from '$lib/core/Composite.svelte';
// import type { PageData } from './$houdini';
// export let data: PageData;
// $: ({ queryTest } = data);
let composite = {
id: 'test',
layout: {
areas: `
"top bottom"
`,
columns: '1fr 500px',
rows: '1fr'
},
children: [
{
id: 'bottommessage',
component: 'Messages',
slot: 'bottom'
// map: { messages: '@data:queryMessages' }
}
]
};
</script>
<!-- {JSON.stringify($queryTest.data, null, 2)} -->
<Composite {composite} />