lightview 2.0.5 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<title>Examplify Sandbox</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
height: 100vh;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
background: #f9fafb;
|
|
16
|
+
color: #6b7280;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
user-select: none;
|
|
19
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
20
|
+
transition: color 0.2s;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
body:hover {
|
|
24
|
+
color: #374151;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.content {
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
gap: 0.5rem;
|
|
31
|
+
font-size: 0.875rem;
|
|
32
|
+
font-weight: 500;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
#placeholder {
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
width: 100%;
|
|
40
|
+
height: 100%;
|
|
41
|
+
}
|
|
42
|
+
</style>
|
|
43
|
+
</head>
|
|
44
|
+
|
|
45
|
+
<body>
|
|
46
|
+
<div id="placeholder">
|
|
47
|
+
<div class="content">
|
|
48
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
49
|
+
<path d="M8 5v14l11-7z" />
|
|
50
|
+
</svg>
|
|
51
|
+
<span>Click to run</span>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
<script>
|
|
55
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
56
|
+
const iframeId = urlParams.get('id');
|
|
57
|
+
|
|
58
|
+
document.getElementById('placeholder').onclick = () => {
|
|
59
|
+
parent.postMessage({ type: 'examplify-run-click', id: iframeId }, '*');
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
window.addEventListener('message', (event) => {
|
|
63
|
+
if (event.data && event.data.type === 'examplify-load-content') {
|
|
64
|
+
// Replace the entire document content
|
|
65
|
+
document.open();
|
|
66
|
+
document.write(event.data.content);
|
|
67
|
+
document.close();
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
// Signal to parent that we are ready to receive content
|
|
71
|
+
parent.postMessage({ type: 'examplify-sandbox-ready', id: iframeId }, '*');
|
|
72
|
+
</script>
|
|
73
|
+
</body>
|
|
74
|
+
|
|
75
|
+
</html>
|
|
@@ -3,13 +3,15 @@ var examplifyIdCounter = window.examplifyIdCounter || 0;
|
|
|
3
3
|
window.examplifyIdCounter = examplifyIdCounter;
|
|
4
4
|
|
|
5
5
|
function examplify(target, options = {}) {
|
|
6
|
-
const { scripts, styles, modules, html, at, location = 'beforeBegin', type, height, minHeight = 100, maxHeight = Infinity, allowSameOrigin = false, language = 'js', autoRun = false } = options;
|
|
6
|
+
const { scripts, styles, modules, html, at, location = 'beforeBegin', type, height, minHeight = 100, maxHeight = Infinity, allowSameOrigin = false, useOrigin = null, language = 'js', autoRun = false } = options;
|
|
7
7
|
const originalContent = target.textContent;
|
|
8
8
|
const autoResize = !height; // Auto-resize if no explicit height is provided
|
|
9
9
|
const iframeId = `examplify-${++examplifyIdCounter}`;
|
|
10
10
|
|
|
11
11
|
// State
|
|
12
12
|
let isRunning = false;
|
|
13
|
+
let sandboxReady = false;
|
|
14
|
+
let pendingContent = null;
|
|
13
15
|
|
|
14
16
|
// 2. Create controls above the target
|
|
15
17
|
const controls = document.createElement('div');
|
|
@@ -47,7 +49,9 @@ function examplify(target, options = {}) {
|
|
|
47
49
|
iframe.style.background = '#f9fafb'; // Light gray placeholder
|
|
48
50
|
iframe.style.border = '1px solid #e5e7eb';
|
|
49
51
|
iframe.style.transition = 'opacity 0.2s ease-in, height 0.2s ease-out';
|
|
50
|
-
|
|
52
|
+
const sandboxFlags = ['allow-scripts'];
|
|
53
|
+
if (allowSameOrigin) sandboxFlags.push('allow-same-origin');
|
|
54
|
+
iframe.sandbox = sandboxFlags.join(' ');
|
|
51
55
|
|
|
52
56
|
if (height) iframe.style.height = height;
|
|
53
57
|
if (minHeight) iframe.style.minHeight = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;
|
|
@@ -58,6 +62,11 @@ function examplify(target, options = {}) {
|
|
|
58
62
|
iframe.style.height = '100px';
|
|
59
63
|
}
|
|
60
64
|
|
|
65
|
+
// If using an external origin, set src immediately to avoid sandbox warnings
|
|
66
|
+
if (useOrigin) {
|
|
67
|
+
iframe.src = useOrigin + '/docs/assets/js/examplify-sandbox.html?id=' + iframeId;
|
|
68
|
+
}
|
|
69
|
+
|
|
61
70
|
// Insert elements
|
|
62
71
|
const insertionPoint = (at || target);
|
|
63
72
|
insertionPoint.insertAdjacentElement(location, iframe);
|
|
@@ -150,6 +159,11 @@ function examplify(target, options = {}) {
|
|
|
150
159
|
function getIframeContent(codeContent) {
|
|
151
160
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
152
161
|
const themeAttr = currentTheme ? ` data-theme="${currentTheme}"` : '';
|
|
162
|
+
|
|
163
|
+
const path = window.location.pathname;
|
|
164
|
+
const baseDir = path.substring(0, path.lastIndexOf('/') + 1);
|
|
165
|
+
const baseTag = useOrigin ? `<base href="${useOrigin}${baseDir}">` : '';
|
|
166
|
+
|
|
153
167
|
const autoResizeScript = autoResize ? `
|
|
154
168
|
<script>
|
|
155
169
|
const frameId = '${iframeId}';
|
|
@@ -184,6 +198,7 @@ function examplify(target, options = {}) {
|
|
|
184
198
|
return `<!DOCTYPE html>
|
|
185
199
|
<html${themeAttr}>
|
|
186
200
|
<head>
|
|
201
|
+
${baseTag}
|
|
187
202
|
<style>
|
|
188
203
|
/* Hide body until stylesheets are loaded to prevent FOUC */
|
|
189
204
|
body {
|
|
@@ -288,16 +303,29 @@ function examplify(target, options = {}) {
|
|
|
288
303
|
function run() {
|
|
289
304
|
const content = getIframeContent(target.textContent);
|
|
290
305
|
iframe.style.background = '#fff';
|
|
291
|
-
|
|
306
|
+
|
|
307
|
+
if (useOrigin) {
|
|
308
|
+
if (sandboxReady) {
|
|
309
|
+
iframe.contentWindow.postMessage({ type: 'examplify-load-content', content: content, id: iframeId }, '*');
|
|
310
|
+
} else {
|
|
311
|
+
pendingContent = content;
|
|
312
|
+
// iframe.src is already set in the initialization phase
|
|
313
|
+
}
|
|
314
|
+
} else {
|
|
315
|
+
iframe.srcdoc = content;
|
|
316
|
+
}
|
|
292
317
|
isRunning = true;
|
|
293
318
|
}
|
|
294
319
|
|
|
295
320
|
// Initialize: auto-run or show placeholder
|
|
296
321
|
if (autoRun) {
|
|
297
322
|
run();
|
|
298
|
-
} else {
|
|
323
|
+
} else if (!useOrigin) {
|
|
324
|
+
// Only use srcdoc for local placeholders when not using a separate origin
|
|
299
325
|
iframe.srcdoc = getPlaceholderContent();
|
|
300
326
|
}
|
|
327
|
+
// Note: if useOrigin is set, the sandbox page itself will handle being blank or showing placeholder
|
|
328
|
+
// until we post the content to it.
|
|
301
329
|
|
|
302
330
|
// Event Listeners
|
|
303
331
|
const runBtn = controls.querySelector('.examplify-run');
|
|
@@ -358,6 +386,14 @@ function examplify(target, options = {}) {
|
|
|
358
386
|
if (event.data.type === 'examplify-run-click') {
|
|
359
387
|
run();
|
|
360
388
|
}
|
|
389
|
+
|
|
390
|
+
if (event.data.type === 'examplify-sandbox-ready' && useOrigin) {
|
|
391
|
+
sandboxReady = true;
|
|
392
|
+
if (pendingContent) {
|
|
393
|
+
iframe.contentWindow.postMessage({ type: 'examplify-load-content', content: pendingContent, id: iframeId }, '*');
|
|
394
|
+
pendingContent = null;
|
|
395
|
+
}
|
|
396
|
+
}
|
|
361
397
|
});
|
|
362
398
|
|
|
363
399
|
return { controls, iframe, target, run };
|
|
@@ -145,7 +145,7 @@ const { div, h1, p, style } = tags;
|
|
|
145
145
|
// These functions return Lightview elements (access raw DOM via .domEl)
|
|
146
146
|
const App = div({ class: 'hero' },
|
|
147
147
|
h1('Welcome to Lightview'),
|
|
148
|
-
p('Lightview is a
|
|
148
|
+
p('Lightview is a library for building modern web interfaces.')
|
|
149
149
|
);
|
|
150
150
|
|
|
151
151
|
// 2. The $ Function for Selections & Content
|
|
@@ -334,7 +334,7 @@ $('#app').content(App);`,
|
|
|
334
334
|
},
|
|
335
335
|
4: {
|
|
336
336
|
options: {
|
|
337
|
-
allowSameOrigin: true,
|
|
337
|
+
//allowSameOrigin: true,
|
|
338
338
|
autoRun: true
|
|
339
339
|
},
|
|
340
340
|
code: `// STEP 4: HYPERMEDIA + OBJECT DOM SYNTAX (requires lightview-x)
|
|
@@ -639,6 +639,12 @@ $('#app').content(App);`,
|
|
|
639
639
|
conceptsContainer.appendChild(conceptsEl);
|
|
640
640
|
|
|
641
641
|
// 4. Initialize Examplify
|
|
642
|
+
const useOrigin = (data.options?.allowSameOrigin && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'))
|
|
643
|
+
? (window.location.hostname === 'localhost'
|
|
644
|
+
? window.location.origin.replace('localhost', '127.0.0.1')
|
|
645
|
+
: window.location.origin.replace('127.0.0.1', 'localhost'))
|
|
646
|
+
: (data.options?.allowSameOrigin ? 'https://sandbox.lightview.dev' : null);
|
|
647
|
+
|
|
642
648
|
// Check if step uses modules (looking for import statement)
|
|
643
649
|
const isModule = data.code.includes('import ');
|
|
644
650
|
|
|
@@ -647,6 +653,7 @@ $('#app').content(App);`,
|
|
|
647
653
|
html: '<div id="app" style="padding: 1rem;"></div>',
|
|
648
654
|
location: 'afterEnd',
|
|
649
655
|
type: isModule ? 'module' : 'text/javascript',
|
|
656
|
+
useOrigin,
|
|
650
657
|
...data.options || {}
|
|
651
658
|
});
|
|
652
659
|
|