Skip to content
This repository has been archived by the owner on Jul 28, 2023. It is now read-only.

Limit the hydration to block when client-side navigations are deactivated #124

Merged
merged 32 commits into from
Dec 23, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
75c7758
Add tabs block
luisherranz Dec 20, 2022
08d3a01
Add interactivity support
luisherranz Dec 20, 2022
a40cbcc
Revert changes to admin page
luisherranz Dec 20, 2022
69e2006
Disable full vDOM hydration
luisherranz Dec 20, 2022
54dcc51
Hydrate interactive blocks (don't stop)
luisherranz Dec 20, 2022
c656209
Add `wp-inner-block` attribute
luisherranz Dec 20, 2022
2d4df41
Do either directive attributes or tag
luisherranz Dec 20, 2022
77bbf08
Stop hydration when it finds wp-inner-block
luisherranz Dec 20, 2022
691da6d
Rename to wpx to avoid conflicts with wp-
luisherranz Dec 20, 2022
6a9dd4a
Switch to WP format
luisherranz Dec 20, 2022
a3dc09b
Rename blocks
luisherranz Dec 21, 2022
e55b61f
Only add wpx-non-interactive to inner blocks of isolated blocks
luisherranz Dec 21, 2022
4e415a5
Rename wpx to ignore and island
luisherranz Dec 21, 2022
d0f29a7
Rename back wpx to wp
luisherranz Dec 21, 2022
ab16c13
Init playwright
luisherranz Dec 21, 2022
cdb77f2
Add first e2e tests
luisherranz Dec 21, 2022
3860148
Start GH action
luisherranz Dec 21, 2022
5626c59
Add build step
luisherranz Dec 21, 2022
31a22ea
Move wp-ignore inside the `wp-` logic
luisherranz Dec 21, 2022
b851f5b
Don't hydrate interactive blocks twice
luisherranz Dec 21, 2022
1cba1bb
Test islands inside inner block of isolated islands
luisherranz Dec 21, 2022
dcb811d
Small text changes
luisherranz Dec 22, 2022
213b198
Add full mode to toVdom
luisherranz Dec 22, 2022
54cc766
Fix syntax
luisherranz Dec 22, 2022
8c06850
Fix admin (back to original format)
luisherranz Dec 22, 2022
2c70c56
Fix syntax and correct broken code
luisherranz Dec 22, 2022
6e4fb91
Don't add wp-island and wp-ignore when client-side transitions are en…
luisherranz Dec 22, 2022
0381d82
Rename tests
luisherranz Dec 22, 2022
fccda53
Fix full tests
luisherranz Dec 22, 2022
9baabb7
Switch to wpx specific for the e2e tests
luisherranz Dec 22, 2022
7656707
Remove blocks
luisherranz Dec 22, 2022
94f594f
Avoid unnamed functions
luisherranz Dec 23, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
name: Playwright Tests
on: pull_request
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 14
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Build
run: npm run build
- name: Run Playwright tests
run: npx playwright test
- uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
node_modules
build
vendor
composer.lock
composer.lock
/test-results/
/playwright-report/
/playwright/.cache/
20 changes: 20 additions & 0 deletions e2e/tovdom-full.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>toVdom - full</title>
<meta itemprop="wp-client-side-transitions" content="active" />
</head>
<body>
<div wp-ignore>
<wp-show when="state.falseValue">
<span data-testid="inside wp-ignore">
This should not be shown because we are in full mode.
</span>
</wp-show>
</div>

<script src="../build/e2e/tovdom.js"></script>
<script src="../build/runtime.js"></script>
<script src="../build/vendors.js"></script>
</body>
</html>
13 changes: 13 additions & 0 deletions e2e/tovdom-full.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { join } from 'path';
import { test, expect } from '@playwright/test';

test.describe('toVdom - full', () => {
test.beforeEach(async ({ page }) => {
await page.goto('file://' + join(__dirname, 'tovdom-full.html'));
});

test('it should stop when it founds wp-ignore', async ({ page }) => {
const el = page.getByTestId('inside wp-ignore');
await expect(el).toBeVisible();
});
});
70 changes: 70 additions & 0 deletions e2e/tovdom-islands.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<title>toVdom - islands</title>
</head>
<body>
<div>
<wp-show when="state.falseValue">
<span data-testid="not inside an island">
This should be shown because it is inside an island.
</span>
</wp-show>

<div wp-island>
<wp-show when="state.falseValue">
<span data-testid="inside an island">
This should not be shown because it is inside an island.
</span>
</wp-show>
</div>

<div wp-island>
<div wp-ignore>
<wp-show when="state.falseValue">
<span
data-testid="inside an inner block of an isolated island"
>
This should be shown because it is inside an inner
block of an isolated island.
</span>
</wp-show>
</div>
</div>

<div wp-island>
<div wp-island>
<wp-show
when="state.falseValue"
data-testid="island inside another island"
>
<span>
This should not have two template wrappers because
that means we hydrated twice.
</span>
</wp-show>
</div>
</div>

<div wp-island>
<div>
<div wp-island wp-ignore>
<wp-show when="state.falseValue">
<span
data-testid="island inside inner block of isolated island"
>
This should not be shown because even though it
is inside an inner block of an isolated island,
it's inside an new island.
</span>
</wp-show>
</div>
</div>
</div>
</div>

<script src="../build/e2e/tovdom.js"></script>
<script src="../build/runtime.js"></script>
<script src="../build/vendors.js"></script>
</body>
</html>
48 changes: 48 additions & 0 deletions e2e/tovdom-islands.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { join } from 'path';
import { test, expect } from '@playwright/test';

test.describe('toVdom - isands', () => {
test.beforeEach(async ({ page }) => {
await page.goto('file://' + join(__dirname, 'tovdom-islands.html'));
});

test('directives that are not inside islands should not be hydrated', async ({
page,
}) => {
const el = page.getByTestId('not inside an island');
await expect(el).toBeVisible();
});

test('directives that are inside islands should be hydrated', async ({
page,
}) => {
const el = page.getByTestId('inside an island');
await expect(el).toBeHidden();
});

test('directives that are inside inner blocks of isolated islands should not be hydrated', async ({
page,
}) => {
const el = page.getByTestId(
'inside an inner block of an isolated island'
);
await expect(el).toBeVisible();
});

test('directives inside islands should not be hydrated twice', async ({
page,
}) => {
const el = page.getByTestId('island inside another island');
const templates = el.locator('template');
expect(await templates.count()).toEqual(1);
});

test('islands inside inner blocks of isolated islands should be hydrated', async ({
page,
}) => {
const el = page.getByTestId(
'island inside inner block of isolated island'
);
await expect(el).toBeHidden();
});
});
7 changes: 7 additions & 0 deletions e2e/tovdom.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import wpx from '../src/runtime/wpx';

wpx({
state: {
falseValue: false,
},
});
18 changes: 18 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"devDependencies": {
"@babel/core": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"@playwright/test": "^1.29.0",
"@prettier/plugin-php": "^0.18.9",
"@types/jest": "^27.5.1",
"@wordpress/env": "^4.4.0",
Expand Down
107 changes: 107 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();

/**
* See https://playwright.dev/docs/test-configuration.
*/
const config: PlaywrightTestConfig = {
testDir: './e2e',
/* Maximum time one test can run for. */
timeout: 30 * 1000,
expect: {
/**
* Maximum time expect() should wait for the condition to be met.
* For example in `await expect(locator).toHaveText();`
*/
timeout: 5000,
},
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
actionTimeout: 0,
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://localhost:3000',

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},

/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
},
},

