diff --git a/e2e/html/directives-show.html b/e2e/html/directives-show.html deleted file mode 100644 index 53254ddc..00000000 --- a/e2e/html/directives-show.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - Directives -- data-wp-show - - - - - - -
-

trueValue children

-
- -
-

falseValue children

-
- -
-
- falseValue -
- -
- - - - - - diff --git a/e2e/html/directives-text.html b/e2e/html/directives-text.html deleted file mode 100644 index 982d6605..00000000 --- a/e2e/html/directives-text.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - Directives -- data-wp-text - - -
- - -
- -
- - -
- - - - - - diff --git a/e2e/html/tovdom-islands.html b/e2e/html/tovdom-islands.html index d663ad1b..9ede672f 100644 --- a/e2e/html/tovdom-islands.html +++ b/e2e/html/tovdom-islands.html @@ -5,14 +5,14 @@
-
+
This should be shown because it is inside an island.
-
+
This should not be shown because it is inside an island. @@ -21,7 +21,7 @@
-
+
@@ -34,14 +34,13 @@
-
- - This should not have two template wrappers because - that means we hydrated twice. - +
+
+ + This should not have two template wrappers + because that means we hydrated twice. + +
@@ -49,7 +48,7 @@
-
+
diff --git a/e2e/specs/directives-show.spec.ts b/e2e/specs/directives-show.spec.ts deleted file mode 100644 index 2c1decec..00000000 --- a/e2e/specs/directives-show.spec.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { test, expect } from '../tests'; - -test.describe('data-wp-show', () => { - test.beforeEach(async ({ goToFile }) => { - await goToFile('directives-show.html'); - }); - - test('show if callback returns truthy value', async ({ page }) => { - const el = page.getByTestId('show if callback returns truthy value'); - await expect(el).toBeVisible(); - }); - - test('do not show if callback returns falsy value', async ({ page }) => { - const el = page.getByTestId( - 'do not show if callback returns false value' - ); - await expect(el).toBeHidden(); - }); - - test('hide when toggling truthy value to falsy', async ({ page }) => { - const el = page.getByTestId('show if callback returns truthy value'); - await expect(el).toBeVisible(); - page.getByTestId('toggle trueValue').click(); - await expect(el).toBeHidden(); - page.getByTestId('toggle trueValue').click(); - await expect(el).toBeVisible(); - }); - - test('show when toggling false value to truthy', async ({ page }) => { - const el = page.getByTestId( - 'do not show if callback returns false value' - ); - await expect(el).toBeHidden(); - page.getByTestId('toggle falseValue').click(); - await expect(el).toBeVisible(); - page.getByTestId('toggle falseValue').click(); - await expect(el).toBeHidden(); - }); - - test('can use context values', async ({ page }) => { - const el = page.getByTestId('can use context values'); - await expect(el).toBeHidden(); - page.getByTestId('toggle context false value').click(); - await expect(el).toBeVisible(); - page.getByTestId('toggle context false value').click(); - await expect(el).toBeHidden(); - }); -}); diff --git a/e2e/specs/directives-text.spec.ts b/e2e/specs/directives-text.spec.ts deleted file mode 100644 index 00bc0987..00000000 --- a/e2e/specs/directives-text.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { test, expect } from '../tests'; - -test.describe('data-wp-text', () => { - test.beforeEach(async ({ goToFile }) => { - await goToFile('directives-text.html'); - }); - - test('show proper text reading from state', async ({ page }) => { - await page.pause(); - const el = page.getByTestId('show state text'); - await expect(el).toHaveText('Text 1'); - page.getByTestId('toggle state text').click(); - await expect(el).toHaveText('Text 2'); - page.getByTestId('toggle state text').click(); - await expect(el).toHaveText('Text 1'); - }); - - test('show proper text reading from context', async ({ page }) => { - await page.pause(); - const el = page.getByTestId('show context text'); - await expect(el).toHaveText('Text 1'); - page.getByTestId('toggle context text').click(); - await expect(el).toHaveText('Text 2'); - page.getByTestId('toggle context text').click(); - await expect(el).toHaveText('Text 1'); - }); -}); diff --git a/e2e/specs/tovdom-islands.spec.ts b/e2e/specs/tovdom-islands.spec.ts index cfaf3f70..5830f793 100644 --- a/e2e/specs/tovdom-islands.spec.ts +++ b/e2e/specs/tovdom-islands.spec.ts @@ -28,7 +28,9 @@ test.describe('toVdom - isands', () => { await expect(el).toBeVisible(); }); - test('directives inside islands should not be hydrated twice', async ({ + // TODO: Implement this test once we have data-wp-init: + // https://github.com/WordPress/block-interactivity-experiments/pull/220#discussion_r1171417552 + test.skip('directives inside islands should not be hydrated twice', async ({ page, }) => { const el = page.getByTestId('island inside another island'); diff --git a/src/runtime/directives.js b/src/runtime/directives.js index a2ed18a1..e29bd37c 100644 --- a/src/runtime/directives.js +++ b/src/runtime/directives.js @@ -129,25 +129,6 @@ export default () => { } ); - // data-wp-show - directive( - 'show', - ({ - directives: { - show: { default: show }, - }, - element, - evaluate, - context, - }) => { - const contextValue = useContext(context); - if (!evaluate(show, { context: contextValue })) - element.props.children = ( - - ); - } - ); - // data-wp-ignore directive( 'ignore', @@ -164,20 +145,4 @@ export default () => { ); } ); - - // data-wp-text - directive( - 'text', - ({ - directives: { - text: { default: text }, - }, - element, - evaluate, - context, - }) => { - const contextValue = useContext(context); - element.props.children = evaluate(text, { context: contextValue }); - } - ); };