chore: changes according to code review

writer · Feb 28, 2024 · e624faa · e624faa
1 parent db4b403
commit e624faa
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/ui/src/builder/BuilderFieldsText.vue b/ui/src/builder/BuilderFieldsText.vue
@@ -80,7 +80,7 @@ const options = computed(() => {
 	const field = templateField.value;
 	if (field.options) {
 		return typeof field.options === "function"
-			? field.options()
+			? field.options(ss, componentId.value)
 			: field.options;
 	}
 	return [];

diff --git a/ui/src/core_components/content/CoreLink.vue b/ui/src/core_components/content/CoreLink.vue
@@ -11,11 +11,9 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../streamsyncTypes";
+import { FieldType, Core } from "../../streamsyncTypes";
 import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
 import injectionKeys from "../../injectionKeys";
-let options = [];
-
 export default {
 	streamsync: {
 		name: "Link",
@@ -26,7 +24,15 @@ export default {
 				name: "URL",
 				type: FieldType.Text,
 				desc: "A valid URL.",
-				options: () => Object.fromEntries(options.value),
+				options: (ss: Core) => {
+					return Object.fromEntries(
+						ss
+							.getComponents("root", true)
+							.map((page) => page.content.key)
+							.filter((key) => Boolean(key))
+							.map((key) => [`#${key}`, key]),
+					);
+				},
 			},
 			target: {
 				name: "Target",
@@ -60,17 +66,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, computed } from "vue";
-const ss = inject(injectionKeys.core);
 const fields = inject(injectionKeys.evaluatedFields);
 
-options = computed(() => {
-	return ss
-		.getComponents("root", true)
-		.map((page) => page.content.key)
-		.filter((key) => Boolean(key))
-		.map((key) => [`#${key}`, key]);
-});
-
 const displayText = computed(() => {
 	return fields.text.value || fields.url.value || "Link";
 });

diff --git a/ui/src/streamsyncTypes.ts b/ui/src/streamsyncTypes.ts
@@ -1,13 +1,17 @@
 import { generateCore } from "./core";
 import { generateBuilderManager } from "./builder/builderManager";
 
+export type Core = ReturnType<typeof generateCore>;
+
+type ComponentId = string;
+
 /**
  * Basic building block of applications.
  * Multiple instances of a single component can exists. For example, via Repeater.
  */
 
 export type Component = {
-	id: string;
+	id: ComponentId;
 	parentId: string;
 	type: string;
 	position: number;
@@ -54,7 +58,12 @@ export type StreamsyncComponentDefinition = {
 			desc?: string; // Description
 			default?: string; // Value used if the field is empty, e.g. "(No text)"
 			control?: FieldControl; // Which control (text, textarea, etc) to use if not the default for the type
-			options?: Record<string, string> | (() => Record<string, string>); // List of values to be provided as autocomplete options
+			options?:
+				| Record<string, string>
+				| ((
+						ss?: Core,
+						componentId?: ComponentId,
+				  ) => Record<string, string>); // List of values to be provided as autocomplete options
 			type: FieldType; // Data type for the field
 			category?: FieldCategory; // Category (Layout, Content, etc)
 			applyStyleVariable?: boolean; // Use the value of this field as a CSS variable
@@ -72,7 +81,6 @@ export type StreamsyncComponentDefinition = {
 	positionless?: boolean; // Whether this type of component is positionless (like Sidebar)
 };
 
-export type Core = ReturnType<typeof generateCore>;
 export type BuilderManager = ReturnType<typeof generateBuilderManager>;
 
 export const enum ClipboardOperation {