pub const MEDIA_JS: &str = "// `media \"\u{2026}\"` \u{2014} a CSS media query the browser keeps answering.\n//\n// `matchMedia(q).matches` is a boolean read at one instant. The whole\n// value of making this a language construct rather than a `foreign` is\n// that a read at one instant is the wrong thing and is very easy to write:\n// the survey of the site this was built for found eight `matchMedia` call\n// sites, and six of them read `.matches` once at mount and never learned\n// that the answer had changed. A visitor who turns on Reduce Motion while\n// the page is open keeps the animation.\n//\n// So this returns a *signal*. The subscription is installed once per\n// distinct query \u{2014} the emitter hoists one cell per query literal \u{2014} and\n// every read of it anywhere in the program is a read of that one cell.\n//\n// # Its own module\n//\n// \u{a7}16.3.1, as for `remembered.js`, `list.js`, `foreign.js` and\n// `markup.js`: a program that asks the browser nothing must not ship a\n// subscription it never installs. It imports `signal.js` and nothing else,\n// so it never drags in `dom.js`.\n\nimport { signal } from \'./signal.js\';\n\n/**\n * Whether the browser matches `query`, as a signal.\n *\n * `false` where there is no `matchMedia` \u{2014} the DOM shim the compiler\'s own\n * tests render against, and any host that is not a browser. That is the\n * right answer rather than a safe one: `prefers-reduced-motion: reduce`\n * and `prefers-color-scheme: dark` are both queries whose unmatched\n * reading is the ordinary case, and a media query nobody can evaluate has\n * not matched.\n */\nexport function mediaMatch(query) {\n if (typeof matchMedia !== \'function\') return signal(false)[0];\n\n const list = matchMedia(query);\n const [read, write] = signal(list.matches);\n // `addEventListener` on a `MediaQueryList` is the modern spelling and\n // `addListener` the one Safari carried alone until 14. The fallback is\n // two lines and its absence is a silent staleness on those browsers,\n // which is the exact failure this file exists to remove.\n if (typeof list.addEventListener === \'function\') {\n list.addEventListener(\'change\', (event) => write(event.matches));\n } else if (typeof list.addListener === \'function\') {\n list.addListener((event) => write(event.matches));\n }\n return read;\n}\n";Expand description
media "…" — a CSS media query, as a signal that changes with it.
Its own module, and it imports signal.js and nothing else: a program
that asks the browser no question must not ship a matchMedia
subscription (§16.3.1).