From 43714fdf1705d6576cc842fab9fe640519725a9b Mon Sep 17 00:00:00 2001 From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com> Date: Fri, 21 Oct 2022 22:32:53 +0200 Subject: [PATCH] Notification improvements (#324) --- packages/r3f/src/main/editable.tsx | 5 +- theatre/core/src/sequences/TheatreSequence.ts | 4 +- theatre/package.json | 3 +- theatre/shared/src/notify.ts | 9 +++- theatre/studio/src/notify.tsx | 49 ++++++------------- yarn.lock | 26 +++++++--- 6 files changed, 49 insertions(+), 47 deletions(-) diff --git a/packages/r3f/src/main/editable.tsx b/packages/r3f/src/main/editable.tsx index 9b52f17..941a3ac 100644 --- a/packages/r3f/src/main/editable.tsx +++ b/packages/r3f/src/main/editable.tsx @@ -36,7 +36,7 @@ const createEditable = ( if (Component !== 'primitive' && !type) { throw new Error( - `You must provide the type of the component out of which you're creating an editable. For example: editable(MyComponent, 'mesh').`, + `You must provide the type of the component you're creating an editable for. For example: editable(MyComponent, 'mesh').`, ) } @@ -103,7 +103,8 @@ const createEditable = ( The easiest way to create a custom animatable \`${dreiComponent}\` is to import it from \`@react-three/drei\`, and make it editable. \`\`\` import {${dreiComponent}} from '@react-three/drei' -const EditableCamera = + +const EditableCamera = editable(${dreiComponent}, '${Component}') \`\`\` Then you can use it in your JSX like any other editable component. Note the makeDefault prop exposed by drei, which makes r3f use it for rendering. diff --git a/theatre/core/src/sequences/TheatreSequence.ts b/theatre/core/src/sequences/TheatreSequence.ts index 186c87d..ea4f629 100644 --- a/theatre/core/src/sequences/TheatreSequence.ts +++ b/theatre/core/src/sequences/TheatreSequence.ts @@ -247,12 +247,12 @@ export default class TheatreSequence implements ISequence { "However, when using `@theatre/studio`, it takes a few milliseconds for it to load your project's state, " + `before which your sequences cannot start playing.\n` + `\n` + - 'To fix this, simply defer calling `sequence.play()` until after the project is loaded, like this:\n' + + 'To fix this, simply defer calling `sequence.play()` until after the project is loaded, like this:\n\n' + '```\n' + `project.ready.then(() => {\n` + ` sequence.play()\n` + `})\n` + - '```\n', + '```', [ { url: 'https://www.theatrejs.com/docs/0.5/api/core#project.ready', diff --git a/theatre/package.json b/theatre/package.json index 6303202..0191711 100644 --- a/theatre/package.json +++ b/theatre/package.json @@ -35,6 +35,7 @@ "@types/jest": "^26.0.23", "@types/lodash": "^4.14.170", "@types/lodash-es": "^4.17.4", + "@types/marked": "^4.0.7", "@types/node": "^15.12.3", "@types/react": "^17.0.9", "@types/react-dom": "^17.0.6", @@ -62,6 +63,7 @@ "json-touch-patch": "^0.11.2", "lodash": "^4.17.21", "lodash-es": "^4.17.21", + "marked": "^4.1.1", "nanoid": "^3.3.1", "npm-run-all": "^4.1.5", "null-loader": "^4.0.1", @@ -86,7 +88,6 @@ "rollup": "^2.56.3", "rollup-plugin-dts": "^4.0.0", "shallowequal": "^1.1.0", - "snarkdown": "^2.0.0", "styled-components": "^5.3.5", "svg-inline-loader": "^0.8.2", "timing-function": "^0.2.3", diff --git a/theatre/shared/src/notify.ts b/theatre/shared/src/notify.ts index db698bb..6b365e7 100644 --- a/theatre/shared/src/notify.ts +++ b/theatre/shared/src/notify.ts @@ -78,6 +78,13 @@ export const notify: Notifiers = { window?.addEventListener('error', (e) => { notify.error( `An error occurred`, - `${e.message}\n\nSee **console** for details.`, + `
${e.message}
\n\nSee **console** for details.`, + ) +}) + +window?.addEventListener('unhandledrejection', (e) => { + notify.error( + `An error occurred`, + `
${e.reason}
\n\nSee **console** for details.`, ) }) diff --git a/theatre/studio/src/notify.tsx b/theatre/studio/src/notify.tsx index 1679602..25deba3 100644 --- a/theatre/studio/src/notify.tsx +++ b/theatre/studio/src/notify.tsx @@ -1,7 +1,6 @@ import React, {Fragment} from 'react' import toast, {useToaster} from 'react-hot-toast/headless' import styled from 'styled-components' -import snarkdown from 'snarkdown' import {pointerEventsAutoInNormalMode} from './css' import type { Notification, @@ -11,6 +10,7 @@ import type { } from '@theatre/shared/notify' import {useVal} from '@theatre/react' import getStudio from './getStudio' +import {marked} from 'marked' /** * Creates a string key unique to a notification with a certain title and message. @@ -120,11 +120,6 @@ const NotificationMessage = styled.div` color: rgba(255, 255, 255, 0.9); } - hr { - visibility: hidden; - height: 8px; - } - em { font-style: italic; } @@ -134,18 +129,11 @@ const NotificationMessage = styled.div` color: #d5d5d5; } - .code { - overflow: auto; - font-family: monospace; - background: rgba(0, 0, 0, 0.3); - padding: 4px; + p { margin-bottom: 8px; - margin-top: 8px; - border-radius: 4px; - border: 1px solid rgba(255, 255, 255, 0.08); } - :not(.code) > code { + code { font-family: monospace; background: rgba(0, 0, 0, 0.3); padding: 1px 1px 2px; @@ -153,6 +141,18 @@ const NotificationMessage = styled.div` border: 1px solid rgba(255, 255, 255, 0.08); white-space: pre-wrap; } + + pre > code { + white-space: pre; + display: block; + overflow: auto; + padding: 4px; + } + + pre { + white-space: pre-wrap; + margin-bottom: 8px; + } ` const DismissButton = styled.button` @@ -195,23 +195,6 @@ const IndicatorDot = styled.div<{type: NotificationType}>` ` //endregion -/** - * Replaces
tags with
tags. We do this because snarkdown outputs
- * between paragraphs, which are not styleable. - * - * A better solution would be to use a markdown parser that outputs

