internal(website): Declare playground editor globals with valid TypeScript

scripts/copywebsitetypes.sh

@@ -14,10 +14,12 @@ cp ./packages/react/nextjs.d.ts ./website/src/components/Playground/editor-types
 cp ./packages/react/ssr.d.ts ./website/src/components/Playground/editor-types/@data-client/react/ssr.d.ts
 cp ./packages/react/redux.d.ts ./website/src/components/Playground/editor-types/@data-client/react/redux.d.ts
 cp ./node_modules/@types/react/index.d.ts ./website/src/components/Playground/editor-types/react.d.ts
+node ./scripts/strip-dts-comments.mjs ./node_modules/csstype/index.d.ts ./website/src/components/Playground/editor-types/csstype.d.ts
+# ambient module declarations can't use relative imports
+sed 's#from "\./"#from "react"#' ./node_modules/@types/react/jsx-runtime.d.ts > ./website/src/components/Playground/editor-types/react-jsx-runtime.d.ts
 cp ./node_modules/temporal-spec/index.d.ts ./website/src/components/Playground/editor-types/temporal.d.ts
-cp ./node_modules/bignumber.js/bignumber.d.ts ./website/src/components/Playground/editor-types/bignumber.d.ts
+cp ./node_modules/bignumber.js/dist/bignumber.d.mts ./website/src/components/Playground/editor-types/bignumber.d.ts
 cp ./node_modules/@types/qs/index.d.ts ./website/src/components/Playground/editor-types/qs.d.ts
-yarn run rollup --config ./scripts/rollup-plugins/uuid-types.rollup.config.js
-cp ./node_modules/@number-flow/react/dist/index.d.ts ./website/src/components/Playground/editor-types/@number-flow/react.d.ts
-rm ./website/src/components/Playground/editor-types/globals.d.ts
-yarn run rollup --config ./scripts/rollup-plugins/globals.rollup.config.js
+cp ./node_modules/path-to-regexp/dist/index.d.ts ./website/src/components/Playground/editor-types/path-to-regexp.d.ts
+rm -f ./website/src/components/Playground/editor-types/globals.d.ts
+yarn run rollup --config ./scripts/rollup-plugins/editor-types.rollup.config.js

scripts/rollup-plugins/editor-types.rollup.config.js

@@ -0,0 +1,49 @@
+import fs from 'fs';
+import path from 'path';
+import dts from 'rollup-plugin-dts';
+
+import { typeConfig } from './rollup-utils.js';
+
+// Bundles a package's .d.ts into one file for the playground editor
+// (website/src/components/Playground/monaco/typeLibs.ts)
+
+const EDITOR_TYPES = './website/src/components/Playground/editor-types';
+
+// rollup-plugin-dts can't resolve relative imports written as './x.js' or './x'
+const resolveRelativeDts = {
+  name: 'resolve-relative-dts',
+  resolveId(source, importer) {
+    if (!importer || !source.startsWith('.')) return null;
+    const base = path.resolve(
+      path.dirname(importer),
+      source.replace(/\.js$/, ''),
+    );
+    return (
+      [`${base}.d.ts`, path.join(base, 'index.d.ts')].find(file =>
+        fs.existsSync(file),
+      ) ?? null
+    );
+  },
+};
+
+const editorTypes = (input, output, external = []) => ({
+  input,
+  output: { file: `${EDITOR_TYPES}/${output}`, format: 'es' },
+  external,
+  plugins: [resolveRelativeDts, dts({ respectExternal: true })],
+});
+
+export default [
+  editorTypes('./node_modules/uuid/dist/index.d.ts', 'uuid.d.ts'),
+  // inlines number-flow/lite and number-flow/plugins
+  editorTypes(
+    './node_modules/@number-flow/react/dist/index.d.ts',
+    '@number-flow/react.d.ts',
+    ['react'],
+  ),
+  {
+    ...typeConfig,
+    input: './scripts/globals.ts',
+    output: { file: `${EDITOR_TYPES}/globals.d.ts`, format: 'es' },
+  },
+];

scripts/strip-dts-comments.mjs

@@ -0,0 +1,16 @@
+// usage: node scripts/strip-dts-comments.mjs <in.d.ts> <out.d.ts>
+// Reprints a declaration file without comments, for editor types whose JSDoc
+// dwarfs the declarations (csstype's MDN docs are ~75% of the file).
+import fs from 'fs';
+import ts from 'typescript';
+
+const [input, output] = process.argv.slice(2);
+const source = ts.createSourceFile(
+  input,
+  fs.readFileSync(input, 'utf8'),
+  ts.ScriptTarget.Latest,
+);
+fs.writeFileSync(
+  output,
+  ts.createPrinter({ removeComments: true }).printFile(source),
+);

