Merge pull request #40 from sectsect/feature/jan2025-update-dependencies

chore(deps): update dependencies

Author: sectsect

.changeset/kind-lions-begin.md

@@ -0,0 +1,17 @@
+---
+"@sect/solid-hiding-header": patch
+---
+
+.
+
+- chore(deps): update dependencies
+- fix: resolve test failures after dependency updates
+- fix(e2e): remove playwright test from library package
+- test: expand test suites to achieve full coverage
+- chore(deps): update dependencies
+- fix(lint): update eslint-plugin-solid to resolve TSAsExpression error
+- chore(deps): update dependencies
+- chore: update tailwindcss config before migrate to v4
+- chore(deps): migrate to tailwindcss v4
+- fix(deps): downgrade msw to 2.3.1 for vite 6 compatibility
+- fix: resolve TypeScript module resolution errors

apps/solidjs-boilerplate/.eslintrc

@@ -139,15 +139,15 @@
       ]
     },
     // Configuration for e2e testing (Cypress)
-    {
-      "files": ["**/*.cy.ts"],
-      "plugins": ["cypress"],
-      "extends": ["plugin:cypress/recommended"],
-      "parserOptions": {
-        "project": "./cypress/tsconfig.json"
-      }
-    },
-    // Configuration for e2e testing (Cypress)
+    // {
+    //   "files": ["**/*.cy.ts"],
+    //   "plugins": ["cypress"],
+    //   "extends": ["plugin:cypress/recommended"],
+    //   "parserOptions": {
+    //     "project": "./cypress/tsconfig.json"
+    //   }
+    // },
+    // Configuration for e2e testing (Playwright)
     {
       "files": ["e2e/**/*.test.ts", "e2e/**/*.spec.ts"],
       "extends": ["plugin:playwright/playwright-test"]

apps/solidjs-boilerplate/package.json

@@ -3,6 +3,7 @@
   "version": "1.5.1",
   "private": true,
   "description": "",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -20,82 +21,80 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@commitlint/cli": "^18.4.4",
-    "@commitlint/config-conventional": "^18.4.4",
-    "@playwright/test": "^1.41.1",
-    "@secretlint/secretlint-rule-preset-recommend": "^8.1.0",
-    "@solidjs/testing-library": "^0.8.5",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/line-clamp": "^0.4.4",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.11.5",
-    "@types/testing-library__jest-dom": "^5.14.9",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@playwright/test": "^1.53.1",
+    "@secretlint/secretlint-rule-preset-recommend": "^10.1.0",
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.0.3",
+    "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
-    "@vitest/coverage-v8": "^2.0.5",
-    "babel-preset-solid": "^1.8.9",
+    "@vitest/coverage-v8": "^3.2.4",
+    "babel-preset-solid": "^1.9.6",
     "eslint": "8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-deprecation": "^2.0.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.6.3",
-    "eslint-plugin-jest-dom": "^5.1.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-import-resolver-typescript": "^4.4.3",
+    "eslint-plugin-deprecation": "^3.0.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-playwright": "^0.22.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-solid": "^0.13.1",
-    "eslint-plugin-tailwindcss": "^3.14.0",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "eslint-plugin-tsdoc": "^0.2.17",
-    "eslint-plugin-unused-imports": "^3.0.0",
-    "eslint-plugin-vitest": "^0.3.20",
-    "husky": "^8.0.3",
-    "jsdom": "^24.0.0",
-    "lint-staged": "^15.2.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-playwright": "^2.2.0",
+    "eslint-plugin-prettier": "^5.5.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-solid": "^0.14.5",
+    "eslint-plugin-tailwindcss": "^3.18.0",
+    "eslint-plugin-testing-library": "^7.5.3",
+    "eslint-plugin-tsdoc": "^0.4.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "eslint-plugin-vitest": "^0.5.4",
+    "husky": "^9.1.7",
+    "jsdom": "^26.1.0",
+    "lint-staged": "^16.1.2",
     "msw": "^2.3.1",
-    "postcss": "^8.4.33",
-    "postcss-calc": "^9.0.1",
+    "postcss": "^8.5.6",
+    "postcss-calc": "^10.1.1",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-hexrgba": "^2.1.0",
-    "postcss-import": "^16.0.0",
-    "postcss-nesting": "^12.1.4",
-    "postcss-preset-env": "^9.3.0",
+    "postcss-import": "^16.1.1",
+    "postcss-nesting": "^13.0.2",
+    "postcss-preset-env": "^10.2.3",
     "postcss-pseudo-is": "^0.3.0",
     "postcss-pxtorem": "^6.1.0",
     "postcss-reporter": "^7.1.0",
     "postcss-sort-media-queries": "^5.2.0",
-    "prettier": "^3.2.4",
-    "secretlint": "^8.1.0",
-    "stylelint": "^16.2.0",
-    "stylelint-config-recess-order": "^4.4.0",
-    "stylelint-config-standard": "^36.0.0",
-    "stylelint-prettier": "^5.0.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.3.0",
-    "vite-plugin-solid": "^2.8.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^2.0.5"
+    "prettier": "^3.5.3",
+    "secretlint": "^10.1.0",
+    "stylelint": "^16.21.0",
+    "stylelint-config-recess-order": "^7.1.0",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-prettier": "^5.0.3",
+    "tailwindcss": "^4.1.10",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-solid": "^2.11.6",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "@sect/solid-hiding-header": "workspace:*",
-    "@solidjs/meta": "^0.29.3",
-    "@solidjs/router": "^0.13.3",
-    "@tanstack/solid-query": "^5.17.19",
+    "@solidjs/meta": "^0.29.4",
+    "@solidjs/router": "^0.15.3",
+    "@tailwindcss/vite": "^4.1.10",
+    "@tanstack/solid-query": "^5.80.10",
     "escape-goat": "^4.0.0",
-    "isomorphic-dompurify": "^2.2.0",
-    "solid-devtools": "^0.29.3",
-    "solid-js": "^1.8.11",
+    "isomorphic-dompurify": "^2.25.0",
+    "solid-devtools": "^0.34.2",
+    "solid-js": "^1.9.7",
     "solid-toast": "^0.5.0",
     "striptags": "^3.2.0",
     "truncate": "^3.0.0"

apps/solidjs-boilerplate/postcss.config.js

@@ -0,0 +1,3 @@
+{
+  "plugins": ["postcss-import", "postcss-nesting", "@tailwindcss/postcss"]
+}

apps/solidjs-boilerplate/postcss.config.json

@@ -0,0 +1,101 @@
+import { render } from '@solidjs/testing-library';
+import { expect, describe, test, vi } from 'vitest';
+import { MetaProvider } from '@solidjs/meta';
+import type { JSX } from 'solid-js';
+import Head from './Head';
+
+// Mock the AppConfig to avoid import issues
+vi.mock('@/constants/AppConfig', () => ({
+  AppConfig: {
+    title: 'Test Site',
+    description: 'Test description',
+    og: {
+      image: {
+        url: 'https://example.com/default-og-image.jpg'
+      }
+    }
+  }
+}));
+
+describe('Head component', () => {
+  const renderWithMeta = (component: () => JSX.Element) => {
+    return render(() => (
+      <MetaProvider>
+        {component()}
+      </MetaProvider>
+    ));
+  };
+
+  test('should render with default title and description', () => {
+    const { unmount } = renderWithMeta(() => <Head />);
+    
+    // Check if document head contains the expected meta tags
+    expect(document.title).toBe('Test Site');
+    
+    const metaDescription = document.querySelector('meta[name="description"]');
+    expect(metaDescription?.getAttribute('content')).toBe('Test description');
+    
+    unmount();
+  });
+
+  test('should render with custom title and description', () => {
+    const customTitle = 'Custom Page';
+    const customDescription = 'Custom page description';
+    
+    const { unmount } = renderWithMeta(() => (
+      <Head title={customTitle} description={customDescription} />
+    ));
+    
+    expect(document.title).toBe('Custom Page | Test Site');
+    
+    const metaDescription = document.querySelector('meta[name="description"]');
+    expect(metaDescription?.getAttribute('content')).toBe(customDescription);
+    
+    unmount();
+  });
+
+  test('should use website type when canonical is undefined', () => {
+    const { unmount } = renderWithMeta(() => <Head />);
+    
+    const ogType = document.querySelector('meta[property="og:type"]');
+    expect(ogType?.getAttribute('content')).toBe('website');
+    
+    unmount();
+  });
+
+  test('should use article type when canonical is provided', () => {
+    const { unmount } = renderWithMeta(() => <Head canonical="/test" />);
+    
+    const ogType = document.querySelector('meta[property="og:type"]');
+    expect(ogType?.getAttribute('content')).toBe('article');
+    
+    unmount();
+  });
+
+  test('should use custom OG image when provided', () => {
+    const customOgImage = {
+      og: {
+        image: {
+          url: '/custom-image.jpg'
+        }
+      }
+    };
+    
+    const { unmount } = renderWithMeta(() => <Head {...customOgImage} />);
+    
+    const ogImage = document.querySelector('meta[property="og:image"]');
+    // The actual implementation prepends siteUrl, but since siteUrl is empty in test, it just returns the path
+    expect(ogImage?.getAttribute('content')).toContain('custom-image.jpg');
+    
+    unmount();
+  });
+
+  test('should use default OG image when custom image is not provided', () => {
+    const { unmount } = renderWithMeta(() => <Head />);
+    
+    const ogImage = document.querySelector('meta[property="og:image"]');
+    expect(ogImage?.getAttribute('content')).toBe('https://example.com/default-og-image.jpg');
+    
+    unmount();
+  });
+}); 

apps/solidjs-boilerplate/src/components/modules/Head/Head.test.tsx

@@ -1,4 +1,3 @@
-import type { CreateQueryResult } from '@tanstack/solid-query';
 import { createQuery } from '@tanstack/solid-query';
 
 import type { Post } from '@/types/api/post.interface';
@@ -16,7 +15,7 @@ const useFetchPost = (id: string) => {
   //   queryFn: fetchData,
   // }));
 
-  const query: CreateQueryResult<Post, Error> = createQuery(() => ({
+  const query = createQuery(() => ({
     // Array Keys with variables
     // @ https://tanstack.com/query/v4/docs/react/guides/query-keys?from=reactQueryV3&original=https%3A%2F%2Freact-query-v3.tanstack.com%2Fguides%2Fquery-keys#array-keys-with-variables
     queryKey: [`/posts/`, id],

apps/solidjs-boilerplate/src/hooks/useFetchPost.tsx

@@ -1,4 +1,3 @@
-import type { CreateQueryResult } from '@tanstack/solid-query';
 import { createQuery } from '@tanstack/solid-query';
 
 import type { Post } from '@/types/api/post.interface';
@@ -16,7 +15,7 @@ const useFetchPostList = () => {
   //   queryFn: fetchData,
   // }));
 
-  const query: CreateQueryResult<Post[], Error> = createQuery(() => ({
+  const query = createQuery(() => ({
     queryKey: ['/posts'],
     queryFn: async () => {
       const result = await fetch(`${apiEndpointUrl}/posts`);