coolstyleserver 2.0.2

a proxy server for stylesheet hot reloading
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

let registry = {};
let sources = {};
let base = new URL(import.meta.url);
let coolBase = base.pathname.substring(0, base.pathname.lastIndexOf("/"));
let esrc = new EventSource(`${coolBase}/watch`);

esrc.addEventListener("message", async (event) => {
  let data = JSON.parse(event.data);
  let updates = [];

  for (let pathname of data) {
    pathname = new URL(pathname, base).pathname;

    let sheets = sources[pathname];

    if (!sheets) continue;

    for (let sheet of sheets) {
      updates.push(updateSheet(sheet, pathname));
    }
  }

  await Promise.allSettled(updates);
});

async function createSheet(root, pathname, media) {
  media ??= "all";

  registry[pathname] ??= {};

  registry[pathname][media] ??= new CSSStyleSheet({media: media});

  let sheet = registry[pathname][media];

  await updateSheet(sheet, pathname);

  root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
}

async function updateSheet(sheet, pathname) {
  let url = new URL(`${coolBase}/fetch`, base);

  url.searchParams.append("pathname", pathname);

  let res = await fetch(url);
  let json = await res.json();

  if (json.css.includes("@import")) {
    return;
  }

  for (let src of [pathname].concat(json.sources ?? [])) {
    sources[src] ??= new Set();

    sources[src].add(sheet);
  }

  sheet.replaceSync(json.css);
}

class CoolStylesheet extends HTMLLinkElement {
  static get observedAttributes() {
    return ["media"];
  }

  pathname;

  constructor() {
    super();

    this.pathname = new URL(this.href).pathname;

    let root = this.getRootNode();
    let media = this.getAttribute("media");

    createSheet(root, this.pathname, media).then(() => {
      this.sheet.disabled = true;
    });
  }

  async attributeChangedCallback(_, old_media, new_media) {
    if (old_media === new_media) {
      return;
    }

    let root = this.getRootNode();

    await createSheet(root, this.pathname, new_media);

    let old_sheet = registry[this.pathname]?.[old_media ?? "all"];

    root.adoptedStyleSheets = [...root.adoptedStyleSheets].filter(
      (sheet) => sheet !== old_sheet
    );
  }
}

customElements.define("cool-stylesheet", CoolStylesheet, {extends: "link"});