Add dev modes to twill:build: hot and watch

This also make previous changes more compatible with existing codebase as it keeps the current public path where Twill assets are being served (assets/admin)

Also make everything configurable:
- manifest_file, which defaults to twill-manifest.json
- public_directory, which defaults to assets/admin and can be controlled through the TWILL_ASSETS_DIR environment variable
- dev_mode, which defaults to false
- dev_mode_url, which defaults to http://localhost:8080 and can be controlled through TWILL_DEV_MODE_URL environment variable

One more thing... this introduce a way to override Vue components from the host app, in a path controlled by twill.custom_components_resource_path.

.gitignore

@@ -5,6 +5,8 @@ vendor/
 /node_modules
 assets/dist/*
 frontend/js/components/blocks/customs/*
+frontend/js/components/customs/*
+!frontend/js/components/customs/.keep
 .DS_Store
 public/
 tests/coverage

config/twill.php

@@ -143,8 +143,12 @@
     |--------------------------------------------------------------------------
     |
      */
-    'dev_mode' => false,
     'js_namespace' => 'TWILL',
+    'dev_mode' => false,
+    'dev_mode_url' => env('TWILL_DEV_MODE_URL', 'http://localhost:8080'),
+    'public_directory' => env('TWILL_ASSETS_DIR', 'assets/admin'),
+    'manifest_file' => 'twill-manifest.json',
     'vendor_path' => 'vendor/area17/twill',
-    'manifest_path' => public_path('twill/twill-manifest.json'),
+    'custom_components_resource_path' => 'assets/js/components',
+
 ];

dist/assets/admin/twill-manifest.json

@@ -0,0 +1,25 @@
+{
+  "Inter-Italic.woff": "/assets/admin/fonts/Inter-Italic.35cf8109.woff",
+  "Inter-Italic.woff2": "/assets/admin/fonts/Inter-Italic.381444ec.woff2",
+  "Inter-Medium.woff": "/assets/admin/fonts/Inter-Medium.c09fb389.woff",
+  "Inter-Medium.woff2": "/assets/admin/fonts/Inter-Medium.2e5e0884.woff2",
+  "Inter-MediumItalic.woff": "/assets/admin/fonts/Inter-MediumItalic.ad6e093c.woff",
+  "Inter-MediumItalic.woff2": "/assets/admin/fonts/Inter-MediumItalic.7a7fd735.woff2",
+  "Inter-Regular.woff": "/assets/admin/fonts/Inter-Regular.aebfbb3c.woff",
+  "Inter-Regular.woff2": "/assets/admin/fonts/Inter-Regular.bffaed79.woff2",
+  "chunk-common.css": "/assets/admin/css/chunk-common.84bcfc65.css",
+  "chunk-common.js": "/assets/admin/js/chunk-common.71abfb91.js",
+  "chunk-vendors.css": "/assets/admin/css/chunk-vendors.e0f3ef32.css",
+  "chunk-vendors.js": "/assets/admin/js/chunk-vendors.3690f3f7.js",
+  "icons-files.svg": "/assets/admin/icons/icons-files.3cdbddfb2725088d.svg",
+  "icons.svg": "/assets/admin/icons/icons.8af916e594785b3d.svg",
+  "main-buckets.css": "/assets/admin/css/main-buckets.93bda572.css",
+  "main-buckets.js": "/assets/admin/js/main-buckets.93fafbc0.js",
+  "main-dashboard.css": "/assets/admin/css/main-dashboard.9bb3550f.css",
+  "main-dashboard.js": "/assets/admin/js/main-dashboard.1f491007.js",
+  "main-form.css": "/assets/admin/css/main-form.995b18db.css",
+  "main-form.js": "/assets/admin/js/main-form.5d557b15.js",
+  "main-free.js": "/assets/admin/js/main-free.fb8a4944.js",
+  "main-listing.css": "/assets/admin/css/main-listing.58bc70c8.css",
+  "main-listing.js": "/assets/admin/js/main-listing.298e332d.js"
+}

frontend/js/main-form.js

@@ -72,6 +72,16 @@ store.registerModule('repeaters', repeaters)
 store.registerModule('parents', parents)
 store.registerModule('attributes', attributes)
 
+// Form components
+Vue.component('a17-fieldset', a17Fieldset)
+Vue.component('a17-publisher', a17Publisher)
+Vue.component('a17-title-editor', a17TitleEditor)
+Vue.component('a17-content', a17Content)
+Vue.component('a17-page-nav', a17PageNav)
+Vue.component('a17-langswitcher', a17Langswitcher)
+Vue.component('a17-sticky-nav', a17StickyNav)
+Vue.component('a17-spinner', a17Spinner)
+
 // Browser
 Vue.component('a17-repeater', a17Repeater)
 Vue.component('a17-browser', a17Browser)
@@ -111,21 +121,18 @@ if (typeof window[process.env.VUE_APP_NAME].TWILL_BLOCKS_COMPONENTS !== 'undefin
   })
 }
 
