diff --git a/.eslintrc.json b/.eslintrc.json index 7f2b0f0..8590e94 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,13 +4,15 @@ "es2021": true }, "extends": [ + //"standard", "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:vue/base", "plugin:vue/vue3-essential", "plugin:vue/vue3-recommended", "plugin:vuetify/base", - "plugin:vuetify/recommended" + "plugin:vuetify/recommended", + "plugin:prettier/recommended" ], "parserOptions": { "ecmaVersion": "latest", @@ -19,12 +21,13 @@ }, "plugins": [ "@typescript-eslint", + "prettier", "vue" ], "rules": { "indent": [ "error", - 4 + 2 ], "linebreak-style": [ "error", diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..1db2a8c --- /dev/null +++ b/.prettierrc.json @@ -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" +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0cd2369..509eb83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,8 +41,11 @@ "@typescript-eslint/eslint-plugin": "^6.11.0", "@typescript-eslint/parser": "^6.11.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-vuetify": "^2.1.0", + "prettier": "^3.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "storybook": "^7.5.3" @@ -3214,6 +3217,56 @@ "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": { "version": "1.0.0-next.23", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz", @@ -4878,6 +4931,21 @@ "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": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", @@ -4938,6 +5006,21 @@ "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": { "version": "7.5.3", "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", "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": { "version": "3.0.0", "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==", "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": { "version": "3.0.0", "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" } }, + "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": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz", @@ -8785,6 +9011,47 @@ "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": { "version": "9.18.1", "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", "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": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -10444,6 +10717,39 @@ "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": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz", @@ -12216,20 +12522,32 @@ } }, "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz", + "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==", "dev": true, "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "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": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", @@ -13187,6 +13505,21 @@ "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": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -13811,6 +14144,22 @@ "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==", "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": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -14183,6 +14532,18 @@ "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==", "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": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", diff --git a/package.json b/package.json index 486bc23..acaa5ec 100644 --- a/package.json +++ b/package.json @@ -70,8 +70,11 @@ "@typescript-eslint/eslint-plugin": "^6.11.0", "@typescript-eslint/parser": "^6.11.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-vuetify": "^2.1.0", + "prettier": "^3.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "storybook": "^7.5.3" diff --git a/renderer/_default.page.client.ts b/renderer/_default.page.client.ts index 0c2f9ac..d004a30 100644 --- a/renderer/_default.page.client.ts +++ b/renderer/_default.page.client.ts @@ -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 async function render(pageContext: PageContextClient) { - const { Page, pageProps } = pageContext - if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined') - const app = createApp(Page, pageProps, pageContext) - app.mount('#app') + const { Page, pageProps } = pageContext + if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined') + const app = createApp(Page, pageProps, pageContext) + app.mount('#app') } /* To enable Client-side Routing: diff --git a/renderer/_default.page.server.ts b/renderer/_default.page.server.ts index 914a350..5c3374a 100644 --- a/renderer/_default.page.server.ts +++ b/renderer/_default.page.server.ts @@ -10,19 +10,19 @@ import logoUrl from './logo.svg' import type { PageContextServer } from './types' async function render(pageContext: PageContextServer) { - const { Page, pageProps } = pageContext - // 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') - const app = createApp(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 + if (!Page) throw new Error('My render() hook expects pageContext.Page to be defined') + const app = createApp(Page, pageProps, pageContext) - const appHtml = await renderToString(app) + const appHtml = await renderToString(app) - // See https://vike.dev/head - const { documentProps } = pageContext.exports - const title = (documentProps && documentProps.title) || 'Vite SSR app' - const desc = (documentProps && documentProps.description) || 'App using Vite + Vike' + // See https://vike.dev/head + const { documentProps } = pageContext.exports + const title = (documentProps && documentProps.title) || 'Vite SSR app' + const desc = (documentProps && documentProps.description) || 'App using Vite + Vike' - const documentHtml = escapeInject` + const documentHtml = escapeInject` @@ -36,21 +36,21 @@ async function render(pageContext: PageContextServer) { ` - return { - documentHtml, - pageContext: { - // We can add some `pageContext` here, which is useful if we want to do page redirection https://vike.dev/page-redirection - } - } + return { + documentHtml, + pageContext: { + // 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) { - let err: unknown - // Workaround: renderToString_() swallows errors in production, see https://github.com/vuejs/core/issues/7876 - app.config.errorHandler = (err_) => { - err = err_ - } - const appHtml = await renderToString_(app) - if (err) throw err - return appHtml + let err: unknown + // Workaround: renderToString_() swallows errors in production, see https://github.com/vuejs/core/issues/7876 + app.config.errorHandler = (err_) => { + err = err_ + } + const appHtml = await renderToString_(app) + if (err) throw err + return appHtml } diff --git a/renderer/app.ts b/renderer/app.ts index 5e7fc1e..cb5eb43 100644 --- a/renderer/app.ts +++ b/renderer/app.ts @@ -5,31 +5,30 @@ import type { Component, PageContext, PageProps } from './types' import vuetify from './vuetify' import { createPinia } from 'pinia' - export { createApp } function createApp(Page: Component, pageProps: PageProps | undefined, pageContext: PageContext) { - const PageWithLayout = defineComponent({ - render() { - return h( - PageShell, - {}, - { - default() { - return h(Page, pageProps || {}) - } - } - ) - } - }) + const PageWithLayout = defineComponent({ + render() { + return h( + PageShell, + {}, + { + default() { + return h(Page, pageProps || {}) + }, + }, + ) + }, + }) - const pinia = createPinia() - const app = createSSRApp(PageWithLayout) - app.use(pinia) - app.use(vuetify) + const pinia = createPinia() + const app = createSSRApp(PageWithLayout) + app.use(pinia) + app.use(vuetify) - // Make pageContext available from any Vue component - setPageContext(app, pageContext) + // Make pageContext available from any Vue component + setPageContext(app, pageContext) - return app + return app } diff --git a/renderer/types.ts b/renderer/types.ts index ccead37..20a8f94 100644 --- a/renderer/types.ts +++ b/renderer/types.ts @@ -1,14 +1,14 @@ export type { - PageContextServer, - /* + PageContextServer, + /* // When using Client Routing https://vike.dev/clientRouting PageContextClient, PageContext, /*/ - // When using Server Routing - PageContextClientWithServerRouting as PageContextClient, - PageContextWithServerRouting as PageContext - //*/ + // When using Server Routing + PageContextClientWithServerRouting as PageContextClient, + PageContextWithServerRouting as PageContext, + //*/ } from 'vike/types' export type { PageProps } export type { Component } diff --git a/renderer/usePageContext.ts b/renderer/usePageContext.ts index caa2501..a5769e5 100644 --- a/renderer/usePageContext.ts +++ b/renderer/usePageContext.ts @@ -11,11 +11,11 @@ export { setPageContext } const key: InjectionKey = Symbol() function usePageContext() { - const pageContext = inject(key) - if (!pageContext) throw new Error('setPageContext() not called in parent') - return pageContext + const pageContext = inject(key) + if (!pageContext) throw new Error('setPageContext() not called in parent') + return pageContext } function setPageContext(app: App, pageContext: PageContext) { - app.provide(key, pageContext) + app.provide(key, pageContext) } diff --git a/renderer/vuetify.ts b/renderer/vuetify.ts index e8062f0..2640009 100644 --- a/renderer/vuetify.ts +++ b/renderer/vuetify.ts @@ -5,6 +5,6 @@ import * as components from 'vuetify/lib/components/index.mjs' import * as directives from 'vuetify/lib/directives/index.mjs' export default createVuetify({ - components, - directives -}) \ No newline at end of file + components, + directives, +}) diff --git a/server/index.ts b/server/index.ts index 7e9a3c6..d4c9a5b 100644 --- a/server/index.ts +++ b/server/index.ts @@ -20,55 +20,55 @@ const isProduction = process.env.NODE_ENV === 'production' startServer() async function startServer() { - const app = express() + const app = express() - app.use(compression()) + app.use(compression()) - // Vite integration - if (isProduction) { + // Vite integration + if (isProduction) { // In production, we need to serve our static assets ourselves. // (In dev, Vite's middleware serves our static assets.) - const sirv = (await import('sirv')).default - app.use(sirv(`${root}/dist/client`)) - } else { + const sirv = (await import('sirv')).default + app.use(sirv(`${root}/dist/client`)) + } else { // 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 // would unnecessarily bloat our production server.) - const vite = await import('vite') - const viteDevMiddleware = ( - await vite.createServer({ - root, - server: { middlewareMode: true } - }) - ).middlewares - app.use(viteDevMiddleware) + const vite = await import('vite') + const viteDevMiddleware = ( + await vite.createServer({ + root, + server: { middlewareMode: true }, + }) + ).middlewares + 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) + } + }) - // ... - // 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 - app.listen(port) - console.log(`Server running at http://localhost:${port}`) + const port = process.env.PORT || 3000 + app.listen(port) + console.log(`Server running at http://localhost:${port}`) } diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts index 2a3f745..45c530b 100644 --- a/src/stories/Button.stories.ts +++ b/src/stories/Button.stories.ts @@ -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 const meta = { - title: 'Example/Button', - component: Button, - // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs - tags: ['autodocs'], - argTypes: { - size: { control: 'select', options: ['small', 'medium', 'large'] }, - backgroundColor: { control: 'color' }, - onClick: { action: 'clicked' }, - }, - args: { primary: false }, // default value + title: 'Example/Button', + component: Button, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs + tags: ['autodocs'], + argTypes: { + size: { control: 'select', options: ['small', 'medium', 'large'] }, + backgroundColor: { control: 'color' }, + onClick: { action: 'clicked' }, + }, + args: { primary: false }, // default value } satisfies Meta export default meta -type Story = StoryObj; +type Story = StoryObj /* *👇 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 * to learn how to use render functions. */ export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, + args: { + primary: true, + label: 'Button', + }, } export const Secondary: Story = { - args: { - primary: false, - label: 'Button', - }, + args: { + primary: false, + label: 'Button', + }, } export const Large: Story = { - args: { - label: 'Button', - size: 'large', - }, + args: { + label: 'Button', + size: 'large', + }, } export const Small: Story = { - args: { - label: 'Button', - size: 'small', - }, + args: { + label: 'Button', + size: 'small', + }, } diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts index cff743a..6a462ac 100644 --- a/src/stories/Header.stories.ts +++ b/src/stories/Header.stories.ts @@ -3,41 +3,41 @@ import type { Meta, StoryObj } from '@storybook/vue3' import MyHeader from './Header.vue' const meta = { - /* 👇 The title prop is optional. + /* 👇 The title prop is optional. * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading * to learn how to generate automatic titles */ - title: 'Example/Header', - component: MyHeader, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - render: (args: any) => ({ - components: { MyHeader }, - setup() { - return { args } - }, - template: '', - }), - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen', + title: 'Example/Header', + component: MyHeader, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + render: (args: any) => ({ + components: { MyHeader }, + setup() { + return { args } }, - // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs - tags: ['autodocs'], + template: '', + }), + 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 export default meta -type Story = StoryObj; +type Story = StoryObj export const LoggedIn: Story = { - args: { - user: { - name: 'Jane Doe', - }, + args: { + user: { + name: 'Jane Doe', }, + }, } export const LoggedOut: Story = { - args: { - user: null, - }, + args: { + user: null, + }, } diff --git a/src/stories/Page.stories.ts b/src/stories/Page.stories.ts index b43e7d0..8a8c0e8 100644 --- a/src/stories/Page.stories.ts +++ b/src/stories/Page.stories.ts @@ -3,33 +3,33 @@ import { within, userEvent } from '@storybook/testing-library' import MyPage from './Page.vue' const meta = { - title: 'Example/Page', - component: MyPage, - render: () => ({ - components: { MyPage }, - template: '', - }), - parameters: { + title: 'Example/Page', + component: MyPage, + render: () => ({ + components: { MyPage }, + template: '', + }), + parameters: { // More on how to position stories at: https://storybook.js.org/docs/vue/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'], + layout: 'fullscreen', + }, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs + tags: ['autodocs'], } satisfies Meta export default meta -type Story = StoryObj; +type Story = StoryObj // More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing export const LoggedIn: Story = { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - play: async ({ canvasElement }: any) => { - const canvas = within(canvasElement) - const loginButton = await canvas.getByRole('button', { - name: /Log in/i, - }) - await userEvent.click(loginButton) - }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + play: async ({ canvasElement }: any) => { + const canvas = within(canvasElement) + const loginButton = await canvas.getByRole('button', { + name: /Log in/i, + }) + await userEvent.click(loginButton) + }, } export const LoggedOut: Story = {} diff --git a/vite.config.ts b/vite.config.ts index ecd4f94..f594af3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,11 +3,11 @@ import vike from 'vike/plugin' import { UserConfig } from 'vite' const config: UserConfig = { - plugins: [ - vue(), - process.env.STORYBOOK !== 'true' && vike() // SSR only when storybook is not running - ], - ssr: { noExternal: ['vuetify'] } + plugins: [ + vue(), + process.env.STORYBOOK !== 'true' && vike(), // SSR only when storybook is not running + ], + ssr: { noExternal: ['vuetify'] }, } export default config