@eightshift/frontend-libs-tailwind 1.0.0

package/scripts/plugins/yoast-seo.js

@@ -0,0 +1,70 @@
+import domReady from '@wordpress/dom-ready';
+import apiFetch from '@wordpress/api-fetch';
+import { subscribe, select } from '@wordpress/data';
+import { debounce, isEmpty } from '../helpers';
+
+/* global YoastSEO */
+
+/**
+ * Attributes with this key will be passed as custom data to YoastSEO's analysis.
+ * See https://developer.yoast.com/customization/yoast-seo/adding-custom-data-analysis for more info.
+ */
+export const yoastSeo = () => {
+	domReady(() => {
+		// Bailout if plugin is missing.
+		if (typeof YoastSEO === 'undefined' && typeof YoastSEO?.app === 'undefined') {
+			return;
+		}
+
+		// Local variable content, used to update Yoast modifications.
+		let content = '';
+		let isDataAvailable = false;
+
+		YoastSEO.app.registerPlugin('EightshiftCustomSeo', { status: 'ready' });
+		YoastSEO.app.registerModification('content', () => content, 'EightshiftCustomSeo', 5);
+
+		// Subscribe to changes.
+		subscribe(
+			// Small debounce for more optimisations in loading.
+			debounce(() => {
+				// Filter only when saved or autosaved.
+				const isSavingPost = wp.data.select('core/editor').isSavingPost();
+				const isAutosavingPost = wp.data.select('core/editor').isAutosavingPost();
+
+				// Get the new current post when ready.
+				const currentPost = select('core/editor').getCurrentPost();
+
+				// Filter subscribes. Check only if post is saving, autosaving or initial load.
+				if (isEmpty(currentPost) || (isDataAvailable && !isSavingPost && !isAutosavingPost)) {
+					return;
+				}
+
+				isDataAvailable = true;
+
+				// Find API url for single item.
+				const apiUrl = currentPost['_links']['wp:action-publish'][0].href;
+
+				if (typeof apiUrl === 'undefined') {
+					return;
+				}
+
+				// Fetch content from the api with only content data in it.
+				apiFetch({
+					url: `${apiUrl}?_fields=content`,
+					method: 'GET',
+				}).then((response) => {
+					const fetchedContent = response?.content?.rendered;
+
+					if (typeof content === 'undefined' && fetchedContent === content) {
+						return;
+					}
+					// Updating global variable content.
+					content = fetchedContent;
+					// Refreshing Yoast input.
+					YoastSEO.app.pluggable.refresh();
+				});
+			}, 50)
+		);
+	}
+	);
+};

package/webpack/base.mjs

@@ -0,0 +1,138 @@
+/**
+ * Project Base overrides used in production and development build.
+ *
+ */
+
+import webpack from 'webpack';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
+import DependencyExtractionWebpackPlugin from '@wordpress/dependency-extraction-webpack-plugin';
+
+export default (options) => {
+	// All Plugins used in production and development build.
+	const plugins = [];
+
+	// Provide global variables to window object.
+	if (!options.overrides.includes('providePlugin')) {
+		plugins.push(
+			new webpack.ProvidePlugin({
+				$: 'jquery',
+				jQuery: 'jquery',
+			}),
+		);
+	}
+
+	// Provide variables to code build.
+	if (!options.overrides.includes('definePlugin')) {
+		plugins.push(
+			new webpack.DefinePlugin({
+				'process.env.VERSION': JSON.stringify(Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)),
+				'process.browser': true,
+			}),
+		);
+	}
+
+	// Output css from Js.
+	if (!options.overrides.includes('miniCssExtractPlugin')) {
+		plugins.push(
+			new MiniCssExtractPlugin({
+				filename: `${options.config.filesOutput}.css`,
+			}),
+		);
+	}
+
+	// Create manifest.json file.
+	if (!options.overrides.includes('webpackManifestPlugin')) {
+		plugins.push(new WebpackManifestPlugin());
+	}
+
+	// Enable export for all WordPress related packages
+	if (!options.overrides.includes('dependencyExtractionWebpackPlugin')) {
+		plugins.push(
+			new DependencyExtractionWebpackPlugin({
+				outputFormat: 'json',
+				requestToExternal: function (request) {
+					if (request === '@wordpress/dom-ready') {
+						return '';
+					}
+				},
+			}),
+		);
+	}
+
+	// All module used in production and development build.
+	const module = {
+		rules: [],
+	};
+
+	// Module for JS and JSX.
+	if (!options.overrides.includes('js')) {
+		module.rules.push({
+			test: /\.(js|jsx)$/,
+			exclude: /node_modules[\\/](?!@eightshift)/,
+			use: {
+				loader: 'swc-loader',
+			},
+		});
+	}
+
+	// Module for Images.
+	if (!options.overrides.includes('images')) {
+		module.rules.push({
+			test: /\.(png|svg|jpg|jpeg|gif|ico|webp)$/i,
+			use: [
+				{
+					loader: 'url-loader',
+					options: {
+						limit: 8192,
+					},
+				},
+			],
+			type: 'javascript/auto',
+		});
+
+		module.rules.push({
+			test: /\.(png|svg|jpg|jpeg|gif|ico|webp)$/i,
+			exclude: [/fonts/, /node_modules/],
+			use: 'file-loader?name=[name].[ext]',
+			dependency: { not: ['url'] },
+		});
+	}
+
+	// Module for CSS.
+	if (!options.overrides.includes('css')) {
+		module.rules.push({
+			test: /\.css$/,
+			exclude: /node_modules/,
+			use: [
+				MiniCssExtractPlugin.loader,
+				{
+					loader: 'css-loader',
+				},
+				{
+					loader: 'postcss-loader',
+				},
+			],
+		});
+
+		module.rules.push({
+			test: /\.css$/,
+			include: /node_modules/,
+			use: [
+				{
+					loader: 'css-loader',
+				},
+			],
+		});
+	}
+
+	const resolve = {
+		symlinks: false,
+	};
+
+	return {
+		plugins,
+		module,
+		resolve,
+	};
+};

