working example

src/Umbraco.Web.UI.Client/devops/example-runner/index.js

@@ -1,6 +1,6 @@
-import * as globModule from 'tiny-glob';
 import * as readline from 'readline';
-import { readdir } from 'fs/promises'
+import { execSync } from 'child_process';
+import { readdir } from 'fs/promises';
 
 const exampleDirectory = 'examples';
 
@@ -14,20 +14,29 @@ async function pickExampleUI(){
 	// Find sub folder:
 	const exampleFolderNames = await getDirectories(`${exampleDirectory}`);
 
+	// Create UI:
 	const rl = readline.createInterface({
 		input: process.stdin,
 		output: process.stdout
 	});
 
-	console.log('Please select a folder by entering the corresponding number:');
+	// List examples:
+	console.log('Please select an example by entering the corresponding number:');
 	exampleFolderNames.forEach((folder, index) => {
-		console.log(`${index + 1}. ${folder}`);
+		console.log(`[${index + 1}]	${folder}`);
 	});
 
+	// Ask user to select an example:
 	rl.question('Enter your selection: ', (answer) => {
+
+		// User picked an example:
 		const selectedFolder = exampleFolderNames[parseInt(answer) - 1];
 		console.log(`You selected: ${selectedFolder}`);
-		rl.close();
+
+		process.env['VITE_EXAMPLE_PATH'] = `${exampleDirectory}/${selectedFolder}`;
+
+		// Start vite server:
+		execSync('npm run dev', {stdio: 'inherit'});
 	});
 
 };

src/Umbraco.Web.UI.Client/examples/workspace-context-counter/index.ts

@@ -5,6 +5,6 @@ export const manifests: ManifestTypes = [
 		type: 'workspaceContext',
 		name: 'workspaceContextCounter',
 		alias: 'example.workspaceCounter.counter',
-		js: 'workspace-context-counter.js',
+		js: () => import('./workspace-context-counter.js'),
 	}
 ]

src/Umbraco.Web.UI.Client/examples/workspace-context-counter/workspace-context-counter.ts

@@ -3,7 +3,7 @@ import { UmbBaseController, type UmbControllerHost } from '@umbraco-cms/backoffi
 export class WorkspaceContextCounter extends UmbBaseController {
 
 	constructor(host: UmbControllerHost) {
-		super();
+		super(host);
 
 		console.log("HELLOOOOO WORLLLDDD")
 	}

src/Umbraco.Web.UI.Client/index.ts

@@ -1,4 +1,5 @@
 import { UmbAppElement } from './src/apps/app/app.element.js';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { startMockServiceWorker } from './src/mocks/index.js';
 
 if (import.meta.env.VITE_UMBRACO_USE_MSW === 'on') {
@@ -18,4 +19,25 @@ if (import.meta.env.DEV) {
 
 appElement.bypassAuth = isMocking;
 
+
 document.body.appendChild(appElement);
+
+// Move this elsewhere:
+if(import.meta.env.VITE_EXAMPLE_PATH) {
+	console.log(import.meta.env.VITE_EXAMPLE_PATH);
+	import(/* @vite-ignore */ './'+import.meta.env.VITE_EXAMPLE_PATH+'/index.ts').then((js) => {
+		console.log("js", js);
+		if (js) {
+			Object.keys(js).forEach((key) => {
+				const value = js[key];
+
+				if (Array.isArray(value)) {
+					umbExtensionsRegistry.registerMany(value);
+				} else if (typeof value === 'object') {
+					umbExtensionsRegistry.register(value);
+				}
+			});
+		}
+	});
+
+}

src/Umbraco.Web.UI.Client/tsconfig.json

@@ -126,7 +126,7 @@
 			"@umbraco-cms/internal/test-utils": ["utils/test-utils.ts"]
 		}
 	},
-	"include": ["src/**/*.ts", "apps/**/*.ts", "e2e/**/*.ts", "index.ts", "storybook/stories/**/*.ts"],
+	"include": ["src/**/*.ts", "apps/**/*.ts", "e2e/**/*.ts", "index.ts", "storybook/stories/**/*.ts", "examples/**/*.ts", ],
 	"references": [
 		{
 			"path": "./tsconfig.node.json"