feat: Add Laravel Vite Driver (#33)

Author: tzsk

README.md

@@ -32,12 +32,11 @@ Below are the list of Supported Projects,
 | Nuxt 2           | :white_check_mark: | :white_check_mark: |
 | Nuxt 3           | :white_check_mark: | :white_check_mark: |
 | Svelte Kit       | :white_check_mark: | :white_check_mark: |
-| Laravel Mix      | :o: WIP            | :o: WIP            |
-| Laravel Vite     | :o: WIP            | :o: WIP            |
-| Gatsby           | :o: WIP            | :o: WIP            |
+| Laravel Vite     | :white_check_mark: | :white_check_mark: |
 | Vite             | :white_check_mark: | :white_check_mark: |
 | Angular          | :white_check_mark: | :white_check_mark: |
 | Create React App | :white_check_mark: | :white_check_mark: |
+| Gatsby           | :o: WIP            | :o: WIP            |
 
 
 ## :microscope: Testing

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "twify",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A Tool to Setup TailwindCSS in your Project with a Single Command",
   "bin": {
     "twify": "dist/main.js"

package.json

@@ -9,4 +9,5 @@ export const drivers = {
   Vite: (): DriverImport => import('./frameworks/vite'),
   Angular: (): DriverImport => import('./frameworks/angular'),
   CreateReactApp: (): DriverImport => import('./frameworks/cra'),
+  LaravelVite: (): DriverImport => import('./frameworks/laravel'),
 };

src/drivers.ts

@@ -0,0 +1,18 @@
+import { Framework } from '../types';
+import { setupWelcomePage } from './steps/laravel';
+
+const Laravel: Framework = {
+  requiredDependencies: ['tailwindcss', 'postcss', 'autoprefixer'],
+  initCommands: ['npx tailwindcss init -p'],
+  cssLocation: './resources/css/app.css',
+  content: {
+    name: 'tailwind.config.js',
+    files: [
+      './resources/**/*.blade.php',
+      './resources/**/*.{js,jsx,ts,tsx,vue,svelte}',
+    ],
+  },
+  steps: [setupWelcomePage],
+};
+
+export default Laravel;

src/frameworks/laravel.ts

@@ -0,0 +1,19 @@
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import path from 'path';
+
+export async function setupWelcomePage() {
+  const filename = 'welcome.blade.php';
+  const welcomeFile = path.join(process.cwd(), `resources/views`, filename);
+  const welcomePage = await fs.readFile(welcomeFile, 'utf8');
+
+  console.log(`\n- Setting up ${chalk.blue.bold(filename)}...`);
+
+  await fs.writeFile(
+    welcomeFile,
+    welcomePage.replace(
+      /<\/head>/,
+      "\t@vite(['resources/css/app.css'])\n\t</head>"
+    )
+  );
+}

src/frameworks/steps/laravel.ts

@@ -7,7 +7,7 @@ const Vite: Framework = {
   cssLocation: './src/style.css',
   content: {
     name: 'tailwind.config.js',
-    files: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+    files: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,svelte}'],
   },
   steps: [setupMainFile],
 };

src/frameworks/vite.ts

@@ -22,6 +22,7 @@ export function detectFramework(): Driver | undefined {
   if (dependencies['nuxt']) return 'Nuxt2';
   if (dependencies['@angular/core']) return 'Angular';
   if (dependencies['react-scripts']) return 'CreateReactApp';
+  if (devDependencies['laravel-vite-plugin']) return 'LaravelVite';
   if (devDependencies['@sveltejs/kit']) return 'SvelteKit';
   if (devDependencies['nuxt']) return 'Nuxt3';
   if (devDependencies['vite']) return 'Vite';

src/helpers.ts

@@ -132,7 +132,7 @@ exports[`Drivers > has a list of drivers 6`] = `
   "content": {
     "files": [
       "./index.html",
-      "./src/**/*.{vue,js,ts,jsx,tsx}",
+      "./src/**/*.{vue,js,ts,jsx,tsx,svelte}",
     ],
     "name": "tailwind.config.js",
   },
@@ -192,3 +192,27 @@ exports[`Drivers > has a list of drivers 8`] = `
   "steps": [],
 }
 `;
+
+exports[`Drivers > has a list of drivers 9`] = `
+{
+  "content": {
+    "files": [
+      "./resources/**/*.blade.php",
+      "./resources/**/*.{js,jsx,ts,tsx,vue,svelte}",
+    ],
+    "name": "tailwind.config.js",
+  },
+  "cssLocation": "./resources/css/app.css",
+  "initCommands": [
+    "npx tailwindcss init -p",
+  ],
+  "requiredDependencies": [
+    "tailwindcss",
+    "postcss",
+    "autoprefixer",
+  ],
+  "steps": [
+    [Function],
+  ],
+}
+`;

tests/__snapshots__/drivers.spec.ts.snap

@@ -12,6 +12,7 @@ describe('Drivers', () => {
       'Vite',
       'Angular',
       'CreateReactApp',
+      'LaravelVite',
     ] as (keyof typeof drivers)[];
     expect(driversList).toEqual(expectedDrivers);
 

tests/drivers.spec.ts

@@ -0,0 +1,7 @@
+<html>
+  <head>
+    <title>Laravel</title>
+  </head>
+  <body>
+  </body>
+</html>

tests/fixtures/laravel/welcome.stub

@@ -27,6 +27,11 @@ describe('Helpers', () => {
     pkg.mockReturnValue({ dependencies: { 'react-scripts': '1.0.0' } });
     expect(detectFramework()).toBe('CreateReactApp');
 
+    pkg.mockReturnValue({
+      devDependencies: { 'laravel-vite-plugin': '1.0.0' },
+    });
+    expect(detectFramework()).toBe('LaravelVite');
+
     pkg.mockReturnValue({ devDependencies: { '@sveltejs/kit': '1.0.0' } });
     expect(detectFramework()).toBe('SvelteKit');
 

tests/helpers.spec.ts

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1
+
+exports[`Vite Steps > can setup laravel project 1`] = `
+"<html>
+  <head>
+    <title>Laravel</title>
+  	@vite(['resources/css/app.css'])
+	</head>
+  <body>
+  </body>
+</html>"
+`;

tests/steps/__snapshots__/laravel.spec.ts.snap

@@ -0,0 +1,36 @@
+import fs from 'fs-extra';
+import { setupWelcomePage } from '../../src/frameworks/steps/laravel';
+
+async function runStep(file: string) {
+  const code = fs.readFileSync(`./tests/fixtures/laravel/${file}`, 'utf8');
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  vi.spyOn(fs, 'readFile').mockResolvedValue(code as any);
+  const writeSpy = vi.spyOn(fs, 'writeFile').mockResolvedValue();
+
+  await setupWelcomePage();
+
+  const [fileName, content] = writeSpy.mock.lastCall || [];
+
+  return { fileName, content };
+}
+
+describe('Vite Steps', () => {
+  beforeAll(() => {
+    vi.stubGlobal('console', { ...console, log: vi.fn() });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterAll(() => {
+    vi.resetAllMocks();
+  });
+
+  it('can setup laravel project', async () => {
+    const { fileName, content } = await runStep('welcome.stub');
+
+    expect(fileName).toMatch('welcome.blade.php');
+    expect(content).toMatchSnapshot();
+  });
+});