├── .gitignore
├── LICENSE
├── README.md
├── composer.json
├── debug
    ├── cache
    │   └── .gitignore
    ├── components
    │   ├── layout.php
    │   ├── page.php
    │   └── partials
    │   │   └── mypartial.php
    ├── expressions.php
    └── index.php
├── examples
    ├── cache
    │   └── .gitignore
    ├── css
    │   └── shop.css
    ├── main.php
    └── templates
    │   ├── partials
    │       ├── product-list.php
    │       └── product.php
    │   └── shop.php
├── phpunit.xml.dist
├── src
    ├── CacheTemplate.php
    ├── ConvertJsExpression.php
    ├── Engine.php
    ├── Node.php
    └── Undefined.php
└── tests
    └── integration
        ├── VuePreTest.php
        ├── cache
            └── .gitignore
        └── templates
            ├── all.html
            └── all.result.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /vendor/
2 | composer.lock
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Lorenz Vandevelde
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # VuePre
  3 | VuePre is a package to prerender vue templates. This is useful for SEO and avoiding blank pages on page load. What VuePre does, is translating the Vue template to a PHP template, then replaces the javascript expressions with PHP expressions and caches it. Once cached, you can render thousands of templates per second depending on your hardware.
  4 | 
  5 | ## PROS
  6 | ```
  7 | - Very fast
  8 | - No dependencies
  9 | ```
 10 | 
 11 | ## CONS
 12 | ```
 13 | - Some javascript expressions are not supported (yet).
 14 | ```
 15 | 
 16 | ## Installation
 17 | ```
 18 | composer require ctxkiwi/vue-pre
 19 | ```
 20 | 
 21 | ## Basic usage
 22 | 
 23 | ```php 
 24 | $vue = new \VuePre\Engine();
 25 | $vue->setCacheDirectory(__DIR__ . '/cache');
 26 | 
 27 | // Method 1
 28 | $data = ["name" => "world"];
 29 | $html = $vue->renderHtml('<div>Hello {{ name }}!</div>', $data);
 30 | 
 31 | // Method 2 - Using component directory (required if you use sub-components)
 32 | $vue->setComponentDirectory(__DIR__ . '/components');
 33 | $html = $vue->renderComponent('my-page', $data);
 34 | ```
 35 | 
 36 | ## Component directory
 37 | 
 38 | ```php
 39 | // If you set your directory like this
 40 | $vue->setComponentDirectory(__DIR__ . '/components');
 41 | // It's going to look for any .php file and register the filename as a component
 42 | // So, if you have components/pages/homepage.php
 43 | // It will use this file for the <homepage> component
 44 | ```
 45 | 
 46 | ## Component example
 47 | 
 48 | ```php
 49 | <?php
 50 | return [
 51 |     'beforeRender' => function (&$data) {
 52 |         $data['counter'] = 0;
 53 |     },
 54 | ];
 55 | ?>
 56 | 
 57 | <template>
 58 |     <div>
 59 |         <button v-on:click="min"> - </button>
 60 |         {{ counter }}
 61 |         <button v-on:click="plus"> + </button>
 62 |     </div>
 63 | </template>
 64 | 
 65 | <script>
 66 |     Vue.component('homepage', {
 67 |         template: '#vue-template-homepage',
 68 |         data: function () {
 69 |             return {
 70 |                 counter: 0,
 71 |             };
 72 |         },
 73 |         methods: {
 74 |             plus: function(){ this.counter++; },
 75 |             min: function(){ this.counter--; },
 76 |         }
 77 |     });
 78 | </script>
 79 | ```
 80 | 
 81 | ## Real world example
 82 | 
 83 | ```php
 84 | class View{
 85 |     public static function render($view, $data = []){
 86 |         // Normal PHP template engine
 87 |         ...
 88 |         return $html;
 89 |     }
 90 |     public static function renderComponent($name, $data = []){
 91 |         $vue = new \VuePre\Engine();
 92 |         $vue->setCacheDirectory(Path::get('tmp'). '/cache');
 93 |         $vue->setComponentDirectory(Path::get('views') . '/components');
 94 | 
 95 |         $html = $vue->renderComponent($name, $data);
 96 |         $templates = $vue->getTemplateScripts();
 97 |         $js = $vue->getJsScripts();
 98 |         $vueInstance = $vue->getVueInstanceScript('#app', $name, $data);
 99 | 
100 |         $html = '<div id="app">'.$html.'</div>'.$templates.$js.$vueInstance;
101 | 
102 |         return static::render('layouts/main.html', ['CONTENT' => $html];
103 |     }
104 | }
105 | 
106 | class ViewController{
107 |     public function homepage(){
108 |         $data = [
109 |             // Dont put private data in here, because it's shared with javascript
110 |             'layoutData' => [
111 |                 'authUser' => \AuthUser::getUser()->getPublicData(),
112 |             ],
113 |             'featureProducts' => Product::where('featured', true)->limit(10)->get();
114 |         ];
115 |         // Render <homepage> component
116 |         echo View::renderComponent('homepage', $data);
117 |     }
118 | }
119 | ```
120 | 
121 | ```html
122 | <!-- views/layouts/main.html -->
123 | <!DOCTYPE>
124 | <html>
125 |     <head>
126 |         <script src="https://cdn.jsdelivr.net/npm/vue"></script>
127 |     </head>
128 |     <body>
129 |         {!! $CONTENT !!}
130 |     <body>
131 | </html>
132 | ```
133 | 
134 | ```php
135 | <?php
136 | // views/components/layout.php
137 | 
138 | return [
139 |     'beforeRender' => function (&$data) {
140 |         $data = $data['layout-data'];
141 |     },
142 | ];
143 | ?>
144 | 
145 | <template>
146 |     <div>
147 |         <header>...</header>
148 |         <main>
149 |             <slot></slot>
150 |         </main>
151 |         <footer>...</footer>
152 |     </div>
153 | </template>
154 | 
155 | <script>
156 |     Vue.component('layout', {
157 |         props: ['layoutData'],
158 |         template: '#vue-template-layout',
159 |         data: function () {
160 |             return this.layoutData;
161 |         },
162 |     });
163 | </script>
164 | ```
165 | 
166 | ```php
167 | <?php
168 | // views/components/homepage.php
169 | ?>
170 | 
171 | <template>
172 |     <layout :layout-data="layoutData">
173 |         <div class="homepage">
174 |             <h1>Welcome</h1>
175 |             <p>...</p>
176 |             <h2>Featured products</h2>
177 |             <div v-for="product in featuredProducts"><h3>{{ product.name }}</h3></div>
178 |         </div>
179 |     </layout>
180 | </template>
181 | 
182 | <script>
183 |     Vue.component('homepage', {
184 |         props: ['layoutData', 'featuredProducts'],
185 |         template: '#vue-template-homepage',
186 |         data: function () {
187 |             return {};
188 |         },
189 |     });
190 | </script>
191 | ```
192 | 
193 | ## Generating \<scripts>
194 | 
195 | You can generate scripts for your component templates and your component.js files.
196 | 
197 | ```php
198 | // Based on your last render
199 | $vue->getScripts();
200 | $vue->getTemplateScripts(); // only template scripts
201 | $vue->getJsScripts(); // only js scripts
202 | 
203 | // By component name
204 | $vue->getTemplateScript('my-page');
205 | $vue->getJsScript('my-page');
206 | 
207 | // Usefull
208 | $vue->getRenderedComponentNames();
209 | ```
210 | 
211 | ## API
212 | 
213 | ```php
214 | ->setCacheDirectory(String $path)
215 | ->setComponentDirectory(String $path)
216 | ->setGlobals(Array $globalVariables) // e.g. ['loggedIn' => true, 'user' => ['id'=>123, 'username'=>'TerryDavis']]
217 | ->renderHtml(String $html, Array $data)
218 | ->renderComponent(String $componentName, Array $data)
219 | 
220 | // Optional settings
221 | ->ignoreAttributes(Array $attributeNames)
222 | ->unignoreAttributes(Array $attributeNames)
223 | ->getIgnoredAttributes() : Array $attributeNames
224 | 
225 | // Generating scripts
226 | ->getScripts($idPrefix = 'vue-template-');
227 | ->getTemplateScripts($idPrefix = 'vue-template-');
228 | ->getTemplateScript(String $componentName, $default = null, $idPrefix = 'vue-template-');
229 | ->getJsScripts();
230 | ->getJsScript(String $componentName, $default = null);
231 | 
232 | // Others
233 | ->getComponentAlias(String $componentName, $default = null)
234 | ->getRenderedComponentNames();
235 | ```
236 | 
237 | 
238 | ## JS expressions | Supported
239 | 
240 | ```
241 | # Prototype functions
242 | .indexOf()
243 | .length
244 | 
245 | # JS Functions
246 | typeof()
247 | 
248 | # Values: variables, strings, numbers, booleans, null, objects, arrays, functions
249 | 
250 | # Comparisons
251 | myVar === 'Hello'
252 | something ? 'yes' : false
253 | 
254 | # Nested expressions
255 | (((5 + 5) > 2) ? true : false) ? (myBool ? 'Yes' : 'Yez') : 'No'
256 | 
257 | # Objects
258 | product.active ? product.name : product.category.name
259 | 
260 | # Methods using $vuePre->setMethods(['myFunc'=> function(){ ... }])
261 | product.active ? myFunc(product.name) : null
262 | ```
263 | 
264 | ## Todos
265 | 
266 | Note: Feel free to make an issue for these, so i can make them a prority. The only reason these are not implemented yet is because of low priority.
267 | 
268 | - Custom error handlers
269 | - Options: 
270 |     - `ignoreVariableNotFound`
271 |     - `ignoreVariableNames` `ignoreMethodNames`
272 |     - `ignoreSubComponents` `ignoreSubComponentNames`
273 | 
274 | ## Contributors
275 | 
276 | The DOM iterator code was partially copied from [wmde/php-vuejs-templating](https://github.com/wmde/php-vuejs-templating)
277 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "ctxkiwi/vue-pre",
 3 |     "description": "Pre-render Vue.js templates in PHP",
 4 |     "type": "library",
 5 |     "authors": [
 6 |         {
 7 |             "name": "Lorenz Vandevelde",
 8 |             "email": "vdvlorenz@gmail.com"
 9 |         }
10 |     ],
11 |     "autoload": {
12 |         "psr-4": {
13 |             "VuePre\\": "src"
14 |         }
15 |     },
16 |     "require": {
17 |         "php": ">=5.6.0"
18 |     },
19 |     "require-dev": {
20 |         "phpunit/phpunit": "^5.4.0|^6.0",
21 |         "symfony/var-dumper": "^4.1"
22 |     },
23 |     "scripts": {
24 |         "test": "vendor/bin/phpunit"
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/debug/cache/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore


--------------------------------------------------------------------------------
/debug/components/layout.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | return [
 3 |     'beforeRender' => function (&$data) {
 4 |         $data = $data['layout-data'];
 5 |     },
 6 | ];
 7 | ?>
 8 | 
 9 | <template>
10 |     <div>
11 |     	<header>{{ title }}</header>
12 |         <template>{{ title }}<span> :) </span></template>
13 |     	<main>
14 |             <slot></slot>
15 |     	</main>
16 |     	<footer>...</footer>
17 |     </div>
18 | </template>
19 | 
20 | <script>
21 |     Vue.component('layout', {
22 |         props: ['layoutData'],
23 |         template: '#vue-template-layout',
24 |         data: function () {
25 |             return this.layoutData;
26 |         },
27 |     });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/debug/components/page.php:
--------------------------------------------------------------------------------
  1 | 
  2 | <template>
  3 |     <div>
  4 |         <ignoretest>zzz</ignoretest>
  5 |     <layout :layout-data="layoutData">
  6 | 
  7 |         <!-- output && expressions -->
  8 |         <div>{{ [1, myVar,3].indexOf(myVar) === 1 ? 'Found' : 'Not found' }}</div>
  9 |         <div>DoubleTest: <span>{{ { opacity: true ? 1 : 0.5 } }}</span></div>
 10 |         <div>DoubleTest: <span>{{ { opacity: false ? 1 : 0.5 } }}</span></div>
 11 |         <div>NotTest: <span>{{ !myObject.myProp ? 1 : 0.5 }}</span></div>
 12 |         <div>DONT SHOW: <span v-if="nulltest.value">THIS</span></div>
 13 |         <div>DONT SHOW: <span v-if="true && false">THIS</span></div>
 14 |         <div>SHOW: <span v-if="nulltest.value == null">THIS</span></div>
 15 |         <div>SHOW: <span v-if="true || false">THIS</span></div>
 16 |         <div>Class: {{ { test: true ? 'true' : 'false' } }}</div>
 17 |         <div class="class_test">{{ 420 }}</div>
 18 |         <div style="url('test')" :style="'url(\'test\')'">1</div>
 19 |         <div style="url('test')">2</div>
 20 |         <div :style="{'background-image': 'url(\'/illustrations/automation.svg\')'}">3</div>
 21 |         <div :class="{'background-image': 'url(\'/illustrations/automation.svg\')'}">3</div>
 22 |         <div>Func: {{ func('text,text') }}</div>
 23 |         <div :my-attr-1="'test1'" v-bind:my-attr-2="'test2'">Attribute test</div>
 24 |         <div>1 {{ (typeof(myObject.test) == 'undefined') ? 'Undefined' : 'Defined' }}</div>
 25 |         <div>2 {{ (typeof(myObject.myProp) == 'undefined') ? 'Undefined' : 'Defined' }}</div>
 26 |         <div>3 {{ myObject.test ? 'Defined' : 'Undefined' }}</div>
 27 |         <div>4 {{ myObject.myProp ? 'Defined' : 'Undefined' }}</div>
 28 |         <div>5 {{ myObject.test }}</div>
 29 |         <div>5 {{ myObject.test + 'x' }}</div>
 30 |         <div>{{ "'" }}</div>
 31 |         <div>{{ '"' }}</div>
 32 |         <div>{{ (1 > 2) ? '' : 'o' }}</div>
 33 |         <div>{{ 'four-twenty' }}</div>
 34 |         <div>{{ myVar }}</div>
 35 |         <div>{{ myObject.myProp }}</div>
 36 |         <div>{{ ([1,2,3].indexOf(2) === 1) ? 'Found' : 'Not found' }}</div>
 37 |         <div>{{ ([1, myVar,3].indexOf(myVar) === 1) ? 'Found' : 'Not found' }}</div>
 38 |         <div>Global: {{ myGlobal }}</div>
 39 |         <div>MultiParamFunc: {{ multiParamFunc(1, 2) }}</div>
 40 |         <div><input :placeholder="'test'"></div>
 41 | 
 42 |         <video controls width="250" :src="'https://thumbs.gfycat.com/EvilObedientAnaconda-mobile.mp4'">
 43 |             <track default kind="captions" :srclang="'en'" :src="'https://thumbs.gfycat.com/EvilObedientAnaconda-mobile.mp4'"/>
 44 |             Sorry, your browser doesn't support embedded videos.
 45 |         </video>
 46 | 
 47 |         <div :class="myclass">Class binding</div>
 48 |         <div :class="toggle ? 'blue' : 'orange'">Class binding</div>
 49 |         <div :class="{ blue: toggle }">Class binding using object</div>
 50 |         <div :class="{ blue: !toggle }">Class binding using object</div>
 51 |         <div :style="stylee">Style binding</div>
 52 | 
 53 |         Toggle template:
 54 |         <template v-if="toggle">On</template>
 55 |         <template v-else>Off</template>
 56 | 
 57 |         <!-- foreach && if/else-if/else -->
 58 |         <div v-for="i in [1,2]">
 59 |             <h2>Test#{{ i }}</h2>
 60 |             <div v-if="myVar === 'Hello'">
 61 |                 <div v-if="myVar !== 'Hello'">IF1</div>
 62 |                 <div v-else-if="myVar === 'Hello'">
 63 |                     <div v-if="myVar !== 'Hello'">IF2</div>
 64 |                     <div v-else-if="i === 1">ELSEIF2</div>
 65 |                     <div v-else>ELSE2</div>
 66 |                 </div>
 67 |             </div>
 68 |         </div>
 69 | 
 70 |         <button v-on:click="tog">Toggle</button>
 71 | 
 72 |         <div v-if="toggle">TEST TOGGLE</div>
 73 | 
 74 |         <!-- Components + slots -->
 75 |         <mypartial :title="title" class="c1" :class="'c2'">
 76 |             <template v-slot:header>
 77 |                 <h1>Here might be a page title</h1>
 78 |             </template>
 79 |             <div>
 80 |                 <span>{{ myVar }}</span><span>{{ myVar }}</span>
 81 |             </div>
 82 |             <p>Rererererererer</p>
 83 |         </mypartial>
 84 | 
 85 |         <component :is="dynCompo" :title="title"></component>
 86 | 
 87 |     </layout>
 88 |     </div>
 89 | </template>
 90 | 
 91 | <script type="text/javascript">
 92 | 
 93 |     Vue.component('page', {
 94 |         props: ['layoutData', 'title', 'toggle', 'aclass', 'messages', 'myVar', 'myObject', 'dynCompo', 'myclass', 'stylee', 'nulltest', 'multiParamFunc'],
 95 |         template: '#vue-template-page',
 96 |         data: function () {
 97 |             return this.pageData;
 98 |         },
 99 |         methods: {
100 |           tog: function(){
101 |               this.toggle = !this.toggle;
102 |               console.log(this.toggle);
103 |           },
104 |           multiParamFunc: function(nr1, nr2){
105 |               return nr1 + nr2;
106 |           },
107 |           func: function(x){ return x; }
108 |         },
109 |         created: function(){
110 |             console.log(this.multiParamFunc);
111 |         }
112 |     });
113 | </script>
114 | 


--------------------------------------------------------------------------------
/debug/components/partials/mypartial.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 |     'beforeRender' => function (&$data) {
 5 |         $data['showThis'] = true;
 6 |     },
 7 | ];
 8 | 
 9 | ?>
