Merge pull request #15 from jacob-8/switch-to-unocss

Update packages, svelte@4, mdsvex, unocss

.github/workflows/lint-svelte-check-unit-test.yml

@@ -0,0 +1,65 @@
+name: Lint, Svelte Check, & Unit Test Push
+
+on:
+  push:
+    branches:
+      - '**'
+
+jobs:
+  # lint:
+  #   name: Lint
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/checkout@v3
+
+  #     - uses: pnpm/action-setup@v2
+  #       with:
+  #         version: 8.6.0
+
+  #     - uses: actions/setup-node@v3
+  #       with:
+  #         node-version: 18
+  #         cache: pnpm
+
+  #     - run: pnpm install
+
+  #     - name: Lint
+  #       run: pnpm lint
+
+  unit_test:
+    name: Svelte Check & Unit Test
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.6.0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+
+      - run: pnpm install
+
+      - run: pnpm build:deps && pnpm build
+
+      - run: pnpm -F kitbook sync
+      - run: pnpm -F svelte-pieces sync
+
+      # - run: pnpm -F kitbook check
+      - run: pnpm -F svelte-pieces check
+
+      - name: Run Vitest Unit Tests
+        run: pnpm test
+
+      # - name: Slack E2E Results Notification
+      #   uses: 8398a7/action-slack@v3 # https://action-slack.netlify.app/
+      #   if: failure()
+      #   env:
+      #     SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+      #   with:
+      #     status: ${{ job.status }}
+      #     fields: workflow,repo,message,commit,author,action,ref # selectable (default: repo,message)

.npmrc

@@ -0,0 +1 @@
+link-workspace-packages=false

package.json

@@ -8,7 +8,8 @@
 		"build": "pnpm --filter=kitbook build",
 		"preview": "pnpm --filter=kitbook preview",
 		"package": "pnpm --filter=kitbook package",
-		"test": "pnpm --recursive --stream --filter=!kitbook-vscode test -- --run",
+		"test": "vitest",
+		"test:all": "pnpm --recursive --stream --filter=!kitbook-vscode test -- --run",
 		"pieces": "pnpm --filter=svelte-pieces dev",
 		"pieces:build": "pnpm --filter=svelte-pieces build",
 		"pieces:package": "pnpm --filter=svelte-pieces package",
@@ -22,17 +23,17 @@
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.26.1",
-		"@typescript-eslint/eslint-plugin": "^5.57.0",
-		"@typescript-eslint/parser": "^5.57.0",
-		"eslint": "^8.37.0",
+		"@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-svelte3": "^4.0.0",
-		"prettier": "^2.8.7",
-		"prettier-plugin-svelte": "^2.10.0",
-		"svelte": "^3.58.0",
-		"typescript": "~4.9.4",
-		"vite": "^4.2.1",
-		"vitest": "^0.29.8"
+		"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"
 	},
 	"type": "module"
 }

packages/experiment/package.json

@@ -10,15 +10,15 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.15.2",
-		"@sveltejs/package": "^2.0.2",
-		"svelte": "^3.58.0",
-		"svelte-check": "^3.2.0",
-		"tslib": "^2.5.0",
-		"typescript": "^4.9.3",
-		"vite": "^4.2.1",
-		"vite-plugin-inspect": "^0.7.18"
+		"@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"
 	},
 	"type": "module"
 }

packages/kitbook/CHANGELOG.md

@@ -1,5 +1,10 @@
 # kitbook
 
+## 1.0.0-alpha.33 - 2023-6-27
+
+- [breaking] Update to support Svelte 4 required adding MdSvex in `augmentSvelteConfigForKitbook` instead of the Kitbook Vite plugin because it now must come before `vitePreprocess` to work properly. If you were previously customizing the MdSvex config, that is now passed in to the `augmentSvelteConfigForKitbook`, which now takes a second argument that is an object of various config options.
+- Svelte 3 should still work but is no longer actively being tested.
+
 ## 1.0.0-alpha.31 - 2023-4-11
 
 ### Patch Changes

