cbs-block 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/cbs-block.js +64 -0
- package/package.json +2 -2
- package/preview_web.html +50 -0
package/bin/cbs-block.js
CHANGED
|
@@ -307,6 +307,69 @@ async function main() {
|
|
|
307
307
|
fs.writeFileSync(path.join(docsDir, 'index.html'), html);
|
|
308
308
|
console.log(chalk.green(`\n✔ Site generated at docs/index.html`));
|
|
309
309
|
|
|
310
|
+
} else if (command === 'web' && target) {
|
|
311
|
+
if (!fs.existsSync(target)) return console.error(chalk.red(`Error: File ${target} not found.`));
|
|
312
|
+
const block = JSON.parse(fs.readFileSync(target, 'utf8'));
|
|
313
|
+
console.log(chalk.cyan(`Launching Web Preview for: ${block.name}...`));
|
|
314
|
+
|
|
315
|
+
const previewHtml = `<!DOCTYPE html>
|
|
316
|
+
<html>
|
|
317
|
+
<head>
|
|
318
|
+
<title>CBS Block Preview - ${block.name}</title>
|
|
319
|
+
<style>
|
|
320
|
+
body { background: #0f0f12; color: #eee; font-family: 'Segoe UI', system-ui; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
|
|
321
|
+
.block-preview {
|
|
322
|
+
background: linear-gradient(135deg, ${block.color || '#4CAF50'}, ${block.color ? block.color + 'CC' : '#45a049'});
|
|
323
|
+
padding: 20px; border-radius: 12px; min-width: 200px;
|
|
324
|
+
box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
|
|
325
|
+
position: relative;
|
|
326
|
+
}
|
|
327
|
+
.header { font-weight: bold; margin-bottom: 20px; font-size: 1.1em; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 5px; }
|
|
328
|
+
.port { width: 12px; height: 12px; background: #fff; border-radius: 50%; position: absolute; }
|
|
329
|
+
.port-flow { width: 16px; border-radius: 2px; }
|
|
330
|
+
.controls { margin-top: 40px; background: #1a1a20; padding: 20px; border-radius: 8px; border: 1px solid #333; }
|
|
331
|
+
button { background: #007acc; color: white; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }
|
|
332
|
+
button:hover { background: #0062a3; }
|
|
333
|
+
pre { background: #000; padding: 10px; border-radius: 4px; color: #4CAF50; font-size: 0.9em; }
|
|
334
|
+
</style>
|
|
335
|
+
</head>
|
|
336
|
+
<body>
|
|
337
|
+
<h1>CodeBlock Studio Simulator</h1>
|
|
338
|
+
<div class="block-preview">
|
|
339
|
+
<div class="header">${block.name}</div>
|
|
340
|
+
<div style="font-size: 0.8em; opacity: 0.7;">Category: ${block.category}</div>
|
|
341
|
+
<div style="margin-top: 20px;">
|
|
342
|
+
${block.ports.map(p => `<div style="font-size: 0.8em; margin: 5px 0;">● ${p.name} (${p.type})</div>`).join('')}
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
<div class="controls">
|
|
346
|
+
<h3>Logic Test</h3>
|
|
347
|
+
<button onclick="runTest()">Run Logic</button>
|
|
348
|
+
<p>Results:</p>
|
|
349
|
+
<pre id="output">Ready...</pre>
|
|
350
|
+
</div>
|
|
351
|
+
<script>
|
|
352
|
+
const logic = \`${block.logic.replace(/`/g, '\\`').replace(/\$/g, '\\$')}\`;
|
|
353
|
+
function runTest() {
|
|
354
|
+
try {
|
|
355
|
+
const runFunc = new Function('inputs', logic + '\\nreturn run(inputs);');
|
|
356
|
+
const result = runFunc({ input1: "Web Test Value" });
|
|
357
|
+
document.getElementById('output').textContent = "Output: " + JSON.stringify(result, null, 2);
|
|
358
|
+
} catch (e) {
|
|
359
|
+
document.getElementById('output').textContent = "Error: " + e.message;
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
</script>
|
|
363
|
+
</body>
|
|
364
|
+
</html>`;
|
|
365
|
+
|
|
366
|
+
const outPath = path.join(process.cwd(), 'preview_web.html');
|
|
367
|
+
fs.writeFileSync(outPath, previewHtml);
|
|
368
|
+
console.log(chalk.green(`✔ Preview generated: ${outPath}`));
|
|
369
|
+
|
|
370
|
+
const start = process.platform === 'win32' ? 'start' : process.platform === 'darwin' ? 'open' : 'xdg-open';
|
|
371
|
+
exec(`${start} ${outPath}`);
|
|
372
|
+
|
|
310
373
|
} else if (command === 'version' && target === '--bump') {
|
|
311
374
|
const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
|
|
312
375
|
const [major, minor, patch] = pkg.version.split('.').map(Number);
|
|
@@ -331,6 +394,7 @@ async function main() {
|
|
|
331
394
|
console.log(` ${chalk.bold('doc <file>')} - Generate markdown documentation`);
|
|
332
395
|
console.log(` ${chalk.bold('link')} - Link blocks to main CodeBlock Studio app`);
|
|
333
396
|
console.log(` ${chalk.bold('lint')} - Validate block definitions`);
|
|
397
|
+
console.log(` ${chalk.bold('web <file>')} - Preview block in a high-fidelity web simulator`);
|
|
334
398
|
console.log(` ${chalk.bold('status')} - Show SDK & environment status`);
|
|
335
399
|
}
|
|
336
400
|
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cbs-block",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "SDK for creating CodeBlock Studio blocks",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"bin": {
|
|
7
|
-
"cbs-block": "
|
|
7
|
+
"cbs-block": "bin/cbs-block.js"
|
|
8
8
|
},
|
|
9
9
|
"scripts": {
|
|
10
10
|
"test": "echo \"Error: no test specified\" && exit 1"
|
package/preview_web.html
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>CBS Block Preview - MyBlock</title>
|
|
5
|
+
<style>
|
|
6
|
+
body { background: #0f0f12; color: #eee; font-family: 'Segoe UI', system-ui; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
|
|
7
|
+
.block-preview {
|
|
8
|
+
background: linear-gradient(135deg, #4CAF50, #45a049);
|
|
9
|
+
padding: 20px; border-radius: 12px; min-width: 200px;
|
|
10
|
+
box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
|
|
11
|
+
position: relative;
|
|
12
|
+
}
|
|
13
|
+
.header { font-weight: bold; margin-bottom: 20px; font-size: 1.1em; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 5px; }
|
|
14
|
+
.port { width: 12px; height: 12px; background: #fff; border-radius: 50%; position: absolute; }
|
|
15
|
+
.port-flow { width: 16px; border-radius: 2px; }
|
|
16
|
+
.controls { margin-top: 40px; background: #1a1a20; padding: 20px; border-radius: 8px; border: 1px solid #333; }
|
|
17
|
+
button { background: #007acc; color: white; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }
|
|
18
|
+
button:hover { background: #0062a3; }
|
|
19
|
+
pre { background: #000; padding: 10px; border-radius: 4px; color: #4CAF50; font-size: 0.9em; }
|
|
20
|
+
</style>
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
|
+
<h1>CodeBlock Studio Simulator</h1>
|
|
24
|
+
<div class="block-preview">
|
|
25
|
+
<div class="header">MyBlock</div>
|
|
26
|
+
<div style="font-size: 0.8em; opacity: 0.7;">Category: Custom</div>
|
|
27
|
+
<div style="margin-top: 20px;">
|
|
28
|
+
<div style="font-size: 0.8em; margin: 5px 0;">● input1 (Input)</div><div style="font-size: 0.8em; margin: 5px 0;">● output1 (Output)</div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="controls">
|
|
32
|
+
<h3>Logic Test</h3>
|
|
33
|
+
<button onclick="runTest()">Run Logic</button>
|
|
34
|
+
<p>Results:</p>
|
|
35
|
+
<pre id="output">Ready...</pre>
|
|
36
|
+
</div>
|
|
37
|
+
<script>
|
|
38
|
+
const logic = `function run(inputs) { return inputs.input1; }`;
|
|
39
|
+
function runTest() {
|
|
40
|
+
try {
|
|
41
|
+
const runFunc = new Function('inputs', logic + '\nreturn run(inputs);');
|
|
42
|
+
const result = runFunc({ input1: "Web Test Value" });
|
|
43
|
+
document.getElementById('output').textContent = "Output: " + JSON.stringify(result, null, 2);
|
|
44
|
+
} catch (e) {
|
|
45
|
+
document.getElementById('output').textContent = "Error: " + e.message;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
</script>
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|