@twick/2d 0.14.21 → 0.15.0

package/src/lib/code/CodeSignal.ts

@@ -1,327 +0,0 @@
-import type {
-  Signal,
-  SignalValue,
-  ThreadGenerator,
-  TimingFunction,
-} from '@twick/core';
-import {
-  createSignal,
-  deepLerp,
-  DependencyContext,
-  SignalContext,
-  unwrap,
-} from '@twick/core';
-import {addInitializer, getPropertyMetaOrCreate} from '../decorators';
-import {defaultDiffer} from './CodeDiffer';
-import {insert, replace} from './CodeFragment';
-import type {CodeHighlighter} from './CodeHighlighter';
-import type {CodePoint, CodeRange} from './CodeRange';
-import type {CodeScope, CodeTag, PossibleCodeScope} from './CodeScope';
-import {CODE, parseCodeScope, resolveCodeTag} from './CodeScope';
-import {defaultTokenize} from './CodeTokenizer';
-import {extractRange} from './extractRange';
-
-interface CodeModifier<TOwner> {
-  (code: string): TOwner;
-  (code: string, duration: number): ThreadGenerator;
-  (duration?: number): TagGenerator;
-}
-
-interface CodeInsert<TOwner> {
-  (point: CodePoint, code: string): TOwner;
-  (point: CodePoint, code: string, duration: number): ThreadGenerator;
-}
-
-interface CodeRemove<TOwner> {
-  (range: CodeRange): TOwner;
-  (range: CodeRange, duration: number): ThreadGenerator;
-}
-
-interface CodeReplace<TOwner> {
-  (range: CodeRange, code: string): TOwner;
-  (range: CodeRange, code: string, duration: number): ThreadGenerator;
-}
-
-type TagGenerator = (
-  strings: TemplateStringsArray,
-  ...tags: CodeTag[]
-) => ThreadGenerator;
-
-export interface CodeSignalHelpers<TOwner> {
-  edit(duration?: number): TagGenerator;
-  append: CodeModifier<TOwner>;
-  prepend: CodeModifier<TOwner>;
-  insert: CodeInsert<TOwner>;
-  remove: CodeRemove<TOwner>;
-  replace: CodeReplace<TOwner>;
-}
-
-export type CodeSignal<TOwner> = Signal<
-  PossibleCodeScope,
-  CodeScope,
-  TOwner,
-  CodeSignalContext<TOwner>
-> &
-  CodeSignalHelpers<TOwner>;
-
-export class CodeSignalContext<TOwner>
-  extends SignalContext<PossibleCodeScope, CodeScope, TOwner>
-  implements CodeSignalHelpers<TOwner>
-{
-  private readonly progress = createSignal(0);
-
-  public constructor(
-    initial: PossibleCodeScope,
-    owner: TOwner,
-    private readonly highlighter?: SignalValue<CodeHighlighter | null>,
-  ) {
-    super(initial, deepLerp, owner);
-    Object.defineProperty(this.invokable, 'edit', {
-      value: this.edit.bind(this),
-    });
-    Object.defineProperty(this.invokable, 'append', {
-      value: this.append.bind(this),
-    });
-    Object.defineProperty(this.invokable, 'prepend', {
-      value: this.prepend.bind(this),
-    });
-    Object.defineProperty(this.invokable, 'insert', {
-      value: this.insert.bind(this),
-    });
-    Object.defineProperty(this.invokable, 'remove', {
-      value: this.remove.bind(this),
-    });
-    Object.defineProperty(this.invokable, 'replace', {
-      value: this.replace.bind(this),
-    });
-  }
-
-  public override *tweener(
-    value: SignalValue<PossibleCodeScope>,
-    duration: number,
-    timingFunction: TimingFunction,
-  ): ThreadGenerator {
-    let tokenize = defaultTokenize;
-    const highlighter = unwrap(this.highlighter);
-    if (highlighter) {
-      yield (async () => {
-        do {
-          await DependencyContext.consumePromises();
-          highlighter.initialize();
-        } while (DependencyContext.hasPromises());
-      })();
-      tokenize = (input: string) => highlighter.tokenize(input);
-    }
-
-    this.progress(0);
-    this.set({
-      progress: this.progress,
-      fragments: defaultDiffer(this.get(), this.parse(unwrap(value)), tokenize),
-    });
-    yield* this.progress(1, duration, timingFunction);
-    this.set(value);
-  }
-
-  public edit(duration: number = 0.6): TagGenerator {
-    return (strings, ...tags) =>
-      this.editTween(CODE(strings, ...tags), duration);
-  }
-
-  public append(code: string): TOwner;
-  public append(code: string, duration: number): ThreadGenerator;
-  public append(duration?: number): TagGenerator;
-  public append(
-    first: string | number = 0.6,
-    duration?: number,
-  ): TOwner | ThreadGenerator | TagGenerator {
-    if (typeof first === 'string') {
-      if (duration === undefined) {
-        const current = this.get();
-        return this.set({
-          progress: 0,
-          fragments: [...current.fragments, first],
-        });
-      } else {
-        return this.appendTween(first, duration);
-      }
-    }
-
-    const savedDuration = first;
-    return (strings, ...tags) =>
-      this.append(resolveCodeTag(CODE(strings, ...tags), true), savedDuration);
-  }
-
-  public prepend(code: string): TOwner;
-  public prepend(code: string, duration: number): ThreadGenerator;
-  public prepend(duration?: number): TagGenerator;
-  public prepend(
-    first: string | number = 0.6,
-    duration?: number,
-  ): TOwner | ThreadGenerator | TagGenerator {
-    if (typeof first === 'string') {
-      if (duration === undefined) {
-        const current = this.get();
-        return this.set({
-          progress: 0,
-          fragments: [first, ...current.fragments],
-        });
-      } else {
-        return this.prependTween(first, duration);
-      }
-    }
-
-    const savedDuration = first;
-    return (strings, ...tags) =>
-      this.prepend(resolveCodeTag(CODE(strings, ...tags), true), savedDuration);
-  }
-
-  public insert(point: CodePoint, code: string): TOwner;
-  public insert(
-    point: CodePoint,
-    code: string,
-    duration: number,
-  ): ThreadGenerator;
-  public insert(
-    point: CodePoint,
-    code: string,
-    duration?: number,
-  ): TOwner | ThreadGenerator {
-    return this.replace([point, point], code, duration!);
-  }
-
-  public remove(range: CodeRange): TOwner;
-  public remove(range: CodeRange, duration: number): ThreadGenerator;
-  public remove(range: CodeRange, duration?: number): TOwner | ThreadGenerator {
-    return this.replace(range, '', duration!);
-  }
-
-  public replace(range: CodeRange, code: string): TOwner;
-  public replace(
-    range: CodeRange,
-    code: string,
-    duration: number,
-  ): ThreadGenerator;
-  public replace(
-    range: CodeRange,
-    code: string,
-    duration?: number,
-  ): TOwner | ThreadGenerator {
-    if (duration === undefined) {
-      const current = this.get();
-      const [fragments, index] = extractRange(range, current.fragments);
-      fragments[index] = code;
-      return this.set({
-        progress: current.progress,
-        fragments,
-      });
-    } else {
-      return this.replaceTween(range, code, duration);
-    }
-  }
-
-  private *replaceTween(range: CodeRange, code: string, duration: number) {
-    let current = this.get();
-    const [fragments, index] = extractRange(range, current.fragments);
-    const progress = createSignal(0);
-    const scope = {
-      progress,
-      fragments: [replace(fragments[index] as string, code)],
-    };
-    fragments[index] = scope;
-    this.set({
-      progress: current.progress,
-      fragments,
-    });
-
-    yield* progress(1, duration);
-
-    current = this.get();
-    this.set({
-      progress: current.progress,
-      fragments: current.fragments.map(fragment =>
-        fragment === scope ? code : fragment,
-      ),
-    });
-    progress.context.dispose();
-  }
-
-  private *editTween(value: CodeTag[], duration: number) {
-    this.progress(0);
-    this.set({
-      progress: this.progress,
-      fragments: value,
-    });
-    yield* this.progress(1, duration);
-    const current = this.get();
-    this.set({
-      progress: 0,
-      fragments: current.fragments.map(fragment =>
-        value.includes(fragment) ? resolveCodeTag(fragment, true) : fragment,
-      ),
-    });
-  }
-
-  private *appendTween(value: string, duration: number) {
-    let current = this.get();
-    const progress = createSignal(0);
-    const scope = {
-      progress,
-      fragments: [insert(value)],
-    };
-    this.set({
-      progress: current.progress,
-      fragments: [...current.fragments, scope],
-    });
-    yield* progress(1, duration);
-    current = this.get();
-    this.set({
-      progress: current.progress,
-      fragments: current.fragments.map(fragment =>
-        fragment === scope ? value : fragment,
-      ),
-    });
-    progress.context.dispose();
-  }
-
-  private *prependTween(value: string, duration: number) {
-    let current = this.get();
-    const progress = createSignal(0);
-    const scope = {
-      progress,
-      fragments: [insert(value)],
-    };
-    this.set({
-      progress: current.progress,
-      fragments: [scope, ...current.fragments],
-    });
-    yield* progress(1, duration);
-    current = this.get();
-    this.set({
-      progress: current.progress,
-      fragments: current.fragments.map(fragment =>
-        fragment === scope ? value : fragment,
-      ),
-    });
-    progress.context.dispose();
-  }
-
-  public override parse(value: PossibleCodeScope): CodeScope {
-    return parseCodeScope(value);
-  }
-
-  public override toSignal(): CodeSignal<TOwner> {
-    return this.invokable;
-  }
-}
-
-export function codeSignal(): PropertyDecorator {
-  return (target: any, key) => {
-    const meta = getPropertyMetaOrCreate<PossibleCodeScope>(target, key);
-    addInitializer(target, (instance: any) => {
-      instance[key] = new CodeSignalContext(
-        meta.default ?? [],
-        instance,
-      ).toSignal();
-    });
-  };
-}

