arktype
arktype copied to clipboard
Add playground + bug template for 2.0
In 1.0, we had a StackBlitz playground that could be used to experiment with validation and repro bugs (see https://stackblitz.com/edit/arktype-bug?devToolsHeight=33&file=package.json).
StackBlitz has been very slow to support newer TS versions in their base TS project, so likely we'd have to migrate to web-containers to support this, but it shouldn't be much work to just transfer it 1:1 since we've dropped the dynamic generation.
Once this is done, we should also add this back to the repro section of .github/ISSUE_TEMPLATE/bug_report.md
:
<!--
1. Update the template link below so that it reproduces the problem you're having.
2. Add comments to describe differences between actual and expected behavior.
3. Click "Fork" in the top-left corner of StackBlitz
4. Copy the new URL and use it to replace the template URL below.
5. Copy the source code you used to repro the bug and paste it into the code block below.
-->
https://stackblitz.com/edit/arktype-bug?devToolsHeight=33&file=demo.ts
```ts
import { type, scope } from "arktype"
// Paste reproduction code here
I began working on a custom Monaco environment w/ ArkType syntax highlighting.
Some aspects can probably be standardized to reuse some of the styling from Shiki in the docs, but might be a good basis for a starting point (or terrible):
import Editor, { useMonaco } from "@monaco-editor/react"
import arkdarkColors from "arkdark/arkdark.json"
import arktypeTextmate from "arkdark/tsWithArkType.tmLanguage.json"
import type * as Monaco from "monaco-editor"
import { wireTmGrammars } from "monaco-editor-textmate"
import { Registry } from "monaco-textmate"
import { loadWASM } from "onigasm"
import onigasm from "onigasm/lib/onigasm.wasm?url"
import React, { useState } from "react"
import "../styles.css"
// import syntax from "./syntax.ts?raw"
interface IVSCodeTheme {
colors: {
[name: string]: string
}
tokenColors: ITokenColor[]
}
interface ITokenColor {
scope: string | string[]
settings: {
foreground?: string
background?: string
fontStyle?: string
}
}
const translateVSCodeTheme = (
theme: IVSCodeTheme
): Monaco.editor.IStandaloneThemeData => {
theme.colors["editor.background"] = "#f5cf8f0a"
return {
base: "vs-dark",
inherit: false,
colors: theme.colors,
rules: theme.tokenColors.flatMap((c) => {
if (Array.isArray(c.scope)) {
return c.scope.map(
(sub) =>
({
token: sub,
background: c.settings.background,
foreground: c.settings.foreground,
fontStyle: c.settings.fontStyle
}) as Monaco.editor.ITokenThemeRule
)
}
return {
token: c.scope,
background: c.settings.background,
foreground: c.settings.foreground,
fontStyle: c.settings.fontStyle
} as Monaco.editor.ITokenThemeRule
})
}
}
const theme = translateVSCodeTheme(arkdarkColors)
const setupMonaco = async (monaco: typeof Monaco) => {
await loadWASM(onigasm)
monaco.editor.defineTheme("arkdark", theme)
await wireTmGrammars(
monaco,
new Registry({
getGrammarDefinition: async () => ({
format: "json",
content: arktypeTextmate
})
}),
new Map().set("typescript", "source.ts")
)
}
export const HomeDemo = () => {
const [loaded, setLoaded] = useState(false)
const monaco = useMonaco()
if (monaco && !loaded) setupMonaco(monaco).then(() => setLoaded(true))
return loaded ? (
<Editor
height="30vh"
defaultLanguage="typescript"
defaultValue=""
theme="arkdark"
options={{
minimap: { enabled: false },
scrollBeyondLastLine: false
}}
onMount={(editor, monaco) => {
// TODO: ?
monaco
const editorElement = editor.getDomNode()
if (editorElement) {
editorElement.style.borderRadius = "16px"
editorElement.style.boxShadow =
"0 10px 15px 0 rgba(0, 0, 0, 0.3), 0 15px 30px 0 rgba(0, 0, 0, 0.22)"
editorElement.style.transition =
"all 0.3s cubic-bezier(.25,.8,.25,1)"
editorElement.style.backdropFilter = "blur(16px)"
const guard = editorElement?.querySelector(
".overflow-guard"
) as HTMLElement | null
guard!.style.borderRadius = "16px"
}
}}
/>
) : (
"Loading..."
)
}