diff --git a/Command/SymfonyVuetifiedSetupCommand.php b/Command/SymfonyVuetifiedSetupCommand.php index 3ca55ed..ac03814 100644 --- a/Command/SymfonyVuetifiedSetupCommand.php +++ b/Command/SymfonyVuetifiedSetupCommand.php @@ -44,6 +44,7 @@ protected function execute(InputInterface $input, OutputInterface $output): int return 1; // (Command::FAILURE not supported in 4.4) } + $this->modifyPackageJson($io, $filesystem); $this->appendTsConfigJs($io, $filesystem); $this->modifyWebpackConfig($io, $filesystem); $this->modifyAppJs($io, $filesystem); @@ -72,15 +73,31 @@ protected function appendTsConfigJs(SymfonyStyle $io, Filesystem $filesystem) protected function askContinue(SymfonyStyle $io) { - $io->warning('This command will modify the webpack.config.js file, modify the assets/app.js file, replace templates/base.html.twig, and add the tsconfig.json file. It is strongly advised to commit any changes you\'ve made so far, so that you can evaluate the changes that are made after running this command.'); + $io->warning('This command will modify package.json, modify the webpack.config.js file, modify the assets/app.js file, replace templates/base.html.twig, and add the tsconfig.json file. It is strongly advised to commit any changes you\'ve made so far, so that you can evaluate the changes that are made after running this command.'); return $io->askQuestion( new ConfirmationQuestion('Do you want to continue?', false)); } + protected function modifyPackageJson(SymfonyStyle $io, Filesystem $filesystem) + { + $packagePath = $this->rootDir . DIRECTORY_SEPARATOR . 'package.json'; + $packageJsonContent = file_get_contents($packagePath); + if (stripos($packageJsonContent, '"@k3ssen/symfony-vuetified"') === false) { + $io->comment('Trying to modify package.json ...'); + $packageJsonContent = str_replace( + '"devDependencies": {', + "\"devDependencies\": {\n \"@k3ssen/symfony-vuetified\": \"file:vendor/k3ssen/symfony-vuetified/Resources/assets\",", + $packageJsonContent + ); + $filesystem->dumpFile($packagePath, $packageJsonContent); + $io->comment('package.json modified'); + } + } + protected function modifyWebpackConfig(SymfonyStyle $io, Filesystem $filesystem) { $io->comment('Trying to modify webpack.config.js'); $webpackFilePath = $this->rootDir . DIRECTORY_SEPARATOR . 'webpack.config.js'; - $webpackConfig = "const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');\n" . file_get_contents($webpackFilePath); + $webpackConfig = "const { VuetifyLoaderPlugin } = require('vuetify-loader');\n" . file_get_contents($webpackFilePath); $webpackConfig = str_replace('//.enableSassLoader()', '.enableSassLoader()', $webpackConfig); $webpackConfig = str_replace('//.enableTypeScriptLoader()', '.enableTypeScriptLoader() .configureLoaderRule(\'typescript\', rule => { diff --git a/README.md b/README.md index 6bd99d0..df82fc8 100644 --- a/README.md +++ b/README.md @@ -10,15 +10,25 @@ and required modules: 1. Run `composer require k3ssen/symfony-vuetified` You may need to add `"minimum-stability": "dev", "prefer-stable": true` to your composer.json 2. Run `php bin/console symfony-vuetified:setup` if you just created a new symfony project. - Otherwise see 'configure files' below. + Otherwise, see 'configure files' below. 3. Run `yarn install & yarn dev` When you see an Error for missing required bundles, install that bundle and run `yarn dev` again. Keep repeating this process (about 4 or 5 times) until DONE. +> Note: as of writing, Vuetify has sass-code that results in lots of deprecation warnings since sass version 1.33. +> Run **yarn add sass@~1.32.0** to get rid of these deprecation warnings. + ### Configure files -You'll need to modify `webpack.config.json`, `assets/app.js`, `templates/base.html.twig` and +You'll need to modify `package.json`, `webpack.config.json`, `assets/app.js`, `templates/base.html.twig` and add a `tsconfig.json` file to the root of your project. +**package.json** +Add this bundle to your dependencies in package.json: +``` + "@k3ssen/symfony-vuetified": "file:vendor/k3ssen/symfony-vuetified/Resources/assets", +``` +(It might've been added automatically already. If it wasn't, make sure to add it yourself) + **webpack.config.js** Enable Typescript, Sass, Vue and Vuetify: ```