@total_onion/onion-library 3.1.0 → 3.2.1

package/__spec__/copyBlockComponent.spec.js

@@ -1,9 +1,9 @@
-const fs = require('fs');
-const path = require('path');
-const { promisify } = require('util');
+import fs from 'node:fs';
+import path from 'node:path';
+import { promisify } from 'node:util';
 
 // Import the function to be tested
-const updateComponent = require('../update-component');
+import updateComponent from '../update-component.js';
 
 // Promisify the fs functions used in the copyBlockComponent function
 const readdirPromisified = promisify(fs.readdir);

package/__spec__/copyFile.spec.js

@@ -1,8 +1,8 @@
 'use strict';
 
-const fs = require('fs');
-const path = require('path');
-const updateComponent = require('../update-component');
+import fs from 'node:fs';
+import path from 'node:path';
+import updateComponent from '../update-component.js';
 
 
 describe('copyFile function', () => {

package/__spec__/copyFileKeeping.spec.js

@@ -1,8 +1,8 @@
 'use strict';
 
-const fs = require('fs');
-// const path = require('path');
-const updateComponent = require('../update-component');
+import fs from 'node:fs';
+// import path from 'node:path';
+import updateComponent from '../update-component.js';
 
 describe('copyFileKeeping', () => {
 	const sourceFilePath = './__spec__/files/source.txt';

package/__spec__/update-all-components.spec.js

@@ -1,8 +1,8 @@
 'use strict';
 
-const glob = require('glob');
+import * as glob from 'glob';
 const fs = jest.mock('fs');
-const updateAllComponents = require('../update-all-components');
+import updateAllComponents from '../update-all-components.js';
 
 describe('getComponentsList', () => {
 	afterEach(() => {

package/__spec__/update-component.spec.js

@@ -1,11 +1,11 @@
 'use strict';
 
-// const glob = require('glob');
-const fs = require('fs');
+// import * as glob from 'glob';
+import fs from 'node:fs';
 // const fse = require("fs-extra");
 
-// const path = require('path');
-const updateComponent = require('../update-component');
+// import path from 'node:path';
+import updateComponent from '../update-component.js';
 
 jest.mock('fs');
 

package/assembleAssetList.js

@@ -1,6 +1,6 @@
-const fs = require('fs');
-const path = require('path');
-const {globSync} = require('glob');
+import fs from 'node:fs';
+import path from 'node:path';
+import {globSync} from 'glob';
 
 const dynamicEntryPointsJs = globSync(`./components/block-*/*-v3.js`).map(
 	(filePath) => {

package/checkBuildAssets.js

@@ -1,18 +1,17 @@
-/* eslint-disable global-require */
-require('dotenv').config();
-const fs = require( 'fs' );
+import 'dotenv/config';
+import fs from 'node:fs';
+import {fork} from 'node:child_process';
+
 const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
 
 const paths = {
-	createJsAssets:
-		`${themePath}/assets/js/modules/jsAssets.js`,
-	createPreviewScss:
-	`${themePath}/assets/scss/modules/dynamicBlocksPreview.scss`,
+	createJsAssets: `${themePath}/assets/js/modules/jsAssets.js`,
+	createPreviewScss: `${themePath}/assets/scss/modules/dynamicBlocksPreview.scss`,
 };
 
-Object.keys( paths ).forEach( ( key ) => {
-	if ( ! fs.existsSync( paths[ key ] ) ) {
-		console.log( `creating missing assets with ${ key }` );
-		require( 'child_process' ).fork( `./node_modules/@pernod-ricard-global-cms/jsbuildutils/${ key }.js` );
+Object.keys(paths).forEach((key) => {
+	if (!fs.existsSync(paths[key])) {
+		console.log(`creating missing assets with ${key}`);
+		fork(`./node_modules/@pernod-ricard-global-cms/jsbuildutils/${key}.js`);
 	}
-} );
+});

package/createDynamicBlockScss-v3.js

@@ -1,7 +1,7 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const path = require('path');
+import 'dotenv/config';
+import fs from 'node:fs';
+import {globSync} from 'glob';
+import path from 'node:path';
 
 const scssModulePath = path.join('./public');
 const scssFilePath = path.join(scssModulePath, 'dynamicBlockScss-v3.scss');

package/createJsAssets-v3.js

@@ -1,6 +1,6 @@
-const fs = require('fs');
-const path = require('path');
-const {globSync} = require('glob');
+import fs from 'node:fs';
+import path from 'node:path';
+import {globSync} from 'glob';
 
 const dynamicEntryPoints = globSync(`./components/block-*/*-v{3,4}.js`).map(
 	(filePath) => {

package/createJsAssets.js

@@ -1,7 +1,7 @@
-require('dotenv').config();
-const fs = require( 'fs' );
-const path = require( 'path' );
-const { globSync } = require( 'glob' );
+import 'dotenv/config';
+import fs from 'node:fs';
+import path from 'node:path';
+import {globSync} from 'glob';
 const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
 
 const dynamicEntryPoints = globSync(`${themePath}/assets/js/blocks/*.js`)

package/createNewBlock.js

@@ -1,10 +1,10 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const yargs = require('yargs');
-const {exec} = require('child_process');
-const acfTemplate = require('./new-block-templates/template-block-json');
-const defaultTemplates = require('./new-block-templates/template-default');
+import 'dotenv/config';
+import fs from 'node:fs';
+import {globSync} from 'glob';
+import yargs from 'yargs/yargs';
+import {exec} from 'node:child_process';
+import acfTemplate from './new-block-templates/template-block-json.js';
+import defaultTemplates from './new-block-templates/template-default.js';
 
 const themePath =
 	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
@@ -65,12 +65,14 @@ const newBlockName = process.argv[2]?.toLowerCase();
 const blockType = process.argv[3];
 
 if (!newBlockName) {
-	return console.log('Did you forget to give the new block a name?');
+	console.log('Did you forget to give the new block a name?');
+	process.exit(1);
 }
 if (dynamicEntryPoints.indexOf(newBlockName) !== -1) {
-	return console.log(
+	console.log(
 		`Alas! There is already a block called ${newBlockName} :( You'll have to try something else..`
 	);
+	process.exit(1);
 }
 
 const templateData = `
@@ -81,10 +83,8 @@ const templateData = `
 </section>`;
 
 let jsData;
-if (swiper) {
-	jsData = swiperTemplates.templatejs(newBlockName);
-} else if (vue) {
-	jsData = vueTemplates.templatejs(newBlockName);
+if (swiper || vue || image || content) {
+	jsData = defaultTemplates.defaultjs(newBlockName);
 } else {
 	jsData = defaultTemplates.defaultjs(newBlockName);
 }

package/createNewChildBlock2.js

@@ -1,15 +1,17 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const {exec} = require('child_process');
-const acfTemplate = require('./new-block-templates/template-acf-pattern');
-const acfTemplateScss = require('@total_onion/onion-library/new-block-templates/template-scss-blank');
-const acfTemplateJs = require('@total_onion/onion-library/new-block-templates/template-js-blank');
-const yaml = require('js-yaml');
-const axios = require('axios');
-
-const themePath =
-	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
+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;
@@ -17,11 +19,11 @@ 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 = `${__dirname}/components`;
-const srcPathScss = `${__dirname}/components`;
+const srcPathJs = path.join(__dirname, 'components');
+const srcPathScss = path.join(__dirname, 'components');
 
 let projectName = 'Global Theme';
-const projectJson = JSON.parse(fs.readFileSync('./package.json'));
+const projectJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 if (projectJson) {
 	projectName = projectJson.name;
 	if (projectName.slice(0, 3) === 'the') {
@@ -40,8 +42,8 @@ if (projectJson) {
 }
 
 const dynamicEntryPoints = globSync(`${themePath}/assets/js/blocks/*.js`).map(
-	(path) => {
-		const assetKey = path
+	(filePath) => {
+		const assetKey = filePath
 			.replace('assets/js/blocks/', '')
 			.replace('.js', '');
 		return assetKey;
@@ -51,10 +53,12 @@ const newBlockName = process.argv[2]?.toLowerCase();
 const patternID = process.argv[3];
 
 if (!newBlockName) {
-	return console.log('Did you forget to give the new block a name?');
+	console.log('Did you forget to give the new block a name?');
+	process.exit(1);
 }
 if (!patternID) {
-	return console.log('Did you forget to supply the pattern ID?');
+	console.log('Did you forget to supply the pattern ID?');
+	process.exit(1);
 }
 
 fs.writeFileSync(
@@ -64,16 +68,10 @@ fs.writeFileSync(
 
 const blockName = 'group-container-v3';
 
-const fullPath = `${srcPathJs}/block-${blockName}/${blockName}.js`;
+const fullPath = path.join(srcPathJs, `block-${blockName}`, `${blockName}.js`);
 
-const jsdir = `Assets/js/blocks/`;
-// if (!fs.existsSync(jsdir)) {
-// 	fs.mkdirSync(jsdir, 0o744);
-// }
-const scssdir = `Assets/scss/blocks/`;
-// if (!fs.existsSync(scssdir)) {
-// 	fs.mkdirSync(scssdir, 0o744);
-// }
+const jsdir = 'Assets/js/blocks/';
+const scssdir = 'Assets/scss/blocks/';
 
 if (!fs.existsSync(`${jsdir}/${newBlockName}.js`)) {
 	fs.writeFileSync(
@@ -91,7 +89,7 @@ if (!fs.existsSync(`${scssdir}/${newBlockName}.scss`)) {
 	console.log(`👑👑\x1b[32m Successfully created the scss file! 👑👑`);
 }
 
-let data = new FormData();
+const data = new FormData();
 data.append('action', 'get_pattern_block');
 data.append('postID', patternID);
 

package/createPreviewScss.js

@@ -1,9 +1,9 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const path = require('path');
-const themePath =
-	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
+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');
@@ -20,8 +20,8 @@ fs.writeFileSync(
 
 const dynamicEntryPoints = globSync(
 	`${themePath}/assets/scss/blocks/*.scss`
-).map((path) => {
-	const assetPath = path.replace(
+).map((filePath) => {
+	const assetPath = filePath.replace(
 		'assets/scss/blocks/',
 		'Assets/scss/blocks/'
 	);

package/duplicateBlock.js

@@ -1,8 +1,8 @@
-require('dotenv').config();
-const fs = require('fs');
-const path = require('path');
-const {globSync} = require('glob');
-const yargs = require('yargs');
+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';
@@ -27,20 +27,20 @@ if (!blockName) {
 	console.log(
 		"\x1b[33m 🤔🤔 Hmmm...You dont't seem to have chosen a block to duplicate. 🤔🤔 \x1b[0m"
 	);
-	return;
+	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'
 	);
-	return;
+	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'
 	);
-	return;
+	process.exit(1);
 }
 
 if (exisitingBlockNames.includes(blockName)) {

package/exportAllBlocks.js

@@ -1,9 +1,12 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const yargs = require('yargs');
-const path = require('path');
-const compressing = require('compressing');
+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';
@@ -24,7 +27,7 @@ try {
 	blocks = JSON.parse(fs.readFileSync(component_list_file, 'utf8'));
 } catch (e) {
 	console.error('Component list file error : ' + e);
-	return;
+	process.exit(1);
 }
 
 const dynamicEntryPointsJs = globSync(`${themePath}/assets/js/blocks/*.js`).map(

package/exportBlock.js

@@ -1,8 +1,8 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const yargs = require('yargs');
-const compressing = require('compressing');
+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';

package/exportChildBlock.js

@@ -1,8 +1,8 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const yargs = require('yargs');
-const compressing = require('compressing');
+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';

package/exportCustomCachesToLibrary.js

@@ -1,22 +1,25 @@
-require('dotenv').config();
-const fs = require('fs');
-const path = require('path');
-const { globSync } = require('glob');
+import 'dotenv/config';
+import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {globSync} from 'glob';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
 const srcPathCustomCaches = `${themePath}/inc/custom-caches`;
 
 const bColors = {
-	HEADER: '\033[95m',
-	OKBLUE: '\033[94m',
-	OKGREEN: '\033[92m',
-	WARNING: '\033[93m',
-	FAIL: '\033[91m',
-	ENDC: '\033[0m',
-	BOLD: '\033[1m',
-	UNDERLINE: '\033[4m',
-	ORANGE: '\033[93m',
-	MAGENTA: '\033[95m',
-	CYAN: '\033[96m'
+	HEADER: '\u001b[95m',
+	OKBLUE: '\u001b[94m',
+	OKGREEN: '\u001b[92m',
+	WARNING: '\u001b[93m',
+	FAIL: '\u001b[91m',
+	ENDC: '\u001b[0m',
+	BOLD: '\u001b[1m',
+	UNDERLINE: '\u001b[4m',
+	ORANGE: '\u001b[93m',
+	MAGENTA: '\u001b[95m',
+	CYAN: '\u001b[96m'
 };
 
 const icons = {

package/exportEntrypointToLibrary.js

@@ -1,7 +1,10 @@
-require('dotenv').config();
-const fs = require('fs');
-const yargs = require('yargs');
-const path = require('path');
+import 'dotenv/config';
+import fs from 'node:fs';
+import yargs from 'yargs/yargs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 // entry points
 const args = yargs(process.argv.slice(2)).argv;
 const componentOptions = args._;
@@ -15,17 +18,17 @@ const destPathEntryPoints = path.join(
 );
 
 const bColors = {
-	HEADER: '\033[95m',
-	OKBLUE: '\033[94m',
-	OKGREEN: '\033[92m',
-	WARNING: '\033[93m',
-	FAIL: '\033[91m',
-	ENDC: '\033[0m',
-	BOLD: '\033[1m',
-	UNDERLINE: '\033[4m',
-	ORANGE: '\033[93m',
-	MAGENTA: '\033[95m',
-	CYAN: '\033[96m'
+	HEADER: '\u001b[95m',
+	OKBLUE: '\u001b[94m',
+	OKGREEN: '\u001b[92m',
+	WARNING: '\u001b[93m',
+	FAIL: '\u001b[91m',
+	ENDC: '\u001b[0m',
+	BOLD: '\u001b[1m',
+	UNDERLINE: '\u001b[4m',
+	ORANGE: '\u001b[93m',
+	MAGENTA: '\u001b[95m',
+	CYAN: '\u001b[96m'
 };
 
 const icons = {

package/exportImagesToLibrary.js

@@ -1,6 +1,6 @@
-require('dotenv').config();
-const fs = require('fs');
-const path = require('path');
+import 'dotenv/config';
+import fs from 'node:fs';
+import path from 'node:path';
 
 const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
 
@@ -8,17 +8,17 @@ const srcPathImages = path.join(themePath, 'assets/images/icon/library-images');
 const destPath = '../../../../../onion-library/components/fields-library-images';
 
 const bColors = {
-    HEADER: '\033[95m',
-    OKBLUE: '\033[94m',
-    OKGREEN: '\033[92m',
-    WARNING: '\033[93m',
-    FAIL: '\033[91m',
-    ENDC: '\033[0m',
-    BOLD: '\033[1m',
-    UNDERLINE: '\033[4m',
-    ORANGE: '\033[93m',
-    MAGENTA: '\033[95m',
-    CYAN: '\033[96m'
+    HEADER: '\u001b[95m',
+    OKBLUE: '\u001b[94m',
+    OKGREEN: '\u001b[92m',
+    WARNING: '\u001b[93m',
+    FAIL: '\u001b[91m',
+    ENDC: '\u001b[0m',
+    BOLD: '\u001b[1m',
+    UNDERLINE: '\u001b[4m',
+    ORANGE: '\u001b[93m',
+    MAGENTA: '\u001b[95m',
+    CYAN: '\u001b[96m'
 };
 
 const icons = {

package/exportSEOExtrasToLibrary.js

@@ -1,22 +1,25 @@
-require('dotenv').config();
-const fs = require('fs');
-const path = require('path');
-const { globSync } = require('glob');
+import 'dotenv/config';
+import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {globSync} from 'glob';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
 const srcPathSeoExtras = `${themePath}/inc/seo-extras`;
 
 const bColors = {
-	HEADER: '\033[95m',
-	OKBLUE: '\033[94m',
-	OKGREEN: '\033[92m',
-	WARNING: '\033[93m',
-	FAIL: '\033[91m',
-	ENDC: '\033[0m',
-	BOLD: '\033[1m',
-	UNDERLINE: '\033[4m',
-	ORANGE: '\033[93m',
-	MAGENTA: '\033[95m',
-	CYAN: '\033[96m'
+	HEADER: '\u001b[95m',
+	OKBLUE: '\u001b[94m',
+	OKGREEN: '\u001b[92m',
+	WARNING: '\u001b[93m',
+	FAIL: '\u001b[91m',
+	ENDC: '\u001b[0m',
+	BOLD: '\u001b[1m',
+	UNDERLINE: '\u001b[4m',
+	ORANGE: '\u001b[93m',
+	MAGENTA: '\u001b[95m',
+	CYAN: '\u001b[96m'
 };
 
 const icons = {

package/exportToLibrary.js

@@ -1,9 +1,12 @@
-require('dotenv').config();
-const fs = require('fs');
-const fse = require('fs-extra');
-const {globSync} = require('glob');
-const yargs = require('yargs');
-const path = require('path');
+import 'dotenv/config';
+import fs from 'node:fs';
+import fse from 'fs-extra';
+import {globSync} from 'glob';
+import yargs from 'yargs/yargs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+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';
@@ -43,17 +46,17 @@ const destPath = path.join(
 );
 
 const bColors = {
-	HEADER: '\033[95m',
-	OKBLUE: '\033[94m',
-	OKGREEN: '\033[92m',
-	WARNING: '\033[93m',
-	FAIL: '\033[91m',
-	ENDC: '\033[0m',
-	BOLD: '\033[1m',
-	UNDERLINE: '\033[4m',
-	ORANGE: '\033[93m',
-	MAGENTA: '\033[95m',
-	CYAN: '\033[96m'
+	HEADER: '\u001b[95m',
+	OKBLUE: '\u001b[94m',
+	OKGREEN: '\u001b[92m',
+	WARNING: '\u001b[93m',
+	FAIL: '\u001b[91m',
+	ENDC: '\u001b[0m',
+	BOLD: '\u001b[1m',
+	UNDERLINE: '\u001b[4m',
+	ORANGE: '\u001b[93m',
+	MAGENTA: '\u001b[95m',
+	CYAN: '\u001b[96m'
 };
 
 const icons = {

package/importBlock.js

@@ -1,8 +1,8 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const yargs = require('yargs');
-const compressing = require('compressing');
+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 blockName = templateOptions[0];
 const exportedFolder = '../../../../exported-blocks';
@@ -77,11 +77,11 @@ const decompressDone = () => {
 if (!existingBlocks.includes(blockName)) {
 	if (!blockName) {
 		console.log('Aborting because of bad name!');
-		return;
+		process.exit(1);
 	}
 	if (!fs.existsSync(`${exportedFolder}/${blockName}.zip`)) {
 		console.log('Aborting as could not find the zip file');
-		return;
+		process.exit(1);
 	}
 	compressing.zip
 		.uncompress(`${exportedFolder}/${blockName}.zip`, `${exportedFolder}/`)

package/importChildBlock.js

@@ -1,8 +1,8 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const yargs = require('yargs');
-const compressing = require('compressing');
+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 blockName = templateOptions[0];
 const exportedFolder = '../../../../exported-blocks';
@@ -64,11 +64,11 @@ const decompressDone = () => {
 
 if (!blockName) {
 	console.log('Aborting because of bad name!');
-	return;
+	process.exit(1);
 }
 if (!fs.existsSync(`${exportedFolder}/${blockName}.zip`)) {
 	console.log('Aborting as could not find the zip file');
-	return;
+	process.exit(1);
 }
 compressing.zip
 	.uncompress(`${exportedFolder}/${blockName}.zip`, `${exportedFolder}/`)

package/index.js

@@ -0,0 +1,10 @@
+import VideoController from './onion-videocontroller/onion-videocontroller.js';
+import ModalController from './onion-modalcontroller/onion-modalcontroller.js';
+export * from './onion-utils.mjs';
+export * from './entry-animation-observer.js';
+
+export default VideoController;
+export { VideoController, ModalController };
+export { default as modalController } from './onion-modalcontroller/onion-modalcontroller.js';
+export { default as videoController } from './onion-videocontroller/onion-videocontroller.js';
+export { default as onionLoader } from './onion-loader.js';

package/install-component.js

@@ -1,6 +1,6 @@
-const fs = require('fs');
-const glob = require('glob');
-const yargs = require('yargs');
+import fs from 'node:fs';
+import * as glob from 'glob';
+import yargs from 'yargs/yargs';
 
 let projectName = 'Global Theme';
 const libraryPath = './node_modules/@total_onion/onion-library';

package/list-components.js

@@ -1,4 +1,4 @@
-const glob = require('glob');
+import * as glob from 'glob';
 const libraryPath =
   './node_modules/@total_onion/onion-library'
 

package/new-block-templates/template-acf-pattern.js

@@ -0,0 +1,30 @@
+export default function templateAcfPattern(newBlockName, projectName) {
+	const blockTitle =
+		newBlockName.charAt(0).toUpperCase() +
+		newBlockName.slice(1).replaceAll('-', ' ');
+	const namespace = projectName.toLowerCase().replaceAll(' ', '-');
+
+	return `<?php
+/**
+ * ${blockTitle}
+ */
+add_action('acf/init', function () {
+	if (function_exists('acf_register_block_type')) {
+		acf_register_block_type([
+			'name' => '${newBlockName}',
+			'title' => '${blockTitle}',
+			'description' => '${blockTitle}',
+			'render_template' => get_template_directory() . '/views/blocks/${newBlockName}.twig',
+			'category' => 'project-blocks',
+			'icon' => 'editor-code',
+			'supports' => [
+				'align' => false,
+				'anchor' => true,
+			],
+			'enqueue_style' => get_template_directory_uri() . '/assets/scss/blocks/${newBlockName}.css',
+			'enqueue_script' => get_template_directory_uri() . '/assets/js/blocks/${newBlockName}.js',
+		]);
+	}
+});
+`;
+}

package/new-block-templates/template-block-json.js

@@ -1,4 +1,4 @@
-module.exports = function (newBlockName, projectName) {
+export default function (newBlockName, projectName) {
 	const blockTitle =
 		newBlockName.charAt(0).toUpperCase() +
 		newBlockName.slice(1).replaceAll('-', ' ');

package/new-block-templates/template-default.js

@@ -1,6 +1,5 @@
-module.exports = {
-	defaultjs: function (newBlockName) {
-		return `export default function ${newBlockName.replaceAll(
+const defaultjs = function (newBlockName) {
+	return `export default function ${newBlockName.replaceAll(
 			'-',
 			''
 		)}Js ( options = {} ) {
@@ -10,12 +9,16 @@ module.exports = {
 		console.error( error );
 	}
 }`;
-	},
-	defaultscss: function (newBlockName) {
-		return `// @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3'; 
+};
+
+const defaultscss = function (newBlockName) {
+	return `// @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3'; 
 // @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
 // @use 'NodeModules/@total_onion/onion-library/breakpoints';
 .${newBlockName} {
 }`;
-	}
 };
+
+export default { defaultjs, defaultscss };
+export { defaultjs, defaultscss };
+

package/new-block-templates/template-js-blank.js

@@ -1,4 +1,4 @@
-module.exports = function (newBlockName, projectName) {
+export default function templateJsBlank(newBlockName) {
 	return `export default function ${newBlockName.replaceAll(
 			'-',
 			''
@@ -9,4 +9,4 @@ module.exports = function (newBlockName, projectName) {
 		console.error(error);
 	}
 }`;
-};
+}

package/new-block-templates/template-scss-blank.js

@@ -1,6 +1,6 @@
-module.exports = function (newBlockName, projectName) {
+export default function templateScssBlank(newBlockName) {
 	return `// @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3'; 
 // @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
 // @use 'NodeModules/@total_onion/onion-library/breakpoints';
 	.${newBlockName} {}`;
-};
+}

package/onion-loader.js

@@ -52,27 +52,35 @@ function lazyloaderInit() {
 	options.debugLogMessages && console.log('Lazy Loader initialized!');
 	options.lazyBlocksToSearchFor = [];
 	assetArray.forEach((asset) => {
-		if (
-			options.filePrefix === 'nodemodules' &&
-			asset.assetKey.includes('-v3')
-		) {
+		// if (
+		// 	asset.assetKey.includes('-v3') &&
+		// 	!asset.assetKey.includes('sub-block')
+		// ) {
+		// 	options.assetMap[asset.assetKey] = {
+		// 		js: () =>
+		// 			import(
+		// 				`Assets/blocks/${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+		// 			),
+		// 		// import(
+		// 		// 	`NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+		// 		// ),
+		// 		css: options.ignoreCss === true
+		// 	};
+		// }
+		if (asset.assetKey.includes('-v3')) {
 			options.assetMap[asset.assetKey] = {
 				js: () =>
 					import(
-						`NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+						`Assets/sub-blocks/${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
 					),
-				css: options.ignoreCss === true
+				css: options.ignoreCss === false
 			};
-		} else {
 		}
-		if (
-			options.filePrefix === 'nodemodules' &&
-			!asset.assetKey.includes('-v3')
-		) {
+		if (!asset.assetKey.includes('-v3')) {
 			options.assetMap[asset.assetKey] = {
 				js: () =>
 					import(
-						`Assets/js/blocks/${asset.assetKey}${options.fileSuffixJs}`
+						`Assets/blocks/${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
 					),
 				css: options.ignoreCss === false
 			};
@@ -236,7 +244,7 @@ export function loadCss(assetKey) {
 				assetKey.includes('-v3')
 			) {
 				import(
-					/* webpackChunkName: "[request]" */ `NodeModules/@total_onion/onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
+					/* webpackChunkName: "[request]" */ `Assets/sub-blocks/${assetKey}/${assetKey}${options.fileSuffixCss}`
 				).then(() => resolve(true));
 			} else if (
 				options.css === true &&
@@ -244,7 +252,7 @@ export function loadCss(assetKey) {
 				!assetKey.includes('-v3')
 			) {
 				import(
-					/* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}${options.fileSuffixCss}`
+					/* webpackChunkName: "[request]" */ `Assets/blocks/${assetKey}/${assetKey}${options.fileSuffixCss}`
 				).then(() => resolve(true));
 			} else {
 				return resolve(true);

package/onion-utils.mjs

@@ -88,24 +88,24 @@ export function inCriticalCssConfig(assetKey) {
 	return true;
 }
 
-/**
- * Dynamically loads the css for the block if it has not already been included in critical css or the css property is set to false.
- * @param {string} assetKey The assetkey string of the block.
- * @param {object} options The options object which will at the very least contain the css property set to true.
- * @returns {promise}
- */
-export function loadCss(assetKey, options = { css: true }) {
-	const promise = new Promise((resolve) => {
-		if (options.css === true && !inCriticalCssConfig(assetKey)) {
-			import(
-				/* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}.scss`
-			).then(() => resolve(true));
-		} else {
-			return resolve(true);
-		}
-	});
-	return promise;
-}
+// /**
+//  * Dynamically loads the css for the block if it has not already been included in critical css or the css property is set to false.
+//  * @param {string} assetKey The assetkey string of the block.
+//  * @param {object} options The options object which will at the very least contain the css property set to true.
+//  * @returns {promise}
+//  */
+// export function loadCss(assetKey, options = { css: true }) {
+// 	const promise = new Promise((resolve) => {
+// 		if (options.css === true && !inCriticalCssConfig(assetKey)) {
+// 			import(
+// 				/* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}.scss`
+// 			).then(() => resolve(true));
+// 		} else {
+// 			return resolve(true);
+// 		}
+// 	});
+// 	return promise;
+// }
 
 /**
  * Checks for browser, device and OS and then adds the relevant classes to the html tag.
@@ -680,7 +680,6 @@ const api = {
 	isEmailValid,
 	isInViewport,
 	isTablet,
-	loadCss,
 	mobileCheck,
 	resizeDebouncer,
 	supportsWebp,

package/package.json

@@ -1,8 +1,23 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "3.1.0",
+	"version": "3.2.1",
 	"description": "Component library",
-	"main": "index.js",
+	"type": "module",
+	"main": "./index.js",
+	"module": "./index.js",
+	"exports": {
+		".": "./index.js",
+		"./onion-utils": "./onion-utils.mjs",
+		"./onion-utils.mjs": "./onion-utils.mjs",
+		"./onion-loader": "./onion-loader.js",
+		"./onion-loader.js": "./onion-loader.js",
+		"./entry-animation-observer": "./entry-animation-observer.js",
+		"./entry-animation-observer.js": "./entry-animation-observer.js",
+		"./onion-videocontroller": "./onion-videocontroller/onion-videocontroller.js",
+		"./onion-videocontroller.js": "./onion-videocontroller/onion-videocontroller.js",
+		"./onion-modalcontroller": "./onion-modalcontroller/onion-modalcontroller.js",
+		"./onion-modalcontroller.js": "./onion-modalcontroller/onion-modalcontroller.js"
+	},
 	"scripts": {
 		"build": "node build-library.js",
 		"test": ""
@@ -18,8 +33,7 @@
 	},
 	"homepage": "https://github.com/TotalOnion/onion-library#readme",
 	"dependencies": {
-		"lottie-web": "^5.13.0",
-		"swiper": "^14.1.0"
+		"@vimeo/player": "^2.26.0"
 	},
 	"devDependencies": {
 		"autoprefixer": "^10.4.27",
@@ -36,6 +50,8 @@
 		"postcss-preset-env": "^11.2.0",
 		"prettier": "^2.6.2",
 		"url-loader": "^4.1.1",
-		"yargs": "^17.4.1"
+		"yargs": "^17.4.1",
+		"lottie-web": "^5.13.0",
+		"swiper": "^14.1.0"
 	}
 }

package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.js

@@ -33,6 +33,8 @@ export default function cocktailrecipev3Js(options = {}) {
         return (Math.round(num * 100) / 100).toFixed(2).replace(/\.?0+$/, "");
       if (unit === "ml")
         return (Math.round(num * 10) / 10).toString().replace(/\.0$/, "");
+      if (unit === "cl")
+        return (Math.round(num * 100) / 100).toString().replace(/\.0$/, "");
       return (Math.round(num * 100) / 100).toString().replace(/\.?0+$/, "");
     };
     const convert = (value, fromUnit, toUnit) => {

package/public/block-modal-form-v3/modal-form-v3.js

@@ -5,7 +5,9 @@ export default function modalformv3Js(options = {}) {
         ".cdb_form_field input, .cdb_form_field select, .cdb_form_gdpr_information input, .cdb_form_privacypolicy_information input"
       );
       inputs.forEach((input) => {
-        const wrapper = input.closest(".cdb_form_field, .cdb_form_gdpr_information, .cdb_form_privacypolicy_information");
+        const wrapper = input.closest(
+          ".cdb_form_field, .cdb_form_gdpr_information, .cdb_form_privacypolicy_information"
+        );
         if (!wrapper) return;
         wrapper.classList.remove("invalid");
         if (!input.hasAttribute("required")) return;
@@ -31,9 +33,11 @@ export default function modalformv3Js(options = {}) {
       });
     };
     const { block } = options;
-    const submit = block.querySelector(
-      ".cdb-submit"
-    );
+    const submit = block.querySelector(".cdb-submit");
+    if (!submit) {
+      console.error("could not find submit button");
+      return;
+    }
     submit.classList.add("cmpl-cta-style-11", "cmpl-cta-animation-style-1");
     submit.addEventListener("click", (e) => {
       validateFormFields(block);

package/public/block-video-content-v3/video-content-v3.js

@@ -1,4 +1,4 @@
-import videocontroller from "@total_onion/onion-videocontroller/onion-videocontroller.js";
+import videocontroller from "../../onion-videocontroller/onion-videocontroller.js";
 export default function videocontentv3Js(options = {}) {
   try {
     const { block } = options;

package/removeBlock.js

@@ -1,7 +1,7 @@
-require('dotenv').config();
-const fs = require('fs');
-const readline = require('readline');
-const {globSync} = require('glob');
+import 'dotenv/config';
+import fs from 'node:fs';
+import readline from 'node:readline';
+import {globSync} from 'glob';
 const themePath =
 	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
 

package/update-all-components.js

@@ -1,16 +1,16 @@
-const getComponentsList = () => {
-	const path = require('path');
-	const glob = require('glob');
-	const fs = require('fs');
-	const libraryPath = './node_modules/@total_onion/onion-library';
+import fs from 'node:fs';
+import path from 'node:path';
+import {exec} from 'node:child_process';
+import {pathToFileURL} from 'node:url';
+import * as glob from 'glob';
 
-	let finalList = [];
+const libraryPath = './node_modules/@total_onion/onion-library';
 
-	// printMemoryUsage('Before checking components list');
+const getComponentsList = () => {
+	let finalList = [];
 
 	if (fs.existsSync('./project-components-list.json')) {
 		const componentsList = glob.sync(`${libraryPath}/components/*`);
-
 		const listJson = fs.readFileSync('./project-components-list.json');
 		const componentsListObject = JSON.parse(listJson);
 
@@ -27,28 +27,19 @@ const getComponentsList = () => {
 				finalList.push(component);
 			}
 		});
-
-		// Free up memory
 	} else {
 		finalList = glob
 			.sync(`${libraryPath}/components/*`)
-			.map((componentPath) => {
-				return path.basename(componentPath);
-			});
+			.map((componentPath) => path.basename(componentPath));
 	}
 
-	// printMemoryUsage('After checking components list');
-
 	return finalList;
 };
 
 const updateAllComponents = () => {
-	const {exec} = require('child_process');
 	const componentsList = getComponentsList();
 	console.log('updating all Onions');
 
-	// printMemoryUsage('Before updating components');
-
 	if (
 		componentsList.includes('admin-core-generic') ||
 		componentsList.includes('admin-core-critical')
@@ -60,7 +51,6 @@ const updateAllComponents = () => {
 		process.exit();
 	}
 
-	// Limit the number of parallel updates
 	const maxConcurrentUpdates = 2;
 	let currentIndex = 0;
 
@@ -85,13 +75,11 @@ const updateAllComponents = () => {
 					console.log(`stdout: ${stdout}`);
 				}
 
-				// Recursively update the next component
 				updateNextComponent();
 			}
 		);
 	};
 
-	// Start the initial batch of updates
 	for (
 		let i = 0;
 		i < Math.min(maxConcurrentUpdates, componentsList.length);
@@ -99,37 +87,10 @@ const updateAllComponents = () => {
 	) {
 		updateNextComponent();
 	}
-
-	// printMemoryUsage('After updating components');
 };
 
-const printMemoryUsage = (label) => {
-	console.log(console.time(label));
-	const memoryUsage = process.memoryUsage();
-	console.log(`\nMemory Usage - ${label}`);
-	console.log(`RSS: ${Math.round(memoryUsage.rss / 1024 / 1024)} MB`);
-	console.log(
-		`Heap Total: ${Math.round(memoryUsage.heapTotal / 1024 / 1024)} MB`
-	);
-	console.log(
-		`Heap Used: ${Math.round(memoryUsage.heapUsed / 1024 / 1024)} MB`
-	);
-	console.log(
-		`External: ${Math.round(memoryUsage.external / 1024 / 1024)} MB`
-	);
-	console.log(
-		`Array Buffers: ${Math.round(
-			memoryUsage.arrayBuffers / 1024 / 1024
-		)} MB\n`
-	);
-};
-
-module.exports = {
-	getComponentsList,
-	updateAllComponents
-};
+export {getComponentsList, updateAllComponents};
 
-// It calls the function only if executed through the command line
-if (require.main === module) {
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
 	updateAllComponents();
 }

package/update-component.js

@@ -1,7 +1,9 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import {pathToFileURL} from 'node:url';
+
 const themePath =
 	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
-const fs = require('fs');
-const path = require('path');
 const libraryPath = './node_modules/@total_onion/onion-library';
 
 // Get extension of filename
@@ -516,7 +518,7 @@ const updateComponent = () => {
 	);
 };
 
-module.exports = {
+export {
 	getExtension,
 	getFileType,
 	checkFolder,
@@ -531,7 +533,6 @@ module.exports = {
 	updateComponent
 };
 
-// It calls the function only if executed through the command line
-if (require.main === module) {
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
 	updateComponent();
 }

package/update-template.js

@@ -1,7 +1,9 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import {pathToFileURL} from 'node:url';
+
 const themePath =
 	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
-const fs = require('fs');
-const path = require('path');
 const libraryPath = './node_modules/@total_onion/onion-library';
 
 // Get extension of filename
@@ -516,7 +518,7 @@ const updateComponent = () => {
 	);
 };
 
-module.exports = {
+export {
 	getExtension,
 	getFileType,
 	checkFolder,
@@ -531,7 +533,6 @@ module.exports = {
 	updateComponent
 };
 
-// It calls the function only if executed through the command line
-if (require.main === module) {
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
 	updateComponent();
 }