A music player that connects to your cloud/distributed storage.
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: output bundle prelude facet

+155 -84
+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
··· 5 5 & OutputElement 6 6 & { 7 7 deselect: () => Promise<void>; 8 + loadSelected: () => Promise<void>; 8 9 options: () => Promise<Array<OutputOption<ElementType>>>; 9 10 select: (id: string) => Promise<void>; 10 11
+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 + <script type="module" src="./index.inline.js"></script>
+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 + }