IT4Change/boilerplate-frontend
3
0
Fork 0
mirror of https://github.com/IT4Change/boilerplate-frontend.git synced 2025-12-13 07:35:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

install prettier

Browse Source
This commit is contained in:
Ulf Gebhardt 2023-11-15 12:11:26 +01:00
parent 030052863c
commit a15c96fbba
Signed by: ulfgebhardt
GPG Key ID: DA6B843E748679C9
15 changed files with 567 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.eslintrc.json
View File

@ -4,13 +4,15 @@
"es2021": true "es2021": true
}, },
"extends": [ "extends": [
//"standard",
"eslint:recommended", "eslint:recommended",
"plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended",
"plugin:vue/base", "plugin:vue/base",
"plugin:vue/vue3-essential", "plugin:vue/vue3-essential",
"plugin:vue/vue3-recommended", "plugin:vue/vue3-recommended",
"plugin:vuetify/base", "plugin:vuetify/base",
"plugin:vuetify/recommended" "plugin:vuetify/recommended",
"plugin:prettier/recommended"
], ],
"parserOptions": { "parserOptions": {
"ecmaVersion": "latest", "ecmaVersion": "latest",
@ -19,12 +21,13 @@
}, },
"plugins": [ "plugins": [
"@typescript-eslint", "@typescript-eslint",
"prettier",
"vue" "vue"
], ],
"rules": { "rules": {
"indent": [ "indent": [
"error", "error",
4 2
], ],
"linebreak-style": [ "linebreak-style": [
"error", "error",

14
.prettierrc.json Normal file
View File

@ -0,0 +1,14 @@
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "always",
"endOfLine": "auto"
}

371
package-lock.json generated
View File

@ -41,8 +41,11 @@
"@typescript-eslint/eslint-plugin": "^6.11.0", "@typescript-eslint/eslint-plugin": "^6.11.0",
"@typescript-eslint/parser": "^6.11.0", "@typescript-eslint/parser": "^6.11.0",
"eslint": "^8.53.0", "eslint": "^8.53.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-vue": "^9.18.1", "eslint-plugin-vue": "^9.18.1",
"eslint-plugin-vuetify": "^2.1.0", "eslint-plugin-vuetify": "^2.1.0",
"prettier": "^3.1.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"storybook": "^7.5.3" "storybook": "^7.5.3"
@ -3214,6 +3217,56 @@
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/@pkgr/utils": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
"integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
"dev": true,
"dependencies": {
"cross-spawn": "^7.0.3",
"fast-glob": "^3.3.0",
"is-glob": "^4.0.3",
"open": "^9.1.0",
"picocolors": "^1.0.0",
"tslib": "^2.6.0"
},
"engines": {
"node": "^12.20.0 || ^14.18.0 || >=16.0.0"
},
"funding": {
"url": "https://opencollective.com/unts"
}
},
"node_modules/@pkgr/utils/node_modules/define-lazy-prop": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
"integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
"dev": true,
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@pkgr/utils/node_modules/open": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
"integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
"dev": true,
"dependencies": {
"default-browser": "^4.0.0",
"define-lazy-prop": "^3.0.0",
"is-inside-container": "^1.0.0",
"is-wsl": "^2.2.0"
},
"engines": {
"node": ">=14.16"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@polka/url": { "node_modules/@polka/url": {
"version": "1.0.0-next.23", "version": "1.0.0-next.23",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",
@ -4878,6 +4931,21 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/@storybook/cli/node_modules/prettier": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/@storybook/cli/node_modules/semver": { "node_modules/@storybook/cli/node_modules/semver": {
"version": "7.5.4", "version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@ -4938,6 +5006,21 @@
"url": "https://opencollective.com/storybook" "url": "https://opencollective.com/storybook"
} }
}, },
"node_modules/@storybook/codemod/node_modules/prettier": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/@storybook/components": { "node_modules/@storybook/components": {
"version": "7.5.3", "version": "7.5.3",
"resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.5.3.tgz", "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.5.3.tgz",
@ -7607,6 +7690,21 @@
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==" "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
}, },
"node_modules/bundle-name": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
"integrity": "sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==",
"dev": true,
"dependencies": {
"run-applescript": "^5.0.0"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/bytes": { "node_modules/bytes": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@ -8160,6 +8258,24 @@
"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
"dev": true "dev": true
}, },
"node_modules/default-browser": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
"integrity": "sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==",
"dev": true,
"dependencies": {
"bundle-name": "^3.0.0",
"default-browser-id": "^3.0.0",
"execa": "^7.1.1",
"titleize": "^3.0.0"
},
"engines": {
"node": ">=14.16"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/default-browser-id": { "node_modules/default-browser-id": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz", "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
@ -8176,6 +8292,116 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/default-browser/node_modules/execa": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
"integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
"dev": true,
"dependencies": {
"cross-spawn": "^7.0.3",
"get-stream": "^6.0.1",
"human-signals": "^4.3.0",
"is-stream": "^3.0.0",
"merge-stream": "^2.0.0",
"npm-run-path": "^5.1.0",
"onetime": "^6.0.0",
"signal-exit": "^3.0.7",
"strip-final-newline": "^3.0.0"
},
"engines": {
"node": "^14.18.0 || ^16.14.0 || >=18.0.0"
},
"funding": {
"url": "https://github.com/sindresorhus/execa?sponsor=1"
}
},
"node_modules/default-browser/node_modules/human-signals": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
"integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
"dev": true,
"engines": {
"node": ">=14.18.0"
}
},
"node_modules/default-browser/node_modules/is-stream": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
"integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
"dev": true,
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/default-browser/node_modules/mimic-fn": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
"integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
"dev": true,
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/default-browser/node_modules/npm-run-path": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
"integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
"dev": true,
"dependencies": {
"path-key": "^4.0.0"
},
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/default-browser/node_modules/onetime": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
"integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
"dev": true,
"dependencies": {
"mimic-fn": "^4.0.0"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/default-browser/node_modules/path-key": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
"integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
"dev": true,
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/default-browser/node_modules/strip-final-newline": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
"integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
"dev": true,
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/defaults": { "node_modules/defaults": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz", "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@ -8785,6 +9011,47 @@
"url": "https://opencollective.com/eslint" "url": "https://opencollective.com/eslint"
} }
}, },
"node_modules/eslint-config-prettier": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
"integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
"dev": true,
"bin": {
"eslint-config-prettier": "bin/cli.js"
},
"peerDependencies": {
"eslint": ">=7.0.0"
}
},
"node_modules/eslint-plugin-prettier": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.1.tgz",
"integrity": "sha512-m3u5RnR56asrwV/lDC4GHorlW75DsFfmUcjfCYylTUs85dBRnB7VM6xG8eCMJdeDRnppzmxZVf1GEPJvl1JmNg==",
"dev": true,
"dependencies": {
"prettier-linter-helpers": "^1.0.0",
"synckit": "^0.8.5"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"funding": {
"url": "https://opencollective.com/prettier"
},
"peerDependencies": {
"@types/eslint": ">=8.0.0",
"eslint": ">=8.0.0",
"prettier": ">=3.0.0"
},
"peerDependenciesMeta": {
"@types/eslint": {
"optional": true
},
"eslint-config-prettier": {
"optional": true
}
}
},
"node_modules/eslint-plugin-vue": { "node_modules/eslint-plugin-vue": {
"version": "9.18.1", "version": "9.18.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.18.1.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.18.1.tgz",
@ -9248,6 +9515,12 @@
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
}, },
"node_modules/fast-diff": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
"integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
"dev": true
},
"node_modules/fast-glob": { "node_modules/fast-glob": {
"version": "3.3.2", "version": "3.3.2",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@ -10444,6 +10717,39 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/is-inside-container": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
"integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
"dev": true,
"dependencies": {
"is-docker": "^3.0.0"
},
"bin": {
"is-inside-container": "cli.js"
},
"engines": {
"node": ">=14.16"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/is-inside-container/node_modules/is-docker": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
"integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
"dev": true,
"bin": {
"is-docker": "cli.js"
},
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/is-interactive": { "node_modules/is-interactive": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz", "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
@ -12216,20 +12522,32 @@
} }
}, },
"node_modules/prettier": { "node_modules/prettier": {
"version": "2.8.8", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==",
"dev": true, "dev": true,
"bin": { "bin": {
"prettier": "bin-prettier.js" "prettier": "bin/prettier.cjs"
}, },
"engines": { "engines": {
"node": ">=10.13.0" "node": ">=14"
}, },
"funding": { "funding": {
"url": "https://github.com/prettier/prettier?sponsor=1" "url": "https://github.com/prettier/prettier?sponsor=1"
} }
}, },
"node_modules/prettier-linter-helpers": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
"dev": true,
"dependencies": {
"fast-diff": "^1.1.2"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/pretty-format": { "node_modules/pretty-format": {
"version": "27.5.1", "version": "27.5.1",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@ -13187,6 +13505,21 @@
"fsevents": "~2.3.2" "fsevents": "~2.3.2"
} }
}, },
"node_modules/run-applescript": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-5.0.0.tgz",
"integrity": "sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==",
"dev": true,
"dependencies": {
"execa": "^5.0.0"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/run-parallel": { "node_modules/run-parallel": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@ -13811,6 +14144,22 @@
"integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==", "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
"dev": true "dev": true
}, },
"node_modules/synckit": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
"integrity": "sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==",
"dev": true,
"dependencies": {
"@pkgr/utils": "^2.3.1",
"tslib": "^2.5.0"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"funding": {
"url": "https://opencollective.com/unts"
}
},
"node_modules/tapable": { "node_modules/tapable": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@ -14183,6 +14532,18 @@
"integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==", "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
"dev": true "dev": true
}, },
"node_modules/titleize": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
"integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
"dev": true,
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/tmpl": { "node_modules/tmpl": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",

