git.stevedylan.dev

Merge pull request #2 from stevedylandev/fix/duplicate-dependencies 2bf70def

fix/duplicate dependencies

Steve Simkins · 2025-10-18 21:18 3 file(s) · +34 −5

package.json +2 −1

		"build:components": "bun scripts/build-components.ts",
		"build:types": "bun scripts/build-types.ts",
		"build:site": "bun scripts/build-site",
		"dev": "bun site/index.html --console"
		"dev": "bun site/index.html --console",
		"preview": "bun site-dist/index.html --console"
	},
	"keywords": [
		"web-components",

scripts/build-components.ts +28 −4


		if (componentStartIndex > 0) {
			// Dependencies are at the top (before the component class)
			const dependencies = lines.slice(0, componentStartIndex).join("\n");
			const componentCode = lines.slice(componentStartIndex).join("\n");
			let dependencies = lines.slice(0, componentStartIndex).join("\n");
			let componentCode = lines.slice(componentStartIndex).join("\n");

			// Create new content with component first, then dependencies
			// Replace 'var' with 'const' in dependencies to prevent hoisting issues
			// This ensures variables are not hoisted as undefined when code is reorganized
			dependencies = dependencies.replace(/\bvar\s+/g, "const ");

			// Find and extract the customElements.define() call
			const defineRegex = /customElements\.define\([^)]+\);?\n?/;
			const defineMatch = componentCode.match(defineRegex);
			let defineCall = "";

			if (defineMatch) {
				defineCall = defineMatch[0];
				// Remove the define call from component code
				componentCode = componentCode.replace(defineRegex, "");
			}

			// Create new content wrapped in IIFE to avoid global namespace pollution
			const newContent = `// User-editable ${componentName} component
// @noble/hashes are bundled at the bottom of this file

(function() {
// ==========================================
// COMPONENT CODE
// ==========================================

${componentCode}

// ==========================================
// BUNDLED DEPENDENCIES BELOW
// ==========================================

${dependencies}`;
${dependencies}

// Register custom element after dependencies are loaded
${defineCall}
})();`;

			await writeFile(
				`dist/components/${componentName}.js`,

scripts/build-site.ts +4 −0

		`<script src="components/contract-call.js"></script>`,
	)
	.replace(
		`<script src="../src/components/contract-read.js"></script>`,
		`<script src="components/contract-read.js"></script>`,
	)
	.replace(
		`<link rel="stylesheet" href="tailwindcss" />`,
		`<link rel="stylesheet" href="output.css" />`,
	);

68	68
69	69		if (componentStartIndex > 0) {
70	70		// Dependencies are at the top (before the component class)
71		-	const dependencies = lines.slice(0, componentStartIndex).join("\n");
72		-	const componentCode = lines.slice(componentStartIndex).join("\n");
	71	+	let dependencies = lines.slice(0, componentStartIndex).join("\n");
	72	+	let componentCode = lines.slice(componentStartIndex).join("\n");
73	73
74		-	// Create new content with component first, then dependencies
	74	+	// Replace 'var' with 'const' in dependencies to prevent hoisting issues
	75	+	// This ensures variables are not hoisted as undefined when code is reorganized
	76	+	dependencies = dependencies.replace(/\bvar\s+/g, "const ");
	77	+
	78	+	// Find and extract the customElements.define() call
	79	+	const defineRegex = /customElements\.define\([^)]+\);?\n?/;
	80	+	const defineMatch = componentCode.match(defineRegex);
	81	+	let defineCall = "";
	82	+
	83	+	if (defineMatch) {
	84	+	defineCall = defineMatch[0];
	85	+	// Remove the define call from component code
	86	+	componentCode = componentCode.replace(defineRegex, "");
	87	+	}
	88	+
	89	+	// Create new content wrapped in IIFE to avoid global namespace pollution
75	90		const newContent = `// User-editable ${componentName} component
76	91		// @noble/hashes are bundled at the bottom of this file
77	92
	93	+	(function() {
	94	+	// ==========================================
	95	+	// COMPONENT CODE
	96	+	// ==========================================
	97	+
78	98		${componentCode}
79	99
80	100		// ==========================================
81	101		// BUNDLED DEPENDENCIES BELOW
82	102		// ==========================================
83	103
84		-	${dependencies}`;
	104	+	${dependencies}
	105	+
	106	+	// Register custom element after dependencies are loaded
	107	+	${defineCall}
	108	+	})();`;
85	109
86	110		await writeFile(
87	111		`dist/components/${componentName}.js`,

16	16		"build:components": "bun scripts/build-components.ts",
17	17		"build:types": "bun scripts/build-types.ts",
18	18		"build:site": "bun scripts/build-site",
19		-	"dev": "bun site/index.html --console"
	19	+	"dev": "bun site/index.html --console",
	20	+	"preview": "bun site-dist/index.html --console"
20	21		},
21	22		"keywords": [
22	23		"web-components",

24	24		`<script src="components/contract-call.js"></script>`,
25	25		)
26	26		.replace(
	27	+	`<script src="../src/components/contract-read.js"></script>`,
	28	+	`<script src="components/contract-read.js"></script>`,
	29	+	)
	30	+	.replace(
27	31		`<link rel="stylesheet" href="tailwindcss" />`,
28	32		`<link rel="stylesheet" href="output.css" />`,
29	33		);