ryuu
Version:
Domo App Dev Studio CLI, The main tool used to create, edit, and publish app designs to Domo
151 lines • 6.13 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.AppPreview = AppPreview;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
// Domain whitelist for navigation (matches old implementation)
const ALLOWED_DOMAINS = [
'domo.com',
'github.com',
'salesforce.com',
'trello.com',
'jira.com',
'coupahost.com',
'facebook.com',
'twitter.com',
'instagram.com',
'youtube.com',
'linkedin.com',
'predictivetoolkit.net',
'egnyte.com',
'crmondemand.com',
'google.com',
'adobe.com',
'domo.buzz',
'spotify.com',
'wired.com',
'gizmodo.com',
'techcrunch.com',
'fastcodesign.com',
'arstechnica.com',
'fastcompany.com',
'nytimes.com',
'thenextweb.com',
'medium.com',
'mashable.com',
'springboard.com',
'theverge.com',
'sciencebulletin.org',
'buzzfeed.com',
'huffingtonpost.com',
'bloomberg.com',
];
function isHostSafe(hostname) {
const segments = hostname.split('.');
const domain = segments.length > 1
? `${segments[segments.length - 2]}.${segments[segments.length - 1]}`
: hostname;
return ALLOWED_DOMAINS.includes(domain);
}
function AppPreview({ url, width, height, isFullscreen, manifest, thumbnail, size, }) {
const iframeRef = (0, react_1.useRef)(null);
const [iframeKey, setIframeKey] = react_1.default.useState(0);
(0, react_1.useEffect)(() => {
// Set up file watcher for hot reload
const eventSource = new EventSource('/__file_watcher');
eventSource.onmessage = (event) => {
if (event.data === 'reload') {
console.log('[HMR] App files changed, reloading iframe...');
// Force iframe reload by changing key
setIframeKey(prev => prev + 1);
}
};
return () => {
eventSource.close();
};
}, []);
(0, react_1.useEffect)(() => {
// Handle Link API messages from the iframe
function handleMessage(event) {
let message;
try {
message =
typeof event.data === 'string' && event.data.startsWith('{')
? JSON.parse(event.data)
: event.data;
}
catch (err) {
console.warn('Invalid message data:', event.data);
return;
}
if (message.event === 'navigate') {
try {
const parsedUrl = new URL(message.url, window.location.origin);
// Check if it's a local URL
if (parsedUrl.hostname === 'localhost') {
console.info('This relative link WILL work in Domo, just not in domo dev');
return;
}
// Check if domain is safe
if (!isHostSafe(parsedUrl.hostname)) {
console.warn('Custom App tried to navigate to a currently unsupported domain:', parsedUrl.hostname);
return;
}
// Navigate
if (message.isNewWindow) {
window.open(message.url, '_blank');
}
else {
window.location.href = message.url;
}
}
catch (err) {
console.error('Error processing navigation message:', err);
}
}
}
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, []);
return ((0, jsx_runtime_1.jsx)("section", { className: "app-section", style: { padding: isFullscreen ? '0 50px' : 0 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "app-wrapper", style: {
width: width,
height: isFullscreen ? 'calc(100vh - 120px)' : height,
}, children: [(0, jsx_runtime_1.jsxs)("div", { className: "app-header", children: [thumbnail && ((0, jsx_runtime_1.jsx)("img", { src: thumbnail, alt: "App thumbnail", className: "app-thumbnail" })), (0, jsx_runtime_1.jsx)("h2", { className: "app-title", children: manifest.name })] }), (0, jsx_runtime_1.jsx)("iframe", { ref: iframeRef, src: url, className: "app-iframe", style: {
width: width,
height: isFullscreen ? 'calc(100% - 140px)' : height,
}, title: "App Preview" }, iframeKey), (0, jsx_runtime_1.jsx)("div", { className: "app-size", children: size })] }) }));
}
//# sourceMappingURL=AppPreview.js.map