feat: improve error logs (#953)

motion-canvas · Feb 11, 2024 · 3b528cc · 3b528cc
1 parent 66c18bb
commit 3b528cc
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/2d/src/lib/components/__logs__/reactive-playback-rate.md b/packages/2d/src/lib/components/__logs__/reactive-playback-rate.md
@@ -2,18 +2,20 @@ The `playbackRate` of a `Video` cannot be reactive.
 
 Make sure to use a concrete value and not a function:
 
-```ts
-// wrong ✗
+```ts wrong
 video.playbackRate(() => 7);
-// correct ✓
+```
+
+```ts correct
 video.playbackRate(7);
 ```
 
 If you're using a signal, extract its value before passing it to the property:
 
-```ts
-// wrong ✗
+```ts wrong
 video.playbackRate(mySignal);
-// correct ✓
+```
+
+```ts correct
 video.playbackRate(mySignal());
 ```
diff --git a/packages/core/src/flow/__logs__/infinite-loop.md b/packages/core/src/flow/__logs__/infinite-loop.md
@@ -1,13 +1,14 @@
 Make sure to use `yield` or `spawn()` to execute the loop concurrently in a
 separate thread:
 
-```ts
-// wrong ✗
+```ts wrong
 // prettier-ignore
 yield* loop(() => rect().opacity(0).opacity(1, 1));
-// correct ✓
+```
+
+```ts correct
 yield loop(() => rect().opacity(0).opacity(1, 1));
-// correct ✓
+// or
 spawn(loop(() => rect().opacity(0).opacity(1, 1)));
 ```
 

diff --git a/packages/core/src/threading/__logs__/reused-generator.md b/packages/core/src/threading/__logs__/reused-generator.md
@@ -24,18 +24,18 @@ yield* all(task);
 Try to investigate your code looking for `yield` statements whose return value
 is reused in this way. Here's an example of a common mistake:
 
-```ts
-// wrong ✗
+```ts wrong
 // prettier-ignore
 yield* all(
   yield rect().opacity(1, 1), 
-  yield rect().x(200, 1)
+  yield rect().x(200, 1),
 );
+```
 
-// correct ✓
+```ts correct
 // prettier-ignore
 yield* all(
   rect().opacity(1, 1), 
-  rect().x(200, 1)
+  rect().x(200, 1),
 );
 ```
diff --git a/packages/internal/package.json b/packages/internal/package.json
@@ -9,7 +9,6 @@
     "@rollup/plugin-typescript": "^11.1.5",
     "highlight.js": "^11.9.0",
     "marked": "^10.0.0",
-    "marked-highlight": "^2.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "ts-patch": "^3.0.2"
   }

diff --git a/packages/internal/transformers/markdown-literals.js b/packages/internal/transformers/markdown-literals.js
@@ -2,28 +2,27 @@ const ts = require('typescript');
 const path = require('path');
 const fs = require('fs');
 const {Marked} = require('marked');
-const {markedHighlight} = require('marked-highlight');
 const highlightJs = require('highlight.js');
 
-const marked = new Marked(
-  {
-    renderer: {
-      link(href, title, text) {
-        return `<a href='${href}' target='_blank'>${text}</a>`;
-      },
+const marked = new Marked({
+  renderer: {
+    link(href, title, text) {
+      return `<a href='${href}' target='_blank'>${text}</a>`;
     },
-  },
-  markedHighlight({
-    highlight(code, lang) {
+    code(code, info) {
+      const [lang, ...rest] = (info || '').split(/\s+/);
       code = code
         .split('\n')
         .filter(line => !line.includes('prettier-ignore'))
         .join('\n');
       const language = highlightJs.getLanguage(lang) ? lang : 'plaintext';
-      return highlightJs.highlight(code, {language}).value;
+      const result = highlightJs.highlight(code, {language});
+      return `<pre class="${rest.join(
+        ' ',
+      )}"><code class="language-${language}">${result.value}</code></pre>`;
     },
-  }),
-);
+  },
+});
 
 const transformerProgram = program => context => sourceFile => {
   const sourceMap = new Map();

diff --git a/packages/ui/src/components/console/Console.module.scss b/packages/ui/src/components/console/Console.module.scss
@@ -30,8 +30,8 @@ $colors: (
 }
 
 .log {
-  border-left: 4px solid transparent;
-  background-color: var(--background-color-dark);
+  border-left: 2px solid transparent;
+  background-color: var(--background-color);
   border-radius: var(--radius);
   padding: 8px;
   overflow: hidden;
@@ -72,7 +72,7 @@ $colors: (
   overflow-x: auto;
   margin-top: 8px;
 
-  --scrollbar-background: var(--background-color-dark);
+  --scrollbar-background: var(--background-color);
 }
 
 .section {
@@ -83,7 +83,6 @@ $colors: (
   }
 
   code {
-    background-color: var(--surface-color);
     padding: 2px 0;
     border-radius: var(--radius);
   }
@@ -98,6 +97,17 @@ $colors: (
     code {
       padding: 0;
     }
+
+    &:global(.wrong) code:before {
+      color: #ff5257;
+      font-weight: bold;
+      content: '✗ WRONG\A';
+    }
+    &:global(.correct) code::before {
+      color: #00a86b;
+      font-weight: bold;
+      content: '✓ CORRECT\A';
+    }
   }
 
   a {