https://github.com/lmc-eu/twigx-bundle

JSX like component syntax for Twig templating language
https://github.com/lmc-eu/twigx-bundle

design-system jsx symfony symfony-bundle syntax twig

Last synced: 2 months ago
JSON representation

JSX like component syntax for Twig templating language

• Host: GitHub
• URL: https://github.com/lmc-eu/twigx-bundle
• Owner: lmc-eu
• Created: 2022-06-23T15:49:13.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-12T11:14:10.000Z (7 months ago)
• Last Synced: 2024-09-30T17:23:10.194Z (3 months ago)
• Topics: design-system, jsx, symfony, symfony-bundle, syntax, twig
• Language: PHP
• Homepage:
• Size: 198 KB
• Stars: 10
• Watchers: 10
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
TwigX Bundle

=================

[![Latest Stable Version](https://img.shields.io/packagist/v/lmc/twigx-bundle.svg)](https://packagist.org/packages/lmc/twigx-bundle)

[![Coverage Status](https://coveralls.io/repos/github/lmc-eu/twigx-bundle/badge.svg?branch=main)](https://coveralls.io/github/lmc-eu/twigx-bundle?branch=main)

Symfony bundle extending Twig template engine with [JSX]-like markup.

## Requirements

- PHP 7.4 || 8.1

- Symfony 4.4+ || 5.4+ || ^6.1

- Twig >=1.44.6 || >=2.12.5 || 3+

## Changelog

See [CHANGELOG](./CHANGELOG.md)

## How to install

### Step 1

Download using *composer*

 Install package

```bash

composer require lmc/twigx-bundle

```

### Step 2

Add `TwigXBundle` into bundles (under `all` bundles). If you use Symfony flex, it will be configured automatically.

**bundles.php**

```php

    return [

        ...,

        Lmc\TwigXBundle\TwigXBundle::class => ['all' => true],

    ];

```

### Step 3 (optional)

If you want to change the default settings, create a config

**config/packages/twigx.yml**

```yaml

    # all parameters are optional

    twigx:

        # define one or more paths to expand or overload components (uses glob patterns)

        paths:

            - "%kernel.project_dir%/templates/components"

        paths_alias: 'jobs-ui' # alias for twig paths above (default is 'spirit')

```

## Usage

Now you can use Twig components with HTML-like syntax in your Symfony project. You only need to remember that, unlike in HTML, component tags must always start with a capital letter:

```html

Some other content

  ...

```

You can pass attributes like this:

```html

    Submit

```

or pure original implementation

```twig

{% embed "@spirit/componentName.twig" with { props: {

    attr: 'value'

}} %}

    {% block content %}

        Some other content

    {% endblock %}

{% endembed %}

```

### Allowed parenthesis

You can pass variables to props using two syntaxes.

JSX-like syntax uses single `{...}` parentheses or Twig-like syntax that uses `{{...}}` parentheses.

In both cases, there can be a whitespace around the value that is used.

See the examples below.

JSX-like syntax example:

```html

```

Twig like syntax example:

```html

```

if you want to extend these components, an example guide is [here](./docs/extendComponents.md).

if you want to contribute, read guide [here](./docs/contribution.md).

[Spirit Design System]: https://github.com/lmc-eu/spirit-design-system

[JSX]: https://reactjs.org/docs/introducing-jsx.html