@total_onion/onion-library 3.2.0 → 3.2.2

package/install-component.js

@@ -0,0 +1,204 @@
+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';
+const projectJson = JSON.parse(fs.readFileSync('./package.json'));
+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 componentName = process.argv[2]?.toLocaleLowerCase();
+
+if (!componentName) {
+	console.log(
+		'\x1b[35m',
+		'Hmmm that failed.. Did you forget to include the component name?'
+	);
+	process.exit();
+}
+
+let componentType = 'block';
+let componentModuleName = componentName.substring(6);
+if (componentName.split('-')[0] === 'fields') {
+	componentType = 'fields';
+	componentModuleName = componentName.substring(7);
+}
+if (componentName.split('-')[0] === 'admin') {
+	componentType = 'admin';
+	componentModuleName = componentName.substring(6);
+}
+
+function globGetFileNames(path, filetype, removeExt = false) {
+	const pathPlusExt = `${path}*.${filetype}`;
+	const points = glob.sync(pathPlusExt).map((fullPath) => {
+		let assetKey = fullPath.replace(path, '');
+		if (removeExt === true) {
+			assetKey = assetKey.replace(`.${filetype}`, '');
+		}
+		return assetKey;
+	});
+	return points;
+}
+
+const dynamicEntryPointsJs = globGetFileNames(
+	'./web/wp-content/themes/global-theme/assets/js/blocks/',
+	'js',
+	true
+);
+
+const dynamicEntryPointsAcfJson = globGetFileNames(
+	'./web/wp-content/themes/global-theme/acf-json/',
+	'json'
+);
+
+let componentAcf = globGetFileNames(
+	`${libraryPath}/components/${componentName}/`,
+	'json'
+)[0];
+
+if (componentType === 'fields') {
+	if (dynamicEntryPointsAcfJson.indexOf(componentAcf) !== -1) {
+		console.log(
+			'\x1b[33m',
+			`Oh oh! It looks like you already have a field group called "${componentName}". If you want to overwrite it with the latest version then try "yarn update-component ${componentName}"`
+		);
+		process.exit();
+	}
+} else {
+	if (dynamicEntryPointsJs.indexOf(componentName) !== -1) {
+		console.log(
+			'\x1b[33m',
+			`Oh oh! It looks like you already have a block called ${componentName}. If you want to overwrite it with the latest version then try "yarn update-component ${componentName}"`
+		);
+		process.exit();
+	}
+}
+
+if (
+	fs.existsSync(
+		`${libraryPath}/components/${componentName}/${componentModuleName}.js`
+	)
+) {
+	if (componentType === 'fields') {
+		if (
+			!fs.existsSync(
+				`./web/wp-content/themes/global-theme/assets/js/modules/library-modules/${componentModuleName}`
+			)
+		) {
+			console.log('making the folder');
+			fs.mkdirSync(
+				`./web/wp-content/themes/global-theme/assets/js/modules/library-modules/${componentModuleName}`
+			);
+		}
+		fs.copyFileSync(
+			`${libraryPath}/components/${componentName}/${componentModuleName}.js`,
+			`./web/wp-content/themes/global-theme/assets/js/modules/library-modules/${componentModuleName}/${componentModuleName}.js`
+		);
+	} else {
+		fs.copyFileSync(
+			`${libraryPath}/components/${componentName}/${componentModuleName}.js`,
+			`./web/wp-content/themes/global-theme/assets/js/blocks/${componentModuleName}.js`
+		);
+	}
+}
+
+if (
+	fs.existsSync(
+		`${libraryPath}/components/${componentName}/${componentModuleName}.scss`
+	)
+) {
+	if (componentType === 'fields') {
+		if (
+			!fs.existsSync(
+				`./web/wp-content/themes/global-theme/assets/scss/modules/library-modules/${componentModuleName}`
+			)
+		) {
+			console.log('making the folder');
+			fs.mkdirSync(
+				`./web/wp-content/themes/global-theme/assets/scss/modules/library-modules/${componentModuleName}`
+			);
+		}
+		fs.copyFileSync(
+			`${libraryPath}/components/${componentName}/${componentModuleName}.scss`,
+			`./web/wp-content/themes/global-theme/assets/scss/modules/library-modules/${componentModuleName}/${componentModuleName}.scss`
+		);
+	} else {
+		fs.copyFileSync(
+			`${libraryPath}/components/${componentName}/${componentModuleName}.scss`,
+			`./web/wp-content/themes/global-theme/assets/scss/blocks/${componentModuleName}.scss`
+		);
+	}
+}
+
+if (
+	fs.existsSync(
+		`${libraryPath}/components/${componentName}/${componentModuleName}.php`
+	)
+) {
+	if (
+		componentType === 'admin' ||
+		componentType === 'fields' ||
+		componentType === 'core'
+	) {
+		fs.copyFileSync(
+			`${libraryPath}/components/${componentName}/${componentModuleName}.php`,
+			`./web/wp-content/themes/global-theme/inc/custom-extras/${componentModuleName}.php`
+		);
+	} else if (componentType === 'core') {
+		fs.copyFileSync(
+			`${libraryPath}/components/${componentName}/${componentModuleName}.php`,
+			`./web/wp-content/themes/global-theme/inc/project-setup/core-functions/${componentModuleName}.php`
+		);
+	} else {
+		fs.copyFileSync(
+			`${libraryPath}/components/${componentName}/${componentModuleName}.php`,
+			`./web/wp-content/themes/global-theme/inc/acf-blocks/${componentModuleName}.php`
+		);
+	}
+}
+
+if (
+	fs.existsSync(
+		`${libraryPath}/components/${componentName}/${componentModuleName}.cy.js`
+	)
+) {
+	fs.copyFileSync(
+		`${libraryPath}/components/${componentName}/${componentModuleName}.cy.js`,
+		`./cypress/e2e/components/${componentModuleName}.cy.js`
+	);
+}
+
+import('cpy').then((result) => {
+	const cpy = result.default;
+
+	cpy(
+		`${libraryPath}/components/${componentName}/*.json`,
+		`./web/wp-content/themes/global-theme/acf-json/`
+	);
+
+	let twigPath = `./web/wp-content/themes/global-theme/views/blocks/`;
+	if (componentName.substring(0, 6) === 'fields') {
+		twigPath = `./web/wp-content/themes/global-theme/views/components/`;
+	}
+	cpy(`${libraryPath}/components/${componentName}/*.twig`, twigPath);
+});
+
+console.log(
+	'\x1b[32m',
+	`👑 👑 👑 Hurrah! You installed a component called ${componentName} 👑 👑 👑`
+);