3
package.json
View File

@ -70,8 +70,11 @@
"@typescript-eslint/eslint-plugin": "^6.11.0", "@typescript-eslint/eslint-plugin": "^6.11.0",
"@typescript-eslint/parser": "^6.11.0", "@typescript-eslint/parser": "^6.11.0",
"eslint": "^8.53.0", "eslint": "^8.53.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-vue": "^9.18.1", "eslint-plugin-vue": "^9.18.1",
"eslint-plugin-vuetify": "^2.1.0", "eslint-plugin-vuetify": "^2.1.0",
"prettier": "^3.1.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"storybook": "^7.5.3" "storybook": "^7.5.3"

8
renderer/_default.page.client.ts
View File

@ -5,10 +5,10 @@ import type { PageContextClient } from './types'
// This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
async function render(pageContext: PageContextClient) { async function render(pageContext: PageContextClient) {
const { Page, pageProps } = pageContext const { Page, pageProps } = pageContext
if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined') if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined')
const app = createApp(Page, pageProps, pageContext) const app = createApp(Page, pageProps, pageContext)
app.mount('#app') app.mount('#app')
} }
/* To enable Client-side Routing: /* To enable Client-side Routing:

48
renderer/_default.page.server.ts
View File

@ -10,19 +10,19 @@ import logoUrl from './logo.svg'
import type { PageContextServer } from './types' import type { PageContextServer } from './types'
async function render(pageContext: PageContextServer) { async function render(pageContext: PageContextServer) {
const { Page, pageProps } = pageContext const { Page, pageProps } = pageContext
// This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
if (!Page) throw new Error('My render() hook expects pageContext.Page to be defined') if (!Page) throw new Error('My render() hook expects pageContext.Page to be defined')
const app = createApp(Page, pageProps, pageContext) const app = createApp(Page, pageProps, pageContext)
const appHtml = await renderToString(app) const appHtml = await renderToString(app)
// See https://vike.dev/head // See https://vike.dev/head
const { documentProps } = pageContext.exports const { documentProps } = pageContext.exports
const title = (documentProps && documentProps.title) || 'Vite SSR app' const title = (documentProps && documentProps.title) || 'Vite SSR app'
const desc = (documentProps && documentProps.description) || 'App using Vite + Vike' const desc = (documentProps && documentProps.description) || 'App using Vite + Vike'
const documentHtml = escapeInject`<!DOCTYPE html> const documentHtml = escapeInject`<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -36,21 +36,21 @@ async function render(pageContext: PageContextServer) {
</body> </body>
</html>` </html>`
return { return {
documentHtml, documentHtml,
pageContext: { pageContext: {
// We can add some `pageContext` here, which is useful if we want to do page redirection https://vike.dev/page-redirection // We can add some `pageContext` here, which is useful if we want to do page redirection https://vike.dev/page-redirection
} },
} }
} }
async function renderToString(app: App) { async function renderToString(app: App) {
let err: unknown let err: unknown
// Workaround: renderToString_() swallows errors in production, see https://github.com/vuejs/core/issues/7876 // Workaround: renderToString_() swallows errors in production, see https://github.com/vuejs/core/issues/7876
app.config.errorHandler = (err_) => { app.config.errorHandler = (err_) => {
err = err_ err = err_
} }
const appHtml = await renderToString_(app) const appHtml = await renderToString_(app)
if (err) throw err if (err) throw err
return appHtml return appHtml
} }

41
renderer/app.ts
View File

@ -5,31 +5,30 @@ import type { Component, PageContext, PageProps } from './types'
import vuetify from './vuetify' import vuetify from './vuetify'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
export { createApp } export { createApp }
function createApp(Page: Component, pageProps: PageProps | undefined, pageContext: PageContext) { function createApp(Page: Component, pageProps: PageProps | undefined, pageContext: PageContext) {
const PageWithLayout = defineComponent({ const PageWithLayout = defineComponent({
render() { render() {
return h( return h(
PageShell, PageShell,
{}, {},
{ {
default() { default() {
return h(Page, pageProps || {}) return h(Page, pageProps || {})
} },
} },
) )
} },
}) })
const pinia = createPinia() const pinia = createPinia()
const app = createSSRApp(PageWithLayout) const app = createSSRApp(PageWithLayout)
app.use(pinia) app.use(pinia)
app.use(vuetify) app.use(vuetify)
// Make pageContext available from any Vue component // Make pageContext available from any Vue component
setPageContext(app, pageContext) setPageContext(app, pageContext)
return app return app
} }

12
renderer/types.ts
View File

@ -1,14 +1,14 @@
export type { export type {
PageContextServer, PageContextServer,
/* /*
// When using Client Routing https://vike.dev/clientRouting // When using Client Routing https://vike.dev/clientRouting
PageContextClient, PageContextClient,
PageContext, PageContext,
/*/ /*/
// When using Server Routing // When using Server Routing
PageContextClientWithServerRouting as PageContextClient, PageContextClientWithServerRouting as PageContextClient,
PageContextWithServerRouting as PageContext PageContextWithServerRouting as PageContext,
//*/ //*/
} from 'vike/types' } from 'vike/types'
export type { PageProps } export type { PageProps }
export type { Component } export type { Component }

