diff --git a/e2e/html/directives-text.html b/e2e/html/directives-text.html
new file mode 100644
index 00000000..112c962b
--- /dev/null
+++ b/e2e/html/directives-text.html
@@ -0,0 +1,32 @@
+
+
+
+ Directives -- wp-text
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/e2e/specs/directives-show.spec.ts b/e2e/specs/directives-show.spec.ts
index f5ee3b9a..f52451bd 100644
--- a/e2e/specs/directives-show.spec.ts
+++ b/e2e/specs/directives-show.spec.ts
@@ -6,7 +6,6 @@ test.describe('wp-show', () => {
});
test('show if callback returns truthy value', async ({ page }) => {
- await page.pause();
const el = page.getByTestId('show if callback returns truthy value');
await expect(el).toBeVisible();
});
diff --git a/e2e/specs/directives-text.spec.ts b/e2e/specs/directives-text.spec.ts
new file mode 100644
index 00000000..3c65164f
--- /dev/null
+++ b/e2e/specs/directives-text.spec.ts
@@ -0,0 +1,27 @@
+import { test, expect } from '../tests';
+
+test.describe('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/store.js b/e2e/store.js
index 0f24b3b5..f1e1b2c4 100644
--- a/e2e/store.js
+++ b/e2e/store.js
@@ -4,6 +4,7 @@ store({
state: {
trueValue: true,
falseValue: false,
+ text: 'Text 1',
},
derived: {
renderContext: ({ context }) => {
@@ -26,6 +27,16 @@ store({
const obj = path.reduceRight((o, k) => o[k], context);
obj[key] = value;
},
+ toggleStateText: ({ state }) => {
+ state.text === 'Text 1'
+ ? (state.text = 'Text 2')
+ : (state.text = 'Text 1');
+ },
+ toggleContextText: ({ context }) => {
+ context.text === 'Text 1'
+ ? (context.text = 'Text 2')
+ : (context.text = 'Text 1');
+ },
},
});
diff --git a/src/runtime/directives.js b/src/runtime/directives.js
index 1799e718..185f1a1c 100644
--- a/src/runtime/directives.js
+++ b/src/runtime/directives.js
@@ -198,4 +198,20 @@ export default () => {
);
}
);
+
+ // wp-text
+ directive(
+ 'text',
+ ({
+ directives: {
+ text: { default: text },
+ },
+ element,
+ evaluate,
+ context,
+ }) => {
+ const contextValue = useContext(context);
+ element.props.children = evaluate(text, { context: contextValue });
+ }
+ );
};