add example to readme

README.md

@@ -91,7 +91,7 @@ We'll assume you have a Vite project set up. If not, you can create one with `np
 
 > ### Next steps
 >
-> - **[📚 Learn about the Liquidish Syntax](./docs/liquidish-syntax)**
+> - **[📚 Learn about the Liquidish Syntax](./docs/liquidish-syntax.md)**
 >
 > - **[🗺 Discover the ISPConfig or PHP transformation strategies](./docs/transformation-strategies.md)**.
 >

docs/transformation-strategies.md

@@ -2,6 +2,11 @@
 
 Liquidish accepts a strategy that defines how the Liquidish syntax is transformed to the target language.
 
+There are a couple built-in strategies:
+
+- [🖥 `ISPConfigTransformationStrategy`](#-ispconfigtransformationstrategy)
+- [🌍 `PHPTransformationStrategy`](#-phptransformationstrategy) (minimal example)
+
 You can also [create a 🧩 Custom Transformation Strategy](#-custom-transformation-strategy).
 
 ## 🖥 `ISPConfigTransformationStrategy`
@@ -126,4 +131,128 @@ This will be transformed to PHP's `include` statement.
 
 You can create your own transformation strategy by extending the `TransformationStrategy` class.
 
-See the [tests](./tests/) and the existing strategies ([php](./src/strategies/php-transformation-strategy.ts), [ISPConfig](./src/strategies/ispconfig-transformation-strategy.ts)) for examples.
+Here's a typescript example that shows how to start making your own transformation strategy for [Vue.js](https://vuejs.org/guide/essentials/template-syntax.html).
+
+```typescript
+import { BaseTransformationStrategy } from 'liquidish/strategies';
+import { LogicToken, Node, LogicTokenFlags, ParentNode, SelfClosingNode } from 'liquidish';
+
+/**
+ * @public
+ */
+export class VueTransformationStrategy extends BaseTransformationStrategy {
+    /**
+     * @inheritdoc
+     */
+    override getLogicTokens(): LogicToken[] {
+        return [
+            ...super.getLogicTokens(),
+            { type: 'html' },
+            { type: 'pre', flags: LogicTokenFlags.OpensScope },
+            { type: 'endpre', flags: LogicTokenFlags.ClosesScope },
+        ];
+    }
+
+    /**
+     * @inheritdoc
+     */
+    override transformNode(node: Node): string | null {
+        switch (node.type) {
+            case 'html':
+                return this.html(<SelfClosingNode>node);
+            case 'pre':
+                return this.pre(<ParentNode>node);
+            // No need to implement endpre, as it's handled by the base class
+        }
+
+        return super.transformNode(node);
+    }
+
+    /**
+     * Transforms {% html '<div>hello</div>' %}
+     */
+    private html(node: SelfClosingNode): string {
+        return `<div v-html="'${node.parameters}'"></div>`
+    }
+
+    /**
+     * Transforms {% pre %}
+     */
+    private pre(node: ParentNode): string {
+        const contents = this.statementsToText(node.statements);
+        const transformed = this.transformer.transform(contents);
+
+        return `<span v-pre>${transformed}</span>`;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    override comment(comment: string): string {
+        if (this.transformer.showComments === true) {
+            return `<!--${comment}-->`;
+        }
+
+        return '';
+    }
+
+    /**
+     * @inheritdoc
+     */
+    override if(name: string, op?: string, value?: string): string {
+        if (op && value) {
+          return `<div v-if="$${name} ${op} '${value}'">`;
+        }
+
+        return `<div v-if="$${name}">`;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    override elseif(name: string, op?: string, value?: string): string {
+        if (op && value) {
+          return `</div><div v-else-if="$${name} ${op} '${value}'">`;
+        }
+
+        return `</div><div v-else-if="$${name}">`;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    override else(): string {
+        return `</div><div v-else>`;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    override endif(): string {
+        return `</div>`;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    override unless(name: string): string {
+        return `<div v-if="!${name}">`;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    override endunless(): string {
+        return `</div>`;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    override variable(variable: string): string {
+        return `{{ ${variable} }}`;
+    }
+}
+```
+
+Accompanying this example is [this test file](../tests/vue-transformation-strategy.spec.ts) that shows how to test your transformation strategy.