8
renderer/usePageContext.ts
View File

@ -11,11 +11,11 @@ export { setPageContext }
const key: InjectionKey<PageContext> = Symbol() const key: InjectionKey<PageContext> = Symbol()
function usePageContext() { function usePageContext() {
const pageContext = inject(key) const pageContext = inject(key)
if (!pageContext) throw new Error('setPageContext() not called in parent') if (!pageContext) throw new Error('setPageContext() not called in parent')
return pageContext return pageContext
} }
function setPageContext(app: App, pageContext: PageContext) { function setPageContext(app: App, pageContext: PageContext) {
app.provide(key, pageContext) app.provide(key, pageContext)
} }

6
renderer/vuetify.ts
View File

@ -5,6 +5,6 @@ import * as components from 'vuetify/lib/components/index.mjs'
import * as directives from 'vuetify/lib/directives/index.mjs' import * as directives from 'vuetify/lib/directives/index.mjs'
export default createVuetify({ export default createVuetify({
components, components,
directives directives,
}) })

84
server/index.ts
View File

@ -20,55 +20,55 @@ const isProduction = process.env.NODE_ENV === 'production'
startServer() startServer()
async function startServer() { async function startServer() {
const app = express() const app = express()
app.use(compression()) app.use(compression())
// Vite integration // Vite integration
if (isProduction) { if (isProduction) {
// In production, we need to serve our static assets ourselves. // In production, we need to serve our static assets ourselves.
// (In dev, Vite's middleware serves our static assets.) // (In dev, Vite's middleware serves our static assets.)
const sirv = (await import('sirv')).default const sirv = (await import('sirv')).default
app.use(sirv(`${root}/dist/client`)) app.use(sirv(`${root}/dist/client`))
} else { } else {
// We instantiate Vite's development server and integrate its middleware to our server. // We instantiate Vite's development server and integrate its middleware to our server.
// ⚠️ We instantiate it only in development. (It isn't needed in production and it // ⚠️ We instantiate it only in development. (It isn't needed in production and it
// would unnecessarily bloat our production server.) // would unnecessarily bloat our production server.)
const vite = await import('vite') const vite = await import('vite')
const viteDevMiddleware = ( const viteDevMiddleware = (
await vite.createServer({ await vite.createServer({
root, root,
server: { middlewareMode: true } server: { middlewareMode: true },
}) })
).middlewares ).middlewares
app.use(viteDevMiddleware) app.use(viteDevMiddleware)
}
// ...
// Other middlewares (e.g. some RPC middleware such as Telefunc)
// ...
// Vike middleware. It should always be our last middleware (because it's a
// catch-all middleware superseding any middleware placed after it).
app.get('*', async (req, res, next) => {
const pageContextInit = {
urlOriginal: req.originalUrl,
} }
const pageContext = await renderPage(pageContextInit)
const { httpResponse } = pageContext
if (!httpResponse) {
return next()
} else {
const { body, statusCode, headers, earlyHints } = httpResponse
if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
headers.forEach(([name, value]) => res.setHeader(name, value))
res.status(statusCode)
// For HTTP streams use httpResponse.pipe() instead, see https://vike.dev/stream
res.send(body)
}
})
// ... const port = process.env.PORT || 3000
// Other middlewares (e.g. some RPC middleware such as Telefunc) app.listen(port)
// ... console.log(`Server running at http://localhost:${port}`)
// Vike middleware. It should always be our last middleware (because it's a
// catch-all middleware superseding any middleware placed after it).
app.get('*', async (req, res, next) => {
const pageContextInit = {
urlOriginal: req.originalUrl
}
const pageContext = await renderPage(pageContextInit)
const { httpResponse } = pageContext
if (!httpResponse) {
return next()
} else {
const { body, statusCode, headers, earlyHints } = httpResponse
if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
headers.forEach(([name, value]) => res.setHeader(name, value))
res.status(statusCode)
// For HTTP streams use httpResponse.pipe() instead, see https://vike.dev/stream
res.send(body)
}
})
const port = process.env.PORT || 3000
app.listen(port)
console.log(`Server running at http://localhost:${port}`)
} }

