Added Node 20 support and updated other Vue related packages. (#2)

* Added Node 20 support and updated other Vue related packages/
ideasbucketlabs · Oct 30, 2023 · 643b798 · 643b798
1 parent d857326
commit 643b798
Show file tree

Hide file tree

Showing 10 changed files with 630 additions and 1,342 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -30,7 +30,7 @@ jobs:
             -   uses: actions/checkout@v3
             -   uses: actions/setup-node@v3
                 with:
-                    node-version: 18
+                    node-version: 20
 
             -   name: Install dependencies
                 run: npm ci

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -13,7 +13,7 @@ jobs:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
-                  node-version: 18
+                  node-version: 20
 
             - name: Install dependencies
               run: npm ci
@@ -34,7 +34,7 @@ jobs:
 #              run: npx playwright install --with-deps
 #
 #            - name: Run Playwright tests
-#              run: npx playwright test
+#              run: HOME=/root npx playwright test
 #
 #            - uses: actions/upload-artifact@v3
 #              if: always()

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.17.1
+v20.9.0
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "scripts": {
         "dev": "vite",
-        "build": "run-p type-check build-only",
+        "build": "run-p type-check \"build-only {@}\" --",
         "preview": "vite preview",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run --root src/",
@@ -28,19 +28,19 @@
         "marked": "^9.0.3",
         "pinia": "^2.1.4",
         "prismjs": "^1.29.0",
-        "vue": "^3.3.4"
+        "vue": "^3.3.7"
     },
     "devDependencies": {
         "@playwright/test": "^1.36.1",
         "@rushstack/eslint-patch": "^1.3.2",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",
-        "@tsconfig/node18": "^18.2.0",
+        "@tsconfig/node20": "^20.1.2",
         "@types/file-saver": "^2.0.5",
         "@types/jsdom": "^21.1.1",
         "@types/lodash.partition": "^4.6.7",
         "@types/marked": "^6.0.0",
-        "@types/node": "^18.17.0",
+        "@types/node": "^20.8.9",
         "@types/prismjs": "^1.26.1",
         "@vitejs/plugin-vue": "^4.2.3",
         "@vue/eslint-config-prettier": "^8.0.0",
@@ -54,7 +54,7 @@
         "husky": "^8.0.3",
         "jsdom": "^22.1.0",
         "nodemon": "^3.0.1",
-        "npm-run-all": "^4.1.5",
+        "npm-run-all2": "^6.1.1",
         "postcss": "^8.4.23",
         "prettier": "^3.0.0",
         "prettier-plugin-tailwindcss": "^0.5.3",

diff --git a/src/App.vue b/src/App.vue
@@ -87,7 +87,7 @@ const vueJsProject = ref<{ active: boolean; valid: boolean; metaData: VueJsProje
         language: Language.Typescript,
         name: 'demo',
         artifact: 'demo',
-        nodeVersion: 18,
+        nodeVersion: 20,
         includeUnitTest: true,
         includePinia: false,
         indentSize: 2,

diff --git a/src/components/VueJsProject.vue b/src/components/VueJsProject.vue
@@ -3,7 +3,6 @@ import { computed, ref, watch } from 'vue'
 import type { VueJsProject as VueJsProjectType } from '@/entity/VueJsProject'
 import { clone } from '@/util/Util'
 import { Language } from '@/entity/Language'
-import InformationIcon from '@/icons/InformationIcon.vue'
 import BaseInput from '@/components/BaseInput.vue'
 
 const props = defineProps<{
@@ -19,7 +18,7 @@ const information = clone(props.modelValue.metaData)
 const description = ref<string>(information.description)
 const name = ref<string>(information.name)
 const language = ref<Language.Javascript | Language.Typescript>(information.language)
-const nodeVersion = ref<number>(information.nodeVersion)
+const nodeVersion = ref<18 | 20>(information.nodeVersion)
 const includeRouter = ref<boolean>(information.includeRouter)
 const includeUnitTest = ref<boolean>(information.includeUnitTest)
 const includePinia = ref<boolean>(information.includePinia)
@@ -123,6 +122,13 @@ function validate() {
 
 <template>
     <div class="space-y-4">
+        <div class="">
+            <div class="font-medium">Node version</div>
+            <div class="flex space-x-4">
+                <BaseInput type="radio" v-model.number="nodeVersion" :value="18" label="18"></BaseInput>
+                <BaseInput type="radio" v-model.number="nodeVersion" :value="20" label="20"></BaseInput>
+            </div>
+        </div>
         <div class="">
             <div class="font-medium">Language Preference</div>
             <div class="flex space-x-4">
@@ -132,15 +138,6 @@ function validate() {
         </div>
         <div class="font-medium">Project Metadata</div>
         <div class="space-y-4">
-            <div class="flex items-center rounded bg-primary-100 dark:bg-primary-500 shadow-lg p-4 space-x-4">
-                <div class="">
-                    <InformationIcon
-                        class="w-10 fill-current text-primary-500 dark:text-white"
-                        aria-label="Information"
-                    ></InformationIcon>
-                </div>
-                <div class="">Please note project will be generated based on Node 18 (LTS).</div>
-            </div>
             <BaseInput v-model="name" label="Name:" :error="nameError" :has-error="haveError('name')"></BaseInput>
             <div class="">
                 <div class="block">Artifact (name of the zip file):</div>

diff --git a/src/entity/VueJsProject.ts b/src/entity/VueJsProject.ts
@@ -5,7 +5,7 @@ export interface VueJsProject {
     name: string
     description: string
     artifact: string
-    nodeVersion: number
+    nodeVersion: 18 | 20
     includeUnitTest: boolean
     includePinia: boolean
     includeRouter: boolean

diff --git a/src/generator/vuejs/VueJsProjectGenerator.ts b/src/generator/vuejs/VueJsProjectGenerator.ts
@@ -133,8 +133,10 @@ function getPackageJson(projectMetaData: VueJsProject, dependencies: Package[],
         },
         ...(typescriptSelected
             ? {
-                  'type-check': 'vue-tsc --noEmit -p tsconfig.app.json --composite false',
-                  build: 'run-p type-check build-only',
+                  'type-check': projectMetaData.includeUnitTest
+                      ? 'vue-tsc --noEmit -p tsconfig.vitest.json --composite false'
+                      : 'vue-tsc --noEmit -p tsconfig.app.json --composite false',
+                  build: 'run-p type-check "build-only {@}" --',
                   'build-only': 'vite build'
               }
             : {
@@ -197,36 +199,37 @@ function getPackageJson(projectMetaData: VueJsProject, dependencies: Package[],
             },
             ...(projectMetaData.includeRouter
                 ? {
-                      'vue-router': '^4.2.4'
+                      'vue-router': '^4.2.5'
                   }
                 : {}),
             ...(projectMetaData.includePinia
                 ? {
-                      pinia: '^2.1.6'
+                      pinia: '^2.1.7'
                   }
                 : {}),
             ...userChosenExplicitDependency
         },
         devDependencies: {
             ...{
-                '@vitejs/plugin-vue': '^4.3.1',
-                vite: '^4.4.9'
+                '@vitejs/plugin-vue': '^4.4.0',
+                vite: '^4.4.11'
             },
             ...(typescriptSelected
                 ? {
-                      '@tsconfig/node18': '^18.2.0',
-                      '@types/node': '^18.17.5',
+                      [`@tsconfig/node${projectMetaData.nodeVersion}`]:
+                          projectMetaData.nodeVersion === 18 ? '^18.2.2' : '^20.1.2',
+                      '@types/node': projectMetaData.nodeVersion === 18 ? '^18.18.7' : '^20.8.9',
                       '@vue/tsconfig': '^0.4.0',
-                      'npm-run-all': '^4.1.5',
-                      'vue-tsc': '^1.8.8',
+                      'npm-run-all2': '^6.1.1',
+                      'vue-tsc': '^1.8.19',
                       typescript: '~5.2.0'
                   }
                 : {}),
             ...(projectMetaData.includeEslint
                 ? {
-                      '@rushstack/eslint-patch': '^1.3.2',
-                      eslint: '^8.46.0',
-                      'eslint-plugin-vue': '^9.16.1'
+                      '@rushstack/eslint-patch': '^1.3.3',
+                      eslint: '^8.49.0',
+                      'eslint-plugin-vue': '^9.17.1'
                   }
                 : {}),
             ...(projectMetaData.includeEslint && typescriptSelected
@@ -236,47 +239,47 @@ function getPackageJson(projectMetaData: VueJsProject, dependencies: Package[],
                 : {}),
             ...(projectMetaData.includePrettier
                 ? {
-                      prettier: '^3.0.0',
+                      prettier: '^3.0.3',
                       '@vue/eslint-config-prettier': '^8.0.0'
                   }
                 : {}),
             ...(projectMetaData.includeUnitTest
                 ? {
                       jsdom: '^22.1.0',
-                      vitest: '^0.34.2',
+                      vitest: '^0.34.6',
                       '@vue/test-utils': '^2.4.1'
                   }
                 : {}),
             ...(projectMetaData.includeUnitTest && typescriptSelected
                 ? {
-                      '@types/jsdom': '^21.1.1'
+                      '@types/jsdom': '^21.1.3'
                   }
                 : {}),
             ...(projectMetaData.integrationTest === 'playwright'
                 ? {
-                      '@playwright/test': '^1.37.0'
+                      '@playwright/test': '^1.39.0'
                   }
                 : {}),
             ...(projectMetaData.integrationTest === 'cypress'
                 ? {
-                      cypress: '^12.17.4',
-                      'start-server-and-test': '^2.0.0'
+                      cypress: '^13.3.1',
+                      'start-server-and-test': '^2.0.1'
                   }
                 : {}),
             ...(projectMetaData.integrationTest === 'nightwatch'
                 ? {
                       '@nightwatch/vue': '0.4.5',
-                      '@types/nightwatch': '^2.3.25',
-                      chromedriver: '^115.0.1',
-                      geckodriver: '^4.2.0',
-                      nightwatch: '^3.1.2',
+                      '@types/nightwatch': '^2.3.26',
+                      chromedriver: '^118.0.1',
+                      geckodriver: '^4.2.1',
+                      nightwatch: '^3.2.1',
                       'wait-on': '^7.0.1',
                       'ts-node': '^10.9.1'
                   }
                 : {}),
             ...(projectMetaData.integrationTest === 'cypress' && projectMetaData.includeEslint
                 ? {
-                      'eslint-plugin-cypress': '^2.14.0'
+                      'eslint-plugin-cypress': '^2.15.1'
                   }
                 : {}),
             ...userChosenExplicitDevDependency
@@ -286,10 +289,10 @@ function getPackageJson(projectMetaData: VueJsProject, dependencies: Package[],
     return JSON.stringify(final, null, projectMetaData.indentSize)
 }
 
-function getTsConfigNodeJson(indentSize: number): string {
+function getTsConfigNodeJson(metadata: VueJsProject): string {
     return JSON.stringify(
         {
-            extends: '@tsconfig/node18/tsconfig.json',
+            extends: `@tsconfig/node${metadata.nodeVersion}/tsconfig.json`,
             include: [
                 'vite.config.*',
                 'vitest.config.*',
@@ -305,7 +308,7 @@ function getTsConfigNodeJson(indentSize: number): string {
             }
         },
         null,
-        indentSize
+        metadata.indentSize
     )
 }
 
@@ -600,7 +603,7 @@ export function getContent(projectMetaData: { metadata: VueJsProject; dependenci
                 lang: Language.Json,
                 id: getId(),
                 type: ContentType.File,
-                content: getTsConfigNodeJson(projectMetaData.metadata.indentSize)
+                content: getTsConfigNodeJson(projectMetaData.metadata)
             },
             {
                 name: 'env.d.ts',

diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -1,5 +1,5 @@
 {
-    "extends": "@tsconfig/node18/tsconfig.json",
+    "extends": "@tsconfig/node20/tsconfig.json",
     "include": [
         "vite.config.*",
         "vitest.config.*",