🔀 Merge pull request #213 from williamchong/feature/wp-script-build

🧑‍💻 Refactor all JS components to use `wp-script` build
likecoin · Dec 7, 2022 · b9650d1 · b9650d1
2 parents 9f44f1c + 68d3cdf
commit b9650d1
Show file tree

Hide file tree

Showing 54 changed files with 5,941 additions and 12,730 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.browserslistrc b/.browserslistrc
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -20,10 +20,10 @@ jobs:
             ./vendor/bin/phpcs --config-set installed_paths `pwd`/wpcs
       - run:
           name: Basic Lint Test
-          command: ./vendor/bin/phpcs likecoin --standard=WordPress-Extra --extensions=php
+          command: ./vendor/bin/phpcs likecoin --standard=WordPress-Extra --extensions=php --ignore=*/assets/js/*
       - run:
           name: Complete Lint Test
-          command: ./vendor/bin/phpcs likecoin --standard=WordPress --extensions=php
+          command: ./vendor/bin/phpcs likecoin --standard=WordPress --extensions=php --ignore=*/assets/js/*
       - save_cache:
           key: likecoin-wordpress-{{ .Environment.CACHE_UUID }}-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
           paths:

diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,3 @@
+node_modules
+vendor
+assets/js/**
diff --git a/README.md b/README.md
@@ -22,9 +22,26 @@ docker-compose build
 
 # Run the dev env
 docker-compose up
+
+# Install nodejs dependencies
+# npm install
+```
+
+## JavaScript Development
+Auto rebuild script in dev mode. Only one javascript component can be run at a time.
+``` bash
+# DePub metabox for classic editor
+npm run dev:admin:metabox
+
+# LikeCoin plugin admin setting pages
+npm run dev:admin-settings
+
+# DePub Editor sidebar for Gutenberg
+npm run dev:sidebar
 ```
 
-## Test
+
+## Lint
 TODO: we are running these command in host, should switch to docker-based test command
 
 Run PHP sniffer for PHP lint
@@ -48,23 +65,17 @@ cd ..
 ./vendor/bin/phpcbf likecoin --standard=WordPress --extensions=php
 ```
 
-Run Eslint for javascript lint
+Run Eslint and Stylelint for javascript lint
 ``` bash
-# Install nodejs dependencies
-npm install
-
-# run eslint
-npm run test
+# run eslint and stylelint
+npm run lint
 ```
 
 ## Production
 
-Javascript files need to be transpile using rollup
+Javascript files need to be transpile using wp-script
 
 ``` bash
-# Install nodejs dependencies
-# npm install
-
-# Run babel and rollup
+# Run wp-script/webpack
 npm run build
 ```
diff --git a/likecoin/admin/editor.php b/likecoin/admin/editor.php
@@ -32,11 +32,18 @@ function likecoin_load_editor_scripts() {
 	if ( ! function_exists( 'has_blocks' ) ) {
 		return;
 	}
+	$asset_file = include plugin_dir_path( __FILE__ ) . '/../assets/js/sidebar/index.asset.php';
+	wp_enqueue_style(
+		'lc_js_editor',
+		LC_URI . 'assets/js/sidebar/index.css',
+		array(),
+		$asset_file['version']
+	);
 	wp_enqueue_script(
 		'lc_js_editor',
-		LC_URI . 'assets/js/admin/likecoin_editor.js',
-		array( 'wp-polyfill', 'wp-editor', 'wp-i18n' ),
-		LC_PLUGIN_VERSION,
+		LC_URI . 'assets/js/sidebar/index.js',
+		$asset_file['dependencies'],
+		$asset_file['version'],
 		true
 	);
 }

diff --git a/likecoin/admin/metabox.php b/likecoin/admin/metabox.php
@@ -434,11 +434,12 @@ function likecoin_add_meta_box( $post, $button_params, $publish_params ) {
 		wp_nonce_field( 'lc_save_post', 'lc_metabox_nonce' );
 		wp_register_style( 'lc_css_common', LC_URI . 'assets/css/likecoin.css', false, LC_PLUGIN_VERSION );
 		wp_enqueue_style( 'lc_css_common' );
+		$asset_file = include plugin_dir_path( __FILE__ ) . '/../assets/js/admin-metabox/metabox.asset.php';
 		wp_enqueue_script(
 			'lc_js_metabox',
-			LC_URI . 'assets/js/admin/likecoin_metabox.js',
-			array( 'wp-polyfill', 'jquery' ),
-			LC_PLUGIN_VERSION,
+			LC_URI . 'assets/js/admin-metabox/metabox.js',
+			$asset_file['dependencies'],
+			$asset_file['version'],
 			true
 		);
 		wp_localize_script(

diff --git a/likecoin/admin/sidebar.php b/likecoin/admin/sidebar.php
@@ -54,9 +54,7 @@ function likecoin_add_sidebar( $post, $publish_params ) {
 		'lc-plugin-sidebar-js',
 		'wpApiSettings',
 		array(
-			'root'          => esc_url_raw( rest_url() ),
 			'siteurl'       => get_site_url(),
-			'nonce'         => wp_create_nonce( 'wp_rest' ),
 			'postId'        => $post_id,
 			'likecoHost'    => LC_LIKE_CO_HOST,
 			'likerlandHost' => LC_LIKER_LAND_HOST,

diff --git a/likecoin/admin/view/view.php b/likecoin/admin/view/view.php
@@ -110,7 +110,7 @@ function likecoin_display_admin_pages() {
  */
 function likecoin_show_likecoin_admin_main_page_content() {
 	?> 
-	<p>Default admin page.</p>
+	<div id="likecoin-admin-settings"></div>
 	<?php
 }
 /**
@@ -140,39 +140,26 @@ function likecoin_get_css_files( $file_string ) {
  * Define how to load JavaScript files coming from React.
  */
 function likecoin_enqueue_admin_js() {
-	$react_app_build_url = LC_URI . 'assets/js/admin-settings/';
-	$manifest_path       = LC_DIR . 'assets/js/admin-settings/asset-manifest.json';
-	// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped,WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
-	$request = file_get_contents( $manifest_path );
-	// phpcs:enable WordPress.Security.EscapeOutput.OutputNotEscaped,WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
-
-	if ( ! $request ) {
-		return false;
-	}
-	$files_data = json_decode( $request );
-	if ( null === $files_data ) {
-		return;
-	}
-	if ( ! property_exists( $files_data, 'entrypoints' ) ) {
-		return false;
-	}
-	$assets_files = $files_data->entrypoints;
-
-	$js_files  = array_filter( $assets_files, 'likecoin_get_js_files' );
-	$css_files = array_filter( $assets_files, 'likecoin_get_css_files' );
-	foreach ( $css_files as $index => $css_file ) {
-		wp_enqueue_style( 'likecoin-admin-settings-' . $index, $react_app_build_url . $css_file, array(), LC_PLUGIN_VERSION );
-	}
-	foreach ( $js_files as $index => $js_file ) {
-		// add wp-api-request as dependency so React can access window.wpApiSettings.
-		wp_enqueue_script( 'likecoin-admin-settings-' . $index, $react_app_build_url . $js_file, array( 'wp-api-request', 'wp-i18n' ), LC_PLUGIN_VERSION, true );
-	}
+	$asset_file = include plugin_dir_path( __FILE__ ) . '/../../assets/js/admin-settings/index.asset.php';
+	wp_enqueue_style(
+		'likecoin-admin-settings',
+		LC_URI . 'assets/js/admin-settings/index.css',
+		array(),
+		$asset_file['version']
+	);
+	wp_enqueue_script(
+		'likecoin-admin-settings',
+		LC_URI . 'assets/js/admin-settings/index.js',
+		$asset_file['dependencies'],
+		$asset_file['version'],
+		true
+	);
 	// create a window.likecoinReactAppData which can be accessed by JavaScript.
 	wp_localize_script(
-		'likecoin-admin-settings-1',
+		'likecoin-admin-settings',
 		'likecoinReactAppData',
 		array(
-			'appSelector'   => '#wpbody #wpbody-content',
+			'appSelector'   => '#likecoin-admin-settings',
 			'likecoHost'    => LC_LIKE_CO_HOST,
 			'likerlandHost' => LC_LIKER_LAND_HOST,
 		)