Defer theme-loader and preconnect to openvibe.network in shells (#356)

OP OpenVibers committed 3 days ago · fde7b4a8c6 · 10 files, +45 −4

* Defer theme-loader and preconnect to openvibe.network in shells

* Fix possibly-undefined in clientShells test

Changes

ddiff --git a/apps/client/achievements.html b/apps/client/achievements.html
iindex 80ad1eb..9ed8181 100644
---- a/apps/client/achievements.html
++++ b/apps/client/achievements.html
@@@ -23,6 +23,7 @@
      <meta name="twitter:image" content="https://openvibe.games/shared/social/games.jpg?v=a77ab4204f47" />
      <link rel="stylesheet" href="/src/pages/play-pages.css" />
      <!-- The OpenVibe Frame: the user's theme before first paint, then navbar + footer. -->
++    <link rel="preconnect" href="https://openvibe.network" crossorigin>
      <script src="/shared/theme-loader.js" defer></script>
      <script src="/shared/navbar.js" defer></script>
      <script src="/shared/footer.js" defer></script>
ddiff --git a/apps/client/casual.html b/apps/client/casual.html
iindex d7ccabd..555b42e 100644
---- a/apps/client/casual.html
++++ b/apps/client/casual.html
@@@ -8,7 +8,8 @@
      <!--casual:head-->
      <meta name="robots" content="index, follow" />
      <!-- The OpenVibe Frame: the user's theme before first paint, then navbar + footer. -->
--    <script src="/shared/theme-loader.js"></script>
++    <link rel="preconnect" href="https://openvibe.network" crossorigin>
++    <script src="/shared/theme-loader.js" defer></script>
      <script src="/shared/navbar.js" defer></script>
      <script src="/shared/footer.js" defer></script>
      <script>
ddiff --git a/apps/client/developers.html b/apps/client/developers.html
iindex 69f3fa4..10b296d 100644
---- a/apps/client/developers.html
++++ b/apps/client/developers.html
@@@ -23,6 +23,7 @@
      <meta name="twitter:image" content="https://openvibe.games/shared/social/games.jpg?v=a77ab4204f47" />
      <link rel="stylesheet" href="/src/pages/play-pages.css" />
      <!-- The OpenVibe Frame: the user's theme before first paint, then navbar + footer. -->
++    <link rel="preconnect" href="https://openvibe.network" crossorigin>
      <script src="/shared/theme-loader.js" defer></script>
      <script src="/shared/navbar.js" defer></script>
      <script src="/shared/footer.js" defer></script>
ddiff --git a/apps/client/editor.html b/apps/client/editor.html
iindex 1436db9..aacf667 100644
---- a/apps/client/editor.html
++++ b/apps/client/editor.html
@@@ -26,7 +26,8 @@
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:image" content="https://openvibe.games/shared/social/games.jpg?v=a77ab4204f47" />
      <!-- The OpenVibe Frame: the user's theme before first paint, then navbar + footer. -->
--    <script src="/shared/theme-loader.js"></script>
++    <link rel="preconnect" href="https://openvibe.network" crossorigin>
++    <script src="/shared/theme-loader.js" defer></script>
      <script src="/shared/navbar.js" defer></script>
      <script src="/shared/footer.js" defer></script>
      <script>
ddiff --git a/apps/client/index.html b/apps/client/index.html
iindex 8d46eee..afadf1e 100644
---- a/apps/client/index.html
++++ b/apps/client/index.html
@@@ -14,6 +14,7 @@
      <!-- The OpenVibe Frame: the user's theme before first paint, then navbar + footer. -->
      <!-- Deferred: a slow or unreachable openvibe.network never holds the first paint (the inline colours above cover it). -->
      <link rel="stylesheet" href="/shared/kit.css" />
++    <link rel="preconnect" href="https://openvibe.network" crossorigin>
      <script src="/shared/theme-loader.js" defer></script>
      <script src="/shared/navbar.js" defer></script>
      <script src="/shared/footer.js" defer></script>
ddiff --git a/apps/client/leaderboards.html b/apps/client/leaderboards.html
iindex 8dbda11..f6690da 100644
---- a/apps/client/leaderboards.html
++++ b/apps/client/leaderboards.html
@@@ -23,6 +23,7 @@
      <meta name="twitter:image" content="https://openvibe.games/shared/social/games.jpg?v=a77ab4204f47" />
      <link rel="stylesheet" href="/src/pages/play-pages.css" />
      <!-- The OpenVibe Frame: the user's theme before first paint, then navbar + footer. -->
++    <link rel="preconnect" href="https://openvibe.network" crossorigin>
      <script src="/shared/theme-loader.js" defer></script>
      <script src="/shared/navbar.js" defer></script>
      <script src="/shared/footer.js" defer></script>
ddiff --git a/apps/client/play.html b/apps/client/play.html
iindex 65b60de..f402bd9 100644
---- a/apps/client/play.html
++++ b/apps/client/play.html
@@@ -7,7 +7,8 @@
      <title>Scraplandia — OpenVibe.Games</title>
      <meta name="description" content="Play Scraplandia: scrappy multiplayer survival-building in and around Scrap City, in your browser, no download. Part of the OpenVibe network." />
      <!-- The OpenVibe Frame: the user's theme before first paint, then navbar + footer. -->
--    <script src="/shared/theme-loader.js"></script>
++    <link rel="preconnect" href="https://openvibe.network" crossorigin>
++    <script src="/shared/theme-loader.js" defer></script>
      <script src="/shared/navbar.js" defer></script>
      <script src="/shared/footer.js" defer></script>
      <link rel="canonical" href="https://play.openvibe.games/" />
ddiff --git a/apps/client/worlds.html b/apps/client/worlds.html
iindex 859f6a2..6fad477 100644
---- a/apps/client/worlds.html
++++ b/apps/client/worlds.html
@@@ -392,7 +392,8 @@
      <script type="module" src="/src/pages/worlds.ts"></script>
      <!-- The OpenVibe Frame (navbar + footer), as on every other page of the site: this page had only its own row of
           links (phone sweep, 2026-11-01). -->
--    <script src="/shared/theme-loader.js"></script>
++    <link rel="preconnect" href="https://openvibe.network" crossorigin>
++    <script src="/shared/theme-loader.js" defer></script>
      <script src="/shared/navbar.js" defer></script>
      <script src="/shared/footer.js" defer></script>
      <script>
ddiff --git a/apps/server/src/net/clientShells.test.ts b/apps/server/src/net/clientShells.test.ts
nnew file mode 100644
iindex 0000000..2cc160a
---- /dev/null
++++ b/apps/server/src/net/clientShells.test.ts
@@@ -0,0 +1,30 @@
++import { readdirSync, readFileSync } from 'node:fs'
++import { dirname, join } from 'node:path'
++import { fileURLToPath } from 'node:url'
++import { describe, expect, it } from 'vitest'
++
++// Every client shell defers the shared scripts (the inline colours above cover the first paint) and
++// preconnects to openvibe.network once, with crossorigin, before theme-loader runs.
++const clientDir = join(dirname(fileURLToPath(import.meta.url)), '../../../client')
++const shells = readdirSync(clientDir).filter((f) => f.endsWith('.html')).sort()
++
++describe('client shells', () => {
++  it('has shells to check', () => {
++    expect(shells.length).toBeGreaterThanOrEqual(8)
++  })
++  for (const name of shells) {
++    it(`${name}: deferred shared scripts + one crossorigin preconnect`, () => {
++      const html = readFileSync(join(clientDir, name), 'utf8')
++      for (const m of html.matchAll(/<script\b[^>]*>/gi)) {
++        const tag = m[0]
++        if (!/\ssrc\s*=\s*"\/shared\//.test(tag)) continue
++        expect(/\bdefer\b|\basync\b/.test(tag) || /type\s*=\s*"module"/.test(tag)).toBe(true)
++      }
++      const pcs = [...html.matchAll(/<link rel="preconnect" href="https:\/\/openvibe\.network"[^>]*>/g)]
++      expect(pcs.length).toBe(1)
++      expect(pcs[0]![0]).toContain('crossorigin')
++      expect(html).toContain('<script src="/shared/theme-loader.js" defer></script>')
++      expect(html).toContain('<script src="/shared/navbar.js" defer></script>')
++    })
++  }
++})
ddiff --git a/test/apps__server__src__net__clientShells.test.js b/test/apps__server__src__net__clientShells.test.js
nnew file mode 100644
iindex 0000000..f27416b
---- /dev/null
++++ b/test/apps__server__src__net__clientShells.test.js
@@@ -0,0 +1,3 @@
++// file: 'apps/server/src/net/clientShells.test.ts'
++// covers: 'apps/server/src/net'
++// Generated by node test/run.js --index; do not edit.

diff --git a/apps/client/achievements.html b/apps/client/achievements.html

index 80ad1eb..9ed8181 100644

--- a/apps/client/achievements.html

+++ b/apps/client/achievements.html

@@ -23,6 +23,7 @@

+ <link rel="preconnect" href="https://openvibe.network" crossorigin>

diff --git a/apps/client/casual.html b/apps/client/casual.html

index d7ccabd..555b42e 100644

--- a/apps/client/casual.html

+++ b/apps/client/casual.html

@@ -8,7 +8,8 @@

- <script src="/shared/theme-loader.js"></script>

+ <link rel="preconnect" href="https://openvibe.network" crossorigin>

+ <script src="/shared/theme-loader.js" defer></script>

diff --git a/apps/client/developers.html b/apps/client/developers.html

index 69f3fa4..10b296d 100644

--- a/apps/client/developers.html

+++ b/apps/client/developers.html

@@ -23,6 +23,7 @@

+ <link rel="preconnect" href="https://openvibe.network" crossorigin>

diff --git a/apps/client/editor.html b/apps/client/editor.html

index 1436db9..aacf667 100644

--- a/apps/client/editor.html

+++ b/apps/client/editor.html

@@ -26,7 +26,8 @@

- <script src="/shared/theme-loader.js"></script>

+ <link rel="preconnect" href="https://openvibe.network" crossorigin>

+ <script src="/shared/theme-loader.js" defer></script>

diff --git a/apps/client/index.html b/apps/client/index.html

index 8d46eee..afadf1e 100644

--- a/apps/client/index.html

+++ b/apps/client/index.html

@@ -14,6 +14,7 @@

+ <link rel="preconnect" href="https://openvibe.network" crossorigin>

diff --git a/apps/client/leaderboards.html b/apps/client/leaderboards.html

index 8dbda11..f6690da 100644

--- a/apps/client/leaderboards.html

+++ b/apps/client/leaderboards.html

@@ -23,6 +23,7 @@

+ <link rel="preconnect" href="https://openvibe.network" crossorigin>

diff --git a/apps/client/play.html b/apps/client/play.html

index 65b60de..f402bd9 100644

--- a/apps/client/play.html

+++ b/apps/client/play.html

@@ -7,7 +7,8 @@

<title>Scraplandia — OpenVibe.Games</title>

- <script src="/shared/theme-loader.js"></script>

+ <link rel="preconnect" href="https://openvibe.network" crossorigin>

+ <script src="/shared/theme-loader.js" defer></script>

diff --git a/apps/client/worlds.html b/apps/client/worlds.html

index 859f6a2..6fad477 100644

--- a/apps/client/worlds.html

+++ b/apps/client/worlds.html

@@ -392,7 +392,8 @@

<!-- The OpenVibe Frame (navbar + footer), as on every other page of the site: this page had only its own row of

links (phone sweep, 2026-11-01). -->

- <script src="/shared/theme-loader.js"></script>

+ <link rel="preconnect" href="https://openvibe.network" crossorigin>

+ <script src="/shared/theme-loader.js" defer></script>

diff --git a/apps/server/src/net/clientShells.test.ts b/apps/server/src/net/clientShells.test.ts

new file mode 100644

index 0000000..2cc160a

--- /dev/null

+++ b/apps/server/src/net/clientShells.test.ts

@@ -0,0 +1,30 @@

+import { readdirSync, readFileSync } from 'node:fs'

+import { dirname, join } from 'node:path'

+import { fileURLToPath } from 'node:url'

+import { describe, expect, it } from 'vitest'

+// Every client shell defers the shared scripts (the inline colours above cover the first paint) and

+// preconnects to openvibe.network once, with crossorigin, before theme-loader runs.

+const clientDir = join(dirname(fileURLToPath(import.meta.url)), '../../../client')

+const shells = readdirSync(clientDir).filter((f) => f.endsWith('.html')).sort()

+describe('client shells', () => {

+ it('has shells to check', () => {

+ expect(shells.length).toBeGreaterThanOrEqual(8)

+ })

+ for (const name of shells) {

+ it(`${name}: deferred shared scripts + one crossorigin preconnect`, () => {

+ const html = readFileSync(join(clientDir, name), 'utf8')

+ for (const m of html.matchAll(/<script\b[^>]*>/gi)) {

+ const tag = m[0]

+ if (!/\ssrc\s*=\s*"\/shared\//.test(tag)) continue

+ expect(/\bdefer\b|\basync\b/.test(tag) || /type\s*=\s*"module"/.test(tag)).toBe(true)

+ }

+ const pcs = [...html.matchAll(/<link rel="preconnect" href="https:\/\/openvibe\.network"[^>]*>/g)]

+ expect(pcs.length).toBe(1)

+ expect(pcs[0]![0]).toContain('crossorigin')

+ expect(html).toContain('<script src="/shared/theme-loader.js" defer></script>')

+ expect(html).toContain('<script src="/shared/navbar.js" defer></script>')

+ })

+ }

+})

diff --git a/test/apps__server__src__net__clientShells.test.js b/test/apps__server__src__net__clientShells.test.js

new file mode 100644

index 0000000..f27416b

--- /dev/null

+++ b/test/apps__server__src__net__clientShells.test.js

@@ -0,0 +1,3 @@

+// file: 'apps/server/src/net/clientShells.test.ts'

+// covers: 'apps/server/src/net'

+// Generated by node test/run.js --index; do not edit.