View::getJs() method returns JsBlock (#2152)

atk4 · Feb 1, 2024 · 5c86e53 · 5c86e53
1 parent bf72a14
commit 5c86e53
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 88 deletions.
diff --git a/docs/view.md b/docs/view.md
@@ -325,7 +325,7 @@ Returns HTML for this View as well as all the child views.
 :::
 
 :::{php:method} getJs()
-Return array of JS chains that was assigned to current element or it's children.
+Returns JsBlock containing JS chains that were assigned to current element or it's children.
 :::
 
 ## Modifying rendering logic

diff --git a/js/README.md b/js/README.md
@@ -77,7 +77,7 @@ the JSON file for this.
 npm run profile
 ```
 
-This command will create a profile JSON file `atkjs-bundle-profile.json` with bundle information inside the profile folder. You can use this file with your
+This command will create a profile JSON file `webpack-bundle-profile.local.json` with bundle information inside the profile folder. You can use this file with your
 favorite bundle analyzer.
 
 Another npm script is available for analyzing the bundle using the webpack-bundle-analyzer tool.
@@ -86,7 +86,7 @@ Another npm script is available for analyzing the bundle using the webpack-bundl
 npm run analyze-profile
 ```
 
-Note: In order to use this script, make sure that the webpack-bundle-analyzer package is install
+Note: In order to use this script, make sure that the webpack-bundle-analyzer package is installed
 globally.
 
 ```

diff --git a/js/package.json b/js/package.json
@@ -6,8 +6,8 @@
     "scripts": {
         "build": "webpack --env development && webpack --env production",
         "dev": "webpack --progress --watch --env development",
-        "profile": "webpack --env production --profile --json > profile/atkjs-bundle-profile.json",
-        "analyze-profile": "webpack-bundle-analyzer profile/atkjs-bundle-profile.json",
+        "profile": "webpack --env production --profile --json > webpack-bundle-profile.local.json",
+        "analyze-profile": "webpack-bundle-analyzer webpack-bundle-profile.local.json",
         "lint": "eslint --ext .js,.vue . && stylelint \"../public/**/*.less\" && prettier --config .prettierrc.js --log-level warn \"../public/**/*.less\" --check",
         "lint-fix": "eslint --ext .js,.vue . --fix && stylelint \"../public/**/*.less\" --fix && prettier --config .prettierrc.js --log-level warn \"../public/**/*.less\" --write"
     },

diff --git a/js/src/services/api.service.js b/js/src/services/api.service.js
@@ -27,13 +27,13 @@ class ApiService {
     /**
      * Execute JS code.
      *
-     * This function should be called using .call() by passing proper context for 'this'.
-     * ex: apiService.evalResponse.call(this, code)
-     *
+     * @param {object} thisObject
      * @param {string} code
      */
-    evalResponse(code) {
-        eval(code); // eslint-disable-line no-eval
+    evalJsCode(thisObject, code) {
+        (function () {
+            eval('\'use strict\'; (() => {' + code + '})()'); // eslint-disable-line no-eval
+        }).call(thisObject);
     }
 
     /**
@@ -113,13 +113,13 @@ class ApiService {
                 }
 
                 if (response.atkjs) {
-                    atk.apiService.evalResponse.call(this, response.atkjs);
+                    atk.apiService.evalJsCode(this, response.atkjs);
                 }
 
                 if (atk.apiService.afterSuccessCallbacks.length > 0) {
                     const callbacks = atk.apiService.afterSuccessCallbacks;
                     for (const callback of callbacks) {
-                        atk.apiService.evalResponse.call(this, callback);
+                        atk.apiService.evalJsCode(this, callback);
                     }
                     atk.apiService.afterSuccessCallbacks.splice(0);
                 }

diff --git a/public/js/atkjs-ui.js b/public/js/atkjs-ui.js
@@ -1968,13 +1968,13 @@ class ApiService {
   /**
    * Execute JS code.
    *
-   * This function should be called using .call() by passing proper context for 'this'.
-   * ex: apiService.evalResponse.call(this, code)
-   *
+   * @param {object} thisObject
    * @param {string} code
    */
-  evalResponse(code) {
-    eval(code); // eslint-disable-line no-eval
+  evalJsCode(thisObject, code) {
+    (function () {
+      eval('\'use strict\'; (() => {' + code + '})()'); // eslint-disable-line no-eval
+    }).call(thisObject);
   }
 
   /**
@@ -2046,12 +2046,12 @@ class ApiService {
           }
         }
         if (response.atkjs) {
-          atk__WEBPACK_IMPORTED_MODULE_6__["default"].apiService.evalResponse.call(this, response.atkjs);
+          atk__WEBPACK_IMPORTED_MODULE_6__["default"].apiService.evalJsCode(this, response.atkjs);
         }
         if (atk__WEBPACK_IMPORTED_MODULE_6__["default"].apiService.afterSuccessCallbacks.length > 0) {
           const callbacks = atk__WEBPACK_IMPORTED_MODULE_6__["default"].apiService.afterSuccessCallbacks;
           for (const callback of callbacks) {
-            atk__WEBPACK_IMPORTED_MODULE_6__["default"].apiService.evalResponse.call(this, callback);
+            atk__WEBPACK_IMPORTED_MODULE_6__["default"].apiService.evalJsCode(this, callback);
           }
           atk__WEBPACK_IMPORTED_MODULE_6__["default"].apiService.afterSuccessCallbacks.splice(0);
         }

diff --git a/public/js/atkjs-ui.js.map b/public/js/atkjs-ui.js.map
diff --git a/public/js/atkjs-ui.min.js b/public/js/atkjs-ui.min.js
diff --git a/public/js/atkjs-ui.min.js.map b/public/js/atkjs-ui.min.js.map
diff --git a/src/App.php b/src/App.php
@@ -16,8 +16,10 @@
 use Atk4\Ui\Exception\ExitApplicationError;
 use Atk4\Ui\Exception\LateOutputError;
 use Atk4\Ui\Exception\UnhandledCallbackExceptionError;
+use Atk4\Ui\Js\Jquery;
 use Atk4\Ui\Js\JsExpression;
 use Atk4\Ui\Js\JsExpressionable;
+use Atk4\Ui\Js\JsFunction;
 use Atk4\Ui\Persistence\Ui as UiPersistence;
 use Atk4\Ui\UserAction\ExecutorFactory;
 use Nyholm\Psr7\Factory\Psr17Factory;
@@ -677,7 +679,10 @@ public function run(): void
 
             $this->html->template->set('title', $this->title);
             $this->html->renderAll();
-            $this->html->template->dangerouslyAppendHtml('Head', $this->getTag('script', [], '$(function () {' . $this->html->getJs() . ';});'));
+            $this->html->template->dangerouslyAppendHtml(
+                'Head',
+                $this->getTag('script', [], (new Jquery(new JsFunction([], $this->html->getJs())))->jsRender() . ';')
+            );
             $this->isRendering = false;
 
             if ($this->hasRequestQueryParam(Callback::URL_QUERY_TARGET) && $this->catchRunawayCallbacks) {

diff --git a/src/Js/JsFunction.php b/src/Js/JsFunction.php
@@ -60,10 +60,15 @@ public function jsRender(): string
             $pre .= $this->indent . '    event.stopPropagation();' . "\n";
         }
 
-        $output = $this->indent . 'function (' . implode(', ', $this->args) . ') {' . "\n"
-            . $pre
-            . preg_replace('~^~m', $this->indent . '    ', $this->body->jsRender()) . "\n" // TODO IMPORTANT indentation must ignore multiline strings/comments!
-            . $this->indent . '}';
+        $body = $this->body->jsRender();
+
+        $output = $this->indent . 'function (' . implode(', ', $this->args) . ') {';
+        if ($body !== '') {
+            $output .= "\n" . $pre
+                . preg_replace('~^(?!$)~m', $this->indent . '    ', $body) . "\n" // TODO IMPORTANT indentation must ignore multiline strings/comments!
+                . $this->indent;
+        }
+        $output .= '}';
 
         return $output;
     }

diff --git a/src/Lister.php b/src/Lister.php
@@ -216,7 +216,7 @@ public function renderToJsonArr(string $region = null): array
 
         return [
             'success' => true,
-            'atkjs' => $this->getJs(),
+            'atkjs' => $this->getJs()->jsRender(),
             'html' => $this->template->renderToHtml($region),
             'id' => $this->name,
         ];

diff --git a/src/View.php b/src/View.php
@@ -656,7 +656,7 @@ public function render(): string
     {
         $this->renderAll();
 
-        $js = $this->getJs();
+        $js = $this->getJs()->jsRender();
 
         return ($js !== '' ? $this->getApp()->getTag('script', [], '$(function () {' . $js . ';});') : '')
                . $this->renderTemplateToHtml();
@@ -670,7 +670,7 @@ public function renderToTab(): array
         $this->renderAll();
 
         return [
-            'atkjs' => $this->getJsRenderActions(),
+            'atkjs' => $this->getJs()->jsRender(),
             'html' => $this->renderTemplateToHtml(),
         ];
     }
@@ -684,7 +684,7 @@ public function renderToJsonArr(): array
 
         return [
             'success' => true,
-            'atkjs' => $this->getJs(),
+            'atkjs' => $this->getJs()->jsRender(),
             'html' => $this->renderTemplateToHtml(),
             'id' => $this->name,
         ];
@@ -1077,29 +1077,10 @@ public function jsRender(): string
         return $res;
     }
 
-    /**
-     * Return rendered js actions as a string.
-     */
-    public function getJsRenderActions(): string
-    {
-        $actions = [];
-        foreach ($this->_jsActions as $eventActions) {
-            foreach ($eventActions as $action) {
-                $actions[] = $action;
-            }
-        }
-
-        return (new JsBlock($actions))->jsRender();
-    }
-
     /**
      * Get JavaScript objects from this render tree.
-     *
-     * TODO dedup with getJsRenderActions()
-     *
-     * @return string
      */
-    public function getJs()
+    public function getJs(): JsBlock
     {
         $actions = [];
         foreach ($this->_jsActions as $eventActions) {
@@ -1108,11 +1089,7 @@ public function getJs()
             }
         }
 
-        if (count($actions) === 0) {
-            return '';
-        }
-
-        return (new JsExpression('[]()', [new JsFunction([], $actions)]))->jsRender();
+        return new JsBlock($actions);
     }
 
     // }}}

diff --git a/src/VirtualPage.php b/src/VirtualPage.php
@@ -4,6 +4,9 @@
 
 namespace Atk4\Ui;
 
+use Atk4\Ui\Js\Jquery;
+use Atk4\Ui\Js\JsFunction;
+
 /**
  * Virtual page normally does not render, yet it has it's own trigger and will respond
  * to the trigger in a number of useful way depending on trigger's argument:.
@@ -95,7 +98,10 @@ public function getHtml(): string
             if ($mode === 'popup') {
                 $this->getApp()->html->template->set('title', $this->getApp()->title);
                 $this->getApp()->html->template->dangerouslySetHtml('Content', parent::getHtml());
-                $this->getApp()->html->template->dangerouslyAppendHtml('Head', $this->getApp()->getTag('script', [], '$(function () { ' . $this->getJs() . '; });'));
+                $this->getApp()->html->template->dangerouslyAppendHtml(
+                    'Head',
+                    $this->getApp()->getTag('script', [], (new Jquery(new JsFunction([], $this->getJs())))->jsRender() . ';')
+                );
 
                 $this->getApp()->terminateHtml($this->getApp()->html->template);
             }
@@ -132,8 +138,10 @@ public function getHtml(): string
         }
 
         $this->getApp()->html->template->dangerouslySetHtml('Content', $this->getApp()->layout->template->renderToHtml());
-
-        $this->getApp()->html->template->dangerouslyAppendHtml('Head', $this->getApp()->getTag('script', [], '$(function () {' . $this->getApp()->layout->getJs() . ';});'));
+        $this->getApp()->html->template->dangerouslyAppendHtml(
+            'Head',
+            $this->getApp()->getTag('script', [], (new Jquery(new JsFunction([], $this->getApp()->layout->getJs())))->jsRender() . ';')
+        );
 
         $this->getApp()->terminateHtml($this->getApp()->html->template);
     }

diff --git a/tests/JsIntegrationTest.php b/tests/JsIntegrationTest.php
@@ -54,9 +54,7 @@ public function testChainTrue(): void
         $v->setApp($this->createApp());
         $v->renderAll();
 
-        self::assertSame('(function () {
-    $(\'#b\').hide();
-})()', $v->getJs());
+        self::assertSame('$(\'#b\').hide();', $v->getJs()->jsRender());
     }
 
     public function testChainClick(): void
@@ -66,13 +64,16 @@ public function testChainClick(): void
         $v->setApp($this->createApp());
         $v->renderAll();
 
-        self::assertSame('(function () {
-    $(\'#b\').on(\'click\', function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        $(this).hide();
-    });
-})()', $v->getJs());
+        self::assertSame(
+            <<<'EOF'
+                $('#b').on('click', function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    $(this).hide();
+                });
+                EOF,
+            $v->getJs()->jsRender()
+        );
     }
 
     public function testChainClickEmpty(): void
@@ -82,15 +83,16 @@ public function testChainClickEmpty(): void
         $v->setApp($this->createApp());
         $v->renderAll();
 
-        self::assertSame('(function () {
-    $(\'#b\').on(\'click\', function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        '
-        . '$(this);' // this JS statement is not required
-        . '
-    });
-})()', $v->getJs());
+        self::assertSame(
+            <<<'EOF'
+                $('#b').on('click', function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                EOF
+                . "\n    $(this);" // this JS statement is not required
+                . "\n});",
+            $v->getJs()->jsRender()
+        );
     }
 
     public function testChainNested(): void
@@ -108,15 +110,18 @@ public function testChainNested(): void
         $v->setApp($this->createApp());
         $v->renderAll();
 
-        self::assertSame('(function () {
-    $(\'#b1\').on(\'click\', function (event) {
-        event.stopPropagation();
-        $(\'#b1\').hide();
-        $(\'#b2\').hide();
-        $(\'#b2\').hide();
-    });
-    $(\'#b1\').data(\'x\', \'y\');
-})()', $v->getJs());
+        self::assertSame(
+            <<<'EOF'
+                $('#b1').on('click', function (event) {
+                    event.stopPropagation();
+                    $('#b1').hide();
+                    $('#b2').hide();
+                    $('#b2').hide();
+                });
+                $('#b1').data('x', 'y');
+                EOF,
+            $v->getJs()->jsRender()
+        );
     }
 
     public function testChainNullReturn(): void
@@ -169,7 +174,7 @@ public function jsExecute(): JsBlock
         $v->renderAll();
         self::assertSame(0, $jsCallback->counter);
 
-        $v->getJs();
+        $v->getJs()->jsRender();
         self::assertSame(1, $jsCallback->counter);
     }
 }
diff --git a/tests/JsTest.php b/tests/JsTest.php
@@ -170,6 +170,15 @@ public function testComplex1(): void
             EOF, $fx->jsRender());
     }
 
+    public function testFunctionEmpty(): void
+    {
+        $js = new JsFunction([], []);
+        self::assertSame('function () {}', $js->jsRender());
+
+        $js = new JsFunction([], new JsBlock());
+        self::assertSame('function () {}', $js->jsRender());
+    }
+
     public function testTagNotDefinedRenderException(): void
     {
         $js = new JsExpression('[foo]', ['foo']);