From 1dace2c54c59eb7c5a6be967bce071c1fb129793 Mon Sep 17 00:00:00 2001 From: Damillora Date: Wed, 28 Apr 2021 11:13:36 +0700 Subject: [PATCH] feat: Migrate Rinze to SvelteKit --- .eslintrc.cjs | 20 + .gitignore | 8 +- .npmrc | 1 + .prettierignore | 4 + .prettierrc | 6 + package.json | 67 +- rollup.config.js | 139 - scripts/setupTypeScript.js | 306 --- src/ambient.d.ts | 39 - src/app.html | 31 + src/client.js | 5 - src/global.d.ts | 3 + src/lib/.gitmodules | 4 + .../components/CopyArea.svelte | 0 .../components/DarkModeButton.svelte | 0 .../components/FloatingYuriko.svelte | 0 .../components/GalleryImage.svelte | 0 .../components/GameListItem.svelte | 2 +- .../components/Header.svelte | 4 +- .../components/MediaItem.svelte | 0 .../components/NavItem.svelte | 2 +- .../components/NavSeparator.svelte | 0 .../components/PageHeader.svelte | 2 +- .../components/ProjectItem.svelte | 0 src/{node_modules => }/lib/yuriko-birthday.js | 4 +- src/routes/$error.svelte | 39 + src/routes/$layout.svelte | 18 + src/routes/[link].js | 31 + src/routes/_error.svelte | 28 - src/routes/_layout.svelte | 18 - src/routes/about.svelte | 4 +- src/routes/contact.svelte | 2 +- src/routes/games/aaside.svelte | 2 +- src/routes/games/arcaea.svelte | 2 +- src/routes/games/arknights.svelte | 2 +- src/routes/games/azurlane.svelte | 2 +- src/routes/games/bandori.svelte | 2 +- src/routes/games/bluearchive.svelte | 2 +- src/routes/games/cue.svelte | 2 +- src/routes/games/fgo.svelte | 2 +- src/routes/games/genshin.svelte | 2 +- src/routes/games/honkai.svelte | 2 +- src/routes/games/index.svelte | 4 +- src/routes/games/llsif.svelte | 2 +- src/routes/games/llsifas.svelte | 2 +- src/routes/games/maimai.svelte | 2 +- src/routes/games/mirishita.svelte | 2 +- src/routes/games/nogikoi.svelte | 2 +- src/routes/games/poplinks.svelte | 2 +- src/routes/games/puroseka.svelte | 2 +- src/routes/games/sdvx.svelte | 2 +- src/routes/games/shadowverse.svelte | 2 +- src/routes/games/shinymas.svelte | 2 +- src/routes/games/starira.svelte | 2 +- src/routes/games/t7s.svelte | 2 +- src/routes/games/template.svelte | 2 +- src/routes/games/unison.svelte | 2 +- src/routes/index.svelte | 2 +- src/routes/links.svelte | 4 +- src/routes/projects/altessimo.svelte | 4 +- src/routes/projects/index.svelte | 4 +- src/routes/projects/miracle.svelte | 4 +- src/routes/projects/rinze.svelte | 4 +- src/routes/projects/yuika.svelte | 4 +- src/server.js | 47 - src/service-worker.js | 8 +- src/template.html | 37 - svelte.config.cjs | 15 + tsconfig.json | 30 + yarn-error.log | 2385 ++++++++++++++++ yarn.lock | 2388 ++++++----------- 71 files changed, 3498 insertions(+), 2277 deletions(-) create mode 100644 .eslintrc.cjs create mode 100644 .npmrc create mode 100644 .prettierignore create mode 100644 .prettierrc delete mode 100644 rollup.config.js delete mode 100644 scripts/setupTypeScript.js delete mode 100644 src/ambient.d.ts create mode 100644 src/app.html delete mode 100644 src/client.js create mode 100644 src/global.d.ts create mode 100644 src/lib/.gitmodules rename src/{node_modules => lib}/components/CopyArea.svelte (100%) rename src/{node_modules => lib}/components/DarkModeButton.svelte (100%) rename src/{node_modules => lib}/components/FloatingYuriko.svelte (100%) rename src/{node_modules => lib}/components/GalleryImage.svelte (100%) rename src/{node_modules => lib}/components/GameListItem.svelte (89%) rename src/{node_modules => lib}/components/Header.svelte (94%) rename src/{node_modules => lib}/components/MediaItem.svelte (100%) rename src/{node_modules => lib}/components/NavItem.svelte (83%) rename src/{node_modules => lib}/components/NavSeparator.svelte (100%) rename src/{node_modules => lib}/components/PageHeader.svelte (85%) rename src/{node_modules => lib}/components/ProjectItem.svelte (100%) rename src/{node_modules => }/lib/yuriko-birthday.js (77%) create mode 100644 src/routes/$error.svelte create mode 100644 src/routes/$layout.svelte create mode 100644 src/routes/[link].js delete mode 100644 src/routes/_error.svelte delete mode 100644 src/routes/_layout.svelte delete mode 100644 src/server.js delete mode 100644 src/template.html create mode 100644 svelte.config.cjs create mode 100644 tsconfig.json create mode 100644 yarn-error.log diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..fba3861 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,20 @@ +module.exports = { + root: true, + parser: '@typescript-eslint/parser', + extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], + plugins: ['svelte3', '@typescript-eslint'], + ignorePatterns: ['*.cjs'], + overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], + settings: { + 'svelte3/typescript': () => require('typescript') + }, + parserOptions: { + sourceType: 'module', + ecmaVersion: 2019 + }, + env: { + browser: true, + es2017: true, + node: true + } +}; diff --git a/.gitignore b/.gitignore index f220e37..e700210 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ .DS_Store -/node_modules/ -/src/node_modules/@sapper/ -yarn-error.log -/__sapper__/ +node_modules +/.svelte +/build +/functions diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..844cfd1 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +.svelte/** +static/** +build/** +node_modules/** diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..ff2677e --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100 +} diff --git a/package.json b/package.json index 1d0e82a..4dcb44c 100644 --- a/package.json +++ b/package.json @@ -1,45 +1,34 @@ { - "name": "@damillora/rinze", - "description": "nanao.moe website, now in Svelte", - "version": "0.1.0", + "name": "~TODO~", + "version": "0.0.1", "scripts": { - "dev": "sapper dev", - "build": "sapper build --legacy", - "export": "sapper export --legacy", - "start": "node __sapper__/build" - }, - "dependencies": { - "@damillora/shian": "^2.0.0", - "compression": "^1.7.1", - "dayjs": "^1.10.4", - "howler": "^2.2.1", - "node-fetch": "^2.6.1", - "polka": "^1.0.0-next.14", - "sirv": "^1.0.0" + "dev": "svelte-kit dev", + "build": "svelte-kit build", + "preview": "svelte-kit preview", + "lint": "prettier --check . && eslint --ignore-path .gitignore .", + "format": "prettier --write ." }, "devDependencies": { - "@babel/core": "^7.0.0", - "@babel/plugin-syntax-dynamic-import": "^7.0.0", - "@babel/plugin-transform-runtime": "^7.0.0", - "@babel/preset-env": "^7.0.0", - "@babel/runtime": "^7.0.0", - "@rollup/plugin-alias": "^3.1.1", - "@rollup/plugin-babel": "^5.0.0", - "@rollup/plugin-commonjs": "^14.0.0", - "@rollup/plugin-node-resolve": "^8.0.0", - "@rollup/plugin-replace": "^2.2.0", - "@rollup/plugin-url": "^5.0.0", - "autoprefixer": "^10.2.3", - "clipboard": "^2.0.6", - "modern-normalize": "^1.0.0", - "node-sass": "^5.0.0", - "postcss": "^8.2.4", - "rollup": "^2.3.4", - "rollup-plugin-svelte": "^7.0.0", - "rollup-plugin-terser": "^7.0.0", - "sapper": "^0.28.0", - "svelte": "^3.17.3", - "svelte-preprocess": "^4.6.3" + "@sveltejs/kit": "next", + "@typescript-eslint/eslint-plugin": "^4.19.0", + "@typescript-eslint/parser": "^4.19.0", + "eslint": "^7.22.0", + "eslint-config-prettier": "^8.1.0", + "eslint-plugin-svelte3": "^3.2.0", + "prettier": "~2.2.1", + "prettier-plugin-svelte": "^2.2.0", + "svelte": "^3.29.0", + "svelte-preprocess": "^4.0.0", + "tslib": "^2.0.0", + "typescript": "^4.0.0", + "vite": "^2.2.3" }, - "license": "MIT" + "type": "module", + "dependencies": { + "@damillora/shian": "^2.0.1", + "@sveltejs/adapter-node": "^1.0.0-next.17", + "dayjs": "^1.10.4", + "howler": "^2.2.1", + "node-sass": "^5.0.0" + } } diff --git a/rollup.config.js b/rollup.config.js deleted file mode 100644 index 10a3a97..0000000 --- a/rollup.config.js +++ /dev/null @@ -1,139 +0,0 @@ -import path from 'path'; -import resolve from '@rollup/plugin-node-resolve'; -import replace from '@rollup/plugin-replace'; -import commonjs from '@rollup/plugin-commonjs'; -import url from '@rollup/plugin-url'; -import svelte from 'rollup-plugin-svelte'; -import babel from '@rollup/plugin-babel'; -import alias from '@rollup/plugin-alias'; -import { terser } from 'rollup-plugin-terser'; -import config from 'sapper/config/rollup.js'; -import pkg from './package.json'; -import sveltePreprocess from 'svelte-preprocess'; - -const mode = process.env.NODE_ENV; -const dev = mode === 'development'; -const legacy = !!process.env.SAPPER_LEGACY_BUILD; - -const onwarn = (warning, onwarn) => - (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) || - (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || - onwarn(warning); - -const preprocess = sveltePreprocess({ - scss: { - includePaths: ['src'], - }, - postcss: { - plugins: [require('autoprefixer')], - }, -}); - -export default { - client: { - input: config.client.input(), - output: config.client.output(), - plugins: [ - alias({ - resolve: ['.jpg', '.js', '.svelte','.scss'], // optional, by default this will just look for .js files or folders - entries: [ - { find: '@', replacement: path.resolve(__dirname, 'src') }, - ] - }), - replace({ - 'process.browser': true, - 'process.env.NODE_ENV': JSON.stringify(mode) - }), - svelte({ - compilerOptions: { - dev, - hydratable: true, - }, - preprocess, - }), - url({ - sourceDir: path.resolve(__dirname, 'src/node_modules/images'), - publicPath: '/client/' - }), - resolve({ - browser: true, - dedupe: ['svelte'] - }), - commonjs(), - - legacy && babel({ - extensions: ['.js', '.mjs', '.html', '.svelte'], - babelHelpers: 'runtime', - exclude: ['node_modules/@babel/**'], - presets: [ - ['@babel/preset-env', { - targets: '> 0.25%, not dead' - }] - ], - plugins: [ - '@babel/plugin-syntax-dynamic-import', - ['@babel/plugin-transform-runtime', { - useESModules: true - }] - ] - }), - - !dev && terser({ - module: true - }) - ], - - preserveEntrySignatures: false, - onwarn, - }, - - server: { - input: config.server.input(), - output: config.server.output(), - plugins: [ - replace({ - 'process.browser': false, - 'process.env.NODE_ENV': JSON.stringify(mode) - }), - svelte({ - compilerOptions: { - dev, - generate: 'ssr', - hydratable: true - }, - emitCss: false, - preprocess, - }), - url({ - sourceDir: path.resolve(__dirname, 'src/node_modules/images'), - publicPath: '/client/', - emitFiles: false // already emitted by client build - }), - resolve({ - dedupe: ['svelte'] - }), - commonjs() - ], - external: Object.keys(pkg.dependencies).concat(require('module').builtinModules), - - preserveEntrySignatures: 'strict', - onwarn, - }, - - serviceworker: { - input: config.serviceworker.input(), - output: config.serviceworker.output(), - plugins: [ - resolve(), - replace({ - 'process.browser': true, - 'process.env.NODE_ENV': JSON.stringify(mode) - }), - commonjs(), - !dev && terser() - ], - - preserveEntrySignatures: false, - onwarn, - } -}; diff --git a/scripts/setupTypeScript.js b/scripts/setupTypeScript.js deleted file mode 100644 index 45fb596..0000000 --- a/scripts/setupTypeScript.js +++ /dev/null @@ -1,306 +0,0 @@ -/** - * Run this script to convert the project to TypeScript. This is only guaranteed to work - * on the unmodified default template; if you have done code changes you are likely need - * to touch up the generated project manually. - */ - -// @ts-check -const fs = require('fs'); -const path = require('path'); -const { argv } = require('process'); - -const projectRoot = argv[2] || path.join(__dirname, '..'); - -const isRollup = fs.existsSync(path.join(projectRoot, "rollup.config.js")); - -function warn(message) { - console.warn('Warning: ' + message); -} - -function replaceInFile(fileName, replacements) { - if (fs.existsSync(fileName)) { - let contents = fs.readFileSync(fileName, 'utf8'); - let hadUpdates = false; - - replacements.forEach(([from, to]) => { - const newContents = contents.replace(from, to); - - const isAlreadyApplied = typeof to !== 'string' || contents.includes(to); - - if (newContents !== contents) { - contents = newContents; - hadUpdates = true; - } else if (!isAlreadyApplied) { - warn(`Wanted to update "${from}" in ${fileName}, but did not find it.`); - } - }); - - if (hadUpdates) { - fs.writeFileSync(fileName, contents); - } else { - console.log(`${fileName} had already been updated.`); - } - } else { - warn(`Wanted to update ${fileName} but the file did not exist.`); - } -} - -function createFile(fileName, contents) { - if (fs.existsSync(fileName)) { - warn(`Wanted to create ${fileName}, but it already existed. Leaving existing file.`); - } else { - fs.writeFileSync(fileName, contents); - } -} - -function addDepsToPackageJson() { - const pkgJSONPath = path.join(projectRoot, 'package.json'); - const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, 'utf8')); - packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { - ...(isRollup ? { '@rollup/plugin-typescript': '^6.0.0' } : { 'ts-loader': '^8.0.4' }), - '@tsconfig/svelte': '^1.0.10', - '@types/compression': '^1.7.0', - '@types/node': '^14.11.1', - '@types/polka': '^0.5.1', - 'svelte-check': '^1.0.46', - 'svelte-preprocess': '^4.3.0', - tslib: '^2.0.1', - typescript: '^4.0.3' - }); - - // Add script for checking - packageJSON.scripts = Object.assign(packageJSON.scripts, { - validate: 'svelte-check --ignore src/node_modules/@sapper' - }); - - // Write the package JSON - fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, ' ')); -} - -function changeJsExtensionToTs(dir) { - const elements = fs.readdirSync(dir, { withFileTypes: true }); - - for (let i = 0; i < elements.length; i++) { - if (elements[i].isDirectory()) { - changeJsExtensionToTs(path.join(dir, elements[i].name)); - } else if (elements[i].name.match(/^[^_]((?!json).)*js$/)) { - fs.renameSync(path.join(dir, elements[i].name), path.join(dir, elements[i].name).replace('.js', '.ts')); - } - } -} - -function updateSingleSvelteFile({ view, vars, contextModule }) { - replaceInFile(path.join(projectRoot, 'src', `${view}.svelte`), [ - [/(?:/gm, (m, attrs) => ``], - ...(vars ? vars.map(({ name, type }) => [`export let ${name};`, `export let ${name}: ${type};`]) : []), - ...(contextModule ? contextModule.map(({ js, ts }) => [js, ts]) : []) - ]); -} - -// Switch the *.svelte file to use TS -function updateSvelteFiles() { - [ - { - view: 'components/Nav', - vars: [{ name: 'segment', type: 'string' }] - }, - { - view: 'routes/_layout', - vars: [{ name: 'segment', type: 'string' }] - }, - { - view: 'routes/_error', - vars: [ - { name: 'status', type: 'number' }, - { name: 'error', type: 'Error' } - ] - }, - { - view: 'routes/blog/index', - vars: [{ name: 'posts', type: '{ slug: string; title: string, html: any }[]' }], - contextModule: [ - { - js: '.then(r => r.json())', - ts: '.then((r: { json: () => any; }) => r.json())' - }, - { - js: '.then(posts => {', - ts: '.then((posts: { slug: string; title: string, html: any }[]) => {' - } - ] - }, - { - view: 'routes/blog/[slug]', - vars: [{ name: 'post', type: '{ slug: string; title: string, html: any }' }] - } - ].forEach(updateSingleSvelteFile); -} - -function updateRollupConfig() { - // Edit rollup config - replaceInFile(path.join(projectRoot, 'rollup.config.js'), [ - // Edit imports - [ - /'rollup-plugin-terser';\n(?!import sveltePreprocess)/, - `'rollup-plugin-terser'; -import sveltePreprocess from 'svelte-preprocess'; -import typescript from '@rollup/plugin-typescript'; -` - ], - // Edit inputs - [ - /(?`, `self.addEventListener('activate', (event: ExtendableEvent) =>`], - [`self.addEventListener('install', event =>`, `self.addEventListener('install', (event: ExtendableEvent) =>`], - [`addEventListener('fetch', event =>`, `addEventListener('fetch', (event: FetchEvent) =>`], - ]); -} - -function createTsConfig() { - const tsconfig = `{ - "extends": "@tsconfig/svelte/tsconfig.json", - "compilerOptions": { - "lib": ["DOM", "ES2017", "WebWorker"] - }, - "include": ["src/**/*", "src/node_modules/**/*"], - "exclude": ["node_modules/*", "__sapper__/*", "static/*"] - }`; - - createFile(path.join(projectRoot, 'tsconfig.json'), tsconfig); -} - -// Adds the extension recommendation -function configureVsCode() { - const dir = path.join(projectRoot, '.vscode'); - - if (!fs.existsSync(dir)) { - fs.mkdirSync(dir); - } - - createFile(path.join(projectRoot, '.vscode', 'extensions.json'), `{"recommendations": ["svelte.svelte-vscode"]}`); -} - -function deleteThisScript() { - fs.unlinkSync(path.join(__filename)); - - // Check for Mac's DS_store file, and if it's the only one left remove it - const remainingFiles = fs.readdirSync(path.join(__dirname)); - if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') { - fs.unlinkSync(path.join(__dirname, '.DS_store')); - } - - // Check if the scripts folder is empty - if (fs.readdirSync(path.join(__dirname)).length === 0) { - // Remove the scripts folder - fs.rmdirSync(path.join(__dirname)); - } -} - -console.log(`Adding TypeScript with ${isRollup ? "Rollup" : "webpack" }...`); - -addDepsToPackageJson(); - -changeJsExtensionToTs(path.join(projectRoot, 'src')); - -updateSvelteFiles(); - -if (isRollup) { - updateRollupConfig(); -} else { - updateWebpackConfig(); -} - -updateServiceWorker(); - -createTsConfig(); - -configureVsCode(); - -// Delete this script, but not during testing -if (!argv[2]) { - deleteThisScript(); -} - -console.log('Converted to TypeScript.'); - -if (fs.existsSync(path.join(projectRoot, 'node_modules'))) { - console.log(` -Next: -1. run 'npm install' again to install TypeScript dependencies -2. run 'npm run build' for the @sapper imports in your project to work -`); -} diff --git a/src/ambient.d.ts b/src/ambient.d.ts deleted file mode 100644 index ec71cae..0000000 --- a/src/ambient.d.ts +++ /dev/null @@ -1,39 +0,0 @@ -/** - * These declarations tell TypeScript that we allow import of images, e.g. - * ``` - - - - ``` - */ -declare module "*.gif" { - const value: string; - export = value; -} - -declare module "*.jpg" { - const value: string; - export = value; -} - -declare module "*.jpeg" { - const value: string; - export = value; -} - -declare module "*.png" { - const value: string; - export = value; -} - -declare module "*.svg" { - const value: string; - export = value; -} - -declare module "*.webp" { - const value: string; - export = value; -} diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..40b53a1 --- /dev/null +++ b/src/app.html @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + %svelte.head% + + +
%svelte.body%
+ + diff --git a/src/client.js b/src/client.js deleted file mode 100644 index cec9172..0000000 --- a/src/client.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as sapper from '@sapper/app'; - -sapper.start({ - target: document.querySelector('#sapper') -}); \ No newline at end of file diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..79d7d7f --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,3 @@ +/// +/// +/// diff --git a/src/lib/.gitmodules b/src/lib/.gitmodules new file mode 100644 index 0000000..4154618 --- /dev/null +++ b/src/lib/.gitmodules @@ -0,0 +1,4 @@ +[submodule "static/images"] + path = static/images + url = https://git.nanao.moe/Damillora/nanaomoe-images.git + branch = main diff --git a/src/node_modules/components/CopyArea.svelte b/src/lib/components/CopyArea.svelte similarity index 100% rename from src/node_modules/components/CopyArea.svelte rename to src/lib/components/CopyArea.svelte diff --git a/src/node_modules/components/DarkModeButton.svelte b/src/lib/components/DarkModeButton.svelte similarity index 100% rename from src/node_modules/components/DarkModeButton.svelte rename to src/lib/components/DarkModeButton.svelte diff --git a/src/node_modules/components/FloatingYuriko.svelte b/src/lib/components/FloatingYuriko.svelte similarity index 100% rename from src/node_modules/components/FloatingYuriko.svelte rename to src/lib/components/FloatingYuriko.svelte diff --git a/src/node_modules/components/GalleryImage.svelte b/src/lib/components/GalleryImage.svelte similarity index 100% rename from src/node_modules/components/GalleryImage.svelte rename to src/lib/components/GalleryImage.svelte diff --git a/src/node_modules/components/GameListItem.svelte b/src/lib/components/GameListItem.svelte similarity index 89% rename from src/node_modules/components/GameListItem.svelte rename to src/lib/components/GameListItem.svelte index 4b6d36d..cc7f880 100644 --- a/src/node_modules/components/GameListItem.svelte +++ b/src/lib/components/GameListItem.svelte @@ -1,5 +1,5 @@ diff --git a/src/node_modules/components/Header.svelte b/src/lib/components/Header.svelte similarity index 94% rename from src/node_modules/components/Header.svelte rename to src/lib/components/Header.svelte index 7c549d5..ebb6228 100644 --- a/src/node_modules/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -1,8 +1,8 @@