@total_onion/onion-library 3.2.0 → 3.2.1

package/createNewChildBlock2.js

@@ -0,0 +1,140 @@
+import 'dotenv/config';
+import fs from 'node:fs';
+import {globSync} from 'glob';
+import {exec} from 'node:child_process';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import yaml from 'js-yaml';
+import axios from 'axios';
+import acfTemplate from './new-block-templates/template-acf-pattern.js';
+import acfTemplateScss from './new-block-templates/template-scss-blank.js';
+import acfTemplateJs from './new-block-templates/template-js-blank.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
+
+const yamlData = yaml.load(fs.readFileSync('../../../../.lando.yml', 'utf8'));
+const siteName = yamlData.config.site;
+const parentURL = process.env.DESIGN_MULTIDEV
+	? `${process.env.DESIGN_MULTIDEV}/wp-admin/admin-ajax.php`
+	: `http://${siteName}.lndo.site/wp-admin/admin-ajax.php`;
+
+const srcPathJs = path.join(__dirname, 'components');
+const srcPathScss = path.join(__dirname, 'components');
+
+let projectName = 'Global Theme';
+const projectJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+if (projectJson) {
+	projectName = projectJson.name;
+	if (projectName.slice(0, 3) === 'the') {
+		const prefix =
+			projectName.slice(0, 3).charAt(0).toUpperCase() +
+			projectName.slice(0, 3).slice(1);
+		projectName = `${prefix} ${
+			projectName.slice(3).charAt(0).toUpperCase() +
+			projectName.slice(3).slice(1)
+		}`;
+	} else {
+		projectName = `${
+			projectName.charAt(0).toUpperCase() + projectName.slice(1)
+		}`;
+	}
+}
+
+const dynamicEntryPoints = globSync(`${themePath}/assets/js/blocks/*.js`).map(
+	(filePath) => {
+		const assetKey = filePath
+			.replace('assets/js/blocks/', '')
+			.replace('.js', '');
+		return assetKey;
+	}
+);
+const newBlockName = process.argv[2]?.toLowerCase();
+const patternID = process.argv[3];
+
+if (!newBlockName) {
+	console.log('Did you forget to give the new block a name?');
+	process.exit(1);
+}
+if (!patternID) {
+	console.log('Did you forget to supply the pattern ID?');
+	process.exit(1);
+}
+
+fs.writeFileSync(
+	`${themePath}/inc/acf-blocks/${newBlockName}.php`,
+	acfTemplate(newBlockName, projectName)
+);
+
+const blockName = 'group-container-v3';
+
+const fullPath = path.join(srcPathJs, `block-${blockName}`, `${blockName}.js`);
+
+const jsdir = 'Assets/js/blocks/';
+const scssdir = 'Assets/scss/blocks/';
+
+if (!fs.existsSync(`${jsdir}/${newBlockName}.js`)) {
+	fs.writeFileSync(
+		`${jsdir}/${newBlockName}.js`,
+		acfTemplateJs(newBlockName)
+	);
+	console.log(`👑👑\x1b[32m Successfully created the js file! 👑👑`);
+}
+
+if (!fs.existsSync(`${scssdir}/${newBlockName}.scss`)) {
+	fs.writeFileSync(
+		`${scssdir}/${newBlockName}.scss`,
+		acfTemplateScss(newBlockName)
+	);
+	console.log(`👑👑\x1b[32m Successfully created the scss file! 👑👑`);
+}
+
+const data = new FormData();
+data.append('action', 'get_pattern_block');
+data.append('postID', patternID);
+
+const headers = {
+	headers: {
+		'user-agent':
+			'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36'
+	}
+};
+
+axios.post(parentURL, data, headers).then(function (response) {
+	fs.writeFileSync(
+		`${themePath}/views/blocks/${newBlockName}.twig`,
+		response.data.html
+	);
+	fs.readFile(
+		`${themePath}/views/blocks/${newBlockName}.twig`,
+		'utf-8',
+		(err, contents) => {
+			if (err) throw err;
+			const regEx = RegExp(
+				String.raw`(${blockName.replaceAll(/( |-)/g, '')})`,
+				'gi'
+			);
+
+			const replaced = contents
+				.replaceAll(
+					regEx,
+					`${newBlockName.toLowerCase().replaceAll(/( |-)/g, '')}`
+				)
+				.replace(/(?<!sub-)group-container-v3/g, `${newBlockName}`);
+			fs.writeFile(
+				`${themePath}/views/blocks/${newBlockName}.twig`,
+				replaced,
+				'utf-8',
+				function (err) {
+					if (err) throw err;
+					console.log(
+						`👑👑\x1b[32m Successfully did searcha and replace on the twig file! 👑👑`
+					);
+					console.log(
+						`👑 👑 👑 Hurrah! You made a new child block called ${newBlockName} 👑 👑 👑`
+					);
+				}
+			);
+		}
+	);
+});

