Skip to content

Commit c064fc1

Browse files
d3xter666d3xter666
committed
refactor: Export diagrams to SVG
1 parent faf4894 commit c064fc1

File tree

7 files changed

+199
-206
lines changed

7 files changed

+199
-206
lines changed

‎rfcs/0020-npm-package-integration.md‎

Lines changed: 3 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -160,44 +160,7 @@ The community package `ui5-tooling-modules` provides battle-tested patterns that
160160

161161
Rather than implementing a separate scanning phase, NPM dependency detection is integrated directly into the existing `JSModuleAnalyzer` visitor pattern. This piggybacks on the AST traversal that already occurs for UI5 dependency analysis:
162162

163-
```mermaid
164-
graph TD
165-
A[UI5 Source Files] --> B[espree.parse]
166-
B --> C{File type?}
167-
C -->|JS/TS| D[JSModuleAnalyzer.visit]
168-
C -->|XML| E[XMLTemplateAnalyzer]
169-
170-
D --> F[Detect thirdparty/* in AMD deps]
171-
D --> G[Detect thirdparty/* in ESM imports]
172-
E --> H[Detect xmlns:thirdparty.*]
173-
174-
F --> I[ResourceCollector.getNpmPackages]
175-
G --> I
176-
H --> I
177-
178-
I --> J[Validate against package.json]
179-
J --> K{Found in dependencies?}
180-
K -->|Yes| L[Queue for bundling]
181-
K -->|devDependencies only| M[⚠️ Warn: move to dependencies]
182-
K -->|Not found| N[❌ Error: package not declared]
183-
184-
L --> O[Rollup Resolution]
185-
O --> P{Resolution Priority Cascade}
186-
P --> Q[1. exports field]
187-
Q --> R[2. browser field]
188-
R --> S[3. module field]
189-
S --> T[4. main field]
190-
T --> U[5. index.js]
191-
192-
U --> V[Entry point resolved]
193-
194-
style A fill:#e7f3ff,stroke:#004085
195-
style I fill:#fff3cd,stroke:#856404
196-
style K fill:#fff3cd,stroke:#856404
197-
style M fill:#fff3cd,stroke:#ffc107
198-
style N fill:#f8d7da,stroke:#721c24
199-
style V fill:#d4edda,stroke:#155724
200-
```
163+
![Dependency Scanning Activity Diagram](./resources/0020-npm-integration/dependency-scanning-activity.svg)
201164

202165
* **Key insight**: Leverages existing espree AST parsing that already occurs for UI5 dependency analysis, requiring only pattern detection extensions to existing visitor logic.*
203166

@@ -258,22 +221,7 @@ A critical design principle: the scanner only extracts **top-level NPM package n
258221

259222
Rollup's default behavior is to discover and inline ALL dependencies into a single output bundle. The RFC uses two mechanisms to control this:
260223

261-
```mermaid
262-
graph TD
263-
A["Entry: 'react-dom'"] --> B[Rollup processes imports]
264-
B --> C{Is an external package?}
265-
C -->|YES| D[Preserve as AMD dependency]
266-
C -->|NO| E[Inline into bundle]
267-
D --> F[Apply paths mapping]
268-
E --> G[Resolve + tree-shake]
269-
F --> H["Output: sap.ui.define(['thirdparty/react'], ...)"]
270-
G --> H
271-
272-
style C fill:#fff3cd,stroke:#856404
273-
style D fill:#d4edda,stroke:#155724
274-
style E fill:#d4edda,stroke:#155724
275-
style H fill:#e7f3ff,stroke:#004085
276-
```
224+
![Rollup Bundling Behavior Diagram](./resources/0020-npm-integration/rollup-external-decision-activity.svg)
277225

278226

279227
#### 3.5.2 Plugin Chain
@@ -345,32 +293,7 @@ import { A } from 'pkg';
345293

346294
The NPM bundling task integrates into the existing build pipeline as a standard task:
347295