packages/kitbook/package.json

@@ -1,21 +1,19 @@
 {
   "name": "kitbook",
-  "version": "1.0.0-alpha.32",
+  "version": "1.0.0-alpha.35",
   "description": "Svelte Component Documentation and Prototyping Workbench built using SvelteKit",
   "scripts": {
     "dev": "vite dev --mode kitbook",
-    "build:deps": "cd ../.. && pnpm build:deps && cd packages/kitbook",
-    "build": "pnpm build:deps && vite build --mode kitbook",
+    "build": "vite build --mode kitbook",
+    "build:ci": "cd ../.. && pnpm build:deps && cd packages/kitbook && pnpm build",
     "preview": "vite preview --mode kitbook",
+    "sync": "svelte-kit sync",
     "package": "svelte-kit sync && svelte-package && publint",
     "package:watch": "svelte-kit sync && svelte-package --watch",
     "prepublishOnly": "vitest run && npm run package",
     "check": "svelte-check --tsconfig ./tsconfig.json --threshold warning --diagnostic-sources js,svelte",
     "check:watch": "svelte-check --tsconfig ./jsconfig.json --threshold warning --diagnostic-sources js,svelte --watch",
-    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
-    "test": "vitest",
-    "test:ui": "vitest --ui"
+    "test": "vitest"
   },
   "type": "module",
   "svelte": "./dist/index.js",
@@ -43,29 +41,30 @@
     }
   },
   "dependencies": {
-    "@kitbook/mdsvex-shiki-twoslash": "0.0.3",
-    "@kitbook/vite-plugin-kitbook": "0.0.10",
-    "svelte-pieces": "1.0.60",
-    "svelte2tsx": "^0.6.11"
+    "@kitbook/mdsvex-shiki-twoslash": "0.0.4",
+    "@kitbook/vite-plugin-kitbook": "0.0.11",
+    "svelte-pieces": "2.0.0-next.1",
+    "svelte2tsx": "^0.6.16"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^1.13.0",
-    "svelte": "^3.55.0"
+    "svelte": "^3.55.0 || ^4.0.0"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.46",
-    "@sveltejs/adapter-auto": "2.0.0",
-    "@sveltejs/kit": "^1.15.2",
-    "@sveltejs/package": "^2.0.2",
-    "prettier": "^2.8.7",
-    "publint": "^0.1.9",
-    "svelte": "^3.58.0",
-    "svelte-check": "^3.2.0",
-    "svelte-preprocess-unocss": "^0.0.3",
-    "tslib": "^2.5.0",
-    "typescript": "~4.9.4",
-    "vite": "^4.2.1",
-    "vitest": "^0.29.8"
+    "@iconify/json": "^2.2.83",
+    "@sveltejs/adapter-auto": "2.1.0",
+    "@sveltejs/kit": "^1.20.5",
+    "@sveltejs/package": "^2.1.0",
+    "@unocss/svelte-scoped": "^0.53.4",
+    "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"
   },
   "repository": {
     "type": "git",

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

@@ -3,7 +3,7 @@ import type Component from './DefaultSlot.svelte';
 
 import PassIntoDefaultSlot from './PassIntoDefaultSlot.svelte';
 
-export const variants: Variants<typeof Component> = [
+export const variants: Variants<Component> = [
   {
     name: 'Text',
     slots: [

packages/kitbook/src/docs/2-write-documentation.md

@@ -8,11 +8,11 @@ By default Kitbook will display your project's README.md file as its home page,
 
 ## Naming Conventions
 
-Name files and folders according to how you want them shown in the sidebar. Alphabetically `Get Started` comes after `Button` but you use an initial digit followed by a hyphen to update the sort order, flipped in this example:
-- `1-get-started.md` will be displayed as `Get Started`
-- `2-button.svelte` which will be displayed as `Button`
+Name files and folders according to how you want them shown in the sidebar. Alphabetically `Get Started` comes after `Button` but you can use an initial number followed by a hyphen to update the sort order as seen here:
+- `1-get-started.md`, displayed first as `Get Started`
+- `2-button.svelte`, displayed second as `Button`
 
-Folder naming follows the same conventions. `0-components/` will show up as `Components` and be place before `1-about/` (displayed as `About`).
+Folder naming follows the same conventions. `0-components/` will show up as `Components` and be placed before `1-about/` (displayed as `About`).
 
 ## Convenient links
 

packages/kitbook/src/docs/3-customizations/2-app-html.md

@@ -28,7 +28,7 @@ let config = {};
 // ---cut---
 //...
 /** @type {import('@sveltejs/kit').Config} */
-const kitbookOptions = {
+const svelteConfigAdjustments = {
   kit: {
     files: {
       appTemplate: 'src/app.html',
@@ -37,9 +37,8 @@ const kitbookOptions = {
   }
 }
 
-export default augmentSvelteConfigForKitbook(config, kitbookOptions);
+export default augmentSvelteConfigForKitbook(config, { svelteConfigAdjustments });
 
 ```
 
-
-If you do this, ensure you have a styles reset loaded in your `app.html` file above `%sveltekit.head%`. Tailwind and many other CSS frameworks include this. If you don't have one yet, you can copy the `kitbook/styles/tw-reset.css` file into your static directory and link to it in your `app.html`: `<link rel="stylesheet" href="%sveltekit.assets%/tw-reset.css">`.
+If you do this, ensure you have a styles reset loaded in your `app.html` file above `%sveltekit.head%`. Tailwind and many other CSS frameworks include this. If you don't have one yet, place your desired reset file into your static directory and link to it in your `app.html`: `<link rel="stylesheet" href="%sveltekit.assets%/tw-reset.css">`.

packages/kitbook/src/docs/3-customizations/3-mdsvex.md

@@ -1,14 +1,33 @@
 # Kitbook Uses [MDSvex](https://mdsvex.pngwn.io/) 
 
-Kitbook automatically uses MDSvex to preprocess stories files. If you look at the source code, you'll see the extensions in the `mdsvex.config.ts` are set to `['.md', '.svx']`. As well, you'll notice the presence of a few rehype plugins to help with links, and shiki-twoslash for code highlighting. If you want to do your markdown differently you can pass your own `mdsvexConfig` to the `vite-plugin-kitbook`. Do note that if you use an MDSvex layout file then you can't use `lang='ts'` in your stories files.
+Kitbook automatically uses MDSvex to preprocess stories files. If you look at the source code, you'll see the extensions in the `mdsvex.config.ts` are set to `['.md', '.svx']`. As well, you'll notice the presence of a few rehype plugins to help with links, and shiki-twoslash for code highlighting. If you want to process your markdown differently you can pass your own `mdsvexConfig` to the `augmentSvelteConfigForKitbook` function in `svelte.config.js` like this:
+
+```js twoslash title="svelte.config.js"
+import { augmentSvelteConfigForKitbook } from '@kitbook/vite-plugin-kitbook'; 
+/** @type {import('@sveltejs/kit').Config} */
+let config = {};
+
+// ---cut---
+//...
+/** @type {import('mdsvex').MdsvexOptions} */
+const mdsvexConfig = {
+  extensions: ['.svx'],
+  // ...etc
+}
+
+export default augmentSvelteConfigForKitbook(config, { mdsvexConfig });
+
+```
+
+*Do note that if you use an MDSvex layout file then you can't use `lang='ts'` in your stories files.*
 
 ## A note about `.md` and `.svx` file extensions
 
-`.svx` extensions are also supported, but until [Foam](https://foambubble.github.io/foam/) supports custom extensions, `.md` will give you more power through [[6-easy-wikilinks]]. By default your editor will give you markdown language features which is great for writing documentation, but when you want to add a Story and import components, you want the editor to see your file as a Svelte file to get the Svelte language server's help. As you flip between documenting and prototyping, you will constantly be desiring the features of both languages, but so far there is no extension that has merged both. Fortunately you can [[5-add-the-kitbook-extension]] to easily toggle the language association of `.md` files.
+`.svx` extensions are also supported, but until [Foam](https://foambubble.github.io/foam/) supports custom extensions, `.md` will give you more power through [[6-easy-wikilinks]]. By default your editor will give you markdown language features which is great for writing documentation, but when you want to add a Story and import components, you want the editor to see your file as a Svelte file to get the Svelte language server's help. As you flip between documenting and prototyping, you will constantly be desiring the features of both languages, but so far there is no extension that has merged both. Fortunately you can [[5-add-the-kitbook-extension]] to easily toggle the language association of `.md` files using a keyboard shortcut.
 
 ## Using Prettier
 
-Be aware that if you use prettier and run the `Format Document` command when a file is being treated as a `svelte` file you may need to add `<!--prettier-ignore>` above sections of markdown and want to avoid the code from being collapsed into a single paragraph.
+Be aware that if you use prettier and run the `Format Document` command when a file is being treated as a Svelte file you may need to add `<!--prettier-ignore>` above sections of markdown and want to avoid the code from being collapsed into a single paragraph.
 
 [//begin]: # "Autogenerated link references for markdown compatibility"
 [6-easy-wikilinks]: ../6-easy-wikilinks.md "Easy Wikilinks"

packages/kitbook/src/docs/3-customizations/6-customize-sveltekit-config.md

@@ -11,12 +11,12 @@ const config = {
 }
 
 /** @type {import('@sveltejs/kit').Config} */
-const kitbookOptions = { 
+const svelteConfigAdjustments = { 
   kit: { 
     outDir: '.svelte-kit',
   }
 }
-export default augmentSvelteConfigForKitbook(config, kitbookOptions);
+export default augmentSvelteConfigForKitbook(config, { svelteConfigAdjustments });
 ```
 
 [//begin]: # "Autogenerated link references for markdown compatibility"

packages/kitbook/src/docs/4-add-component-variants.md

@@ -8,7 +8,7 @@ Here is an example of a `Header.svelte` component's variants file:
 import type { Variants } from 'kitbook';
 import type Component from './Header.svelte';
 
-export const variants: Variants<typeof Component> = [
+export const variants: Variants<Component> = [
   {
     name: 'Desktop',
     description: 'Write something about this example if desired.',
@@ -33,7 +33,7 @@ export const variants: Variants<typeof Component> = [
 import type { Variants } from 'kitbook';
 import type Component from './+page.svelte';
 
-export const variants: Variants<typeof Component> = [
+export const variants: Variants<Component> = [
   {
     name: 'First',
     description: 'Foo',

packages/kitbook/src/docs/6-easy-wikilinks.md

@@ -1,11 +1,11 @@
 # Easy Wikilinks
 
-Kitbook supports using [Foam](https://foambubble.github.io/foam/) to easily add [wikilinks](https://foambubble.github.io/foam/user/features/wikilinks) between your various documentation pages in a manner that ensures they always stay up-to-date. *As an added bonus they also work in Github.*
+Kitbook supports using [Foam](https://foambubble.github.io/foam/) to easily add [wikilinks](https://foambubble.github.io/foam/user/features/wikilinks) between your various documentation pages in a manner that ensures they always stay up-to-date. *These links will also work in Github.*
 
 ## Setup Foam
 
 - Add the [Foam extension](https://marketplace.visualstudio.com/items?itemName=foam.foam-vscode)
-- Add these needed Foam extension settings:
+- Add these settings:
 
 ```json title=".vscode/settings.json"
 {
@@ -18,7 +18,7 @@ Kitbook supports using [Foam](https://foambubble.github.io/foam/) to easily add
 }
 ```
 
-- Add a placeholder file to tell Foam to turn on:
+- Add a placeholder `.vscode/foam.json` file to tell the Foam extension to activate in your repo:
 
 ```json title=".vscode/foam.json"
 {
@@ -31,7 +31,7 @@ Kitbook supports using [Foam](https://foambubble.github.io/foam/) to easily add
 
 ## Usage
 
-You should read the [Foam](https://foambubble.github.io/foam/) docs, but to give you a quick start, you can create a link to any other `.md` file in your repo by typing `[[` and then letting Foam's autocomplete help you as you type either the filename or the main heading. To link to a page with a name of `5-easy-wiki-links` and a main heading of `Easy Wiki Links`, just start typing heading `[[Easy Wi` and select the autocomplete option to place`[[5-easy-wiki-links]]` in your code. Now you can now click the link in your editor to jump to that file. But it may not be appearing as a link in your browser. Try making one more edit to your file (like a space) and you'll notice Foam automatically creates a [wikilink](https://foambubble.github.io/foam/user/features/wikilinks) reference at the bottom of your file. Kitbook will turn this into the appropriate link for you. 
+You should read the [Foam](https://foambubble.github.io/foam/) docs, but to get you started, you can create a link to any `.md` file in your repo by typing `[[` and then letting Foam's autocomplete help you as you type either the filename or the main heading. For example, to link to this page which has a name of `6-easy-wikilinks` and a main heading of `Easy Wikilinks`, just start typing heading `[[Easy Wi` and select the autocomplete option to place`[[6-easy-wikilinks]]` in your code which will render like this: [[6-easy-wikilinks]]. Now you can now click the link in your editor to jump to that file. *Note that sometimes Foam is one keystroke behind, and you may need to make one more edit to your file (like a space) and before Foam automatically creates a [wikilink](https://foambubble.github.io/foam/user/features/wikilinks) reference at the bottom of your file. Foam handles the linking in your editor and Kitbook uses these wikilink references to give you  appropriate links in the browser.*
 
 The Foam extension does a good job of automatically updating links as you change filenames but until you are very familiar with its behavior, it's a good idea to occasionally run [`Foam: Run Janitor`](https://foambubble.github.io/foam/user/tools/workspace-janitor) from VS Code's command palette to ensure the links across your entire repo are up to date.
 
@@ -40,9 +40,10 @@ Sometimes when you link to a page in mid sentence like [[1-get-started|this proj
 
 ### Linking to a sub-heading
 
-[Foam](https://foambubble.github.io/foam/) supports [linking to specific sections](https://foambubble.github.io/foam/user/features/wikilinks#support-for-sections) of a page, which you can also take advantage of in Kitbook. So `[[6-easy-wikilinks#Setup Foam]]` would result in a direct link to the section above and looks like: [[6-easy-wikilinks#Setup Foam]] (try it). If you change your section titles, Foam will not automatically update the link to that section though it will give you a linting error on the wikilink that no section with such title exists.
+[Foam](https://foambubble.github.io/foam/) supports [linking to specific sections](https://foambubble.github.io/foam/user/features/wikilinks#support-for-sections) of a page, which you can also take advantage of in Kitbook. So `[[6-easy-wikilinks#Setup Foam]]` would result in a direct link to the section above and looks like: [[6-easy-wikilinks#Setup Foam]]. If you change your section titles, Foam will not automatically update the link to that section though it will give you an editor warning on the wikilink that no section with such title exists.
 
 [//begin]: # "Autogenerated link references for markdown compatibility"
+[6-easy-wikilinks]: 6-easy-wikilinks.md "Easy Wikilinks"
 [1-get-started|this project's amazing guide to getting started]: 1-get-started.md "Get Started: How to Create a KitBook"
 [6-easy-wikilinks#Setup Foam]: 6-easy-wikilinks.md "Easy Wikilinks"
 [//end]: # "Autogenerated link references"