A music player that connects to your cloud/distributed storage.
feat: output bundle prelude facet
+155
-84
+9
src/components/configurator/output/element.js
+9
src/components/configurator/output/element.js
···
315
315
await this.#selectOutput(null);
316
316
};
317
317
318
+
loadSelected = async () => {
319
+
const selectedOutputId = localStorage.getItem(
320
+
`${STORAGE_PREFIX}/selected/id`,
321
+
);
322
+
323
+
const selectedOutput = await this.#findOutput(selectedOutputId);
324
+
this.#selected.value = selectedOutput;
325
+
};
326
+
318
327
options = async () => {
319
328
const deps = this.dependencies();
320
329
const entries = Object.entries(deps);
+1
src/components/configurator/output/types.d.ts
+1
src/components/configurator/output/types.d.ts
+7
-84
src/components/orchestrator/output/element.js
+7
-84
src/components/orchestrator/output/element.js
···
5
5
import "~/components/transformer/output/refiner/default/element.js";
6
6
import "~/components/transformer/output/refiner/initial-contents/element.js";
7
7
8
+
import "~/components/output/polymorphic/indexed-db/element.js";
9
+
import "~/components/transformer/output/string/json/element.js";
10
+
8
11
/**
9
12
* @import {RenderArg} from "~/common/element.d.ts"
10
13
* @import {OutputElement} from "~/components/output/types.d.ts"
···
23
26
class OutputOrchestrator extends DiffuseElement {
24
27
static NAME = "diffuse/orchestrator/output";
25
28
26
-
// LIFECYCLE
27
-
28
-
/**
29
-
* @override
30
-
*/
31
-
async connectedCallback() {
32
-
super.connectedCallback();
33
-
34
-
/** @type {Set<string>} */
35
-
let previouslyActivated = new Set();
36
-
37
-
await customElements.whenDefined(this.outputConfigurator.localName);
38
-
39
-
this.effect(() => {
40
-
const set = this.activated();
41
-
const newlyActicated = set.difference(previouslyActivated);
42
-
43
-
newlyActicated.forEach((id) => {
44
-
switch (id) {
45
-
case "do-output__dc-output__local": {
46
-
import("~/components/output/polymorphic/indexed-db/element.js");
47
-
import("~/components/transformer/output/string/json/element.js");
48
-
break;
49
-
}
50
-
case "do-output__dc-output__atproto": {
51
-
import("~/components/output/raw/atproto/element.js");
52
-
import(
53
-
"~/components/transformer/output/raw/atproto-sync/element.js"
54
-
);
55
-
import(
56
-
"~/components/transformer/output/refiner/track-uri-passkey/element.js"
57
-
);
58
-
break;
59
-
}
60
-
case "do-output__dc-output__s3": {
61
-
import("~/components/output/bytes/s3/element.js");
62
-
import(
63
-
"~/components/transformer/output/bytes/dasl-sync/element.js"
64
-
);
65
-
break;
66
-
}
67
-
}
68
-
});
69
-
70
-
previouslyActivated = set;
71
-
});
72
-
}
73
-
74
29
// ELEMENT GETTERS
75
30
76
31
/**
···
132
87
return this.outputConfigurator.deselect;
133
88
}
134
89
90
+
get loadSelected() {
91
+
return this.outputConfigurator.loadSelected;
92
+
}
93
+
135
94
get options() {
136
95
return this.outputConfigurator.options;
137
96
}
···
159
118
group="${ifDefined(group)}"
160
119
></dop-indexed-db>
161
120
162
-
<!-- ⚙️ S3 -->
163
-
<dob-s3 id="do-output__dob-s3" group="${ifDefined(group)}"></dob-s3>
164
-
165
-
<!-- ⚙️ ATPROTO -->
166
-
<dtor-atproto-sync
167
-
id="do-output__dtor-atproto-sync"
168
-
namespace="atproto"
169
-
output-selector="#do-output__dor-atproto"
170
-
group="${ifDefined(group)}"
171
-
></dtor-atproto-sync>
172
-
173
-
<dor-atproto
174
-
id="do-output__dor-atproto"
175
-
group="${ifDefined(group)}"
176
-
></dor-atproto>
177
-
178
121
<!-- OUTPUT CONFIGURATOR -->
179
122
<dc-output
180
123
id="do-output__dc-output"
181
124
default="do-output__dc-output__local"
182
125
group="${ifDefined(group)}"
183
126
>
184
-
<!-- local -->
185
127
<dtos-json
186
128
id="do-output__dc-output__local"
187
129
output-selector="#do-output__dop-indexed-db__json"
188
130
label="Local"
189
131
></dtos-json>
190
-
191
-
<!-- atproto -->
192
-
<dtor-track-uri-passkey
193
-
id="do-output__dc-output__atproto"
194
-
namespace="atproto"
195
-
output-selector="#do-output__dtor-atproto-sync"
196
-
group="${ifDefined(group)}"
197
-
label="AT Protocol"
198
-
>
199
-
</dtor-track-uri-passkey>
200
-
201
-
<!-- s3 -->
202
-
<dtob-dasl-sync
203
-
id="do-output__dc-output__s3"
204
-
namespace="s3"
205
-
output-selector="#do-output__dob-s3"
206
-
group="${ifDefined(group)}"
207
-
label="S3"
208
-
></dtob-dasl-sync>
209
132
</dc-output>
210
133
211
134
<!-- ENTRY ⬆️ -->
+1
src/facets/data/output-bundle/index.html
+1
src/facets/data/output-bundle/index.html
···
1
+
<script type="module" src="./index.inline.js"></script>
+137
src/facets/data/output-bundle/index.inline.js
+137
src/facets/data/output-bundle/index.inline.js
···
1
+
import foundation from "~/common/facets/foundation.js";
2
+
import { effect } from "~/common/signal.js";
3
+
4
+
import { NAME as ATPROTO_OUTPUT_NAME } from "~/components/output/raw/atproto/element.js";
5
+
import { NAME as ATPROTO_SYNC_NAME } from "~/components/transformer/output/raw/atproto-sync/element.js";
6
+
import { NAME as ATPROTO_PASSKEY_NAME } from "~/components/transformer/output/refiner/track-uri-passkey/element.js";
7
+
8
+
import { NAME as S3_OUTPUT_NAME } from "~/components/output/bytes/s3/element.js";
9
+
import { NAME as S3_SYNC_NAME } from "~/components/transformer/output/bytes/dasl-sync/element.js";
10
+
11
+
/**
12
+
* @import OutputOrchestrator from "~/components/orchestrator/output/element.js"
13
+
*/
14
+
15
+
/** @type {Set<string>} */
16
+
let previouslyActivated = new Set();
17
+
18
+
/**
19
+
* Setup DOM elements when needed.
20
+
*/
21
+
effect(() => {
22
+
const output = foundation.signals.orchestrator.output();
23
+
if (!output) return;
24
+
25
+
atproto(output);
26
+
s3(output);
27
+
28
+
output.loadSelected();
29
+
});
30
+
31
+
/**
32
+
* Dynamically import custom elements when needed.
33
+
*/
34
+
effect(() => {
35
+
const output = foundation.signals.orchestrator.output();
36
+
if (!output) return;
37
+
38
+
const set = output.activated();
39
+
const newlyActicated = set.difference(previouslyActivated);
40
+
41
+
console.log("Activated", set);
42
+
43
+
previouslyActivated = set;
44
+
45
+
Array.from(newlyActicated).map((id) => {
46
+
switch (id) {
47
+
case "do-output__dc-output__atproto":
48
+
return atprotoCustomElements();
49
+
case "do-output__dc-output__s3":
50
+
return s3CustomElements();
51
+
}
52
+
});
53
+
});
54
+
55
+
////////////////////////////////////////////
56
+
// AT PROTOCOL
57
+
////////////////////////////////////////////
58
+
59
+
/**
60
+
* Adds a few extra layers of functionality to the AT Protocol output,
61
+
* optional passkey encryption and local-first syncing.
62
+
*
63
+
* @param {OutputOrchestrator} output
64
+
*/
65
+
export function atproto(output) {
66
+
const out = document.createElement(ATPROTO_OUTPUT_NAME);
67
+
out.setAttribute("group", foundation.GROUP);
68
+
out.setAttribute("id", "do-output__dor-atproto");
69
+
70
+
const sync = document.createElement(ATPROTO_SYNC_NAME);
71
+
sync.setAttribute("group", foundation.GROUP);
72
+
sync.setAttribute("id", "do-output__dtor-atproto-sync");
73
+
sync.setAttribute("namespace", "atproto");
74
+
sync.setAttribute("output-selector", "#do-output__dor-atproto");
75
+
76
+
const passkey = document.createElement(ATPROTO_PASSKEY_NAME);
77
+
passkey.setAttribute("group", foundation.GROUP);
78
+
passkey.setAttribute("id", "do-output__dc-output__atproto");
79
+
passkey.setAttribute("label", "AT Protocol");
80
+
passkey.setAttribute("namespace", "atproto");
81
+
passkey.setAttribute(
82
+
"output-selector",
83
+
"#do-output__dtor-atproto-sync",
84
+
);
85
+
86
+
// Add elements to DOM, make sure the transformer
87
+
// is added to the configurator so the user can select it.
88
+
output.append(out);
89
+
output.append(sync);
90
+
output.outputConfigurator.append(passkey);
91
+
}
92
+
93
+
export function atprotoCustomElements() {
94
+
import("~/components/output/raw/atproto/element.js");
95
+
import(
96
+
"~/components/transformer/output/raw/atproto-sync/element.js"
97
+
);
98
+
import(
99
+
"~/components/transformer/output/refiner/track-uri-passkey/element.js"
100
+
);
101
+
}
102
+
103
+
////////////////////////////////////////////
104
+
// S3
105
+
////////////////////////////////////////////
106
+
107
+
/**
108
+
* Wraps user data in a custom CBOR encode data structure
109
+
* which tracks what identifiers are removed.
110
+
* The transformer used here allows for merging of data.
111
+
*
112
+
* @param {OutputOrchestrator} output
113
+
*/
114
+
export function s3(output) {
115
+
const out = document.createElement(S3_OUTPUT_NAME);
116
+
out.setAttribute("group", foundation.GROUP);
117
+
out.setAttribute("id", "do-output__dob-s3");
118
+
119
+
const sync = document.createElement(S3_SYNC_NAME);
120
+
sync.setAttribute("group", foundation.GROUP);
121
+
sync.setAttribute("id", "do-output__dc-output__s3");
122
+
sync.setAttribute("label", "S3");
123
+
sync.setAttribute("namespace", "s3");
124
+
sync.setAttribute("output-selector", "#do-output__dob-s3");
125
+
126
+
// Add elements to DOM, make sure the transformer
127
+
// is added to the configurator so the user can select it.
128
+
output.append(out);
129
+
output.outputConfigurator.append(sync);
130
+
}
131
+
132
+
export function s3CustomElements() {
133
+
import("~/components/output/bytes/s3/element.js");
134
+
import(
135
+
"~/components/transformer/output/bytes/dasl-sync/element.js"
136
+
);
137
+
}