348-
```mermaid
349-
sequenceDiagram
350-
participant Build as ui5 build
351-
participant Bundle as generateBundle
352-
participant NPM as bundleNpmPackages (NEW)
353-
participant Preload as generateComponentPreload
354-
355-
Build->>Bundle: Execute existing bundle task
356-
Bundle->>NPM: After bundle generation
357-
358-
Note over NPM: 1. Collect NPM packages<br/>from ResourceCollector
359-
Note over NPM: 2. Read package.json
360-
Note over NPM: 3. Topological sort
361-
362-
loop For each package
363-
Note over NPM: Create Rollup config<br/>(entry, externals, paths)
364-
Note over NPM: Execute Rollup<br/>(tree-shaken AMD bundle)
365-
Note over NPM: Write to workspace<br/>(resources/thirdparty/*.js)
366-
end
367-
368-
Note over NPM: 5. Rewrite source paths<br/>(if addToNamespace: true)
369-
370-
NPM->>Preload: Before component preload
371-
Note over Preload: Includes thirdparty/ files
372-
Preload->>Build: Continue remaining tasks
373-
```
296+
![NPM Build Task Diagram](./resources/0020-npm-integration/build-task-sequence.svg)
374297

375298
**Why after `generateBundle`?** The scanner needs all source resources to be resolved and available. **Why before `generateComponentPreload`?** The generated NPM bundles must be included in the Component-preload.js for production deployment.
376299

‎rfcs/resources/0020-npm-integration/build-task-sequence.drawio‎

