├── .editorconfig
├── .gitignore
├── README.md
├── composer.json
├── example
    ├── example.php
    └── test.js
├── phpunit.xml
├── src
    ├── JqueryToJS.php
    └── Traits
    │   ├── DOM.php
    │   ├── Events.php
    │   ├── Requests.php
    │   └── Selectors.php
└── tests
    └── JqueryToJSTest.php


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | end_of_line = lf
 5 | insert_final_newline = true
 6 | 
 7 | # Matches multiple files with brace expansion notation
 8 | [*.{js,jsx,html,sass,graphql,php}]
 9 | charset = utf-8
10 | indent_style = tab
11 | indent_size = 2
12 | trim_trailing_whitespace = true
13 | 
14 | [*.md]
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /.idea
2 | /vendor
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # jQuery to Javascript Converter
  2 | This PHP class helps to convert your (really) simple jquery codes to vanilla javascript codes.
  3 | 
  4 | There is a lot of issues, it's not completed yet, yet you can convert your simple jquery codes to vanilla js instead of use jquery library using this php class.
  5 | 
  6 | > Inspired from [youmightnotneedjquery.com](http://youmightnotneedjquery.com)
  7 | 
  8 | for javascript adaptation follow this repo as well: https://github.com/aykutkardas/jquery-to-javascript
  9 | 
 10 | # Installation
 11 | 
 12 | Install with composer
 13 | 
 14 | ```
 15 | composer require tayfunerbilen/jquery-to-javascript-convert dev-master
 16 | ```
 17 | 
 18 | then include `autoload.php` file in to your php file.
 19 | 
 20 | ```php
 21 | require __DIR__ . '/vendor/autoload.php';
 22 | ```
 23 | 
 24 | you're ready to go.
 25 | 
 26 | # Usage
 27 | 
 28 | convert onload function
 29 | ```php
 30 | $js = <<<JS
 31 | $(function(){
 32 | 	
 33 | });
 34 | JS;
 35 | echo \Erbilen\JqueryToJS::convert($js);
 36 | 
 37 | /*
 38 | document.addEventListener("DOMContentLoaded", () => {
 39 | 	
 40 | });
 41 | */
 42 | ```
 43 | 
 44 | convert variables
 45 | 
 46 | ```php
 47 | echo Erbilen\JqueryToJS::convert("var test");
 48 | // let test
 49 | ```
 50 | 
 51 | convert id selectors
 52 | ```php
 53 | echo Erbilen\JqueryToJS::convert("var test = $('#test')");
 54 | // let test = document.getElementById("test")
 55 | ```
 56 | 
 57 | convert class selectors
 58 | ```php
 59 | echo Erbilen\JqueryToJS::convert("var list = $('.list')");
 60 | // let list = document.getElementByClassName("list")
 61 | ```
 62 | 
 63 | or
 64 | 
 65 | ```php
 66 | echo Erbilen\JqueryToJS::convert("var list = $('.list li')");
 67 | // let list = document.querySelectorAll(".list li")
 68 | ```
 69 | 
 70 | convert `html()` method
 71 | ```php
 72 | echo Erbilen\JqueryToJS::convert("var content = $('#content').html()");
 73 | // let content = document.getElementById("content").innerHTML
 74 | ```
 75 | 
 76 | or
 77 | 
 78 | ```php
 79 | echo Erbilen\JqueryToJS::convert("var content = $('#content').html('new content')");
 80 | // let content = document.getElementById("content").innerHTML = 'new content'
 81 | ```
 82 | 
 83 | convert `text()` method
 84 | ```php
 85 | echo Erbilen\JqueryToJS::convert("var content = $('#content').text()");
 86 | // let content = document.getElementById("content").innerText
 87 | ```
 88 | 
 89 | or
 90 | 
 91 | ```php
 92 | echo Erbilen\JqueryToJS::convert("var content = $('#content').text('new content')");
 93 | // let content = document.getElementById("content").innerText = 'new content'
 94 | ```
 95 | 
 96 | convert `val()` method
 97 | ```php
 98 | echo Erbilen\JqueryToJS::convert("var name = $('#name').val()");
 99 | // let name = document.getElementById("name").value
100 | ```
101 | 
102 | or
103 | 
104 | ```php
105 | echo Erbilen\JqueryToJS::convert("var name = $('#name').val('Tayfun Erbilen')");
106 | // let name = document.getElementById("name").value = 'Tayfun Erbilen'
107 | ```
108 | 
109 | convert `show()` method
110 | 
111 | ```php
112 | echo Erbilen\JqueryToJS::convert("$('#content').show()");
113 | // document.getElementById("content").style.display = ""
114 | ```
115 | 
116 | convert `hide()` method
117 | 
118 | ```php
119 | echo Erbilen\JqueryToJS::convert("$('#content').hide()");
120 | // document.getElementById("content").style.display = "none"
121 | ```
122 | 
123 | convert `remove()` method
124 | 
125 | ```php
126 | echo Erbilen\JqueryToJS::convert("$('#container').remove()");
127 | /*
128 | let container = document.getElementById("container");
129 | container.parentNode.removeChild(container);
130 | */
131 | ```
132 | 
133 | convert `addClass()` method
134 | 
135 | ```php
136 | echo Erbilen\JqueryToJS::convert("$('#container').addClass('active')");
137 | // document.getElementById("container").classList.add("active")
138 | ```
139 | 
140 | convert `removeClass()` method
141 | 
142 | ```php
143 | echo Erbilen\JqueryToJS::convert("$('#container').removeClass('active')");
144 | // document.getElementById("container").classList.remove("active")
145 | ```
146 | 
147 | convert `hasClass()` method
148 | 
149 | ```php
150 | echo Erbilen\JqueryToJS::convert("$('#container').hasClass('active')");
151 | // document.getElementById("container").classList.contains("active")
152 | ```
153 | 
154 | convert `toggleClass()` method
155 | 
156 | ```php
157 | echo Erbilen\JqueryToJS::convert("$('#container').toggleClass('active')");
158 | // document.getElementById("container").classList.toggle("active")
159 | ```
160 | 
161 | convert `next()` method
162 | 
163 | ```php
164 | echo Erbilen\JqueryToJS::convert("$('#test').next()");
165 | // document.getElementById("test").nextElementSibling;
166 | ```
167 | 
168 | convert `prev()` method
169 | 
170 | ```php
171 | echo Erbilen\JqueryToJS::convert("$('#test').prev()");
172 | // document.getElementById("test").previousElementSibling;
173 | ```
174 | 
175 | convert `clone()` method
176 | ```php
177 | echo Erbilen\JqueryToJS::convert("var test = $('#test').clone()");
178 | // let test = document.getElementById("test").cloneNode(true)
179 | ```
180 | 
181 | convert `$.each()` method
182 | ```php
183 | $js = <<<JS
184 | var list = $('#list li');
185 | $.each(list, function(key, val){
186 | 	console.log($(val).html());
187 | });
188 | JS;
189 | echo Erbilen\JqueryToJS::convert($js);
190 | /*
191 | var list = document.querySelectorAll("#list li");
192 | list.forEach(function(val, key){
193 | 	console.log(val.innerHTML);
194 | });
195 | */
196 | ```
197 | 
198 | convert `on()` method
199 | 
200 | ```php
201 | $js = <<<JS
202 | $('#button').on('click', function (e) {
203 | 
204 | })
205 | JS;
206 | echo Erbilen\JqueryToJS::convert($js);
207 | /*
208 | document.getElementById("button").addEventListener('click', (e) => {
209 | 
210 | });
211 | */
212 | ```
213 | 
214 | or
215 | 
216 | ```php
217 | $js = <<<JS
218 | function callback(e){
219 | 	console.log(e);
220 | }
221 | $('#button').on('click', callback);
222 | JS;
223 | echo Erbilen\JqueryToJS::convert($js);
224 | /*
225 | function callback(e){
226 | 	console.log(e);
227 | }
228 | document.getElementById("button").addEventListener('click', callback);
229 | */
230 | ```
231 | 
232 | convert `trigger()` method
233 | 
234 | ```php
235 | echo Erbilen\JqueryToJS::convert("$('#open-btn').trigger('click')");
236 | /*
237 | var event = document.createEvent('HTMLEvents');
238 | event.initEvent('click', true, false);
239 | document.getElementById("open-btn").dispatchEvent(event);
240 | */
241 | ```
242 | 
243 | convert `ajax()` method
244 | 
245 | ```php
246 | $js = <<<JS
247 | var data = {
248 | 	name: "Tayfun",
249 | 	surname: "Erbilen"
250 | };
251 | 
252 | $.ajax({
253 | 	type: 'POST',
254 | 	url: 'api/contact.php',
255 | 	data: data,
256 | 	success: function (responseVar) {
257 | 		$('#response').html(responseVar);
258 | 	},
259 | 	error: function (err) {
260 | 		$('#error').html(err);
261 | 	}
262 | });
263 | JS;
264 | echo Erbilen\JqueryToJS::convert($js);
265 | /*
266 | let data = {
267 | 	name: "Tayfun",
268 | 	surname: "Erbilen"
269 | };
270 | 
271 | let request = new XMLHttpRequest();
272 |     request.open('POST', 'api/contact.php', true);
273 | 
274 |     request.onload = () => {
275 |         if (this.status >= 200 && this.status < 400) {
276 |             let responseVar = this.response;
277 |             document.getElementById("response").innerHTML = responseVar;
278 |         }
279 |     }
280 | 
281 |     request.onerror = (err) => {
282 |         document.getElementById("error").innerHTML = err;
283 |     }
284 | 
285 |     request.send(data);
286 | */
287 | ```
288 | 
289 | convert `$.getJSON()` method
290 | 
291 | ```php
292 | $js = <<<JS
293 | $.getJSON( "api/get-articles", function(json) {
294 | 	console.log(json);
295 | });
296 | JS;
297 | echo Erbilen\JqueryToJS::convert($js)
298 | 
299 | /*
300 | let request = new XMLHttpRequest();
301 | request.open('GET', 'api/get-articles', true);
302 | 
303 | request.onload = function() {
304 |   if (this.status >= 200 && this.status < 400) {
305 |     let json = JSON.parse(this.response);
306 |     console.log(json);
307 |   }
308 | };
309 | 
310 | request.send();
311 | */
312 | ```
313 | 
314 | also you can send data as well
315 | 
316 | ```php
317 | $js = <<<JS
318 | var data = {
319 |     query: "harry",
320 |     limit: 5
321 | };
322 | $.getJSON( "api/get-articles", data, function(json) {
323 | 	console.log(json);
324 | });
325 | JS;
326 | echo Erbilen\JqueryToJS::convert($js)
327 | 
328 | /*
329 | let data = {
330 |     query: "harry",
331 |     limit: 5
332 | };
333 | let request = new XMLHttpRequest();
334 | request.open('POST', 'api/get-articles', true);
335 | 
336 | request.onload = function() {
337 |   if (this.status >= 200 && this.status < 400) {
338 |     let json = JSON.parse(this.response);
339 |     console.log(json);
340 |   }
341 | };
342 | 
343 | request.send(JSON.stringify(data));
344 | */
345 | ```
346 | 
347 | # converting little bit complex code
348 | ```php
349 | $js = <<<JS
350 | $(function () {
351 | 
352 |     $('#button').on('click', function (e) {
353 |         var container = $('#container'),
354 |             text = $('#text');
355 |         if (container.hasClass('active')) {
356 |             container.removeClass('active');
357 |             text.html('<b>container hidden</b>');
358 |         } else {
359 |             container.addClass('actived');
360 |             text.html('<b>container showed</b>');
361 |         }
362 |         e.preventDefault();
363 |     });
364 | 
365 |     $('#load-btn').on('click', function (e) {
366 | 
367 |         $.ajax({
368 |             type: 'GET',
369 |             url: 'api/load-more',
370 |             success: function (result) {
371 |                 console.log(result);
372 |             },
373 |             error: function (err) {
374 |                 console.log(err);
375 |             }
376 |         });
377 | 
378 |         e.preventDefault();
379 |     });
380 | 
381 | });
382 | JS;
383 | 
384 | echo \Erbilen\JqueryToJS::convert($js);
385 | 
386 | /*
387 | 
388 | document.addEventListener("DOMContentLoaded", () => {
389 | 
390 |     document.getElementById("button").addEventListener('click', (e) => {
391 |         let container = document.getElementById("container"),
392 |             text = document.getElementById("text");
393 |         if (container.classList.contains("active")) {
394 |             container.classList.remove("active");
395 |             text.innerHTML = '<b>container hidden</b>';
396 |         } else {
397 |             container.classList.add("actived");
398 |             text.innerHTML = '<b>container showed</b>';
399 |         }
400 |         e.preventDefault();
401 |     });
402 | 
403 |     document.getElementById("load-btn").addEventListener('click', (e) => {
404 | 
405 |         let request = new XMLHttpRequest();
406 |         request.open('GET', 'api/load-more', true);
407 | 
408 |         request.onload = () => {
409 |             if (this.status >= 200 && this.status < 400) {
410 |                 let result = this.response;
411 |                 console.log(result);
412 |             }
413 |         };
414 | 
415 |         request.onerror = (err) => {
416 |             console.log(err);
417 |         };
418 | 
419 |         request.send();
420 | 
421 |         e.preventDefault();
422 |     });
423 | 
424 | });
425 | */
426 | ```
427 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tayfunerbilen/jquery-to-javascript-convert",
 3 |   "type": "class",
 4 |   "description": "It helps to convert your simple jquery codes to vanilla javascript codes",
 5 |   "keywords": [
 6 |     "php",
 7 |     "jquery",
 8 |     "javascript",
 9 |     "converter"
10 |   ],
11 |   "homepage": "https://github.com/tayfunerbilen/jquery-to-javascript-convert",
12 |   "license": "MIT",
13 |   "authors": [
14 |     {
15 |       "name": "Tayfun Erbilen",
16 |       "email": "tayfunerbilen@gmail.com",
17 |       "homepage": "http://www.erbilen.net",
18 |       "role": "Developer"
19 |     }
20 |   ],
21 |   "minimum-stability": "dev",
22 |   "require": {
23 |     "php": ">=7.0.0"
24 |   },
25 |   "autoload": {
26 |     "psr-4": {
27 |       "Erbilen\\": "src"
28 |     }
29 |   },
30 |   "autoload-dev": {
31 |     "psr-4": {
32 |       "Erbilen\\JqueryToJS\\Test\\": "tests"
33 |     }
34 |   },
35 |   "require-dev": {
36 |     "phpunit/phpunit": "^8.5.2"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/example/example.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | require dirname(__DIR__) . '/vendor/autoload.php';
4 | 
5 | $js = file_get_contents(__DIR__ . '/test.js');
6 | 
7 | echo \Erbilen\JqueryToJS::convert($js);
8 | 


--------------------------------------------------------------------------------
/example/test.js:
--------------------------------------------------------------------------------
 1 | $(function () {
 2 | 
 3 |     $('#button').on('click', function (e) {
 4 |         var container = $('#container'),
 5 |             text = $('#text');
 6 |         if (container.hasClass('active')) {
 7 |             container.removeClass('active');
 8 |             text.html('<b>container hidden</b>');
 9 |         } else {
10 |             container.addClass('actived');
11 |             text.html('<b>container showed</b>');
12 |         }
13 |         e.preventDefault();
14 |     });
15 | 
16 |     $('#load-btn').on('click', function (e) {
17 | 
18 |         $.ajax({
19 |             type: 'GET',
20 |             url: 'api/load-more',
21 |             success: function (result) {
22 |                 console.log(result);
23 |             },
24 |             error: function (err) {
25 |                 console.log(err);
26 |             }
27 |         });
28 | 
29 |         e.preventDefault();
30 |     });
31 | 
32 | });
33 | 


--------------------------------------------------------------------------------
/phpunit.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <phpunit bootstrap="vendor/autoload.php" colors="true">
 3 |     <testsuites>
 4 |         <testsuite name="Test">
 5 |             <directory>tests/</directory>
 6 |         </testsuite>
 7 |     </testsuites>
 8 |     <filter>
 9 |         <whitelist processUncoveredFilesFromWhitelist="true">
10 |             <directory suffix=".php">./src</directory>
11 |         </whitelist>
12 |     </filter>
13 | </phpunit>


--------------------------------------------------------------------------------
/src/JqueryToJS.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Erbilen;
 4 | 
 5 | use Erbilen\Traits\Selectors;
 6 | use Erbilen\Traits\Events;
 7 | use Erbilen\Traits\Requests;
 8 | use Erbilen\Traits\DOM;
 9 | 
10 | class JqueryToJS
11 | {
12 | 	use Selectors, Events, Requests, DOM;
13 | 
14 | 	public static $js;
15 | 	public static $replaceVarToLet = true;
16 | 	public static $removeComments = true;
17 | 
18 | 	public static function check($param)
19 | 	{
20 | 		return isset($param) && !empty($param);
21 | 	}
22 | 
23 | 	public static function documentReady()
24 | 	{
25 | 		$pattern = '@\$\(\s?function\s?\(\)\s?\{(.*?)\}\s?\)(;|)@sU';
26 | 		self::$js = preg_replace_callback($pattern, function ($js) {
27 | 			return 'document.addEventListener("DOMContentLoaded", () => {' . $js[1] . '});';
28 | 		}, self::$js);
29 | 	}
30 | 
31 | 	/**
32 | 	 * Açıklama satırlarını siler
33 | 	 */
34 | 	public static function removeComments()
35 | 	{
36 | 
37 | 		// çok satırlı açıklamaları sil
38 | 		$pattern = '@/\*(.*?)\*/@s';
39 | 		self::$js = preg_replace($pattern, null, self::$js);
40 | 
41 | 		// tek satırlı açıklamarı sil
42 | 		$pattern = '@//(.+)@';
43 | 		self::$js = preg_replace($pattern, null, self::$js);
44 | 	}
45 | 
46 | 	public static function convert($js)
47 | 	{
48 | 		self::$js = $js;
49 | 		self::documentReady();
50 | 		if (self::$removeComments)
51 | 			self::removeComments();
52 | 		if (self::$replaceVarToLet)
53 | 			self::varToLet();
54 | 		self::replaceVars();
55 | 		self::idSelectors();
56 | 		self::classSelectors();
57 | 		self::html();
58 | 		self::text();
59 | 		self::addClass();
60 | 		self::removeClass();
61 | 		self::toggleClass();
62 | 		self::hasClass();
63 | 		self::hide();
64 | 		self::show();
65 | 		self::remove();
66 | 		self::val();
67 | 		self::next();
68 | 		self::prev();
69 | 		self::clone();
70 | 		self::each();
71 | 		self::on();
72 | 		self::trigger();
73 | 		self::ajax();
74 | 		self::getJSON();
75 | 		return self::$js;
76 | 	}
77 | 
78 | }
79 | 


--------------------------------------------------------------------------------
/src/Traits/DOM.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Erbilen\Traits;
  4 | 
  5 | 
  6 | trait DOM
  7 | {
  8 | 	/**
  9 | 	 * var ile oluşturulmuş değişkenleri let'e dönüştürür
 10 | 	 */
 11 | 	public static function varToLet()
 12 | 	{
 13 | 		self::$js = preg_replace('@\bvar\s+([0-9a-zA-Z-_]?)@', 'let $1', self::$js);
 14 | 	}
 15 | 
 16 | 	/**
 17 | 	 * $(var) değerini dönüştürür
 18 | 	 */
 19 | 	public static function replaceVars()
 20 | 	{
 21 | 		$pattern = "@\\$\((\w+)\)@si";
 22 | 		self::$js = preg_replace_callback($pattern, function ($js) {
 23 | 			return $js[1];
 24 | 		}, self::$js);
 25 | 	}
 26 | 
 27 | 	/**
 28 | 	 * .html(x) metodunu dönüştürür
 29 | 	 */
 30 | 	public static function html()
 31 | 	{
 32 | 		$pattern = "@.html\((.*?)\)@";
 33 | 		self::$js = preg_replace_callback($pattern, function ($js) {
 34 | 			if (isset($js[1]) && !empty($js[1]))
 35 | 				return '.innerHTML = ' . $js[1];
 36 | 			elseif (isset($js[0]) && !empty($js[0]))
 37 | 				return '.innerHTML';
 38 | 		}, self::$js);
 39 | 	}
 40 | 
 41 | 	/**
 42 | 	 * .text(x) metodunu dönüştürür
 43 | 	 */
 44 | 	public static function text()
 45 | 	{
 46 | 		$pattern = "@.text\((.*?)\)@";
 47 | 		self::$js = preg_replace_callback($pattern, function ($js) {
 48 | 			if (isset($js[1]) && !empty($js[1]))
 49 | 				return '.innerText = ' . $js[1];
 50 | 			elseif (isset($js[0]) && !empty($js[0]))
 51 | 				return '.innerText';
 52 | 		}, self::$js);
 53 | 	}
 54 | 
 55 | 	/**
 56 | 	 * .toggleClass(x) metodunu dönüştürür
 57 | 	 */
 58 | 	public static function toggleClass()
 59 | 	{
 60 | 		$pattern = "@.toggleClass\(('|\")([0-9a-zA-Z-_]+)('|\")\)@";
 61 | 		self::$js = preg_replace_callback($pattern, function ($js) {
 62 | 			return '.classList.toggle("' . $js[2] . '")';
 63 | 		}, self::$js);
 64 | 	}
 65 | 
 66 | 	/**
 67 | 	 * .addClass(x) metodunu dönüştürür
 68 | 	 */
 69 | 	public static function addClass()
 70 | 	{
 71 | 		$pattern = "@.addClass\(('|\")([0-9a-zA-Z-_]+)('|\")\)@";
 72 | 		self::$js = preg_replace_callback($pattern, function ($js) {
 73 | 			return '.classList.add("' . $js[2] . '")';
 74 | 		}, self::$js);
 75 | 	}
 76 | 
 77 | 	/**
 78 | 	 * .removeClass(x) metodunu dönüştürür
 79 | 	 */
 80 | 	public static function removeClass()
 81 | 	{
 82 | 		$pattern = "@.removeClass\(('|\")([0-9a-zA-Z-_]+)('|\")\)@";
 83 | 		self::$js = preg_replace_callback($pattern, function ($js) {
 84 | 			return '.classList.remove("' . $js[2] . '")';
 85 | 		}, self::$js);
 86 | 	}
 87 | 
 88 | 	/**
 89 | 	 * .hasClass(x) metodunu dönüştürür
 90 | 	 */
 91 | 	public static function hasClass()
 92 | 	{
 93 | 		$pattern = "@.hasClass\(('|\")([0-9a-zA-Z-_]+)('|\")\)@";
 94 | 		self::$js = preg_replace_callback($pattern, function ($js) {
 95 | 			return '.classList.contains("' . $js[2] . '")';
 96 | 		}, self::$js);
 97 | 	}
 98 | 
 99 | 	/**
100 | 	 * .hide(x) metodunu dönüştürür
101 | 	 */
102 | 	public static function hide()
103 | 	{
104 | 		$pattern = "@\.hide\(([0-9]+|)\)@";
105 | 		self::$js = preg_replace_callback($pattern, function ($js) {
106 | 			return '.style.display = "none"';
107 | 		}, self::$js);
108 | 	}
109 | 
110 | 	/**
111 | 	 * .show(x) metodunu dönüştürür
112 | 	 */
113 | 	public static function show()
114 | 	{
115 | 		$pattern = "@\.show\(([0-9]+|)\)@";
116 | 		self::$js = preg_replace_callback($pattern, function ($js) {
117 | 			return '.style.display = ""';
118 | 		}, self::$js);
119 | 	}
120 | 
121 | 	/**
122 | 	 * .remove(x) metodunu dönüştürür
123 | 	 */
124 | 	public static function remove()
125 | 	{
126 | 		$pattern = "@document\.(getElementByClassName|getElementById|querySelector|querySelectorAll)\(('|\")([0-9a-zA-Z-_.\s]+)('|\")\)\.remove\(\);?@";
127 | 		self::$js = preg_replace_callback($pattern, function ($js) {
128 | 			$varName = str_replace(['.', ' ', '>'], null, $js[3]);
129 | 			$el = (self::$replaceVarToLet ? 'let' : 'var') . ' ' . $varName . ' = document.' . $js[1] . '(' . $js[2] . $js[3] . $js[4] . ');';
130 | 			return $el . PHP_EOL . "\t" . $varName . ".parentNode.removeChild(" . $varName . ");";
131 | 		}, self::$js);
132 | 	}
133 | 
134 | 	/**
135 | 	 * .val(x) metodunu dönüştürür
136 | 	 */
137 | 	public static function val()
138 | 	{
139 | 		$pattern = "@\.val\(([0-9a-zA-Z-_'\"]+|)\)@";
140 | 		self::$js = preg_replace_callback($pattern, function ($js) {
141 | 			if (!empty($js[1]))
142 | 				return '.value = ' . $js[1];
143 | 			else
144 | 				return '.value';
145 | 		}, self::$js);
146 | 	}
147 | 
148 | 	/**
149 | 	 * .next() metodunu dönüştürür
150 | 	 */
151 | 	public static function next()
152 | 	{
153 | 		$pattern = "@\.next\(\)@";
154 | 		self::$js = preg_replace_callback($pattern, function ($js) {
155 | 			return '.nextElementSibling';
156 | 		}, self::$js);
157 | 		// @TODO çoklu seçim için güncelleme yapılacak
158 | 	}
159 | 
160 | 	/**
161 | 	 * .prev() metodunu dönüştürür
162 | 	 */
163 | 	public static function prev()
164 | 	{
165 | 		$pattern = "@\.prev\(\)@";
166 | 		self::$js = preg_replace_callback($pattern, function ($js) {
167 | 			return '.previousElementSibling';
168 | 		}, self::$js);
169 | 		// @TODO çoklu seçim için güncelleme yapılacak
170 | 	}
171 | 
172 | 	/**
173 | 	 * .clone() metodunu dönüştürür
174 | 	 */
175 | 	public static function clone()
176 | 	{
177 | 		$pattern = "@.clone\(\)@";
178 | 		self::$js = preg_replace($pattern, '.cloneNode(true)', self::$js);
179 | 	}
180 | 
181 | 	/**
182 | 	 * $.each() metodunu dönüştürür
183 | 	 */
184 | 	public static function each()
185 | 	{
186 | 
187 | 		$pattern = "@\\$\.each\(\s?(\w+)\s?\,\s?function\s?\((.*?)\)\s?{(.*?)}\s?\)@s";
188 | 		self::$js = preg_replace_callback($pattern, function ($js) {
189 | 			$params = array_reverse(explode(',', str_replace(' ', null, trim($js[2]))));
190 | 			return $js[1] . '.forEach(function(' . implode(', ', $params) . '){
191 | 	' . trim($js[3]) . '
192 | })';
193 | 		}, self::$js);
194 | 	}
195 | }
196 | 


