#3425 abstract out and test the client assets registration

README.md

@@ -85,6 +85,7 @@ This is the old stuff, built with grunt.
 * `yarn build:clients` - Build other JavaScript and CSS for production.
 * `yarn start` - Start dev server for clients that are not blocks and run watcher.
 * `yarn start:blocks` - Start dev server for blocks and run watcher.
+* `yarn start:clients` - Start dev server for other clients and run watcher.
 * `yarn test:once` - Run JavaScript unit tests once
 * `yarn test:e2e` - Start Cypress e2e test runner.
 * `yarn test:e2e:ci` - Trigger Cypress.io test record.

cf2/Asset/Hooks.php

@@ -0,0 +1,107 @@
+<?php
+
+
+namespace calderawp\calderaforms\cf2\Asset;
+
+
+use calderawp\calderaforms\cf2\CalderaFormsV2Contract;
+
+class Hooks
+{
+
+    /**
+     * @var Register[]
+     */
+    protected $handlers = [];
+
+    /**
+     * @var array
+     */
+    protected $handles;
+    /**
+     * @var array
+     */
+    protected $manifest;
+
+    /**
+     * @var CalderaFormsV2Contract
+     */
+    protected $container;
+
+    public function __construct(array $handles, CalderaFormsV2Contract $container, array $manifest = [])
+    {
+        $this->handles = $handles;
+        $this->manifest = $manifest;
+        $this->container = $container;
+
+    }
+
+    public function subscribe()
+    {
+
+        $this->maybeUseManifest();
+        add_action('wp_register_scripts', [$this, 'registerAssets']);
+        add_action('admin_enqueue_scripts', [$this, 'enqueueAdminAssets']);
+    }
+
+    /**
+     * If a webpack asset-manifest.json was used, substitute URLs from that array
+     */
+    protected function maybeUseManifest()
+    {
+        if (!empty($this->manifest) && !empty($this->handles)) {
+            foreach ($this->handles as $handle) {
+                $assetFilePath = isset($this->manifest["{$handle}.json"]) ? $this->manifest["{$handle}.json"] : null;
+                if (!is_null($assetFilePath)) {
+                    $this->getHandler($handle)->setAssetsFilePath($assetFilePath);
+                }
+                $scriptsUrl = isset($this->manifest["{$handle}.js"]) ? $this->manifest["{$handle}.js"] : null;
+                if (!is_null($scriptsUrl)) {
+                    $this->getHandler($handle)->setScriptUrl($scriptsUrl);
+
+                }
+
+
+            }
+
+        }
+    }
+
+    /**
+     * @param $handle
+     * @return Register|null
+     */
+    public function getHandler($handle)
+    {
+        if (in_array($handle, $this->handles)) {
+            if (!array_key_exists($handle, $this->handlers)) {
+                $this->handlers[$handle] = new Register(
+                    $handle,
+                    $this->container->getCoreUrl(),
+                    $this->container->getCoreDir(),
+                    []
+                );
+            }
+            return $this->handlers[$handle];
+        }
+    }
+
+    /**
+     * Register all assets
+     */
+    public function registerAssets()
+    {
+        $this->getHandler('form-builder')->register();
+    }
+
+    public function enqueueAdminAssets($hook)
+    {
+        if ('toplevel_page_caldera-forms' !== $hook) {
+            return;
+        }
+
+        if (\Caldera_Forms_Admin::is_edit()) {
+            $this->getHandler('form-builder')->enqueue();
+        }
+    }
+}

cf2/Asset/Register.php

@@ -14,44 +14,95 @@ class Register
     /**
      * @var array
      */
-    protected  $data;
+    protected $data;
 
-    public function __construct( $handle,array $data = [])
+    /**
+     * @var string
+     */
+    protected $scriptUrl;
+
+    /**
+     * @var string
+     */
+    protected $assetsFilePath;
+
+    protected $registered;
+
+    /**
+     * Register constructor.
+     * @param $handle
+     * @param $coreUrl
+     * @param $corePath
+     * @param array $data
+     */
+    public function __construct($handle, $coreUrl, $corePath, array $data = [])
     {
         $this->handle = $handle;
         $this->data = $data;
+        $this->registered = false;
+        $this->setScriptUrl($coreUrl . '/clients/' . $this->handle . '/build/index.min.js');
+        $this->setAssetsFilePath($corePath . '/clients/' . $this->handle . '/build/index.min.asset.json');
+    }
+
+
+    public function getScriptUrl(){
+        return $this->scriptUrl;
     }
 
-    protected function  getClientsPath()
+    public function getAssetFilePath(){
+        return $this->assetsFilePath;
+    }
+    public function setScriptUrl($scriptUrl)
     {
-        return CFCORE_PATH . '/clients/';
+        $this->scriptUrl = $scriptUrl;
+        return $this;
     }
 
