Avoid JSON parse error on playground load

astral-sh · Aug 12, 2023 · 3c1132c · 3c1132c
1 parent 5b47350
commit 3c1132c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 28 deletions.
diff --git a/playground/src/Editor/Editor.tsx b/playground/src/Editor/Editor.tsx
@@ -5,6 +5,7 @@ import {
  useMemo,
  useState,
 } from "react";
+import { Simulate } from "react-dom/test-utils";
 import { DEFAULT_PYTHON_SOURCE } from "../constants";
 import init, { Diagnostic, Workspace } from "../pkg";
 import { ErrorMessage } from "./ErrorMessage";
@@ -43,11 +44,7 @@ export default function Editor() {
  error: null,
  secondary: null,
  });
- const [source, setSource] = useState<Source>({
- pythonSource: "",
- settingsSource: "",
- revision: 0,
- });
+ const [source, setSource] = useState<Source | null>(null);
 
  const [tab, setTab] = useState<Tab>("Source");
  const [secondaryTool, setSecondaryTool] = useState<SecondaryTool | null>(
@@ -64,8 +61,6 @@ export default function Editor() {
  );
  const [theme, setTheme] = useTheme();
 
- const initialized = ruffVersion != null;
-
  // Ideally this would be retrieved right from the URL... but routing without a proper
  // router is hard (there's no location changed event) and pulling in a router
  // feels overkill.
@@ -97,8 +92,8 @@ export default function Editor() {
  ];
 
  setSource({
- pythonSource,
  revision: 0,
+ pythonSource,
  settingsSource,
  });
  setRuffVersion(Workspace.version());
@@ -109,11 +104,11 @@ export default function Editor() {
  const deferredSource = useDeferredValue(source);
 
  useEffect(() => {
- if (!initialized) {
+ if (deferredSource == null) {
  return;
  }
 
- const { settingsSource, pythonSource } = deferredSource;
+ const { pythonSource, settingsSource } = deferredSource;
 
  try {
  const config = JSON.parse(settingsSource);
@@ -171,52 +166,60 @@ export default function Editor() {
  secondary: null,
  });
  }
- }, [initialized, deferredSource, secondaryTool]);
+ }, [deferredSource, secondaryTool]);
 
  useEffect(() => {
- if (initialized) {
+ if (source != null) {
  persistLocal(source);
  }
- }, [initialized, source]);
+ }, [source]);
 
  const handleShare = useMemo(() => {
- if (!initialized) {
+ if (source == null) {
  return undefined;
  }
 
  return () => {
  return persist(source.settingsSource, source.pythonSource);
  };
- }, [source, initialized]);
+ }, [source]);
 
  const handlePythonSourceChange = useCallback((pythonSource: string) => {
- setSource((state) => ({
- ...state,
- pythonSource,
- revision: state.revision + 1,
- }));
+ setSource((state) =>
+ state
+ ? {
+ ...state,
+ pythonSource,
+ revision: state.revision + 1,
+ }
+ : null,
+ );
  }, []);
 
  const handleSettingsSourceChange = useCallback((settingsSource: string) => {
- setSource((state) => ({
- ...state,
- settingsSource,
- revision: state.revision + 1,
- }));
+ setSource((state) =>
+ state
+ ? {
+ ...state,
+ settingsSource,
+ revision: state.revision + 1,
+ }
+ : null,
+ );
  }, []);
 
  return (
  <main className="flex flex-col h-full bg-ayu-background dark:bg-ayu-background-dark">
  <Header
- edit={source.revision}
+ edit={source ? source.revision : null}
  theme={theme}
  version={ruffVersion}
  onChangeTheme={setTheme}
  onShare={handleShare}
  />
 
  <div className="flex flex-grow">
- {initialized ? (
+ {source ? (
  <PanelGroup direction="horizontal" autoSaveId="main">
  <PrimarySideBar
  onSelectTool={(tool) => setTab(tool)}

diff --git a/playground/src/Editor/Header.tsx b/playground/src/Editor/Header.tsx
@@ -14,7 +14,7 @@ export default function Header({
  onChangeTheme,
  onShare,
 }: {
- edit: number;
+ edit: number | null;
  theme: Theme;
  version: string | null;
  onChangeTheme: (theme: Theme) => void;