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

…efault
Kunstmaan · Feb 9, 2022 · dd2fefa · dd2fefa
1 parent 10525cb
commit dd2fefa
Show file tree

Hide file tree

Showing 146 changed files with 493 additions and 3,040 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/gulp-plugins/twig.js b/groundcontrol/gulp-plugins/twig.js
@@ -17,11 +17,10 @@ export default function twig(options) {
 
         try {
             let contents = file.contents.toString();
-
             // Twig.js uses different escaping compared to the PHP version
             // This line was failing the renderering, as we don't put backlashes in the testdata it could be removed
-            contents = contents.replace(/\|replace\(\{\'\\\\\'\:\'\/\'\}\)/gmi, '');
-            
+            contents = contents.replace(/\|replace\(\{\'\\\\\'\:\'(\/|\-)\'\}\)/gmi, '');
+
             const template = Twig.twig({
                 data: contents
             });
@@ -34,4 +33,4 @@ export default function twig(options) {
         }
     });
 
-};
+};
diff --git a/groundcontrol/tasks/build-gc-skeleton.js b/groundcontrol/tasks/build-gc-skeleton.js
@@ -20,12 +20,12 @@ const runChildProcess = (executable, args, cwd, cb) => {
     });
 };
 
-export default function createBuildGroundControlSkeletonTask(skeletonPath, namespace = 'kuma/my-project') {
+export default function createBuildGroundControlSkeletonTask(skeletonPath, namespace = 'kuma-my-project') {
     const distPath = skeletonPath + '/dist';
-    const appPath = distPath + '/src/' + namespace;
-    const jsPath = appPath + '/Resources/ui/js';
-    const scssPath = appPath + '/Resources/ui/scss';
-    const adminJsPath = appPath + '/Resources/admin/js';
+    const appPath = distPath + '/assets';
+    const jsPath = appPath + '/ui/js';
+    const scssPath = appPath + '/ui/scss';
+    const adminJsPath = appPath + '/admin';
 
     return [
         function cleanGroundControlSkeleton() {
@@ -42,7 +42,8 @@ export default function createBuildGroundControlSkeletonTask(skeletonPath, names
                         getName: () => 'test-bundle',
                         namespace
                     },
-                    demosite: false
+                    demosite: false,
+                    isV4: true
                 }))
                 .pipe(gulp.dest(distPath));
         },
@@ -56,8 +57,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>
@@ -69,13 +68,13 @@ export default function createBuildGroundControlSkeletonTask(skeletonPath, names
                     <meta charset="utf-8">
                     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                    <link rel="stylesheet" href="web/frontend/css/style.css"/>
+                    <link rel="stylesheet" href="public/build/css/style.css"/>
                 </head>
 
                 <body>
                     <h1>Test page</h1>
-                    <script src="web/frontend/js/bundle.js"></script>
-                    <script src="web/frontend/js/admin-bundle-extra.js"></script>
+                    <script src="public/build/js/bundle.js"></script>
+                    <script src="public/build/js/admin-bundle-extra.js"></script>
                 </body>
 
                 </html>`;
@@ -85,7 +84,7 @@ export default function createBuildGroundControlSkeletonTask(skeletonPath, names
         function installGroundControlSkeletonNpmPackages(cb) {
             runChildProcess('npm', ['install'], distPath, cb);
         },
-        function builGroundControlSkeletonExample(cb) {
+        function buildGroundControlSkeletonExample(cb) {
             runChildProcess('npm', ['run', 'build'], distPath, cb);
         }
     ];

diff --git a/src/Kunstmaan/AdminBundle/Resources/views/Default/_js_footer.html.twig b/src/Kunstmaan/AdminBundle/Resources/views/Default/_js_footer.html.twig
@@ -14,7 +14,7 @@
 
         {%- block extra_async_javascripts %}{% endblock -%}
 
-        {%- set jsPath = 'frontend/js/admin-bundle-extra.js' -%}
+        {%- set jsPath = 'build/js/admin-bundle-extra.js' -%}
         {% if file_exists(jsPath) %}'{{ asset('/' ~ jsPath) }}'{% endif %}
     ];
 

diff --git a/src/Kunstmaan/ArticleBundle/Resources/views/AbstractArticlePageAdminList/list.html.twig b/src/Kunstmaan/ArticleBundle/Resources/views/AbstractArticlePageAdminList/list.html.twig
@@ -51,7 +51,7 @@
     {% else %}
         {% set title = adminlist.configurator.getEntityName() %}
     {% endif %}
-    
+
     {% if adminlistconfigurator.overviewPage %}
         {% if adminlist.canAdd() %}
             <div class="col-sm-6 col-md-4">

diff --git a/src/Kunstmaan/GeneratorBundle/Command/GenerateDefaultSiteCommand.php b/src/Kunstmaan/GeneratorBundle/Command/GenerateDefaultSiteCommand.php
@@ -28,6 +28,11 @@ class GenerateDefaultSiteCommand extends KunstmaanGenerateCommand
      */
     private $demosite;
 
+    /**
+     * @var bool
+     */
+    private $webpackEncore;
+
     /**
      * @see Command
      */
@@ -48,6 +53,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');
@@ -87,12 +93,18 @@ protected function doExecute()
 
         $browserSyncUrl = $this->assistant->getOptionOrDefault('browsersync', null);
 
+        /*
+         * If we need to generate Groundcontrol or Webpack Encore
+         */
+        $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
@@ -37,6 +37,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');
     }
@@ -63,7 +64,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');
@@ -89,7 +90,7 @@ protected function doInteract()
         $this->browserSyncUrl = $this->assistant->getOptionOrDefault('browsersync', null);
 
         if (null === $this->browserSyncUrl) {
-            $this->browserSyncUrl = $this->assistant->ask('Which URL would you like to configure for browserSync?', 'http://myproject.dev');
+            $this->browserSyncUrl = $this->assistant->ask('Which URL would you like to configure for browserSync?', 'https://myproject.dev');
         }
     }
 

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 instead 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)'),
@@ -108,10 +109,15 @@ protected function interact(InputInterface $input, OutputInterface $output)
         }
 
         if (null === $input->getOption('demosite')) {
-            $demoSiteOption = $this->assistant->askConfirmation('Do you want to create a "demosite"? (y/n)', 'n');
+            $demoSiteOption = $this->assistant->askConfirmation('Do you want to create a "demosite"? (y/n)', 'n', '?', false);
             $input->setOption('demosite', $demoSiteOption === true ? 'Yes' : 'No');
         }
 
+        if (null === $input->getOption('webpack-encore')) {
+            $webpackEncoreOption = $this->assistant->askConfirmation('Do you want to use Webpack Encore instead of Groundcontrol? (y/n)', 'n', '?', false);
+            $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);