54
src/stories/Button.stories.ts
View File

@ -4,49 +4,49 @@ import Button from './Button.vue'
// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
const meta = { const meta = {
title: 'Example/Button', title: 'Example/Button',
component: Button, component: Button,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'], tags: ['autodocs'],
argTypes: { argTypes: {
size: { control: 'select', options: ['small', 'medium', 'large'] }, size: { control: 'select', options: ['small', 'medium', 'large'] },
backgroundColor: { control: 'color' }, backgroundColor: { control: 'color' },
onClick: { action: 'clicked' }, onClick: { action: 'clicked' },
}, },
args: { primary: false }, // default value args: { primary: false }, // default value
} satisfies Meta<typeof Button> } satisfies Meta<typeof Button>
export default meta export default meta
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>
/* /*
*👇 Render functions are a framework specific feature to allow you control on how the component renders. *👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/vue/api/csf * See https://storybook.js.org/docs/vue/api/csf
* to learn how to use render functions. * to learn how to use render functions.
*/ */
export const Primary: Story = { export const Primary: Story = {
args: { args: {
primary: true, primary: true,
label: 'Button', label: 'Button',
}, },
} }
export const Secondary: Story = { export const Secondary: Story = {
args: { args: {
primary: false, primary: false,
label: 'Button', label: 'Button',
}, },
} }
export const Large: Story = { export const Large: Story = {
args: { args: {
label: 'Button', label: 'Button',
size: 'large', size: 'large',
}, },
} }
export const Small: Story = { export const Small: Story = {
args: { args: {
label: 'Button', label: 'Button',
size: 'small', size: 'small',
}, },
} }

