dev #9
+12
-15
@@ -43,29 +43,26 @@ function getErrorHtml(message = '', errorMessage = '') {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
export async function getBlockConfigs(jsonFileName = 'default',
|
||||
{includeConfigs, projectPath, modulesPath, dataFiles} = {}) {
|
||||
export async function getBlockData(jsonFileName = 'default', {projectPath} = {jsonFileName: 'default'}) {
|
||||
let data = await readJSONFile(path.join(projectPath, 'data', `${jsonFileName}.json`));
|
||||
if (data.error) {
|
||||
return data;
|
||||
}
|
||||
|
||||
if (includeConfigs) {
|
||||
Object.assign(data, {
|
||||
config: Object.assign(JSON.parse(JSON.stringify(config)), // The entire config object.
|
||||
{
|
||||
projectDir: modulesPath, activeDataFile: jsonFileName, dataFiles: dataFiles.map((name) => {
|
||||
return {
|
||||
name, active: jsonFileName === name,
|
||||
};
|
||||
}), remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export function getBlockConfigs(args = {modulesPath: '', dataFiles: []}) {
|
||||
return Object.assign(JSON.parse(JSON.stringify(config)), // The entire config object.
|
||||
{
|
||||
projectDir: args.modulesPath, dataFiles: args.dataFiles.map((name) => {
|
||||
return {
|
||||
name,
|
||||
};
|
||||
}), remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
|
||||
});
|
||||
}
|
||||
|
||||
export function getBlockName(name = '') {
|
||||
if (name.startsWith('@')) {
|
||||
name = name.substring(1);
|
||||
|
||||
@@ -4,9 +4,7 @@
|
||||
|
||||
<body class="{{#if iframeMode}}body--iframe{{/if}}">
|
||||
|
||||
<main>
|
||||
{{> (include_block_template) }}
|
||||
</main>
|
||||
<div id="hbs-container"></div>
|
||||
|
||||
{{> (include_partial "layouts/partials/scripts") }}
|
||||
|
||||
|
||||
@@ -4,11 +4,9 @@
|
||||
|
||||
<body class="{{#if iframeMode}}body--iframe{{/if}}">
|
||||
|
||||
<main>
|
||||
<div class="container">
|
||||
{{> (include_block_template) }}
|
||||
</div>
|
||||
</main>
|
||||
<div class="container">
|
||||
<div id="hbs-container"></div>
|
||||
</div>
|
||||
|
||||
{{> (include_partial "layouts/partials/scripts") }}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
|
||||
<script src="/scripts/dist/frame-index.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://unpkg.com/swiper@8.4.5/swiper-bundle.min.js"></script>{{#if config.jsUrl }}
|
||||
|
||||
+157
-1
@@ -1 +1,157 @@
|
||||
window.initBlock=function(e="",n="",o){document.querySelectorAll(n).forEach((e=>o(e)))},function(){let e;function n(n){const o=document.querySelector("body > main").scrollHeight;if(e===o)return;e=o,window.parent.postMessage("resize:"+JSON.stringify({height:e}),"*")}n(),new ResizeObserver(n).observe(document.body)}();
|
||||
window.initBlock = initBlock;
|
||||
|
||||
let template;
|
||||
let data = {};
|
||||
let reload;
|
||||
|
||||
// Blocks Initialization.
|
||||
function initBlock(blockName = '', selector = '', cb) {
|
||||
reload = function () {
|
||||
document.querySelectorAll(selector).forEach((el) => cb(el));
|
||||
};
|
||||
|
||||
reload();
|
||||
}
|
||||
|
||||
// Scrollbars / Frame resizes notifications.
|
||||
(function () {
|
||||
let height;
|
||||
|
||||
handleHeightChange(); // Initial frame's height setup.
|
||||
setupResizeListener(); // Listen to frame's height changes.
|
||||
|
||||
///
|
||||
|
||||
function setupResizeListener() {
|
||||
const resizeObserver = new ResizeObserver(handleHeightChange);
|
||||
resizeObserver.observe(document.body);
|
||||
}
|
||||
|
||||
function handleHeightChange() {
|
||||
const updatedHeight = getCurrentHeight();
|
||||
|
||||
if (height === updatedHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
const RESIZE_CODE = 'resize:';
|
||||
height = updatedHeight;
|
||||
window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
|
||||
}
|
||||
|
||||
function getCurrentHeight() {
|
||||
return document.querySelector('#hbs-container').scrollHeight;
|
||||
}
|
||||
})();
|
||||
|
||||
// Data Updates Listeners.
|
||||
(function () {
|
||||
loadDataOptions();
|
||||
listenToDataOptionsUpdates();
|
||||
|
||||
function listenToDataOptionsUpdates() {
|
||||
window.addEventListener('message', function (event) {
|
||||
const message = event.data;
|
||||
const prefix = 'dataUpdate:';
|
||||
|
||||
if (typeof message !== "string" || !message.startsWith(prefix)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
data = JSON.parse(message.substring(prefix.length));
|
||||
updateBlock({data});
|
||||
} catch (e) {
|
||||
console.log('Error parsing incoming data.', e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getQueryParams() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const params = {};
|
||||
|
||||
for (const [key, value] of urlParams) {
|
||||
params[key] = value;
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
function loadDataOptions() {
|
||||
const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});
|
||||
fetch(`/data?${queryParameters}`)
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
data = response.data; // Update state.
|
||||
updateBlock({data});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// Listen to Template updates.
|
||||
(function () {
|
||||
initSocket();
|
||||
|
||||
function initSocket() {
|
||||
const socket = window.io.connect();
|
||||
|
||||
socket.on('error', function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
// socket.on('connect', function () {
|
||||
// console.log('user connected', socket.id)
|
||||
// });
|
||||
|
||||
socket.on('templateUpdate', function (args) {
|
||||
updateBlock({template: args.template});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
function updateBlock(args = {}) {
|
||||
if (args.template) {
|
||||
template = args.template; // Update state.
|
||||
}
|
||||
|
||||
if (args.data) {
|
||||
data = args.data; // Update state.
|
||||
}
|
||||
|
||||
if (!template) {
|
||||
return;
|
||||
}
|
||||
|
||||
renderBlock(template, data || {}, document.getElementById("hbs-container"));
|
||||
}
|
||||
|
||||
function renderBlock(templateHbs, jsonData, target) {
|
||||
const template = Handlebars.compile(templateHbs);
|
||||
|
||||
/**
|
||||
* Handlebars Helpers
|
||||
*/
|
||||
Handlebars.registerHelper('esc_attr', function (attr) {
|
||||
return attr;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('esc_url', function (attr) {
|
||||
return attr;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('esc_html', function (attr) {
|
||||
return attr;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('base_url', function () {
|
||||
return '/';
|
||||
});
|
||||
|
||||
target.innerHTML = template(jsonData);
|
||||
|
||||
if (reload) {
|
||||
reload();
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=frame-index.min.js.map
|
||||
|
||||
+1
File diff suppressed because one or more lines are too long
Vendored
+9840
-15
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
@@ -2,9 +2,17 @@
|
||||
|
||||
window.initBlock = initBlock;
|
||||
|
||||
let template;
|
||||
let data = {};
|
||||
let reload;
|
||||
|
||||
// Blocks Initialization.
|
||||
function initBlock(blockName = '', selector = '', cb) {
|
||||
document.querySelectorAll(selector).forEach((el) => cb(el));
|
||||
reload = function () {
|
||||
document.querySelectorAll(selector).forEach((el) => cb(el));
|
||||
}
|
||||
|
||||
reload();
|
||||
}
|
||||
|
||||
// Scrollbars / Frame resizes notifications.
|
||||
@@ -22,7 +30,7 @@ function initBlock(blockName = '', selector = '', cb) {
|
||||
resizeObserver.observe(document.body);
|
||||
}
|
||||
|
||||
function handleHeightChange(entries) {
|
||||
function handleHeightChange() {
|
||||
const updatedHeight = getCurrentHeight();
|
||||
|
||||
if (debug) {
|
||||
@@ -43,6 +51,117 @@ function initBlock(blockName = '', selector = '', cb) {
|
||||
}
|
||||
|
||||
function getCurrentHeight() {
|
||||
return document.querySelector('body > main').scrollHeight;
|
||||
return document.querySelector('#hbs-container').scrollHeight;
|
||||
}
|
||||
})();
|
||||
|
||||
// Data Updates Listeners.
|
||||
(function () {
|
||||
loadDataOptions();
|
||||
listenToDataOptionsUpdates();
|
||||
|
||||
function listenToDataOptionsUpdates() {
|
||||
window.addEventListener('message', function (event) {
|
||||
const message = event.data;
|
||||
const prefix = 'dataUpdate:';
|
||||
|
||||
if (typeof message !== "string" || !message.startsWith(prefix)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
data = JSON.parse(message.substring(prefix.length));
|
||||
updateBlock({data});
|
||||
} catch (e) {
|
||||
console.log('Error parsing incoming data.', e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getQueryParams() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const params = {};
|
||||
|
||||
for (const [key, value] of urlParams) {
|
||||
params[key] = value;
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
function loadDataOptions() {
|
||||
const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});
|
||||
fetch(`/data?${queryParameters}`)
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
data = response.data; // Update state.
|
||||
updateBlock({data});
|
||||
})
|
||||
}
|
||||
})();
|
||||
|
||||
// Listen to Template updates.
|
||||
(function () {
|
||||
initSocket();
|
||||
|
||||
function initSocket() {
|
||||
const socket = window.io.connect();
|
||||
|
||||
socket.on('error', function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
// socket.on('connect', function () {
|
||||
// console.log('user connected', socket.id)
|
||||
// });
|
||||
|
||||
socket.on('templateUpdate', function (args) {
|
||||
updateBlock({template: args.template});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
function updateBlock(args = {}) {
|
||||
if (args.template) {
|
||||
template = args.template; // Update state.
|
||||
}
|
||||
|
||||
if (args.data) {
|
||||
data = args.data; // Update state.
|
||||
}
|
||||
|
||||
if (!template) {
|
||||
return;
|
||||
}
|
||||
|
||||
renderBlock(template, data || {}, document.getElementById("hbs-container"));
|
||||
}
|
||||
|
||||
function renderBlock(templateHbs, jsonData, target) {
|
||||
const template = Handlebars.compile(templateHbs);
|
||||
|
||||
/**
|
||||
* Handlebars Helpers
|
||||
*/
|
||||
Handlebars.registerHelper('esc_attr', function (attr) {
|
||||
return attr;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('esc_url', function (attr) {
|
||||
return attr;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('esc_html', function (attr) {
|
||||
return attr;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('base_url', function () {
|
||||
return '/';
|
||||
});
|
||||
|
||||
target.innerHTML = template(jsonData);
|
||||
|
||||
if (reload) {
|
||||
reload();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,8 +20,7 @@ function DataOptions(props = {}) {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
useEffect(async () => {
|
||||
const data = await fetchDataOptions(state.dataName);
|
||||
updateState(data);
|
||||
await syncDataOptions(state.dataName);
|
||||
}, []);
|
||||
|
||||
const handleCloseSidebarEscEvent = useCallback((e) => {
|
||||
@@ -98,15 +97,7 @@ function DataOptions(props = {}) {
|
||||
|
||||
async function changeDataOption(e) {
|
||||
const dataName = e.target.value;
|
||||
|
||||
const previewFrameUrl = new URL(window.devTool.previewFrameUrl);
|
||||
previewFrameUrl.searchParams.set('data', dataName);
|
||||
previewFrameUrl.searchParams.set('iframe', 'true');
|
||||
|
||||
props.rootAttributes.previewFrame.src = previewFrameUrl.href;
|
||||
|
||||
const dataOption = await fetchDataOptions(dataName);
|
||||
updateState(Object.assign({}, dataOption, {dataName}));
|
||||
await syncDataOptions(dataName);
|
||||
}
|
||||
|
||||
async function fetchDataOptions(name = 'default') {
|
||||
@@ -138,6 +129,19 @@ function DataOptions(props = {}) {
|
||||
|
||||
setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
|
||||
}
|
||||
|
||||
async function syncDataOptions(dataName) {
|
||||
const dataOptions = await fetchDataOptions(dataName);
|
||||
updateIframe(dataOptions);
|
||||
|
||||
const newState = Object.assign({}, dataOptions, {dataName});
|
||||
updateState(newState);
|
||||
}
|
||||
|
||||
function updateIframe(dataOptions) {
|
||||
const previewIframe = props.rootAttributes.previewFrame;
|
||||
previewIframe.contentWindow.postMessage('dataUpdate:' + JSON.stringify(dataOptions.data || {}), '*');
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(e, context) {
|
||||
|
||||
+3
-3
@@ -4,11 +4,11 @@
|
||||
|
||||
<body class="{{#if iframeMode}}body--iframe{{/if}}">
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<section class="fullscreen_layout"></section>
|
||||
{{> (include_block_template) }}
|
||||
<div id="hbs-container"></div>
|
||||
<section class="fullscreen_layout"></section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{{> (include_partial "layouts/partials/scripts") }}
|
||||
|
||||
|
||||
Generated
+147
-47
@@ -32,11 +32,13 @@
|
||||
"plugin-error": "^2.0.0",
|
||||
"prompts": "^2.4.2",
|
||||
"sanitize-html": "^2.7.1",
|
||||
"sass": "^1.50.1"
|
||||
"sass": "^1.50.1",
|
||||
"ws": "^8.13.0"
|
||||
},
|
||||
"bin": {
|
||||
"component-build": "build.js",
|
||||
"component-dev": "server.js"
|
||||
"component-dev": "server.js",
|
||||
"component-info": "debug.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
@@ -51,7 +53,11 @@
|
||||
"rollup-plugin-copy": "^3.4.0",
|
||||
"rollup-plugin-jsx": "^1.0.3",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"socket.io": "^4.6.2",
|
||||
"styled-components": "^5.3.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
@@ -935,9 +941,12 @@
|
||||
"integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
|
||||
},
|
||||
"node_modules/@types/cors": {
|
||||
"version": "2.8.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
|
||||
"integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
|
||||
"version": "2.8.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz",
|
||||
"integrity": "sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.0",
|
||||
@@ -2901,9 +2910,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/engine.io": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.1.tgz",
|
||||
"integrity": "sha512-ECceEFcAaNRybd3lsGQKas3ZlMVjN3cyWwMP25D2i0zWfyiytVbTpRPa34qrr+FHddtpBVOmq4H/DCv1O0lZRA==",
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.2.tgz",
|
||||
"integrity": "sha512-FKn/3oMiJjrOEOeUub2WCox6JhxBXq/Zn3fZOMCBxKnNYtsdKjxhl7yR3fZhM9PV+rdE75SU5SYMc+2PGzo+Tg==",
|
||||
"dependencies": {
|
||||
"@types/cookie": "^0.4.1",
|
||||
"@types/cors": "^2.8.12",
|
||||
@@ -2914,7 +2923,7 @@
|
||||
"cors": "~2.8.5",
|
||||
"debug": "~4.3.1",
|
||||
"engine.io-parser": "~5.0.3",
|
||||
"ws": "~8.2.3"
|
||||
"ws": "~8.11.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
@@ -2932,6 +2941,26 @@
|
||||
"xmlhttprequest-ssl": "~2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/engine.io-client/node_modules/ws": {
|
||||
"version": "8.2.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
|
||||
"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": "^5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/engine.io-parser": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
|
||||
@@ -2948,6 +2977,26 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/engine.io/node_modules/ws": {
|
||||
"version": "8.11.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
|
||||
"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": "^5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
|
||||
@@ -8781,25 +8830,48 @@
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io": {
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.4.tgz",
|
||||
"integrity": "sha512-m3GC94iK9MfIEeIBfbhJs5BqFibMtkRk8ZpKwG2QwxV0m/eEhPIV4ara6XCF1LWNAus7z58RodiZlAH71U3EhQ==",
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.6.2.tgz",
|
||||
"integrity": "sha512-Vp+lSks5k0dewYTfwgPT9UeGGd+ht7sCpB7p0e83VgO4X/AHYWhXITMrNk/pg8syY2bpx23ptClCQuHhqi2BgQ==",
|
||||
"dependencies": {
|
||||
"accepts": "~1.3.4",
|
||||
"base64id": "~2.0.0",
|
||||
"debug": "~4.3.2",
|
||||
"engine.io": "~6.2.1",
|
||||
"socket.io-adapter": "~2.4.0",
|
||||
"socket.io-parser": "~4.2.1"
|
||||
"engine.io": "~6.4.2",
|
||||
"socket.io-adapter": "~2.5.2",
|
||||
"socket.io-parser": "~4.2.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-adapter": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz",
|
||||
"integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg=="
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz",
|
||||
"integrity": "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==",
|
||||
"dependencies": {
|
||||
"ws": "~8.11.0"
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-adapter/node_modules/ws": {
|
||||
"version": "8.11.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
|
||||
"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": "^5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-client": {
|
||||
"version": "4.5.4",
|
||||
@@ -8816,9 +8888,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-parser": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
|
||||
"integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
|
||||
"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
|
||||
"dependencies": {
|
||||
"@socket.io/component-emitter": "~3.1.0",
|
||||
"debug": "~4.3.1"
|
||||
@@ -10001,15 +10073,15 @@
|
||||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.2.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
|
||||
"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": "^5.0.2"
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
@@ -10806,9 +10878,12 @@
|
||||
"integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
|
||||
},
|
||||
"@types/cors": {
|
||||
"version": "2.8.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
|
||||
"integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
|
||||
"version": "2.8.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz",
|
||||
"integrity": "sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==",
|
||||
"requires": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/estree": {
|
||||
"version": "1.0.0",
|
||||
@@ -12328,9 +12403,9 @@
|
||||
}
|
||||
},
|
||||
"engine.io": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.1.tgz",
|
||||
"integrity": "sha512-ECceEFcAaNRybd3lsGQKas3ZlMVjN3cyWwMP25D2i0zWfyiytVbTpRPa34qrr+FHddtpBVOmq4H/DCv1O0lZRA==",
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.2.tgz",
|
||||
"integrity": "sha512-FKn/3oMiJjrOEOeUub2WCox6JhxBXq/Zn3fZOMCBxKnNYtsdKjxhl7yR3fZhM9PV+rdE75SU5SYMc+2PGzo+Tg==",
|
||||
"requires": {
|
||||
"@types/cookie": "^0.4.1",
|
||||
"@types/cors": "^2.8.12",
|
||||
@@ -12341,13 +12416,19 @@
|
||||
"cors": "~2.8.5",
|
||||
"debug": "~4.3.1",
|
||||
"engine.io-parser": "~5.0.3",
|
||||
"ws": "~8.2.3"
|
||||
"ws": "~8.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"cookie": {
|
||||
"version": "0.4.2",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
|
||||
"integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
|
||||
},
|
||||
"ws": {
|
||||
"version": "8.11.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
|
||||
"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -12361,6 +12442,14 @@
|
||||
"engine.io-parser": "~5.0.3",
|
||||
"ws": "~8.2.3",
|
||||
"xmlhttprequest-ssl": "~2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ws": {
|
||||
"version": "8.2.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
|
||||
"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"engine.io-parser": {
|
||||
@@ -16913,22 +17002,33 @@
|
||||
}
|
||||
},
|
||||
"socket.io": {
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.4.tgz",
|
||||
"integrity": "sha512-m3GC94iK9MfIEeIBfbhJs5BqFibMtkRk8ZpKwG2QwxV0m/eEhPIV4ara6XCF1LWNAus7z58RodiZlAH71U3EhQ==",
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.6.2.tgz",
|
||||
"integrity": "sha512-Vp+lSks5k0dewYTfwgPT9UeGGd+ht7sCpB7p0e83VgO4X/AHYWhXITMrNk/pg8syY2bpx23ptClCQuHhqi2BgQ==",
|
||||
"requires": {
|
||||
"accepts": "~1.3.4",
|
||||
"base64id": "~2.0.0",
|
||||
"debug": "~4.3.2",
|
||||
"engine.io": "~6.2.1",
|
||||
"socket.io-adapter": "~2.4.0",
|
||||
"socket.io-parser": "~4.2.1"
|
||||
"engine.io": "~6.4.2",
|
||||
"socket.io-adapter": "~2.5.2",
|
||||
"socket.io-parser": "~4.2.4"
|
||||
}
|
||||
},
|
||||
"socket.io-adapter": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz",
|
||||
"integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg=="
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz",
|
||||
"integrity": "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==",
|
||||
"requires": {
|
||||
"ws": "~8.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ws": {
|
||||
"version": "8.11.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
|
||||
"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"socket.io-client": {
|
||||
"version": "4.5.4",
|
||||
@@ -16942,9 +17042,9 @@
|
||||
}
|
||||
},
|
||||
"socket.io-parser": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
|
||||
"integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
|
||||
"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
|
||||
"requires": {
|
||||
"@socket.io/component-emitter": "~3.1.0",
|
||||
"debug": "~4.3.1"
|
||||
@@ -17847,9 +17947,9 @@
|
||||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
|
||||
},
|
||||
"ws": {
|
||||
"version": "8.2.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
|
||||
"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"requires": {}
|
||||
},
|
||||
"xmlhttprequest-ssl": {
|
||||
|
||||
+6
-4
@@ -7,9 +7,9 @@
|
||||
"url": "https://axe-web.com/"
|
||||
},
|
||||
"scripts": {
|
||||
"info": "NODE_ENV=development BLOCK_NAME=drinks-slider MODULE_PATH= node debug.js",
|
||||
"dev": "NODE_ENV=development BLOCK_NAME=drinks-slider MODULE_PATH= node server.js",
|
||||
"build-platform": "NODE_ENV=development BLOCK_NAME=drinks-slider MODULE_PATH= node ./build.js",
|
||||
"info": "NODE_ENV=development BLOCK_NAME=header MODULE_PATH= node debug.js",
|
||||
"dev": "NODE_ENV=development BLOCK_NAME=header MODULE_PATH= node server.js",
|
||||
"build-platform": "NODE_ENV=development BLOCK_NAME=header MODULE_PATH= node ./build.js",
|
||||
"dev-dev-tool": "NODE_ENV=development rollup --config rollup.config.js --watch",
|
||||
"build-dev-tool": "rollup --config rollup.config.js"
|
||||
},
|
||||
@@ -42,7 +42,8 @@
|
||||
"plugin-error": "^2.0.0",
|
||||
"prompts": "^2.4.2",
|
||||
"sanitize-html": "^2.7.1",
|
||||
"sass": "^1.50.1"
|
||||
"sass": "^1.50.1",
|
||||
"ws": "^8.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
@@ -57,6 +58,7 @@
|
||||
"rollup-plugin-copy": "^3.4.0",
|
||||
"rollup-plugin-jsx": "^1.0.3",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"socket.io": "^4.6.2",
|
||||
"styled-components": "^5.3.5"
|
||||
},
|
||||
"bin": {
|
||||
|
||||
@@ -19,8 +19,10 @@ import open from "open";
|
||||
import {sanitizeUrl} from "@braintree/sanitize-url";
|
||||
import sanitizeHtml from 'sanitize-html';
|
||||
import {escape} from "lodash-es";
|
||||
import {getBlockConfigs, getConfigs, readJSONFile, zipProject} from "./helpers.js";
|
||||
import {getBlockData, getBlockConfigs, getConfigs, readJSONFile, zipProject} from "./helpers.js";
|
||||
import PluginError from 'plugin-error';
|
||||
import {Server} from "socket.io";
|
||||
import {createServer} from 'http';
|
||||
|
||||
/**
|
||||
* Constants
|
||||
@@ -29,15 +31,24 @@ import PluginError from 'plugin-error';
|
||||
const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs();
|
||||
const blocksRegistry = isDev ? 'http://localhost:3020' : PRODUCTION_REGISTRY_URL;
|
||||
|
||||
const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
|
||||
|
||||
/**
|
||||
* State
|
||||
*/
|
||||
|
||||
let port = 3000; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
|
||||
let previewFrameUrl = `http://localhost:${port}`; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
|
||||
const sessions = [];
|
||||
|
||||
/**
|
||||
* Init server
|
||||
*/
|
||||
|
||||
let port = 3000; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
|
||||
let previewFrameUrl = `http://localhost:${port}`; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
|
||||
const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
|
||||
const app = express();
|
||||
const httpServer = createServer(app);
|
||||
initSessionsServer(httpServer);
|
||||
|
||||
const sass = gulpSass(dartSass);
|
||||
|
||||
const hbs = create({
|
||||
@@ -63,9 +74,8 @@ app.set('views', path.join(modulesPath, 'layouts'));
|
||||
// Routes
|
||||
//
|
||||
|
||||
app.get('/', async (req, res) => {
|
||||
let jsonFileName = req.query.data ? req.query.data : 'default';
|
||||
const data = await getBlockConfigs(jsonFileName, {includeConfigs: true, projectPath, modulesPath, dataFiles});
|
||||
app.get('/', (req, res) => {
|
||||
const data = getBlockConfigs({modulesPath, dataFiles});
|
||||
if (data.error && data.errorMessage) {
|
||||
return res.send(data.errorMessage);
|
||||
}
|
||||
@@ -83,20 +93,14 @@ app.get('/', async (req, res) => {
|
||||
res.render('index', data);
|
||||
});
|
||||
|
||||
app.get('/view/:baseView', async (req, res) => {
|
||||
let jsonFileName = req.query.data ? req.query.data : 'default';
|
||||
const data = await getBlockConfigs(jsonFileName, {includeConfigs: true, projectPath, modulesPath, dataFiles});
|
||||
app.get('/view/:baseView', (req, res) => {
|
||||
const data = {config: getBlockConfigs({modulesPath, dataFiles})};
|
||||
if (data.error && data.errorMessage) {
|
||||
return res.send(data.errorMessage);
|
||||
}
|
||||
|
||||
const blockName = config.has('blockName') ? config.get('blockName') : developmentBlockName;
|
||||
|
||||
data.helpers = {
|
||||
include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
|
||||
include_block_template: () => handlebarLayoutsPath(projectPath, 'src', `${blockName}.template`),
|
||||
section_class: `${blockName}--${jsonFileName}`,
|
||||
base_url: '/',
|
||||
}
|
||||
|
||||
if (!!req.query.iframe) {
|
||||
@@ -110,7 +114,9 @@ app.get('/view/:baseView', async (req, res) => {
|
||||
|
||||
app.get('/publish', async (req, res) => {
|
||||
const data = await readJSONFile(path.join(projectPath, `block.json`));
|
||||
let responseData;
|
||||
let responseData = {
|
||||
uploadUrl: undefined
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`${blocksRegistry}`, {
|
||||
@@ -157,7 +163,7 @@ app.get('/data', async (req, res) => {
|
||||
let jsonDataFileName = req.query.name ? req.query.name : 'default';
|
||||
|
||||
const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
|
||||
const data = await getBlockConfigs(jsonDataFileName, {projectPath, modulesPath, dataFiles});
|
||||
const data = await getBlockData(jsonDataFileName, {projectPath});
|
||||
const designPreviewFiles = getListOfDesignPreviewFiles(jsonDataFileName, await fs.readdir(path.join(projectPath, 'design', 'preview')));
|
||||
|
||||
return res.json({
|
||||
@@ -175,6 +181,9 @@ app.use(express.static(path.join(projectPath, 'src')));
|
||||
app.use(express.static(path.join(projectPath, 'design')));
|
||||
app.use(express.static(path.join(modulesPath, 'layouts')));
|
||||
|
||||
// Custom Middleware
|
||||
app.use(setHeaders);
|
||||
|
||||
// Setup Gulp
|
||||
await buildAssetFiles();
|
||||
|
||||
@@ -209,7 +218,7 @@ function getListOfDesignPreviewFiles(jsonDataFileName, previewFiles) {
|
||||
|
||||
function startBrowserSync() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const listener = app.listen(0, async () => {
|
||||
const listener = httpServer.listen(0, async () => {
|
||||
const PORT = listener.address().port;
|
||||
|
||||
console.log(`The web server has started on port ${PORT}`);
|
||||
@@ -227,8 +236,8 @@ function startBrowserSync() {
|
||||
return cb();
|
||||
}]));
|
||||
|
||||
bs.watch(path.join(projectPath, "src/**/*.hbs"), function (event, file) {
|
||||
browserSyncReload(bs, '', 'Template File Change: ' + file)
|
||||
bs.watch(path.join(projectPath, "src/**/*.hbs"), function () {
|
||||
return syncTemplate(sessions);
|
||||
});
|
||||
|
||||
bs.init({
|
||||
@@ -316,7 +325,7 @@ function buildAssetFiles() {
|
||||
|
||||
// Run first build.
|
||||
return new Promise((resolve) => {
|
||||
gulp.series('build-script-files', 'build-styling-files', function (cb) {
|
||||
gulp.series('build-script-files', 'build-styling-files', function () {
|
||||
resolve();
|
||||
})();
|
||||
});
|
||||
@@ -357,3 +366,27 @@ function handlebarLayoutsPath() {
|
||||
return path.join(...arguments)
|
||||
.replace(/\\/g, '/'); // Windows path issue. Fix all "\" for Handlebars.
|
||||
}
|
||||
|
||||
function initSessionsServer(httpServer) {
|
||||
const io = new Server(httpServer);
|
||||
io.on('connection', async (socket) => {
|
||||
sessions.push(socket);
|
||||
await syncTemplate(sessions);
|
||||
});
|
||||
|
||||
return httpServer;
|
||||
}
|
||||
|
||||
function setHeaders(req, res, next) {
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
next();
|
||||
}
|
||||
|
||||
async function syncTemplate(sessions = []) {
|
||||
const blockName = config.has('blockName') ? config.get('blockName') : developmentBlockName;
|
||||
const hbsTemplate = await fs.readFile(handlebarLayoutsPath(projectPath, 'src', `${blockName}.template.hbs`), 'utf8');
|
||||
|
||||
sessions.forEach(socket => {
|
||||
socket.emit('templateUpdate', {template: hbsTemplate});
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user