package/createPreviewScss.js

@@ -0,0 +1,35 @@
+import 'dotenv/config';
+import fs from 'node:fs';
+import {globSync} from 'glob';
+import path from 'node:path';
+
+const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
+
+// Create the directory path for the target file
+const scssModulePath = path.join(themePath, 'assets/scss/modules');
+const scssFilePath = path.join(scssModulePath, 'dynamicBlocksPreview.scss');
+
+// Create directories if they don't exist
+fs.mkdirSync(scssModulePath, {recursive: true});
+
+// Write the initial content to the target file
+fs.writeFileSync(
+	scssFilePath,
+	'// This file is auto-generated. To include assets for the lazyloader, just add your .scss file to Assets/scss/blocks/ and it will be included here.\n'
+);
+
+const dynamicEntryPoints = globSync(
+	`${themePath}/assets/scss/blocks/*.scss`
+).map((filePath) => {
+	const assetPath = filePath.replace(
+		'assets/scss/blocks/',
+		'Assets/scss/blocks/'
+	);
+	return assetPath;
+});
+
+const stream = fs.createWriteStream(scssFilePath, {flags: 'a'});
+dynamicEntryPoints.forEach((entry) => {
+	stream.write(`@use '${entry}';\n`);
+});
+stream.end();

package/datalayer-tools.mjs

@@ -0,0 +1,2 @@
+//This Module is WIP
+export function exampleFunction() {}

package/duplicateBlock.js

@@ -0,0 +1,123 @@
+import 'dotenv/config';
+import fs from 'node:fs';
+import path from 'node:path';
+import {globSync} from 'glob';
+import yargs from 'yargs/yargs';
+const templateOptions = yargs(process.argv.slice(2)).argv._;
+const themePath =
+	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
+const srcPathJs = `${themePath}/assets/js/blocks`;
+const srcPathScss = `${themePath}/assets/scss/blocks`;
+const srcPathTwig = `${themePath}/views/blocks`;
+const srcPathBlockJson = `${themePath}/inc/acf-blocks`;
+const newName = templateOptions[1];
+
+const exisitingBlockNames = [
+	...globSync(`${themePath}/assets/js/blocks/*.js`).map((p) =>
+		path.basename(p, '.js')
+	),
+	...globSync(`${themePath}/inc/acf-blocks/*/block.json`).map((p) =>
+		path.basename(path.dirname(p))
+	)
+];
+
+const blockName = templateOptions[0];
+
+if (!blockName) {
+	console.log(
+		"\x1b[33m 🤔🤔 Hmmm...You dont't seem to have chosen a block to duplicate. 🤔🤔 \x1b[0m"
+	);
+	process.exit(1);
+}
+if (!newName) {
+	console.log(
+		'\x1b[33m 🤓🤓 Nearly there! Unfortunately you forgot to choose a new name for your duplicate block. 🤓🤓 \x1b[0m'
+	);
+	process.exit(1);
+}
+
+if (blockName === newName) {
+	console.log(
+		'\x1b[33m Oh no! 😱😱😱 Your new block name cannot be the same as the original block name! \x1b[0m'
+	);
+	process.exit(1);
+}
+
+if (exisitingBlockNames.includes(blockName)) {
+	if (fs.existsSync(`${srcPathJs}/${blockName}.js`)) {
+		const contents = fs.readFileSync(
+			`${srcPathJs}/${blockName}.js`,
+			'utf-8'
+		);
+		const regEx = RegExp(
+			String.raw`(${blockName.replaceAll(/( |-)/g, '')})`,
+			'gi'
+		);
+		const replaced = contents
+			.replaceAll(
+				regEx,
+				`${newName.toLowerCase().replaceAll(/( |-)/g, '')}`
+			)
+			.replaceAll(`blocks/${blockName}`, `blocks/${newName}`);
+		fs.writeFileSync(`${srcPathJs}/${newName}.js`, replaced, 'utf-8');
+		console.log(`👑👑\x1b[32m Successfully duplicated the js file! 👑👑`);
+	}
+	if (fs.existsSync(`${srcPathScss}/${blockName}.scss`)) {
+		const contents = fs.readFileSync(
+			`${srcPathScss}/${blockName}.scss`,
+			'utf-8'
+		);
+		const replaced = contents.replaceAll(`${blockName}`, `${newName}`);
+		fs.writeFileSync(`${srcPathScss}/${newName}.scss`, replaced, 'utf-8');
+		console.log(`👑👑\x1b[32m Successfully duplicated the scss file! 👑👑`);
+	}
+	if (fs.existsSync(`${srcPathScss}/${blockName}-inline.scss`)) {
+		const contents = fs.readFileSync(
+			`${srcPathScss}/${blockName}-inline.scss`,
+			'utf-8'
+		);
+		const replaced = contents.replaceAll(`${blockName}`, `${newName}`);
+		fs.writeFileSync(
+			`${srcPathScss}/${newName}-inline.scss`,
+			replaced,
+			'utf-8'
+		);
+		console.log(
+			`👑👑\x1b[32m Successfully duplicated the inline scss file! 👑👑`
+		);
+	}
+	if (fs.existsSync(`${srcPathTwig}/${blockName}.twig`)) {
+		const contents = fs.readFileSync(
+			`${srcPathTwig}/${blockName}.twig`,
+			'utf-8'
+		);
+		const replaced = contents.replaceAll(blockName, newName);
+		fs.writeFileSync(`${srcPathTwig}/${newName}.twig`, replaced, 'utf-8');
+		console.log(`👑👑\x1b[32m Successfully duplicated the twig file! 👑👑`);
+	}
+	if (fs.existsSync(`${srcPathBlockJson}/${blockName}/block.json`)) {
+		const contents = fs.readFileSync(
+			`${srcPathBlockJson}/${blockName}/block.json`,
+			'utf-8'
+		);
+		const data = JSON.parse(contents);
+		data.name = `acf/${newName}`;
+		data.title = newName
+			.split('-')
+			.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+			.join(' ');
+		if (data.description) {
+			data.description = data.description.replaceAll(blockName, newName);
+		}
+		fs.mkdirSync(`${srcPathBlockJson}/${newName}`, {recursive: true});
+		fs.writeFileSync(
+			`${srcPathBlockJson}/${newName}/block.json`,
+			JSON.stringify(data, null, '\t'),
+			'utf-8'
+		);
+		console.log(
+			`👑👑\x1b[32m Successfully duplicated the block.json file! 👑👑`
+		);
+	}
+	console.log(`\x1b[32m 🎉 Block '${newName}' created successfully! \x1b[0m`);
+}

