Skip to content

Commit caa6efd

Browse files
jlukicjlukic
committed
Try to get Lit dep CDN script working
1 parent 5c59f0d commit caa6efd

File tree

4 files changed

+151
-28
lines changed

4 files changed

+151
-28
lines changed

‎.github/workflows/cdn-deploy.yml‎

Lines changed: 106 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ jobs:
194194
195195
# Execute the importmap generation script
196196
echo "Executing importmap generation script..."
197-
VERSION=$VERSION CORE_VERSION=$CORE_VERSION CORE_ENTRY=$core_entry node generate-importmap.js
197+
VERSION=$VERSION CORE_VERSION=$CORE_VERSION CORE_ENTRY=$core_entry LIT_VERSION=$LIT_VERSION node generate-importmap.js
198198
rm generate-importmap.js
199199
200200
# The importmap generation script also handles the latest importmap update logic
@@ -229,41 +229,124 @@ jobs:
229229
echo "Copying importmap loader to CDN root..."
230230
cp $GITHUB_WORKSPACE/scripts/assets/templates/cdn/importmap-loader.js.template cdn/importmap.js
231231
232-
# Get Lit version from peerDependencies
233-
echo "Getting Lit version from package.json peerDependencies..."
232+
# Get Lit version from renderer package dependencies
233+
echo "Getting Lit version from renderer package dependencies..."
234234
LIT_VERSION=$(node -e "
235-
const pkg = require('./package.json');
236-
const litVersion = pkg.peerDependencies && pkg.peerDependencies.lit
237-
? pkg.peerDependencies.lit.replace(/[^0-9.]/g, '')
235+
const pkg = require('./packages/renderer/package.json');
236+
const litVersion = pkg.dependencies && pkg.dependencies.lit
237+
? pkg.dependencies.lit.replace(/[^0-9.]/g, '')
238238
: '3.0.0'; // fallback to stable version if not specified
239239
console.log(litVersion);
240240
")
241241
echo "Using Lit version: $LIT_VERSION"
242242
243-
# Download and bundle Lit dependency
243+
# Download and bundle Lit dependency with version directory structure
244244
echo "Downloading Lit dependency from unpkg..."
245-
mkdir -p cdn/lit
245+
mkdir -p cdn/lit/$LIT_VERSION
246246
247247
# Use curl to download the Lit package with specific version
248-
curl -s "https://www.unpkg.com/lit@$LIT_VERSION/index.js" > cdn/lit/index.js
248+
curl -s "https://www.unpkg.com/lit@$LIT_VERSION/index.js" > cdn/lit/$LIT_VERSION/index.js
249+
250+
# Create an index.html file in the versioned directory
251+
cat > cdn/lit/$LIT_VERSION/index.html << EOF
252+
<!DOCTYPE html>
253+
<html>
254+
<head>
255+
<meta charset="UTF-8">
256+
<title>Lit v$LIT_VERSION</title>
257+
<link rel="preconnect" href="https://fonts.googleapis.com">
258+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
259+
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
260+
<style>
261+
:root {
262+
--primary: #2185d0;
263+
--text: #333;
264+
--bg: #fff;
265+
--code-bg: #f5f5f5;
266+
--border: #eaeaea;
267+
}
268+
269+
@media (prefers-color-scheme: dark) {
270+
:root {
271+
--primary: #54c8ff;
272+
--text: #f0f0f0;
273+
--bg: #121212;
274+
--code-bg: #1e1e1e;
275+
--border: #333;
276+
}
277+
}
278+
279+
body {
280+
font-family: 'Lato', -apple-system, sans-serif;
281+
max-width: 800px;
282+
margin: 0 auto;
283+
padding: 2rem;
284+
color: var(--text);
285+
background-color: var(--bg);
286+
line-height: 1.6;
287+
}
288+
289+
h1, h2, h3 { color: var(--primary); }
290+
291+
pre {
292+
background: var(--code-bg);
293+
padding: 1rem;
294+
border-radius: 5px;
295+
overflow-x: auto;
296+
}
297+
298+
code {
299+
background: var(--code-bg);
300+
padding: 0.2rem 0.4rem;
301+
border-radius: 3px;
302+
font-family: monospace;
303+
}
304+
305+
a { color: var(--primary); }
306+
</style>
307+
</head>
308+
<body>
309+
<h1>Lit <span style="opacity: 0.7;">v$LIT_VERSION</span></h1>
310+
<p>This is the Lit library hosted for Semantic UI Next. It's a dependency for the renderer package.</p>
311+
312+
<h2>Usage</h2>
313+
<p>This package is automatically included in the importmap when using Semantic UI Next from the CDN:</p>
314+
<pre><code>import { html } from 'lit';</code></pre>
315+
316+
<p>Main entry point: <a href="./index.js">index.js</a></p>
317+
318+
<h2>Documentation</h2>
319+
<p>For Lit documentation, visit the <a href="https://lit.dev/" target="_blank">official Lit website</a>.</p>
320+
321+
<p><a href="/index.html">Back to CDN home</a></p>
322+
</body>
323+
</html>
324+
EOF
325+
326+
# Create a redirect at the base path
327+
mkdir -p cdn/lit
328+
echo "Creating redirect for lit to version $LIT_VERSION"
329+
cat > cdn/lit/index.html << EOF
330+
<!DOCTYPE html>
331+
<html>
332+
<head>
333+
<meta http-equiv="refresh" content="0;URL=./$LIT_VERSION/">
334+
<title>Redirecting to Lit $LIT_VERSION</title>
335+
</head>
336+
<body>
337+
<p>Redirecting to <a href="./$LIT_VERSION/">Lit v$LIT_VERSION</a></p>
338+
</body>
339+
</html>
340+
EOF
249341

250342
# Add Lit to our importmap
251343
echo "Adding Lit to importmap..."
252344
cd cdn
253-
# Create a temporary script to add Lit to existing importmaps
254-
cat > add-lit-to-importmap.js << 'EOF'
255-
const fs = require('fs');
256-
const files = fs.readdirSync('.').filter(f => f.startsWith('importmap-') && f.endsWith('.json'));
257-
files.forEach(file => {
258-
const importmap = JSON.parse(fs.readFileSync(file, 'utf8'));
259-
if (!importmap.imports.lit) {
260-
importmap.imports.lit = 'https://cdn.semantic-ui.com/lit/index.js';
261-
fs.writeFileSync(file, JSON.stringify(importmap, null, 2));
262-
console.log(`Added Lit to ${file}`);
263-
}
264-
});
265-
EOF
266-
node add-lit-to-importmap.js
345+
# Copy the script template for adding Lit to importmaps
346+
cp $GITHUB_WORKSPACE/scripts/assets/templates/cdn/add-lit-to-importmap.js.template add-lit-to-importmap.js
347+
# Execute the script with ESM support, passing the LIT_VERSION
348+
LIT_VERSION=$LIT_VERSION node --input-type=module add-lit-to-importmap.js
349+
# Clean up
267350
rm add-lit-to-importmap.js
268351
cd ..
269352

‎scripts/assets/templates/cdn/add-lit-to-importmap.js.template‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import fs from 'fs';
2+
3+
// Find all importmap files in the current directory
4+
const files = fs.readdirSync('.').filter(f => f.startsWith('importmap-') && f.endsWith('.json'));
5+
6+
// Process each importmap file
7+
files.forEach(file => {
8+
const importmap = JSON.parse(fs.readFileSync(file, 'utf8'));
9+
10+
// Add Lit to the importmap if it doesn't exist already
11+
if (!importmap.imports.lit) {
12+
// Get the LIT_VERSION from the environment or use the file structure
13+
const litVersion = process.env.LIT_VERSION || fs.readdirSync('./lit').filter(dir => /^\d/.test(dir))[0] || '3.0.0';
14+
importmap.imports.lit = `https://cdn.semantic-ui.com/lit/${litVersion}/index.js`;
15+
console.log(`Added Lit to ${file}`);
16+
17+
// Write the updated importmap back to the file
18+
fs.writeFileSync(file, JSON.stringify(importmap, null, 2));
19+
}
20+
});

‎scripts/assets/templates/cdn/generate-importmap.js.template‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,15 @@ const packages = fs.readdirSync(packagesDir).filter(pkg =>
1919
// Get core version from environment variable
2020
const coreVersion = process.env.CORE_VERSION;
2121

22+
// Get the Lit version from the environment variable
23+
const litVersion = process.env.LIT_VERSION || '3.0.0';
24+
2225
// Create the importmap object
2326
const importmap = {
2427
imports: {
2528
'@semantic-ui/core': `https://cdn.semantic-ui.com/@semantic-ui/core/${coreVersion}/${process.env.CORE_ENTRY}`,
26-
// Add Lit dependency (will be hosted on our CDN)
27-
'lit': 'https://cdn.semantic-ui.com/lit/index.js'
29+
// Add Lit dependency with version path
30+
'lit': `https://cdn.semantic-ui.com/lit/${litVersion}/index.js`
2831
}
2932
};
3033

‎scripts/assets/templates/cdn/importmap-loader.js.template‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,31 @@
1818
return response.json();
1919
})
2020
.then(importmap => {
21-
// Add the lit dependency to the importmap
22-
importmap.imports['lit'] = 'https://cdn.semantic-ui.com/lit/index.js';
23-
2421
// Create a script element with type="importmap"
2522
const script = document.createElement('script');
2623
script.type = 'importmap';
2724
script.textContent = JSON.stringify(importmap, null, 2);
2825

26+
// The lit dependency should already be in the importmap
27+
// from the server-side generation, but we'll add it if it's missing
28+
if (!importmap.imports['lit']) {
29+
// Fetch the latest lit version by checking the redirect
30+
fetch('https://cdn.semantic-ui.com/lit/')
31+
.then(response => {
32+
// Extract version from URL pattern if possible
33+
const version = response.url.match(/\/lit\/([0-9.]+)/)?.[1] || '3.0.0';
34+
importmap.imports['lit'] = `https://cdn.semantic-ui.com/lit/${version}/index.js`;
35+
36+
// Update the script with the new importmap
37+
script.textContent = JSON.stringify(importmap, null, 2);
38+
})
39+
.catch(() => {
40+
// Fallback to a hardcoded version if we can't determine it
41+
importmap.imports['lit'] = 'https://cdn.semantic-ui.com/lit/3.0.0/index.js';
42+
script.textContent = JSON.stringify(importmap, null, 2);
43+
});
44+
}
45+
2946
// Insert it into the document
3047
document.head.appendChild(script);
3148

0 commit comments

Comments
 (0)