-    protected function getClientsUrl(){
-        return CFCORE_URL . '/clients/';
+    public function setAssetsFilePath($assetsFilePath){
+        $this->assetsFilePath = $assetsFilePath;
+        return $this;
     }
 
     protected function getLocalizeData()
     {
         return $this->data ? $this->data : [];
     }
-    public function register(){
-        $assetFile = file_get_contents($this->getClientsPath() . $this->handle . '/build/index.min.asset.json');
-        $assetFile = (array)json_decode($assetFile,true);
+
+    /**
+     * @return $this
+     */
+    public function register()
+    {
+
+        $assetFile = file_get_contents($this->getAssetFilePath() );
+        $assetFile = (array)json_decode($assetFile, true);
         wp_register_script(
             $this->handle,
-            $this->getClientsUrl() . $this->handle . '/build/index.min.js',
+            $this->getScriptUrl(),
             $assetFile['dependencies'],
             $assetFile['version']
         );
 
-        wp_localize_script($this->handle, strtoupper('CF_' . str_replace('-', '_',$this->handle)), array_merge($this->getLocalizeData(),[
-            'hi' => 'roy'
-        ]));
+        wp_localize_script($this->handle, strtoupper('CF_' . str_replace('-', '_', $this->handle)),
+            array_merge($this->getLocalizeData(), [
+                'hi' => 'roy'
+            ]));
+        $this->registered = true;
+        return $this;
 
     }
 
-    public function enqueue(){
+    /**
+     * @return bool
+     */
+    public function isRegistered()
+    {
+        return $this->registered;
+    }
+
+    public function enqueue()
+    {
         wp_enqueue_script($this->handle);
+        return $this;
     }
 }

cf2/Hooks.php

@@ -32,33 +32,14 @@ public function subscribe()
 			$this->container->getCoreDir()
 		);
         add_filter('caldera_forms_get_field_types', [$register, 'filter' ], 2 );
-        add_action('wp_register_scripts', [$this,'registerAssets']);
-        add_action('admin_enqueue_scripts', [$this,'enqueueAdminAssets']);
+        (new \calderawp\calderaforms\cf2\Asset\Hooks(
+            ['form-builder'],
+            file_exists( CFCORE_PATH . '/dist/asset-manifest.json') ?
+                (array) json_decode( file_get_contents(CFCORE_PATH . '/dist/asset-manifest.json'),true)
+                : []
+        ))->subscribe();
     }
 
-    /**
-     * @var Asset\Register[]
-     */
-    protected $assets = [];
-    public function registerAssets(){
-        if( empty( $this->assets ) ){
-            $this->assets['form-builder'] = new Asset\Register('form-builder', []);
-
-        }
-        $this->assets['form-builder']->register();
-    }
-
-    public function enqueueAdminAssets($hook){
-        if( 'toplevel_page_caldera-forms' !== $hook ){
-            return;
-        }
-        if( empty( $this->assets ) ){
-            $this->registerAssets();
-        }
-        if( \Caldera_Forms_Admin::is_edit()) {
-            $this->assets['form-builder']->enqueue();
-        }
-    }
 
     /**
      * @return FileFieldHandler

package.json

@@ -20,7 +20,8 @@
     "build": "yarn build:legacy && yarn build:new",
     "build:legacy": "grunt",
     "build:new": "yarn build:clients:pre && yarn build:clients && yarn build:blocks",
-    "start": "yarn build:clients:pre && cross-env BABEL_ENV=development NODE_ENV=development webpack-dev-server --config webpack.clients.js",
+    "start": "yarn build:clients:pre && yarn start:clients",
+    "start:clients": " cross-env BABEL_ENV=development NODE_ENV=development webpack-dev-server --config webpack.clients.js",
     "start:blocks": "wp-scripts start  --config webpack.blocks.js ",
     "build:blocks": "wp-scripts build  --config webpack.blocks.js ",
     "build:clients": "yarn build:clients:pre && cross-env BABEL_ENV=default NODE_ENV=production webpack --config webpack.clients.js",

tests/Unit/Asset/HooksTest.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace calderawp\calderaforms\Tests\Unit\Asset;
+
+use calderawp\calderaforms\cf2\Asset\Hooks;
+use calderawp\calderaforms\cf2\Asset\Register;
+use calderawp\calderaforms\Tests\Unit\TestCase;
+
+class HooksTest extends TestCase
+{
+
+    /**
+     * @var \calderawp\calderaforms\cf2\CalderaFormsV2
+     */
+    protected $container;
+
+    /** @inheritDoc */
+    public function setUp()
+    {
+        $this->container = $this->getContainer();
+        $this->container->setCoreDir(dirname(__DIR__, 3));
+        parent::setUp();
+    }
+
+    public function testRegisterAssets()
+    {
+        $hooks = new Hooks(['form-builder'], $this->container);
+        \Brain\Monkey\Functions\expect('wp_register_script')->once();
+        \Brain\Monkey\Functions\expect('wp_localize_script')->once();
+        $hooks->registerAssets();
+
+    }
+
+    public function testSubscribe()
+    {
+        $hooks = new Hooks(['form-builder'], $this->container);
+        $hooks->subscribe();
+        $this->assertTrue(has_action('admin_enqueue_scripts'), [$hooks, 'enqueueAdminAssets']);
+        $this->assertTrue(has_action('wp_register_scripts'), [$hooks, 'registerAssets']);
+    }
+
+
+    public function testGetHandler()
+    {
+        $hooks = new Hooks(['form-builder'], $this->container);
+        $this->assertInstanceOf(Register::class, $hooks->getHandler('form-builder'));
+        $this->assertStringEndsWith(
+            '/clients/form-builder/build/index.min.asset.json',
+            $hooks->getHandler('form-builder')->getAssetFilePath()
+        );
+    }
+}