add documentation for web component twig extension

README.md

@@ -1 +1,14 @@
-# web-twig
+# Web Twig Extensions
+
+## Installation
+
+```bash
+composer require massive/web-twig-extensions
+```
+
+## Component
+
+The [web component twig extension](docs/component.md) in connection with [web-js](https://github.com/massiveart/web-js)
+gives you simple and efficient way to handle your javascript components over twig.
+
+[More](docs/component.md)

docs/component.md

@@ -0,0 +1,66 @@
+# Web Component Twig Extension
+
+The web component twig extension in connection with [web-js](https://github.com/massiveart/web-js) 
+gives you simple and efficient way to handle your javascript components over twig.
+
+## Setup
+
+### Service Registration
+
+The twig extension need to be registered as [symfony service](http://symfony.com/doc/current/service_container.html).
+
+**xml**
+
+```xml
+<?xml version="1.0" encoding="UTF-8" ?>
+<container xmlns="http://symfony.com/schema/dic/services"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://symfony.com/schema/dic/services
+        http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+    <services>
+        <service id="app.web_components" class="Massive\Component\Web\ComponentTwigExtension">
+            <tag name="twig.extension" />
+        </service>
+    </services>
+</container>
+```
+
+**yml**
+
+```yml
+services:
+    app.web_components:
+        class: Massive\Component\Web\ComponentTwigExtension
+        tags:
+            - { name: twig.extension }
+```
+
+## Usage
+
+You can get the registered components and service call and call the
+[web-js](https://github.com/massiveart/web-js) function which is recommended to be used with it.
+
+```twig
+{# Registering a component #}
+<div id="{{ register_component('component') }}">
+    Content
+</div>
+
+{# Registering a component with options #}
+<button id="{{ register_component('modal-button', { text: 'Hello Hikaru Sulu' }) }}">
+    Say Hello
+</button>
+
+{# Call a service function #}
+{{ call_service('service', 'function') }}
+
+{# Call a service function with arguments #}
+{{ call_service('api', 'send', ['Hello']) }}
+
+{# Start components and run service functions #}
+<script>
+    web.startComponents({{ get_components() }});
+    web.callServices({{ get_services() }});
+</script>
+```

src/ComponentTwigExtension.php

@@ -77,15 +77,20 @@ public function registerComponent($name, $options = null, $prefix = '')
     /**
      * Get all registered components.
      *
+     * @param bool $jsonEncode
+     * @param bool $clear
+     *
      * @return string
      */
-    public function getComponents()
+    public function getComponents($jsonEncode = true, $clear = true)
     {
         $components = $this->components;
 
-        $this->components = [];
+        if ($clear) {
+            $this->components = [];
+        }
 
-        return json_encode($components);
+        return $jsonEncode ? json_encode($components) : $components;
     }
 
     /**
@@ -107,14 +112,20 @@ public function callService($name, $function, $parameters = [])
     /**
      * Return all register service functions.
      *
+     * @param bool $jsonEncode
+     * @param bool $clear
+     *
      * @return array
      */
-    public function getServices()
+    public function getServices($jsonEncode = true, $clear = true)
     {
         $services = $this->services;
-        $this->services = [];
 
-        return json_encode($services);
+        if ($clear) {
+            $this->services = [];
+        }
+
+        return $jsonEncode ? json_encode($services) : $services;
     }
 
     /**