chore(ui): move custom components - WF-63

docs/framework/custom-components.mdx

@@ -135,17 +135,17 @@ The code above will make Bubble Message available in the Builder.
 
 <Tip>
   You can also have a look at the built-in component templates, since their
-  syntax is equivalent. They can be found in the `ui/src/components/` folder.
+  syntax is equivalent. They can be found in the `ui/src/components/core` folder.
 </Tip>
-Go to `ui/src/custom_components/` and open the Vue single-file components, i.e. the
+Go to `ui/src/components/custom` and open the Vue single-file components, i.e. the
 `.vue` files. These files contain comments that will help you get started. Try editing
 the provided templates, you should see changes reflected.
 
 You can get started by duplicating one of these examples. Make sure you add the new template to the entrypoint, as discussed below.
 
 ### Define entrypoint
 
-For custom component templates to be taken into account, they need to be accessible from the entrypoint. Edit `ui/src/custom_components/index.ts` to define which templates you wish to export and under which identifiers.
+For custom component templates to be taken into account, they need to be accessible from the entrypoint. Edit `ui/src/components/custom/index.ts` to define which templates you wish to export and under which identifiers.
 
 ```ts
 // Import the templates

src/ui/src/custom_components/index.ts → src/ui/src/components/custom/index.ts

@@ -1,11 +1,14 @@
 // Import the templates
 
+import type { TemplateMap } from "@/writerTypes";
 import BubbleMessage from "./BubbleMessage.vue";
 import BubbleMessageAdvanced from "./BubbleMessageAdvanced.vue";
 
 // Export an object with the ids and the templates as default
 
-export default {
+const CUSTOM_COMPONENTS: TemplateMap = {
 	bubblemessage: BubbleMessage,
 	bubblemessageadvanced: BubbleMessageAdvanced,
 };
+
+export default CUSTOM_COMPONENTS;

src/ui/src/core/templateMap.ts

@@ -1,3 +1,4 @@
+import type { Component as VueComponent } from "vue";
 // Maps Writer Framework component types to renderable Vue components
 // content
 import CoreDataframe from "../components/core/content/CoreDataframe.vue";
@@ -69,10 +70,14 @@ import WorkflowsWorkflow from "../components/workflows/WorkflowsWorkflow.vue";
 import WorkflowsNode from "../components/workflows/abstract/WorkflowsNode.vue";
 import WorkflowsRoot from "@/components/workflows/WorkflowsRoot.vue";
 
-import { AbstractTemplate, WriterComponentDefinition } from "@/writerTypes";
+import type {
+	AbstractTemplate,
+	TemplateMap,
+	WriterComponentDefinition,
+} from "@/writerTypes";
 import { h } from "vue";
 
-const templateMap = {
+const templateMap: TemplateMap = {
 	root: CoreRoot,
 	page: CorePage,
 	sidebar: CoreSidebar,
@@ -135,14 +140,14 @@ const templateMap = {
 
 const abstractTemplateMap: Record<string, AbstractTemplate> = {};
 
+// eslint-disable-next-line no-undef
 if (WRITER_LIVE_CCT === "yes") {
 	/*
-	Assigns the components in custom_components to the template map,
+	Assigns the components in `components/custom` to the template map,
 	allowing for live updates when developing custom component templates.
 	*/
 
-	const liveCCT: Record<string, any> = (await import("../custom_components"))
-		.default;
+	const liveCCT = (await import("../components/custom")).default;
 	Object.entries(liveCCT).forEach(([componentType, template]) => {
 		templateMap[`custom_${componentType}`] = template;
 	});
@@ -157,7 +162,7 @@ function fallbackTemplate(type: string) {
 			description: message,
 			category: "Fallback",
 		},
-		setup(props, { slots }) {
+		setup(_props: never, { slots }) {
 			return () => {
 				return h(
 					"div",
@@ -212,7 +217,10 @@ export function getSupportedComponentTypes() {
 	return [...Object.keys(templateMap), ...Object.keys(abstractTemplateMap)];
 }
 
-export function registerComponentTemplate(type: string, vueComponent: any) {
+export function registerComponentTemplate(
+	type: string,
+	vueComponent: VueComponent,
+) {
 	templateMap[type] = vueComponent;
 }
 

src/ui/src/writerTypes.ts

@@ -1,3 +1,4 @@
+import type { Component as VueComponent } from "vue";
 import { generateCore } from "./core";
 import { generateBuilderManager } from "./builder/builderManager";
 
@@ -101,8 +102,15 @@ export type WriterComponentDefinition = {
 	>;
 	previewField?: string; // Which field to use for previewing in the Component Tree
 	positionless?: boolean; // Whether this type of component is positionless (like Sidebar)
-	outs?:
-		Record<string, { name: string; description: string; style: string; field?: keyof WriterComponentDefinition["fields"] }>;
+	outs?: Record<
+		string,
+		{
+			name: string;
+			description: string;
+			style: string;
+			field?: keyof WriterComponentDefinition["fields"];
+		}
+	>;
 };
 
 export type BuilderManager = ReturnType<typeof generateBuilderManager>;
@@ -154,3 +162,5 @@ export type AbstractTemplate = {
 	baseType: string;
 	writer: WriterComponentDefinition;
 };
+
+export type TemplateMap = Record<string, VueComponent>;

src/ui/tools/custom_check.mjs

@@ -2,7 +2,7 @@ import { importVue } from "./core.mjs";
 
 async function checkDeclarationKey() {
 	let hasFailed = false;
-	const module = await importVue("../src/custom_components/index.ts");
+	const module = await importVue("../src/components/custom/index.ts");
 	const { checkComponentKey } = await importVue(
 		"../src/core/loadExtensions.ts",
 	);
@@ -17,7 +17,7 @@ async function checkDeclarationKey() {
 	if (invalidCustomComponentKeys.length !== 0) {
 		// eslint-disable-next-line no-console
 		console.error(
-			`ERROR: Invalid component declaration: ${invalidCustomComponentKeys} into 'src/custom_components/index.ts'. Their key must be declared using only lowercase and alphanumeric characters.`,
+			`ERROR: Invalid component declaration: ${invalidCustomComponentKeys} into 'src/components/custom/index.ts'. Their key must be declared using only lowercase and alphanumeric characters.`,
 		);
 	}
 	return hasFailed;

src/ui/vite.config.custom.ts

@@ -14,7 +14,7 @@ export default defineConfig({
 	publicDir: false,
 	build: {
 		lib: {
-			entry: ["./src/custom_components"],
+			entry: ["./src/components/custom"],
 			formats: ["umd"],
 			name: "WriterCustomComponentTemplates",
 			fileName: (format, entryalias: string): string => {