BBlock/dev-preview.html at master · SomeBottle/BBlock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html>

<head>
	<meta charset="utf-8" />
	<title>BBlock Demo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<style>
	body {
		background-color: rgb(199, 193, 193);
	}
</style>

<body style='margin:0 auto'>
	<bblock style="display:none;">
		{
		"src":"https://music.163.com/song/media/outer/url?id=3427646399",
		"cover":"https://p2.music.126.net/sgfPR4iYJLCh6P8nMB0gkw==/109951173847567945.jpg",
		"title":"め",
		"artist":"初星学園 / 虻瀬犬 / 篠澤 広",
		"loop":"false",
		"float":"left"
		}
	</bblock>
	<bblock style="display:none;">
		{
		"src":"https://sounds-static.xbottle.top/Sing%20My%20Pleasure%20-%20%E5%85%AB%E6%9C%A8%E6%B5%B7%E8%8E%89%20(320kbps).mp3",
		"title":"Sing My Pleasure",
		"cover":"https://p1.music.126.net/N5MGemr22IcT5GSHKhjDuA==/109951165870860904.jpg",
		"artist":"八木海莉"
		}
	</bblock>
	<bblock style="display:none;">
		{
		"src":"https://music.163.com/song/media/outer/url?id=3428531701",
		"cover":"https://p1.music.126.net/R6Gm6V1C_abBY3f_XbKIug==/109951173855089233.jpg",
		"title":"ED 记忆管理局2026",
		"artist":"StJimmyL / Ray1-睿壹 / 小欣Xier",
		"loop":"true",
		"float":"right"
		}
	</bblock>
	<bblock style="display:none;">
		{
		"src":"https://music.163.com/song/media/outer/url?id=22826401",
		"cover":"https://p1.music.126.net/ZRbWRuUaoGewNJLesPCCsA==/885106860383218.jpg",
		"title":"God knows...",
		"artist":"平野綾",
		"volume":50,
		"loop":"false",
		"float":"right"
		}
	</bblock>
	<div style='position:absolute;left:10px;bottom:10px;'>
		<p style='color: rgb(86, 86, 86);'>BBlock Preview</p>
		<iframe src="https://ghbtns.com/github-btn.html?user=SomeBottle&repo=BBlock&type=star&count=true&size=large"
			frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
	</div>
	<script>
		// 此处模拟 scripts/build.js 的功能，直接在浏览器中加载 bblock.js、bblock.css 和 bblock.html，并将 CSS 和 HTML 插入到 JS 中
		// 方便开发预览
		(async () => {
			function escapeTemplateLiteral(value) {
				return value
					.replace(/\\/g, '\\\\')
					.replace(/`/g, '\\`')
					.replace(/\$\{/g, '\\${');
			}

			const [js, css, html] = await Promise.all(
				['bblock.js', 'bblock.css', 'bblock.html'].map(async (file) => {
					const response = await fetch(`./src/${file}`, { cache: 'no-store' });
					if (!response.ok) {
						throw new Error(`Failed to load ${file}: HTTP ${response.status}`);
					}
					return response.text();
				})
			);

			const assets = {
				css: escapeTemplateLiteral(css),
				html: escapeTemplateLiteral(html)
			};
			const source = js.replace(/\{\{(CSS|HTML)\}\}/gi, (_, name) => assets[name.toLowerCase()]);

			const style = document.createElement('style');
			style.className = 'bblock-css';
			style.textContent = css;
			document.head.appendChild(style);

			const script = document.createElement('script');
			script.textContent = source + '\n//# sourceURL=bblock.preview.js';
			document.body.appendChild(script);
		})().catch((error) => {
			console.error('BBlock preview failed:', error);
		});
	</script>
</body>

</html>