website/src/components/Playground/DesignSystem/TextArea.tsx

@@ -1,10 +1,10 @@
 import classnames from 'clsx';
-import React, { type InputHTMLAttributes } from 'react';
+import React, { type TextareaHTMLAttributes } from 'react';
 
 export function TextArea({
   label,
   ...props
-}: InputHTMLAttributes<HTMLTextAreaElement> & {
+}: TextareaHTMLAttributes<HTMLTextAreaElement> & {
   label?: React.ReactNode;
 }) {
   return (

website/src/components/Playground/README.md

@@ -117,7 +117,9 @@ DesignSystem/       components injected into preview scope
 - All documents are concatenated (deferred with `useDeferredValue`),
   stripped of imports/exports by `transformCode`, and run `noInline`
   (`render(<App />)`) with `preview/scope.ts` as globals. Keep
-  `monaco/typeLibs.ts` declarations in sync with the scope.
+  `monaco/typeLibs.ts` declarations in sync with the scope: `globalScopeLib()`
+  aliases library exports into `declare global`, and `Array`/`Object` keep
+  their built-in types (they're type-only exports).
 - Each playground gets its own `DataProvider` store (`MockResolver` serves
   `fixtures`); `memo(Preview)` keeps it from re-rendering on code edits.
 - Store inspector open state persists per `groupId` via tab storage and

website/src/components/Playground/editor-types/@number-flow/react.d.ts

@@ -1,7 +1,193 @@
-export * from 'number-flow/plugins';
 import * as React from 'react';
-import NumberFlowLite, { Value, Format, Props } from 'number-flow/lite';
-export { Format, NumberPartType, Trend, Value } from 'number-flow/lite';
+
+type ExcludeReadonly<T> = {
+    -readonly [K in keyof T as T[K] extends Readonly<any> ? never : K]: T[K];
+};
+type HTMLProps<K extends keyof HTMLElementTagNameMap> = Partial<ExcludeReadonly<HTMLElementTagNameMap[K]> & {
+    part: string;
+}>;
+type Justify = 'left' | 'right';
+
+type NumberPartType = Exclude<Intl.NumberFormatPartTypes, 'minusSign' | 'plusSign'> | 'sign' | 'prefix' | 'suffix';
+type IntegerPart = {
+    type: NumberPartType & 'integer';
+    value: number;
+};
+type FractionPart = {
+    type: NumberPartType & 'fraction';
+    value: number;
+};
+type DigitPart = IntegerPart | FractionPart;
+type SymbolPart = {
+    type: Exclude<NumberPartType, 'integer' | 'fraction'>;
+    value: string;
+};
+type NumberPartKey = string;
+type KeyedPart = {
+    key: NumberPartKey;
+};
+type KeyedDigitPart = DigitPart & KeyedPart & {
+    pos: number;
+};
+type KeyedSymbolPart = SymbolPart & KeyedPart;
+type KeyedNumberPart = KeyedDigitPart | KeyedSymbolPart;
+type Format = Omit<Intl.NumberFormatOptions, 'notation'> & {
+    notation?: Exclude<Intl.NumberFormatOptions['notation'], 'scientific' | 'engineering'>;
+};
+type Value = Exclude<Parameters<typeof Intl.NumberFormat.prototype.formatToParts>[0], bigint | undefined>;
+declare function formatToData(value: Value, formatter: Intl.NumberFormat, prefix?: string, suffix?: string): {
+    pre: KeyedNumberPart[];
+    integer: KeyedNumberPart[];
+    fraction: KeyedNumberPart[];
+    post: KeyedNumberPart[];
+    valueAsString: string;
+    value: number;
+};
+type Data = ReturnType<typeof formatToData>;
+
+declare const ServerSafeHTMLElement: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+
+type Trend = number | ((oldValue: number, value: number) => number);
+type DigitOptions = {
+    max?: number;
+};
+type Digits = Record<number, DigitOptions>;
+interface Props {
+    transformTiming: EffectTiming;
+    spinTiming: EffectTiming | undefined;
+    opacityTiming: EffectTiming;
+    animated: boolean;
+    respectMotionPreference: boolean;
+    trend: Trend;
+    plugins?: Plugin[];
+    digits: Digits | undefined;
+}
+interface NumberFlowLite extends Props {
+}
+/**
+ * @internal Used for framework wrappers
+ */
+declare class NumberFlowLite extends ServerSafeHTMLElement implements Props {
+    /**
+     * Use `private _private` properties instead of `#private` to avoid # polyfill and
+     * reduce bundle size. Also, use `readonly` properties instead of getters to save on bundle
+     * size, even though you have to do gross stuff like `(this as Mutable<...>)` until TS
+     * supports e.g. https://github.com/microsoft/TypeScript/issues/37487
+     */
+    static defaultProps: Props;
+    constructor();
+    private _animated;
+    get animated(): boolean;
+    set animated(val: boolean);
+    readonly created: boolean;
+    private _pre?;
+    private _num?;
+    private _post?;
+    readonly computedTrend?: number;
+    readonly computedAnimated: boolean;
+    private _internals?;
+    private _data?;
+    /**
+     * @internal
+     */
+    batched: boolean;
+    /**
+     * @internal
+     */
+    set data(data: Data | undefined);
+    private _preUpdated;
+    /**
+     * @internal
+     */
+    willUpdate(): void;
+    private _abortAnimationsFinish?;
+    /**
+     * @internal
+     */
+    didUpdate(): void;
+}
+type SectionProps = {
+    justify: Justify;
+} & HTMLProps<'span'>;
+declare abstract class Section {
+    readonly flow: NumberFlowLite;
+    readonly el: HTMLSpanElement;
+    readonly justify: Justify;
+    protected children: Map<string, Char<KeyedNumberPart>>;
+    constructor(flow: NumberFlowLite, parts: KeyedNumberPart[], { justify, className, ...props }: SectionProps, children?: (chars: Node[]) => Node[]);
+    protected addChar(part: KeyedNumberPart, { startDigitsAtZero, ...props }?: {
+        startDigitsAtZero?: boolean;
+    } & Pick<AnimatePresenceProps, 'animateIn'>): Digit | Sym;
+    private onCharRemove;
+    protected unpop(char: Char): void;
+    protected pop(chars: Map<any, Char>): void;
+    protected addNewAndUpdateExisting(parts: KeyedNumberPart[]): void;
+    private _prevOffset?;
+    willUpdate(): void;
+    didUpdate(): void;
+}
+type OnRemove = () => void;
+interface AnimatePresenceProps {
+    onRemove?: OnRemove;
+    animateIn?: boolean;
+}
+declare class AnimatePresence {
+    readonly flow: NumberFlowLite;
+    readonly el: HTMLElement;
+    private _present;
+    private _onRemove?;
+    constructor(flow: NumberFlowLite, el: HTMLElement, { onRemove, animateIn }?: AnimatePresenceProps);
+    get present(): boolean;
+    private _remove;
+    set present(val: boolean);
+}
+interface CharProps extends AnimatePresenceProps {
+}
+declare abstract class Char<P extends KeyedNumberPart = KeyedNumberPart> extends AnimatePresence {
+    readonly section: Section;
+    protected value: P['value'];
+    readonly el: HTMLSpanElement;
+    constructor(section: Section, value: P['value'], el: HTMLSpanElement, props?: AnimatePresenceProps);
+    abstract willUpdate(parentRect: DOMRect): void;
+    abstract update(value: P['value']): void;
+    abstract didUpdate(parentRect: DOMRect): void;
+}
+declare class Digit extends Char<KeyedDigitPart> {
+    readonly pos: number;
+    private _numbers;
+    readonly length: number;
+    constructor(section: Section, type: KeyedDigitPart['type'], value: KeyedDigitPart['value'], pos: number, props?: CharProps);
+    private _prevValue?;
+    private _prevCenter?;
+    willUpdate(parentRect: DOMRect): void;
+    update(value: KeyedDigitPart['value']): void;
+    didUpdate(parentRect: DOMRect): void;
+    getDelta(): number;
+    private _onAnimationsFinish;
+}
+declare class Sym extends Char<KeyedSymbolPart> {
+    private type;
+    constructor(section: Section, type: KeyedSymbolPart['type'], value: KeyedSymbolPart['value'], props?: CharProps);
+    private _children;
+    private _prevOffset?;
+    willUpdate(parentRect: DOMRect): void;
+    private _onChildRemove;
+    update(value: KeyedSymbolPart['value']): void;
+    didUpdate(parentRect: DOMRect): void;
+}
+
+/**
+ * Makes number transitions appear to pass through in between numbers.
+ */
+declare const continuous: Plugin;
+
+type Plugin = {
+    onUpdate?(data: Data, prev: Data, context: NumberFlowLite): void;
+    getDelta?(value: number, prev: number, context: Digit): number | void;
+};
 
 declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
@@ -47,4 +233,4 @@ declare function useCanAnimate({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;
 }): boolean;
 
-export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, styles, useCanAnimate, useIsSupported, usePrefersReducedMotion };
+export { type Format, NumberFlowElement, NumberFlowGroup, type NumberFlowProps, type NumberPartType, type Plugin, type Trend, type Value, continuous, NumberFlow as default, styles, useCanAnimate, useIsSupported, usePrefersReducedMotion };