Lines changed: 72 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
<mxfile host="65bd71144e">
22
<diagram name="Build Task Sequence" id="build-task-sequence">
3-
<mxGraphModel dx="1100" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="1654" math="0" shadow="0">
3+
<mxGraphModel dx="1400" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="1654" math="0" shadow="0">
44
<root>
55
<mxCell id="0"/>
66
<mxCell id="1" parent="0"/>
7-
8-
<mxCell id="10" value="TAM Sequence Diagram: Build Task Integration Flow" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=14;fontStyle=1;" parent="1" vertex="1">
9-
<mxGeometry x="180" y="20" width="800" height="30" as="geometry"/>
10-
</mxCell>
11-
127
<mxCell id="11" value="ui5 build" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;strokeWidth=1.5;" parent="1" vertex="1">
138
<mxGeometry x="80" y="80" width="180" height="40" as="geometry"/>
149
</mxCell>
@@ -21,88 +16,119 @@
2116
<mxCell id="14" value="generateComponentPreload" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;strokeWidth=1.5;" parent="1" vertex="1">
2217
<mxGeometry x="840" y="80" width="220" height="40" as="geometry"/>
2318
</mxCell>
24-
2519
<mxCell id="20" value="" style="endArrow=none;dashed=1;strokeWidth=1.5;strokeColor=#000000;" parent="1" source="11" target="21" edge="1">
2620
<mxGeometry relative="1" as="geometry"/>
2721
</mxCell>
2822
<mxCell id="21" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=none;" parent="1" vertex="1">
2923
<mxGeometry x="170" y="760" width="1" height="1" as="geometry"/>
3024
</mxCell>
31-
3225
<mxCell id="22" value="" style="endArrow=none;dashed=1;strokeWidth=1.5;strokeColor=#000000;" parent="1" source="12" target="23" edge="1">
3326
<mxGeometry relative="1" as="geometry"/>
3427
</mxCell>
3528
<mxCell id="23" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=none;" parent="1" vertex="1">
3629
<mxGeometry x="410" y="760" width="1" height="1" as="geometry"/>
3730
</mxCell>
38-
39-
<mxCell id="24" value="" style="endArrow=none;dashed=1;strokeWidth=1.5;strokeColor=#000000;" parent="1" source="13" target="25" edge="1">
31+
<mxCell id="24" value="" style="endArrow=none;dashed=1;strokeWidth=1.5;strokeColor=#000000;" parent="1" source="46" target="25" edge="1">
4032
<mxGeometry relative="1" as="geometry"/>
4133
</mxCell>
4234
<mxCell id="25" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=none;" parent="1" vertex="1">
4335
<mxGeometry x="670" y="760" width="1" height="1" as="geometry"/>
4436
</mxCell>
45-
4637
<mxCell id="26" value="" style="endArrow=none;dashed=1;strokeWidth=1.5;strokeColor=#000000;" parent="1" source="14" target="27" edge="1">
4738
<mxGeometry relative="1" as="geometry"/>
4839
</mxCell>
4940
<mxCell id="27" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=none;" parent="1" vertex="1">
5041
<mxGeometry x="950" y="760" width="1" height="1" as="geometry"/>
5142
</mxCell>
52-
53-
<mxCell id="30" value="Execute existing bundle task" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;endFill=1;strokeColor=#000000;align=center;verticalAlign=bottom;" parent="1" source="11" target="12" edge="1">
43+
<mxCell id="30" value="Execute existing bundle task" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;endFill=1;strokeColor=#000000;align=center;verticalAlign=bottom;" parent="1" edge="1">
5444
<mxGeometry relative="1" as="geometry">
55-
<mxPoint x="290" y="170" as="targetPoint"/>
45+
<mxPoint x="410" y="150" as="targetPoint"/>
46+
<mxPoint x="170" y="150" as="sourcePoint"/>
47+
<Array as="points">
48+
<mxPoint x="170" y="150"/>
49+
<mxPoint x="410" y="150"/>
50+
</Array>
5651
</mxGeometry>
5752
</mxCell>
58-
59-
<mxCell id="31" value="After bundle generation" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;endFill=1;strokeColor=#000000;align=center;verticalAlign=bottom;" parent="1" source="12" target="13" edge="1">
53+
<mxCell id="31" value="After bundle generation" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;endFill=1;strokeColor=#000000;align=center;verticalAlign=bottom;" parent="1" edge="1">
6054
<mxGeometry relative="1" as="geometry">
61-
<mxPoint x="530" y="220" as="targetPoint"/>
55+
<mxPoint x="670" y="180" as="targetPoint"/>
56+
<mxPoint x="410" y="180" as="sourcePoint"/>
57+
<Array as="points">
58+
<mxPoint x="410" y="180"/>
59+
<mxPoint x="670" y="180"/>
60+
</Array>
6261
</mxGeometry>
6362
</mxCell>
64-
65-
<mxCell id="32" value="1) Collect NPM packages from ResourceCollector" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
66-
<mxGeometry x="530" y="255" width="280" height="42" as="geometry"/>
63+
<mxCell id="32" value="Collect NPM packages from ResourceCollector" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
64+
<mxGeometry x="530" y="220" width="280" height="42" as="geometry"/>
65+
</mxCell>
66+
<mxCell id="33" value="Read package.json" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
67+
<mxGeometry x="560" y="275" width="220" height="36" as="geometry"/>
68+
</mxCell>
69+
<mxCell id="34" value="Topological sort" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
70+
<mxGeometry x="570" y="330" width="200" height="36" as="geometry"/>
6771
</mxCell>
68-
<mxCell id="33" value="2) Read package.json" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
69-
<mxGeometry x="530" y="305" width="220" height="36" as="geometry"/>
72+
<mxCell id="39" value="5) Rewrite source paths (if addToNamespace: true)" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
73+
<mxGeometry x="520" y="575" width="320" height="42" as="geometry"/>
7074
</mxCell>
71-
<mxCell id="34" value="3) Topological sort" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
72-
<mxGeometry x="530" y="349" width="200" height="36" as="geometry"/>
75+
<mxCell id="40" value="Before component preload" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;endFill=1;strokeColor=#000000;align=center;verticalAlign=bottom;" parent="1" edge="1">
76+
<mxGeometry relative="1" as="geometry">
77+
<mxPoint x="950" y="660" as="targetPoint"/>
78+
<mxPoint x="670" y="660" as="sourcePoint"/>
79+
<Array as="points">
80+
<mxPoint x="670" y="660"/>
81+
<mxPoint x="950" y="660"/>
82+
</Array>
83+
</mxGeometry>
7384
</mxCell>
74-
75-
<mxCell id="35" value="loop: For each package" style="swimlane;html=1;rounded=0;fillColor=none;strokeColor=#000000;" parent="1" vertex="1">
76-
<mxGeometry x="500" y="405" width="340" height="175" as="geometry"/>
85+
<mxCell id="41" value="Includes thirdparty/ files" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
86+
<mxGeometry x="845.5" y="680" width="210" height="36" as="geometry"/>
87+
</mxCell>
88+
<mxCell id="42" value="Continue remaining tasks" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;endFill=1;strokeColor=#000000;align=center;verticalAlign=bottom;" parent="1" edge="1">
89+
<mxGeometry x="0.1034" y="-10" relative="1" as="geometry">
90+
<mxPoint x="950" y="741" as="sourcePoint"/>
91+
<mxPoint x="170" y="740.9803682215073" as="targetPoint"/>
92+
<Array as="points">
93+
<mxPoint x="950" y="740"/>
94+
<mxPoint x="170" y="740"/>
95+
</Array>
96+
<mxPoint as="offset"/>
97+
</mxGeometry>
7798
</mxCell>
78-
<mxCell id="36" value="Create Rollup config (entry, externals, paths)" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="35" vertex="1">
79-
<mxGeometry x="20" y="35" width="300" height="38" as="geometry"/>
99+
<mxCell id="36" value="Create Rollup config (entry, externals, paths)" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
100+
<mxGeometry x="520.5" y="400" width="300" height="38" as="geometry"/>
80101
</mxCell>
81-
<mxCell id="37" value="Execute Rollup (tree-shaken AMD bundle)" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="35" vertex="1">
82-
<mxGeometry x="20" y="83" width="300" height="38" as="geometry"/>
102+
<mxCell id="37" value="Execute Rollup (tree-shaken AMD bundle)" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
103+
<mxGeometry x="520.5" y="448" width="300" height="38" as="geometry"/>
83104
</mxCell>
84-
<mxCell id="38" value="Write to workspace (resources/thirdparty/*.js)" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="35" vertex="1">
85-
<mxGeometry x="20" y="131" width="300" height="36" as="geometry"/>
105+
<mxCell id="38" value="Write to workspace (resources/thirdparty/*.js)" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
106+
<mxGeometry x="520.5" y="496" width="300" height="36" as="geometry"/>
86107
</mxCell>
87-
88-
<mxCell id="39" value="5) Rewrite source paths (if addToNamespace: true)" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
89-
<mxGeometry x="520" y="605" width="320" height="42" as="geometry"/>
108+
<mxCell id="44" value="For each package/entry" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;endFill=1;strokeColor=#000000;align=center;verticalAlign=bottom;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" edge="1" target="46" source="48">
109+
<mxGeometry x="-0.0509" relative="1" as="geometry">
110+
<mxPoint x="670" y="390" as="targetPoint"/>
111+
<mxPoint x="671" y="540" as="sourcePoint"/>
112+
<Array as="points">
113+
<mxPoint x="890" y="545"/>
114+
<mxPoint x="890" y="385"/>
115+
</Array>
116+
<mxPoint as="offset"/>
117+
</mxGeometry>
90118
</mxCell>
91-
92-
<mxCell id="40" value="Before component preload" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;endFill=1;strokeColor=#000000;align=center;verticalAlign=bottom;" parent="1" source="13" target="14" edge="1">
119+
<mxCell id="47" value="" style="endArrow=none;dashed=1;strokeWidth=1.5;strokeColor=#000000;" edge="1" parent="1" source="13" target="46">
93120
<mxGeometry relative="1" as="geometry">
94-
<mxPoint x="820" y="690" as="targetPoint"/>
121+
<mxPoint x="670" y="120" as="sourcePoint"/>
122+
<mxPoint x="670" y="760" as="targetPoint"/>
95123
</mxGeometry>
96124
</mxCell>
97-
98-
<mxCell id="41" value="Includes thirdparty/ files" style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
99-
<mxGeometry x="845" y="705" width="210" height="36" as="geometry"/>
125+
<mxCell id="46" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#000000;strokeColor=#000000;" vertex="1" parent="1">
126+
<mxGeometry x="665.5" y="380" width="10" height="10" as="geometry"/>
100127
</mxCell>
101-
102-
<mxCell id="42" value="Continue remaining tasks" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;endFill=1;strokeColor=#000000;align=center;verticalAlign=bottom;" parent="1" source="14" target="11" edge="1">
103-
<mxGeometry relative="1" as="geometry"/>
128+
<mxCell id="48" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#000000;strokeColor=#000000;" vertex="1" parent="1">
129+
<mxGeometry x="665.5" y="540" width="10" height="10" as="geometry"/>
104130
</mxCell>
105131
</root>
106132
</mxGraphModel>
107133
</diagram>
108-
</mxfile>
134+
</mxfile>

‎rfcs/resources/0020-npm-integration/build-task-sequence.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)