@efxlab/motion-canvas-2d 4.0.0

package/src/lib/code/CodeSignal.ts

@@ -0,0 +1,348 @@
+import {
+  createSignal,
+  deepLerp,
+  DependencyContext,
+  Signal,
+  SignalContext,
+  SignalValue,
+  ThreadGenerator,
+  TimingFunction,
+  unwrap,
+} from '@efxlab/motion-canvas-core';
+import {Code} from '../components';
+import {addInitializer, getPropertyMetaOrCreate} from '../decorators';
+import {defaultDiffer} from './CodeDiffer';
+import {insert, replace} from './CodeFragment';
+import {CodeHighlighter} from './CodeHighlighter';
+import {CodePoint, CodeRange} from './CodeRange';
+import {
+  CODE,
+  CodeScope,
+  CodeTag,
+  parseCodeScope,
+  PossibleCodeScope,
+  resolveCodeTag,
+} from './CodeScope';
+import {defaultTokenize} from './CodeTokenizer';
+import {extractRange} from './extractRange';
+
+interface CodeModifier<TOwner> {
+  (code: CodeTag): TOwner;
+  (code: CodeTag, duration: number): ThreadGenerator;
+  (duration?: number): TagGenerator;
+}
+
+interface CodeInsert<TOwner> {
+  (point: CodePoint, code: CodeTag): TOwner;
+  (point: CodePoint, code: CodeTag, duration: number): ThreadGenerator;
+  (point: CodePoint, duration?: number): TagGenerator;
+}
+
+interface CodeRemove<TOwner> {
+  (range: CodeRange): TOwner;
+  (range: CodeRange, duration: number): ThreadGenerator;
+}
+
+interface CodeReplace<TOwner> {
+  (range: CodeRange, code: CodeTag): TOwner;
+  (range: CodeRange, code: CodeTag, duration: number): ThreadGenerator;
+  (range: CodeRange, duration?: number): TagGenerator;
+}
+
+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: SignalValue<PossibleCodeScope>,
+    owner: TOwner,
+    private readonly highlighter?: SignalValue<CodeHighlighter | null>,
+  ) {
+    super(initial, deepLerp, owner);
+    if (owner instanceof Code) {
+      this.highlighter ??= owner.highlighter;
+    }
+    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: CodeTag): TOwner;
+  public append(code: CodeTag, duration: number): ThreadGenerator;
+  public append(duration?: number): TagGenerator;
+  public append(
+    first: CodeTag | number = 0.6,
+    duration?: number,
+  ): TOwner | ThreadGenerator | TagGenerator {
+    if (typeof first !== 'undefined' && typeof first !== 'number') {
+      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(CODE(strings, ...tags), savedDuration);
+  }
+
+  public prepend(code: CodeTag): TOwner;
+  public prepend(code: CodeTag, duration: number): ThreadGenerator;
+  public prepend(duration?: number): TagGenerator;
+  public prepend(
+    first: CodeTag | number = 0.6,
+    duration?: number,
+  ): TOwner | ThreadGenerator | TagGenerator {
+    if (typeof first !== 'undefined' && typeof first !== 'number') {
+      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(CODE(strings, ...tags), savedDuration);
+  }
+
+  public insert(point: CodePoint, code: CodeTag): TOwner;
+  public insert(
+    point: CodePoint,
+    code: CodeTag,
+    duration: number,
+  ): ThreadGenerator;
+  public insert(point: CodePoint, duration?: number): TagGenerator;
+  public insert(
+    point: CodePoint,
+    first: CodeTag | number = 0.6,
+    duration?: number,
+  ): TOwner | ThreadGenerator | TagGenerator {
+    return this.replace([point, point], first as CodeTag, duration as number);
+  }
+
+  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: CodeTag): TOwner;
+  public replace(
+    range: CodeRange,
+    code: CodeTag,
+    duration: number,
+  ): ThreadGenerator;
+  public replace(range: CodeRange, duration?: number): TagGenerator;
+  public replace(
+    range: CodeRange,
+    first: CodeTag | number = 0.6,
+    duration?: number,
+  ): TOwner | ThreadGenerator | TagGenerator {
+    if (typeof first !== 'undefined' && typeof first !== 'number') {
+      if (duration === undefined) {
+        const current = this.get();
+        const [fragments, index] = extractRange(range, current.fragments);
+        fragments[index] = first;
+        return this.set({
+          progress: current.progress,
+          fragments,
+        });
+      } else {
+        return this.replaceTween(range, first, duration);
+      }
+    }
+
+    const savedDuration = first;
+    return (strings, ...tags) =>
+      this.replaceTween(range, CODE(strings, ...tags), savedDuration);
+  }
+
+  private *replaceTween(range: CodeRange, code: CodeTag, duration: number) {
+    let current = this.get();
+    const [fragments, index] = extractRange(range, current.fragments);
+    const progress = createSignal(0);
+    const resolved = resolveCodeTag(code, true);
+    const scope = {
+      progress,
+      fragments: [replace(fragments[index] as string, resolved)],
+    };
+    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: CodeTag, duration: number) {
+    let current = this.get();
+    const progress = createSignal(0);
+    const resolved = resolveCodeTag(value, true);
+    const scope = {
+      progress,
+      fragments: [insert(resolved)],
+    };
+    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: CodeTag, duration: number) {
+    let current = this.get();
+    const progress = createSignal(0);
+    const resolved = resolveCodeTag(value, true);
+    const scope = {
+      progress,
+      fragments: [insert(resolved)],
+    };
+    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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,113 @@
+import {HighlightStyle} from '@codemirror/language';
+import {Parser, SyntaxNode, Tree} from '@lezer/common';
+import {highlightTree} from '@lezer/highlight';
+import {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}`;
+  }
+}