WIP

AmadeusITGroup · Aug 17, 2023 · 32a7fa2 · 32a7fa2
1 parent 4c71c4a
commit 32a7fa2
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 22 deletions.
diff --git a/demo/scripts/includeSamples.plugin.ts b/demo/scripts/includeSamples.plugin.ts
@@ -1,8 +1,19 @@
 import type {Plugin} from 'vite';
 import path from 'path';
+import type {Frameworks} from '$lib/stores';
+import {readFile} from 'fs/promises';
 
 const samplePrefix = '@agnos-ui/samples/';
 
+const importRegExp = /import([^;]+from)?\s*['"]([^'"]+)['"]\s*;/g;
+const findDependencies = (fileContent: string) => {
+	const dependencies: string[] = [];
+	for (const dependency of fileContent.matchAll(importRegExp)) {
+		dependencies.push(dependency[2]);
+	}
+	return dependencies;
+};
+
 export const includeSamples = (): Plugin => {
 	return {
 		name: 'include-samples',
@@ -19,30 +30,53 @@ export const includeSamples = (): Plugin => {
 				}
 				const [componentName, sampleName] = parts;
 				const normalizedSampleName = `${sampleName[0].toUpperCase()}${sampleName.substring(1)}`;
-				let output = `export default {componentName:${JSON.stringify(componentName)},sampleName:${JSON.stringify(sampleName)},files:{`;
 
-				// TODO: add support for multiple files in the samples
+				const files: Record<Frameworks, {fileName: string; filePath: string}[]> = {} as any;
+				const addFile = async (framework: Frameworks, fileName: string, filePath: string) => {
+					if (!files[framework]) {
+						files[framework] = [];
+					}
+					if (files[framework].some((file) => file.filePath === filePath)) return;
+					files[framework].push({fileName, filePath});
+					this.addWatchFile(filePath);
+					const fileContent = await readFile(filePath, {encoding: 'utf8'});
+					const dependencies = findDependencies(fileContent);
+					const directory = path.dirname(filePath);
+					for (const dependency of dependencies) {
+						const dependencyParts = dependency.split('/');
+						if (dependencyParts[0] === '.') {
+							await addFile(framework, path.basename(dependency), path.join(directory, dependency));
+						} else {
+							// TODO: check that the dependency is valid and included in package.json
+						}
+					}
+				};
 
-				let fileName = JSON.stringify(`${sampleName}.component.ts`);
-				output += `angular:{entryPoint: ${fileName}, files: {`;
-				output += `[${fileName}]:() => import(${JSON.stringify(
-					path.join(__dirname, `../../angular/demo/src/app/samples/${componentName}/${sampleName}.route.ts?raw`)
-				)}).then(file=>file.default),`;
-				output += '}},';
+				await addFile(
+					'angular',
+					`${sampleName}.component.ts`,
+					path.join(__dirname, `../../angular/demo/src/app/samples/${componentName}/${sampleName}.route.ts`)
+				);
+				await addFile(
+					'react',
+					`${sampleName}.tsx`,
+					path.join(__dirname, `../../react/demo/app/samples/${componentName}/${normalizedSampleName}.route.tsx`)
+				);
+				await addFile(
+					'svelte',
+					`${sampleName}.svelte`,
+					path.join(__dirname, `../../svelte/demo/samples/${componentName}/${normalizedSampleName}.route.svelte`)
+				);
 
-				fileName = JSON.stringify(`${sampleName}.tsx`);
-				output += `react:{entryPoint: ${fileName}, files: {`;
-				output += `[${fileName}]:() => import(${JSON.stringify(
-					path.join(__dirname, `../../react/demo/app/samples/${componentName}/${normalizedSampleName}.route.tsx?raw`)
-				)}).then(file=>file.default),`;
-				output += '}},';
-
-				fileName = JSON.stringify(`${sampleName}.svelte`);
-				output += `svelte:{entryPoint: ${fileName}, files: {`;
-				output += `[${fileName}]:() => import(${JSON.stringify(
-					path.join(__dirname, `../../svelte/demo/samples/${componentName}/${normalizedSampleName}.route.svelte?raw`)
-				)}).then(file=>file.default),`;
-				output += '}},';
+				let output = `export default {componentName:${JSON.stringify(componentName)},sampleName:${JSON.stringify(sampleName)},files:{`;
+				(Object.keys(files) as Frameworks[]).forEach((framework) => {
+					const frameworkFiles = files[framework];
+					output += `${JSON.stringify(framework)}:{entryPoint:${JSON.stringify(frameworkFiles[0].fileName)},files:{`;
+					frameworkFiles.forEach(({fileName, filePath}) => {
+						output += `[${JSON.stringify(fileName)}]: () => import(${JSON.stringify(filePath + '?raw')}).then(file=>file.default),`;
+					});
+					output += `}},`;
+				});
 
 				output += `}};`;
 				return output;

diff --git a/demo/src/lib/stackblitz/angular/package.json b/demo/src/lib/stackblitz/angular/package.json
@@ -19,6 +19,8 @@
 		"@angular/platform-browser": "^16.2.0",
 		"@angular/platform-browser-dynamic": "^16.2.0",
 		"@angular/router": "^16.2.0",
+		"bootstrap-icons": "^1.10.5",
+		"raw-loader": "^4.0.2",
 		"rxjs": "^7.8.1",
 		"tslib": "^2.6.1",
 		"typescript": "~5.1.6",

diff --git a/demo/src/lib/stackblitz/angular/src/raw-loader.d.ts b/demo/src/lib/stackblitz/angular/src/raw-loader.d.ts
@@ -0,0 +1,4 @@
+declare module '!raw-loader!*' {
+	const contents: string;
+	export = contents;
+}
diff --git a/demo/src/lib/stackblitz/react/package.json b/demo/src/lib/stackblitz/react/package.json
@@ -11,6 +11,7 @@
 		"@types/react": "^18.2.20",
 		"@types/react-dom": "^18.2.7",
 		"@vitejs/plugin-react": "^4.0.4",
+		"bootstrap-icons": "^1.10.5",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"sass": "^1.65.1",

diff --git a/demo/src/lib/stackblitz/svelte/package.json b/demo/src/lib/stackblitz/svelte/package.json
@@ -11,6 +11,7 @@
 	"devDependencies": {
 		"@sveltejs/vite-plugin-svelte": "^2.4.5",
 		"@tsconfig/svelte": "^5.0.0",
+		"bootstrap-icons": "^1.10.5",
 		"sass": "^1.65.1",
 		"svelte": "^4.2.0",
 		"svelte-check": "^3.5.0",

diff --git a/demo/src/sample.d.ts b/demo/src/sample.d.ts
@@ -1,4 +1,5 @@
 declare module '@agnos-ui/samples/*' {
-	const sample: Sample;
+	import type {SampleInfo} from '$lib/layout/sample';
+	const sample: SampleInfo;
 	export default sample;
 }