Merge pull request #18 from jacob-8/integrated-kitbook

Integrated kitbook

.npmrc

@@ -1 +1 @@
-link-workspace-packages=false
+# link-workspace-packages=false

.vscode/extensions.json

@@ -8,7 +8,6 @@
     "antfu.unocss",
     // Code quality
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
     // Git
     "eamodio.gitlens",
     "github.vscode-pull-request-github",

.vscode/settings.json

@@ -5,14 +5,17 @@
     "titleBar.activeForeground": "#e7e7e7",
     "titleBar.inactiveForeground": "#e7e7e799"
   },
-  "files.associations": {},
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "files.associations": {
+    "*.svx": "svelte"
+  },
   "css.lint.unknownAtRules": "ignore",
   "vitest.enable": true,
   "foam.edit.linkReferenceDefinitions": "withExtensions",
   "foam.files.ignore": [
     "**/node_modules/**/*",
     "**/package/**/*",
+    "**/.svelte-kit/**/*",
+    "**/dist/**/*",
   ],
   "foam.completion.label": "title",
   "svelte.plugin.svelte.compilerWarnings": {

package.json

@@ -16,24 +16,23 @@
 		"pieces:preview": "pnpm --filter=svelte-pieces preview",
 		"pieces:test": "pnpm --filter=svelte-pieces test",
 		"template": "pnpm --filter=template dev",
-		"template:kitbook": "pnpm --filter=template kitbook",
 		"template:build": "pnpm --filter=template build",
 		"release": "pnpm build:deps && pnpm test && changeset publish",
 		"check-packages": "pnpm update --interactive --recursive --latest"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.26.1",
+		"@changesets/cli": "^2.26.2",
 		"@typescript-eslint/eslint-plugin": "^5.60.0",
 		"@typescript-eslint/parser": "^5.60.0",
 		"eslint": "^8.43.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte": "^2.31.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.0",
-		"typescript": "~5.1.5",
-		"vite": "^4.3.9",
-		"vitest": "^0.32.2"
+		"svelte": "^4.2.0",
+		"typescript": "~5.2.2",
+		"vite": "^4.4.9",
+		"vitest": "^0.34.4"
 	},
 	"type": "module"
 }

packages/experiment/package.json

@@ -11,14 +11,14 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.1.0",
-		"@sveltejs/kit": "^1.20.5",
-		"@sveltejs/package": "^2.1.0",
-		"svelte": "^4.0.0",
-		"svelte-check": "^3.4.4",
-		"tslib": "^2.5.3",
-		"typescript": "^5.1.5",
-		"vite": "^4.3.9",
-		"vite-plugin-inspect": "^0.7.29"
+		"@sveltejs/kit": "^1.24.1",
+		"@sveltejs/package": "^2.2.2",
+		"svelte": "^4.2.0",
+		"svelte-check": "^3.5.1",
+		"tslib": "^2.6.2",
+		"typescript": "^5.2.2",
+		"vite": "^4.4.9",
+		"vite-plugin-inspect": "^0.7.38"
 	},
 	"type": "module"
 }

packages/kitbook/.gitignore

@@ -1,2 +1,2 @@
-/.svelte-kit*
-/dist
+/.svelte-kit
+dist

packages/kitbook/kitbook.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from "./src/lib/defineConfig";
+
+export default defineConfig({
+  title: 'Kitbook',
+  description: 'Svelte Component Documentation and Prototyping Workbench built using SvelteKit',
+  viewports: [
+    {
+      name: 'Mobile',
+      width: 320,
+      height: 568,
+    },
+    {
+      name: 'Desktop',
+      width: 1024,
+      height: 768,
+    },
+    {
+      name: 'Tablet',
+      width: 768,
+      height: 1024,
+    },
+  ],
+  // languages: [
+  //   {
+  //     name: 'English',
+  //     code: 'en',
+  //   },
+  //   {
+  //     name: 'Spanish',
+  //     code: 'es',
+  //   },
+  // ],
+  githubURL: 'https://github.com/jacob-8/kitbook/tree/main/packages/kitbook',
+  expandTree: true,
+  isKitbookItself: true,
+});

packages/kitbook/package.json

