@revideo/2d 0.5.0 → 0.5.2

package/src/lib/code/CodeSignal.ts

@@ -78,13 +78,11 @@ export class CodeSignalContext<TOwner>
   public constructor(
     initial: PossibleCodeScope,
     owner: TOwner,
-    private readonly highlighter?: SignalValue<CodeHighlighter>,
-    private readonly dialect?: SignalValue<string>,
+    private readonly highlighter?: SignalValue<CodeHighlighter | null>,
   ) {
     super(initial, deepLerp, owner);
     if (owner instanceof Code) {
       this.highlighter ??= owner.highlighter;
-      this.dialect ??= owner.dialect;
     }
     Object.defineProperty(this.invokable, 'edit', {
       value: this.edit.bind(this),
@@ -113,15 +111,14 @@ export class CodeSignalContext<TOwner>
   ): ThreadGenerator {
     let tokenize = defaultTokenize;
     const highlighter = unwrap(this.highlighter);
-    const dialect = unwrap(this.dialect);
-    if (highlighter && dialect) {
+    if (highlighter) {
       yield (async () => {
         do {
           await DependencyContext.consumePromises();
           highlighter.initialize();
         } while (DependencyContext.hasPromises());
       })();
-      tokenize = (input: string) => highlighter.tokenize(input, dialect);
+      tokenize = (input: string) => highlighter.tokenize(input);
     }
 
     this.progress(0);

package/src/lib/code/LezerHighlighter.ts

@@ -1,26 +1,23 @@
 import {HighlightStyle} from '@codemirror/language';
 import {Parser, SyntaxNode, Tree} from '@lezer/common';
 import {highlightTree} from '@lezer/highlight';
-import {useLogger} from '@revideo/core';
 import {CodeHighlighter, HighlightResult} from './CodeHighlighter';
-import {defaultTokenize} from './CodeTokenizer';
+import {DefaultHighlightStyle} from './DefaultHighlightStyle';
 
 interface LezerCache {
   tree: Tree;
   code: string;
-  colorLookup: Map<number, string>;
+  colorLookup: Map<string, string>;
 }
 
 export class LezerHighlighter implements CodeHighlighter<LezerCache | null> {
-  private static readonly parserMap = new Map<string, Parser>();
   private static classRegex = /\.(\S+).*color:([^;]+)/;
   private readonly classLookup = new Map<string, string>();
 
-  public static registerParser(parser: Parser, dialect = ''): void {
-    this.parserMap.set(dialect, parser);
-  }
-
-  public constructor(private readonly style: HighlightStyle) {
+  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) {
@@ -37,17 +34,9 @@ export class LezerHighlighter implements CodeHighlighter<LezerCache | null> {
     return true;
   }
 
-  public prepare(code: string, dialect: string): LezerCache | null {
-    const parser = LezerHighlighter.parserMap.get(dialect);
-    if (!parser) {
-      if (dialect !== '') {
-        useLogger().warn(`No parser found for dialect: ${dialect}`);
-      }
-      return null;
-    }
-
-    const colorLookup = new Map<number, string>();
-    const tree = parser.parse(code);
+  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) {
@@ -97,16 +86,8 @@ export class LezerHighlighter implements CodeHighlighter<LezerCache | null> {
     };
   }
 
-  public tokenize(code: string, dialect: string): string[] {
-    const parser = LezerHighlighter.parserMap.get(dialect);
-    if (!parser) {
-      if (dialect !== '') {
-        useLogger().warn(`No parser found for dialect: ${dialect}`);
-      }
-      return defaultTokenize(code);
-    }
-
-    const tree = parser.parse(code);
+  public tokenize(code: string): string[] {
+    const tree = this.parser.parse(code);
     const cursor = tree.cursor();
     const tokens: string[] = [];
     let current = 0;
@@ -126,14 +107,7 @@ export class LezerHighlighter implements CodeHighlighter<LezerCache | null> {
     return tokens;
   }
 
-  private getNodeId(node: SyntaxNode): number {
-    if (!node.parent) {
-      return -1;
-    }
-
-    // NOTE: They don't want us to know about this property.
-    // We need a way to persistently identify nodes and this seems to work.
-    // Perhaps it could break if the tree is edited? But we don't do that. Yet.
-    return (node as any).index;
+  private getNodeId(node: SyntaxNode): string {
+    return `${node.from}:${node.to}`;
   }
 }

package/src/lib/code/extractRange.ts

@@ -61,9 +61,7 @@ export function extractRange(
         if (fromColumn === currentColumn) {
           index = newFragments.length + 1;
           newFragments.push(resolved.slice(0, i), '');
-        }
-
-        if (char === '\n') {
+        } else if (char === '\n') {
           index = newFragments.length + 1;
           newFragments.push(
             resolved.slice(0, i) + ' '.repeat(fromColumn - currentColumn),
@@ -80,7 +78,14 @@ export function extractRange(
         }
 
         if (char === '\n') {
-          newFragments.push(resolved.slice(i));
+          if (currentColumn < toColumn) {
+            extracted += '\n';
+            if (i + 1 < resolved.length) {
+              newFragments.push(resolved.slice(i + 1));
+            }
+          } else {
+            newFragments.push(resolved.slice(i));
+          }
           found = true;
           break;
         }

package/src/lib/components/Code.ts

@@ -1,8 +1,7 @@
 import {
   BBox,
   createSignal,
-  ExperimentalError,
-  lazy,
+  experimentalLog,
   map,
   SerializedVector2,
   Signal,
@@ -11,6 +10,8 @@ import {
   ThreadGenerator,
   TimingFunction,
   unwrap,
+  useLogger,
+  useScene,
   Vector2,
 } from '@revideo/core';
 import {
@@ -23,10 +24,8 @@ import {
   CodeSignal,
   codeSignal,
   CodeSignalContext,
-  DefaultHighlightStyle,
   findAllCodeRanges,
   isPointInCodeSelection,
-  LezerHighlighter,
   lines,
   parseCodeSelection,
   PossibleCodeScope,
@@ -35,7 +34,6 @@ import {
 } from '../code';
 import {computed, initial, nodeName, parser, signal} from '../decorators';
 import {DesiredLength} from '../partials';
-import {useScene2D} from '../scenes';
 import {Shape, ShapeProps} from './Shape';
 
 export interface DrawTokenHook {
@@ -75,10 +73,6 @@ export interface CodeProps extends ShapeProps {
    * {@inheritDoc Code.highlighter}
    */
   highlighter?: SignalValue<CodeHighlighter | null>;
-  /**
-   * {@inheritDoc Code.dialect}
-   */
-  dialect?: SignalValue<string>;
   /**
    * {@inheritDoc Code.code}
    */
@@ -143,59 +137,19 @@ export class Code extends Shape {
    *
    * @param initial - The initial code.
    * @param highlighter - Custom highlighter to use.
-   * @param dialect - Custom dialect to use.
    */
   public static createSignal(
     initial: PossibleCodeScope,
     highlighter?: SignalValue<CodeHighlighter>,
-    dialect?: SignalValue<string>,
   ): CodeSignal<void> {
     return new CodeSignalContext<void>(
       initial,
       undefined,
       highlighter,
-      dialect,
     ).toSignal();
   }
 
-  @lazy(() => new LezerHighlighter(DefaultHighlightStyle))
-  public static readonly defaultHighlighter: LezerHighlighter;
-
-  /**
-   * The dialect to use for highlighting the code.
-   *
-   * @remarks
-   * This value will be passed to the {@link code.CodeHighlighter}
-   * defined by the {@link highlighter} property. Different highlighters may use
-   * it differently.
-   *
-   * The default {@link code.LezerHighlighter} uses it to select
-   * the language parser to use. The parser for the given dialect can be
-   * registered as follows:
-   * ```tsx
-   * // Import the lezer parser:
-   * import {parser} from '@lezer/javascript';
-   *
-   * // Register it in the highlighter:
-   * LezerHighlighter.registerParser(parser, 'js');
-   *
-   * // Use the dialect in a code node:
-   * <Code dialect="js" code="const a = 7;" />
-   * ```
-   * When no dialect is provided, the highlighter will use the default
-   * parser:
-   * ```tsx
-   * // Register the default parser by omitting the dialect:
-   * LezerHighlighter.registerParser(parser);
-   *
-   * // Code nodes with no dialect will now use the default parser:
-   * <Code code="const a = 7;" />
-   * ```
-   */
-  @initial('')
-  @signal()
-  public declare readonly dialect: SimpleSignal<string, this>;
-
+  public static defaultHighlighter: CodeHighlighter | null = null;
   /**
    * The code highlighter to use for this code node.
    *
@@ -204,7 +158,10 @@ export class Code extends Shape {
    */
   @initial(() => Code.defaultHighlighter)
   @signal()
-  public declare readonly highlighter: SimpleSignal<CodeHighlighter, this>;
+  public declare readonly highlighter: SimpleSignal<
+    CodeHighlighter | null,
+    this
+  >;
 
   /**
    * The code to display.
@@ -246,6 +203,20 @@ export class Code extends Shape {
   @signal()
   public declare readonly drawHooks: SimpleSignal<DrawHooks, this>;
 
+  protected setDrawHooks(value: DrawHooks) {
+    if (
+      !useScene().experimentalFeatures &&
+      value !== this.drawHooks.context.getInitial()
+    ) {
+      useLogger().log({
+        ...experimentalLog(`Code uses experimental draw hooks.`),
+        inspect: this.key,
+      });
+    } else {
+      this.drawHooks.context.setter(value);
+    }
+  }
+
   /**
    * The currently selected code range.
    *
@@ -309,11 +280,10 @@ export class Code extends Shape {
     const code = this.code();
     const before = resolveScope(code, false);
     const after = resolveScope(code, true);
-    const dialect = this.dialect();
 
     return {
-      before: highlighter.prepare(before, dialect),
-      after: highlighter.prepare(after, dialect),
+      before: highlighter.prepare(before),
+      after: highlighter.prepare(after),
     };
   }
 
@@ -328,9 +298,6 @@ export class Code extends Shape {
       fontFamily: 'monospace',
       ...props,
     });
-    if (!useScene2D().experimentalFeatures) {
-      throw new ExperimentalError('The Code node is an experimental feature');
-    }
   }
 
   /**
@@ -343,7 +310,6 @@ export class Code extends Shape {
       initial,
       this,
       this.highlighter,
-      this.dialect,
     ).toSignal();
   }
 

package/src/lib/components/CodeBlock.ts

@@ -47,6 +47,9 @@ export interface CodeModification {
   to: Code;
 }
 
+/**
+ * @deprecated Use {@link Code} instead.
+ */
 @nodeName('CodeBlock')
 export class CodeBlock extends Shape {
   private static initialized = createComputedAsync(