10 | 
11 | <template>
12 |     <div class="c3" :class="'c4'">
13 |         <div class="x" v-html="title"></div>
14 | 
15 |         <slot name="header"></slot>
16 | 
17 |         <div>-------------</div>
18 | 
19 |         <slot></slot>
20 | 
21 |         <div>-------------</div>
22 | 
23 |         <slot name="header"></slot>
24 | 
25 |         <div v-if="showThis">Show this</div>
26 |         <div v-else>Not this</div>
27 |     </div>
28 | </template>
29 | 
30 | <script type="text/javascript">
31 | 
32 |     Vue.component('mypartial', {
33 |         props: ['title'],
34 |         template: '#vue-template-mypartial',
35 |         data: function () {
36 |             return {
37 |                 showThis: true,
38 |             }
39 |         },
40 |         methods: {
41 |           tog: function(){
42 |               this.toggle = !this.toggle;
43 |               console.log(this.toggle);
44 |           }
45 |         }
46 |     });
47 | </script>
48 | 


--------------------------------------------------------------------------------
/debug/expressions.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | error_reporting(E_ALL);
  4 | ini_set('display_errors', 1);
  5 | 
  6 | include __DIR__ . '/../vendor/autoload.php';
  7 | 
  8 | use \VuePre\ConvertJsExpression;
  9 | 
 10 | $data = [
 11 |     'foo' => 6,
 12 |     'str' => 'Test',
 13 |     'product' => [
 14 |         'name' => 'Foobar',
 15 |         'active' => true,
 16 |         'price' => [
 17 |             'value' => 5,
 18 |         ],
 19 |     ],
 20 |     'myFunc' => function () {
 21 |         return 'mayo';
 22 |     },
 23 |     'price' => function ($product) {
 24 |         return $product['price']['value'];
 25 |     },
 26 | ];
 27 | 
 28 | $expressions = [
 29 |     'foo',
 30 |     'foo > 6 === true',
 31 |     'foo < 8',
 32 |     'foo < -6',
 33 |     'foo > -6',
 34 |     'foo == 6',
 35 |     "foo == '6'",
 36 |     'foo === 6',
 37 |     'str + str',
 38 |     'str + \'2\'',
 39 |     'foo + foo',
 40 |     'foo + 2',
 41 |     'foo + 2 + 3 + foo',
 42 |     'str + str + \'___\' + str',
 43 |     'product',
 44 |     'product.active',
 45 |     'product[\'active\']',
 46 |     'product[(product.active ? \'name\' : \'active\')]',
 47 |     '!product',
 48 |     '!product.active',
 49 |     '{ active: product.active }',
 50 |     '{ active: product.active ? true : false }',
 51 |     'product.price.value > 5',
 52 |     'product.price.value === 5',
 53 |     'product.price.value < 7',
 54 |     'product.price.value < (product.active ? 7 : 3)',
 55 |     '[1, 2] === [1, 2]',
 56 |     '[1, 2] !== [1, 2]',
 57 |     '[1, true] === [1, product.active]',
 58 |     '[1, true].indexOf(1)',
 59 |     '[1, true].indexOf(2)',
 60 |     '[1, true].indexOf(true)',
 61 |     "'abc'.indexOf('b')",
 62 |     "product.name.indexOf('a')",
 63 |     '[1, true].length',
 64 |     "'abc'.length",
 65 |     'product.name.length',
 66 |     'myFunc()',
 67 |     'price(product)',
 68 | ];
 69 | 
 70 | $runPhpExpr = function ($ex, $averyrandomvarname) {
 71 |     foreach ($averyrandomvarname as $k => $v) {
 72 |         ${$k} = $v;
 73 |     }
 74 | 
 75 |     try {
 76 |         // ini_set('display_errors', 0);
 77 |         eval('$res = (' . $ex . ');');
 78 |         // ini_set('display_errors', 1);
 79 |         if (is_bool($res)) {
 80 |             $res = $res ? 'true' : 'false';
 81 |         }
 82 |         return $res;
 83 |     } catch (Exception $e) {
 84 |         return '#ERROR';
 85 |     }
 86 | };
 87 | 
 88 | $style = 'background-color:#eee; padding:3px 8px; border:1px solid #ccc; display: inline-block;';
 89 | foreach ($expressions as $ex) {
 90 |     $phpex = ConvertJsExpression::convert($ex);
 91 |     echo '<div style="margin-bottom: 5px;">';
 92 |     echo '<span style="' . $style . '">' . $ex . '</span>';
 93 |     echo ' => ';
 94 |     echo '<span style="' . $style . '">' . $phpex . '</span>';
 95 | 
 96 |     $result = $runPhpExpr($phpex, $data);
 97 |     echo ' => ';
 98 |     echo '<span style="' . $style . '">';
 99 |     print_r($result);
100 |     echo '</span><br>';
101 |     echo '</div>';
102 | }
103 | 


