headzoo/polymer-bundle

Symfony bundle and Twig extension for developing and deploying Polymer web components.

Polyphonic Polymer Bundle

Symfony bundle and Twig extension for developing and deploying Polymer web components., _(*1)

, _(*2)

, _(*3)

This bundle is no where near production ready. Use at your own risk., _(*4)

The purpose of this bundle is making it easier to use and build Polymer web components within a Symfony project. Polyphonic handles the problems that come up when trying to build and use web components within Twig templates., _(*5)

Example Element

A simple example of using the {% polymer element %} Twig tag to create a custom <hello-world><hello-world> element. This element displays "Hello, World!" by default, but the message can be changed by setting the name attribute., _(*6)

Note that there's no need to add <link rel="import" href="polymer/polymer.html"> as the import statement is added automatically. The template is saved in the bundle directory at Resources/public/elements/hello-world/hello-world.html.twig., _(*7)

{% polymer element "hello-world" attributes="name" %}
    <template>
        <p>Hello, {{name}}!</p>
    </template>
    <script>
        Polymer({
            name: "World"
        });
    </script>
{% endpolymer %}

Using the element in your views:, _(*8)

{% polymer import "@AcmeBundle:hello-world/hello-world.html.twig" %}


<hello-world></hello-world>


<hello-world name="Pascal"></hello-world>

Requirements

PHP 5.5.*
Symfony 2.6.*, _(*9)

Installing

Add headzoo/polymer-bundle to your composer.json requirements., _(*10)

"require": {
    "headzoo/polymer-bundle": "0.0.3"
}

Run composer update and then add the bundle your AppKernel.php., _(*11)

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
            new Symfony\Bundle\SecurityBundle\SecurityBundle(),
            ...
            new Headzoo\Bundle\PolymerBundle\PolymerBundle(),
        )

        return $bundles;
    }
}

Add the following route to your app/config/routing_dev.yml file., _(*12)

polymer:
    resource: "@PolymerBundle/Resources/config/routing.yml"
    prefix:   /_polymer

Next: Read the full documentation, _(*13)