add: Solid JS Scaffolding Support (#249)

Author: tzsk

.github/workflows/release.yaml

@@ -1,12 +1,11 @@
-
 name: CD
 
 on:
   release:
     types: [created]
 
 jobs:
-  build:
+  Build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -17,7 +16,7 @@ jobs:
       - run: npm run lint
       - run: npm run coverage
 
-  publish-npm:
+  Publish:
     needs: build
     runs-on: ubuntu-latest
     steps:

.github/workflows/test.yaml

@@ -2,27 +2,26 @@ name: CI
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
 
 jobs:
-  build:
-
+  Build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
         node-version: [16.x]
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run lint
-    - run: npm run coverage
-    - run: npm run build
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run coverage
+      - run: npm run build

README.md

@@ -43,6 +43,7 @@ Below commands will install the `@latest` versions of the respective frameworks.
 | Svelte Kit       | `npx twify@latest create svelte <my-app>`  |
 | Laravel Vite     | `npx twify@latest create laravel <my-app>` |
 | Vite             | `npx twify@latest create vite <my-app>`    |
+| Solid Start      | `npx twify@latest create solid <my-app>`   |
 | Angular          | `npx twify@latest create angular <my-app>` |
 | Create React App | `npx twify@latest create react <my-app>`   |
 
@@ -111,7 +112,7 @@ Below are the list of Supported Projects,
 | Vite             | :white_check_mark: | :white_check_mark: |
 | Angular          | :white_check_mark: | :white_check_mark: |
 | Create React App | :white_check_mark: | :white_check_mark: |
-| Solid JS         | :o: WIP            | :o: WIP            |
+| Solid JS         | :white_check_mark: | :white_check_mark: |
 | Astro            | :o: WIP            | :o: WIP            |
 | Qwik             | :o: WIP            | :o: WIP            |
 

package-lock.json

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

package.json

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

src/drivers.ts

@@ -0,0 +1,12 @@
+import { Framework } from '../types';
+import { resolveCssLocation } from './steps/solid';
+
+const Solid: Framework = {
+  requiredDependencies: ['tailwindcss', 'postcss', 'autoprefixer'],
+  initCommands: ['npx tailwindcss init -p'],
+  cssLocation: resolveCssLocation,
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  steps: [],
+};
+
+export default Solid;

src/frameworks/solid.ts

@@ -2,7 +2,9 @@ import glob from 'glob';
 import util from 'util';
 
 export async function resolveCssLocation() {
-  const [match] = await util.promisify(glob)('./**/globals.css');
+  const [match] = await util.promisify(glob)('./**/globals.css', {
+    ignore: ['node_modules'],
+  });
 
   if (!match) {
     return './styles/globals.css';

src/frameworks/steps/next.ts

@@ -0,0 +1,14 @@
+import glob from 'glob';
+import util from 'util';
+
+export async function resolveCssLocation() {
+  const [match] = await util.promisify(glob)('./src/**/root.css', {
+    ignore: ['node_modules'],
+  });
+
+  if (!match) {
+    return './src/index.css';
+  }
+
+  return match;
+}

src/frameworks/steps/solid.ts

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

src/helpers.ts

@@ -1,8 +1,7 @@
 import { runCommand } from './helpers';
-import { PackageManager } from './types';
-import { drivers } from './drivers';
+import { Driver, PackageManager } from './types';
 
-export type Maker = { cmd: string; project: keyof typeof drivers };
+export type Maker = { cmd: string; project: Driver };
 export type SpecialMaker = (packageManager: PackageManager) => Promise<Maker>;
 
 const globalInstallPrefix: Record<PackageManager, string> = {
@@ -38,6 +37,7 @@ const regularMakes: Record<string, Maker> = {
   next: { cmd: 'next-app', project: 'NextJS' },
   react: { cmd: 'react-app', project: 'CreateReactApp' },
   nuxt: { cmd: 'nuxt-app', project: 'Nuxt2' },
+  solid: { cmd: 'solid', project: 'Solid' },
 };
 
 export async function resolveMakeCommand(args: string[]): Promise<Maker> {

src/makers.ts

@@ -189,3 +189,21 @@ exports[`Drivers > has a list of drivers 9`] = `
   ],
 }
 `;
+
+exports[`Drivers > has a list of drivers 10`] = `
+{
+  "content": [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  "cssLocation": [Function],
+  "initCommands": [
+    "npx tailwindcss init -p",
+  ],
+  "requiredDependencies": [
+    "tailwindcss",
+    "postcss",
+    "autoprefixer",
+  ],
+  "steps": [],
+}
+`;

tests/__snapshots__/drivers.spec.ts.snap

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

tests/drivers.spec.ts

@@ -47,6 +47,9 @@ describe('Helpers', () => {
     pkg.mockReturnValue({ dependencies: { 'react-scripts': '1.0.0' } });
     expect(detectFramework()).toBe('CreateReactApp');
 
+    pkg.mockReturnValue({ dependencies: { 'solid-js': '1.0.0' } });
+    expect(detectFramework()).toBe('Solid');
+
     pkg.mockReturnValue({
       devDependencies: { 'laravel-vite-plugin': '1.0.0' },
     });

tests/helpers.spec.ts

@@ -14,14 +14,14 @@ describe('Next JS CSS', () => {
 
   it('can resolve css location', async () => {
     vi.mocked(glob)
-      .mockImplementationOnce((_, cb) => {
+      .mockImplementationOnce((_, __, cb) => {
         console.log(typeof cb, cb);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return (cb as any)(null, ['foo']) as any;
+        return cb(null, ['foo']) as any;
       })
-      .mockImplementationOnce((_, cb) => {
+      .mockImplementationOnce((_, __, cb) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return (cb as any)(null, []) as any;
+        return cb(null, []) as any;
       });
     const first = await resolveCssLocation();
     const second = await resolveCssLocation();

tests/steps/next.spec.ts

@@ -0,0 +1,32 @@
+import glob from 'glob';
+import { resolveCssLocation } from '../../src/frameworks/steps/solid';
+
+vi.mock('glob');
+
+describe('Solid JS CSS', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterAll(() => {
+    vi.resetAllMocks();
+  });
+
+  it('can resolve css location', async () => {
+    vi.mocked(glob)
+      .mockImplementationOnce((_, __, cb) => {
+        console.log(typeof cb, cb);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return cb(null, ['foo']) as any;
+      })
+      .mockImplementationOnce((_, __, cb) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return cb(null, []) as any;
+      });
+    const first = await resolveCssLocation();
+    const second = await resolveCssLocation();
+
+    expect(first).toStrictEqual('foo');
+    expect(second).toStrictEqual('./src/index.css');
+  });
+});