a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(scripts): generate-component-svgs no longer skips bmp280 / fails on ssd1306 

Two distinct issues hit the component SVG generation step:

1. `velxio-bmp280` was in ELEMENTS but tries to require
   bmp280-element.js from the wokwi-elements CJS dist — that file
   doesn't exist because BMP280 is a velxio-native component, not a
   wokwi one. Its SVG already ships hand-authored at
   frontend/public/component-svgs/bmp280.svg, so the script should
   never have tried to extract it. Drop the row and leave a comment
   explaining why.

2. `wokwi-ssd1306` failed with "ImageData is not defined" because the
   element constructor seeds an off-screen canvas with
   `new ImageData(width, height)` — a browser API absent in Node.
   We never invoke putImageData (renderSVG() draws the static frame
   from scratch), so a minimal global stub that doesn't throw is all
   that's needed. Polyfill it on globalThis next to the existing
   customElements stub.

After this:
- 38 generated, 0 skipped, 0 failed (was: 1 skip, 1 fail).
- ssd1306.svg now ships in frontend/public/component-svgs/.
This commit is contained in:
David Montero Crespo 2026-05-09 00:05:28 -03:00
parent e812371c49
commit 20eabd8c4c
2 changed files with 74 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/public/component-svgs/ssd1306.svg Normal file
View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg">
<rect stroke="#BE9B72" fill="#025CAF" x=".5" y=".5" width="148" height="114" rx="13" />
<g transform="translate(6 6)" fill="#59340A" stroke="#BE9B72" stroke-width="0.6px">
<circle cx="130" cy="6" r="5.5" />
<circle cx="6" cy="6" r="5.5" />
<circle cx="130" cy="96" r="5.5" />
<circle cx="6" cy="96" r="5.5" />
</g>
<!-- 128 x 64 screen -->
<rect x="11.4" y="26" fill="#1A1A1A" width="128" height="64" />
<!-- All texts -->
<text
fill="#FFF"
text-anchor="middle"
font-size="5"
font-weight="300"
font-family="monospace"
>
<tspan x="37" y="8">Data</tspan>
<tspan x="56" y="8">SA0</tspan>
<tspan x="78" y="8">CS</tspan>
<tspan x="97" y="8">Vin</tspan>
<tspan x="41" y="23">C1k</tspan>
<tspan x="53" y="23">DC</tspan>
<tspan x="64" y="23">Rst</tspan>
<tspan x="80" y="23">3v3</tspan>
<tspan x="99" y="23">Gnd</tspan>
</text>
<!-- Star -->
<path
fill="#FFF"
d="M115.5 10.06l-1.59 2.974-3.453.464 2.495 2.245-.6 3.229 3.148-1.528 3.148 1.528-.6-3.23 2.495-2.244-3.453-.464-1.59-2.974z"
stroke="#FFF"
/>
<!-- PINS -->
<g transform="translate(33 9)" fill="#9D9D9A" stroke-width="0.4">
<circle stroke="#262626" cx="70.5" cy="3.5" r="3.5" />
<circle stroke="#007ADB" cx="60.5" cy="3.5" r="3.5" />
<circle stroke="#9D5B96" cx="50.5" cy="3.5" r="3.5" />
<circle stroke="#009E9B" cx="41.5" cy="3.5" r="3.5" />
<circle stroke="#E8D977" cx="31.5" cy="3.5" r="3.5" />
<circle stroke="#C08540" cx="21.5" cy="3.5" r="3.5" />
<circle stroke="#B4AEAB" cx="12.5" cy="3.5" r="3.5" />
<circle stroke="#E7DBDB" cx="3.5" cy="3.5" r="3.5" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

23
scripts/generate-component-svgs.cjs
View File

@ -118,6 +118,26 @@ if (typeof globalThis.customElements === 'undefined') {
globalThis.customElements = { define: () => {} };
}
// Stub `ImageData` — used by ssd1306-element's constructor to seed the
// off-screen canvas. We never invoke `putImageData` (the script only calls
// renderSVG()), so a minimal shape that doesn't throw is enough.
if (typeof globalThis.ImageData === 'undefined') {
globalThis.ImageData = class ImageData {
constructor(widthOrData, height, settings) {
if (typeof widthOrData === 'number') {
this.width = widthOrData;
this.height = height;
this.data = new Uint8ClampedArray(widthOrData * height * 4);
} else {
this.data = widthOrData;
this.width = height;
this.height = settings;
}
this.colorSpace = 'srgb';
}
};
}
// ── Elements to extract ───────────────────────────────────────────────────────
// [ tagName, elementFile, defaultProps, useRenderSVG ]
const ELEMENTS = [
@ -133,7 +153,8 @@ const ELEMENTS = [
['wokwi-dht22', 'dht22-element', {}, false ],
['wokwi-hc-sr04', 'hc-sr04-element', {}, false ],
['wokwi-mpu6050', 'mpu6050-element', {}, false ],
['velxio-bmp280', 'bmp280-element', {}, false ],
// velxio-bmp280 is a velxio-native component — its SVG ships hand-authored
// at frontend/public/component-svgs/bmp280.svg, so no extraction is needed.
['wokwi-lcd2004', 'lcd2004-element', {}, false ],
['wokwi-ssd1306', 'ssd1306-element', { width: 128, height: 64 }, false ],
['wokwi-ili9341', 'ili9341-element', {}, false ],