@hexah/create-skin 0.1.1 → 0.1.4

package/README.md

@@ -13,22 +13,47 @@ npm install
 npm run dev        # rspack serve z HMR
 ```
 
-Następnie podłącz remote do hosta na teście (instrukcja w wygenerowanym `README.md` skórki):
-`localStorage["hexah.skinRemote"]` + motyw „SDK Remote (zdalna skórka)".
+## Podłączenie do test.kf2.pl
+
+Skórkę ładuje aplikacja działająca pod publicznym adresem (HTTPS), a przeglądarka nie pozwala
+takiej stronie pobrać zasobu z `localhost`. Wystaw więc dev server pod **publicznym URL przez
+tunel**:
+
+```bash
+npx cloudflared tunnel --url http://localhost:3001   # → https://<rand>.trycloudflare.com
+```
+
+`<rand>.trycloudflare.com` to adres, który cloudflared wypisze w terminalu — skopiuj go
+(zmienia się po każdym restarcie tunelu). Następnie otwórz `https://test.kf2.pl`, zaloguj się i
+**w konsoli przeglądarki (F12 → Console)** wklej:
+
+```js
+localStorage.setItem('hexah.skinRemoteAllowedOrigins', JSON.stringify(['https://<rand>.trycloudflare.com']))
+localStorage.setItem('hexah.skinRemote', JSON.stringify({
+  name: 'moja_skorka',                                  // = nazwa kontenera (uniqueName w rspack.config.js)
+  entry: 'https://<rand>.trycloudflare.com/remoteEntry.js',
+  template: 'sdkremote',
+  screens: { report: './ReportScreen' },
+  apiVersion: '0.2.0',
+}))
+```
+
+Odśwież stronę, w **Ustawieniach Gry** wybierz motyw **„SDK Remote (zdalna skórka)"** i wejdź na
+ekran zgłoszeń — zobaczysz swój `ReportScreen` na realnych danych. Po każdej zmianie w `src/`
+odśwież stronę (remote przebuduje się przez HMR).
 
 ## Co generuje
 
-Starter (`template/`) z placeholderami `__SKIN_NAME__` / `__SKIN_FEDERATION_NAME__`:
+Gotowy projekt skórki:
 
 - `rspack.config.js` — `ModuleFederationPlugin` wystawiający `./ReportScreen`, paczki
-  współdzielone z hostem (`import: false`), dev server na `:3001` z CORS.
-- `src/ReportScreen.jsx` — przykładowy ekran na `@hexah/skin-sdk`.
-- `package.json`, `.gitignore`, `README.md`.
+  współdzielone z hostem (`import: false`), dev server na `:3001` (CORS + `allowedHosts`).
+- `src/ReportScreen.jsx` — przykładowy ekran zbudowany na `@hexah/skin-sdk`.
+- `package.json`, `.gitignore`, `README.md` z instrukcją podłączenia do środowiska testowego.
 
-Nazwa kontenera MF jest sanityzowana z nazwy katalogu (`toFederationName` — identyfikator JS).
+Nazwa kontenera Module Federation jest automatycznie sanityzowana z nazwy katalogu do
+poprawnego identyfikatora.
 
-## Status
+## Licencja
 
-POC etapu C. Publikowany jako `@hexah/create-skin` (licencja MIT) przez ręczny workflow —
-patrz `docs/skin-sdk/publishing.md`. Przed publikacją działa tylko z repo
-(`node packages/create-hexah-skin/index.js <katalog>`). Pełne demo wymaga środowiska testowego.
+MIT.

package/index.js

