Unbundle Social JS code from Jetpack and Social

projects/js-packages/webpack-config/changelog/update-unbundle-publicize-from-jetpack

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Extracted common UI logic from Social to publicize package to load it dynamically at runtime

projects/js-packages/webpack-config/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-webpack-config",
-	"version": "3.2.10",
+	"version": "3.3.0-alpha",
 	"description": "Library of pieces for webpack config in Jetpack projects.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/webpack-config/#readme",
 	"bugs": {

projects/js-packages/webpack-config/src/webpack.js

@@ -105,7 +105,36 @@ const DefinePlugin = defines => [
 	} ),
 ];
 
-const DependencyExtractionPlugin = options => [ new DependencyExtractionWebpackPlugin( options ) ];
+const defaultRequestMap = {
+	'@automattic/jetpack-publicize-components': {
+		external: 'JetpackPublicize',
+		handle: 'jetpack-publicize',
+	},
+	'@automattic/jetpack-connection': {
+		external: 'JetpackConnection',
+		handle: 'jetpack-connection',
+	},
+};
+
+const DependencyExtractionPlugin = ( { requestMap, ...options } = {} ) => {
+	const finalRequestMap = { ...defaultRequestMap, ...requestMap };
+
+	const requestToExternal = request => {
+		return finalRequestMap[ request ]?.external;
+	};
+
+	const requestToHandle = request => {
+		return finalRequestMap[ request ]?.handle;
+	};
+
+	return [
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternal,
+			requestToHandle,
+			...options,
+		} ),
+	];
+};
 
 const DuplicatePackageCheckerPlugin = options => [
 	new DuplicatePackageCheckerWebpackPlugin( options ),

projects/packages/connection/package.json

@@ -25,6 +25,7 @@
 		"watch": "pnpm run build && pnpm webpack watch"
 	},
 	"dependencies": {
+		"@automattic/jetpack-connection": "workspace:*",
 		"@automattic/jetpack-idc": "workspace:*",
 		"@wordpress/data": "10.2.0",
 		"@wordpress/element": "6.2.0"

projects/packages/connection/src/class-connection-assets.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Connection_Assets.
+ *
+ * @package automattic/jetpack-connection
+ */
+
+namespace Automattic\Jetpack\Connection;
+
+use Automattic\Jetpack\Assets;
+
+/**
+ * Connection_Assets class.
+ */
+class Connection_Assets {
+
+	/**
+	 * Initialize the class.
+	 */
+	public static function configure() {
+		add_action( 'wp_loaded', array( __CLASS__, 'register_assets' ) );
+	}
+
+	/**
+	 * Register assets.
+	 */
+	public static function register_assets() {
+		if ( ! wp_script_is( 'jetpack-connection', 'registered' ) ) {
+
+			Assets::register_script(
+				'jetpack-connection',
+				'../dist/jetpack-connection.js',
+				__FILE__,
+				array(
+					'in_footer'  => true,
+					'textdomain' => 'jetpack-idc',
+				)
+			);
+
+			Initial_State::render_script( 'jetpack-connection' );
+		}
+	}
+}

projects/packages/connection/src/js/jetpack-connection.js

@@ -0,0 +1 @@
+export * from '@automattic/jetpack-connection';

projects/packages/connection/webpack.config.js

@@ -16,8 +16,55 @@ for ( const file of glob.sync( './src/sso/*.css' ) ) {
 	ssoEntries[ name ].push( path.resolve( file ) );
 }
 
+/**
+ * @type {import('webpack').Configuration[]} Webpack configuration.
+ */
+const sharedConfig = {
+	mode: jetpackWebpackConfig.mode,
+	devtool: jetpackWebpackConfig.devtool,
+	output: {
+		...jetpackWebpackConfig.output,
+		path: path.resolve( './dist' ),
+	},
+	optimization: {
+		...jetpackWebpackConfig.optimization,
+	},
+	resolve: {
+		...jetpackWebpackConfig.resolve,
+	},
+	node: false,
+	module: {
+		strictExportPresence: true,
+		rules: [
+			// Transpile JavaScript, including node_modules.
+			jetpackWebpackConfig.TranspileRule(),
+
+			// Transpile @automattic/jetpack-* in node_modules too.
+			jetpackWebpackConfig.TranspileRule( {
+				includeNodeModules: [ '@automattic/jetpack-' ],
+			} ),
+
+			// Handle CSS.
+			jetpackWebpackConfig.CssRule( {
+				extensions: [ 'css', 'sass', 'scss' ],
+				extraLoaders: [ 'sass-loader' ],
+			} ),
+		],
+	},
+	externals: {
+		...jetpackWebpackConfig.externals,
+		jetpackConfig: JSON.stringify( {
+			consumer_slug: 'identity_crisis',
+		} ),
+	},
+};
+
+/**
+ * @type {import('webpack').Configuration[]} Webpack configuration.
+ */
 module.exports = [
 	{
+		...sharedConfig,
 		entry: {
 			'tracks-ajax': './src/js/tracks-ajax.js',
 			'tracks-callables': {
@@ -30,47 +77,41 @@ module.exports = [
 			'identity-crisis': './src/identity-crisis/_inc/admin.jsx',
 			...ssoEntries,
 		},
-		mode: jetpackWebpackConfig.mode,
-		devtool: jetpackWebpackConfig.devtool,
-		output: {
-			...jetpackWebpackConfig.output,
-			path: path.resolve( './dist' ),
-		},
-		optimization: {
-			...jetpackWebpackConfig.optimization,
-		},
-		resolve: {
-			...jetpackWebpackConfig.resolve,
+		plugins: [
+			...jetpackWebpackConfig.StandardPlugins( {
+				MiniCssExtractPlugin: { filename: '[name].css' },
+			} ),
+		],
+	},
+	{
+		...sharedConfig,
+		entry: {
+			'jetpack-connection': {
+				import: './src/js/jetpack-connection.js',
+				library: {
+					name: 'JetpackConnection',
+					type: 'umd',
+				},
+			},
 		},
-		node: false,
 		plugins: [
 			...jetpackWebpackConfig.StandardPlugins( {
 				MiniCssExtractPlugin: { filename: '[name].css' },
+				DependencyExtractionPlugin: {
+					requestMap: {
+						// We don't want to externalize this package, we rather want to bundle it.
+						'@automattic/jetpack-connection': {},
+					},
+				},
 			} ),
 		],
 		module: {
-			strictExportPresence: true,
+			...sharedConfig.module,
 			rules: [
-				// Transpile JavaScript, including node_modules.
-				jetpackWebpackConfig.TranspileRule(),
-
-				// Transpile @automattic/jetpack-* in node_modules too.
-				jetpackWebpackConfig.TranspileRule( {
-					includeNodeModules: [ '@automattic/jetpack-' ],
-				} ),
-
-				// Handle CSS.
-				jetpackWebpackConfig.CssRule( {
-					extensions: [ 'css', 'sass', 'scss' ],
-					extraLoaders: [ 'sass-loader' ],
-				} ),
+				...sharedConfig.module.rules,
+				// Handle images.
+				jetpackWebpackConfig.FileRule(),
 			],
 		},
-		externals: {
-			...jetpackWebpackConfig.externals,
-			jetpackConfig: JSON.stringify( {
-				consumer_slug: 'identity_crisis',
-			} ),
-		},
 	},
 ];

projects/packages/publicize/changelog/update-unbundle-publicize-from-jetpack

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Extracted common UI logic from Social to publicize package to load it dynamically at runtime

projects/packages/publicize/composer.json

@@ -67,7 +67,7 @@
 			"link-template": "https://github.com/Automattic/jetpack-publicize/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-trunk": "0.47.x-dev"
+			"dev-trunk": "0.48.x-dev"
 		}
 	},
 	"config": {

projects/packages/publicize/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize",
-	"version": "0.47.3",
+	"version": "0.48.0-alpha",
 	"description": "Publicize makes it easy to share your site’s posts on several social media networks automatically when you publish a new post.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/publicize/#readme",
 	"bugs": {
@@ -27,13 +27,23 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"devDependencies": {
+		"@automattic/calypso-color-schemes": "3.1.3",
+		"@automattic/color-studio": "2.6.0",
 		"@automattic/jetpack-webpack-config": "workspace:*",
+		"@csstools/postcss-global-data": "2.1.1",
 		"@wordpress/browserslist-config": "6.2.0",
+		"autoprefixer": "10.4.14",
 		"concurrently": "7.6.0",
+		"postcss": "8.4.31",
+		"postcss-custom-properties": "12.1.7",
+		"postcss-loader": "6.2.0",
+		"sass": "1.64.1",
+		"sass-loader": "12.4.0",
 		"webpack": "5.76.0",
 		"webpack-cli": "4.9.1"
 	},
 	"dependencies": {
+		"@automattic/jetpack-publicize-components": "workspace:*",
 		"@wordpress/i18n": "5.2.0"
 	}
 }

projects/packages/publicize/postcss.config.js

@@ -0,0 +1,21 @@
+module.exports = () => ( {
+	plugins: [
+		require( '@csstools/postcss-global-data' )( {
+			// Provide the properties that postcss-custom-properties is going to work with.
+			files: [ require.resolve( '@automattic/calypso-color-schemes/root-only/index.css' ) ],
+		} ),
+		require( 'postcss-custom-properties' )( {
+			// Use of `preserve: false` dates back to when we still used @automattic/calypso-build.
+			// Ideally we'd get rid of it to properly make use of CSS vars, but first we have to
+			// figure out how to ensure the vars actually get defined in the browser without
+			// including them in every bundle. Some base stylesheet (wp_register_style) the other
+			// stylesheets depend on maybe? And also deal with extremely generic vars like "--color-text".
+			//
+			// See also https://github.com/Automattic/jetpack/pull/13854#issuecomment-550898168,
+			// where people were confused about what was going on when calypso-build stopped
+			// including a postcss.config.js like this by default.
+			preserve: false,
+		} ),
+		require( 'autoprefixer' ),
+	],
+} );