chore(deps): update node to 22, npm packages

2026-01-26 03:24:03 +00:00 · 2024-08-20 02:34:37 +03:00
parent 2b8a6692b8
commit ada9fc0f59
13 changed files with 585 additions and 618 deletions
--- a/.envrc
+++ b/.envrc
@@ -0,0 +1 @@
+use asdf
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -3,7 +3,7 @@ require('@rushstack/eslint-patch/modern-module-resolution')

 module.exports = {
  root: true,
-  'extends': [
+  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -30,7 +30,7 @@ jobs:

    strategy:
      matrix:
-        node-version: [20.x]
+        node-version: [22.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
--- a/.github/workflows/pr-build.yml
+++ b/.github/workflows/pr-build.yml
@@ -14,7 +14,7 @@ jobs:

    strategy:
      matrix:
-        node-version: [20.x]
+        node-version: [22.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+22.6.0
--- a/index.html
+++ b/index.html
@@ -1,17 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="favicon.ico">
-    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
-    <link rel="manifest" href="site.webmanifest">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>sysvinit service generator</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="favicon.ico">
+  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+  <link rel="manifest" href="site.webmanifest">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>sysvinit service generator</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,10 +5,12 @@ let service = defineModel('service', { default: 'my-service' })
 let description = defineModel('description', { default: 'This command does something' })
 let username = defineModel('username', { default: 'root' })
 let command = defineModel('command', { default: '/usr/local/bin/command' })
-let servicePath = ref('/etc/init.d/' + service.value )
+let servicePath = ref('/etc/init.d/' + service.value)
 let logRotatePath = ref('/etc/logrotate.d/' + service.value)

-let shellCommands = ref(`sudo chmod +x ${servicePath.value} && sudo update-rc.d ${service.value} defaults`)
+let shellCommands = ref(
+  `sudo chmod +x ${servicePath.value} && sudo update-rc.d ${service.value} defaults`
+)

 let serviceTemplateString = `#!/usr/bin/env sh
 ### BEGIN INIT INFO
@@ -127,18 +129,20 @@ let serviceTemplate = serviceTemplateString

 let logRotate = logRotateString.replace(/<NAME>/g, service.value)

-watch([service, description, username, command], ([newService, newDescription, newUsername, newCommand]) => {
-  serviceTemplate = serviceTemplateString
-    .replace(/<NAME>/g, newService)
-    .replace(/<DESCRIPTION>/g, newDescription)
-    .replace(/<USERNAME>/g, newUsername)
-    .replace(/<COMMAND>/g, newCommand)
-  servicePath.value = '/etc/init.d/' + newService
-  logRotate = logRotateString.replace(/<NAME>/g, newService)
-  logRotatePath.value = '/etc/logrotate.d/' + newService
-  shellCommands.value = `sudo chmod +x ${servicePath.value} && sudo update-rc.d ${newService} defaults`
-})
-
+watch(
+  [service, description, username, command],
+  ([newService, newDescription, newUsername, newCommand]) => {
+    serviceTemplate = serviceTemplateString
+      .replace(/<NAME>/g, newService)
+      .replace(/<DESCRIPTION>/g, newDescription)
+      .replace(/<USERNAME>/g, newUsername)
+      .replace(/<COMMAND>/g, newCommand)
+    servicePath.value = '/etc/init.d/' + newService
+    logRotate = logRotateString.replace(/<NAME>/g, newService)
+    logRotatePath.value = '/etc/logrotate.d/' + newService
+    shellCommands.value = `sudo chmod +x ${servicePath.value} && sudo update-rc.d ${newService} defaults`
+  }
+)
 </script>

 <template>
@@ -168,11 +172,15 @@ watch([service, description, username, command], ([newService, newDescription, n

  <main>
    <h3>Generated service script:</h3>
-    <div>Path: <code>{{ servicePath }}</code></div>
+    <div>
+      Path: <code>{{ servicePath }}</code>
+    </div>
    <textarea style="height: 400px" v-text="serviceTemplate"></textarea>
    <details>
      <summary>Logrotate</summary>
-      <div>Path: <code>{{ logRotatePath }}</code></div>
+      <div>
+        Path: <code>{{ logRotatePath }}</code>
+      </div>
      <textarea class="just-right noresize" v-text="logRotate"></textarea>
    </details>
    <details>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,69 +1,71 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
-    --vt-c-white: #ffffff;
-    --vt-c-white-soft: #f8f8f8;
-    --vt-c-white-mute: #f2f2f2;
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;

-    --vt-c-black: #181818;
-    --vt-c-black-soft: #222222;
-    --vt-c-black-mute: #282828;
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;

-    --vt-c-indigo: #2c3e50;
+  --vt-c-indigo: #2c3e50;

-    --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-    --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-    --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-    --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

-    --vt-c-text-light-1: var(--vt-c-indigo);
-    --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-    --vt-c-text-dark-1: var(--vt-c-white);
-    --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);

-    /* semantic color variables for this project */
-    --color-background: var(--vt-c-white);
-    --color-background-soft: var(--vt-c-white-soft);
-    --color-background-mute: var(--vt-c-white-mute);
+  /* semantic color variables for this project */
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);

-    --color-border: var(--vt-c-divider-light-2);
-    --color-border-hover: var(--vt-c-divider-light-1);
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);

-    --color-heading: var(--vt-c-text-light-1);
-    --color-text: var(--vt-c-text-light-1);
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);

-    --section-gap: 160px;
+  --section-gap: 160px;
 }

@media (prefers-color-scheme: dark) {
-    :root {
-        --color-background: var(--vt-c-black);
-        --color-background-soft: var(--vt-c-black-soft);
-        --color-background-mute: var(--vt-c-black-mute);
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);

-        --color-border: var(--vt-c-divider-dark-2);
-        --color-border-hover: var(--vt-c-divider-dark-1);
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);

-        --color-heading: var(--vt-c-text-dark-1);
-        --color-text: var(--vt-c-text-dark-2);
-    }
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
 }

 *,
 *::before,
 *::after {
-    box-sizing: border-box;
-    margin: 0;
-    font-weight: normal;
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
 }

 body {
-    min-height: 100vh;
-    color: var(--color-text);
-    background: var(--color-background);
-    transition: color 0.5s,
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
    background-color 0.5s;
-    line-height: 1.6;
-    font-family: Inter,
+  line-height: 1.6;
+  font-family:
+    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
@@ -75,8 +77,8 @@ body {
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
-    font-size: 15px;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,102 +1,101 @@
@import './base.css';

 #app {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
-    font-weight: normal;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
 }

 a,
 .green {
-    text-decoration: none;
-    color: hsla(160, 100%, 37%, 1);
-    transition: 0.4s;
-    padding: 3px;
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
 }

 header {
-    line-height: 1.2;
+  line-height: 1.2;
 }

 label {
-    display: block;
-    margin-bottom: 1rem;
+  display: block;
+  margin-bottom: 1rem;

-    input {
-        display: block;
-        margin-top: 1rem;
-        padding: 0.4rem;
-        font-size: 1rem;
-        border: 1px solid var(--color-border);
-        border-radius: 4px;
-    }
+  input {
+    display: block;
+    margin-top: 1rem;
+    padding: 0.4rem;
+    font-size: 1rem;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+  }
 }

 h1 {
-    font-weight: 500;
-    font-size: 2.6rem;
-    margin-bottom: 2rem;
+  font-weight: 500;
+  font-size: 2.6rem;
+  margin-bottom: 2rem;
 }

 h3 {
-    font-size: 1.2rem;
+  font-size: 1.2rem;
 }

-
@media (hover: hover) {
-    a:hover {
-        background-color: hsla(160, 100%, 37%, 0.2);
-    }
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
 }

@media (min-width: 1024px) {
-    body {
-        display: flex;
-        place-items: center;
-    }
+  body {
+    display: flex;
+    place-items: center;
+  }

-    #app {
-        display: grid;
-        grid-template-columns: 1fr 2fr;
-        padding: 0 2rem;
-    }
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    padding: 0 2rem;
+  }

-    footer {
-        border-top: 1px solid var(--color-border);
-        padding-top: 1rem;
-        grid-column: 1 / -1;
-    }
+  footer {
+    border-top: 1px solid var(--color-border);
+    padding-top: 1rem;
+    grid-column: 1 / -1;
+  }
 }

 textarea {
-    width: 100%;
-    min-width: 100%;
-    max-width: fit-content;
-    padding: 1rem;
-    margin: 1rem 0;
-    border: 1px solid hsla(160, 100%, 37%, 1);
-    border-radius: 5px;
-    background: #222222;
-    color: #f8f8f8;
-    font-family: monospace;
+  width: 100%;
+  min-width: 100%;
+  max-width: fit-content;
+  padding: 1rem;
+  margin: 1rem 0;
+  border: 1px solid hsla(160, 100%, 37%, 1);
+  border-radius: 5px;
+  background: #222222;
+  color: #f8f8f8;
+  font-family: monospace;

-    &.just-right {
-        height: fit-content;
-        min-height: fit-content;
-        max-height: fit-content;
-    }
+  &.just-right {
+    height: fit-content;
+    min-height: fit-content;
+    max-height: fit-content;
+  }

-    &.noresize {
-        resize: none;
-    }
+  &.noresize {
+    resize: none;
+  }
 }

 summary {
-    cursor: pointer;
+  cursor: pointer;
 }

 footer {
-    margin-top: 2rem;
-    text-align: center;
+  margin-top: 2rem;
+  text-align: center;
 }
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,14 +1,21 @@
 {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
    "baseUrl": ".",
    "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
    }
  }
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -11,9 +11,10 @@
    "composite": true,
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-
    "module": "ESNext",
    "moduleResolution": "Bundler",
-    "types": ["node"]
+    "types": [
+      "node"
+    ]
  }
 }