{
name: 'firefox',
use: {
...devices['Desktop Firefox'],
},
},

{
name: 'webkit',
use: {
...devices['Desktop Safari'],
},
},

/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: {
// ...devices['Pixel 5'],
// },
// },
// {
// name: 'Mobile Safari',
// use: {
// ...devices['iPhone 12'],
// },
// },

/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: {
// channel: 'msedge',
// },
// },
// {
// name: 'Google Chrome',
// use: {
// channel: 'chrome',
// },
// },
],

/* Folder for test artifacts such as screenshots, videos, traces, etc. */
// outputDir: 'test-results/',

/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// port: 3000,
// },
};

export default config;
24 changes: 9 additions & 15 deletions src/admin/admin-page.php
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@ function wp_directives_register_menu() {
}
add_action( 'admin_menu', 'wp_directives_register_menu' );

function wp_directives_render_admin_page() {?>
function wp_directives_render_admin_page() { ?>
<div class="wrap">
<h2>WP Directives</h2>
<form method="POST" action="options.php">
<?php
settings_fields( 'wp_directives_plugin_settings' );
do_settings_sections( 'wp_directives_plugin_page' );
<h2>WP Directives</h2>
<form method="POST" action="options.php">
<?php
settings_fields( 'wp_directives_plugin_settings' );
do_settings_sections( 'wp_directives_plugin_page' );
?>
<?php submit_button(); ?>
</form>
<?php submit_button(); ?>
</form>
</div>
<?php
}
Expand Down Expand Up @@ -67,13 +67,7 @@ function wp_directives_client_side_transitions_input() {
?>

<input type="checkbox"
name="
<?php
echo esc_attr(
'wp_directives_plugin_settings[client_side_transitions]'
)
?>
"
name="<?php echo esc_attr( 'wp_directives_plugin_settings[client_side_transitions]' ); ?>"
<?php echo $options['client_side_transitions'] ? 'checked' : ''; ?>
>

Expand Down
Loading