Skip to content

Commit 30da323

Browse files
aarondfrancisaarondfrancis
committed
wip
1 parent 8d135f8 commit 30da323

File tree

19 files changed

+391
-8
lines changed

19 files changed

+391
-8
lines changed

‎README.md‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -552,11 +552,7 @@ less cumbersome.
552552

553553
#### Readonly State
554554

555-
--------
556-
@TODO! Not sure this is true!
557-
--------
558-
559-
You may annotate a public property with `#[Fusion\Attributes\ReadOnly]` to mark a property as readonly, i.e., it will
555+
You may annotate a public property with `#[Fusion\Attributes\IsReadOnly]` to mark a property as readonly, i.e., it will
560556
never be set from a frontend request.
561557

562558
Alternatively, you may set the value via the `mount` method to accomplish the same outcome.

‎apps/vue/database/database.sqlite‎

0 Bytes
Binary file not shown.

‎apps/vue/resources/js/Pages/Class/ReadOnly.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<php>
2+
use \Fusion\Attributes\IsReadOnly;
3+
4+
new class {
5+
#[IsReadOnly]
6+
public string $value = 'Cant change me!';
7+
}
8+
</php>
9+
10+
<template>
11+
{{ value }}
12+
</template>
13+
14+
<script setup>
15+
import {useFusion} from "$fusion/Pages/Procedural/SyncState.js";
16+
import {onMounted} from "vue";
17+
18+
const {fusionSync: sync, value} = useFusion(['fusionSync', 'value']);
19+
20+
onMounted(function () {
21+
value.value = 'Oh yes I can';
22+
23+
sync();
24+
})
25+
</script>
26+
27+
<script test>
28+
import {test} from '@pw/playwright.extension.js'
29+
30+
/**
31+
* @param {{ fusion: import('./FusionPage.js').FusionPage }} fixtures
32+
*/
33+
test('readonly', async ({fusion}) => {
34+
await fusion.visit();
35+
await fusion.waitForTimeout(500);
36+
await fusion.see('Cant change me!');
37+
});
38+
</script>

‎apps/vue/resources/js/Pages/Class/SyncState.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<php>
2+
use \Fusion\Attributes\IsReadOnly;
3+
4+
new class {
5+
public string $name = 'Aaron';
6+
7+
#[IsReadOnly]
8+
public string $computed = '';
9+
10+
public function mount()
11+
{
12+
$this->computed= 'Name is: '. $this->name;
13+
}
14+
}
15+
</php>
16+
17+
<template>
18+
Prop: {{ name }}
19+
<br>
20+
{{ computed }}
21+
</template>
22+
23+
<script setup>
24+
import {useFusion} from "$fusion/Pages/Procedural/SyncState.js";
25+
import {onMounted} from "vue";
26+
27+
const {fusionSync: sync, name} = useFusion(['fusionSync', 'name']);
28+
29+
onMounted(function () {
30+
name.value = 'Foobar';
31+
32+
sync();
33+
})
34+
</script>
35+
36+
<script test>
37+
import {test} from '@pw/playwright.extension.js'
38+
39+
/**
40+
* @param {{ fusion: import('./FusionPage.js').FusionPage }} fixtures
41+
*/
42+
test('sync state works', async ({fusion}) => {
43+
await fusion.visit();
44+
await fusion.waitForTimeout(500);
45+
await fusion.see('Name is: Foobar');
46+
});
47+
</script>

‎apps/vue/resources/js/Pages/Procedural/ReadOnly.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<php>
2+
$value = prop('Cant change me!')->readonly();
3+
</php>
4+
5+
<template>
6+
{{ value }}
7+
</template>
8+
9+
<script setup>
10+
import {useFusion} from "$fusion/Pages/Procedural/SyncState.js";
11+
import {onMounted} from "vue";
12+
13+
const {fusionSync: sync, value} = useFusion(['fusionSync', 'value']);
14+
15+
onMounted(function () {
16+
value.value = 'Oh yes I can';
17+
18+
sync();
19+
})
20+
</script>
21+
22+
<script test>
23+
import {test} from '@pw/playwright.extension.js'
24+
25+
/**
26+
* @param {{ fusion: import('./FusionPage.js').FusionPage }} fixtures
27+
*/
28+
test('readonly', async ({fusion}) => {
29+
await fusion.visit();
30+
await fusion.waitForTimeout(500);
31+
await fusion.see('Cant change me!');
32+
});
33+
</script>