48
src/stories/Header.stories.ts
View File

@ -3,41 +3,41 @@ import type { Meta, StoryObj } from '@storybook/vue3'
import MyHeader from './Header.vue' import MyHeader from './Header.vue'
const meta = { const meta = {
/* 👇 The title prop is optional. /* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles * to learn how to generate automatic titles
*/ */
title: 'Example/Header', title: 'Example/Header',
component: MyHeader, component: MyHeader,
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
render: (args: any) => ({ render: (args: any) => ({
components: { MyHeader }, components: { MyHeader },
setup() { setup() {
return { args } return { args }
},
template: '<my-header :user="args.user" />',
}),
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
layout: 'fullscreen',
}, },
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs template: '<my-header :user="args.user" />',
tags: ['autodocs'], }),
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
layout: 'fullscreen',
},
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
} satisfies Meta<typeof MyHeader> } satisfies Meta<typeof MyHeader>
export default meta export default meta
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>
export const LoggedIn: Story = { export const LoggedIn: Story = {
args: { args: {
user: { user: {
name: 'Jane Doe', name: 'Jane Doe',
},
}, },
},
} }
export const LoggedOut: Story = { export const LoggedOut: Story = {
args: { args: {
user: null, user: null,
}, },
} }

40
src/stories/Page.stories.ts
View File