package/src/lib/code/CodeTokenizer.ts

@@ -1,54 +0,0 @@
-export type CodeTokenizer = (input: string) => string[];
-
-/**
- * Default tokenizer function used by ownerless code signals.
- *
- * @param input - The code to tokenize.
- */
-export function defaultTokenize(input: string): string[] {
-  const tokens: string[] = [];
-  let currentToken = '';
-  let whitespace = false;
-
-  for (const char of input) {
-    switch (char) {
-      case ' ':
-      case '\t':
-      case '\n':
-        if (!whitespace && currentToken !== '') {
-          tokens.push(currentToken);
-          currentToken = '';
-        }
-        whitespace = true;
-        currentToken += char;
-        break;
-      case '(':
-      case ')':
-      case '{':
-      case '}':
-      case '[':
-      case ']':
-        if (currentToken !== '') {
-          tokens.push(currentToken);
-          currentToken = '';
-        }
-        whitespace = false;
-        tokens.push(char);
-        break;
-      default:
-        if (whitespace && currentToken !== '') {
-          tokens.push(currentToken);
-          currentToken = '';
-        }
-        whitespace = false;
-        currentToken += char;
-        break;
-    }
-  }
-
-  if (currentToken !== '') {
-    tokens.push(currentToken);
-  }
-
-  return tokens;
-}