‎apps/vue/resources/js/Pages/Procedural/SyncState.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<php>
2+
$name = prop('Aaron');
3+
4+
$computed = prop(fn() => "Name is: $name")->readonly();
5+
</php>
6+
7+
<template>
8+
Prop: {{ name }}
9+
<br>
10+
{{ computed }}
11+
</template>
12+
13+
<script setup>
14+
import {useFusion} from "$fusion/Pages/Procedural/SyncState.js";
15+
import {onMounted} from "vue";
16+
17+
const {fusionSync: sync, name} = useFusion(['fusionSync', 'name']);
18+
19+
onMounted(function() {
20+
name.value = 'Foobar';
21+
22+
sync();
23+
})
24+
</script>
25+
26+
<script test>
27+
import {test} from '@pw/playwright.extension.js'
28+
29+
/**
30+
* @param {{ fusion: import('./FusionPage.js').FusionPage }} fixtures
31+
*/
32+
test('sync state works', async ({fusion}) => {
33+
await fusion.visit();
34+
await fusion.waitForTimeout(500);
35+
await fusion.see('Name is: Foobar');
36+
});
37+
</script>

‎apps/vue/storage/fusion/JavaScript/Pages/Class/ReadOnly.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Pipeline from '@fusion/vue/pipeline';
2+
import ActionFactory from '@fusion/vue/actionFactory';
3+
4+
5+
export const state = ["value"];
6+
export const actions = ["fusionSync"];
7+
8+
let cachedState;
9+
10+
export function useFusion(keys = [], props = {}, useCachedState = false) {
11+
let state = cachedState;
12+
if (useCachedState && cachedState) {
13+
state = cachedState;
14+
} else {
15+
cachedState = state = new Pipeline(props).createState();
16+
}
17+
18+
const all = {
19+
...state,
20+
...new ActionFactory(actions, state),
21+
}
22+
23+
const shouldExport = {};
24+
for (const key of keys) {
25+
if (key in all) {
26+
shouldExport[key] = all[key];
27+
}
28+
}
29+
30+
return shouldExport;
31+
}

‎apps/vue/storage/fusion/JavaScript/Pages/Class/SyncState.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Pipeline from '@fusion/vue/pipeline';
2+
import ActionFactory from '@fusion/vue/actionFactory';
3+
4+
5+
export const state = ["name", "computed"];
6+
export const actions = ["fusionSync"];
7+
8+
let cachedState;
9+
10+
export function useFusion(keys = [], props = {}, useCachedState = false) {
11+
let state = cachedState;
12+
if (useCachedState && cachedState) {
13+
state = cachedState;
14+
} else {
15+
cachedState = state = new Pipeline(props).createState();
16+
}
17+
18+
const all = {
19+
...state,
20+
...new ActionFactory(actions, state),
21+
}
22+
23+
const shouldExport = {};
24+
for (const key of keys) {
25+
if (key in all) {
26+
shouldExport[key] = all[key];
27+
}
28+
}
29+
30+
return shouldExport;
31+
}

‎apps/vue/storage/fusion/JavaScript/Pages/Procedural/ReadOnly.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Pipeline from '@fusion/vue/pipeline';
2+
import ActionFactory from '@fusion/vue/actionFactory';
3+
4+
5+
export const state = ["value"];
6+
export const actions = ["fusionSync"];
7+
8+
let cachedState;
9+
10+
export function useFusion(keys = [], props = {}, useCachedState = false) {
11+
let state = cachedState;
12+
if (useCachedState && cachedState) {
13+
state = cachedState;
14+
} else {
15+
cachedState = state = new Pipeline(props).createState();
16+
}
17+
18+
const all = {
19+
...state,
20+
...new ActionFactory(actions, state),
21+
}
22+
23+
const shouldExport = {};
24+
for (const key of keys) {
25+
if (key in all) {
26+
shouldExport[key] = all[key];
27+
}
28+
}
29+
30+
return shouldExport;
31+
}

‎apps/vue/storage/fusion/JavaScript/Pages/Procedural/SyncState.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Pipeline from '@fusion/vue/pipeline';
2+
import ActionFactory from '@fusion/vue/actionFactory';
3+
4+
5+
export const state = ["name", "computed"];
6+
export const actions = ["fusionSync"];
7+
8+
let cachedState;
9+
10+
export function useFusion(keys = [], props = {}, useCachedState = false) {
11+
let state = cachedState;
12+
if (useCachedState && cachedState) {
13+
state = cachedState;
14+
} else {
15+
cachedState = state = new Pipeline(props).createState();
16+
}
17+
18+
const all = {
19+
...state,
20+
...new ActionFactory(actions, state),
21+
}
22+
23+
const shouldExport = {};
24+
for (const key of keys) {
25+
if (key in all) {
26+
shouldExport[key] = all[key];
27+
}
28+
}
29+
30+
return shouldExport;
31+
}

0 commit comments

Comments
 (0)