From 6df0e595d578945665d4731348ddd0597efb4169 Mon Sep 17 00:00:00 2001 From: Jack Wilkinson <31214002+jaxwilko@users.noreply.github.com> Date: Mon, 25 Nov 2024 17:02:39 +0000 Subject: [PATCH] Tailwind theme create improvements (#1255) --- modules/cms/console/CreateTheme.php | 82 +++++++++++++------ .../theme/tailwind/assets/src/css/base.stub | 3 - .../theme/tailwind/assets/src/css/custom.stub | 3 - .../theme/tailwind/assets/src/css/theme.stub | 2 - .../theme/tailwind/assets/src/js/theme.stub | 33 -------- modules/system/ServiceProvider.php | 1 + .../system/console/asset/npm/NpmVersion.php | 74 +++++++++++++++++ 7 files changed, 131 insertions(+), 67 deletions(-) delete mode 100644 modules/cms/console/scaffold/theme/tailwind/assets/src/css/base.stub delete mode 100644 modules/cms/console/scaffold/theme/tailwind/assets/src/css/custom.stub delete mode 100644 modules/cms/console/scaffold/theme/tailwind/assets/src/css/theme.stub delete mode 100644 modules/cms/console/scaffold/theme/tailwind/assets/src/js/theme.stub create mode 100644 modules/system/console/asset/npm/NpmVersion.php diff --git a/modules/cms/console/CreateTheme.php b/modules/cms/console/CreateTheme.php index 71a8036f66..00b1196b6f 100644 --- a/modules/cms/console/CreateTheme.php +++ b/modules/cms/console/CreateTheme.php @@ -1,6 +1,8 @@ 'version.yaml', ], 'tailwind' => [ - 'scaffold/theme/tailwind/assets/src/css/base.stub' => 'assets/src/css/base.css', - 'scaffold/theme/tailwind/assets/src/css/custom.stub' => 'assets/src/css/custom.css', - 'scaffold/theme/tailwind/assets/src/css/theme.stub' => 'assets/src/css/theme.css', - 'scaffold/theme/tailwind/assets/src/js/theme.stub' => 'assets/src/js/theme.js', 'scaffold/theme/tailwind/lang/en/lang.stub' => 'lang/en/lang.php', 'scaffold/theme/tailwind/layouts/default.stub' => 'layouts/default.htm', 'scaffold/theme/tailwind/pages/404.stub' => 'pages/404.htm', @@ -155,33 +153,65 @@ public function makeStubs(): void parent::makeStubs(); if ($this->scaffold === 'tailwind') { - // Set up the vite config files - $this->call('vite:create', [ - 'packageName' => 'theme-' . $this->getNameInput(), - '--no-interaction' => true, - '--force' => true, - '--silent' => true, - '--tailwind' => true - ]); + // @TODO: allow support for mix here + $this->tailwindPostCreate('vite'); + } + } - $this->info('Installing NPM dependencies...'); + protected function tailwindPostCreate(string $processor): void + { + if ($this->call('npm:version', ['--silent' => true, '--compatible' => true]) !== 0) { + throw new SystemException(sprintf( + 'NPM is not installed or is outdated, please ensure NPM >= v7.0 is available and then manually set up %s.', + $processor + )); + } + $commands = [ + // Set up the vite config files + $processor . ':create' => [ + 'message' => 'Generating ' . $processor . ' + tailwind config...', + 'args' => [ + 'packageName' => 'theme-' . $this->getNameInput(), + '--no-interaction' => true, + '--force' => true, + '--silent' => true, + '--tailwind' => true + ] + ], // Ensure all require packages are available for the new theme and add the new theme to our npm workspaces - $this->call('vite:install', [ - 'assetPackage' => ['theme-' . $this->getNameInput()], - '--no-interaction' => true, - '--silent' => true, - '--disable-tty' => true - ]); + $processor . ':install' => [ + 'message' => 'Installing NPM dependencies...', + 'args' => [ + 'assetPackage' => ['theme-' . $this->getNameInput()], + '--no-interaction' => true, + '--silent' => false, + '--disable-tty' => true + ] + ], + // Run an initial compile to ensure styles are available for first load + $processor . ':compile' => [ + 'message' => 'Compiling your theme...', + 'args' => [ + '--package' => ['theme-' . $this->getNameInput()], + '--no-interaction' => true, + '--silent' => true, + ] + ] + ]; - $this->info('Compiling your theme...'); + foreach ($commands as $command => $data) { + $this->info($data['message']); - // Run an initial compile to ensure styles are available for first load - $this->call('vite:compile', [ - '--package' => ['theme-' . $this->getNameInput()], - '--no-interaction' => true, - '--silent' => true, - ]); + // Handle commands throwing errors + if ($this->call($command, $data['args']) !== 0) { + throw new SystemException(sprintf('Post create command `%s` failed, please review manually.', $command)); + } + + // Force PackageManger to reset available packages + if ($command === $processor . ':create') { + PackageManager::forgetInstance(); + } } } } diff --git a/modules/cms/console/scaffold/theme/tailwind/assets/src/css/base.stub b/modules/cms/console/scaffold/theme/tailwind/assets/src/css/base.stub deleted file mode 100644 index b5c61c9567..0000000000 --- a/modules/cms/console/scaffold/theme/tailwind/assets/src/css/base.stub +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/modules/cms/console/scaffold/theme/tailwind/assets/src/css/custom.stub b/modules/cms/console/scaffold/theme/tailwind/assets/src/css/custom.stub deleted file mode 100644 index 5fc1ea54e5..0000000000 --- a/modules/cms/console/scaffold/theme/tailwind/assets/src/css/custom.stub +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Custom CSS for theme goes here - */ diff --git a/modules/cms/console/scaffold/theme/tailwind/assets/src/css/theme.stub b/modules/cms/console/scaffold/theme/tailwind/assets/src/css/theme.stub deleted file mode 100644 index b020ae8833..0000000000 --- a/modules/cms/console/scaffold/theme/tailwind/assets/src/css/theme.stub +++ /dev/null @@ -1,2 +0,0 @@ -@import 'base.css'; -@import 'custom.css'; diff --git a/modules/cms/console/scaffold/theme/tailwind/assets/src/js/theme.stub b/modules/cms/console/scaffold/theme/tailwind/assets/src/js/theme.stub deleted file mode 100644 index 416aa12526..0000000000 --- a/modules/cms/console/scaffold/theme/tailwind/assets/src/js/theme.stub +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Application - */ -(function($) { - "use strict"; - - jQuery(document).ready(function($) { - /*------------------------------- - WINTER CMS FLASH MESSAGE HANDLING - ---------------------------------*/ - $(document).on('ajaxSetup', function(event, context) { - // Enable AJAX handling of Flash messages on all AJAX requests - context.options.flash = true; - - // Enable the StripeLoadIndicator on all AJAX requests - context.options.loading = $.oc.stripeLoadIndicator; - - // Handle Flash Messages - context.options.handleFlashMessage = function(message, type) { - $.oc.flashMsg({ text: message, class: type }); - }; - - // Handle Error Messages - context.options.handleErrorMessage = function(message) { - $.oc.flashMsg({ text: message, class: 'error' }); - }; - }); - }); -}(jQuery)); - -if (typeof(gtag) !== 'undefined' && typeof(gtag) !== 'function') { - gtag = function() { console.log('GoogleAnalytics not present.'); } -} diff --git a/modules/system/ServiceProvider.php b/modules/system/ServiceProvider.php index 396f2e352e..3a8b58f301 100644 --- a/modules/system/ServiceProvider.php +++ b/modules/system/ServiceProvider.php @@ -336,6 +336,7 @@ protected function registerConsole() $this->registerConsoleCommand('npm.run', Console\Asset\Npm\NpmRun::class); $this->registerConsoleCommand('npm.install', Console\Asset\Npm\NpmInstall::class); $this->registerConsoleCommand('npm.update', Console\Asset\Npm\NpmUpdate::class); + $this->registerConsoleCommand('npm.version', Console\Asset\Npm\NpmVersion::class); } /* diff --git a/modules/system/console/asset/npm/NpmVersion.php b/modules/system/console/asset/npm/NpmVersion.php new file mode 100644 index 0000000000..78e4a4a0b7 --- /dev/null +++ b/modules/system/console/asset/npm/NpmVersion.php @@ -0,0 +1,74 @@ + $this->getNodeEnv()], + null, + null + ); + + $output = ''; + + $exit = $process->run(function ($status, $stdout) use (&$output) { + $output .= $stdout; + }); + + $output = trim($output); + + // Npm failed for some reason, report to user + if ($exit !== 0) { + $this->error('NPM exited with error: ' . $output); + return $exit; + } + + // Report the version to user + if (!$this->option('silent')) { + $this->info($output); + } + + // If the user has not requested a compatibility check, then return 0 + if (!$this->option('compatible')) { + return 0; + } + + // If the version of npm is less than the required minimum, then return fail + if (version_compare($output, static::NPM_MINIMUM_SUPPORTED_VERSION, '<')) { + return 1; + } + + return 0; + } +}