Merge pull request #22 from ishanvyas22/add-inertia-vue-scaffoling

[Cake4] Add inertia-vue scaffolding

Author: ishanvyas22

README.md

@@ -25,7 +25,7 @@ This branch works with **CakePHP 4.0+**, see [version map](#version-map) for mor
     ```bash
     bin/cake asset_mix generate
     ```
-    **Note:** Above command will generate scaffolding for vue, but you can generate [Bootstrap/jQuery](#generate-basic-bootstrapjquery-scaffolding), or [React](#generate-react-scaffolding) scaffolding too.
+    **Note:** Above command will generate scaffolding for vue, but you can generate [Bootstrap/jQuery](#generate-basic-bootstrapjquery-scaffolding), [React](#generate-react-scaffolding) or [Inertia](#generate-scaffolding-for-inertiajs) scaffolding too.
 4. Install frontend dependencies
     - Using [npm](https://www.npmjs.com/):
     ```bash
@@ -139,6 +139,12 @@ bin/cake asset_mix generate bootstrap
 bin/cake asset_mix generate react
 ```
 
+#### Generate scaffolding for [Inertia.js](https://inertiajs.com/):
+
+```bash
+bin/cake asset_mix generate inertia-vue
+```
+
 #### Generate React scaffolding inside `resources` directory:
 
 ```bash

src/Command/AssetMixCommand.php

@@ -5,8 +5,8 @@
 
 use AssetMix\StubsPathTrait;
 use AssetMix\Utility\FileUtility;
+use Cake\Command\Command;
 use Cake\Console\Arguments;
-use Cake\Console\Command;
 use Cake\Console\ConsoleIo;
 use Cake\Console\ConsoleOptionParser;
 use Exception;
@@ -50,8 +50,8 @@ protected function buildOptionParser(ConsoleOptionParser $parser): ConsoleOption
         $parser
             ->setDescription('Auto generate configuration files, assets directory')
             ->addArgument('preset', [
-                'help' => __('The preset/scaffolding type (bootstrap, vue, react), default is vue.'),
-                'choices' => ['bootstrap', 'vue', 'react'],
+                'help' => __('The preset/scaffolding type (bootstrap, vue, react, inertia-vue), default is vue.'),
+                'choices' => ['bootstrap', 'vue', 'react', 'inertia-vue'],
             ])
             ->addOption('dir', [
                 'short' => 'd',
@@ -115,7 +115,7 @@ private function writePackageJsonFile($packages, $to)
         $packageConfigKey = 'devDependencies';
         $updatePackagesMethodName = sprintf(
             'update%sPackagesArray',
-            ucwords($this->preset)
+            ucwords(str_replace('-', '', $this->preset))
         );
 
         $packages[$packageConfigKey] = $this->{$updatePackagesMethodName}($packages[$packageConfigKey]);
@@ -215,7 +215,7 @@ private function getPackageJsonPath()
 
         $getPackgeJsonPathMethodName = sprintf(
             'get%sPackageJsonPath',
-            ucwords($this->preset)
+            ucwords(str_replace('-', '', $this->preset))
         );
 
         return $this->{$getPackgeJsonPathMethodName}();
@@ -234,7 +234,7 @@ private function getPackageJsonFileContentsAsArray()
 
         $getPackgeJsonPathMethodName = sprintf(
             'get%sPackageJsonPath',
-            ucwords($this->preset)
+            ucwords(str_replace('-', '', $this->preset))
         );
         $path = $this->{$getPackgeJsonPathMethodName}();
 
@@ -258,7 +258,7 @@ private function getWebpackMixJsPath()
 
         $webpackMixJsPathMethodName = sprintf(
             'get%sWebpackMixJsPath',
-            ucwords($this->preset)
+            ucwords(str_replace('-', '', $this->preset))
         );
 
         return $this->{$webpackMixJsPathMethodName}();
@@ -277,7 +277,7 @@ private function getAssetsDirPaths()
 
         $assetsDirPathMethodName = sprintf(
             'get%sAssetsDirPaths',
-            ucwords($this->preset)
+            ucwords(str_replace('-', '', $this->preset))
         );
 
         return $this->{$assetsDirPathMethodName}();
@@ -339,4 +339,25 @@ private function updateReactPackagesArray($packages)
             'popper.js' => '^1.12',
         ] + $packages;
     }
+
+    /**
+     * Update packages array for inertia-vue.
+     *
+     * @param  array<string> $packages Existing packages array to update.
+     * @return array<string>
+     */
+    private function updateInertiavuePackagesArray($packages)
+    {
+        return [
+            '@fullhuman/postcss-purgecss' => '^1.3.0',
+            '@inertiajs/inertia' => '^0.1.7',
+            '@inertiajs/inertia-vue' => '^0.1.2',
+            'popper.js' => '^1.16.0',
+            'portal-vue' => '^1.5.1',
+            'vue' => '^2.6.11',
+            'vue-meta' => '^2.3.1',
+            'vue-template-compiler' => '^2.6.11',
+            'bootstrap' => '^4.0.0',
+        ] + $packages;
+    }
 }

src/StubsPathTrait.php

@@ -47,6 +47,16 @@ public function getBaseReactStubsPath(): string
         return ASSET_MIX_ROOT . DS . 'stubs' . DS . 'react' . DS;
     }
 
+    /**
+     * Returns base directory path of `inertia-vue` stubs path.
+     *
+     * @return string
+     */
+    public function getBaseInertiaVueStubsPath(): string
+    {
+        return ASSET_MIX_ROOT . DS . 'stubs' . DS . 'inertia-vue' . DS;
+    }
+
     /**
      * Returns `package.json` file paths for vue.
      *
@@ -92,6 +102,21 @@ public function getReactPackageJsonPath(): array
         ];
     }
 
+    /**
+     * Returns `package.json` file paths for react.
+     *
+     * @return array<string>
+     */
+    public function getInertiaVuePackageJsonPath(): array
+    {
+        $packageJsonPath = $this->getBaseCommonStubsPath() . 'package.json';
+
+        return [
+            'from' => $packageJsonPath,
+            'to' => ROOT . DS . basename($packageJsonPath),
+        ];
+    }
+
     /**
      * Returns `webpack.mix.js` file path for vue.
      *
@@ -137,6 +162,21 @@ public function getReactWebpackMixJsPath(): array
         ];
     }
 
+    /**
+     * Returns `webpack.mix.js` file path for react.
+     *
+     * @return array<string>
+     */
+    public function getInertiaVueWebpackMixJsPath(): array
+    {
+        $webpackConfigPath = $this->getBaseInertiaVueStubsPath() . 'webpack.mix.js';
+
+        return [
+            'from' => $webpackConfigPath,
+            'to' => basename($webpackConfigPath),
+        ];
+    }
+
     /**
      * Returns paths of `assets` directory files for vue.
      *
@@ -163,6 +203,31 @@ public function getVueAssetsDirPaths($dirname = null): array
         ];
     }
 
+    /**
+     * Returns paths of `assets` directory files for inertia-vue.
+     *
+     * @param string|null $dirname Custom directory name.
+     * @return array<string>
+     */
+    public function getInertiaVueAssetsDirPaths($dirname = null): array
+    {
+        if ($dirname === null) {
+            $dirname = AssetMixCommand::ASSETS_DIR_NAME;
+        }
+
+        $assetsDirPath = $this->getBaseInertiaVueStubsPath() . $dirname;
+
+        return [
+            'from_assets' => $assetsDirPath,
+            'to_assets' => basename($assetsDirPath),
+            'to_assets_css' => basename($assetsDirPath) . DS . 'css',
+            'to_assets_js' => basename($assetsDirPath) . DS . 'js',
+            'to_assets_js_app' => basename($assetsDirPath) . DS . 'js' . DS . 'app.js',
+            'to_assets_sass' => basename($assetsDirPath) . DS . 'sass',
+            'to_assets_sass_app' => basename($assetsDirPath) . DS . 'sass' . DS . 'app.scss',
+        ];
+    }
+
     /**
      * Returns paths of `assets` directory files for bootstrap.
      *

stubs/inertia-vue/assets/css/empty

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Hello world!
+    </div>
+</template>
+
+<script>
+export default {
+    mounted() {
+        console.log('Component mounted.');
+    }
+}
+</script>

stubs/inertia-vue/assets/js/Pages/AppGreet.vue

@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import VueMeta from 'vue-meta';
+import PortalVue from 'portal-vue';
+import { InertiaApp } from '@inertiajs/inertia-vue';
+
+Vue.config.productionTip = false;
+
+Vue.use(InertiaApp);
+Vue.use(PortalVue);
+Vue.use(VueMeta);
+
+let app = document.getElementById('app');
+
+new Vue({
+    metaInfo: {
+        titleTemplate: (title) => title ? `${title} - AppName` : 'AppName'
+    },
+    render: h => h(InertiaApp, {
+        props: {
+            initialPage: JSON.parse(app.dataset.page),
+            resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
+        },
+    }),
+}).$mount(app);

stubs/inertia-vue/assets/js/app.js

@@ -0,0 +1 @@
+$primary: #f8fafc;

stubs/inertia-vue/assets/sass/_variables.scss

@@ -0,0 +1,12 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
+
+.app {
+    background: $primary;
+}

stubs/inertia-vue/assets/sass/app.scss

@@ -0,0 +1,19 @@
+const mix = require('laravel-mix');
+const path = require('path');
+
+mix.setPublicPath('./webroot')
+    .js('assets/js/app.js', 'webroot/js')
+    .sass('assets/sass/app.scss', 'webroot/css')
+    .webpackConfig({
+        output: {
+            chunkFilename: 'js/[name].js?id=[chunkhash]'
+        },
+        resolve: {
+            alias: {
+                vue$: 'vue/dist/vue.runtime.esm.js',
+                '@': path.resolve('assets/js'),
+            },
+        },
+    })
+    .version()
+    .sourceMaps();

stubs/inertia-vue/webpack.mix.js

@@ -5,7 +5,7 @@
 
 use AssetMix\StubsPathTrait;
 use AssetMix\Utility\FileUtility;
-use Cake\Console\Command;
+use Cake\Command\Command;
 use Cake\TestSuite\ConsoleIntegrationTestTrait;
 use Cake\TestSuite\TestCase;
 
@@ -42,7 +42,8 @@ public function testAssetMixGenerateCommandReturnsSuccessCode()
 
         $this->assertExitCode(Command::CODE_SUCCESS);
         $this->assertOutputContains('Auto generate configuration files, assets directory');
-        $this->assertOutputContains('The preset/scaffolding type (bootstrap, vue, react), default');
+        $this->assertOutputContains('The preset/scaffolding type (bootstrap, vue, react');
+        $this->assertOutputContains('choices: bootstrap|vue|react|inertia-vue');
     }
 
     public function testGenerateCommandCreatesPackageJsonFileAtProjectRoot()
@@ -179,6 +180,42 @@ public function testGenerateCommandCreatesReactScaffolding()
         $this->assertStringContainsString(".react('assets/js/app.js', 'webroot/js')", $webpackMixJsContents);
     }
 
+    public function testGenerateCommandCreatesInertiaVueScaffolding()
+    {
+        $directoryPaths = $this->getInertiaVueAssetsDirPaths();
+        $packagePaths = $this->getInertiaVuePackageJsonPath();
+
+        $this->exec('asset_mix generate inertia-vue');
+
+        $webpackMixJsContents = file_get_contents($this->getInertiaVueWebpackMixJsPath()['to']);
+        $packageJsonContents = file_get_contents($packagePaths['to']);
+
+        $this->commonDirectoryExistsAssertions($directoryPaths);
+        $this->assertStringContainsString(
+            '"@inertiajs/inertia": "',
+            $packageJsonContents
+        );
+        $this->assertStringContainsString(
+            '"@inertiajs/inertia-vue": "',
+            $packageJsonContents
+        );
+        $this->assertStringContainsString(
+            '"vue": "',
+            $packageJsonContents
+        );
+        $this->assertStringContainsString(
+            '"vue-meta": "',
+            $packageJsonContents
+        );
+        $this->assertStringContainsString(
+            "import { InertiaApp } from '@inertiajs/inertia-vue'",
+            file_get_contents($directoryPaths['to_assets_js_app'])
+        );
+        $this->assertStringContainsString(".setPublicPath('./webroot')", $webpackMixJsContents);
+        $this->assertStringContainsString("vue$: 'vue/dist/vue.runtime.esm.js", $webpackMixJsContents);
+        $this->assertStringContainsString("'@': path.resolve('assets/js'),", $webpackMixJsContents);
+    }
+
     private function commonDirectoryExistsAssertions($paths)
     {
         $this->assertDirectoryExists($paths['to_assets']);