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/src/webpack.js

@@ -114,6 +114,10 @@ const defaultRequestMap = {
 		external: 'JetpackConnection',
 		handle: 'jetpack-connection',
 	},
+	'@automattic/jetpack-publicize-components': {
+		external: 'JetpackPublicize',
+		handle: 'jetpack-publicize',
+	},
 };
 
 const DependencyExtractionPlugin = ( { requestMap, ...options } = {} ) => {

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/package.json

@@ -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.6.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.94.0",
 		"webpack-cli": "4.9.1"
 	},
 	"dependencies": {
+		"@automattic/jetpack-publicize-components": "workspace:*",
 		"@wordpress/i18n": "5.6.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' ),
+	],
+} );

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

@@ -7,6 +7,8 @@
 
 namespace Automattic\Jetpack\Publicize;
 
+use Automattic\Jetpack\Assets;
+
 /**
  * Publicize_Assets class.
  */
@@ -16,6 +18,26 @@ class Publicize_Assets {
 	 * Initialize the class.
 	 */
 	public static function configure() {
+		add_action( 'wp_loaded', array( __CLASS__, 'register_assets' ) );
+
 		Publicize_Script_Data::configure();
 	}
+
+	/**
+	 * Register assets.
+	 */
+	public static function register_assets() {
+		if ( ! wp_script_is( 'jetpack-publicize', 'registered' ) ) {
+
+			Assets::register_script(
+				'jetpack-publicize',
+				'../build/jetpack-publicize.js',
+				__FILE__,
+				array(
+					'in_footer'  => true,
+					'textdomain' => 'jetpack-publicize-pkg',
+				)
+			);
+		}
+	}
 }

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

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

projects/packages/publicize/webpack.config.js

@@ -1,56 +1,99 @@
 const path = require( 'path' );
 const jetpackWebpackConfig = require( '@automattic/jetpack-webpack-config/webpack' );
 
+/**
+ * @type {import('webpack').Configuration[]} Webpack configuration.
+ */
+const sharedConfig = {
+	entry: {
+		'classic-editor-share-limits': './src/js/classic-editor-share-limits.js',
+		'classic-editor-connections': './src/js/classic-editor-connections.js',
+	},
+	mode: jetpackWebpackConfig.mode,
+	devtool: jetpackWebpackConfig.devtool,
+	output: {
+		...jetpackWebpackConfig.output,
+		path: path.resolve( './build' ),
+	},
+	optimization: {
+		...jetpackWebpackConfig.optimization,
+	},
+	resolve: {
+		...jetpackWebpackConfig.resolve,
+	},
+	node: false,
+	plugins: [ ...jetpackWebpackConfig.StandardPlugins() ],
+	module: {
+		strictExportPresence: true,
+		rules: [
+			// Transpile JavaScript
+			jetpackWebpackConfig.TranspileRule( {
+				exclude: /node_modules\//,
+			} ),
+
+			// Transpile @automattic/* in node_modules too.
+			jetpackWebpackConfig.TranspileRule( {
+				includeNodeModules: [ '@automattic/' ],
+			} ),
+
+			// Handle CSS.
+			jetpackWebpackConfig.CssRule( {
+				extensions: [ 'css', 'sass', 'scss' ],
+				extraLoaders: [
+					{
+						loader: 'postcss-loader',
+						options: {
+							postcssOptions: { config: path.join( __dirname, 'postcss.config.js' ) },
+						},
+					},
+					'sass-loader',
+				],
+			} ),
+
+			// Handle images.
+			jetpackWebpackConfig.FileRule(),
+		],
+	},
+};
+
+/**
+ * @type {import('webpack').Configuration[]} Webpack configuration.
+ */
 module.exports = [
 	{
+		...sharedConfig,
 		entry: {
 			'classic-editor-share-limits': './src/js/classic-editor-share-limits.js',
 			'classic-editor-connections': './src/js/classic-editor-connections.js',
 		},
-		mode: jetpackWebpackConfig.mode,
-		devtool: jetpackWebpackConfig.devtool,
-		output: {
-			...jetpackWebpackConfig.output,
-			path: path.resolve( './build' ),
-		},
-		optimization: {
-			...jetpackWebpackConfig.optimization,
-		},
-		resolve: {
-			...jetpackWebpackConfig.resolve,
-		},
-		node: false,
 		plugins: [ ...jetpackWebpackConfig.StandardPlugins() ],
-		module: {
-			strictExportPresence: true,
-			rules: [
-				// Transpile JavaScript
-				jetpackWebpackConfig.TranspileRule( {
-					exclude: /node_modules\//,
-				} ),
-
-				// Transpile @automattic/* in node_modules too.
-				jetpackWebpackConfig.TranspileRule( {
-					includeNodeModules: [ '@automattic/' ],
-				} ),
-
-				// Handle CSS.
-				jetpackWebpackConfig.CssRule( {
-					extensions: [ 'css', 'sass', 'scss' ],
-					extraLoaders: [
-						{
-							loader: 'postcss-loader',
-							options: {
-								postcssOptions: { config: path.join( __dirname, 'postcss.config.js' ) },
-							},
-						},
-						'sass-loader',
-					],
-				} ),
-
-				// Handle images.
-				jetpackWebpackConfig.FileRule(),
-			],
+	},
+	{
+		...sharedConfig,
+		entry: {
+			'jetpack-publicize': {
+				import: './src/js/jetpack-publicize.js',
+				library: {
+					name: 'JetpackPublicize',
+					type: 'umd',
+				},
+			},
+		},
+		externals: {
+			...jetpackWebpackConfig.externals,
+			jetpackConfig: JSON.stringify( {
+				consumer_slug: 'jetpack-publicize',
+			} ),
 		},
+		plugins: [
+			...jetpackWebpackConfig.StandardPlugins( {
+				DependencyExtractionPlugin: {
+					requestMap: {
+						// We don't want to externalize this package, we rather want to bundle it.
+						'@automattic/jetpack-publicize-components': {},
+					},
+				},
+			} ),
+		],
 	},
 ];

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

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

projects/plugins/jetpack/tests/e2e/package.json

@@ -13,7 +13,7 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "pnpm jetpack build packages/forms packages/assets packages/connection packages/blaze plugins/jetpack -v --no-pnpm-install --production",
+		"build": "pnpm jetpack build packages/forms packages/assets packages/connection packages/publicize packages/blaze plugins/jetpack -v --no-pnpm-install --production",
 		"clean": "rm -rf output",
 		"config:decrypt": "pnpm test-decrypt-default-config && pnpm test-decrypt-config",
 		"distclean": "rm -rf node_modules",

projects/plugins/social/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/plugins/social/tests/e2e/package.json

@@ -14,7 +14,7 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "pnpm jetpack build packages/assets packages/connection plugins/social plugins/jetpack -v --no-pnpm-install --production",
+		"build": "pnpm jetpack build packages/assets packages/connection packages/publicize plugins/social plugins/jetpack -v --no-pnpm-install --production",
 		"clean": "rm -rf output",
 		"config:decrypt": "openssl enc -md sha1 -aes-256-cbc -d -pass env:CONFIG_KEY -in ./node_modules/jetpack-e2e-commons/config/encrypted.enc -out ./config/local.cjs",
 		"distclean": "rm -rf node_modules",