docs: polish

xmlking · Sep 16, 2023 · ea03cbc · ea03cbc
1 parent 6e7907b
commit ea03cbc
Show file tree

Hide file tree

Showing 16 changed files with 105 additions and 28 deletions.
diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -88,8 +88,8 @@ jobs:
         with:
           bun-version: latest
       - name: Install Dependencies
-        run: bun  install --platform=linuxmusl
-      #   - run: bun run check --filter=playground
-      #   - run: bun run lint --filter=playground
-      - run: bun run build --filter=playground
-      - run: bun run test:unit:coverage --filter=playground
+        run: bun  install
+      #   - run: bun run check --filter=docs
+      #   - run: bun run lint --filter=docs
+      - run: bun run build --filter=docs
+      - run: bun run test:unit:coverage --filter=docs
diff --git a/apps/docs/.eslintrc.cjs b/apps/docs/.eslintrc.cjs
@@ -1,4 +1,3 @@
 module.exports = {
-	root: true,
 	extends: ['custom']
 };
diff --git a/apps/docs/README.md b/apps/docs/README.md
@@ -8,10 +8,10 @@ If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npm init svelte
+bun create svelte@latest
 
 # create a new project in my-app
-npm init svelte my-app
+bun create svelte@latest my-app
 ```
 
 ## Developing

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -19,6 +19,7 @@
 		"format": "prettier --plugin-search-dir . --write --ignore-path=../../.prettierignore ."
 	},
 	"devDependencies": {
+		"@playwright/test": "1.37.1",
 		"@sveltejs/adapter-auto": "2.1.0",
 		"@sveltejs/kit": "1.24.1",
 		"@tailwindcss/container-queries": "0.1.1",
@@ -27,15 +28,18 @@
 		"svelte": "4.2.0",
 		"svelte-check": "3.5.1",
 		"svelte-meta-tags": "3.0.3",
-		"svelte-preprocess": "5.0.4",
 		"sveltekit-rate-limiter": "0.4.1",
 		"tailwind-merge": "1.14.0",
 		"tailwindcss-animate": "1.0.7",
 		"tslib": "2.6.2",
 		"typescript": "5.2.2",
 		"ui": "workspace:*",
 		"vite": "4.4.9",
-		"vite-imagetools": "5.0.8"
+		"vitest": "0.34.4"
+	},
+	"optionalDependencies": {
+		"@playwright/test": "1.37.1",
+		"@vitest/ui": "0.34.4"
 	},
 	"type": "module"
 }
diff --git a/apps/docs/playwright.config.ts b/apps/docs/playwright.config.ts
@@ -0,0 +1,12 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;
diff --git a/apps/docs/src/app.d.ts b/apps/docs/src/app.d.ts
@@ -1,11 +1,12 @@
-/// <reference types="@sveltejs/kit" />
-
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
-// and what to do when importing types
-declare namespace App {
-	// interface Locals {}
-	// interface Platform {}
-	// interface Session {}
-	// interface Stuff {}
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
 }
+
+export {};
diff --git a/apps/docs/src/app.html b/apps/docs/src/app.html
@@ -3,10 +3,10 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body>
-		<div>%sveltekit.body%</div>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/apps/docs/src/index.test.ts b/apps/docs/src/index.test.ts
@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});
diff --git a/apps/docs/src/lib/index.ts b/apps/docs/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/apps/docs/svelte.config.js b/apps/docs/svelte.config.js
@@ -1,15 +1,29 @@
-import adapter from '@sveltejs/adapter-auto';
-import preprocess from 'svelte-preprocess';
+import adapterNode from '@sveltejs/adapter-node';
+import adapterAuto from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://github.com/sveltejs/svelte-preprocess
+	extensions: ['.svelte'],
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: preprocess(),
+	preprocess: [vitePreprocess()],
 
+	vitePlugin: {
+		inspector: true
+	},
 	kit: {
-		adapter: adapter()
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: process.env.VERCEL ? adapterAuto() : adapterNode(),
+		prerender: { crawl: false }, // FIXME: remove after all links are corrected.
+		output: {
+			preloadStrategy: 'preload-mjs'
+		},
+		version: {
+			name: process.env.npm_package_version
+		}
 	}
 };
-
 export default config;
diff --git a/apps/docs/tests/test.ts b/apps/docs/tests/test.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('index page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
+});
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
@@ -1,13 +1,25 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
+		"lib": ["es2022", "webworker"],
 		"allowJs": true,
 		"checkJs": true,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
+		"types": [
+			"vitest/globals",
+			"vitest/importMeta",
+			"@testing-library/jest-dom",
+			"vite-plugin-pwa/client"
+		],
+		"rootDirs": [".", "./.svelte-kit/types", "./$houdini/types"]
 	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
 }
diff --git a/apps/docs/vite.config.ts b/apps/docs/vite.config.ts
@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	}
+});
diff --git a/apps/docs/vitest.config.ts b/apps/docs/vitest.config.ts
@@ -0,0 +1,11 @@
+import { defaultExclude, defineProject, mergeConfig } from 'vitest/config';
+import configShared from '../../vitest.config';
+
+export default mergeConfig(
+	configShared,
+	defineProject({
+		test: {
+			exclude: [...defaultExclude, '**/tests/mocks/**']
+		}
+	})
+);
diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/playbook.md b/docs/playbook.md
@@ -20,6 +20,7 @@ pnpm add -g turbo
 ### Create
 
 ```shell
+# bun create svelte@latest spectacular && cd $_ && code .
 pnpm create svelte@latest spectacular && cd $_ && code .
 # select `yes` for TypeScript, ESLint, Prettier, Playwright and Vitest
 ```