feat: block chunks (#997)

Co-authored-by: AdrianGonz97 <[email protected]>

Author: huntabyte

.prettierignore

@@ -19,7 +19,7 @@ CHANGELOG.md
 
 
 # docs site specific
-apps/www/src/__registry__/index.js
+apps/www/src/__registry__/*
 apps/www/other/themes/dark.json
 apps/www/other/themes/light.json
 apps/www/static

apps/www/scripts/build-registry.ts

@@ -11,6 +11,7 @@ import { themes } from "../src/lib/registry/themes";
 import { buildRegistry } from "./registry";
 import { transformContent } from "./transformers";
 import { BASE_STYLES, BASE_STYLES_WITH_VARIABLES, THEME_STYLES_WITH_VARIABLES } from "./templates";
+import { getChunks } from "./transform-chunks.js";
 
 const REGISTRY_PATH = path.resolve("static", "registry");
 const REGISTRY_IGNORE = ["super-form"];
@@ -24,6 +25,54 @@ async function main() {
 		process.exit(1);
 	}
 
+	// ----------------------------------------------------------------------------
+	// Build blocks registry (__registry__/blocks.js) and block chunks (__registry__/chunks/[style]/[block]-[chunk].svelte)
+	// ----------------------------------------------------------------------------
+	const registryChunksDirPath = path.resolve("src", "__registry__", "chunks");
+	const libPath = path.resolve("src", "lib", "registry");
+	rimraf.sync(registryChunksDirPath);
+	let blocksIndex = `
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+export const Blocks = {
+`;
+	// Create the __registry__/chunks/[style] dir
+	for (const style of styles) {
+		blocksIndex += `\t"${style.name}": {`;
+		const chunkStyleDir = path.resolve(registryChunksDirPath, style.name);
+		// Create directory if it doesn't exist.
+		if (!fs.existsSync(chunkStyleDir)) {
+			fs.mkdirSync(chunkStyleDir, { recursive: true });
+		}
+		// Creates chunk files
+		for (const block of result.data) {
+			if (block.type !== "components:block" || block.style !== style.name) continue;
+			const file = block.files[0];
+			const blockPath = path.resolve(libPath, block.style, "block", file.name);
+			const chunkDir = path.resolve(registryChunksDirPath, block.style);
+
+			const chunks = getChunks(file.content, blockPath);
+			for (const chunk of chunks) {
+				const chunkPath = path.resolve(chunkDir, `${chunk.name}.svelte`);
+				fs.writeFileSync(chunkPath, chunk.content, { encoding: "utf8" });
+			}
+
+			blocksIndex += `
+		"${block.name}": {
+			name: "${block.name}",
+			type: "${block.type}",
+			chunks: [${chunks.map((chunk) => ` { name: "${chunk.name}", description: "${chunk.description}", container: { className: "${chunk.container.className}" }, raw: () => import("./chunks/${style.name}/${chunk.name}.svelte?raw").then((m) => m.default), component: () => import("./chunks/${style.name}/${chunk.name}.svelte").then((m) => m.default) }`)}],
+			component: () => import("../lib/registry/${style.name}/block/${block.name}.svelte").then((m) => m.default),
+			raw: () => import("../lib/registry/${style.name}/block/${block.name}.svelte?raw").then((m) => m.default),
+		},`;
+		}
+		// end of style
+		blocksIndex += `\n\t},`;
+	}
+	blocksIndex += "\n};\n";
+	const blocksPath = path.resolve("src", "__registry__", "blocks.js");
+	fs.writeFileSync(blocksPath, blocksIndex);
+
 	// ----------------------------------------------------------------------------
 	// Build __registry__/index.js.
 	// ----------------------------------------------------------------------------
@@ -38,15 +87,19 @@ export const Index = {
 
 		// Build style index.
 		for (const item of result.data) {
-			if (item.type === "components:ui" || item.style !== "default") {
+			if (
+				item.type === "components:ui" ||
+				item.type === "components:block" ||
+				item.style !== "default"
+			) {
 				continue;
 			}
+			const type = item.type.split(":")[1];
 
 			const resolveFiles = item.files.map(
 				(file) => `../lib/registry/${style.name}/${file.path}`
 			);
 
-			const type = item.type.split(":")[1];
 			index += `
 		"${item.name}": {
 			name: "${item.name}",

apps/www/scripts/transform-chunks.ts

@@ -0,0 +1,90 @@
+import { parse, walk } from "svelte/compiler";
+import prettier from "@prettier/sync";
+import type { Attribute, TemplateNode } from "svelte/types/compiler/interfaces";
+import { codeBlockPrettierConfig } from "../other/code-block-prettier.js";
+
+type Chunk = {
+	name: string;
+	dependencies: string[];
+	start: number;
+	end: number;
+	content: string;
+	description: string;
+	container: { className: string };
+};
+export function getChunks(source: string, filename: string) {
+	const ast = parse(source, { filename });
+	const chunks: Chunk[] = [];
+
+	walk(ast as any, {
+		enter(n) {
+			const chunkNode = n as TemplateNode;
+			if (chunkNode.type !== "Element" && chunkNode.type !== "InlineComponent") return;
+
+			const attrs: Attribute[] = chunkNode.attributes;
+			const nameNode = attrs.find((a) => a.name === "data-x-chunk-name");
+			const descriptionNode = attrs.find((a) => a.name === "data-x-chunk-description");
+			if (descriptionNode === undefined || nameNode === undefined) return;
+
+			const containerNode = attrs.find((a) => a.name === "data-x-chunk-container");
+
+			const name: string = nameNode.value[0].data;
+			const description: string = descriptionNode.value[0].data;
+			const containerClassName: string = containerNode?.value[0].data ?? "";
+			const dependencies = new Set<string>();
+
+			// discard any prop members
+			const [componentName] = chunkNode.name.split(".") as string[];
+			dependencies.add(componentName);
+
+			// walk the chunk to acquire all component dependencies
+			walk(chunkNode as any, {
+				enter(n) {
+					const node = n as TemplateNode;
+					if (node.type === "InlineComponent") {
+						const [componentName] = node.name.split(".") as string[];
+						dependencies.add(componentName);
+					}
+				},
+			});
+
+			const chunk: Chunk = {
+				name,
+				description,
+				dependencies: [...dependencies],
+				start: chunkNode.start,
+				end: chunkNode.end,
+				content: "",
+				container: {
+					className: containerClassName,
+				},
+			};
+			chunks.push({ ...chunk, content: transformChunk(source, chunk) });
+			// don't traverse the rest of this node
+			this.skip();
+		},
+	});
+
+	return chunks;
+}
+
+export function transformChunk(source: string, chunk: Chunk): string {
+	const html = source.substring(chunk.start, chunk.end);
+	const lines = source.split("\n");
+	const scriptEndIdx = lines.indexOf("</script>");
+	const imports = lines
+		// we only want to look at the script tag...
+		.slice(0, scriptEndIdx)
+		// spaced on the edges to prevent false positives (e.g. `CreditCard` could be falsely triggered by `Card`)
+		.filter((line) => chunk.dependencies.some((dep) => line.includes(` ${dep} `)));
+
+	let template = `<script lang="ts">\n`;
+	template += imports.join("\n");
+	template += `\n</script>\n\n${html}`;
+
+	return prettier.format(template, {
+		...codeBlockPrettierConfig,
+		useTabs: true,
+		tabWidth: undefined,
+	});
+}