initial 2.0 landing page (#983)

ark/dark/injected.tmLanguage.json

@@ -11,7 +11,7 @@
 	"repository": {
 		"arkDefinition": {
 			"contentName": "meta.embedded.arktype.definition",
-			"begin": "(([^\\)\\(\\s]+)?(?:type|scope|define|match|fn|\\.morph|\\.and|\\.or|\\.when))(\\()",
+			"begin": "(([^\\)\\(\\s]+)?(?:type|scope|define|match|fn|\\.morph|\\.and|\\.or|\\.when|\\.extends|\\.intersect))(\\()",
 			"beginCaptures": {
 				"1": {
 					"name": "entity.name.function.ts"

ark/dark/package.json

@@ -2,7 +2,7 @@
 	"name": "arkdark",
 	"displayName": "ArkDark",
 	"description": "ArkType syntax highlighting and theme⛵",
-	"version": "5.1.6",
+	"version": "5.1.7",
 	"publisher": "arktypeio",
 	"type": "module",
 	"scripts": {

ark/dark/tsWithArkType.tmLanguage.json

@@ -22,7 +22,7 @@
 	"repository": {
 		"arkDefinition": {
 			"contentName": "meta.embedded.arktype.definition",
-			"begin": "(([^\\)\\(\\s]+)?(?:type|scope|define|match|fn|\\.morph|\\.and|\\.or|\\.when))(\\()",
+			"begin": "(([^\\)\\(\\s]+)?(?:type|scope|define|match|fn|\\.morph|\\.and|\\.or|\\.when|\\.extends|\\.intersect))(\\()",
 			"beginCaptures": {
 				"1": {
 					"name": "entity.name.function.ts"

ark/docs/astro.config.js

@@ -3,7 +3,7 @@
 import react from "@astrojs/react"
 import starlight from "@astrojs/starlight"
 import { defineConfig } from "astro/config"
-import { shikiConfig } from "./shiki.config.js"
+import { shikiConfig } from "./src/components/shiki.config.js"
 
 // https://astro.build/config
 export default defineConfig({

ark/docs/src/components/BenchmarksGraph.tsx

@@ -0,0 +1,99 @@
+import React from "react"
+
+const barStyles: React.CSSProperties = {
+	height: "30px",
+	borderRadius: "5px",
+	display: "flex",
+	alignItems: "baseline",
+	marginRight: "1rem",
+	color: "black"
+}
+
+const arkBarStyles = {
+	...barStyles,
+	background:
+		"repeating-linear-gradient(135deg, #40decc, #40decc 10px, #34c8b9 10px, #34c8b9 20px)"
+}
+
+const zodBarStyles = {
+	...barStyles,
+	background:
+		"repeating-linear-gradient(135deg, #b084f6, #b084f6 10px, #9a6fe3 10px, #9a6fe3 20px)"
+}
+
+export const RuntimeBenchmarksGraph = () => (
+	<div style={{ fontSize: 14, fontWeight: 500 }}>
+		<div
+			style={{
+				display: "flex",
+				flexDirection: "row"
+			}}
+		>
+			<h6 style={{ fontSize: 16 }}>
+				Node v22.2.0 (
+				<a
+					target="_blank"
+					href="https://moltar.github.io/typescript-runtime-type-benchmarks/"
+				>
+					source
+				</a>
+				)
+			</h6>
+		</div>
+		<div style={{ ...arkBarStyles, width: "100%" }}>
+			&nbsp;&nbsp;ArkType (68,581,169 ops)
+		</div>
+		<div
+			style={{
+				display: "flex",
+				alignItems: "center"
+			}}
+		>
+			<div style={{ ...zodBarStyles, width: "1.06%" }}></div>
+			Zod (727,703 ops)
+		</div>
+	</div>
+)
+
+export const TypeBenchmarksGraph = () => (
+	<div style={{ fontSize: 14, fontWeight: 500 }}>
+		<div
+			style={{
+				display: "flex",
+				flexDirection: "row"
+			}}
+		>
+			<h6 style={{ fontSize: 15 }}>
+				Union Type Instantiations, TypeScript 5.4.5 (
+				<a
+					target="_blank"
+					href="https://github.com/arktypeio/arktype/blob/468da965d9a2bbb16fe38d37e82c3b35e5158334/ark/repo/scratch/discriminatedComparison.ts"
+				>
+					source
+				</a>
+				)
+			</h6>
+		</div>
+		<div
+			style={{
+				display: "flex",
+				alignItems: "center"
+			}}
+		>
+			<div style={{ ...arkBarStyles, width: "10.94%" }}></div>
+			ArkType Auto-Discriminated (7,801)
+		</div>
+		<div
+			style={{
+				display: "flex",
+				alignItems: "center"
+			}}
+		>
+			<div style={{ ...zodBarStyles, width: "34.98%" }}></div>
+			Zod Raw (24,944)
+		</div>
+		<div style={{ ...zodBarStyles, width: "100%", justifyContent: "end" }}>
+			Zod Discriminated (71,312)&nbsp;&nbsp;
+		</div>
+	</div>
+)

ark/docs/src/components/highlight.ts

@@ -1,7 +1,7 @@
 import arkdarkColors from "arkdark/color-theme.json"
 import arktypeTextmate from "arkdark/tsWithArkType.tmLanguage.json"
 import { getHighlighter } from "shiki"
-import { twoslash } from "../../shiki.config.js"
+import { twoslash } from "./shiki.config.js"
 
 let highlighter: Awaited<ReturnType<typeof getHighlighter>> | undefined
 

ark/docs/src/components/shiki.config.js

@@ -0,0 +1,109 @@
+// @ts-check
+
+import { transformerTwoslash } from "@shikijs/twoslash"
+import arkdarkColors from "arkdark/color-theme.json"
+import arkdarkPackageJson from "arkdark/package.json"
+import arktypeTextmate from "arkdark/tsWithArkType.tmLanguage.json"
+import { defaultCompilerOptions } from "twoslash"
+
+// Theme adjustments
+
+arkdarkColors.colors["editor.background"] = "#00000027"
+// @ts-expect-error
+arkdarkColors.tokenColors.push({
+	// this is covered by editorBracketHighlight.foreground1 etc. in VSCode,
+	// but it's not available in Shiki so add a replacement
+	scope: ["meta.brace"],
+	settings: {
+		foreground: "#f5cf8f"
+	}
+})
+
+const twoslashPropertyPrefix = "(property) "
+
+export const twoslash = transformerTwoslash({
+	langs: ["ts", "js"],
+	twoslashOptions: {
+		compilerOptions: {
+			...defaultCompilerOptions,
+			exactOptionalPropertyTypes: true
+		},
+		filterNode: node => {
+			switch (node.type) {
+				case "hover":
+					if (node.text.startsWith("const")) {
+						if (node.text.endsWith(", {}>"))
+							// omit default scope param from type display
+							node.text = node.text.slice(0, -5) + ">"
+						// show type with completions populated for known examples
+						node.text = node.text.replace(
+							"isAdmin?: never",
+							"isAdmin?: boolean | null"
+						)
+						node.text = node.text.replace(
+							"luckyNumbers: never",
+							"luckyNumbers: (number | bigint)[]"
+						)
+						// filter out the type of Type's invocation
+						// as opposed to the Type itself
+						return !node.text.includes("(data: unknown)")
+					}
+					if (node.text.startsWith(twoslashPropertyPrefix)) {
+						const expression = node.text.slice(twoslashPropertyPrefix.length)
+						if (expression.startsWith("ArkErrors.summary")) {
+							// cleanup runtime errors for display
+							const runtimeErrorSummary = /^ArkErrors\.summary: "(.*)"/.exec(
+								expression
+							)
+							if (runtimeErrorSummary) {
+								node.text = runtimeErrorSummary[1].split("\\n").join("\n")
+							}
+							// this helps demonstrate narrowing on discrimination
+							return true
+						}
+						if (expression === "luckyNumbers: (number | bigint)[]")
+							// this helps demonstrate narrowing on discrimination
+							return true
+						if (expression.endsWith("typeof ArkErrors"))
+							// also helps clarify how discrimination works
+							return true
+						return false
+					}
+					return false
+				case "error":
+					// adapted from my ErrorLens implementation at
+					// https://github.com/usernamehw/vscode-error-lens/blob/d1786ddeedee23d70f5f75b16415a6579b554b59/src/utils/extUtils.ts#L127
+					for (const transformation of arkdarkPackageJson.contributes
+						.configurationDefaults["errorLens.replace"]) {
+						const regex = new RegExp(transformation.matcher)
+						const matchResult = regex.exec(node.text)
+						if (matchResult) {
+							node.text = transformation.message
+							// Replace groups like $0 and $1 with groups from the match
+							for (
+								let groupIndex = 0;
+								groupIndex < matchResult.length;
+								groupIndex++
+							) {
+								node.text = node.text.replace(
+									new RegExp(`\\$${groupIndex}`, "gu"),
+									matchResult[Number(groupIndex)]
+								)
+							}
+							node.text = `TypeScript: ${node.text}`
+						}
+					}
+				default:
+					return true
+			}
+		}
+	}
+})
+
+/** @type { import("astro").ShikiConfig } */
+export const shikiConfig = {
+	theme: arkdarkColors,
+	// @ts-expect-error
+	langs: [arktypeTextmate],
+	transformers: [twoslash]
+}

ark/docs/src/content/docs/betterErrors.twoslash.ts

@@ -0,0 +1,29 @@
+import { type } from "arktype"
+
+const user = type({
+	name: "string",
+	luckyNumbers: "(number | bigint)[]",
+	"isAdmin?": "boolean | null"
+})
+
+// ---cut---
+const out = user({
+	luckyNumbers: [31, "255", 1337n],
+	isAdmin: 1
+})
+
+if (out instanceof type.errors) {
+	// ---cut-start---
+	// just a trick to display the runtime error
+	if (
+		out.summary !==
+		`luckyNumbers[1] must be a bigint or a number (was string)
+name must be a string (was missing)
+isAdmin must be false, null or true (was 1)`
+	)
+		throw new Error()
+
+	// ---cut-end---
+	// hover out.summary to see validation errors
+	console.error(out.summary)
+} else console.log(out.luckyNumbers)

ark/docs/src/content/docs/clearAndConcise.twoslash.ts

@@ -0,0 +1,9 @@
+// @errors: 2322
+import { type } from "arktype"
+// ---cut---
+// hover me
+const user = type({
+	name: "string",
+	luckyNumbers: "number | bigint)[]",
+	"isAdmin?": "boolean | null"
+})