tags instead of
. - */ -const replaceBrWithHr = (text: string) => { - return text.replace(/
/g, '

') -} - -/** - * Transforms the provided notification message into HTML. - */ -const massageMessage = (message: string) => { - return replaceBrWithHr(snarkdown(message)) -} - /** * Creates handlers for different types of notifications. */ @@ -236,7 +219,7 @@ const createHandler = {title} {docs.length > 0 && ( diff --git a/yarn.lock b/yarn.lock index 05240d3..1a01a5b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8002,6 +8002,13 @@ __metadata: languageName: node linkType: hard +"@types/marked@npm:^4.0.7": + version: 4.0.7 + resolution: "@types/marked@npm:4.0.7" + checksum: 4907b6a606578cd864bad429aca3c234591e6ed56bd141c575140487269b825a480ace9a85e4d003d1de1f007004c9d9b2fe600038ded5bba75aef59118e58d5 + languageName: node + linkType: hard + "@types/mime@npm:^1": version: 1.3.2 resolution: "@types/mime@npm:1.3.2" @@ -21367,6 +21374,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"marked@npm:^4.1.1": + version: 4.1.1 + resolution: "marked@npm:4.1.1" + bin: + marked: bin/marked.js + checksum: 717e3357952ee53de831bf0eb110ed075bebca2376c58bcdf7ee523ef540d45308ad6d51b2c933da0968832ea4386f31c142ca65443e77c098e84f6cce73e418 + languageName: node + linkType: hard + "matched@npm:^5.0.0": version: 5.0.1 resolution: "matched@npm:5.0.1" @@ -28232,13 +28248,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"snarkdown@npm:^2.0.0": - version: 2.0.0 - resolution: "snarkdown@npm:2.0.0" - checksum: e92bb254aad8c50da610e2f5f770360542b8412cb1dd6512aaf1f213322f474acd71c882d557cfadb54c34dd1041ee8677bc44061568d60df7cee54134e047e5 - languageName: node - linkType: hard - "sockjs-client@npm:^1.5.0": version: 1.5.1 resolution: "sockjs-client@npm:1.5.1" @@ -29673,6 +29682,7 @@ fsevents@^1.2.7: "@types/jest": ^26.0.23 "@types/lodash": ^4.14.170 "@types/lodash-es": ^4.17.4 + "@types/marked": ^4.0.7 "@types/node": ^15.12.3 "@types/react": ^17.0.9 "@types/react-dom": ^17.0.6 @@ -29702,6 +29712,7 @@ fsevents@^1.2.7: json-touch-patch: ^0.11.2 lodash: ^4.17.21 lodash-es: ^4.17.21 + marked: ^4.1.1 nanoid: ^3.3.1 npm-run-all: ^4.1.5 null-loader: ^4.0.1 @@ -29726,7 +29737,6 @@ fsevents@^1.2.7: rollup: ^2.56.3 rollup-plugin-dts: ^4.0.0 shallowequal: ^1.1.0 - snarkdown: ^2.0.0 styled-components: ^5.3.5 svg-inline-loader: ^0.8.2 timing-function: ^0.2.3