63 lines
3.6 KiB
XML
63 lines
3.6 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="720" height="1040" viewBox="0 0 720 1040" role="img" aria-labelledby="title desc">
|
|
<title id="title">Нативный граф ES-модулей в браузере</title>
|
|
<desc id="desc">Вертикальная схема: HTML подключает app.js как модуль, app.js импортирует message.js, после готовности графа app.js обновляет output. Внизу перечислены четыре точки проверки.</desc>
|
|
<defs>
|
|
<linearGradient id="surface" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#10243c"/>
|
|
<stop offset="1" stop-color="#07111e"/>
|
|
</linearGradient>
|
|
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#66a9ff"/>
|
|
</marker>
|
|
<style>
|
|
.kicker { font: 700 16px Arial, sans-serif; letter-spacing: 2px; fill: #7fe8cf; }
|
|
.heading { font: 700 36px Arial, sans-serif; fill: #f4f8ff; }
|
|
.label { font: 700 27px Arial, sans-serif; fill: #eef7ff; }
|
|
.code { font: 20px Menlo, Consolas, monospace; fill: #c9ddff; }
|
|
.small { font: 20px Arial, sans-serif; fill: #d2e0f1; }
|
|
.step { font: 700 17px Arial, sans-serif; fill: #06111f; }
|
|
</style>
|
|
</defs>
|
|
<rect width="720" height="1040" fill="url(#surface)"/>
|
|
<text x="44" y="58" class="kicker">ES MODULES · 2019</text>
|
|
<text x="44" y="106" class="heading">Нативный запуск: граф модулей</text>
|
|
|
|
<rect x="44" y="146" width="632" height="132" rx="18" fill="#183451" stroke="#4b7198" stroke-width="2"/>
|
|
<circle cx="632" cy="180" r="20" fill="#49d4b2"/>
|
|
<text x="626" y="186" class="step">1</text>
|
|
<text x="76" y="190" class="label">index.html</text>
|
|
<text x="76" y="226" class="code"><script type="module"</text>
|
|
<text x="76" y="252" class="code">src="./assets/app.js"></text>
|
|
|
|
<path d="M360 278 V334" stroke="#66a9ff" stroke-width="5" marker-end="url(#arrow)"/>
|
|
<text x="388" y="315" class="small">entry URL</text>
|
|
|
|
<rect x="44" y="350" width="632" height="132" rx="18" fill="#1b3c59" stroke="#66a9ff" stroke-width="2"/>
|
|
<circle cx="632" cy="384" r="20" fill="#66a9ff"/>
|
|
<text x="626" y="390" class="step">2</text>
|
|
<text x="76" y="394" class="label">assets/app.js</text>
|
|
<text x="76" y="430" class="code">import { message }</text>
|
|
<text x="76" y="456" class="code">from "./message.js"</text>
|
|
|
|
<path d="M360 482 V538" stroke="#49d4b2" stroke-width="5" marker-end="url(#arrow)"/>
|
|
<text x="388" y="519" class="small">relative URL</text>
|
|
|
|
<rect x="44" y="554" width="632" height="132" rx="18" fill="#24405a" stroke="#49d4b2" stroke-width="2"/>
|
|
<circle cx="632" cy="588" r="20" fill="#7fe8cf"/>
|
|
<text x="626" y="594" class="step">3</text>
|
|
<text x="76" y="598" class="label">assets/message.js</text>
|
|
<text x="76" y="634" class="code">export function message() { ... }</text>
|
|
|
|
<path d="M360 686 V742" stroke="#7fe8cf" stroke-width="5" marker-end="url(#arrow)"/>
|
|
<text x="388" y="723" class="small">граф готов</text>
|
|
|
|
<rect x="44" y="758" width="632" height="94" rx="18" fill="#1d514e" stroke="#7fe8cf" stroke-width="2"/>
|
|
<text x="76" y="797" class="label">output#status</text>
|
|
<text x="76" y="828" class="code">модуль app.js получен</text>
|
|
|
|
<rect x="44" y="900" width="632" height="92" rx="16" fill="#0b1b2d" stroke="#345471"/>
|
|
<text x="76" y="938" class="small">Проверка: URL entry → URL import</text>
|
|
<text x="76" y="968" class="small">→ Content-Type / CORS → DOM-результат</text>
|
|
</svg>
|