@@ -1,12 +1,12 @@
 {
   "name": "kitbook",
-  "version": "1.0.0-alpha.37",
+  "version": "1.0.0-alpha.40",
   "description": "Svelte Component Documentation and Prototyping Workbench built using SvelteKit",
   "scripts": {
-    "dev": "vite dev --mode kitbook",
-    "build": "vite build --mode kitbook",
+    "dev": "vite dev",
+    "build": "vite build",
     "build:ci": "cd ../.. && pnpm build:deps && cd packages/kitbook && pnpm build",
-    "preview": "vite preview --mode kitbook",
+    "preview": "vite preview",
     "sync": "svelte-kit sync",
     "package": "svelte-kit sync && svelte-package && publint",
     "package:watch": "svelte-kit sync && svelte-package --watch",
@@ -19,8 +19,7 @@
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    ".gitignore"
+    "dist"
   ],
   "exports": {
     ".": {
@@ -32,6 +31,11 @@
       "types": "./dist/plugins/vite.d.ts",
       "svelte": "./dist/plugins/vite.js",
       "default": "./dist/plugins/vite.js"
+    },
+    "./defineConfig": {
+      "types": "./dist/defineConfig.d.ts",
+      "svelte": "./dist/defineConfig.js",
+      "default": "./dist/defineConfig.js"
     }
   },
   "typesVersions": {
@@ -43,29 +47,32 @@
   },
   "dependencies": {
     "@kitbook/mdsvex-shiki-twoslash": "0.0.4",
-    "@kitbook/vite-plugin-kitbook": "0.0.12",
+    "@kitbook/vite-plugin-kitbook": "0.0.14",
     "svelte-pieces": "2.0.0-next.1",
-    "svelte2tsx": "^0.6.16"
+    "svelte2tsx": "^0.6.21"
   },
   "peerDependencies": {
+    "@playwright/test": "^1.37.1",
     "@sveltejs/kit": "^1.13.0",
     "svelte": "^3.55.0 || ^4.0.0"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.83",
+    "@iconify/json": "^2.2.113",
+    "@playwright/test": "^1.37.1",
     "@sveltejs/adapter-auto": "2.1.0",
-    "@sveltejs/kit": "^1.20.5",
-    "@sveltejs/package": "^2.1.0",
-    "@unocss/svelte-scoped": "^0.53.4",
+    "@sveltejs/kit": "^1.24.1",
+    "@sveltejs/package": "^2.2.2",
+    "@unocss/svelte-scoped": "^0.55.7",
+    "mdsvex": "^0.11.0",
     "prettier": "^2.8.8",
-    "publint": "^0.1.12",
-    "svelte": "^4.0.0",
-    "svelte-check": "^3.4.4",
-    "tslib": "^2.5.3",
-    "typescript": "~5.1.5",
-    "unocss": "^0.53.4",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.2"
+    "publint": "^0.2.2",
+    "svelte": "^4.2.0",
+    "svelte-check": "^3.5.1",
+    "tslib": "^2.6.2",
+    "typescript": "~5.2.2",
+    "unocss": "^0.55.7",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.4"
   },
   "repository": {
     "type": "git",

packages/kitbook/src/app.d.ts

@@ -8,12 +8,17 @@ declare namespace App {
 	// interface Platform {}
 }
 
+// Syntax: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-using-an-attributeevent-on-a-dom-element-and-it-throws-a-type-error
 declare namespace svelteHTML {
-	// https://github.com/sveltejs/language-tools >> docs/preprocessors/typescript.md
 	interface HTMLAttributes<T> {
-		'on:updatewidth'?: (event: { detail: number }) => any;
-		'on:updateheight'?: (event: { detail: number }) => any;
-		"on:stopdragging"?: (event: boolean) => any;
-		"on:startdragging"?: (event: boolean) => any;
+		'on:updatewidth'?: (event: { detail: DragValues }) => any;
+		'on:updateheight'?: (event: { detail: DragValues }) => any;
+		'on:stopdragging'?: (event: boolean) => any;
+		'on:startdragging'?: (event: boolean) => any;
 	}
-}
+}
+
+interface DragValues {
+  pixels: number, 
+  percentage?: number,
+}

packages/kitbook/src/lib/app.html → packages/kitbook/src/app.html

@@ -6,7 +6,6 @@
 	<link rel="icon" href="%sveltekit.assets%/icons/favicon.svg" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<link rel="stylesheet" href="%sveltekit.assets%/styles/tw-reset.css">
-	<link rel="stylesheet" href="%sveltekit.assets%/styles/tw-prose.css">
 	%sveltekit.head%
 </head>
 

packages/kitbook/src/docs/1-get-started.md

@@ -5,32 +5,52 @@
 - Install the `kitbook` package: `npm i -D kitbook@alpha` or `pnpm add -D kitbook@alpha`
 
 - Add the `kitbook()` Vite plugin *before* your `sveltekit()` plugin:
-```js title="vite.config.js" {2,6}
+```js title="vite.config.js" {3,7}
+import { defineConfig } from 'vite'
 import { sveltekit } from '@sveltejs/kit/vite';
 import { kitbook } from 'kitbook/plugins/vite';
 
-const config = {
+export default defineConfig({
 	plugins: [
 		kitbook(),
 		sveltekit(),
 	],
+});
+```
+
+- Add the necessary [MDSvex](https://mdsvex.pngwn.io/) imports and configuration into your `svelte.config.js`:
+```js title="svelte.config.js" {2,5,7}
+import { vitePreprocess } from '@sveltejs/kit/vite';
+import { mdsvex, MDSVEX_EXTENSIONS, KITBOOK_MDSVEX_CONFIG } from 'kitbook/plugins/vite';
+
+const config = {
+  extensions: ['.svelte', ...MDSVEX_EXTENSIONS],
+	preprocess: [
+    mdsvex(KITBOOK_MDSVEX_CONFIG),
+    vitePreprocess(),
+  ],
+	// ...
 };
 
 export default config;
 ```
 
-- Add these scripts to your `package.json`:
-```json
-"kitbook": "vite dev --mode kitbook",
-"kitbook:build": "svelte-kit sync && vite build --mode kitbook",
-"kitbook:preview": "vite preview --mode kitbook",
+- Place your app inside of a [(group)](https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-group) folder named anything and add a `kitbook` folder to `src/routes`:
+```txt {2,6}
+src/routes/
+│ (app)/
+│ ├ dashboard/
+│ ├ item/
+│ └ +layout.svelte <-- initialize app only items, like db connections (refers to all layout files like +layout.ts)
+│ kitbook/
+└ +layout.svelte <-- initialize everything both your app and Kitbook need, like i18n 
 ```
 
-- Run `npm kitbook` or `pnpm kitbook`
+- Run your dev server as normal (`npm run dev`, `pnpm dev`, etc...)
 
-- Kitbook will quickly [[0-understand-kitbook-initialization|initialize]], and then you will want to **add an asterisk** to `/.svelte-kit` in your `.gitignore` file to modify it to `/.svelte-kit*` so the `/.svelte-kit-kitbook` folder isn't committed.
+- Kitbook will automatically copy its routing files to `src/routes/kitbook`. Please edit the settings found in `src/routes/kitbook/+layout.svelte` for your app, but don't touch the other files as they will be overridden in future updates as needed.
 
-At this point you can open Kitbook and see all your Svelte components, *including `+page.svelte` and `+layout.svelte` files as they are also just plain Svelte components with a very important `data` prop*.
+At this point you can navigate to the `/kitbook` route and see all your Svelte components, *including `+page.svelte` and `+layout.svelte` files as they are also just plain Svelte components with a very important `data` prop*.
 
 Next you could...
 
@@ -40,7 +60,6 @@ Next you could...
 
 [//begin]: # "Autogenerated link references for markdown compatibility"
 [4-roadmap]: 9-maintainer-notes/4-roadmap.md "Roadmap"
-[0-understand-kitbook-initialization|initialize]: 3-customizations/0-understand-kitbook-initialization.md "Understand Kitbook's Initialization"
 [2-write-documentation]: 2-write-documentation.md "Write Documentation"
 [3-add-stories]: 3-add-stories.md "Add Stories"
 [4-add-component-variants]: 4-add-component-variants.md "Add Component Variants"

packages/kitbook/src/docs/2-variants/DefaultSlot.md

@@ -1,7 +1,8 @@
 # Pass a Default Slot
 
-It would be great to support dynamic slots for variants, but that may be crazy until Svelte officially supports that. However, we can support an optional default slot of html or a component as seen in the variants below.
+It would be great to support dynamic slots for variants, but it would be error-prone until Svelte officially supports that. However, we can support an optional default slot of a string (you can pass html) or a component as seen in the variants below.
 
 Possible dynamic slot options to research further: 
 - https://github.com/sveltejs/svelte/issues/2588 
 - https://github.com/sveltejs/svelte/pull/4296
+- Playwright does them like this: https://github.com/microsoft/playwright/blob/d92fe16b76272afb19e7af5a2496f7efce45441d/packages/playwright-ct-svelte/registerSource.mjs#L82

packages/kitbook/src/docs/2-variants/DefaultSlot.variants.ts

@@ -6,26 +6,20 @@ import PassIntoDefaultSlot from './PassIntoDefaultSlot.svelte';
 export const variants: Variants<Component> = [
   {
     name: 'Text',
-    slots: [
-      {
-        content: 'Just a bit of plain text.',
-      }
-    ]
+    slots: {
+      default: 'Just a bit of plain text.',
+    }
   },
   {
     name: 'HTML',
-    slots: [
-      {
-        content: 'Try some <i>italics</i>',
-      }
-    ]
+    slots: {
+      default: 'Try some <i>italics</i>',
+    }
   },
   {
     name: 'Component',
-    slots: [
-      {
-        content: PassIntoDefaultSlot,
-      }
-    ]
+    slots: {
+      default: PassIntoDefaultSlot,
+    }
   }
 ]