fix: various bugs (#337)

kobaltedev · Feb 26, 2024 · 55e0432 · 55e0432
1 parent c1a74f1
commit 55e0432
Show file tree

Hide file tree

Showing 31 changed files with 5,077 additions and 9,284 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
-
 node_modules
 build
 dist
@@ -24,6 +23,13 @@ lerna-debug.log
 # solid
 .solid
 .vinxi
+.netlify
+.output
+
+# kobalte dev
+packages/core/dev/App.tsx
+packages/core/dev/index.css
+packages/core/NOTICE.txt
 
 # VSC Settings
 .vscode/settings.json

diff --git a/.husky/commit-msg b/.husky/commit-msg
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/.prettierignore b/.prettierignore
@@ -4,4 +4,4 @@
 *.tsx
 *.json
 *.cjs
-pnpm-lock.json
+pnpm-lock.yaml
diff --git a/NOTICE.txt b/NOTICE.txt
@@ -229,3 +229,11 @@ This codebase contains a modified portion of code from the TC39 Temporal proposa
     LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
     OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
     SUCH DAMAGE.
+
+-------------------------------------------------------------------------------
+This codebase contains a modified portion of code from Corvu which can be obtained at:
+  * SOURCE:
+    * https://github.com/corvudev/corvu/blob/main/packages/corvu/
+
+  * LICENSE:
+    * https://github.com/corvudev/corvu/blob/main/LICENSE
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,71 +1,72 @@
 {
-  "name": "@kobalte/docs",
-  "private": true,
-  "description": "Documentation website of Kobalte.",
-  "keywords": [
-    "solid",
-    "solidjs",
-    "ui",
-    "library",
-    "design-system",
-    "components",
-    "headless",
-    "unstyled",
-    "aria"
-  ],
-  "homepage": "https://github.com/kobaltedev/kobalte/tree/main/apps/docs#readme",
-  "bugs": {
-    "url": "https://github.com/kobaltedev/kobalte/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/kobaltedev/kobalte.git"
-  },
-  "license": "MIT",
-  "author": "Fabien Marie-Louise <fabienml.dev@gmail.com>",
-  "type": "module",
-  "scripts": {
-    "build": "vinxi build",
-    "clean": "rm -rf .solid && rm -rf netlify && rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "dev": "vinxi dev --host",
-    "start": "vinxi start"
-  },
-  "dependencies": {
-    "@docsearch/css": "3.5.2",
-    "@docsearch/js": "3.5.2",
-    "@kobalte/core": "0.12.1",
-    "@solidjs/meta": "0.29.3",
-    "@solidjs/router": "0.10.6",
-    "@tanstack/solid-virtual": "3.0.0-beta.6",
-    "clsx": "2.0.0",
-    "solid-js": "1.8.8",
-    "@solidjs/start": "0.4.11",
-    "vinxi": "0.1.10",
-    "undici": "5.23.0"
-  },
-  "devDependencies": {
-    "@kobalte/tailwindcss": "0.9.0",
-    "@mdx-js/mdx": "3.0.0",
-    "@mdx-js/rollup": "3.0.0",
-    "@tailwindcss/typography": "0.5.9",
-    "acorn": "8.10.0",
-    "autoprefixer": "10.4.15",
-    "github-slugger": "2.0.0",
-    "postcss": "8.4.28",
-    "rehype-pretty-code": "0.12.3",
-    "remark-shiki-twoslash": "3.1.3",
-    "rehype-raw": "7.0.0",
-    "rehype-slug": "6.0.0",
-    "remark-gfm": "4.0.0",
-    "shiki": "0.14.7",
-    "solid-mdx": "0.0.7",
-    "tailwindcss": "3.3.3",
-    "typescript": "4.9.5",
-    "unist-util-visit": "5.0.0",
-    "vite": "5.0.12",
-    "@vinxi/plugin-mdx": "3.7.1"
-  },
-  "engines": {
-    "node": ">=18"
-  }
+	"name": "@kobalte/docs",
+	"private": true,
+	"description": "Documentation website of Kobalte.",
+	"keywords": [
+		"solid",
+		"solidjs",
+		"ui",
+		"library",
+		"design-system",
+		"components",
+		"headless",
+		"unstyled",
+		"aria"
+	],
+	"homepage": "https://github.com/kobaltedev/kobalte/tree/main/apps/docs#readme",
+	"bugs": {
+		"url": "https://github.com/kobaltedev/kobalte/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/kobaltedev/kobalte.git"
+	},
+	"license": "MIT",
+	"author": "Fabien Marie-Louise <fabienml.dev@gmail.com>",
+	"type": "module",
+	"scripts": {
+		"build": "NODE_OPTIONS=\"--max-old-space-size=8192\" vinxi build",
+		"build:dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" DEVELOPMENT=1 vinxi build",
+		"clean": "rm -rf .solid && rm -rf netlify && rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+		"dev": "vinxi dev --host",
+		"start": "vinxi start"
+	},
+	"dependencies": {
+		"@docsearch/css": "3.5.2",
+		"@docsearch/js": "3.5.2",
+		"@kobalte/core": "0.12.1",
+		"@solidjs/meta": "0.29.3",
+		"@solidjs/router": "0.12.4",
+		"@tanstack/solid-virtual": "3.0.0-beta.6",
+		"clsx": "2.0.0",
+		"solid-js": "1.8.15",
+		"@solidjs/start": "0.5.10",
+		"vinxi": "0.3.3",
+		"undici": "5.23.0"
+	},
+	"devDependencies": {
+		"@kobalte/tailwindcss": "0.9.0",
+		"@mdx-js/mdx": "3.0.0",
+		"@mdx-js/rollup": "3.0.0",
+		"@tailwindcss/typography": "0.5.9",
+		"acorn": "8.10.0",
+		"autoprefixer": "10.4.15",
+		"github-slugger": "2.0.0",
+		"postcss": "8.4.28",
+		"rehype-pretty-code": "0.12.3",
+		"remark-shiki-twoslash": "3.1.3",
+		"rehype-raw": "7.0.0",
+		"rehype-slug": "6.0.0",
+		"remark-gfm": "4.0.0",
+		"shiki": "0.14.7",
+		"solid-mdx": "0.0.7",
+		"tailwindcss": "3.3.3",
+		"typescript": "4.9.5",
+		"unist-util-visit": "5.0.0",
+		"vite": "5.1.4",
+		"@vinxi/plugin-mdx": "3.7.1"
+	},
+	"engines": {
+		"node": ">=18"
+	}
 }
diff --git a/apps/docs/src/app.tsx b/apps/docs/src/app.tsx
@@ -19,22 +19,22 @@ import { getCookie } from "vinxi/server";
 import toastStyles from "./examples/toast.module.css";
 import { mdxComponents } from "./mdx-components";
 
-export const mods = /*#__PURE__*/ import.meta.glob<
-	true,
-	string,
-	{
-		getHeadings: () => {
-			depth: number;
-			text: string;
-			slug: string;
-		}[];
-	}
->("./routes/docs/**/*.{md,mdx}", {
-	eager: true,
-	query: {
-		meta: "",
-	},
-});
+//export const mods = /*#__PURE__*/ import.meta.glob<
+//	true,
+//	string,
+//	{
+//		getHeadings: () => {
+//			depth: number;
+//			text: string;
+//			slug: string;
+//		}[];
+//	}
+//>("./routes/docs/**/*.{md,mdx}", {
+//	eager: true,
+//	query: {
+//		meta: "",
+//	},
+//});
 
 function getServerCookies() {
 	"use server";
@@ -52,28 +52,26 @@ export default function App() {
 	return (
 		<Router
 			root={(props) => (
-				<Suspense>
-					<MetaProvider>
-						<Title>Kobalte</Title>
-						<ColorModeScript storageType={storageManager.type} />
-						<ColorModeProvider storageManager={storageManager}>
-							<MDXProvider components={mdxComponents}>
-								{props.children}
+				<MetaProvider>
+					<Title>Kobalte</Title>
+					<ColorModeScript storageType={storageManager.type} />
+					<ColorModeProvider storageManager={storageManager}>
+						<MDXProvider components={mdxComponents}>
+							<Suspense>{props.children}</Suspense>
 
-								<Portal>
-									<Toast.Region>
-										<Toast.List class={toastStyles.toast__list} />
-									</Toast.Region>
-									<Toast.Region regionId="custom-region-id">
-										<Toast.List
-											class={toastStyles["toast__list-custom-region"]}
-										/>
-									</Toast.Region>
-								</Portal>
-							</MDXProvider>
-						</ColorModeProvider>
-					</MetaProvider>
-				</Suspense>
+							<Portal>
+								<Toast.Region>
+									<Toast.List class={toastStyles.toast__list} />
+								</Toast.Region>
+								<Toast.Region regionId="custom-region-id">
+									<Toast.List
+										class={toastStyles["toast__list-custom-region"]}
+									/>
+								</Toast.Region>
+							</Portal>
+						</MDXProvider>
+					</ColorModeProvider>
+				</MetaProvider>
 			)}
 		>
 			<FileRoutes />

diff --git a/apps/docs/src/components/table-of-contents.tsx b/apps/docs/src/components/table-of-contents.tsx
@@ -6,8 +6,10 @@ import {
 	Suspense,
 	createEffect,
 	createSignal,
+	on,
 	onCleanup,
 } from "solid-js";
+import { isServer } from "solid-js/web";
 import { mods } from "../app";
 
 interface TocItem {
@@ -79,22 +81,74 @@ function useCurrentSection(tableOfContents: Accessor<TocItem[] | undefined>) {
 	return currentSection;
 }
 
-const getTOC = cache(async (pathname: string) => {
-	"use server";
-
-	const mod = mods[`./routes${pathname}.mdx`] ?? mods[`./routes${pathname}.md`];
-	return !mod
-		? []
-		: mod.getHeadings().filter((h) => h.depth > 1 && h.depth <= 3);
-}, "toc");
+//const getTOC = cache(async (pathname: string) => {
+//	"use server";
+//
+//	const mod = mods[`./routes${pathname}.mdx`] ?? mods[`./routes${pathname}.md`];
+//	return !mod
+//		? []
+//		: mod.getHeadings().filter((h) => h.depth > 1 && h.depth <= 3);
+//}, "toc");
+
+function updateHeadings(setter: Setter<TocItem[]>) {
+	if (document.getElementsByTagName("article").length === 0) {
+		setTimeout(() => updateHeadings(setter), 1);
+		return;
+	}
+
+	console.log("update");
+
+	setter(
+		[
+			...document
+				.getElementsByTagName("article")[0]
+				.querySelectorAll("h1, h2, h3, h4, h5, h6"),
+		].map((element) => ({
+			depth: Number(element.tagName.substr(1)),
+			text: element.textContent!,
+			slug: element.id,
+		})),
+	);
+}
 
 export function TableOfContents() {
 	const path = useLocation();
 
-	const toc = createAsync(() => getTOC(path.pathname));
+	//	const toc = createAsync(() => getTOC(path.pathname));
+
+	const [toc, setToc] = createSignal<TocItem[]>([]);
+
+	createEffect(
+		on(
+			() => path.pathname,
+			(pathname) => {
+				if (isServer) return;
+
+				updateHeadings(setToc);
+			},
+		),
+	);
 
 	const currentSection = useCurrentSection(toc);
 
+	createEffect(
+		on(
+			() => currentSection(),
+			(currentSection) => {
+				if (isServer) return;
+
+				const element = document.querySelector(
+					`a[data-toc-slug="${currentSection}"]`,
+				);
+
+				element?.scrollIntoView({
+					behavior: "smooth",
+					block: "nearest",
+				});
+			},
+		),
+	);
+
 	return (
 		<div class="hidden xl:sticky xl:top-[4.5rem] xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-4 xl:pr-6">
 			<nav aria-labelledby="on-this-page-title" class="w-56">
@@ -111,6 +165,7 @@ export function TableOfContents() {
 								<li>
 									<h3>
 										<a
+											data-toc-slug={section.slug}
 											href={`${path.pathname}#${section.slug}`}
 											class={clsx(
 												"block w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",

diff --git a/apps/docs/src/entry-server.tsx b/apps/docs/src/entry-server.tsx
@@ -1,5 +1,4 @@
-import { createHandler } from "@solidjs/start/entry";
-import { StartServer } from "@solidjs/start/server";
+import { StartServer, createHandler } from "@solidjs/start/server";
 
 export default createHandler(() => (
 	<StartServer

diff --git a/apps/docs/src/mdx-components.tsx b/apps/docs/src/mdx-components.tsx
@@ -11,7 +11,7 @@ export const mdxComponents = {
 
 		return (
 			<h1 {...others}>
-				<MetaTitle>{local.children} – Kobalte</MetaTitle>
+				<MetaTitle>{`${local.children} – Kobalte`}</MetaTitle>
 				{local.children}
 			</h1>
 		);