@total_onion/onion-library 3.0.49 → 3.2.0

package/install-component.js

@@ -1,204 +0,0 @@
-const fs = require('fs');
-const glob = require('glob');
-const yargs = require('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

@@ -1,9 +0,0 @@
-const glob = require('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-block-json.js

@@ -1,37 +0,0 @@
-module.exports = 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

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

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

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

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

@@ -1,6 +0,0 @@
-module.exports = function (newBlockName, projectName) {
-	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

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

package/onion-loader-dev.js

@@ -1,260 +0,0 @@
-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;