package/webpack/helpers.mjs

@@ -0,0 +1,67 @@
+/**
+ * File holding webpack helpers used to create project webpack build setup.
+ *
+ */
+
+import path from 'path';
+
+/**
+ * Generate all paths required for Webpack build to work.
+ *
+ * @param {string} projectDir Current project directory absolute path.
+ * @param {string} projectPathConfig Project path relative to project root.
+ * @param {string} assetsPathConfig Assets path after projectPath location.
+ * @param {string} blocksAssetsPathConfig Path of the block assets.
+ * @param {string} outputPathConfig Public output path after projectPath location.
+ * @param {string} blocksManifestSettingsPath Main global settings manifest.json path after projectPath location.
+ *
+ */
+function getConfig(
+	projectDir,
+	projectPathConfig,
+	assetsPathConfig = 'assets',
+	blocksAssetsPathConfig = 'src/Blocks/assets',
+	outputPathConfig = 'public',
+	blocksManifestSettingsPath = 'src/Blocks/manifest.json',
+) {
+	if (typeof projectDir === 'undefined') {
+		throw Error('projectDir parameter is empty, please provide. This key represents: Current project directory absolute path. For example: __dirname');
+	}
+
+	if (typeof projectPathConfig === 'undefined') {
+		throw Error(
+			'projectPath parameter is empty, please provide. This key represents: Project path relative to project root. For example: wp-content/themes/eightshift-boilerplate',
+		);
+	}
+
+	// Clear all slashes from user config.
+	const projectPathConfigClean = projectPathConfig.replace(/^\/|\/$/g, '');
+	const assetsPathConfigClean = assetsPathConfig.replace(/^\/|\/$/g, '');
+	const blocksAssetsPathConfigClean = blocksAssetsPathConfig.replace(/^\/|\/$/g, '');
+	const outputPathConfigClean = outputPathConfig.replace(/^\/|\/$/g, '');
+	const blocksManifestSettingsPathClean = blocksManifestSettingsPath.replace(/^\/|\/$/g, '');
+
+	// Create absolute path from the projects relative path.
+	const absolutePath = `${projectDir}`;
+
+	return {
+		absolutePath,
+
+		// Output files absolute location.
+		outputPath: path.resolve(absolutePath, outputPathConfigClean),
+
+		// Output files relative location, added before every output file in manifest.json. Should start and end with "/".
+		publicPath: path.join('/', projectPathConfigClean, outputPathConfigClean, '/'),
+
+		// Source files entries absolute locations.
+		applicationEntry: path.resolve(absolutePath, assetsPathConfigClean, 'application.js'),
+		applicationAdminEntry: path.resolve(absolutePath, assetsPathConfigClean, 'application-admin.js'),
+		applicationBlocksEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks.js'),
+		applicationBlocksEditorEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks-editor.js'),
+		applicationBlocksFrontendEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks-frontend.js'),
+
+		blocksManifestSettingsPath: path.resolve(absolutePath, blocksManifestSettingsPathClean),
+	};
+}
+
+export { getConfig };

package/webpack/index.mjs

