[GeneratorBundle] Add webpack encore option - keep Groundcontrol as d…

…efault
Kunstmaan · Oct 12, 2021 · f7690fe · f7690fe
1 parent a7c101a
commit f7690fe
Show file tree

Hide file tree

Showing 64 changed files with 437 additions and 2,014 deletions.
diff --git a/.github/workflows/ci-frontend.yml b/.github/workflows/ci-frontend.yml
@@ -13,7 +13,7 @@ jobs:
 
             -   uses: actions/setup-node@v2-beta
                 with:
-                    node-version: '12'
+                    node-version: '14'
 
             -   uses: actions/cache@v2
                 with:

diff --git a/groundcontrol/tasks/build-gc-skeleton.js b/groundcontrol/tasks/build-gc-skeleton.js
@@ -56,8 +56,6 @@ export default function createBuildGroundControlSkeletonTask(skeletonPath, names
             fs.writeFileSync(adminJsPath + '/admin-bundle-extra.js', 'console.log(\'Hello world from admin\');\n');
             fs.ensureDirSync(scssPath);
             fs.writeFileSync(scssPath + '/style.scss', 'body { font-size: 20px; }\n');
-            // Style guide
-            fs.copySync(skeletonPath + '/../Resources/ui/styleguide', appPath + '/Resources/ui/styleguide');
             // Index.html
             const html = `
                 <!DOCTYPE html>

diff --git a/src/Kunstmaan/GeneratorBundle/Command/GenerateDefaultSiteCommand.php b/src/Kunstmaan/GeneratorBundle/Command/GenerateDefaultSiteCommand.php
@@ -27,6 +27,11 @@ class GenerateDefaultSiteCommand extends KunstmaanGenerateCommand
      */
     private $demosite;
 
+    /**
+     * @var bool
+     */
+    private $webpackEncore;
+
     /**
      * @see Command
      */
@@ -47,6 +52,7 @@ protected function configure()
             ->addOption('namespace', '', InputOption::VALUE_OPTIONAL, 'The namespace to generate the default website in')
             ->addOption('prefix', '', InputOption::VALUE_OPTIONAL, 'The prefix to be used in the table names of the generated entities')
             ->addOption('demosite', '', InputOption::VALUE_NONE, 'Whether to generate a website with demo contents or a basic website')
+            ->addOption('webpack-encore', '', InputOption::VALUE_NONE, 'Whether to use Webpack Encore or Groundcontrol as FE build tools')
             ->addOption('browsersync', '', InputOption::VALUE_OPTIONAL, 'The URI that will be used for browsersync to connect')
             ->addOption('articleoverviewpageparent', '', InputOption::VALUE_OPTIONAL, 'Shortnames of the pages that can have the article overview page as a child (comma separated)')
             ->setName('kuma:generate:default-site');
@@ -86,12 +92,18 @@ protected function doExecute()
 
         $browserSyncUrl = $this->assistant->getOptionOrDefault('browsersync', null);
 
+        /*
+         * If we need to generate a full site, or only the basic structure
+         */
+        $this->webpackEncore = $this->assistant->getOption('webpack-encore');
+
         // First we generate the layout if it is not yet generated
         $command = $this->getApplication()->find('kuma:generate:layout');
         $arguments = [
             'command' => 'kuma:generate:layout',
             '--namespace' => str_replace('\\', '/', $this->bundle->getNamespace()),
             '--demosite' => $this->demosite,
+            '--webpack-encore' => $this->webpackEncore,
             '--browsersync' => $browserSyncUrl,
             '--subcommand' => true,
         ];

diff --git a/src/Kunstmaan/GeneratorBundle/Command/GenerateLayoutCommand.php b/src/Kunstmaan/GeneratorBundle/Command/GenerateLayoutCommand.php
@@ -36,6 +36,7 @@ protected function configure()
             ->addOption('namespace', '', InputOption::VALUE_OPTIONAL, 'The namespace of the bundle where we need to create the layout in')
             ->addOption('subcommand', '', InputOption::VALUE_OPTIONAL, 'Whether the command is called from an other command or not')
             ->addOption('demosite', '', InputOption::VALUE_NONE, 'Pass this parameter when the demosite styles/javascipt should be generated')
+            ->addOption('webpack-encore', '', InputOption::VALUE_NONE, 'Pass this parameter to use Webpack Encore in favor of Groundcontrol')
             ->addOption('browsersync', '', InputOption::VALUE_OPTIONAL, 'The URI that will be used for browsersync to connect')
             ->setName('kuma:generate:layout');
     }
@@ -62,7 +63,7 @@ protected function doExecute()
         }
 
         $rootDir = $this->getApplication()->getKernel()->getProjectDir() . '/';
-        $this->createGenerator()->generate($this->bundle, $rootDir, $this->assistant->getOption('demosite'), $this->browserSyncUrl);
+        $this->createGenerator()->generate($this->bundle, $rootDir, $this->assistant->getOption('demosite'), $this->browserSyncUrl, $this->assistant->getOption('webpack-encore'));
 
         if (!$this->isSubCommand()) {
             $this->assistant->writeSection('Layout successfully created', 'bg=green;fg=black');

diff --git a/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php b/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php
@@ -55,6 +55,7 @@ protected function configure()
                     [
                         new InputOption('db-installed', '', InputOption::VALUE_NONE, 'Acknowledge that you have setup your database"'),
                         new InputOption('demosite', '', InputOption::VALUE_REQUIRED, 'Do you want to create a "demosite"'),
+                        new InputOption('webpack-encore', '', InputOption::VALUE_REQUIRED, 'Do you want to use Webpack Encore in stead of Groundcontrol'),
                         new InputOption('create-tests', '', InputOption::VALUE_REQUIRED, 'Do you want to create tests for you pages/pageparts'),
                         new InputOption('namespace', '', InputOption::VALUE_OPTIONAL, 'The namespace of the bundle to create (only for SF3)'),
                         new InputOption('dir', '', InputOption::VALUE_OPTIONAL, 'The directory where to create the bundle (only for SF3)'),
@@ -112,6 +113,11 @@ protected function interact(InputInterface $input, OutputInterface $output)
             $input->setOption('demosite', $demoSiteOption === true ? 'Yes' : 'No');
         }
 
+        if (null === $input->getOption('webpack-encore')) {
+            $webpackEncoreOption = $this->assistant->askConfirmation('Do you want to use Webpack Encore in stead of Groundcontrol? (y/n)', 'n');
+            $input->setOption('webpack-encore', $webpackEncoreOption === true ? 'Yes' : 'No');
+        }
+
         if (null === $input->getOption('create-tests')) {
             $createTests = $this->assistant->askConfirmation('Do you want to create tests for you pages/pageparts? (y/n)', 'n', '?', false);
             $input->setOption('create-tests', $createTests === true ? 'Yes' : 'No');
@@ -138,6 +144,10 @@ protected function execute(InputInterface $input, OutputInterface $output)
             $defaultSiteOptions['--demosite'] = true;
         }
 
+        if ($input->getOption('webpack-encore') === 'Yes') {
+            $defaultSiteOptions['--webpack-encore'] = true;
+        }
+
         if (Kernel::VERSION_ID < 40000) {
             $defaultSiteOptions = ['--namespace' => $input->getOption('namespace')];
 
@@ -207,14 +217,14 @@ protected function executeCommand(OutputInterface $output, $command, array $opti
     protected function getKunstmaanLogo()
     {
         return '
-         /$$   /$$                                 /$$                                                  /$$$$$$                         
-        | $$  /$$/                                | $$                                                 /$$__  $$                        
+         /$$   /$$                                 /$$                                                  /$$$$$$
+        | $$  /$$/                                | $$                                                 /$$__  $$
         | $$ /$$/  /$$   /$$ /$$$$$$$   /$$$$$$$ /$$$$$$   /$$$$$$/$$$$   /$$$$$$   /$$$$$$  /$$$$$$$ | $$  \__/ /$$$$$$/$$$$   /$$$$$$$
         | $$$$$/  | $$  | $$| $$__  $$ /$$_____/|_  $$_/  | $$_  $$_  $$ |____  $$ |____  $$| $$__  $$| $$      | $$_  $$_  $$ /$$_____/
-        | $$  $$  | $$  | $$| $$  \ $$|  $$$$$$   | $$    | $$ \ $$ \ $$  /$$$$$$$  /$$$$$$$| $$  \ $$| $$      | $$ \ $$ \ $$|  $$$$$$ 
+        | $$  $$  | $$  | $$| $$  \ $$|  $$$$$$   | $$    | $$ \ $$ \ $$  /$$$$$$$  /$$$$$$$| $$  \ $$| $$      | $$ \ $$ \ $$|  $$$$$$
         | $$\  $$ | $$  | $$| $$  | $$ \____  $$  | $$ /$$| $$ | $$ | $$ /$$__  $$ /$$__  $$| $$  | $$| $$    $$| $$ | $$ | $$ \____  $$
         | $$ \  $$|  $$$$$$/| $$  | $$ /$$$$$$$/  |  $$$$/| $$ | $$ | $$|  $$$$$$$|  $$$$$$$| $$  | $$|  $$$$$$/| $$ | $$ | $$ /$$$$$$$/
-        |__/  \__/ \______/ |__/  |__/|_______/    \___/  |__/ |__/ |__/ \_______/ \_______/|__/  |__/ \______/ |__/ |__/ |__/|_______/ 
+        |__/  \__/ \______/ |__/  |__/|_______/    \___/  |__/ |__/ |__/ \_______/ \_______/|__/  |__/ \______/ |__/ |__/ |__/|_______/
         ';
     }
 

diff --git a/src/Kunstmaan/GeneratorBundle/Generator/DefaultSiteGenerator.php b/src/Kunstmaan/GeneratorBundle/Generator/DefaultSiteGenerator.php
@@ -31,19 +31,25 @@ class DefaultSiteGenerator extends KunstmaanGenerator
      */
     private $demosite;
 
+    /**
+     * @var bool
+     */
+    private $webpackEncore;
+
     /**
      * Generate the website.
      *
      * @param string $prefix
      * @param string $rootDir
      * @param bool   $demosite
      */
-    public function generate(BundleInterface $bundle, $prefix, $rootDir, $demosite = false)
+    public function generate(BundleInterface $bundle, $prefix, $rootDir, $demosite = false, $webpackEncore = false)
     {
         $this->bundle = $bundle;
         $this->prefix = GeneratorUtils::cleanPrefix($prefix);
         $this->rootDir = $rootDir;
         $this->demosite = $demosite;
+        $this->webpackEncore = $webpackEncore;
 
         $parameters = [
             'namespace' => $this->bundle->getNamespace(),
@@ -53,6 +59,7 @@ public function generate(BundleInterface $bundle, $prefix, $rootDir, $demosite =
             'demosite' => $this->demosite,
             'multilanguage' => $this->isMultiLangEnvironment(),
             'isV4' => $this->isSymfony4(),
+            'webpackEncore' => $this->webpackEncore,
         ];
 
         $this->generateControllers($parameters);

diff --git a/src/Kunstmaan/GeneratorBundle/Generator/LayoutGenerator.php b/src/Kunstmaan/GeneratorBundle/Generator/LayoutGenerator.php
@@ -34,22 +34,33 @@ class LayoutGenerator extends KunstmaanGenerator
      */
     private $browserSyncUrl;
 
+    /**
+     * @var bool
+     */
+    private $webpackEncore;
+
     /**
      * Generate the basic layout.
      *
      * @param BundleInterface $bundle  The bundle
      * @param string          $rootDir The root directory of the application
      */
-    public function generate(BundleInterface $bundle, $rootDir, $demosite, $browserSyncUrl)
+    public function generate(BundleInterface $bundle, $rootDir, $demosite, $browserSyncUrl, $webpackEncore)
     {
         $this->bundle = $bundle;
         $this->rootDir = $rootDir;
         $this->demosite = $demosite;
         $this->browserSyncUrl = $browserSyncUrl;
+        $this->webpackEncore = $webpackEncore;
 
         $this->shortBundleName = '@' . str_replace('Bundle', '', $bundle->getName());
 
-        $this->generateGroundcontrolFiles();
+        $this->generateSharedConfigFiles();
+        if ($webpackEncore) {
+            $this->generateWebpackEncoreFiles();
+        } else {
+            $this->generateGroundcontrolFiles();
+        }
         $this->generateAssets();
         $this->generateTemplate();
     }
@@ -68,53 +79,89 @@ private function generateGroundcontrolFiles()
         $this->renderSingleFile(
             $this->skeletonDir . '/groundcontrol/',
             $this->rootDir,
-            '.babelrc',
-            ['bundle' => $this->bundle],
+            'gulpfile.babel.js',
+            ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'isV4' => $this->isSymfony4()],
             true
         );
         $this->renderSingleFile(
             $this->skeletonDir . '/groundcontrol/',
             $this->rootDir,
-            '.eslintrc',
+            'package.json',
             ['bundle' => $this->bundle, 'demosite' => $this->demosite],
             true
         );
+        $this->assistant->writeLine('Generating groundcontrol configuration : <info>OK</info>');
+    }
+
+    /**
+     * Generate the Webpack Encore configuration files.
+     */
+    private function generateWebpackEncoreFiles()
+    {
         $this->renderSingleFile(
-            $this->skeletonDir . '/groundcontrol/',
+            $this->skeletonDir . '/webpack-encore/',
             $this->rootDir,
-            '.nvmrc',
-            ['bundle' => $this->bundle],
+            'package.json',
+            ['bundle' => $this->bundle, 'demosite' => $this->demosite],
             true
         );
         $this->renderSingleFile(
-            $this->skeletonDir . '/groundcontrol/',
+            $this->skeletonDir . '/webpack-encore/',
             $this->rootDir,
-            '.stylelintrc',
-            ['bundle' => $this->bundle],
+            'postcss.config.js',
+            [],
             true
         );
-        $this->renderExecutableFile(
-            $this->skeletonDir . '/groundcontrol/',
+        $this->renderSingleFile(
+            $this->skeletonDir . '/webpack-encore/',
             $this->rootDir,
-            'buildUI.sh',
-            ['bundle' => $this->bundle],
+            'webpack.config.js',
+            ['browserSyncUrl' => $this->browserSyncUrl],
             true
         );
+        $this->assistant->writeLine('Generating webpack encore configuration : <info>OK</info>');
+    }
+
+    /**
+     * Generate shared (groundcontrol & webpack encore) configuration files.
+     */
+    private function generateSharedConfigFiles()
+    {
         $this->renderSingleFile(
-            $this->skeletonDir . '/groundcontrol/',
+            $this->skeletonDir . '/frontend-config/',
             $this->rootDir,
-            'gulpfile.babel.js',
-            ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'isV4' => $this->isSymfony4()],
+            '.babelrc',
+            ['bundle' => $this->bundle],
             true
         );
         $this->renderSingleFile(
-            $this->skeletonDir . '/groundcontrol/',
+            $this->skeletonDir . '/frontend-config/',
             $this->rootDir,
-            'package.json',
+            '.eslintrc',
             ['bundle' => $this->bundle, 'demosite' => $this->demosite],
             true
         );
-        $this->assistant->writeLine('Generating groundcontrol configuration : <info>OK</info>');
+        $this->renderSingleFile(
+            $this->skeletonDir . '/frontend-config/',
+            $this->rootDir,
+            '.nvmrc',
+            ['bundle' => $this->bundle],
+            true
+        );
+        $this->renderSingleFile(
+            $this->skeletonDir . '/frontend-config/',
+            $this->rootDir,
+            '.stylelintrc',
+            ['bundle' => $this->bundle],
+            true
+        );
+        $this->renderExecutableFile(
+            $this->skeletonDir . '/frontend-config/',
+            $this->rootDir,
+            'buildUI.sh',
+            ['bundle' => $this->bundle],
+            true
+        );
     }
 
     /**
@@ -129,13 +176,19 @@ private function generateAssets()
         $this->renderFiles(
             $sourceDir . $relPath . '/js/',
             $this->getAssetsDir($this->bundle) . '/ui/js/',
-            ['bundle' => $this->bundle, 'demosite' => $this->demosite],
+            ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'webpack' => $this->webpackEncore],
             true
         );
         $this->renderFiles(
             $sourceDir . $relPath . '/scss/',
             $this->getAssetsDir($this->bundle) . '/ui/scss/',
-            ['bundle' => $this->bundle, 'demosite' => $this->demosite],
+            ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'webpack' => $this->webpackEncore],
+            true
+        );
+        $this->renderFiles(
+            $sourceDir . '/Resources/admin/',
+            $this->getAssetsDir($this->bundle) . '/admin/',
+            ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'webpack' => $this->webpackEncore],
             true
         );
 
@@ -204,8 +257,16 @@ private function generateAssets()
             $this->removeDirectory($this->getAssetsDir($this->bundle) . '/ui/scss/helpers/mixins/');
         }
 
-        $relPath = '/Resources/admin/';
-        $this->copyFiles($sourceDir . $relPath, $this->getAssetsDir($this->bundle) . '/admin', true);
+        if ($this->webpackEncore) {
+            $this->renderSingleFile(
+                $sourceDir . $relPath . 'js/',
+                $this->getAssetsDir($this->bundle) . '/ui/',
+                'app.js',
+                ['demosite' => $this->demosite, 'webpack' => $this->webpackEncore],
+                true
+            );
+            $this->removeFile($this->getAssetsDir($this->bundle) . '/ui/js/app.js');
+        }
 
         $this->assistant->writeLine('Generating ui assets : <info>OK</info>');
     }
@@ -219,7 +280,13 @@ private function generateTemplate()
         $this->renderFiles(
             $this->skeletonDir . $relPath,
             $this->getTemplateDir($this->bundle),
-            ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'shortBundleName' => $this->shortBundleName, 'isV4' => $this->isSymfony4()],
+            [
+                'bundle' => $this->bundle,
+                'demosite' => $this->demosite,
+                'shortBundleName' => $this->shortBundleName,
+                'isV4' => $this->isSymfony4(),
+                'webpack' => $this->webpackEncore,
+            ],
             true
         );
 
@@ -229,6 +296,12 @@ private function generateTemplate()
             $this->removeFile($this->getTemplateDir($this->bundle) . '/Layout/_demositemessage.html.twig');
         }
 
+        if ($this->webpackEncore) {
+            $this->removeFile($this->getTemplateDir($this->bundle) . '/Layout/_js_footer.html.twig');
+        } else {
+            $this->removeFile($this->getTemplateDir($this->bundle) . '/Layout/_js.html.twig');
+        }
+
         $this->assistant->writeLine('Generating template files : <info>OK</info>');
     }
 }