React 섬과 함께 쓰기

# explorer/live_sessions.py
from wireview import live_session

# 누구나 들어온다(authorize 없음). 그래도 경계 안이라 로그아웃이 열린 소켓을 닫는다 — 아래 "로그인 뒤의 기능"
explore = live_session("explore")

# explorer/views.py
from django.shortcuts import render

from .live_sessions import explore


@explore.view
def explorer(request):
    return render(request, "explorer/page.html")

# explorer/live.py
from wireview import Component

from .models import SavedView


class Explorer(Component):
    class Meta:
        template_name = "explorer/explorer.html"
        live_sessions = {"explore"}

    zoom: int = 10
    saved: int = 0

    @property
    def map_props(self) -> dict:
        return {"zoom": self.zoom, "saved": self.saved, "signedIn": self.user.is_authenticated}

    async def zoom_in(self):
        self.zoom += 1

    async def handle_hook_event(self, hook_id, event, payload):
        if event == "save_view":
            if not self.user.is_authenticated:
                return {"ok": False, "reason": "login"}
            zoom = int(payload.get("zoom", self.zoom))
            await SavedView.objects.acreate(user=self.user, zoom=zoom)
            self.saved += 1
            return {"ok": True}
        return None

{% load wireview %}

<section {% tag_header %}>
  <button type="button" {% on "click" "zoom_in" %}>확대</button>
  <span>저장한 보기 {{ this.saved }}개</span>
  {% island "Map" props=this.map_props class="map" %}
</section>

// frontend/islands.jsx
import { createRoot } from "react-dom/client";
import { MapView } from "./MapView";
import "./islands.css";

window.wireview.islands.Map = {
  mount(el, props, ctx) {
    const root = createRoot(el);
    const render = (next) => root.render(<MapView {...next} ctx={ctx} />);
    render(props);
    return { update: render, unmount: () => root.unmount() };
  },
};

// frontend/MapView.jsx
import { useEffect, useState } from "react";

export function MapView({ zoom, saved, signedIn, ctx }) {
  const [saving, setSaving] = useState(false);
  const [online, setOnline] = useState(ctx.status === "connected");

  // ctx.on과 ctx.onStatus는 떼는 함수를 돌려준다: useEffect의 정리 함수로 그대로 쓴다
  useEffect(() => ctx.on("listings_changed", ({ count }) => console.log(count)), [ctx]);
  useEffect(() => ctx.onStatus((status) => setOnline(status === "reconnected")), [ctx]);

  async function save() {
    setSaving(true);
    try {
      const reply = await ctx.push("save_view", { zoom });
      if (!reply.ok) alert("로그인이 필요합니다");
    } catch (error) {
      // error.reason: "disconnected" | "destroyed" | "error" | "gone"
    } finally {
      setSaving(false);
    }
  }

  return (
    <div>
      <p>확대 {zoom} · 저장 {saved}</p>
      <button disabled={saving || !online || !signedIn} onClick={save}>이 보기 저장</button>
    </div>
  );
}

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig(({ command }) => ({
  plugins: [react()],
  // 빌드는 STATIC_URL 아래 번들이 놓일 곳: CSS의 url()과 동적 import가 이 주소로 간다.
  // 개발 서버는 루트에서 준다 — base 밖의 주소에는 404로 답한다.
  base: command === "build" ? "/static/explorer/islands/" : "/",
  build: {
    outDir: "explorer/static/explorer/islands",
    emptyOutDir: true,
    rollupOptions: {
      input: "frontend/islands.jsx",
      output: {
        // 템플릿이 {% static %}로 찾는 둘만 이름을 고정한다
        entryFileNames: "islands.js",
        assetFileNames: (asset) =>
          (asset.names ?? [asset.name]).includes("islands.css") ? "islands.css" : "assets/[name]-[hash][extname]",
        chunkFileNames: "[name]-[hash].js",
      },
    },
  },
}));

{# base.html: 섬이 있는 페이지로 boost 이동해 들어올 수 있는 모든 페이지의 레이아웃 #}
{% load static wireview %}
<head>
  <meta property="csp-nonce" nonce="{{ csp_nonce }}">
  {% wireview_header %}
  <link rel="stylesheet" href="{% static 'explorer/islands/islands.css' %}">
  <script type="module" src="{% static 'explorer/islands/islands.js' %}" nonce="{{ csp_nonce }}"></script>
</head>

<meta property="csp-nonce" nonce="{{ csp_nonce }}">
{% wireview_header %}
{% if vite_dev %}
  <script type="module" nonce="{{ csp_nonce }}">
    import RefreshRuntime from "http://localhost:5173/@react-refresh";
    RefreshRuntime.injectIntoGlobalHook(window);
    window.$RefreshReg$ = () => {};
    window.$RefreshSig$ = () => (type) => type;
    window.__vite_plugin_react_preamble_installed__ = true;
  </script>
  <script type="module" src="http://localhost:5173/@vite/client" nonce="{{ csp_nonce }}"></script>
  <script type="module" src="http://localhost:5173/frontend/islands.jsx" nonce="{{ csp_nonce }}"></script>
{% else %}
  <link rel="stylesheet" href="{% static 'explorer/islands/islands.css' %}">
  <script type="module" src="{% static 'explorer/islands/islands.js' %}" nonce="{{ csp_nonce }}"></script>
{% endif %}

# settings.py
from django.utils.csp import CSP

SECURE_CSP = {
    "default-src": [CSP.SELF],
    "script-src": [CSP.SELF, CSP.NONCE],
    "style-src": [CSP.SELF, CSP.NONCE],
    "connect-src": [CSP.SELF],
}

if VITE_DEV:
    SECURE_CSP["script-src"].append("http://localhost:5173")
    SECURE_CSP["connect-src"].append("ws://localhost:5173")

WIREVIEW_HEADER_STYLE = "'sha256-9wSH+FNcf1J15W2Bp98kNXSBki4k6cyx3+rcC+BzFkU='"

SECURE_CSP = {
    "default-src": [CSP.SELF],
    "script-src": [CSP.SELF],
    "style-src": [CSP.SELF, WIREVIEW_HEADER_STYLE],
    "connect-src": [CSP.SELF],
}

uv run python -c "import wireview, pathlib; print(pathlib.Path(wireview.__file__).parent / 'static/wireview/types.d.ts')"