@@ -36,18 +36,19 @@ function main(argv) {
   console.log("Dalej:");
   console.log(`  cd ${target}`);
   console.log("  npm install");
-  console.log("  npm run dev        # rspack serve z HMR (np. https://localhost:3001/remoteEntry.js)");
+  console.log("  npm run dev        # rspack serve z HMR (http://localhost:3001/remoteEntry.js)");
   console.log("");
   console.log("Podłączenie do hosta (środowisko testowe) — w konsoli przeglądarki:");
   console.log(
     `  localStorage.setItem('hexah.skinRemote', JSON.stringify({ name: '${federationName}',`,
   );
   console.log(
-    "    entry: 'https://localhost:3001/remoteEntry.js', template: 'sdkremote',",
+    "    entry: 'http://localhost:3001/remoteEntry.js', template: 'sdkremote',",
   );
   console.log("    screens: { report: './ReportScreen' }, apiVersion: '0.2.0' }))");
-  console.log("Dev server jedzie po HTTPS — wejdź raz na https://localhost:3001/remoteEntry.js");
-  console.log("i zaakceptuj samopodpisany cert (inaczej host na HTTPS zablokuje ładowanie).");
+  console.log("Zdeployowany test (https) wymaga publicznego URL — odpal tunel:");
+  console.log("  npx cloudflared tunnel --url http://localhost:3001   # → https://<rand>.trycloudflare.com");
+  console.log("i użyj tego URL w entry + hexah.skinRemoteAllowedOrigins. Patrz README.");
   console.log("Następnie w Ustawieniach Gry wybierz motyw „SDK Remote (zdalna skórka)\".");
   return 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexah/create-skin",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "Scaffolder skórki Hexah (zdalny kontener Module Federation, harness dev z HMR).",
   "bin": {
     "create-hexah-skin": "index.js"

package/template/README.md

@@ -1,37 +1,47 @@
 # __SKIN_NAME__
 
-Skórka Hexah zbudowana jako **zdalny kontener Module Federation**. Działa na realnej
-aplikacji Hexah (host) podpiętej do środowiska testowego — bez dostępu do kodu gry.
+Skórka Hexah zbudowana jako **zdalny kontener Module Federation**. Renderuje się w działającej
+aplikacji Hexah na środowisku testowym — budujesz ją wyłącznie na publicznym SDK
+`@hexah/skin-sdk`, bez dostępu do kodu gry.
 
 ## Start
 
 ```bash
 npm install
-npm run dev        # rspack serve z HMR → https://localhost:3001/remoteEntry.js
+npm run dev        # rspack serve z HMR → http://localhost:3001/remoteEntry.js
 ```
 
-## Podłączenie do hosta (środowisko testowe)
+## Podłączenie do środowiska testowego Hexah
 
-W konsoli przeglądarki na środowisku testowym Hexah:
+Skórkę ładuje aplikacja działająca pod publicznym adresem (HTTPS). Przeglądarka **nie pozwala**
+takiej stronie pobrać zasobu z `localhost` (Local/Private Network Access — `NS_BINDING_ABORTED`).
+Dlatego wystaw swój dev server pod **publicznym URL przez tunel**:
+
+```bash
+npm run dev                                          # http://localhost:3001
+npx cloudflared tunnel --url http://localhost:3001   # → https://<rand>.trycloudflare.com
+```
+
+`<rand>.trycloudflare.com` to adres, który cloudflared wypisze w terminalu — skopiuj go.
+Następnie w konsoli przeglądarki na środowisku testowym Hexah:
 
 ```js
+localStorage.setItem('hexah.skinRemoteAllowedOrigins', JSON.stringify(['https://<rand>.trycloudflare.com']))
 localStorage.setItem('hexah.skinRemote', JSON.stringify({
   name: '__SKIN_FEDERATION_NAME__',
-  entry: 'https://localhost:3001/remoteEntry.js',
+  entry: 'https://<rand>.trycloudflare.com/remoteEntry.js',
   template: 'sdkremote',
   screens: { report: './ReportScreen' },
   apiVersion: '0.2.0',
 }))
 ```
 
-> **Pierwsze uruchomienie:** dev server jedzie po **HTTPS** z samopodpisanym certem (host na
-> teście jest HTTPS — remote po HTTP byłby zablokowany jako mixed content / „dostęp do sieci
-> lokalnej"). Wejdź **raz** na <https://localhost:3001/remoteEntry.js> i zaakceptuj wyjątek
-> certyfikatu, dopiero potem odśwież `test.kf2.pl`.
-
 Odśwież, w **Ustawieniach Gry** wybierz motyw **„SDK Remote (zdalna skórka)"** i wejdź na ekran
-zgłoszeń — zobaczysz swój `ReportScreen` na realnych danych. Dzięki HMR zmiany w `src/` są
-widoczne po odświeżeniu (rebuild remote'a).
+zgłoszeń — zobaczysz swój `ReportScreen` na realnych danych. HMR pokazuje zmiany w `src/` po
+odświeżeniu (i ponownym pobraniu remote'a).
+
+> Adres tunelu zmienia się po każdym restarcie cloudflared — wklej wtedy nowy URL w oba wpisy
+> `localStorage`.
 
 ## Co możesz edytować
 
@@ -40,7 +50,8 @@ widoczne po odświeżeniu (rebuild remote'a).
 
 ## Zasady
 
-- Importuj tylko z `@hexah/skin-sdk` — to publiczny kontrakt (stałe, typy, hooki, UI).
-- Pakiety react/jotai/@mui/@emotion/@hexah/skin-sdk są współdzielone (`import: false`) —
-  nie pakujesz ich, bierzesz instancje hosta.
-- Host ładuje skórkę tylko z dozwolonych originów i przy zgodnym `apiVersion`.
+- Importuj **tylko** z `@hexah/skin-sdk` — to publiczny kontrakt (stałe, typy, hooki, UI).
+- Pakiety `react`/`jotai`/`@mui`/`@emotion`/`@hexah/skin-sdk` są współdzielone (`import: false`)
+  — nie pakujesz ich, dostajesz instancje z aplikacji-hosta.
+- `apiVersion` musi być zgodna z hostem (ten sam major, minor ≤ host) — inaczej host odmówi
+  załadowania.

package/template/rspack.config.js

@@ -52,14 +52,14 @@ module.exports = {
       },
     }),
   ],
-  // Dev server po HTTPS: host (np. https://test.kf2.pl) jest na HTTPS, więc remote po HTTP
-  // byłby zablokowany jako mixed content + „dostęp do sieci lokalnej" (NS_BINDING_ABORTED).
-  // HTTPS daje samopodpisany cert — wejdź raz na https://localhost:3001/remoteEntry.js i
-  // zaakceptuj wyjątek. Nagłówki: CORS (cross-origin load) + Private Network Access
-  // (Chrome wymaga przy żądaniu z publicznego hosta do localhost).
+  // Dev server po HTTP — najprostszy. Dwa działające tryby ładowania w hoście:
+  //  • tunel (cloudflared/ngrok) wystawia to publicznie po HTTPS → działa na zdeployowanym teście,
+  //  • lokalny host KF2 (http://localhost) ładuje remote po HTTP wprost.
+  // `allowedHosts: "all"` — tunel przekazuje nagłówek Host domeny publicznej; bez tego rspack
+  // odrzuca żądanie („Invalid Host header"). Nagłówki: CORS + Private Network Access.
   devServer: {
     port: 3001,
-    server: "https",
+    allowedHosts: "all",
     headers: {
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Private-Network": "true",