Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Resolve cross-origin asset URLs through a base-URL helper
Assets in a library served from another origin must go through a getAssetUrl helper, or they load from the wrong domain and 404.
Bad example
| 1 | import spriteUrl from '../svg/sprite.svg?no-inline'; |
| 2 |
|
| 3 | export function Icon({ id }: { id: string }) { |
| 4 | // spriteUrl is '/static/sprite.svg' — relative to whatever page loads |
| 5 | // the bundle, so on consumer.example.com it 404s instead of hitting |
| 6 | // the component library's CDN origin. |
| 7 | return <svg><use href={`${spriteUrl}#${id}`} /></svg>; |
| 8 | } |
Explanation (EN)
A bundler asset import only produces a path; the browser resolves it against the host page's origin, so a library deployed to a separate CDN ends up requesting the asset from the consumer's domain and fails.
Objašnjenje (HR)
Uvoz asseta preko bundlera daje samo putanju; preglednik je razrješava prema originu stranice koja ga učitava, pa biblioteka deployana na zaseban CDN traži asset s domene potrošača i ne uspijeva.
Good example
| 1 | import spriteUrl from '../svg/sprite.svg?no-inline'; |
| 2 | import { getAssetUrl } from '../utils/getAssetUrl'; |
| 3 |
|
| 4 | export function Icon({ id }: { id: string }) { |
| 5 | // getAssetUrl prepends the library's deploy base URL, so the asset |
| 6 | // always loads from the component CDN regardless of host page. |
| 7 | return <svg><use href={`${getAssetUrl(spriteUrl)}#${id}`} /></svg>; |
| 8 | } |
Explanation (EN)
Routing the asset path through a base-URL helper guarantees it resolves against the library's own origin, so it loads correctly no matter which app embeds the component.
Objašnjenje (HR)
Provlačenjem putanje asseta kroz helper za base URL zajamčeno je da se razrješava prema vlastitom originu biblioteke, pa se ispravno učitava bez obzira na to koja je aplikacija ugradila komponentu.
Notes (EN)
Easy to forget per asset; consider a lint rule or wrapper so every `.svg`/image import is guaranteed to pass through the helper.
Bilješke (HR)
Lako je zaboraviti za svaki asset; razmisli o lint pravilu ili wrapperu da svaki uvoz `.svg`/slike sigurno prođe kroz helper.
Exceptions / Tradeoffs (EN)
Not needed when the library is served from the same origin as the consuming app.
Iznimke / Tradeoffi (HR)
Nije potrebno kad se biblioteka poslužuje s istog origina kao aplikacija koja je koristi.