AXE-WEB/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

build-wp-block #1

Merged
roman merged 10 commits from build-wp-block into master 2022-11-04 09:49:37 +00:00
Conversation 0 Commits 10 Files Changed 13
+28 -30
3 changed files with 28 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c48420249b - Show all commits
.gitignore
-5
View File
@@ -10,9 +10,4 @@ deploy-*.sh
# Custom # Custom
blocks blocks
config
data
src
exports exports
block.json
design
package.json
+1 -1
View File
@@ -8,7 +8,7 @@
}, },
"scripts": { "scripts": {
"start": "component-dev", "start": "component-dev",
"dev": "NODE_ENV=development node server.js", "dev": "NODE_ENV=development NODE_CONFIG_DIR=blocks/team/config BLOCK_NAME=team node server.js",
"build": "rollup --config rollup.config.js", "build": "rollup --config rollup.config.js",
"build-platform": "NODE_ENV=development node ./build.js", "build-platform": "NODE_ENV=development node ./build.js",
"build-platform-cli": "component-build", "build-platform-cli": "component-build",
server.js
+27 -24
View File
@@ -1,5 +1,6 @@
#!/usr/bin/env node #!/usr/bin/env node
import path from 'path';
import fetch from "node-fetch"; import fetch from "node-fetch";
import express from 'express'; import express from 'express';
import {create} from 'express-handlebars'; import {create} from 'express-handlebars';
@@ -24,10 +25,12 @@ import archiver from 'archiver';
* Constants * Constants
*/ */
const isDev = process.env.NODE_ENV === 'development' || (config.has('isDev') && config.get('isDev')); // Check README file in case you get "missing files" error. 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 ? 'http://localhost:3020' : 'https://axe-web-blocks-registry.captain.devdevdev.life';
const modulePath = isDev ? '' : 'node_modules/block-dev-tool/'; const modulesPath = isDev ? '' : 'node_modules/block-dev-tool';
const projectDir = modulePath;
const developmentBlockName = process.env.BLOCK_NAME;
const projectPath = isDev ? path.join('blocks', developmentBlockName) : '';
const sass = gulpSass(dartSass); const sass = gulpSass(dartSass);
@@ -39,8 +42,8 @@ buildScriptFiles()
*/ */
let port = 3000; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready. 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. 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('./data')); const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
const app = express(); const app = express();
const hbs = create({ const hbs = create({
@@ -60,7 +63,7 @@ const hbs = create({
app.engine('.hbs', hbs.engine); app.engine('.hbs', hbs.engine);
app.set('view engine', '.hbs'); app.set('view engine', '.hbs');
app.set('views', projectDir + 'layouts'); app.set('views', path.join(modulesPath, 'layouts'));
// //
// Routes // Routes
@@ -78,7 +81,7 @@ app.get('/', async (req, res) => {
data.helpers = { data.helpers = {
port, port,
include_partial: (path) => projectDir + path, include_partial: (filesPath) => path.join(modulesPath, filesPath),
baseView, baseView,
previewFrameUrl: `${previewFrameUrl}/${baseViewUrl}`, previewFrameUrl: `${previewFrameUrl}/${baseViewUrl}`,
} }
@@ -93,11 +96,11 @@ app.get('/view/:baseView', async (req, res) => {
return res.send(data.errorMessage); return res.send(data.errorMessage);
} }
const blockName = config.has('blockName') ? config.get('blockName') : 'development'; const blockName = config.has('blockName') ? config.get('blockName') : developmentBlockName;
data.helpers = { data.helpers = {
include_partial: (path) => projectDir + path, include_partial: (filesPath) => path.join(modulesPath, filesPath),
include_block_template: (path) => `src/${blockName}.template`, include_block_template: () => path.join(projectPath, 'src', `${blockName}.template`),
section_class: `${blockName}--${jsonFileName}`, section_class: `${blockName}--${jsonFileName}`,
base_url: '/' base_url: '/'
} }
@@ -108,7 +111,7 @@ app.get('/view/:baseView', async (req, res) => {
}); });
app.get('/publish', async (req, res) => { app.get('/publish', async (req, res) => {
const data = await readJSONFile('./block.json'); const data = await readJSONFile(path.join(projectPath, `block.json`));
let responseData; let responseData;
try { try {
@@ -131,7 +134,7 @@ app.get('/publish', async (req, res) => {
if (responseData.uploadUrl) { if (responseData.uploadUrl) {
await zipProject(); await zipProject();
const body = await fs.readFile('./dist.zip'); const body = await fs.readFile(path.join(projectPath, 'dist.zip'));
const response = await fetch(`${responseData.uploadUrl}`, { const response = await fetch(`${responseData.uploadUrl}`, {
method: 'PUT', method: 'PUT',
body, body,
@@ -141,7 +144,7 @@ app.get('/publish', async (req, res) => {
if (response.status !== 200) { if (response.status !== 200) {
res.json({success: false, message: "Can't upload the archive, permissions error."}); res.json({success: false, message: "Can't upload the archive, permissions error."});
// TODO: Need to update the registry server. // TODO: Need to update the registry server.
await fs.unlink('./dist.zip'); await fs.unlink(path.join(projectPath, 'dist.zip'));
return; return;
} }
} }
@@ -149,15 +152,15 @@ app.get('/publish', async (req, res) => {
res.json({success: true}); res.json({success: true});
await fs.unlink('./dist.zip'); await fs.unlink(path.join(projectPath, 'dist.zip'));
}); });
app.get('/data', async (req, res) => { app.get('/data', async (req, res) => {
let jsonDataFileName = req.query.name ? req.query.name : 'default'; let jsonDataFileName = req.query.name ? req.query.name : 'default';
const data = await getBlockConfigs(jsonDataFileName); const data = await getBlockConfigs(jsonDataFileName);
const dataFiles = prepareListOfDataFiles(await fs.readdir('./data')); const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
const designPreviewFiles = getListOfDesignPreviewFiles(jsonDataFileName, await fs.readdir('./design/preview')); const designPreviewFiles = getListOfDesignPreviewFiles(jsonDataFileName, await fs.readdir(path.join(projectPath, 'design', 'preview')));
return res.json({ return res.json({
dataOptions: dataFiles, dataOptions: dataFiles,
@@ -170,9 +173,9 @@ app.get('/data', async (req, res) => {
app.use(handleSyntaxErrors); app.use(handleSyntaxErrors);
// Static Files // Static Files
app.use(express.static('src')); app.use(express.static(path.join(projectPath, 'src')));
app.use(express.static('design')); app.use(express.static(path.join(projectPath, 'design')));
app.use(express.static(projectDir + 'layouts')); app.use(express.static(path.join(modulesPath, 'layouts')));
// BrowserSync // BrowserSync
const bsOptions = await startBrowserSync(); const bsOptions = await startBrowserSync();
@@ -307,7 +310,7 @@ async function readJSONFile(jsonFile) {
} }
async function getBlockConfigs(jsonFileName = 'default', {includeConfigs} = {}) { async function getBlockConfigs(jsonFileName = 'default', {includeConfigs} = {}) {
let data = await readJSONFile(`./data/${jsonFileName}.json`); let data = await readJSONFile(path.join(projectPath, 'data', `${jsonFileName}.json`));
if (data.error) { if (data.error) {
return data; return data;
} }
@@ -316,7 +319,7 @@ async function getBlockConfigs(jsonFileName = 'default', {includeConfigs} = {})
Object.assign(data, { Object.assign(data, {
config: Object.assign(JSON.parse(JSON.stringify(config)), // The entire config object. config: Object.assign(JSON.parse(JSON.stringify(config)), // The entire config object.
{ {
projectDir, activeDataFile: jsonFileName, dataFiles: dataFiles.map((name) => { projectDir: modulesPath, activeDataFile: jsonFileName, dataFiles: dataFiles.map((name) => {
return { return {
name, active: jsonFileName === name, name, active: jsonFileName === name,
}; };
@@ -372,8 +375,8 @@ async function zipProject() {
// pipe archive data to the file // pipe archive data to the file
archive.pipe(output); archive.pipe(output);
// append files from a sub-directory, putting its contents at the root of archive // append files from a subdirectory, putting its contents at the root of archive
archive.directory('src/', false); archive.directory(path.join(projectPath, 'src', '/'), false);
// finalize the archive (ie we are done appending files but streams have to finish yet) // finalize the archive (ie we are done appending files but streams have to finish yet)
// 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand // 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand
@@ -384,7 +387,7 @@ function handleSyntaxErrors(err, req, res, next) {
if (err) { if (err) {
return res.render('error', { return res.render('error', {
helpers: { helpers: {
include_partial: (path) => projectDir + path, include_partial: (filesPath) => path.join(modulesPath, filesPath),
}, },
err err
}); });