package/src/lib/code/DefaultHighlightStyle.ts

@@ -1,98 +0,0 @@
-import {HighlightStyle} from '@codemirror/language';
-import {tags as t} from '@lezer/highlight';
-
-export const DefaultHighlightStyle = HighlightStyle.define([
-  {tag: t.keyword, color: '#5e81ac'},
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: '#88c0d0',
-  },
-  {tag: [t.variableName], color: '#8fbcbb'},
-  {tag: [t.function(t.variableName)], color: '#8fbcbb'},
-  {tag: [t.labelName], color: '#81a1c1'},
-  {
-    tag: [t.color, t.constant(t.name), t.standard(t.name)],
-    color: '#5e81ac',
-  },
-  {tag: [t.definition(t.name), t.separator], color: '#a3be8c'},
-  {tag: [t.brace], color: '#8fbcbb'},
-  {
-    tag: [t.annotation],
-    color: '#d30102',
-  },
-  {
-    tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
-    color: '#b48ead',
-  },
-  {
-    tag: [t.typeName, t.className],
-    color: '#ECEFF4',
-  },
-  {
-    tag: [t.operator, t.operatorKeyword],
-    color: '#a3be8c',
-  },
-  {
-    tag: [t.tagName],
-    color: '#b48ead',
-  },
-  {
-    tag: [t.squareBracket],
-    color: '#ECEFF4',
-  },
-  {
-    tag: [t.angleBracket],
-    color: '#ECEFF4',
-  },
-  {
-    tag: [t.attributeName],
-    color: '#eceff4',
-  },
-  {
-    tag: [t.regexp],
-    color: '#5e81ac',
-  },
-  {
-    tag: [t.quote],
-    color: '#b48ead',
-  },
-  {tag: [t.string], color: '#a3be8c'},
-  {
-    tag: t.link,
-    color: '#a3be8c',
-    textDecoration: 'underline',
-    textUnderlinePosition: 'under',
-  },
-  {
-    tag: [t.url, t.escape, t.special(t.string)],
-    color: '#8fbcbb',
-  },
-  {tag: [t.meta], color: '#88c0d0'},
-  {tag: [t.monospace], color: '#d8dee9', fontStyle: 'italic'},
-  {tag: [t.comment], color: '#4c566a', fontStyle: 'italic'},
-  {tag: t.strong, fontWeight: 'bold', color: '#5e81ac'},
-  {tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac'},
-  {tag: t.strikethrough, textDecoration: 'line-through'},
-  {tag: t.heading, fontWeight: 'bold', color: '#5e81ac'},
-  {tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac'},
-  {tag: t.heading1, fontWeight: 'bold', color: '#5e81ac'},
-  {
-    tag: [t.heading2, t.heading3, t.heading4],
-    fontWeight: 'bold',
-    color: '#5e81ac',
-  },
-  {
-    tag: [t.heading5, t.heading6],
-    color: '#5e81ac',
-  },
-  {tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770'},
-  {
-    tag: [t.processingInstruction, t.inserted],
-    color: '#8fbcbb',
-  },
-  {
-    tag: [t.contentSeparator],
-    color: '#ebcb8b',
-  },
-  {tag: t.invalid, color: '#434c5e', borderBottom: `1px dotted #d30102`},
-]);

package/src/lib/code/LezerHighlighter.ts

@@ -1,113 +0,0 @@
-import type {HighlightStyle} from '@codemirror/language';
-import type {Parser, SyntaxNode, Tree} from '@lezer/common';
-import {highlightTree} from '@lezer/highlight';
-import type {CodeHighlighter, HighlightResult} from './CodeHighlighter';
-import {DefaultHighlightStyle} from './DefaultHighlightStyle';
-
-interface LezerCache {
-  tree: Tree;
-  code: string;
-  colorLookup: Map<string, string>;
-}
-
-export class LezerHighlighter implements CodeHighlighter<LezerCache | null> {
-  private static classRegex = /\.(\S+).*color:([^;]+)/;
-  private readonly classLookup = new Map<string, string>();
-
-  public constructor(
-    private readonly parser: Parser,
-    private readonly style: HighlightStyle = DefaultHighlightStyle,
-  ) {
-    for (const rule of this.style.module?.getRules().split('\n') ?? []) {
-      const match = rule.match(LezerHighlighter.classRegex);
-      if (!match) {
-        continue;
-      }
-
-      const className = match[1];
-      const color = match[2].trim();
-      this.classLookup.set(className, color);
-    }
-  }
-
-  public initialize(): boolean {
-    return true;
-  }
-
-  public prepare(code: string): LezerCache | null {
-    const colorLookup = new Map<string, string>();
-    const tree = this.parser.parse(code);
-    highlightTree(tree, this.style, (from, to, classes) => {
-      const color = this.classLookup.get(classes);
-      if (!color) {
-        return;
-      }
-
-      const cursor = tree.cursorAt(from, 1);
-      do {
-        const id = this.getNodeId(cursor.node);
-        colorLookup.set(id, color);
-      } while (cursor.next() && cursor.to <= to);
-    });
-
-    return {
-      tree,
-      code,
-      colorLookup,
-    };
-  }
-
-  public highlight(index: number, cache: LezerCache | null): HighlightResult {
-    if (!cache) {
-      return {
-        color: null,
-        skipAhead: 0,
-      };
-    }
-
-    const node = cache.tree.resolveInner(index, 1);
-    const id = this.getNodeId(node);
-    const color = cache.colorLookup.get(id);
-    if (color) {
-      return {
-        color,
-        skipAhead: node.to - index,
-      };
-    }
-
-    let skipAhead = 0;
-    if (!node.firstChild) {
-      skipAhead = node.to - index;
-    }
-
-    return {
-      color: null,
-      skipAhead,
-    };
-  }
-
-  public tokenize(code: string): string[] {
-    const tree = this.parser.parse(code);
-    const cursor = tree.cursor();
-    const tokens: string[] = [];
-    let current = 0;
-
-    do {
-      if (!cursor.node.firstChild) {
-        if (cursor.from > current) {
-          tokens.push(code.slice(current, cursor.from));
-        }
-        if (cursor.from < cursor.to) {
-          tokens.push(code.slice(cursor.from, cursor.to));
-        }
-        current = cursor.to;
-      }
-    } while (cursor.next());
-
-    return tokens;
-  }
-
-  private getNodeId(node: SyntaxNode): string {
-    return `${node.from}:${node.to}`;
-  }
-}