package/esbuild.mjs

@@ -0,0 +1,87 @@
+import * as esbuild from "esbuild";
+import { sassPlugin } from "esbuild-sass-plugin";
+import assets from "./public/assetList.mjs";
+import postcss from "postcss";
+import autoprefixer from "autoprefixer";
+import postcssPresetEnv from "postcss-preset-env";
+
+const scssSources = assets.filter((a) => a.endsWith(".scss"));
+const cssSources = assets.filter((a) => a.endsWith(".css"));
+const jsSources = assets.filter((a) => /\.(?:js|mjs)$/.test(a));
+
+function flattenPath(p) {
+	return p
+		.replace(/^\.\//, "")
+		.replace(/^public\//, "")
+		.replace(/^components\//, "");
+}
+
+const scssEntries = scssSources.reduce((acc, src) => {
+	acc[flattenPath(src).replace(/\.scss$/i, "")] = src;
+	return acc;
+}, {});
+const cssEntries = cssSources.reduce((acc, src) => {
+	acc[flattenPath(src).replace(/\.css$/i, "")] = src;
+	return acc;
+}, {});
+const jsEntries = jsSources.reduce((acc, src) => {
+	acc[flattenPath(src).replace(/\.(?:js|mjs)$/i, "")] = src;
+	return acc;
+}, {});
+
+await esbuild.build({
+	entryPoints: ["./public/publicBundleBase.scss"],
+	plugins: [
+		sassPlugin({
+			async transform(source) {
+				const { css } = await postcss([
+					autoprefixer,
+					postcssPresetEnv({ stage: 3 }),
+				]).process(source);
+				return css;
+			},
+		}),
+	],
+	bundle: false,
+	outdir: "./public",
+});
+
+await esbuild.build({
+	entryPoints: scssEntries,
+	plugins: [
+		sassPlugin({
+			async transform(source) {
+				const { css } = await postcss([
+					autoprefixer,
+					postcssPresetEnv({ stage: 3, from: "css" }),
+				]).process(source);
+				return css;
+			},
+		}),
+	],
+	bundle: false,
+	outdir: "./public",
+});
+
+await esbuild.build({
+	entryPoints: cssEntries,
+	plugins: [
+		sassPlugin({
+			async transform(source) {
+				const { css } = await postcss([
+					autoprefixer,
+					postcssPresetEnv({ stage: 3 }),
+				]).process(source);
+				return css;
+			},
+		}),
+	],
+	bundle: false,
+	outdir: "./public",
+});
+
+await esbuild.build({
+	entryPoints: jsEntries,
+	bundle: false,
+	outdir: "./public",
+});

package/exportAllBlocks.js

@@ -0,0 +1,147 @@
+import 'dotenv/config';
+import fs from 'node:fs';
+import {globSync} from 'glob';
+import yargs from 'yargs/yargs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import compressing from 'compressing';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const templateOptions = yargs(process.argv.slice(2)).argv._;
+const themePath =
+	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
+const srcPathJs = `${themePath}/assets/js/blocks/`;
+const srcPathScss = `${themePath}/assets/scss/blocks/`;
+const srcPathTwig = `${themePath}/views/blocks/`;
+const srcPathPhp = `${themePath}/inc/acf-blocks/`;
+const srcPathVue = `${themePath}/assets/vue/blocks/`;
+const destPath = path.join(__dirname, '../../../exported-blocks/');
+const component_list_file = path.join(
+	__dirname,
+	'../../../project-components-list.json'
+);
+const destinationProject = templateOptions[0];
+let blocks = [];
+
+try {
+	blocks = JSON.parse(fs.readFileSync(component_list_file, 'utf8'));
+} catch (e) {
+	console.error('Component list file error : ' + e);
+	process.exit(1);
+}
+
+const dynamicEntryPointsJs = globSync(`${themePath}/assets/js/blocks/*.js`).map(
+	(path) => {
+		const assetKey = path
+			.replace('assets/js/blocks/', '')
+			.replace('.js', '');
+		return assetKey;
+	}
+);
+
+const compressDone = (name) => {
+	if (!destinationProject) {
+		return;
+	}
+	fs.rmSync(`../../../exported-blocks/${name}`, {recursive: true});
+	if (fs.existsSync(`../${destinationProject}/exported-blocks/`)) {
+		fs.copyFileSync(
+			path.join(__dirname, `../../../exported-blocks/${name}.zip`),
+			path.join(
+				__dirname,
+				`.../../.././${destinationProject}/exported-blocks/${name}.zip`
+			)
+		);
+	} else {
+		console.log('the destination does not exist!');
+	}
+};
+
+function copyBlockJson(name) {
+	const existingAcfFiles = globSync(`${themePath}/acf-json/*.json`).map(
+		(path) => {
+			const assetKey = path.replace('assets/js/blocks/', '');
+			return assetKey;
+		}
+	);
+
+	existingAcfFiles.forEach((file, index) => {
+		let rawdata = fs.readFileSync(file);
+		let blockData = JSON.parse(rawdata);
+		const title = blockData.title
+			.replace('Block: ', '')
+			.replace(' - Library', '')
+			.replaceAll(' ', '-')
+			.toLowerCase();
+		if (title === name) {
+			const fileName = existingAcfFiles[index].replace(
+				`${themePath}/acf-json/`,
+				''
+			);
+			fs.copyFileSync(
+				existingAcfFiles[index],
+				path.join(
+					__dirname,
+					`../../../exported-blocks/${name}/${fileName}`
+				)
+			);
+			return;
+		}
+	});
+}
+
+const handleError = (err) => console.error(err);
+// const blockName = templateOptions[0];
+
+blocks.block.forEach((blockName) => {
+	if (dynamicEntryPointsJs.includes(blockName)) {
+		const dir = path.join(
+			__dirname,
+			`../../../exported-blocks/${blockName}/`
+		);
+
+		if (!fs.existsSync(dir)) {
+			fs.mkdirSync(dir, {recursive: true});
+			fs.copyFileSync(
+				`${srcPathJs}${blockName}.js`,
+				`${dir}${blockName}.js`
+			);
+			fs.copyFileSync(
+				`${srcPathScss}${blockName}.scss`,
+				`${dir}${blockName}.scss`
+			);
+			fs.copyFileSync(
+				`${srcPathTwig}${blockName}.twig`,
+				`${dir}${blockName}.twig`
+			);
+			fs.copyFileSync(
+				`${srcPathPhp}${blockName}.php`,
+				`${dir}${blockName}.php`
+			);
+			if (fs.existsSync(`${srcPathVue}${blockName}.vue`)) {
+				fs.copyFileSync(
+					`${srcPathVue}${blockName}.vue`,
+					`${dir}${blockName}.vue`
+				);
+			}
+			copyBlockJson(blockName);
+			compressing.zip
+				.compressDir(
+					path.join(
+						__dirname,
+						`../../../exported-blocks/${blockName}`
+					),
+					path.join(
+						__dirname,
+						`../../../exported-blocks/${blockName}.zip`
+					)
+				)
+				.then(compressDone(blockName))
+				.catch(handleError);
+		} else {
+			console.log(
+				`Did not export as there was a zip file called ${blockName} already present in exported-blocks folder`
+			);
+		}
+	}
+});

package/exportBlock.js

@@ -0,0 +1,109 @@
+import 'dotenv/config';
+import fs from 'node:fs';
+import {globSync} from 'glob';
+import yargs from 'yargs/yargs';
+import compressing from 'compressing';
+const templateOptions = yargs(process.argv.slice(2)).argv._;
+const themePath =
+	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
+console.log('🚀 ~ themePath:', themePath);
+const srcPathJs = `${themePath}/assets/js/blocks/`;
+const srcPathScss = `${themePath}/assets/scss/blocks/`;
+const srcPathTwig = `${themePath}/views/blocks/`;
+const srcPathPhp = `${themePath}/inc/acf-blocks/`;
+const srcPathVue = `${themePath}/assets/vue/blocks/`;
+const destPath = '../../../../exported-blocks/';
+const destinationProject = templateOptions[1];
+
+const dynamicEntryPointsJs = globSync(`${themePath}/assets/js/blocks/*.js`).map(
+	(path) => {
+		const assetKey = path
+			.replace('assets/js/blocks/', '')
+			.replace('.js', '');
+		return assetKey;
+	}
+);
+
+const compressDone = () => {
+	fs.rmSync(`../../../../exported-blocks/${blockName}`, {recursive: true});
+	if (!destinationProject) {
+		return;
+	}
+	if (fs.existsSync(`../${destinationProject}/exported-blocks/`)) {
+		fs.copyFileSync(
+			`../../../../exported-blocks/${blockName}.zip`,
+			`.../../../.././${destinationProject}/exported-blocks/${blockName}.zip`
+		);
+	} else {
+		console.log('the destination does not exist!');
+	}
+};
+
+function copyBlockJson(name) {
+	const existingAcfFiles = globSync(`${themePath}/acf-json/*.json`).map(
+		(path) => {
+			const assetKey = path.replace('assets/js/blocks/', '');
+			return assetKey;
+		}
+	);
+
+	existingAcfFiles.forEach((file, index) => {
+		let rawdata = fs.readFileSync(file);
+		let blockData = JSON.parse(rawdata);
+		const title = blockData.title
+			.replace('Block: ', '')
+			.replace(' - Library', '')
+			.replaceAll(' ', '-')
+			.toLowerCase();
+		if (title === blockName) {
+			const fileName = existingAcfFiles[index].replace(`acf-json/`, '');
+			fs.copyFileSync(
+				existingAcfFiles[index],
+				`../../../../exported-blocks/${blockName}/${fileName}`
+			);
+			return;
+		}
+	});
+}
+
+const handleError = (err) => console.error(err);
+const blockName = templateOptions[0];
+
+if (dynamicEntryPointsJs.includes(blockName)) {
+	const dir = `${destPath}${blockName}/`;
+
+	if (!fs.existsSync(dir)) {
+		fs.mkdirSync(dir);
+		fs.copyFileSync(`${srcPathJs}${blockName}.js`, `${dir}${blockName}.js`);
+		fs.copyFileSync(
+			`${srcPathScss}${blockName}.scss`,
+			`${dir}${blockName}.scss`
+		);
+		fs.copyFileSync(
+			`${srcPathTwig}${blockName}.twig`,
+			`${dir}${blockName}.twig`
+		);
+		fs.copyFileSync(
+			`${srcPathPhp}${blockName}.php`,
+			`${dir}${blockName}.php`
+		);
+		if (fs.existsSync(`${srcPathVue}${blockName}.vue`)) {
+			fs.copyFileSync(
+				`${srcPathVue}${blockName}.vue`,
+				`${dir}${blockName}.vue`
+			);
+		}
+		copyBlockJson(blockName);
+		compressing.zip
+			.compressDir(
+				`../../../../exported-blocks/${blockName}`,
+				`../../../../exported-blocks/${blockName}.zip`
+			)
+			.then(compressDone)
+			.catch(handleError);
+	} else {
+		console.log(
+			`Did not export as there was a zip file called ${blockName} already present in exported-blocks folder`
+		);
+	}
+}