package/list-components.js

@@ -0,0 +1,9 @@
+import * as glob from 'glob';
+const libraryPath =
+  './node_modules/@total_onion/onion-library'
+
+const componentsList = glob.sync(`${libraryPath}/components/*`).map((path) => {
+	const assetKey = path.replace(`${libraryPath}/components/`, '');
+	return assetKey;
+});
+console.log('The list of available components is', componentsList);

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

@@ -0,0 +1,37 @@
+export default function (newBlockName, projectName) {
+	const blockTitle =
+		newBlockName.charAt(0).toUpperCase() +
+		newBlockName.slice(1).replaceAll('-', ' ');
+	const namespace = projectName.toLowerCase().replaceAll(' ', '-');
+
+	return `{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "acf/${newBlockName}",
+	"title": "${blockTitle}",
+	"category": "project-blocks",
+	"description": "${blockTitle} block",
+	"icon": "green-brick",
+	"keywords": ["content"],
+	"version": "1.0.0",
+	"textdomain": "${namespace}",
+	"acf": {
+		"mode": "preview",
+		"renderCallback": "core_block_render_post_object_v3",
+		"blockVersion": 3
+	},
+	"supports": {
+		"align": false,
+		"anchor": true,
+		"jsx": true
+	},
+	"example": {
+		"attributes": {
+			"mode": "preview",
+			"data": {
+				"is_example": true
+			}
+		}
+	}
+}`;
+};

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

@@ -0,0 +1,24 @@
+const defaultjs = function (newBlockName) {
+	return `export default function ${newBlockName.replaceAll(
+			'-',
+			''
+		)}Js ( options = {} ) {
+	try {
+		const { block } = options;
+	} catch ( error ) {
+		console.error( error );
+	}
+}`;
+};
+
+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

