Skip to content
This repository was archived by the owner on Dec 9, 2023. It is now read-only.

Commit 27a5679

Browse files
delawskidelawski
committed
Migrate part of the app shell logic from ampproject#1519 
1 parent 77fca7d commit 27a5679

File tree

4 files changed

+22
-228
lines changed

4 files changed

+22
-228
lines changed

‎includes/amp-helper-functions.php‎

Lines changed: 17 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,7 @@ function amp_init() {
9292
*/
9393
do_action( 'amp_init' );
9494

95-
global $amp_service_worker;
96-
$amp_service_worker = new AMP_Service_Worker();
97-
$amp_service_worker->init();
98-
9995
add_filter( 'allowed_redirect_hosts', [ 'AMP_HTTP', 'filter_allowed_redirect_hosts' ] );
100-
add_filter( 'wp_redirect', [ 'AMP_HTTP', 'add_purged_query_vars' ] );
10196
AMP_HTTP::purge_amp_query_vars();
10297
AMP_HTTP::send_cors_headers();
10398
AMP_HTTP::handle_xhr_request();
@@ -527,7 +522,6 @@ function _amp_bootstrap_customizer() {
527522
* Redirects the old AMP URL to the new AMP URL.
528523
*
529524
* If post slug is updated the amp page with old post slug will be redirected to the updated url.
530-
* Also includes all original query vars.
531525
*
532526
* @since 0.5
533527
*
@@ -794,7 +788,7 @@ function is_amp_endpoint() {
794788
(
795789
isset( $support_args['app_shell'] )
796790
&&
797-
'inner' === AMP_Theme_Support::get_requested_app_shell_component()
791+
'inner' === AMP_App_Shell::get_requested_app_shell_component()
798792
)
799793
);
800794

@@ -922,6 +916,13 @@ function amp_register_default_scripts( $wp_scripts ) {
922916
[],
923917
null
924918
);
919+
$wp_scripts->add_data(
920+
$handle,
921+
'amp_script_attributes',
922+
[
923+
'async' => true,
924+
]
925+
);
925926

926927
// Shadow AMP API.
927928
$handle = 'amp-shadow';
@@ -932,38 +933,6 @@ function amp_register_default_scripts( $wp_scripts ) {
932933
null
933934
);
934935

935-
// Add Web Components polyfill if Shadow DOM is not natively available.
936-
$wp_scripts->add_inline_script(
937-
$handle,
938-
sprintf(
939-
'if ( ! Element.prototype.attachShadow ) { const script = document.createElement( "script" ); script.src = %s; script.async = true; document.head.appendChild( script ); }',
940-
wp_json_encode( 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.1/webcomponents-bundle.js' )
941-
),
942-
'after'
943-
);
944-
945-
// App shell library.
946-
$handle = 'amp-wp-app-shell';
947-
$asset_file = AMP__DIR__ . '/assets/js/' . $handle . '.asset.php';
948-
$asset = require $asset_file;
949-
$dependencies = $asset['dependencies'];
950-
$dependencies[] = 'amp-shadow';
951-
$version = $asset['version'];
952-
$wp_scripts->add(
953-
$handle,
954-
amp_get_asset_url( 'js/' . $handle . '.js' ),
955-
$dependencies,
956-
$version
957-
);
958-
$wp_scripts->add_data(
959-
$handle,
960-
'amp_script_attributes',
961-
[
962-
'async' => true,
963-
]
964-
);
965-
$wp_scripts->add_data( $handle, 'precache', true );
966-
967936
// Register all AMP components as defined in the spec.
968937
foreach ( AMP_Allowed_Tags_Generated::get_extension_specs() as $extension_name => $extension_spec ) {
969938
$src = sprintf(
@@ -1066,17 +1035,18 @@ function amp_render_scripts( $scripts ) {
10661035
function amp_filter_script_loader_tag( $tag, $handle ) {
10671036
$prefix = 'https://cdn.ampproject.org/';
10681037
$src = wp_scripts()->registered[ $handle ]->src;
1069-
$attributes = wp_scripts()->get_data( $handle, 'amp_script_attributes' );
1070-
if ( empty( $attributes ) && 0 === strpos( $src, $prefix ) ) {
1071-
// All scripts from AMP CDN should be loaded async.
1072-
$attributes = [
1073-
'async' => true,
1074-
];
1075-
}
1076-
if ( empty( $attributes ) ) {
1038+
if ( 0 !== strpos( $src, $prefix ) ) {
10771039
return $tag;
10781040
}
10791041

1042+
/*
1043+
* All scripts from AMP CDN should be loaded async.
1044+
* See <https://www.ampproject.org/docs/integration/pwa-amp/amp-in-pwa#include-"shadow-amp"-in-your-progressive-web-app>.
1045+
*/
1046+
$attributes = [
1047+
'async' => true,
1048+
];
1049+
10801050
// Add custom-template and custom-element attributes. All component scripts look like https://cdn.ampproject.org/v0/:name-:version.js.
10811051
if ( 'v0' === strtok( substr( $src, strlen( $prefix ) ), '/' ) ) {
10821052
/*
@@ -1779,63 +1749,6 @@ function amp_wp_kses_mustache( $markup ) {
17791749
return wp_kses( $markup, array_fill_keys( $amp_mustache_allowed_html_tags, [] ) );
17801750
}
17811751

1782-
/**
1783-
* Mark the beginning of the content that will be displayed inside the app shell.
1784-
*
1785-
* Depends on adding app_shell to the amp theme support args.
1786-
*
1787-
* @since 1.1
1788-
* @todo Should this take an argument for the content placeholder?
1789-
*/
1790-
function amp_start_app_shell_content() {
1791-
$support_args = AMP_Theme_Support::get_theme_support_args();
1792-
if ( ! isset( $support_args['app_shell'] ) ) {
1793-
return;
1794-
}
1795-
1796-
printf( '<div id="%s">', esc_attr( AMP_Theme_Support::APP_SHELL_CONTENT_ELEMENT_ID ) );
1797-
1798-
// Start output buffering if requesting outer shell, since all content will be omitted from the response.
1799-
if ( 'outer' === AMP_Theme_Support::get_requested_app_shell_component() ) {
1800-
$content_placeholder = '<p>' . esc_html__( 'Loading&hellip;', 'amp' ) . '</p>';
1801-
1802-
/**
1803-
* Filters the content which is shown in the app shell for the content before it is loaded.
1804-
*
1805-
* This is used to display a loading message or a content skeleton.
1806-
*
1807-
* @since 1.1
1808-
* @todo Consider using template part for this instead, or an action with a default.
1809-
*
1810-
* @param string $content_placeholder Content placeholder.
1811-
*/
1812-
echo apply_filters( 'amp_app_shell_content_placeholder', $content_placeholder ); // phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped
1813-
1814-
ob_start();
1815-
}
1816-
}
1817-
1818-
/**
1819-
* Mark the end of the content that will be displayed inside the app shell.
1820-
*
1821-
* Depends on adding app_shell to the amp theme support args.
1822-
*
1823-
* @since 1.1
1824-
*/
1825-
function amp_end_app_shell_content() {
1826-
$support_args = AMP_Theme_Support::get_theme_support_args();
1827-
if ( ! isset( $support_args['app_shell'] ) ) {
1828-
return;
1829-
}
1830-
1831-
// Clean output buffer if requesting outer shell, since all content will be omitted from the response.
1832-
if ( 'outer' === AMP_Theme_Support::get_requested_app_shell_component() ) {
1833-
ob_end_clean();
1834-
}
1835-
1836-
printf( '</div><!-- #%s -->', esc_attr( AMP_Theme_Support::APP_SHELL_CONTENT_ELEMENT_ID ) );
1837-
}
1838-
18391752
/**
18401753
* Add "View AMP" admin bar item for Transitional/Reader mode.
18411754
*

‎includes/class-amp-http.php‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@ public static function purge_amp_query_vars() {
147147
self::ACTION_XHR_CONVERTED_QUERY_VAR,
148148
'amp_latest_update_time',
149149
'amp_last_check_time',
150-
AMP_Theme_Support::APP_SHELL_COMPONENT_QUERY_VAR,
151150
];
152151

153152
// Scrub input vars.
@@ -191,21 +190,6 @@ public static function purge_amp_query_vars() {
191190
}
192191
}
193192

194-
/**
195-
* Add purged query vars to the supplied URL.
196-
*
197-
* @since 1.0
198-
*
199-
* @param string $url URL.
200-
* @return string URL with purged query vars.
201-
*/
202-
public static function add_purged_query_vars( $url ) {
203-
if ( ! empty( self::$purged_amp_query_vars ) ) {
204-
$url = add_query_arg( self::$purged_amp_query_vars, $url );
205-
}
206-
return $url;
207-
}
208-
209193
/**
210194
* Filter the allowed redirect hosts to include AMP caches.
211195
*

‎includes/class-amp-service-worker.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ public static function init() {
4545
add_filter(
4646
'wp_service_worker_navigation_route',
4747
function ( $navigation_route ) {
48-
$navigation_route['url'] = add_query_arg( AMP_Theme_Support::APP_SHELL_COMPONENT_QUERY_VAR, 'outer', home_url( '/' ) );
48+
$navigation_route['url'] = add_query_arg( AMP_App_Shell::COMPONENT_QUERY_VAR, 'outer', home_url( '/' ) );
4949
return $navigation_route;
5050
}
5151
);
@@ -58,7 +58,7 @@ function ( $navigation_route ) {
5858
*/
5959
$add_inner_app_shell_component = function( $precache_entry ) {
6060
$precache_entry['url'] = add_query_arg(
61-
AMP_Theme_Support::APP_SHELL_COMPONENT_QUERY_VAR,
61+
AMP_App_Shell::COMPONENT_QUERY_VAR,
6262
'inner',
6363
$precache_entry['url']
6464
);

‎includes/class-amp-theme-support.php‎

Lines changed: 3 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -34,21 +34,6 @@ class AMP_Theme_Support {
3434
*/
3535
const SLUG = 'amp';
3636

37-
/**
38-
* Query var for requesting the inner or outer app shell.
39-
*
40-
* @todo This can go into the AMP_Service_Worker class or rather an AMP_App_Shell class.
41-
* @var string
42-
*/
43-
const APP_SHELL_COMPONENT_QUERY_VAR = 'amp_app_shell_component';
44-
45-
/**
46-
* ID for element that contains the content for app shell.
47-
*
48-
* @var string
49-
*/
50-
const APP_SHELL_CONTENT_ELEMENT_ID = 'amp-app-shell-content';
51-
5237
/**
5338
* Slug identifying standard website mode.
5439
*
@@ -170,8 +155,6 @@ public static function init() {
170155
// Ensure extra theme support for core themes is in place.
171156
AMP_Core_Theme_Sanitizer::extend_theme_support();
172157

173-
add_action( 'parse_query', [ __CLASS__, 'init_app_shell' ], 9 );
174-
175158
/*
176159
* Note that wp action is used instead of template_redirect because some themes/plugins output
177160
* the response at this action and then short-circuit with exit. So this is why the preceding
@@ -389,70 +372,6 @@ static function() {
389372
}
390373
}
391374

392-
/**
393-
* Init app shell.
394-
*
395-
* @since 1.1
396-
*/
397-
public static function init_app_shell() {
398-
$theme_support = self::get_theme_support_args();
399-
if ( ! isset( $theme_support['app_shell'] ) ) {
400-
return;
401-
}
402-
403-
$requested_app_shell_component = self::get_requested_app_shell_component();
404-
405-
// When inner app shell is requested, it is always an AMP request. Do not allow AMP when getting outer app shell for now (but this should be allowed in the future).
406-
if ( 'outer' === $requested_app_shell_component ) {
407-
add_action(
408-
'template_redirect',
409-
function() {
410-
if ( ! is_amp_endpoint() ) {
411-
return;
412-
}
413-
wp_die(
414-
esc_html__( 'Outer app shell can only be requested of the non-AMP version (thus requires Transitional mode).', 'amp' ),
415-
esc_html__( 'AMP Outer App Shell Problem', 'amp' ),
416-
[ 'response' => 400 ]
417-
);
418-
}
419-
);
420-
}
421-
422-
// @todo This query param should be standardized and then this can be handled in the same place as WP_Service_Worker_Navigation_Routing_Component::filter_title_for_streaming_header().
423-
if ( 'outer' === $requested_app_shell_component ) {
424-
add_filter(
425-
'pre_get_document_title',
426-
function() {
427-
return __( 'Loading...', 'amp' );
428-
}
429-
);
430-
}
431-
432-
// Enqueue scripts for (outer) app shell, including precached app shell and normal site navigation prior to service worker installation.
433-
if ( 'inner' !== $requested_app_shell_component ) {
434-
add_action(
435-
'wp_enqueue_scripts',
436-
function() use ( $requested_app_shell_component ) {
437-
if ( is_amp_endpoint() ) {
438-
return;
439-
}
440-
wp_enqueue_script( 'amp-shadow' );
441-
wp_enqueue_script( 'amp-wp-app-shell' );
442-
443-
$exports = [
444-
'contentElementId' => AMP_Theme_Support::APP_SHELL_CONTENT_ELEMENT_ID,
445-
'homeUrl' => home_url( '/' ),
446-
'adminUrl' => admin_url( '/' ),
447-
'componentQueryVar' => AMP_Theme_Support::APP_SHELL_COMPONENT_QUERY_VAR,
448-
'isOuterAppShell' => 'outer' === $requested_app_shell_component,
449-
];
450-
wp_add_inline_script( 'amp-wp-app-shell', sprintf( 'var ampAppShell = %s;', wp_json_encode( $exports ) ), 'before' );
451-
}
452-
);
453-
}
454-
}
455-
456375
/**
457376
* Ensure that the current AMP location is correct.
458377
*
@@ -1941,28 +1860,6 @@ public static function filter_customize_partial_render( $partial ) {
19411860
return $partial;
19421861
}
19431862

1944-
/**
1945-
* Get the requested app shell component (either inner or outer).
1946-
*
1947-
* @return string|null App shell component.
1948-
*/
1949-
public static function get_requested_app_shell_component() {
1950-
if ( ! isset( AMP_HTTP::$purged_amp_query_vars[ self::APP_SHELL_COMPONENT_QUERY_VAR ] ) ) {
1951-
return null;
1952-
}
1953-
1954-
$theme_support_args = self::get_theme_support_args();
1955-
if ( ! isset( $theme_support_args['app_shell'] ) ) {
1956-
return null;
1957-
}
1958-
1959-
$component = AMP_HTTP::$purged_amp_query_vars[ self::APP_SHELL_COMPONENT_QUERY_VAR ];
1960-
if ( in_array( $component, [ 'inner', 'outer' ], true ) ) {
1961-
return $component;
1962-
}
1963-
return null;
1964-
}
1965-
19661863
/**
19671864
* Prepare inner app shell.
19681865
*
@@ -2124,7 +2021,7 @@ public static function prepare_response( $response, $args = [] ) {
21242021
}
21252022

21262023
// Get request for shadow DOM.
2127-
$app_shell_component = self::get_requested_app_shell_component();
2024+
$app_shell_component = AMP_App_Shell::get_requested_app_shell_component();
21282025

21292026
$args = array_merge(
21302027
[
@@ -2168,10 +2065,10 @@ public static function prepare_response( $response, $args = [] ) {
21682065
// Remove the children of the content if requesting the outer app shell.
21692066
$content_element = null;
21702067
if ( $app_shell_component ) {
2171-
$content_element = $dom->getElementById( self::APP_SHELL_CONTENT_ELEMENT_ID );
2068+
$content_element = $dom->getElementById( AMP_App_Shell::CONTENT_ELEMENT_ID );
21722069
if ( ! $content_element ) {
21732070
status_header( 500 );
2174-
return esc_html__( 'Unable to locate APP_SHELL_CONTENT_ELEMENT_ID.', 'amp' );
2071+
return esc_html__( 'Unable to locate AMP_App_Shell::CONTENT_ELEMENT_ID.', 'amp' );
21752072
}
21762073
if ( 'inner' === $app_shell_component ) {
21772074
self::prepare_inner_app_shell_document( $content_element );

0 commit comments

Comments
 (0)