@ -3,33 +3,33 @@ import { within, userEvent } from '@storybook/testing-library'
import MyPage from './Page.vue' import MyPage from './Page.vue'
const meta = { const meta = {
title: 'Example/Page', title: 'Example/Page',
component: MyPage, component: MyPage,
render: () => ({ render: () => ({
components: { MyPage }, components: { MyPage },
template: '<my-page />', template: '<my-page />',
}), }),
parameters: { parameters: {
// More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layout // More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layout
layout: 'fullscreen', layout: 'fullscreen',
}, },
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'], tags: ['autodocs'],
} satisfies Meta<typeof MyPage> } satisfies Meta<typeof MyPage>
export default meta export default meta
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>
// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing // More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
export const LoggedIn: Story = { export const LoggedIn: Story = {
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
play: async ({ canvasElement }: any) => { play: async ({ canvasElement }: any) => {
const canvas = within(canvasElement) const canvas = within(canvasElement)
const loginButton = await canvas.getByRole('button', { const loginButton = await canvas.getByRole('button', {
name: /Log in/i, name: /Log in/i,
}) })
await userEvent.click(loginButton) await userEvent.click(loginButton)
}, },
} }
export const LoggedOut: Story = {} export const LoggedOut: Story = {}

10
vite.config.ts
View File

@ -3,11 +3,11 @@ import vike from 'vike/plugin'
import { UserConfig } from 'vite' import { UserConfig } from 'vite'
const config: UserConfig = { const config: UserConfig = {
plugins: [ plugins: [
vue(), vue(),
process.env.STORYBOOK !== 'true' && vike() // SSR only when storybook is not running process.env.STORYBOOK !== 'true' && vike(), // SSR only when storybook is not running
], ],
ssr: { noExternal: ['vuetify'] } ssr: { noExternal: ['vuetify'] },
} }
export default config export default config