fix(calendar-lab): use local tldraw runtime to avoid react/cdn instance mismatch
This commit is contained in:
@@ -1,5 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
|
||||
import { createElement } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { Tldraw, createShapeId, toRichText } from "tldraw";
|
||||
import "tldraw/tldraw.css";
|
||||
|
||||
type TldrawApi = {
|
||||
Tldraw: unknown;
|
||||
@@ -34,15 +38,6 @@ const debugInfo = computed(() => `${LEVEL_LABELS[activeLevel.value] ?? "year"}:
|
||||
let reactRoot: { unmount: () => void } | null = null;
|
||||
let teardown: (() => void) | null = null;
|
||||
|
||||
function ensureTldrawCss() {
|
||||
if (document.querySelector("link[data-tldraw-css='1']")) return;
|
||||
const link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = "https://esm.sh/tldraw@4.4.0/tldraw.css";
|
||||
link.setAttribute("data-tldraw-css", "1");
|
||||
document.head.append(link);
|
||||
}
|
||||
|
||||
function buildScene(api: TldrawApi) {
|
||||
const nodes = new Map<string, ShapeNode>();
|
||||
const children = new Map<string, string[]>();
|
||||
@@ -271,17 +266,11 @@ onMounted(async () => {
|
||||
try {
|
||||
if (!hostRef.value) return;
|
||||
|
||||
ensureTldrawCss();
|
||||
|
||||
const [react, reactDomClient, tldraw] = await Promise.all([
|
||||
import(/* @vite-ignore */ "https://esm.sh/react@18.3.1"),
|
||||
import(/* @vite-ignore */ "https://esm.sh/react-dom@18.3.1/client"),
|
||||
import(/* @vite-ignore */ "https://esm.sh/tldraw@4.4.0?bundle"),
|
||||
]);
|
||||
|
||||
const createElement = (react as any).createElement as (...args: unknown[]) => unknown;
|
||||
const createRoot = (reactDomClient as any).createRoot as (el: Element) => { render: (node: unknown) => void; unmount: () => void };
|
||||
const api = tldraw as unknown as TldrawApi;
|
||||
const api = {
|
||||
Tldraw,
|
||||
createShapeId,
|
||||
toRichText,
|
||||
} satisfies TldrawApi;
|
||||
|
||||
reactRoot = createRoot(hostRef.value);
|
||||
reactRoot.render(
|
||||
@@ -294,7 +283,7 @@ onMounted(async () => {
|
||||
}),
|
||||
);
|
||||
} catch (error) {
|
||||
status.value = "Failed to load tldraw engine from CDN";
|
||||
status.value = "Failed to initialize local tldraw engine";
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user