Kom igång

Alternativ 2: Använd i MVC/MPA via

`

$3

Kör samma script i din pipeline:

`yaml
steps:
- script: npm ci
- script: npm run ui:install
`

Behöver du en annan webbrotsökväg (t.ex. om din wwwroot ligger någon annanstans) kan du ange flaggan:

`yaml
- script: npm run ui:install --ui_wwwroot=../wwwroot
`

---

Alternativ 3: Bundlad version (IIFE) för äldre miljöer

Om ESM inte stöds kan du använda den bundlade test‑varianten från paketroten.
Flytta följande två filer från node_modules/scb-wc-test och använd dem i applikationen:

`text
node_modules/scb-wc-test/scb-wc-test.bundle.js
node_modules/scb-wc-test/scb-wc-test.css
`

`html



`

> Obs: Blanda inte MVC‑ESM och IIFE på samma sida.

---

Alternativ 4: Blazor (Server och WebAssembly)

SCB Web Components fungerar även i Blazor‑appar när du vill använda samma komponenter i både MVC/MPA och Blazor.

Grundprincipen är samma som för scb-wc:

1. Använd MVC‑ESM‑builden (node_modules/scb-wc-test/mvc) och kopiera den till wwwroot/ui med ui:install.
2. Ladda scb-blazor-bridge.js från wwwroot/ui i din Blazor‑layout.
3. Lägg till (eller återanvänd) ScbBlazorInteropBase i din lösning.

$3

Lägg till ett script som kopierar interop-filen från node_modules till ditt projekt (till exempel mappen ScbBlazor). Utöver ui:install-scriptet från MVC-exemplet ovan. Så att det till exempel blir så här i din package.json:

`jsonc
{
"scripts": {
"ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc-test/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc-test?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
"ui:blazor:interop": "node -e \"const fs=require('fs'),p=require('path');const start=process.env.INIT_CWD||process.cwd();const candidates=['node_modules/scb-wc-test/blazor/ScbBlazorInteropBase.cs','node_modules/scb-wc/blazor/ScbBlazorInteropBase.cs'];const src=candidates.find(f=>fs.existsSync(f));if(!src){console.error('Hittar inte ScbBlazorInteropBase.cs i scb-wc-test eller scb-wc. Har du kört npm install scb-wc-test?');process.exit(1);}const dst=p.resolve(start,'ScbBlazor/ScbBlazorInteropBase.cs');fs.mkdirSync(p.dirname(dst),{recursive:true});fs.copyFileSync(src,dst);console.log('Kopierade '+src+' → '+dst);\""
}
}
`

Exempel på layout:

`html




`

ScbBlazorInteropBase är samma bas‑klass som används med prodpaketet. Du kan därför dela samma C#‑fil mellan projekt som använder scb-wc och scb-wc-test.

---

Viktigt

- scb-wc-test är ett testpaket. Komponenter kan ändras eller tas bort mellan versioner. Använd inte paketet i externa produktionsmiljöer.
- Kör kommandon i mappen med din package.json. Placeringen av package.json styr standardmål för ui:install (rot → wwwroot/ui, ClientApp/ → använd --ui_wwwroot=../wwwroot).
- Blanda inte MVC‑ESM och IIFE på samma sida. Välj en distributionsform per sida/app.
- Blazor: Se till att scb-blazor-bridge.js laddas efter att komponent‑JS:et finns på sidan, och att ScbBlazorInteropBase` inte dupliceras i flera namespaces i samma lösning.