--------------------------------------------------------------------------------
/src/Traits/Events.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Erbilen\Traits;
 4 | 
 5 | 
 6 | trait Events
 7 | {
 8 | 
 9 | 	/**
10 | 	 * .on() metodunu dönüştürür
11 | 	 */
12 | 	public static function on()
13 | 	{
14 | 
15 | 		// fonksiyon çağırımı için
16 | 		$pattern = "@\.on\('([0-9a-zA-Z-_]+)',\s?([0-9a-zA-Z-_]+)\);?@s";
17 | 		self::$js = preg_replace_callback($pattern, function ($js) {
18 | 			if (isset($js[1]) && !empty($js[1]))
19 | 				return '.addEventListener(\'' . $js[1] . '\', ' . $js[2] . ');';
20 | 		}, self::$js);
21 | 
22 | 		// inline callback fonksiyonu için
23 | 		$pattern = "@\.on\('([0-9a-zA-Z-_]+)',\s?function\s?\(([0-9a-zA-Z-_, ]+|)\)\s?{(.*?)}\);?@s";
24 | 		self::$js = preg_replace_callback($pattern, function ($js) {
25 | 			if (isset($js[1]) && !empty($js[1]))
26 | 				return '.addEventListener(\'' . $js[1] . '\', (' . (!empty($js[2]) ? $js[2] : 'e') . ') => {' . self::this($js[3], $js[2]) . '});';
27 | 		}, self::$js);
28 | 	}
29 | 
30 | 	/**
31 | 	 * .on() metodundaki $(this) değerini değiştirir
32 | 	 * @param $js
33 | 	 * @return string|string[]|null
34 | 	 */
35 | 	public static function this($js, $event = null)
36 | 	{
37 | 		$pattern = "@\\$\(\s?this\s?\)@";
38 | 		return preg_replace_callback($pattern, function ($js) use ($event) {
39 | 			return (empty($event) ? 'e' : $event) . '.target';
40 | 		}, $js);
41 | 	}
42 | 
43 | 	/**
44 | 	 * .trigger() metodunu dönüştürür
45 | 	 */
46 | 	public static function trigger()
47 | 	{
48 | 		$pattern = '@document.(getElementByClassName|getElementById|querySelector|querySelectorAll)\("([0-9a-zA-Z-_]+)"\)\.trigger\((\'|")([a-zA-Z]+)(\'|")\);?@';
49 | 		self::$js = preg_replace_callback($pattern, function ($js) {
50 | 			return 'var event = document.createEvent(\'HTMLEvents\');
51 | 	event.initEvent(\'' . $js[4] . '\', true, false);
52 | 	document.' . $js[1] . '("' . $js[2] . '").dispatchEvent(event);
53 | ';
54 | 		}, self::$js);
55 | 	}
56 | 
57 | }
58 | 


--------------------------------------------------------------------------------
/src/Traits/Requests.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Erbilen\Traits;
  4 | 
  5 | 
  6 | trait Requests
  7 | {
  8 | 
  9 | 	/**
 10 | 	 * .ajax() metodunu dönüştürür
 11 | 	 */
 12 | 	public static function ajax()
 13 | 	{
 14 | 		$pattern = "@\\$\.ajax\(\{(.*?)\}\);?@s";
 15 | 		self::$js = preg_replace_callback($pattern, function ($js) {
 16 | 			if (self::check($js[0])) {
 17 | 
 18 | 				// type değerini al
 19 | 				$pattern = "@type\s?:\s?('|\")(GET|POST)('|\")@i";
 20 | 				preg_match($pattern, $js[0], $type);
 21 | 				$type = $type[2] ?? null;
 22 | 
 23 | 				// dataType değerini al
 24 | 				$pattern = "@dataType\s?:\s?('|\")(.*?)('|\")@i";
 25 | 				preg_match($pattern, $js[0], $dataType);
 26 | 				$dataType = $dataType[2] ?? null;
 27 | 
 28 | 				// url değerini al
 29 | 				$pattern = "@url\s?:\s?('|\")([a-zA-Z-_/.]+)('|\")@i";
 30 | 				preg_match($pattern, $js[0], $url);
 31 | 				$url = $url[2] ?? null;
 32 | 
 33 | 				// data değerini al
 34 | 				$pattern = "@data\s?:\s?('|)([a-zA-Z-_/.& =]+)('|)@i";
 35 | 				preg_match($pattern, $js[0], $data);
 36 | 				$data = ($data[1] ?? null) . ($data[2] ?? null) . ($data[3] ?? null);
 37 | 
 38 | 				// success callback fonksiyonunu al
 39 | 				$pattern = "@success\s?:\s?function\s?\((.*?)\)\s?\{(.*?)\}@s";
 40 | 				preg_match($pattern, $js[0], $successFunction);
 41 | 				$successVariable = $successFunction[1] ?? null;
 42 | 				$successCallback = trim($successFunction[2]) ?? null;
 43 | 
 44 | 				// error callback fonksiyonunu al
 45 | 				$pattern = "@error\s?:\s?function\s?\((.*?)\)\s?\{(.*?)\}@s";
 46 | 				preg_match($pattern, $js[0], $errorFunction);
 47 | 				$errorVariable = $errorFunction[1] ?? null;
 48 | 				$errorCallback = trim($errorFunction[2]) ?? null;
 49 | 
 50 | 			}
 51 | 
 52 | 			$js = <<<JS
 53 | let request = new XMLHttpRequest();
 54 | request.open("{$type}", "{$url}", true);
 55 | JS;
 56 | 
 57 | 			if ($dataType)
 58 | 				$js .= <<<JS
 59 | \nrequest.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
 60 | JS;
 61 | 
 62 | 			if ($successVariable)
 63 | 				$js .= <<<JS
 64 | \nrequest.onload = function() {
 65 | 	if (this.status >= 200 && this.status < 400) {
 66 | 		let {$successVariable} = this.response;
 67 | 		{$successCallback}
 68 | 	}
 69 | }
 70 | JS;
 71 | 
 72 | 			if ($errorVariable)
 73 | 				$js .= <<<JS
 74 | \nrequest.onerror = function({$errorVariable}) {
 75 | 	{$errorCallback}
 76 | };
 77 | JS;
 78 | 
 79 | 			$js .= <<<JS
 80 | \nrequest.send({$data});
 81 | JS;
 82 | 			return $js;
 83 | 		}, self::$js);
 84 | 	}
 85 | 
 86 | 	/**
 87 | 	 * $.getJSON() metodunu dönüştürür
 88 | 	 */
 89 | 	public static function getJSON()
 90 | 	{
 91 | 		$pattern = "@\\$\.getJSON\(\s?('|\")(.*?)('|\")\s?,\s?({|)(.*?|[0-9a-zA-Z]+)(}|)(,|)\s?function\(\s?(.*?)\s?\)\s?{(.*?)}\);?@s";
 92 | 		self::$js = preg_replace_callback($pattern, function ($js) {
 93 | 
 94 | 			return 'let request = new XMLHttpRequest();
 95 | request.open(\'' . ($js[5] ? 'POST' : 'GET') . '\', \'' . $js[2] . '\', true);
 96 | 
 97 | request.onload = function() {
 98 |   if (this.status >= 200 && this.status < 400) {
 99 |     let ' . $js[8] . ' = JSON.parse(this.response);
100 |     ' . trim($js[9]) . '
101 |   }
102 | };
103 | 
104 | request.send(' . ($js[5] ? 'JSON.stringify(' : null) . $js[4] . $js[5] . $js[6] . ($js[5] ? ')' : null) . ');';
105 | 		}, self::$js);
106 | 	}
107 | 
108 | }
109 | 


--------------------------------------------------------------------------------
/src/Traits/Selectors.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Erbilen\Traits;
 4 | 
 5 | 
 6 | trait Selectors
 7 | {
 8 | 
 9 | 	/**
10 | 	 * ID seçicileri js formatına dönüştürür
11 | 	 */
12 | 	public static function idSelectors()
13 | 	{
14 | 		$pattern = "@\\$\(\s?('|\")\s?\#([0-9a-zA-Z-_ ]+)\s?('|\")\s?\)@";
15 | 		self::$js = preg_replace_callback($pattern, function ($js) {
16 | 			if (isset($js[2]) && !empty($js[2]))
17 | 				// eğer boşluk varsa multiple etiket seçeceğini kabul et
18 | 				if (strstr(trim($js[2]), ' '))
19 | 					return 'document.querySelectorAll("#' . trim($js[2]) . '")';
20 | 				else
21 | 					return 'document.getElementById("' . trim($js[2]) . '")';
22 | 		}, self::$js);
23 | 	}
24 | 
25 | 	/**
26 | 	 * Class seçicileri js formatına dönüştürür
27 | 	 */
28 | 	public static function classSelectors()
29 | 	{
30 | 		$pattern = "@\\$\(\s?('|\")\s?\.([0-9a-zA-Z-_\s]+)\s?('|\")\s?\)@";
31 | 		self::$js = preg_replace_callback($pattern, function ($js) {
32 | 			if (isset($js[2]) && !empty($js[2]))
33 | 				// eğer boşluk varsa multiple etiket seçeceğini kabul et
34 | 				if (strstr(trim($js[2]), ' '))
35 | 					return 'document.querySelectorAll(".' . trim($js[2]) . '")';
36 | 				else
37 | 					return 'document.getElementByClassName("' . trim($js[2]) . '")';
38 | 		}, self::$js);
39 | 	}
40 | 
41 | }
42 | 


--------------------------------------------------------------------------------
/tests/JqueryToJSTest.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Erbilen\JqueryToJS\Test;
 4 | 
 5 | use PHPUnit\Framework\TestCase;
 6 | use \Erbilen\JqueryToJS;
 7 | 
 8 | class JqueryToJsTest extends TestCase
 9 | {
10 |     public function testIdSelectors()
11 |     {
12 |         $result = JqueryToJS::convert("$('#selector')");
13 |         $this->assertSame($result, "document.getElementById(\"selector\")");
14 |     }
15 | 
16 |     public function testClassSelectors()
17 |     {
18 |         $result = JqueryToJS::convert("$('.selector')");
19 |         $this->assertSame($result, "document.getElementByClassName(\"selector\")");
20 |     }
21 | }
22 | 


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