@@ -0,0 +1,12 @@
+export default function templateJsBlank(newBlockName) {
+	return `export default function ${newBlockName.replaceAll(
+			'-',
+			''
+		)}(options = {}) {
+	try {
+		const {block} = options;
+	} catch (error) {
+		console.error(error);
+	}
+}`;
+}

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

@@ -0,0 +1,6 @@
+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/no-audio.vtt

@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 23:59:59.000
+[No audio in this video.]

package/onion-loader-dev.js

@@ -0,0 +1,260 @@
+import jsAssetList from "./jsAssets.mjs";
+const fallbackAssetArray = jsAssetList.dynamicAssets;
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-console */
+
+//*** Lazyloader ***//
+
+/**
+ * The options object for the lazyloader.
+ * @type {object}
+ * @property {string} rootMargin The root margin for the IntersectionObserver.
+ * @default '0% 0% 0%'
+ * @property {number} threshold The threshold for the IntersectionObserver.
+ * @property {boolean} debugLogMessages Whether to log debug messages.
+ * @property {array} lazyBlocksToSearchFor The array of lazy blocks to search for.
+ * @property {array} lazyBlocksFound The array of lazy blocks found.
+ * @property {array} assetArray The array of assets to load.
+ * @property {object} assetMap The asset map object.
+ * @property {boolean} ignoreCss Whether to ignore the css.
+ * @property {boolean} lazy Whether to lazy load the assets (after Assets alias).
+ * @property {string} filePath The file path for the js assets.
+ * @default 'js/blocks/'
+ * @property {string} filePathCss The file path for the css assets (after Assets alias).
+ * @default 'scss/blocks/'
+ */
+
+const options = {
+  rootMargin: "100% 0px 300px 0px",
+  threshold: 0,
+  debugLogMessages: false,
+  lazyBlocksToSearchFor: [],
+  lazyBlocksFound: [],
+  assetArray: fallbackAssetArray, //latest assetArray can be found in /@total_onion/onion-library/public/jsAssets.mjs
+  assetMap: {},
+  css: true,
+  lazy: true,
+  cssLoadingStyle: "component", // 'component' or 'bundle'
+  filePrefix: "dev", //'nodemodules', 'assets' or 'dev'
+  fileSuffixJs: ".js",
+  fileSuffixCss: ".scss",
+  filePath: "js/blocks",
+  filePathCss: "scss/blocks",
+};
+
+/**
+ * Initializes the lazyloader.
+ */
+function lazyloaderInit() {
+  options.debugLogMessages && console.log("Lazy Loader initialized!");
+  options.lazyBlocksToSearchFor = [];
+  options.assetArray.forEach((asset) => {
+    // if (options.filePrefix === "nodemodules") {
+    //   options.assetMap[asset.assetKey] = {
+    //     js: () =>
+    //       import(
+    //         `NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+    //       ),
+    //     css: options.ignoreCss === true,
+    //   };
+    // }
+    // if (options.filePrefix === "assets") {
+    //   options.assetMap[asset.assetKey] = {
+    //     js: () => import(`Assets/${this.options.filePath}/${asset.assetKey}`),
+    //     css: options.ignoreCss === false,
+    //   };
+    // }
+
+    if (options.filePrefix === "dev") {
+      options.assetMap[asset.assetKey] = {
+        js: () =>
+          import(
+            `../../../../../../../../onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+          ),
+        css: options.ignoreCss === true,
+      };
+    }
+
+    // Add to lazy blocks to search for
+    options.lazyBlocksToSearchFor.push(`[data-assetkey="${asset.assetKey}"]`);
+    options.lazyBlocksFound = Array.from(
+      document.querySelectorAll(options.lazyBlocksToSearchFor)
+    );
+  });
+
+  // If data eager loading attribute is true - load js straight away
+  options.lazyBlocksFound.forEach((block) => {
+    if (block.dataset.eager == "true") {
+      callBlockJs(block);
+    }
+  });
+
+  options.debugLogMessages && console.log("Lazyloader Options", options);
+
+  // Check if the browser has intersection observer which is needed for the Lazyloader or if all assets should load immediately anyway.
+  if (options.lazy === false || !("IntersectionObserver" in window)) {
+    options.debugLogMessages && console.log("running eager loading");
+    try {
+      options.lazyBlocksFound.forEach((block) => {
+        callBlockJs(block);
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  } else {
+    options.debugLogMessages && console.log("running normal process");
+    observerInit(options.lazyBlocksFound);
+  }
+}
+
+/**
+ * Initializes the IntersectionObserver for the lazy loading of blocks.
+ * @param {array} elementsToObserve The array of block elements to observe.
+ */
+function observerInit(elementsToObserve = []) {
+  const observer = new IntersectionObserver(intersectionCallback, options);
+  elementsToObserve.forEach((element) => {
+    if (element) {
+      observer.observe(element);
+    }
+  });
+}
+
+/**
+ * Callback function for the IntersectionObserver.
+ * @param {array} entries The entries array from the IntersectionObserver.
+ * @param {object} observer The IntersectionObserver object.
+ */
+const intersectionCallback = (entries, observer) => {
+  options.debugLogMessages && console.log("Observer entries", entries);
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      const lazyTarget = entry.target;
+      try {
+        callBlockJs(lazyTarget);
+      } catch (error) {
+        console.log(
+          error,
+          "block data assetkey:",
+          lazyTarget.dataset.assetkey,
+          " - ",
+          "asset import function:",
+          options.assetMap[lazyTarget.dataset.assetkey],
+          "are you missing an asset key or import function?"
+        );
+      }
+      observer.unobserve(lazyTarget);
+      options.debugLogMessages &&
+        console.log("Unobserving lazyElement", lazyTarget);
+    }
+  });
+};
+
+/**
+ * Calls the block asset functions and adds the loaded class to the block.
+ * @param {object} block The block element.
+ */
+function callBlockJs(block) {
+  if (!block.classList.contains("loaded")) {
+    Promise.all([
+      options.assetMap[block.dataset.assetkey].js(),
+      loadCss(block.dataset.assetkey),
+    ]).then((module) => {
+      try {
+        if (block.dataset.jsload !== "false") {
+          module[0].default({
+            block,
+            css: false,
+          });
+        } else {
+          options.debugLogMessages &&
+            console.log(
+              `Skipping JS load for block: ${block.dataset.assetkey}`
+            );
+        }
+        block.classList.add("loaded");
+      } catch (error) {
+        console.log("could not load block js", error);
+      }
+    });
+  }
+}
+
+/**
+ * Checks to see if the css for the block has already been included in the 'criticalconfig' window object.
+ * Will return true if it is.
+ * @param {string} assetKey The assetkey string of the block.
+ * @returns {boolean}
+ */
+export function inCriticalCssConfig(assetKey) {
+  if (!globalThis.criticalConfig) {
+    return false;
+  }
+  if (
+    globalThis.criticalConfig &&
+    globalThis.criticalConfig.indexOf(assetKey) === -1
+  ) {
+    return false;
+  }
+  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) {
+  // if (options.css == true && options.cssLoadingStyle === "bundle") {
+  //   options.debugLogMessages && console.log("using css bundle");
+  //   const promise = new Promise((resolve) => {
+  //     import(
+  //       `NodeModules/@total_onion/onion-library/public/publicbundlecss.css`
+  //     ).then(() => {
+  //       console.log("resolved");
+  //       resolve(true);
+  //     });
+  //   });
+  //   return promise;
+  // }
+  // if (
+  //   options.css == true &&
+  //   options.cssLoadingStyle === "component" &&
+  //   options.filePrefix === "nodemodules"
+  // ) {
+  //   options.debugLogMessages && console.log("using individual css");
+  //   const promise = new Promise((resolve) => {
+  //     if (options.css === true && !inCriticalCssConfig(assetKey)) {
+  //       import(
+  //         /* webpackChunkName: "[request]" */ `NodeModules/@total_onion/onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
+  //       ).then(() => resolve(true));
+  //     } else {
+  //       return resolve(true);
+  //     }
+  //   });
+  // }
+  if (
+    options.css == true &&
+    options.cssLoadingStyle === "component" &&
+    options.filePrefix === "dev"
+  ) {
+    options.debugLogMessages && console.log("using dev css");
+    const promise = new Promise((resolve) => {
+      if (options.css === true && !inCriticalCssConfig(assetKey)) {
+        import(
+          `../../../../../../../../onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
+        ).then(() => resolve(true));
+      } else {
+        return resolve(true);
+      }
+    });
+  }
+}
+
+const api = {
+  lazyloaderInit,
+  options,
+};
+
+export default api;