axe-web-public/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added PreviewFiles to devTool server side.

Browse Source
This commit is contained in:
Roman Axelrod
2022-10-13 06:33:08 +03:00
parent 29a75a6e26
commit dfcd9681bc
13 changed files with 94 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -15,3 +15,4 @@ data
src
exports
block.json
design
create-block.js
+18 -16
View File
@@ -6,7 +6,7 @@ import fetch from "node-fetch";
import fs from "fs";
import http from "http";
import https from "https";
import unzipper from "unzipper";
import StreamZip from "node-stream-zip";
import {fileURLToPath} from 'url';
import memFs from 'mem-fs';
import editor from 'mem-fs-editor';
@@ -17,7 +17,7 @@ const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const isDev = process.env.NODE_ENV === 'development'; // Check README file in case you get "missing files" error.
const blocksRegistry = isDev ? 'http://localhost:3020' : 'https://axe-web-blocks-registry.captain.devdevdev.life';
const blocksRegistry = isDev ? 'https://axe-web-blocks-registry.captain.devdevdev.life' : 'https://axe-web-blocks-registry.captain.devdevdev.life';
const blocksDirectory = isDev ? 'blocks/' : '';
if (isDev) {
@@ -28,7 +28,7 @@ try {
const blockName = await init();
console.log(`🎉 Done! \n\nCheck the "${blocksDirectory}${blockName}" directory. \n`);
} catch (e) {
console.log('Fail.');
console.log(`❌ Fail.`);
}
async function init() {
@@ -69,24 +69,26 @@ async function getBlockSourceFiles(blockName) {
return;
}
const zipFile = await downloadFile(responseData.downloadUrl, responseData.name + '.zip');
await fs.createReadStream(zipFile)
.pipe(unzipper.Extract({path: `${blocksDirectory}${responseData.name}/src`}))
.promise();
if (responseData.status && responseData.status !== 200) {
console.log("⚠️ [ERROR]", responseData.message || "Server side error.");
throw new Error("⚠️ [ERROR]", responseData.message || "Server side error.");
}
// Remove downloaded file.
console.log(`⬇️ Downloading v${responseData.version}`);
const zipFile = await downloadFile(responseData.downloadUrl, responseData.name + '.zip');
// Download, Extract and Remove downloaded file.
try {
const zip = new StreamZip.async({file: zipFile});
await zip.extract(null, `${blocksDirectory}${responseData.name}/src`);
await zip.close();
await fs.promises.access(zipFile, fs.constants.W_OK);
await fs.promises.unlink(zipFile);
} catch (e) {
console.log(e)
throw e;
}
if (responseData.statusCode && responseData.statusCode !== 200) {
console.log(responseData);
console.log("⚠️ [ERROR]", responseData.message || "Server side error.");
return;
}
await createTechnicalFiles({
title: responseData.title,
@@ -145,8 +147,8 @@ async function createDataFiles(blockName, dataSources = []) {
if (typeof source.preview_images !== 'undefined' && source.preview_images.length) {
for (let preview_image of source.preview_images) {
await setupPath(`${blocksDirectory}${blockName}/design`);
await downloadFile(preview_image.url, `${blocksDirectory}${blockName}/design/${source.name}-${preview_image.width}.${preview_image.extension}`)
await setupPath(`${blocksDirectory}${blockName}/design/preview`);
await downloadFile(preview_image.url, `${blocksDirectory}${blockName}/design/preview/${source.name}.${preview_image.width}.${preview_image.extension}`)
}
}
}
layouts/scripts/dist/index.min.js
Vendored
+16 -2
View File
@@ -11480,6 +11480,14 @@ const SidebarDataOptionsStyle = qe.div`
}
`;
function DesignPreview(props = {}) {
return /*#__PURE__*/React.createElement("span", {
style: {
color: '#999'
}
}, "Preview");
}
function DataOptions(props = {}) {
props.rootAttributes = props.rootAttributes ?? {};
const initialState = {
@@ -11513,10 +11521,16 @@ function DataOptions(props = {}) {
const handleBlur = async e => (await isClickOutside(e)) ? closeSidebar() : null;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SidebarButtonToggleStyle, {
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
gap: '1rem',
alignItems: 'center'
}
}, /*#__PURE__*/React.createElement(SidebarButtonToggleStyle, {
onClick: () => openSidebar(),
title: "Open a Sidebar with Data Options"
}, "#"), /*#__PURE__*/React.createElement(SidebarStyle, {
}), /*#__PURE__*/React.createElement(DesignPreview, null), /*#__PURE__*/React.createElement(SidebarStyle, {
className: sidebarOpen ? 'active sidebar-active' : '',
tabIndex: "0",
onBlur: handleBlur
layouts/scripts/dist/index.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
layouts/scripts/dist/toolbar/images/icon-open-new-tab.svg
Vendored
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="#21252d">
<path
d="M9.5 43.05q-1.85 0-3.2-1.35t-1.35-3.2v-29q0-1.9 1.35-3.25T9.5 4.9h13.35v4.6H9.5v29h29V25.15h4.6V38.5q0 1.85-1.35 3.2t-3.25 1.35ZM20.3 30.9l-3.15-3.2 18.2-18.2h-9.5V4.9H43.1v17.25h-4.6V12.7Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 294 B

layouts/scripts/toolbar/data-options/DataOptions.jsx
+5 -3
View File
@@ -7,6 +7,7 @@ import {
SidebarStyle,
} from "./data-options.style.js";
import {isClickOutside, isEscHit} from "../responsive-button/ResponsiveButton.jsx";
import {DesignPreview} from "./DesignPreview.jsx";
function DataOptions(props = {}) {
props.rootAttributes = props.rootAttributes ?? {};
@@ -41,8 +42,9 @@ function DataOptions(props = {}) {
const handleBlur = async (e) => await isClickOutside(e) ? closeSidebar() : null;
return <>
<SidebarButtonToggleStyle onClick={() => openSidebar()} title="Open a Sidebar with Data Options">#</SidebarButtonToggleStyle>
return <div style={{display: 'flex', gap: '1rem', alignItems: 'center'}}>
<SidebarButtonToggleStyle onClick={() => openSidebar()} title="Open a Sidebar with Data Options"/>
<DesignPreview/>
<SidebarStyle className={sidebarOpen ? 'active sidebar-active' : ''} tabIndex='0' onBlur={handleBlur}>
<SidebarHeaderStyle>
@@ -66,7 +68,7 @@ function DataOptions(props = {}) {
<pre>{JSON.stringify(state.data, null, 2)}</pre>
}
</SidebarStyle>
</>;
</div>;
function openSidebar() {
setSidebarOpen(true);
layouts/scripts/toolbar/data-options/DesignPreview.jsx
+5
View File
@@ -0,0 +1,5 @@
import React, {useCallback, useEffect, useState} from 'react';
export function DesignPreview(props = {}) {
return <span style={{color: '#999'}}>Preview</span>
}
layouts/styles/page--main.css
+1 -1
View File
@@ -94,7 +94,7 @@ body {
display: block;
}
}
.page_toolbar__right {
.page_toolbar__left, .page_toolbar__right {
display: flex;
align-items: center;
gap: 1rem;
layouts/styles/page--main.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EACE;EACA;EACA;;;AGvEJ;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AHyDJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"page--main.css"}
{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;;;AGxEJ;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AH0DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"page--main.css"}
layouts/styles/page--main.scss
+1
View File
@@ -66,6 +66,7 @@ body {
}
}
&__left,
&__right {
display: flex;
align-items: center;
package-lock.json
Generated
+18
View File
@@ -29,6 +29,7 @@
"mem-fs-editor": "^9.5.0",
"mkdirp": "^1.0.4",
"node-fetch": "^3.2.10",
"node-stream-zip": "^1.15.0",
"open": "^8.4.0",
"sanitize-html": "^2.7.1",
"sass": "^1.50.1",
@@ -7948,6 +7949,18 @@
"integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
"peer": true
},
"node_modules/node-stream-zip": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/node-stream-zip/-/node-stream-zip-1.15.0.tgz",
"integrity": "sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw==",
"engines": {
"node": ">=0.12.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/antelle"
}
},
"node_modules/nopt": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
@@ -18852,6 +18865,11 @@
"integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
"peer": true
},
"node-stream-zip": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/node-stream-zip/-/node-stream-zip-1.15.0.tgz",
"integrity": "sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw=="
},
"nopt": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
package.json
+2 -2
View File
@@ -39,10 +39,10 @@
"mem-fs-editor": "^9.5.0",
"mkdirp": "^1.0.4",
"node-fetch": "^3.2.10",
"node-stream-zip": "^1.15.0",
"open": "^8.4.0",
"sanitize-html": "^2.7.1",
"sass": "^1.50.1",
"unzipper": "^0.10.11"
"sass": "^1.50.1"
},
"devDependencies": {
"@babel/preset-react": "^7.18.6",
server.js
+21
View File
@@ -145,19 +145,40 @@ app.get('/publish', async (req, res) => {
await fs.unlink('./dist.zip');
});
function getListOfDesignPreviewFiles(jsonDataFileName, previewFiles) {
return previewFiles
.filter(fileName => {
return fileName.startsWith(jsonDataFileName + '.');
})
.map(fileName => {
const fileData = fileName.split('.');
const fileFormat = fileData.pop();
const previewSize = fileData.pop();
return {
dataSource: jsonDataFileName,
widthDimension: Number.parseInt(previewSize, 10),
url: `/preview/${fileName}`,
};
});
}
app.get('/data', async (req, res) => {
let jsonDataFileName = req.query.name ? req.query.name : 'default';
const data = await getBlockConfigs(jsonDataFileName);
const dataFiles = prepareListOfDataFiles(await fs.readdir('./data'));
const designPreviewFiles = getListOfDesignPreviewFiles(jsonDataFileName, await fs.readdir('./design/preview'));
return res.json({
dataOptions: dataFiles,
designPreview: designPreviewFiles,
data,
});
});
app.use(express.static('src'));
app.use(express.static('design'));
app.use(express.static(projectDir + 'layouts'));
const listener = app.listen(0, async () => {