@@ -0,0 +1,52 @@
+/**
+ * Main entrypoint location for webpack config.
+ *
+ */
+
+import { merge } from 'webpack-merge';
+import { getConfig } from './helpers.mjs';
+import baseConfig from './base.mjs';
+import projectConfig from './project.mjs';
+import productionConfig from './production.mjs';
+
+const eightshiftConfig = (mode, optionsData = {}) => {
+	// All config and default setting overrides must be provided using this object.
+	const options = {
+		config: {},
+		overrides: [],
+		...optionsData,
+	};
+
+	// Append project config using getConfig helper.
+	options.config = getConfig(
+		optionsData.config.projectDir,
+		optionsData.config.projectPath,
+		optionsData.config.assetsPath,
+		optionsData.config.blocksAssetsPath,
+		optionsData.config.outputPath,
+		optionsData.config.blocksManifestSettingsPath,
+	);
+
+	options.config.mode = mode;
+	options.config.filesOutput = mode === 'production' ? '[name]-[contenthash]' : '[name]';
+
+	// Get all webpack partials.
+	const base = baseConfig(options);
+	const project = projectConfig(options);
+	const production = productionConfig(options);
+
+	// Default output that is going to be merged in any env.
+	const outputDefault = merge(project, base);
+
+	// Output development setup by default.
+	const development = {
+		devtool: false,
+		watchOptions: {
+			ignored: ['**/node_modules', '**/vendor', '**/public'],
+		},
+	};
+
+	return merge(outputDefault, mode === 'production' ? production : development);
+};
+
+export { eightshiftConfig };

package/webpack/production.mjs

@@ -0,0 +1,60 @@
+/**
+ * Project Production config used only in production build.
+ *
+ */
+
+import TerserPlugin from 'terser-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import { browserslistToTargets } from 'lightningcss';
+import browserslist from 'browserslist';
+
+export default (options) => {
+	// Enable Webpack caching for production
+	const cache = true;
+
+	// All Plugins used in production build.
+	const plugins = [];
+
+	// All Optimizations used in production build.
+	const optimization = {
+		minimize: true,
+		minimizer: [],
+	};
+
+	// Plugin used to minify output.
+	if (!options.overrides.includes('terserPlugin')) {
+		optimization.minimizer.push(
+			new TerserPlugin({
+				parallel: true,
+				minify: TerserPlugin.swcMinify,
+				terserOptions: {
+					compress: {
+						drop_console: true,
+						passes: 2,
+					},
+					format: {
+						comments: false,
+					},
+				},
+			}),
+		);
+	}
+
+	if (!options.overrides.includes('cssMinimizerPlugin')) {
+		optimization.minimizer.push(
+			new CssMinimizerPlugin({
+				parallel: true,
+				minify: CssMinimizerPlugin.lightningCssMinify,
+				minimizerOptions: {
+					targets: browserslistToTargets(browserslist('>= 0.25%')),
+				},
+			}),
+		);
+	}
+
+	return {
+		plugins,
+		optimization,
+		cache,
+	};
+};

package/webpack/project.mjs

@@ -0,0 +1,55 @@
+/**
+ * Project config used only in development and production build.
+ *
+ */
+
+import fs from 'fs';
+
+export default (options) => {
+	const entry = {};
+	const output = {
+		path: options.config.outputPath,
+		publicPath: options.config.publicPath,
+
+		// This clean will remove the build folder on every start of the build process.
+		clean: true,
+
+		// If you are using the multiple webpack builds with dynamic import you must provide different name here in order to avoid collision.
+		library: '[name]',
+	};
+
+	// Load Application Entrypoint.
+	if (!options.overrides.includes('application') && fs.existsSync(options.config.applicationEntry)) {
+		entry.application = options.config.applicationEntry;
+	}
+
+	// Load ApplicationAdmin Entrypoint.
+	if (!options.overrides.includes('applicationAdmin') && fs.existsSync(options.config.applicationAdminEntry)) {
+		entry.applicationAdmin = options.config.applicationAdminEntry;
+	}
+
+	// Load ApplicationBlocks Entrypoint.
+	if (!options.overrides.includes('applicationBlocks') && fs.existsSync(options.config.applicationBlocksEntry)) {
+		entry.applicationBlocks = options.config.applicationBlocksEntry;
+	}
+
+	// Load ApplicationBlocksEditor Entrypoint.
+	if (!options.overrides.includes('applicationBlocksEditor') && fs.existsSync(options.config.applicationBlocksEditorEntry)) {
+		entry.applicationBlocksEditor = options.config.applicationBlocksEditorEntry;
+	}
+
+	// Load applicationBlocksFrontend Entrypoint.
+	if (!options.overrides.includes('applicationBlocksFrontend') && fs.existsSync(options.config.applicationBlocksFrontendEntry)) {
+		entry.applicationBlocksFrontend = options.config.applicationBlocksFrontendEntry;
+	}
+
+	// Load filename Output.
+	if (!options.overrides.includes('filename')) {
+		output.filename = `${options.config.filesOutput}.js`;
+	}
+
+	return {
+		entry,
+		output,
+	};
+};