-
Notifications
You must be signed in to change notification settings - Fork 103
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update Optimization Detective plugin build process #1080
Changes from 7 commits
d5785eb
381ba0f
c2815e3
d0cb266
2f3605a
b246546
767c895
4656cbf
6ae5fb0
0e07d11
3aae425
ae07548
bc906ae
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -28,11 +28,14 @@ | |
"changelog": "./bin/plugin/cli.js changelog", | ||
"since": "./bin/plugin/cli.js since", | ||
"readme": "./bin/plugin/cli.js readme", | ||
"build": "wp-scripts build", | ||
"build": "npm-run-all 'build:!(plugin)'", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What's the purpose of this? Why not use |
||
"build:optimization-detective": "wp-scripts build -c plugins/optimization-detective/webpack.config.js", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The standalone plugin deploy workflow is just doing:
So won't this mean that the assets aren't included in the plugin build there? Separately, in Optimization Detective, when first cloning the repo for development, isn't there a check to see if the web-vitals script is present and if not an admin notice is shown with instructions to build the plugin? Won't that need to be updated? Will this be getting run automatically when doi There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It will be run automatically on the pre-hook. See diff. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh I see (and sorry for my truncated com 😉 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I think we did it in the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh right. If we think it's important to add, or alternatively what if the asset build happens automatically after npm install? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, they would get a fatal error on the frontend when attempting to require the asset PHP file. In PHP7 can't this Error be caught? If so, we could then show an error in the console about needing to build. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. How about this: --- a/plugins/optimization-detective/detection.php
+++ b/plugins/optimization-detective/detection.php
@@ -35,8 +35,17 @@ function od_get_detection_script( string $slug, OD_URL_Metrics_Group_Collection
*/
$detection_time_window = apply_filters( 'od_detection_time_window', 5000 );
- $web_vitals_lib_data = require __DIR__ . '/detection/web-vitals.asset.php';
- $web_vitals_lib_src = add_query_arg( 'ver', $web_vitals_lib_data['version'], plugin_dir_url( __FILE__ ) . '/detection/web-vitals.js' );
+ try {
+ $web_vitals_lib_data = require __DIR__ . '/detection/web-vitals.asset.php';
+ } catch ( Error $error ) {
+ return wp_get_inline_script_tag(
+ sprintf(
+ 'console.error( %s );',
+ wp_json_encode( '[Optimization Detective] ' . __( 'Unable to load web-vitals.asset.php. Please make sure you have run `npm install && npm run build:optimization-detective`.', 'optimization-detective' ) )
+ )
+ );
+ }
+ $web_vitals_lib_src = add_query_arg( 'ver', $web_vitals_lib_data['version'], plugin_dir_url( __FILE__ ) . '/detection/web-vitals.js' );
$current_url = od_get_current_url();
$detect_args = array( There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If we are going to add it, I think the plugin screen would be the best place as users will come to know about this as soon as the plugin is activated. But above approach also looks good to me. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Added in 4656cbf There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See my other comment: This NPM script is confusing, why not put it directly into |
||
"build-plugins": "npm-run-all 'build:plugin:!(performance-lab)'", | ||
"build:plugin:performance-lab": "rm -rf build/performance-lab && mkdir -p build/performance-lab && git archive HEAD | tar -x -C build/performance-lab", | ||
"build:plugin:auto-sizes": "webpack --mode production --env plugin=auto-sizes", | ||
"build:plugin:dominant-color-images": "webpack --mode production --env plugin=dominant-color-images", | ||
"build:plugin:embed-optimizer": "webpack --mode production --env plugin=embed-optimizer", | ||
"prebuild:plugin:optimization-detective": "npm run build:optimization-detective", | ||
"build:plugin:optimization-detective": "webpack --mode production --env plugin=optimization-detective", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I find this very confusing. Why is there It's not obvious how |
||
"build:plugin:speculation-rules": "webpack --mode production --env plugin=speculation-rules", | ||
"build:plugin:webp-uploads": "webpack --mode production --env plugin=webp-uploads", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
const path = require( 'path' ); | ||
const WebpackBar = require( 'webpackbar' ); | ||
const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
const { | ||
getPluginRootPath, | ||
assetDataTransformer, | ||
} = require( '../../bin/webpack/utils' ); | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); | ||
|
||
const sharedConfig = { | ||
...defaultConfig, | ||
entry: {}, | ||
output: {}, | ||
}; | ||
|
||
/** | ||
* Webpack Config: Optimization Detective | ||
* | ||
* @param {*} env Webpack environment | ||
* @return {Object} Webpack configuration | ||
*/ | ||
const optimizationDetective = ( env ) => { | ||
if ( env.plugin && env.plugin !== 'optimization-detective' ) { | ||
return { | ||
entry: {}, | ||
output: {}, | ||
}; | ||
} | ||
|
||
const source = path.resolve( | ||
getPluginRootPath(), | ||
'node_modules/web-vitals' | ||
); | ||
const destination = path.resolve( | ||
getPluginRootPath(), | ||
'plugins/optimization-detective/detection' | ||
); | ||
|
||
return { | ||
...sharedConfig, | ||
name: 'optimization-detective', | ||
plugins: [ | ||
new CopyWebpackPlugin( { | ||
patterns: [ | ||
{ | ||
from: `${ source }/dist/web-vitals.js`, | ||
to: `${ destination }/web-vitals.js`, | ||
}, | ||
{ | ||
from: `${ source }/package.json`, | ||
to: `${ destination }/web-vitals.asset.php`, | ||
transform: { | ||
transformer: assetDataTransformer, | ||
cache: false, | ||
}, | ||
}, | ||
], | ||
} ), | ||
new WebpackBar( { | ||
name: 'Building Optimization Detective Assets', | ||
color: '#2196f3', | ||
} ), | ||
], | ||
}; | ||
}; | ||
|
||
module.exports = optimizationDetective; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Which parts of this file are actually needed? Background is I don't recall that we discussed having individual webpack scripts per plugin before, and since the only plugin that needs a build process to function at all so far is this one, I think we should go with a more pragmatic solution. Why not include this Optimization Detective specific web-vitals step in the main We can consider optimizing it later, let's just get to an MVP solution now. Decisions that affect the build infrastructure of the entire repo shouldn't be made in a plugin's feature branch PR. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Per #1080 (comment) it seems like you're saying 767c895 should be reverted? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @westonruter Yes, I think that's a much simpler solution for now, especially since this is the only plugin that needs a build process. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Reverted in 0e07d11 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see this is removed because it is duplicated with the deploy job below.