+// Custom form components
+const importedComponents = require.context('@/components/customs/', true, /\.(js|vue)$/i)
+importedComponents.keys().map(block => {
+  const blockName = block.match(/\w+/)[0].replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase()
+  return Vue.component('a17-' + blockName, importedComponents(block).default)
+})
+
 /* eslint-disable no-new */
 /* eslint no-unused-vars: "off" */
 window[process.env.VUE_APP_NAME].vm = new Vue({
   store, // inject store to all children
   el: '#app',
-  components: {
-    'a17-spinner': a17Spinner,
-    'a17-sticky-nav': a17StickyNav,
-    'a17-title-editor': a17TitleEditor,
-    'a17-langswitcher': a17Langswitcher,
-    'a17-fieldset': a17Fieldset,
-    'a17-content': a17Content,
-    'a17-publisher': a17Publisher,
-    'a17-page-nav': a17PageNav
-  },
   mixins: [formatPermalink, editorMixin],
   data: function () {
     return {

frontend/js/main.js

@@ -23,5 +23,6 @@ window[process.env.VUE_APP_NAME].vheader = new Vue({ el: '#headerUser' })
 /* eslint-disable no-new */
 /* eslint no-unused-vars: "off" */
 window[process.env.VUE_APP_NAME].vsearch = search
+/* eslint-disable no-console */
 console.log('\x1b[32m', `Made with ${process.env.VUE_APP_NAME} - v${window[process.env.VUE_APP_NAME].version}`)
 export default A17Init

package.json

@@ -3,10 +3,10 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
+    "watch": "vue-cli-service build --watch",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint frontend",
-    "dist": "npm run build && cp -R public/ dist/",
-    "production": "npm run build"
+    "prod": "npm run build"
   },
   "dependencies": {
     "axios": "0.19.2",

src/Commands/Build.php

@@ -13,14 +13,14 @@ class Build extends Command
      *
      * @var string
      */
-    protected $signature = 'twill:build';
+    protected $signature = 'twill:build {--noInstall} {--hot} {--watch}';
 
     /**
      * The console command description.
      *
      * @var string
      */
-    protected $description = "Build Twill assets";
+    protected $description = "Build Twill assets with custom blocks";
 
     /**
      * @var Filesystem
@@ -44,54 +44,70 @@ public function __construct(Filesystem $filesystem)
      */
     public function handle()
     {
-        $progressBar = $this->output->createProgressBar(4);
-        $progressBar->setFormat("%current%/%max% [%bar%] %percent:3s%% %message%");
+        $progressBar = $this->output->createProgressBar(5);
+        $progressBar->setFormat("%current%/%max% [%bar%] %message%");
+
+        $npmInstall = !$this->option('noInstall');
+
+        $progressBar->setMessage(($npmInstall ? "Installing" : "Reusing") . " npm dependencies...\n\n");
 
-        $progressBar->setMessage("Installing npm dependencies...\n\n");
         $progressBar->start();
 
-        $this->npmInstall();
+        if ($npmInstall) {
+            $this->runProcessInTwill(['npm', 'ci']);
+        } else {
+            sleep(1);
+        }
 
         $this->info('');
-        $progressBar->setMessage("Copying custom blocks...");
+        $progressBar->setMessage("Copying custom blocks...\n\n");
         $progressBar->advance();
 
         $this->copyBlocks();
+        sleep(1);
 
         $this->info('');
-        $progressBar->setMessage("Building assets (be patient...)\n\n");
+        $progressBar->setMessage("Copying custom components...\n\n");
         $progressBar->advance();
 
-        $this->npmBuild();
+        $this->copyComponents();
+        sleep(1);
 
         $this->info('');
-        $progressBar->setMessage("Publishing assets...");
+        $progressBar->setMessage("Building assets...\n\n");
         $progressBar->advance();
-        $this->call('twill:update');
 
-        $this->info('');
-        $progressBar->setMessage("Done.");
-        $progressBar->finish();
+        if ($this->option('hot')) {
+            $this->runProcessInTwill(['npm', 'run', 'serve'], true);
+        } elseif ($this->option('watch')) {
+            $this->runProcessInTwill(['npm', 'run', 'watch'], true);
+        } else {
+            $this->runProcessInTwill(['npm', 'run', 'build']);
+
+            $this->info('');
+            $progressBar->setMessage("Publishing assets...\n\n");
+            $progressBar->advance();
+            $this->call('twill:update');
+
+            $this->info('');
+            $progressBar->setMessage("Done.");
+            $progressBar->finish();
+        }
     }
 
     /**
      * @return void
      */
-    private function npmInstall()
+    private function runProcessInTwill(array $command, $disableTimeout = false)
     {
-        $npmInstallProcess = new Process(['npm', 'ci'], base_path(config('twill.vendor_path')));
-        $npmInstallProcess->setTty(Process::isTtySupported());
-        $npmInstallProcess->mustRun();
-    }
+        $process = new Process($command, base_path(config('twill.vendor_path')));
+        $process->setTty(Process::isTtySupported());
 
-    /**
-     * @return void
-     */
-    private function npmBuild()
-    {
-        $npmBuildProcess = new Process(['npm', 'run', 'build'], base_path(config('twill.vendor_path')));
-        $npmBuildProcess->setTty(Process::isTtySupported());
-        $npmBuildProcess->mustRun();
+        if ($disableTimeout) {
+            $process->setTimeout(null);
+        }
+
+        $process->mustRun();
     }
 
     /**
@@ -114,4 +130,25 @@ private function copyBlocks()
 
         $this->filesystem->copyDirectory($localCustomBlocksPath, $twillCustomBlocksPath);
     }
+
+    /**
+     * @return void
+     */
+    private function copyComponents()
+    {
+        $localCustomComponentsPath = resource_path(config('twill.custom_components_resource_path', 'assets/js/components'));
+        $twillCustomComponentsPath = base_path(config('twill.vendor_path')) . '/frontend/js/components/customs';
+
+        if (!$this->filesystem->exists($twillCustomComponentsPath)) {
+            $this->filesystem->makeDirectory($twillCustomComponentsPath);
+        }
+
+        $this->filesystem->cleanDirectory($twillCustomComponentsPath);
+
+        if (!$this->filesystem->exists($localCustomComponentsPath)) {
+            $this->filesystem->makeDirectory($localCustomComponentsPath);
+        }
+
+        $this->filesystem->copyDirectory($localCustomComponentsPath, $twillCustomComponentsPath);
+    }
 }

src/Commands/Update.php

@@ -18,7 +18,7 @@ class Update extends Command
     public function handle()
     {
         $this->publishAssets();
-        $this->info('You should now also run php artisan migrate to execute any new Twill provided migration.');
+        $this->call('cache:clear');
     }
 
     /**

src/Helpers/frontend_helpers.php

@@ -33,25 +33,42 @@ function revAsset($file)
      * @param string $file
      * @return string
      */
-    function twillAsset($file, $servedByDevServer = true)
+    function twillAsset($file)
     {
-        if ($servedByDevServer && app()->environment('local', 'development') && config('twill.dev_mode', false)) {
-            return config('twill.dev_mode_url', 'http://localhost:8080') . '/' . $file;
+        if (app()->environment('local', 'development') && config('twill.dev_mode', false)) {
+            $devServerUrl = config('twill.dev_mode_url', 'http://localhost:8080');
+
+            try {
+                $manifest = json_decode(file_get_contents(
+                    $devServerUrl
+                    . '/'
+                    . config('twill.manifest_file', 'twill-manifest.json')
+                ), true);
+
+            } catch (\Exception $e) {
+                throw new \Exception('Twill dev assets manifest is missing. Make sure you are running the npm run serve command inside Twill.');
+            }
+
+            return $devServerUrl . ($manifest[$file] ?? ('/' . $file));
         }
 
         try {
             $manifest = Cache::rememberForever('twill-manifest', function () {
-                return json_decode(file_get_contents(config('twill.manifest_path')), true);
+                return json_decode(file_get_contents(
+                    public_path(config('twill.public_directory', 'twill'))
+                    . '/'
+                    . config('twill.manifest_file', 'twill-manifest.json')
+                ), true);
             });
-
-            if (isset($manifest[$file])) {
-                return $manifest[$file];
-            }
         } catch (\Exception $e) {
-            return '/' . $file;
+            throw new \Exception('Twill assets manifest is missing. Make sure you published/updated Twill assets using the "php artisan twill:update" command.');
+        }
+
+        if (isset($manifest[$file])) {
+            return $manifest[$file];
         }
 
-        return '/' . $file;
+        return '/' . config('twill.public_directory', 'twill') . '/' . $file;
     }
 }
 

views/layouts/dashboard.blade.php

@@ -10,7 +10,9 @@
     @if(app()->isProduction())
         <link href="{{ twillAsset('main-dashboard.css') }}" rel="preload" as="style" crossorigin/>
     @endif
-    <link href="{{ twillAsset('main-dashboard.css') }}" rel="stylesheet" crossorigin/>
+    @unless(config('twill.dev_mode', false))
+        <link href="{{ twillAsset('main-dashboard.css') }}" rel="stylesheet" crossorigin/>
+    @endunless
 @endpush
 
 @push('extra_js_head')

views/layouts/form.blade.php

@@ -6,7 +6,10 @@
     @if(app()->isProduction())
         <link href="{{ twillAsset('main-form.css') }}" rel="preload" as="style" crossorigin/>
     @endif
-    <link href="{{ twillAsset('main-form.css') }}" rel="stylesheet" crossorigin/>
+
+    @unless(config('twill.dev_mode', false))
+        <link href="{{ twillAsset('main-form.css') }}" rel="stylesheet" crossorigin/>
+    @endunless
 @endpush
 
 @push('extra_js_head')

views/layouts/free.blade.php

@@ -6,7 +6,9 @@
     @if(app()->isProduction())
         <link href="{{ twillAsset('main-free.css')}}" rel="preload" as="style" crossorigin/>
     @endif
-    <link href="{{ twillAsset('main-free.css')}}" rel="stylesheet" crossorigin/>
+    @unless(config('twill.dev_mode', false))
+        <link href="{{ twillAsset('main-free.css') }}" rel="stylesheet" crossorigin/>
+    @endunless
 @endpush
 
 @push('extra_js_head')