--------------------------------------------------------------------------------
/debug/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | error_reporting(E_ALL);
 3 | ini_set('display_errors', 1);
 4 | 
 5 | include __DIR__ . '/../vendor/autoload.php';
 6 | 
 7 | $data = [
 8 |     'layoutData' => [
 9 |         'title' => 'Yawza',
10 |     ],
11 |     'title' => '<h2>Hi</h2>',
12 |     'toggle' => true,
13 |     'aclass' => 'laclass',
14 |     'messages' => explode(' ', 'Hello there my old chum'),
15 |     'myVar' => 'Hello',
16 |     'myObject' => (object) [
17 |         'myProp' => 'World',
18 |     ],
19 |     'dynCompo' => 'mypartial',
20 |     'myclass' => 'red',
21 |     'stylee' => 'color:green',
22 |     'nulltest' => (object) ['value' => null],
23 |     'multiParamFunc' => function ($nr1, $nr2) {return $nr1 + $nr2;},
24 |     'func' => function ($text) {return $text;},
25 | ];
26 | 
27 | $vue = new \VuePre\Engine();
28 | $vue->disableCache = true;
29 | $vue->setCacheDirectory(__DIR__ . '/cache');
30 | $vue->setComponentDirectory(__DIR__ . '/components');
31 | $vue->setGlobals(['myGlobal' => 'HelloGlobe']);
32 | 
33 | // $benchSeconds = 2;
34 | // $end = time() + $benchSeconds;
35 | // $compileTimes = 0;
36 | // while (time() < $end) {
37 | //     $html = $vue->renderComponent('page', $data);
38 | //     $compileTimes++;
39 | // }
40 | // echo 'Compiled ' . ($compileTimes / $benchSeconds) . ' times per second';
41 | // exit;
42 | 
43 | $html = $vue->renderComponent('page', $data);
44 | $templates = $vue->getTemplateScripts();
45 | $js = $vue->getJsScripts();
46 | $vueInstance = $vue->getVueInstanceScript('#app', 'page', $data);
47 | 
48 | // $html = $vue->renderHtml('<div>{{ title }}</div>', $data);
49 | ?>
50 | 
51 | <style>
52 | .red{ color: red; }
53 | .blue{ color: blue; }
54 | .orange{ color: orange; }
55 | .c1{ border-top: 1px solid red; }
56 | .c2{ border-right: 1px solid green; }
57 | .c3{ border-bottom: 1px solid blue; }
58 | .c4{ border-left: 1px solid orange; }
59 | </style>
60 | 
61 | <script src="https://cdn.jsdelivr.net/npm/vue"></script>
62 | 
63 | <div id="app">
64 |     <?php echo $html; ?>
65 | </div>
66 | 
67 | <script>
68 | Vue.mixin({
69 |     computed: {
70 |         myGlobal: function(){ return 'HelloGlobe!'; },
71 |     }
72 | });
73 | </script>
74 | 
75 | <?php echo $templates; ?>
76 | <?php echo $js; ?>
77 | <?php echo $vueInstance; ?>
78 | 
79 | 


--------------------------------------------------------------------------------
/examples/cache/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore


--------------------------------------------------------------------------------
/examples/css/shop.css:
--------------------------------------------------------------------------------
 1 | 
 2 | *{
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     box-sizing:border-box;
 6 | }
 7 | 
 8 | body{
 9 |     font-family: Roboto;
10 | }
11 | 
12 | header{
13 |     text-align: center;
14 |     background-color: #eee;
15 |     font-size:30px;
16 |     padding:25px;
17 |     font-weight: bold;
18 |     margin-bottom:50px;
19 | }
20 | 
21 | .container{
22 |     margin:0 auto;
23 |     max-width: 1000px;
24 | }
25 | 
26 | h2{
27 |     display:block;
28 |     border-bottom:1px solid #444;
29 |     padding-bottom: 5px;
30 |     margin-bottom:15px;
31 | }
32 | 
33 | .list{
34 |     display:flex;
35 |     flex-wrap: wrap;
36 | }
37 | 
38 | .product{
39 |     flex-grow:1;
40 |     float: left;
41 |     width: 20%;
42 |     margin: 10px;
43 |     background-color:#eee;
44 |     border:1px solid #ddd;
45 |     padding: 15px;
46 |     height:300px;
47 | }
48 | 


--------------------------------------------------------------------------------
/examples/main.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | error_reporting(E_ALL);
 3 | ini_set('display_errors', 1);
 4 | 
 5 | include __DIR__ . '/../vendor/autoload.php';
 6 | 
 7 | $data = [
 8 |     'shop' => [
 9 |         'name' => 'My Shop',
10 |         'products' => [
11 |             ['name' => 'Bread'],
12 |             ['name' => 'Horse'],
13 |             ['name' => 'Stingray'],
14 |             ['name' => 'Ball of paper'],
15 |             ['name' => 'Ceiling'],
16 |             ['name' => 'Wheels'],
17 |         ],
18 |     ],
19 | ];
20 | 
21 | $vue = new \VuePre\Engine();
22 | $vue->setCacheDirectory(__DIR__ . '/cache');
23 | $vue->setComponentDirectory(__DIR__ . '/templates');
24 | 
25 | $html = $vue->renderComponent('shop', $data);
26 | ?>
27 | <!DOCTYPE html>
28 | <html>
29 |     <head>
30 |         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
31 |         <link rel="stylesheet" href="./css/shop.css">
32 |     </head>
33 |     <body>
34 |         <div id="app">
35 |             <?php echo $html; ?>
36 |         </div>
37 |     </body>
38 | </html>


