Loading CrossCode...
================================================
FILE: src/App.css
================================================
================================================
FILE: src/App.tsx
================================================
import { CssVarsProvider, extendTheme } from "@mui/joy/styles";
import { Sheet } from "@mui/joy";
import "@fontsource/inter";
import "@fontsource/inter/600.css";
import Onboarding from "./pages/Onboarding";
import IDE from "./pages/IDE";
import Preferences from "./preferences/Preferences";
import { BrowserRouter, Route, Routes, Navigate, Outlet } from "react-router";
import { StoreProvider, useStore } from "./utilities/StoreContext";
import { IDEProvider } from "./utilities/IDEContext";
import { CommandProvider } from "./utilities/Command";
import { ToastProvider } from "react-toast-plus";
import New from "./pages/New";
import NewTemplate from "./pages/NewTemplate";
import "vscode/localExtensionHost";
import { UpdateProvider } from "./utilities/UpdateContext";
import About from "./pages/About";
declare module "@mui/joy/IconButton" {
interface IconButtonPropsSizeOverrides {
xs: true;
}
}
const theme = extendTheme({
components: {
JoyIconButton: {
styleOverrides: {
root: ({ ownerState, theme }) => ({
...(ownerState.size === "xs" && {
"--Icon-fontSize": "1rem",
"--Button-gap": "0.25rem",
minHeight: "var(--Button-minHeight, 1.5rem)",
fontSize: theme.vars.fontSize.xs,
paddingBlock: "2px",
paddingInline: "0.25rem",
}),
}),
},
},
},
});
// Layout with IDE-related providers
const IDELayout = () => {
const [appTheme] = useStore("appearance/theme", "dark");
return (
{icon !== undefined && icon}
{label != "" && label != undefined && label}
{shortcut !== undefined && " "}
{shortcut}
-
{bar &&
bar.map((menu, index) => (
-
{group.items.map((item, itemIndex) => {
if ("component" in item) {
return (
{item.component({
selectedDevice,
shortcut: item.shortcut
? renderShortcut(item.shortcut)
: undefined,
})}
);
}
return (
);
})}
{operation.steps.map((step) => {
let failed = operationState.failed.find((f) => f.stepId == step.id);
let completed = operationState.completed.includes(step.id);
let started = operationState.started.includes(step.id);
let notStarted = !failed && !completed && !started;
return (
{step.title}
{failed && (
Details
)}
);
})}
{failed &&
{failed.extraDetails}
Checking for SDK...
;
}
return (
{!selectedToolchain && (
)}
{toolchains === null
? "Checking for Swift..."
: toolchains.swiftlyInstalled
? `Swiftly Detected: ${toolchains.swiftlyVersion}`
: "CrossCode was unable to detect Swiftly."}
{!isWindowsReady && toolchains !== null && allToolchains.length === 0 && (
Install WSL before swift, as you need to install swift inside of WSL.
)}
{isWindowsReady && toolchains !== null && allToolchains.length === 0 && (
No Swift toolchains found. You can get one by installing swiftly
{isWindows && " in WSL"} and running "
swiftly install {SWIFT_VERSION_PREFIX}
" or manually. If you have already done so, but it is not showing up,
your toolchain installation may be broken. For help, refer to the{" "}
{
e.preventDefault();
openUrl(
"https://github.com/nab138/CrossCode/wiki/Troubleshooting#swift-toolchain-not-detected"
);
}}
>
troubleshooting guide
.
)}
{selectedToolchain !== null && !isCompatable(selectedToolchain) && (
Your selected toolchain is not compatible. Please select a swift{" "}
{SWIFT_VERSION_PREFIX}
toolchain.
)}
{toolchains !== null && allToolchains.length > 0 && (
Select a toolchain:
{allToolchains.map((toolchain) => (
setSelectedToolchain(toolchain)}
/>
{toolchain.path}
{toolchain.isSwiftly ? "(Swiftly)" : "(Manually Installed)"}
))}
)}
);
};
export function isCompatable(toolchain: Toolchain | null): boolean {
if (!toolchain) return false;
return toolchain.version.startsWith(SWIFT_VERSION_PREFIX);
}
function stringifyToolchain(toolchain: Toolchain | null): string | null {
if (!toolchain) return null;
return `${toolchain.path}:${toolchain.version}:${toolchain.isSwiftly}`;
}
================================================
FILE: src/components/TabLike.tsx
================================================
import { styled } from "@mui/joy/styles";
import { forwardRef, ButtonHTMLAttributes } from "react";
interface TabLikeProps extends ButtonHTMLAttributes
{toolchains?.swiftlyInstalled === false &&
selectedToolchain === null && (
)}
{
}
{
}
{
if (e.deltaY !== 0) {
e.currentTarget.scrollLeft += e.deltaY;
e.preventDefault();
}
}}
>
{tabs.map((tab, index) => {
let unsaved = unsavedFiles.includes(tab.file);
return (
{dropIndicatorIndex === index && (
)}
{
setFocused(index);
}}
onDragStart={(e) => handleDragStart(e, index)}
onDragOver={(e) => handleDragOver(e, index)}
onDragEnd={handleDragEnd}
>
{tab.name}
setHoveredOnBtn(index)}
onMouseLeave={() => setHoveredOnBtn(null)}
size="xs"
sx={{ margin: "0px", marginLeft: "2px" }}
onClick={(event) => {
event.stopPropagation();
setTabs((tabs) => tabs.filter((_, i) => i !== index));
setFocused((focused) => {
if (focused === index) return 0;
return focused;
});
setOpenFiles((openFiles) =>
openFiles.filter((file) => file !== tab.file)
);
}}
>
{!unsaved || hoveredOnBtn === index ? (
);
})}
{dropIndicatorIndex === tabs.length && (
)}
= 1 ? {} : { display: "none" }}
/>
);
};
================================================
FILE: src/components/Tiles/FileExplorer.css
================================================
.file-explorer {
overflow-y: auto;
height: 100%;
}
================================================
FILE: src/components/Tiles/FileExplorer.tsx
================================================
import {
Accordion,
AccordionDetails,
AccordionGroup,
AccordionSummary,
Button,
Divider,
Menu,
MenuItem,
Modal,
ModalDialog,
Input,
Typography,
Box,
} from "@mui/joy";
import "./FileExplorer.css";
import { useCallback, useEffect, useState } from "react";
import { path } from "@tauri-apps/api";
import * as fs from "@tauri-apps/plugin-fs";
import { ClickAwayListener } from "@mui/material";
import { revealItemInDir } from "@tauri-apps/plugin-opener";
import { invoke } from "@tauri-apps/api/core";
import { platform } from "@tauri-apps/plugin-os";
import { useToast } from "react-toast-plus";
interface FileItemProps {
filePath: string;
isDirectory: boolean;
setOpenFile: (file: string) => void;
openDefault?: boolean;
refresh?: number;
}
const FileItem: React.FC
{title != null && (
{title}
)}
);
};
================================================
FILE: src/main.tsx
================================================
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
{children}
{version && (
<>
CrossCode
Version {version}{" "}
(Early Access)
);
};
================================================
FILE: src/pages/IDE.css
================================================
.ide-container {
height: 100%;
display: flex;
flex-direction: column;
}
.file-explorer-tile {
padding-right: 0.5rem;
}
.screenshot-tile {
padding: 0;
margin: var(--padding-md);
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
align-items: center;
box-sizing: border-box;
width: calc(100% - var(--padding-md) * 2 - var(--padding-xs));
}
.screenshot-tile > div {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
gap: var(--padding-lg);
}
.screenshot-img-container {
flex: 1 1 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
min-width: 0;
}
.screenshot-img-container > img {
transform: translateY(calc(-1 * var(--padding-xs)));
max-width: 100%;
max-height: calc(100% - var(--padding-md) * 4);
object-fit: contain;
display: block;
}
================================================
FILE: src/pages/IDE.tsx
================================================
import Splitter, { GutterTheme, SplitDirection } from "@devbookhq/splitter";
import Tile from "../components/Tiles/Tile";
import FileExplorer from "../components/Tiles/FileExplorer";
import { useCallback, useContext, useEffect, useState } from "react";
import Editor from "../components/Tiles/Editor";
import MenuBar from "../components/Menu/MenuBar";
import "./IDE.css";
import { StoreContext, useStore } from "../utilities/StoreContext";
import { useNavigate, useParams } from "react-router";
import { useIDE } from "../utilities/IDEContext";
import { registerFileSystemOverlay } from "@codingame/monaco-vscode-files-service-override";
import TauriFileSystemProvider from "../utilities/TauriFileSystemProvider";
import { invoke } from "@tauri-apps/api/core";
import {
Button,
Divider,
Modal,
ModalClose,
ModalDialog,
Typography,
} from "@mui/joy";
import { ErrorIcon, useToast, WarningIcon } from "react-toast-plus";
import SwiftMenu from "../components/SwiftMenu";
import { restartServer } from "../utilities/lsp-client";
import BottomBar from "../components/Tiles/BottomBar";
import { open as openFileDialog, save } from "@tauri-apps/plugin-dialog";
import { IStandaloneCodeEditor } from "@codingame/monaco-vscode-api/vscode/vs/editor/standalone/browser/standaloneCodeEditor";
import { DARWIN_SDK_VERSION } from "../utilities/constants";
import { writeFile } from "@tauri-apps/plugin-fs";
export interface IDEProps {}
type ProjectValidation =
| "Valid"
| "Invalid"
| "UnsupportedFormatVersion"
| "InvalidPackage"
| "InvalidToolchain";
let autoStartedLsp = "";
export default () => {
const { storeInitialized, store } = useContext(StoreContext);
const [openFile, setOpenFile] = useState
{projectValidation === "InvalidToolchain" &&
{templates.map((template) => (
{template.image && (
)}
{
e.preventDefault();
navigate(`/new/${template.id}`);
}}
>
{template.name}
{template.description}
))}
{isWindows && (
Windows Subsystem for Linux
Windows Subsystem for Linux (WSL) is required to use CrossCode on
Windows. Learn more about WSL on{" "}
{
e.preventDefault();
open("https://learn.microsoft.com/en-us/windows/wsl/");
}}
>
microsoft.com
. We recommended WSL 2 and Ubuntu 24.04. Other distributions may
work, but are not officially supported. CrossCode will use your
default WSL distribution.
{hasWSL === null ? (
"Checking for wsl..."
) : hasWSL ? (
"WSL is already installed on your system!"
) : (
<>
{!hasWSL && (
)}
)}
Swift
You will need a Swift {SWIFT_VERSION_PREFIX} toolchain to use
CrossCode. It is recommended to install it using swiftly, but you
can also install it manually.
Darwin SDK
CrossCode requires a special swift SDK to build apps for iOS. It can
be generated from a copy of Xcode 26 or later. To install it,
download Xcode.xip using the link below, click the "Install SDK"
button, then select the downloaded file. Note that installing the
SDK will temporarily require a lot of disk space (~11GB) and may
take a while.
WSL is not installed on your system. CrossCode can attempt
to automatically install WSL. If it fails, follow the
guide on{" "}
{
e.preventDefault();
openUrl(
"https://learn.microsoft.com/en-us/windows/wsl/install"
);
}}
>
microsoft.com
.
)}
{item.type !== "button" && (
{item.name}:
)}
{item.type === "select" && showOtherTextField && (
<>
setNewValue(e.target.value)}
/>
)}
{error && (
{item.type === "text" && (
handleChange(e.target.value)}
/>
)}
{item.type === "number" && (
handleChange(Number(e.target.value))}
/>
)}
{item.type === "select" && (
)}
{item.type === "checkbox" && (
handleChange(e.target.checked)}
/>
)}
{item.type === "button" && (
)}
{item.type === "info" && (
{value}
)}
{categories.map((category, categoryIndex) => (
{category.name}
{category.pages.map((p) => (
{p.name}
))}
{categoryIndex !== categories.length - 1 && (
))}
{currentPage ? (
<>
{currentPage.name}
{currentPage.description && (
{currentPage.description}
)}
Page Not Found
) : (
Preferences
Select a category from the sidebar to configure your preferences.
)}
{currentPage.customComponent ? (
) : page ? (
Loading App IDs...
;
}
if (error) {
return {error}
;
}
return (
{availableQuantity != null && maxQuantity != null && (
{ids.map((id) => (
{canDelete && (
)}
{id.identifier}
{id.expiration_date && (
Expires {new Date(id.expiration_date).toLocaleDateString()}
)}
Features:
))}
{ids.length === 0 && No App IDs found. }
);
};
export const appIdsPage = createCustomPreferencePage(
"appids",
"App IDs",
AppIdsComponent,
{
description:
"Free developer accounts have a limit of 10 App IDs. You cannot delete App IDs, but they will expire after a week.",
category: "apple",
}
);
================================================
FILE: src/preferences/pages/appearance.tsx
================================================
import { useContext, useState } from "react";
import { createPreferencePage, createItems } from "../helpers";
import { setTheme } from "@tauri-apps/api/app";
import { StoreContext, useStore } from "../../utilities/StoreContext";
import {
FormControl,
Select,
useColorScheme,
Option,
Typography,
} from "@mui/joy";
const ThemeSelector = () => {
const { store } = useContext(StoreContext);
const storeExists = store !== null && store !== undefined;
const storeKey = `appearance/theme`.toLowerCase();
const [value, setValue] = useStore(storeKey, "dark");
const [error, setError] = useState
You have {availableQuantity}/{maxQuantity} App IDs available.
)}
{id.name}: {id.app_id_id}
-
{Object.entries(id.features).map(([feature, value]) => (
- {feature}: {JSON.stringify(value)} ))}
Theme:
Loading certificates...
;
}
if (error) {
return {error}
;
}
return (
-
{certificates.map((cert) => (
-
{cert.name}: {cert.machine_name}
{cert.serial_number} ({cert.certificate_id})
))}
{certificates.length === 0 && - No certificates found. }