--------------------------------------------------------------------------------
/examples/templates/partials/product-list.php:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 | <div>
 4 |     <div v-if="products.length === 0">
 5 |         No products :(
 6 |     </div>
 7 | 
 8 |     <div class="list">
 9 |         <product v-for="product in products" :product="product"></product>
10 |     </div>
11 | </div>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/examples/templates/partials/product.php:
--------------------------------------------------------------------------------
1 | 
2 | <template>
3 | <div class="product">
4 |     <h3>{{ product.name }}</h3>
5 | </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/examples/templates/shop.php:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 | <div>
 4 |     <header>
 5 |         <span>{{ shop.name }}</span>
 6 |     </header>
 7 | 
 8 |     <main>
 9 |         <div class="container">
10 |             <h2>Our products</h2>
11 | 
12 |             <product-list :products="shop.products"></product-list>
13 | 
14 |         </div>
15 |     </main>
16 | </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/phpunit.xml.dist:
--------------------------------------------------------------------------------
1 | <phpunit>
2 |     <testsuites>
3 |         <testsuite name="VuePre">
4 |             <directory>tests/</directory>
5 |         </testsuite>
6 |     </testsuites>
7 | </phpunit>


--------------------------------------------------------------------------------
/src/CacheTemplate.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace VuePre;
  4 | 
  5 | use DOMNode;
  6 | 
  7 | class CacheTemplate {
  8 | 
  9 |     public $knownComponentNames = [];
 10 |     public $nodes = [];
 11 |     public $engine = null;
 12 | 
 13 |     public function __construct(Engine $engine) {
 14 |         $this->engine = $engine;
 15 |     }
 16 | 
 17 |     public function render($data, $options = []): String {
 18 |         $html = '';
 19 | 
 20 |         $firstEl = true;
 21 |         foreach ($this->nodes as $k => $node) {
 22 |             if ($firstEl && $node->nodeType === 1) {
 23 |                 // First element
 24 |                 $firstEl = false;
 25 |                 // Merge class/style if in options
 26 |                 if (isset($options['class'])) {
 27 |                     $node->class = "'" . ($options['class']) . " ' . " . (isset($node->class) ? $node->class : "''");
 28 |                 }
 29 |                 if (isset($options['style'])) {
 30 |                     $node->style = "'" . ($options['style']) . " ' . " . (isset($node->style) ? $node->style : "''");
 31 |                 }
 32 |             }
 33 |             $html .= $this->renderNode($node, $data);
 34 |         }
 35 | 
 36 |         return $html;
 37 |     }
 38 | 
 39 |     public function addDomNode(DOMNode $node) {
 40 |         $cacheNode = new Node($this);
 41 |         $cacheNode->settings->isRootEl = true;
 42 |         $cacheNode->parseDomNode($node);
 43 |         $this->nodes[] = $cacheNode->export();
 44 |     }
 45 | 
 46 |     public function export() {
 47 |         $result = (object) [
 48 |             'nodes' => $this->nodes,
 49 |         ];
 50 | 
 51 |         return $result;
 52 |     }
 53 | 
 54 |     public function import($exportData) {
 55 | 
 56 |         if (isset($exportData->nodes)) {
 57 |             $this->nodes = $exportData->nodes;
 58 |         }
 59 | 
 60 |         return $this;
 61 |     }
 62 | 
 63 |     public function renderNode($node, $data): String {
 64 | 
 65 |         $this->errorLineNr = $node->line;
 66 | 
 67 |         $html = isset($node->content) ? $node->content : '';
 68 | 
 69 |         // VFOR
 70 |         if (isset($node->vfor)) {
 71 |             $html = '';
 72 |             $items = $this->eval($node->vfor, $data);
 73 |             $nodeCopy = json_decode(json_encode($node)); // Deep clone
 74 |             $nodeCopy->vfor = null;
 75 |             foreach ($items as $k => $v) {
 76 |                 if (isset($node->vforIndexName)) {$data[$node->vforIndexName] = $k;}
 77 |                 if (isset($node->vforAsName)) {$data[$node->vforAsName] = $v;}
 78 |                 $html .= $this->renderNode($nodeCopy, $data);
 79 |             }
 80 |             return $html;
 81 |         }
 82 | 
 83 |         // VIF
 84 |         if (isset($node->vif)) {
 85 |             $node->vifResult = $this->eval($node->vif, $data);
 86 |             if (!$node->vifResult) {return '';}
 87 |         }
 88 |         if (isset($node->velseif) && (!isset($node->vifResult) || !$node->vifResult)) {
 89 |             $node->vifResult = $this->eval($node->velseif, $data);
 90 |             if (!$node->vifResult) {return '';}
 91 |         }
 92 |         if (isset($node->velse) && (!isset($node->vifResult) || $node->vifResult)) {
 93 |             $node->vifResult = null;
 94 |             return '';
 95 |         }
 96 | 
 97 |         // VSLOT
 98 |         if (isset($node->vslot)) {
 99 |             $slotHtml = $this->engine->getSlotHtml($node->vslot);
100 |             return $slotHtml;
101 |         }
102 | 
103 |         // CLASS
104 |         if (isset($node->class)) {
105 |             $html = str_replace('_VUEPRE_CLASS_', $this->eval($node->class, $data), $html);
106 |         }
107 | 
108 |         // STYLE
109 |         if (isset($node->style)) {
110 |             $html = str_replace('_VUEPRE_STYLE_', $this->eval($node->style, $data), $html);
111 |         }
112 | 
113 |         // VHTML
114 |         if (isset($node->vhtml)) {
115 |             $html = str_replace('_VUEPRE_HTML_PLACEHOLDER_', $this->eval($node->vhtml, $data), $html);
116 |         }
117 | 
118 |         // Components
119 |         if (isset($node->isComponent)) {
120 |             $options = [];
121 |             // Render slots
122 |             $slotHtml = [];
123 |             if (isset($node->slotNodes)) {
124 |                 foreach ($node->slotNodes as $slotName => $nodes) {
125 |                     if (!isset($slotHtml[$slotName])) {
126 |                         $slotHtml[$slotName] = '';
127 |                     }
128 | 
129 |                     foreach ($nodes as $slotNode) {
130 |                         $slotHtml[$slotName] .= $this->renderNode($slotNode, $data);
131 |                     }
132 |                 }
133 |             }
134 |             $options['slots'] = $slotHtml;
135 |             // Render component
136 |             $newData = [];
137 |             if (isset($node->bindedValues)) {
138 |                 foreach ($node->bindedValues as $k => $expr) {
139 |                     $newData[$k] = $this->eval($expr, $data);
140 |                 }
141 |             }
142 | 
143 |             if (isset($node->class)) {
144 |                 $options['class'] = $this->eval($node->class, $data);
145 |             }
146 |             if (isset($node->style)) {
147 |                 $options['style'] = $this->eval($node->style, $data);
148 |             }
149 | 
150 |             $componentName = $this->eval($node->isComponent, $data);
151 |             return $this->engine->renderComponent($componentName, $newData, $options);
152 |         }
153 | 
154 |         if (isset($node->bindedValues)) {
155 |             foreach ($node->bindedValues as $k => $expr) {
156 |                 $replace = '';
157 |                 if (!in_array($k, $this->engine->getIgnoredAttributes(), true)) {
158 |                     $replace = $this->eval($expr, $data);
159 |                 }
160 |                 $html = str_replace('_VUEPRE_ATR_' . $k . '_ATREND_', $replace, $html);
161 |             }
162 |         }
163 | 
164 |         // {{ }}
165 |         if (isset($node->mustacheValues)) {
166 |             foreach ($node->mustacheValues as $k => $v) {
167 |                 $html = str_replace($k, $this->eval($v, $data), $html);
168 |             }
169 |         }
170 | 
171 |         // SUBNODES
172 |         if ($node->nodeType === 1) {
173 |             $subHtml = '';
174 |             $vifResult = null;
175 |             if (isset($node->childNodes)) {
176 |                 foreach ($node->childNodes as $cnode) {
177 |                     $cnode->vifResult = $vifResult;
178 |                     $subHtml .= $this->renderNode($cnode, $data);
179 |                     $vifResult = $cnode->vifResult ?? null;
180 |                 }
181 |             }
182 |             // <template>
183 |             if (isset($node->isTemplate)) {
184 |                 return $subHtml;
185 |             }
186 |             $html = str_replace('_VUEPRE_HTML_PLACEHOLDER_', $subHtml, $html);
187 |         }
188 | 
189 |         return $html;
190 |     }
191 | 
192 |     //////////////////
193 |     // Errors
194 |     //////////////////
195 | 
196 |     public $errorExpression = '';
197 |     public $errorLineNr = '?';
198 | 
199 |     public function eval($expr, $reallyUnrealisticVariableNameForVuePre) {
200 | 
201 |         foreach ($reallyUnrealisticVariableNameForVuePre as $k => $v) {
202 |             if ($k === 'this') {
203 |                 throw new Exception('Variable "this" is not allowed');
204 |             }
205 |             ${$k} = $v;
206 |         }
207 | 
208 |         set_error_handler(array($this, 'evalError'));
209 |         $this->errorExpression = $expr;
210 |         $result = eval('return ' . $expr . ';');
211 |         restore_error_handler();
212 | 
213 |         return $result;
214 |     }
215 | 
216 |     public function evalError($errno, $errstr, $errFile, $errLine) {
217 |         $template = $this->engine->errorCurrentTemplate;
218 |         $lineNr = $this->errorLineNr;
219 |         $error = 'Cant parse "' . htmlspecialchars($this->errorExpression) . '" : ' . $errstr;
220 |         static::templateError($template, $lineNr, $error);
221 |     }
222 | 
223 |     public static function templateError($template, $lineNr, $error) {
224 |         echo '<pre><code>';
225 |         echo 'Error: ' . $error . "\n";
226 |         echo 'Line:' . $lineNr . "\n";
227 |         echo 'Template:' . "\n";
228 | 
229 |         if (is_int($lineNr)) {
230 |             $lines = explode("\n", $template);
231 |             $before = array_slice($lines, 0, $lineNr);
232 |             $line = array_splice($lines, $lineNr, 1)[0];
233 |             $after = array_slice($lines, $lineNr);
234 |             echo htmlspecialchars(implode("\n", $before)) . "\n";
235 |             echo '<span style="color: red;">' . htmlspecialchars($line) . '</span>' . "\n";
236 |             echo htmlspecialchars(implode("\n", $after));
237 |         } else {
238 |             echo htmlspecialchars($template);
239 |         }
240 | 
241 |         echo '</code></pre>';
242 |         exit;
243 |     }
244 | 
245 | }


--------------------------------------------------------------------------------
/src/ConvertJsExpression.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace VuePre;
  4 | 
  5 | class ConvertJsExpression {
  6 | 
  7 |     private $expression;
  8 |     private $inAttribute = null;
  9 | 
 10 |     public static function convert(String $expr, $options = []) {
 11 |         $ex = new self();
 12 |         $ex->expression = $expr;
 13 | 
 14 |         // Check options
 15 |         if (isset($options['inAttribute'])) {
 16 |             $ex->inAttribute = $options['inAttribute'];
 17 |         }
 18 | 
 19 |         //
 20 |         return $ex->parse();
 21 |     }
 22 | 
 23 |     public function parse() {
 24 | 
 25 |         $expr = $this->expression;
 26 | 
 27 |         try {
 28 |             // dump('O: ' . $expr);
 29 |             $result = $this->parseValue($expr);
 30 |             // dump('R: ' . $result);
 31 |         } catch (\Exception $e) {
 32 |             $this->fail();
 33 |         }
 34 | 
 35 |         return $result;
 36 |     }
 37 | 
 38 |     public function parseValue($expr, $inParams = false) {
 39 | 
 40 |         $expr = trim($expr);
 41 | 
 42 |         if ($expr === '') {
 43 |             return '';
 44 |         }
 45 | 
 46 |         $newExpr = '';
 47 |         $length = strlen($expr);
 48 |         $expects = [['value']];
 49 |         // $inString = false;
 50 |         // $inStringEndChar = null;
 51 |         $plus = false;
 52 | 
 53 |         $getString = function ($i, $endChar) use (&$expr) {
 54 |             $prevChar = $endChar;
 55 |             $string = $endChar;
 56 |             $i++;
 57 |             while (isset($expr[$i])) {
 58 |                 $char = $expr[$i];
 59 |                 if ($char === $endChar && $prevChar !== '\\') {
 60 |                     break;
 61 |                 }
 62 |                 $string .= $char;
 63 |                 $prevChar = $char;
 64 |                 $i++;
 65 |             }
 66 |             $string .= $endChar;
 67 |             return $string;
 68 |         };
 69 | 
 70 |         $parseBetween = function ($i, $openChar, $endChar, $allowCommas = false, $isObject = false) use (&$expr, &$getString) {
 71 |             $startIndex = $i;
 72 |             $depth = 0;
 73 |             $subExpr = '';
 74 |             $subExpressions = [];
 75 |             $i++;
 76 |             while (isset($expr[$i])) {
 77 |                 $subChar = $expr[$i];
 78 | 
 79 |                 if ($allowCommas) {
 80 |                     if ($subChar == ',' && $depth === 0) {
 81 |                         $subExpressions[] = $subExpr;
 82 |                         $subExpr = '';
 83 |                         $i++;
 84 |                         continue;
 85 |                     }
 86 |                 }
 87 | 
 88 |                 if ($depth === 0 && $subChar == $endChar) {
 89 |                     $subExpressions[] = $subExpr;
 90 |                     $phpExpressions = [];
 91 |                     if ($isObject) {
 92 |                         $result = '[';
 93 |                         foreach ($subExpressions as $subEx) {
 94 | 
 95 |                             // Get Key
 96 |                             $signIndex = strpos($subEx, ':');
 97 |                             if ($signIndex === false) {
 98 |                                 throw new \Exception('Invalid object key "' . $subEx . '"');
 99 |                             }
100 |                             $key = substr($subEx, 0, $signIndex);
101 |                             if (empty($key) || !preg_match('/[a-zA-Z0-9_]/', $key)) {
102 |                                 throw new \Exception('Invalid object key syntax "' . $subEx . '"');
103 |                             }
104 | 
105 |                             $result .= '"' . trim($key) . '" => ';
106 |                             $result .= $this->parseValue(substr($subEx, $signIndex + 1));
107 |                         }
108 |                         $result .= ']';
109 |                         return (object) ['length' => $i - $startIndex + 1, 'expr' => $result];
110 |                     } else {
111 |                         foreach ($subExpressions as $subEx) {
112 |                             $phpExpressions[] = $this->parseValue($subEx);
113 |                         }
114 |                         return (object) ['length' => $i - $startIndex + 1, 'expr' => $openChar . implode(',', $phpExpressions) . $endChar];
115 |                     }
116 | 
117 |                 }
118 | 
119 |                 if (preg_match('/[\'\"]/', $subChar)) {
120 |                     $str = $getString($i, $subChar);
121 |                     $subExpr .= $str;
122 |                     $i += strlen($str);
123 |                     continue;
124 |                 }
125 | 
126 |                 $subExpr .= $subChar;
127 | 
128 |                 if ($subChar == $openChar) {
129 |                     $depth++;
130 |                 }
131 | 
132 |                 if ($subChar == $endChar) {
133 |                     $depth--;
134 |                 }
135 | 
136 |                 $i++;
137 |             }
138 |             throw new \Exception('Could not find closing character "' . $endChar . '"');
139 |         };
140 | 
141 |         for ($i = 0; $i < $length; $i++) {
142 |             $char = $expr[$i];
143 | 
144 |             if ($char == ' ') {
145 |                 $newExpr .= ' ';
146 |                 continue;
147 |             }
148 | 
149 |             $expect = array_pop($expects);
150 | 
151 |             $foundExpectation = false;
152 | 
153 |             foreach ($expect as $ex) {
154 | 
155 |                 //////////////////////////
156 | 
157 |                 if ($ex == 'value') {
158 | 
159 |                     // Valid starting characters
160 |                     if (preg_match('/[a-zA-Z0-9_\!\[\{\(\"\']/', $char)) {
161 |                         $dollarPos = null;
162 |                         $valueExpr = '';
163 |                         $funcName = '';
164 | 
165 |                         $pathOfExpr = '';
166 |                         $path = '';
167 | 
168 |                         if ($char == '(') {
169 |                             // (...)
170 |                             $subExpr = $parseBetween($i, '(', ')', false, false);
171 |                             $valueExpr .= $subExpr->expr;
172 |                             $i += $subExpr->length;
173 |                         }
174 | 
175 |                         if (preg_match('/[\'\"]/', $char)) {
176 |                             $str = $getString($i, $char);
177 |                             $valueExpr .= $str;
178 |                             $i += strlen($str);
179 |                         }
180 | 
181 |                         if ($char == '{') {
182 |                             // Object
183 |                             $subExpr = $parseBetween($i, '{', '}', true, true);
184 |                             if ($this->inAttribute) {
185 |                                 $valueExpr .= '\VuePre\ConvertJsExpression::handleArrayInAttribute("' . $this->inAttribute . '", ';
186 |                             } else {
187 |                                 $valueExpr .= '\VuePre\ConvertJsExpression::handleArrayToString(';
188 |                             }
189 |                             $valueExpr .= $subExpr->expr;
190 |                             $valueExpr .= ')';
191 |                             $i += $subExpr->length;
192 |                         }
193 | 
194 |                         if ($char == '[') {
195 |                             // Array
196 |                             $subExpr = $parseBetween($i, '[', ']', true, false);
197 |                             $valueExpr .= $subExpr->expr;
198 |                             $i += $subExpr->length;
199 |                         }
200 | 
201 |                         if ($char == '!') {
202 |                             $valueExpr .= '!';
203 |                             $i++;
204 |                         }
205 | 
206 |                         while (isset($expr[$i])) {
207 |                             $subChar = $expr[$i];
208 |                             if (!preg_match('/[a-zA-Z0-9_\.\-\(\[]/', $subChar)) {
209 |                                 break;
210 |                             }
211 | 
212 |                             if ($subChar == '.') {
213 |                                 if (empty($pathOfExpr) && is_numeric($funcName)) {
214 |                                     $valueExpr .= '.';
215 |                                 } else {
216 |                                     if (empty($pathOfExpr)) {
217 |                                         $pathOfExpr = $valueExpr;
218 |                                     } else {
219 |                                         $path .= '.';
220 |                                     }
221 |                                 }
222 |                                 $funcName = '';
223 |                                 $i++;
224 |                                 continue;
225 |                             }
226 | 
227 |                             if ($subChar == '(') {
228 |                                 // Function params
229 |                                 if ($funcName == '') {
230 |                                     break (2);
231 |                                 }
232 |                                 if (!empty($pathOfExpr)) {
233 |                                     if ($funcName == 'indexOf') {
234 |                                         $path = substr($path, 0, -8);
235 |                                         if (!$path) {$path = '';}
236 |                                     }
237 |                                     if (!empty($path)) {
238 |                                         $pre = '';
239 |                                         if ($pathOfExpr[0] === '!') {
240 |                                             $pre = '!';
241 |                                             $pathOfExpr = substr($pathOfExpr, 1);
242 |                                         }
243 |                                         $valueExpr = $pre . '\VuePre\ConvertJsExpression::getObjectValue(' . $pathOfExpr . ', "' . $path . '", $this)';
244 |                                     } else {
245 |                                         $valueExpr = $pathOfExpr;
246 |                                     }
247 |                                     $pathOfExpr = '';
248 |                                     $path = '';
249 |                                 }
250 |                                 $subExpr = $parseBetween($i, '(', ')', true, false);
251 |                                 if ($funcName == 'indexOf') {
252 |                                     $valueExpr = '\VuePre\ConvertJsExpression::indexOf(' . $valueExpr . ', ' . $subExpr->expr . ')';
253 |                                 } else {
254 |                                     $valueExpr .= $subExpr->expr;
255 |                                 }
256 |                                 $i += $subExpr->length;
257 |                             } elseif ($subChar == '[') {
258 |                                 // Object key (no commas allowed)
259 |                                 $subExpr = $parseBetween($i, '[', ']', false, false);
260 |                                 $valueExpr .= $subExpr->expr;
261 |                                 $i += $subExpr->length;
262 |                             } else {
263 |                                 // Var name
264 |                                 if ($dollarPos === null) {
265 |                                     $dollarPos = strlen($valueExpr);
266 |                                     $valueExpr .= '$';
267 |                                 }
268 |                                 if (!empty($pathOfExpr)) {
269 |                                     $path .= $subChar;
270 |                                 } else {
271 |                                     $valueExpr .= $subChar;
272 |                                 }
273 |                                 $funcName .= $subChar;
274 |                             }
275 | 
276 |                             $i++;
277 |                         }
278 |                         $i--;
279 | 
280 |                         if (!empty($pathOfExpr)) {
281 |                             $pre = '';
282 |                             if ($pathOfExpr[0] === '!') {
283 |                                 $pre = '!';
284 |                                 $pathOfExpr = substr($pathOfExpr, 1);
285 |                             }
286 |                             $valueExpr = $pre . '\VuePre\ConvertJsExpression::getObjectValue(' . $pathOfExpr . ', "' . $path . '", $this)';
287 |                         }
288 | 
289 |                         if (strlen($valueExpr) > 0) {
290 |                             $checkExpr = substr($valueExpr, 1);
291 |                             if (in_array(strtolower($checkExpr), ['true', 'false', 'null'], true)) {
292 |                                 $valueExpr = $checkExpr;
293 |                             }
294 |                             if (is_numeric($checkExpr)) {
295 |                                 $valueExpr = $checkExpr;
296 |                             }
297 |                         }
298 | 
299 |                         $newExpr .= $valueExpr;
300 | 
301 |                         if ($plus) {
302 |                             $newExpr .= ')';
303 |                             $plus = false;
304 |                         }
305 | 
306 |                         $expects[] = ['operator'];
307 |                         $foundExpectation = true;
308 |                         break;
309 |                     }
310 | 
311 |                 }
312 | 
313 |                 //////////////////////////
314 | 
315 |                 if ($ex == 'operator') {
316 |                     $operator = '';
317 |                     $operators = '/[=+\-<>?:*%!&|]/';
318 |                     while (isset($expr[$i]) && preg_match($operators, $expr[$i])) {
319 |                         $operator .= $expr[$i];
320 |                         $i++;
321 |                     }
322 |                     $i--;
323 | 
324 |                     $allowed = ['==', '===', '!=', '!==', '<=', '>=', '<', '>', '&&', '||', '?', ':', '+', '+=', '-', '-=', '*', '*=', '/', '/='];
325 | 
326 |                     if (empty($operator)) {
327 |                         throw new \Exception('Expected an operator, but instead found "' . $char . '" at index: ' . $i);
328 |                     }
329 | 
330 |                     if (!in_array($operator, $allowed, true)) {
331 |                         throw new \Exception('Unexpected operator "' . $operator . '"');
332 |                     }
333 | 
334 |                     if ($operator === '+') {
335 |                         $plus = true;
336 |                         $newExpr = '\VuePre\ConvertJsExpression::plus(' . $newExpr . ', ';
337 |                     } elseif ($operator === '?') {
338 |                         $newExpr = '\VuePre\ConvertJsExpression::toBool(' . $newExpr . ') ?';
339 |                     } else {
340 |                         $newExpr .= $operator;
341 |                     }
342 | 
343 |                     $expects[] = ['value'];
344 |                     $foundExpectation = true;
345 |                 }
346 | 
347 |                 //////////////////////////
348 | 
349 |             }
350 | 
351 |             if (!$foundExpectation) {
352 |                 throw new \Exception('Unexpected character "' . $char . '"');
353 |             }
354 |         }
355 | 
356 |         return $newExpr;
357 |     }
358 | 
359 |     public function fail() {
360 |         throw new \Exception('VuePre doesnt understand this JS expression: "' . $this->expression . '"', 100);
361 |     }
362 | 
363 |     // Runtime functions
364 | 
365 |     // Handle plus sign between 2 values
366 |     public static function plus($val1, $val2) {
367 |         if (is_object($val1) && get_class($val1) == 'VuePre\Undefined') {
368 |             $val1 = 'undefined';
369 |         }
370 |         if (is_object($val2) && get_class($val2) == 'VuePre\Undefined') {
371 |             $val2 = 'undefined';
372 |         }
373 |         if (is_string($val1)) {
374 |             return $val1 . $val2;
375 |         }
376 |         if (is_numeric($val1)) {
377 |             return $val1 + $val2;
378 |         }
379 | 
380 |         return $val1 . $val2;
381 |     }
382 | 
383 |     public static function getObjectValue($obj, $path, $cacheTemplate) {
384 |         $path = explode('.', $path);
385 |         foreach ($path as $key) {
386 |             if ($key === 'length') {
387 |                 $obj = static::length($obj);
388 |                 continue;
389 |             }
390 |             if (is_array($obj)) {
391 |                 if (!array_key_exists($key, $obj)) {
392 |                     // return '';
393 |                     return new Undefined($cacheTemplate);
394 |                 }
395 |                 $obj = $obj[$key];
396 |             } else {
397 |                 if (!property_exists($obj, $key)) {
398 |                     // return '';
399 |                     return new Undefined($cacheTemplate);
400 |                 }
401 |                 $obj = $obj->$key;
402 |             }
403 |         }
404 | 
405 |         return $obj;
406 |     }
407 | 
408 |     public static function indexOf($haystack, $needle) {
409 |         if (is_array($haystack)) {
410 |             $res = array_search($needle, $haystack, true); // true for strict
411 |             if ($res === false) {return -1;}
412 |             return $res;
413 |         }
414 |         if (is_string($haystack)) {
415 |             $res = strpos($haystack, $needle);
416 |             if ($res === false) {return -1;}
417 |             return $res;
418 |         }
419 | 
420 |         throw new Exception('indexOf() : variable was not a string or array');
421 |     }
422 | 
423 |     public static function length($value) {
424 |         if (is_array($value)) {
425 |             return count($value);
426 |         }
427 |         if (is_string($value)) {
428 |             return mb_strlen($value);
429 |         }
430 | 
431 |         throw new Exception('length() : variable was not a string or array');
432 |     }
433 | 
434 |     public static function toBool($value) {
435 |         if (gettype($value) == 'object' && get_class($value) === 'VuePre\Undefined') {
436 |             return false;
437 |         }
438 | 
439 |         return $value;
440 |     }
441 | 
442 |     public static function typeof($value) {
443 |         $type = gettype($value);
444 |         if ($type == 'object' && get_class($value) === 'VuePre\Undefined') {
445 |             return 'undefined';
446 |         }
447 | 
448 |         return $type;
449 |     }
450 | 
451 |     public static function handleArrayInAttribute($name, $array) {
452 |         if ($name == 'class') {
453 |             $classes = [];
454 |             foreach ($array as $className => $value) {
455 |                 $className = str_replace("'", '', $className);
456 |                 if ($value) {
457 |                     $classes[] = $className;
458 |                 }
459 |             }
460 |             return implode(' ', $classes);
461 |         }
462 |         if ($name == 'style') {
463 |             $styles = [];
464 |             foreach ($array as $prop => $value) {
465 |                 $prop = str_replace("'", '', $prop);
466 |                 if ($value) {
467 |                     $styles[] = $prop . ': ' . $value . ';';
468 |                 }
469 |             }
470 |             return implode(' ', $styles);
471 |         }
472 |         return '';
473 |     }
474 |     public static function handleArrayToString($array) {
475 |         return json_encode($array);
476 |     }
477 | 
478 | }


--------------------------------------------------------------------------------
/src/Engine.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace VuePre;
  4 | 
  5 | use DOMDocument;
  6 | use Exception;
  7 | use LibXMLError;
  8 | 
  9 | //
 10 | 
 11 | class Engine {
 12 | 
 13 |     private $componentDir = null;
 14 |     private $cacheDir = null;
 15 | 
 16 |     public $componentAlias = [];
 17 |     private $components = [];
 18 |     private $methods = [];
 19 |     private $renderedComponentNames = [];
 20 |     private $componentBeforeRender = [];
 21 |     private $settingsLoaded = [];
 22 |     private $componentTemplates = [];
 23 | 
 24 |     public $disableCache = false;
 25 |     public $disableAutoScan = false;
 26 | 
 27 |     public $ignoreComponentNames = [];
 28 | 
 29 |     public $errorCurrentTemplate = null;
 30 | 
 31 |     private $slotHtml = [];
 32 |     private $globalData = [];
 33 |     private $_ignoreAttributes = [];
 34 | 
 35 |     private static $fileCache = [];
 36 | 
 37 |     public function __construct() {
 38 | 
 39 |         $this->globalData['typeof'] = function ($value) {
 40 |             $type = gettype($value);
 41 |             if ($type == 'object' && get_class($value) === 'VuePre\Undefined') {
 42 |                 return 'undefined';
 43 |             }
 44 | 
 45 |             return $type;
 46 |         };
 47 |     }
 48 | 
 49 |     /////////////////////////
 50 |     // Settings
 51 |     /////////////////////////
 52 | 
 53 |     public function setCacheDirectory(String $dir) {
 54 |         $dir = realpath($dir);
 55 |         if (!file_exists($dir) || !is_dir($dir)) {
 56 |             throw new Exception('Cache directory not found: ' . $dir);
 57 |         }
 58 |         $this->cacheDir = $dir;
 59 |     }
 60 | 
 61 |     public function setComponentDirectory(String $dir) {
 62 |         $dir = realpath($dir);
 63 |         if (!file_exists($dir) || !is_dir($dir)) {
 64 |             throw new Exception('Component directory not found: ' . $dir);
 65 |         }
 66 |         $this->componentDir = $dir;
 67 |         if (!$this->disableAutoScan) {
 68 |             $this->scanComponentDirectoryForComponents();
 69 |         }
 70 |     }
 71 | 
 72 |     public function ignoreAttributes($ignores) {
 73 |         foreach ($ignores as $ig) {
 74 |             $this->_ignoreAttributes[] = $ig;
 75 |         }
 76 |         $this->_ignoreAttributes = array_unique($this->_ignoreAttributes);
 77 |     }
 78 |     public function unignoreAttributes($ignores) {
 79 |         foreach ($ignores as $ig) {
 80 |             $index = array_search($ig, $this->_ignoreAttributes);
 81 |             if ($index !== false) {
 82 |                 array_splice($this->_ignoreAttributes, $index, 1);
 83 |             }
 84 |         }
 85 |     }
 86 | 
 87 |     /////////////////////////
 88 |     // Getters / Setters
 89 |     /////////////////////////
 90 | 
 91 |     public function getRenderedComponentNames() {
 92 |         return array_values($this->renderedComponentNames);
 93 |     }
 94 | 
 95 |     public function setGlobals(Array $data) {
 96 |         $this->globalData = array_merge($this->globalData, $data);
 97 |     }
 98 | 
 99 |     public function getGlobals() {
100 |         return $this->globalData;
101 |     }
102 | 
103 |     public function getIgnoredAttributes() {
104 |         return $this->_ignoreAttributes;
105 |     }
106 | 
107 |     /////////////////////////
108 |     // Component finding
109 |     /////////////////////////
110 | 
111 |     public function setComponentAlias(array $aliasses) {
112 |         foreach ($aliasses as $componentName => $alias) {
113 |             if (is_string($componentName) && is_string($alias)) {
114 |                 $this->componentAlias[$componentName] = $alias;
115 |             }
116 |         }
117 |     }
118 | 
119 |     public function getComponentAlias($componentName, $default = null) {
120 |         if (isset($this->componentAlias[$componentName])) {
121 |             return $this->componentAlias[$componentName];
122 |         }
123 |         if ($default) {
124 |             return $default;
125 |         }
126 |         throw new \Exception('Cannot find alias for "' . $componentName . '"');
127 |     }
128 | 
129 |     /////////////////////////
130 |     // Helper functions
131 |     /////////////////////////
132 | 
133 |     public function loadComponent($componentName) {
134 |         if (!isset($this->components[$componentName])) {
135 |             $component = [
136 |                 'settings' => null,
137 |                 'template' => null,
138 |                 'js' => null,
139 |             ];
140 | 
141 |             $alias = $this->getComponentAlias($componentName);
142 |             $dirPath = $this->componentDir . '/' . implode('/', explode('.', $alias));
143 |             $path = $dirPath . '.php';
144 | 
145 |             if (!file_exists($path)) {
146 |                 throw new Exception('Component file not found: ' . $path);
147 |             }
148 | 
149 |             $content = "\n" . file_get_contents($path);
150 | 
151 |             $php = static::getStringBetweenTags($content, '\n<\?php\s', '\n\?>');
152 |             $template = static::getStringBetweenTags($content, '\n<template ?[^>]*>', '\n<\/template>');
153 |             $js = static::getStringBetweenTags($content, '\n<script ?[^>]*>', '\n<\/script>');
154 | 
155 |             $loadSettings = function ($php) {
156 |                 $settings = eval($php);
157 |                 return $settings;
158 |             };
159 | 
160 |             $settings = $loadSettings($php);
161 | 
162 |             if (!isset($this->componentBeforeRender[$componentName]) && isset($settings['beforeRender'])) {
163 |                 $this->componentBeforeRender[$componentName] = $settings['beforeRender'];
164 |             }
165 | 
166 |             $component['settings'] = $settings;
167 |             $component['template'] = $template;
168 |             $component['js'] = $js;
169 | 
170 |             $this->components[$componentName] = $component;
171 |         }
172 | 
173 |         return $this->components[$componentName];
174 |     }
175 | 
176 |     private static function getStringBetweenTags($string, $startReg, $endReg) {
177 |         $found = preg_match("/" . $startReg . "/", $string, $match, PREG_OFFSET_CAPTURE);
178 |         if (!$found) {
179 |             return '';
180 |         }
181 | 
182 |         $startPos = $match[0][1] + strlen($match[0][0]);
183 |         $result = '';
184 |         $count = 1;
185 |         while (preg_match("/" . $startReg . "|" . $endReg . "/", $string, $match, PREG_OFFSET_CAPTURE, $match[0][1] + 1)) {
186 |             $isStart = preg_match("/" . $startReg . "/", $match[0][0]);
187 | 
188 |             if ($isStart) {
189 |                 $count++;
190 |                 continue;
191 |             }
192 | 
193 |             $count--;
194 |             if ($count === 0) {
195 |                 $result = substr($string, $startPos, $match[0][1] - $startPos);
196 |                 break;
197 |             }
198 |         }
199 | 
200 |         if ($count !== 0) {
201 |             throw new \Exception('Cannot find closing tag "' . $endReg . '"');
202 |         }
203 | 
204 |         return $result;
205 |     }
206 | 
207 |     public function getComponentTemplate($componentName, $default = null) {
208 |         $comp = $this->loadComponent($componentName);
209 |         return $comp['template'];
210 |     }
211 | 
212 |     public function getComponentJs($componentName, $default = null) {
213 |         $comp = $this->loadComponent($componentName);
214 |         return $comp['js'];
215 |     }
216 | 
217 |     /////////////////////////
218 |     // <script> functions
219 |     /////////////////////////
220 | 
221 |     public function getTemplateScripts($idPrefix = 'vue-template-') {
222 |         $result = '';
223 |         foreach ($this->components as $componentName => $component) {
224 |             $template = $this->getComponentTemplate($componentName);
225 |             $result .= '<script type="text/template" id="' . $idPrefix . $componentName . '">' . ($template) . '</script>';
226 |         }
227 |         return $result;
228 |     }
229 | 
230 |     public function getJsScripts() {
231 |         $result = '';
232 |         foreach ($this->renderedComponentNames as $componentName => $c) {
233 |             $result .= $this->getJsScript($componentName, '');
234 |         }
235 |         return $result;
236 |     }
237 | 
238 |     public function getTemplateScript($componentName, $default = null, $idPrefix = 'vue-template-') {
239 |         $template = $this->getComponentTemplate($componentName);
240 |         return '<script type="text/template" id="' . $idPrefix . $componentName . '">' . ($template) . '</script>';
241 |     }
242 | 
243 |     public function getJsScript($componentName, $default = null) {
244 |         return '<script type="text/javascript">' . $this->getComponentJs($componentName, $default) . '</script>';
245 |     }
246 | 
247 |     public function getScripts($componentName = null, $idPrefix = 'vue-template-') {
248 |         if ($componentName) {
249 |             $result = '';
250 |             $result .= $this->getTemplateScript($componentName, null, $idPrefix);
251 |             $result .= $this->getJsScript($componentName);
252 |             return $result;
253 |         }
254 |         return $this->getTemplateScripts($idPrefix) . $this->getJsScripts();
255 |     }
256 | 
257 |     public function getVueInstanceScript($el, $componentName, $data) {
258 | 
259 |         $jsData = [];
260 |         $bindings = '';
261 |         foreach ($data as $k => $v) {
262 |             if (!is_callable($v)) {
263 |                 $jsData[$k] = $v;
264 |                 $bindings .= ' :' . $k . '="componentData.' . $k . '"';
265 |             }
266 |         }
267 | 
268 |         $html = '<script type="text/javascript">
269 |         var VuePreApp = new Vue({
270 |             el: "' . $el . '",
271 |             data: function(){
272 |                 return { componentData: ' . json_encode($jsData) . ' };
273 |             },
274 |             template: \'<' . $componentName . $bindings . '></' . $componentName . '>\',
275 |         });
276 | </script>';
277 |         return $html;
278 |     }
279 | 
280 |     /////////////////////////
281 |     // Scan for aliasses
282 |     /////////////////////////
283 | 
284 |     private function scanComponentDirectoryForComponents() {
285 |         $this->scanDirectoryForComponents($this->componentDir);
286 |     }
287 | 
288 |     public function scanDirectoryForComponents($dir) {
289 |         if (!$this->componentDir) {
290 |             throw new Exception('"componentDirectory" not set');
291 |         }
292 |         $dir = realpath($dir);
293 |         if (strpos($dir, $this->componentDir) !== 0) {
294 |             throw new Exception('scanDirectoryForComponents: directory must be a sub directory from "componentDirectory"');
295 |         }
296 |         $files = static::recursiveGlob($dir . '/*.php');
297 |         foreach ($files as $file) {
298 |             $fn = basename($file);
299 |             $alias = substr($file, 0, -strlen('.php'));
300 |             $name = basename($alias);
301 |             $alias = str_replace('/', '.', substr($alias, strlen($this->componentDir . '/')));
302 |             $this->componentAlias[$name] = $alias;
303 |         }
304 |     }
305 | 
306 |     private static function recursiveGlob($pattern, $flags = 0) {
307 |         $files = glob($pattern, $flags);
308 |         foreach (glob(dirname($pattern) . '/*', GLOB_ONLYDIR | GLOB_NOSORT) as $dir) {
309 |             $files = array_merge($files, static::recursiveGlob($dir . '/' . basename($pattern), $flags));
310 |         }
311 |         return $files;
312 |     }
313 | 
314 |     /////////////////////////
315 |     // Cache
316 |     /////////////////////////
317 | 
318 |     private function createCachedTemplate($html, $options) {
319 | 
320 |         if (!isset($options['isComponent'])) {
321 |             $options['isComponent'] = false;
322 |         }
323 | 
324 |         if ($options['isComponent']) {
325 |             $dom = $this->parseHtml($html);
326 |             // Check for single rootNode
327 |             $this->getRootNode($dom);
328 |         }
329 | 
330 |         $dom = $this->parseHtml('<div id="_VuePreRootElement_">' . $html . '</div>');
331 |         $rootNode = $dom->getElementById('_VuePreRootElement_');
332 | 
333 |         $template = new CacheTemplate($this);
334 |         $template->knownComponentNames = array_keys($this->componentAlias);
335 | 
336 |         foreach ($rootNode->childNodes as $k => $childNode) {
337 |             $template->addDomNode($childNode);
338 |         }
339 | 
340 |         return json_encode($template->export());
341 |     }
342 | 
343 |     private function renderCachedTemplate($file, $data, $options = []) {
344 | 
345 |         set_error_handler(array($this, 'handleError'));
346 | 
347 |         if (!isset(static::$fileCache[$file])) {
348 |             static::$fileCache[$file] = file_get_contents($file);
349 |         }
350 |         $exportData = json_decode(static::$fileCache[$file]);
351 | 
352 |         $template = new CacheTemplate($this);
353 |         $template->import($exportData);
354 |         $html = $template->render($data, $options);
355 | 
356 |         restore_error_handler();
357 | 
358 |         return $html;
359 |     }
360 | 
361 |     public function handleError($errno, $errstr, $errFile, $errLine) {
362 |         return false;
363 |     }
364 | 
365 |     /////////////////////////
366 |     // Rendering
367 |     /////////////////////////
368 | 
369 |     public function getSlotHtml($name = '_DEFAULTSLOT_') {
370 |         return isset($this->slotHtml[$name]) ? $this->slotHtml[$name] : '';
371 |     }
372 | 
373 |     public function renderHtml($template, $data = [], $options = []) {
374 | 
375 |         if (empty(trim($template))) {
376 |             return '';
377 |         }
378 | 
379 |         $this->errorCurrentTemplate = $template;
380 | 
381 |         $hash = md5($template . filemtime(__FILE__) . json_encode($this->componentAlias)); // If package is updated, hash should change
382 |         $cacheFile = $this->cacheDir . '/' . $hash . '.php';
383 | 
384 |         // Create cache template
385 |         if (!file_exists($cacheFile) || $this->disableCache) {
386 |             $html = $this->createCachedTemplate($template, $options);
387 |             file_put_contents($cacheFile, $html);
388 |         }
389 | 
390 |         if (isset($options['slots'])) {
391 |             foreach ($options['slots'] as $name => $html) {
392 |                 $this->slotHtml[$name] = $html;
393 |             }
394 |         }
395 | 
396 |         // Render cached template
397 |         return $this->renderCachedTemplate($cacheFile, $data, $options);
398 |     }
399 | 
400 |     public function renderComponent($componentName, $data = [], $options = []) {
401 | 
402 |         if (in_array($componentName, $this->ignoreComponentNames, true)) {
403 |             return '';
404 |         }
405 | 
406 |         $data = array_merge($this->globalData, $data);
407 | 
408 |         if (!$this->componentDir) {
409 |             throw new Exception('Trying to find component, but componentDirectory was not set');
410 |         }
411 | 
412 |         if (!$this->cacheDir) {
413 |             throw new Exception('Cache directory was not set');
414 |         }
415 | 
416 |         // Load settings
417 |         $this->loadComponent($componentName);
418 | 
419 |         // Before mount
420 |         if (isset($this->componentBeforeRender[$componentName])) {
421 |             $this->componentBeforeRender[$componentName]($data);
422 |         }
423 | 
424 |         // Render template
425 |         if ($componentName === 'div') {
426 |             die();
427 |         }
428 |         $template = $this->getComponentTemplate($componentName);
429 |         $options['isComponent'] = true;
430 |         $html = $this->renderHtml($template, $data, $options);
431 | 
432 |         // Remember
433 |         if (!isset($this->renderedComponentNames[$componentName])) {
434 |             $this->renderedComponentNames[$componentName] = $componentName;
435 |         }
436 | 
437 |         //
438 |         return $html;
439 |     }
440 | 
441 |     private function parseHtml($html) {
442 |         $entityLoaderDisabled = libxml_disable_entity_loader(true);
443 |         $internalErrors = libxml_use_internal_errors(true);
444 |         $document = new DOMDocument('1.0', 'UTF-8');
445 |         // Ensure $html is treated as UTF-8, see https://stackoverflow.com/a/8218649
446 |         if (!$document->loadHTML('<?xml encoding="utf-8" ?>' . $html)) {
447 |             //TODO Test failure
448 |             throw new \Exception('Error');
449 |         }
450 |         /** @var LibXMLError[] $errors */
451 |         $errors = libxml_get_errors();
452 |         libxml_clear_errors();
453 |         // Restore previous state
454 |         libxml_use_internal_errors($internalErrors);
455 |         libxml_disable_entity_loader($entityLoaderDisabled);
456 |         foreach ($errors as $error) {
457 |             // var_dump($error);
458 |             // echo '<pre>';
459 |             // echo htmlspecialchars($html);
460 |             // echo '</pre>';
461 |             // exit;
462 |             //TODO html5 tags can fail parsing
463 |             //TODO Throw an exception
464 |         }
465 |         return $document;
466 |     }
467 | 
468 |     private function getRootNode(DOMDocument $document) {
469 |         $rootNodes = $document->documentElement->childNodes->item(0)->childNodes;
470 |         if ($rootNodes->length > 1) {
471 |             echo '<h2>Component template should have only one root node</h2>';
472 |             echo '<pre>' . htmlspecialchars($this->getBodyHtml($document)) . '</pre>';
473 |             exit;
474 |         }
475 |         return $rootNodes->item(0);
476 |     }
477 | 
478 |     private function setErrorHint($line, $expression) {
479 |         $this->errorLine = $line;
480 |         $this->errorExpression = $expression;
481 |     }
482 | 
483 | }
484 | 


--------------------------------------------------------------------------------
/src/Node.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace VuePre;
  4 | 
  5 | use DOMElement;
  6 | use DOMNode;
  7 | 
  8 | class Node {
  9 | 
 10 |     public $settings = null;
 11 |     public $template = null;
 12 | 
 13 |     private $errorLineNr = '?';
 14 | 
 15 |     public function __construct(CacheTemplate $template = null) {
 16 |         $this->template = $template;
 17 | 
 18 |         $this->settings = (object) [
 19 |             'line' => null,
 20 |             'nodeType' => null,
 21 |             'content' => null,
 22 |             //
 23 |             'childNodes' => [],
 24 |             //
 25 |             'isTemplate' => false,
 26 |             'isRootEl' => false,
 27 |             'isComponent' => null,
 28 |             //
 29 |             'vfor' => null,
 30 |             'vforIndexName' => null,
 31 |             'vforAsName' => null,
 32 |             'vif' => null,
 33 |             'velseif' => null,
 34 |             'velse' => null,
 35 |             'vhtml' => null,
 36 |             //
 37 |             'class' => null,
 38 |             'style' => null,
 39 |             'mustacheValues' => [],
 40 |             'bindedValues' => [],
 41 |             // Slots
 42 |             'vslot' => null,
 43 |             'slotNodes' => (object) [],
 44 |         ];
 45 |     }
 46 | 
 47 |     public function parseDomNode(DOMNode $node, $options = []) {
 48 | 
 49 |         try {
 50 | 
 51 |             $lineNr = $node->getLineNo() - 1;
 52 |             $this->errorLineNr = $lineNr;
 53 | 
 54 |             $this->settings->line = $lineNr;
 55 |             $this->settings->nodeType = $node->nodeType;
 56 |             $this->settings->content = $node->nodeType === 3 ? $node->textContent : null;
 57 | 
 58 |             $this->replaceMustacheVariables($node);
 59 |             if ($node->nodeType === 1) {
 60 | 
 61 |                 $this->stripEventHandlers($node);
 62 |                 $this->handleFor($node, $options);
 63 |                 $this->handleIf($node, $options);
 64 |                 $this->handleTemplateTag($node, $options);
 65 |                 $this->handleSlot($node, $options);
 66 |                 $this->handleAttributeBinding($node);
 67 |                 $this->handleComponent($node, $options);
 68 |                 $this->handleRawHtml($node);
 69 | 
 70 |                 $subNodes = iterator_to_array($node->childNodes);
 71 |                 $this->settings->childNodes = [];
 72 |                 foreach ($subNodes as $index => $childNode) {
 73 |                     if (!$this->settings->isComponent) {
 74 |                         $newNode = new Node($this->template);
 75 |                         $this->settings->childNodes[] = $newNode->parseDomNode($childNode);
 76 |                     }
 77 |                     $node->removeChild($childNode);
 78 |                 }
 79 | 
 80 |                 $newNode = $node->ownerDocument->createTextNode('_VUEPRE_HTML_PLACEHOLDER_');
 81 |                 $node->appendChild($newNode);
 82 |                 $this->settings->content = $node->ownerDocument->saveHTML($node);
 83 |             }
 84 | 
 85 |         } catch (\Exception $e) {
 86 |             if ($e->getCode() === 100) {
 87 |                 $this->parseError($e);
 88 |             } else {
 89 |                 throw $e;
 90 |             }
 91 |         }
 92 | 
 93 |         return $this;
 94 |     }
 95 | 
 96 |     public function parseError($e) {
 97 |         $template = $this->template->engine->errorCurrentTemplate;
 98 |         $lineNr = $this->errorLineNr;
 99 |         $error = $e->getMessage();
100 |         CacheTemplate::templateError($template, $lineNr, $error);
101 |     }
102 | 
103 |     public function export(): \stdClass{
104 |         $result = (object) [];
105 |         $settings = $this->settings;
106 | 
107 |         if ($settings->isTemplate) {
108 |             $result->isTemplate = true;
109 |         }
110 | 
111 |         $copyIfNotNull = ['line', 'nodeType', 'content', 'isComponent', 'vfor', 'vforIndexName', 'vforAsName', 'vif', 'velseif', 'velse', 'vhtml', 'class', 'style', 'vslot'];
112 |         foreach ($copyIfNotNull as $k) {
113 |             if ($settings->$k !== null) {
114 |                 $result->$k = $settings->$k;
115 |             }
116 |         }
117 | 
118 |         $copyIfHasItems = ['mustacheValues', 'bindedValues'];
119 |         foreach ($copyIfHasItems as $k) {
120 |             if (count($settings->$k) > 0) {
121 |                 $result->$k = $settings->$k;
122 |             }
123 |         }
124 | 
125 |         if (count($settings->childNodes) > 0) {
126 |             $result->childNodes = [];
127 |             foreach ($settings->childNodes as $k => $v) {
128 |                 $result->childNodes[$k] = $v->export();
129 |             }
130 |         }
131 | 
132 |         if (count((array) $settings->slotNodes) > 0) {
133 |             $result->slotNodes = (object) [];
134 |             foreach ($settings->slotNodes as $k => $v) {
135 |                 foreach ($settings->slotNodes->$k as $kk => $vv) {
136 |                     $result->slotNodes->$k[$kk] = $vv->export();
137 |                 }
138 |             }
139 |         }
140 | 
141 |         return $result;
142 |     }
143 | 
144 |     private function stripEventHandlers(DOMNode $node) {
145 |         foreach ($node->attributes as $attribute) {
146 |             if (strpos($attribute->name, 'v-on:') === 0) {
147 |                 $node->removeAttribute($attribute->name);
148 |             }
149 |         }
150 |     }
151 | 
152 |     private function replaceMustacheVariables(DOMNode $node) {
153 |         if ($node->nodeType === 3) {
154 |             // $text = $node->nodeValue;
155 |             $text = $this->settings->content;
156 |             $count = 0;
157 |             $this->settings->mustacheValues = [];
158 |             $regex = '/\{\{(?P<expression>.*?)\}\}/x';
159 |             preg_match_all($regex, $text, $matches);
160 |             foreach ($matches['expression'] as $index => $expression) {
161 |                 $phpExpr = ConvertJsExpression::convert($expression);
162 |                 $tag = '_VUEPRE_MUSHTAG' . $count . '_';
163 |                 $text = str_replace($matches[0][$index], $tag, $text);
164 |                 $this->settings->mustacheValues[$tag] = $phpExpr;
165 |                 $count++;
166 |             }
167 |             $this->settings->content = $text;
168 |         }
169 |     }
170 | 
171 |     private function handleAttributeBinding(DOMElement $node) {
172 |         $removeAttrs = [];
173 |         foreach (iterator_to_array($node->attributes) as $attribute) {
174 | 
175 |             if (!preg_match('/^(?:v-bind)?:([\w-]+)$/', $attribute->name, $matches)) {
176 |                 continue;
177 |             }
178 | 
179 |             // Remove attribute
180 |             $node->removeAttribute($attribute->name);
181 | 
182 |             // Handle attribute
183 |             $name = $matches[1];
184 | 
185 |             if ($name === 'class') {
186 |                 $currentClass = $node->getAttribute('class');
187 |                 $node->setAttribute($name, '_VUEPRE_CLASS_');
188 |                 $phpExpr = ConvertJsExpression::convert($attribute->value, ['inAttribute' => 'class']);
189 |                 $this->settings->class = "'" . $currentClass . " ' . (" . $phpExpr . ")";
190 |                 continue;
191 |             }
192 | 
193 |             if ($name === 'style') {
194 |                 $currentStyle = $node->getAttribute('style');
195 |                 $node->setAttribute($name, '_VUEPRE_STYLE_');
196 |                 $phpExpr = ConvertJsExpression::convert($attribute->value, ['inAttribute' => 'style']);
197 |                 $this->settings->style = "'" . addslashes($currentStyle) . " ' . (" . $phpExpr . ")";
198 |                 continue;
199 |             }
200 | 
201 |             if ($node->tagName === 'component' && $name === 'is') {
202 |                 $phpExpr = ConvertJsExpression::convert($attribute->value);
203 |                 $this->settings->isComponent = $phpExpr;
204 |                 continue;
205 |             }
206 | 
207 |             // Add to bindings
208 |             $phpExpr = ConvertJsExpression::convert($attribute->value);
209 |             $this->settings->bindedValues[$name] = $phpExpr;
210 |             $node->setAttribute($name, '_VUEPRE_ATR_' . $name . '_ATREND_');
211 |         }
212 | 
213 |         // Check for class/style
214 |         foreach (iterator_to_array($node->attributes) as $attribute) {
215 |             $name = $attribute->name;
216 |             if ($name === 'class' && !$this->settings->class) {
217 |                 $this->settings->class = "'" . ($attribute->value) . "'";
218 |                 $node->setAttribute($name, '_VUEPRE_CLASS_');
219 |             }
220 |             if ($name === 'style' && !$this->settings->style) {
221 |                 $this->settings->style = "'" . addslashes($attribute->value) . "'";
222 |                 $node->setAttribute($name, '_VUEPRE_STYLE_');
223 |             }
224 |         }
225 | 
226 |         if ($this->settings->isRootEl) {
227 |             if (!$node->hasAttribute('class')) {
228 |                 $this->settings->class = '';
229 |                 $node->setAttribute('class', '_VUEPRE_CLASS_');
230 |             }
231 |         }
232 |     }
233 | 
234 |     private function handleTemplateTag(DOMNode $node, $options) {
235 |         $tagName = $node->tagName;
236 |         if ($tagName !== 'template') {
237 |             return;
238 |         }
239 | 
240 |         $this->settings->isTemplate = true;
241 |     }
242 | 
243 |     private function handleSlot(DOMNode $node, $options) {
244 |         $tagName = $node->tagName;
245 |         if ($tagName !== 'slot') {
246 |             return;
247 |         }
248 | 
249 |         $slotName = '_DEFAULTSLOT_';
250 |         if ($node->hasAttribute('name')) {
251 |             $slotName = $node->getAttribute('name');
252 |         }
253 | 
254 |         $this->settings->vslot = $slotName;
255 |     }
256 | 
257 |     private function handleComponent(DOMNode $node) {
258 | 
259 |         $componentName = $node->tagName;
260 | 
261 |         if (!$this->settings->isComponent && !in_array($componentName, $this->template->knownComponentNames, true)) {
262 |             return;
263 |         }
264 |         if (!$this->settings->isComponent) {
265 |             $componentNameExpr = '\'' . $componentName . '\'';
266 |             $this->settings->isComponent = $componentNameExpr;
267 |         }
268 | 
269 |         $slotNodes = (object) [];
270 |         $subNodes = iterator_to_array($node->childNodes);
271 |         foreach ($subNodes as $index => $childNode) {
272 |             $slotName = '_DEFAULTSLOT_';
273 | 
274 |             if ($childNode->nodeType === 1) {
275 |                 foreach ($childNode->attributes as $attribute) {
276 |                     if (strpos($attribute->name, 'v-slot:') === 0) {
277 |                         $slotName = substr($attribute->name, strlen('v-slot:'));
278 |                     }
279 |                 }
280 |             }
281 | 
282 |             $slotNode = new Node($this->template);
283 |             $slotNode->parseDomNode($childNode);
284 | 
285 |             if (!isset($slotNodes->$slotName)) {
286 |                 $slotNodes->$slotName = [];
287 |             }
288 |             $slotNodes->$slotName[] = $slotNode;
289 |         }
290 | 
291 |         $this->settings->slotNodes = $slotNodes;
292 |     }
293 | 
294 |     private function handleIf(DOMNode $node, array $options) {
295 |         if ($node->hasAttribute('v-if')) {
296 |             $conditionString = $node->getAttribute('v-if');
297 |             $node->removeAttribute('v-if');
298 |             $phpExpr = ConvertJsExpression::convert($conditionString);
299 |             $this->settings->vif = '\VuePre\ConvertJsExpression::toBool(' . $phpExpr . ')';
300 |         } elseif ($node->hasAttribute('v-else-if')) {
301 |             $conditionString = $node->getAttribute('v-else-if');
302 |             $node->removeAttribute('v-else-if');
303 |             $phpExpr = ConvertJsExpression::convert($conditionString);
304 |             $this->settings->velseif = '\VuePre\ConvertJsExpression::toBool(' . $phpExpr . ')';
305 |         } elseif ($node->hasAttribute('v-else')) {
306 |             $node->removeAttribute('v-else');
307 |             $this->settings->velse = true;
308 |         }
309 |     }
310 |     private function handleFor(DOMNode $node, array $options) {
311 |         /** @var DOMElement $node */
312 |         if ($node->hasAttribute('v-for')) {
313 |             list($itemName, $listName) = explode(' in ', $node->getAttribute('v-for'));
314 |             $node->removeAttribute('v-for');
315 | 
316 |             // Support for item,index in myArray
317 |             $itemName = trim($itemName, '() ');
318 |             $itemIndex = null;
319 |             $itemNameEx = explode(',', $itemName);
320 |             if (count($itemNameEx) === 2) {
321 |                 $itemName = trim($itemNameEx[0]);
322 |                 $itemIndex = trim($itemNameEx[1]);
323 |             }
324 | 
325 |             $phpExpr = ConvertJsExpression::convert($listName);
326 |             $this->settings->vfor = $phpExpr;
327 |             $this->settings->vforAsName = $itemName;
328 |             $this->settings->vforIndexName = $itemIndex;
329 |         }
330 |     }
331 | 
332 |     private function handleRawHtml(DOMNode $node) {
333 |         /** @var DOMElement $node */
334 |         if ($node->hasAttribute('v-html')) {
335 |             $expr = $node->getAttribute('v-html');
336 |             $node->removeAttribute('v-html');
337 |             $phpExpr = ConvertJsExpression::convert($expr);
338 |             $this->settings->vhtml = $phpExpr;
339 |         }
340 |     }
341 | 
342 | }
343 | 


--------------------------------------------------------------------------------
/src/Undefined.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace VuePre;
 4 | 
 5 | class Undefined {
 6 | 
 7 |     public $cacheTemplate = null;
 8 | 
 9 |     public function __construct($tpl) {
10 |         $this->cacheTemplate = $tpl;
11 |     }
12 | 
13 |     public function __toString() {
14 |         return '';
15 |         CacheTemplate::templateError($this->cacheTemplate->engine->errorCurrentTemplate, $this->cacheTemplate->errorLineNr, 'Cannot convert undefined variable to string');
16 |     }
17 | 
18 | }


--------------------------------------------------------------------------------
/tests/integration/VuePreTest.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use PHPUnit\Framework\TestCase;
 4 | 
 5 | class VuePreTest extends TestCase {
 6 | 
 7 |     public $data = [];
 8 | 
 9 |     public function __construct() {
10 |         $this->data = [
11 |             'myVar' => 'Hello',
12 |             'myObject' => (object) [
13 |                 'myProp' => 'World',
14 |             ],
15 |         ];
16 |     }
17 | 
18 |     private function engine() {
19 |         $vue = new \VuePre\Engine();
20 |         $vue->devMode = true;
21 |         $vue->setCacheDirectory(__DIR__ . '/cache');
22 |         $vue->setComponentDirectory(__DIR__ . '/templates');
23 |     }
24 | 
25 |     public function mustacheTags() {
26 |         $result = $this->engine()->renderComponent('all', $this->data);
27 |         assertThat($result, is(equalTo('<div></div>')));
28 |     }
29 | }


--------------------------------------------------------------------------------
/tests/integration/cache/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore


--------------------------------------------------------------------------------
/tests/integration/templates/all.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <div>
 3 |     <div>{{ 420 }}</div>
 4 |     <div>{{ 'four-twenty' }}</div>
 5 |     <div>{{ myVar }}</div>
 6 |     <div>{{ myObject.name }}</div>
 7 |     <div>{{ [1,2,3].indexOf(2) === 2 ? 'Found' : 'Not found' }}</div>
 8 |     <div>{{ [1, myVar,3].indexOf(myVar) === 2 ? 'Found' : 'Not found' }}</div>
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/tests/integration/templates/all.result.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctxcode/vue-pre/c7cdf09199902f9f9f3fbe71b1a0347ae1f56f43/tests/integration/templates/all.result.html


--------------------------------------------------------------------------------