![](\"/logo.png\"){kind=logo}
\n\n\n \n Loading CrossCode...\n
\n \n\n"
},
{
"path": "src/App.css",
"content": ""
},
{
"path": "src/App.tsx",
"content": "import { CssVarsProvider, extendTheme } from \"@mui/joy/styles\";\nimport { Sheet } from \"@mui/joy\";\nimport \"@fontsource/inter\";\nimport \"@fontsource/inter/600.css\";\nimport Onboarding from \"./pages/Onboarding\";\nimport IDE from \"./pages/IDE\";\nimport Preferences from \"./preferences/Preferences\";\nimport { BrowserRouter, Route, Routes, Navigate, Outlet } from \"react-router\";\nimport { StoreProvider, useStore } from \"./utilities/StoreContext\";\nimport { IDEProvider } from \"./utilities/IDEContext\";\nimport { CommandProvider } from \"./utilities/Command\";\nimport { ToastProvider } from \"react-toast-plus\";\nimport New from \"./pages/New\";\nimport NewTemplate from \"./pages/NewTemplate\";\nimport \"vscode/localExtensionHost\";\nimport { UpdateProvider } from \"./utilities/UpdateContext\";\nimport About from \"./pages/About\";\n\ndeclare module \"@mui/joy/IconButton\" {\n interface IconButtonPropsSizeOverrides {\n xs: true;\n }\n}\n\nconst theme = extendTheme({\n components: {\n JoyIconButton: {\n styleOverrides: {\n root: ({ ownerState, theme }) => ({\n ...(ownerState.size === \"xs\" && {\n \"--Icon-fontSize\": \"1rem\",\n \"--Button-gap\": \"0.25rem\",\n minHeight: \"var(--Button-minHeight, 1.5rem)\",\n fontSize: theme.vars.fontSize.xs,\n paddingBlock: \"2px\",\n paddingInline: \"0.25rem\",\n }),\n }),\n },\n },\n },\n});\n\n// Layout with IDE-related providers\nconst IDELayout = () => {\n const [appTheme] = useStore(\"appearance/theme\", \"dark\");\n return (\n \n {\n setSelectedDevice(\n devices.find((d) => d.id.toString() === value) || null\n );\n }}\n placeholder=\"Select Device...\"\n >\n {devices.length < 1 && (\n \n )}\n {devices.map((device, index) => (\n \n ))}\n \n
\n \n );\n}\n"
},
{
"path": "src/components/Menu/MenuBarButton.tsx",
"content": "import {\n Dropdown,\n DropdownProps,\n ListItemButton,\n MenuButton,\n Theme,\n menuItemClasses,\n typographyClasses,\n} from \"@mui/joy\";\nimport { cloneElement, forwardRef } from \"react\";\n\ntype MenuBarButtonProps = Pick- \n {group.items.map((item, itemIndex) => {\n if (\"component\" in item) {\n return (\n \n {item.component({\n selectedDevice,\n shortcut: item.shortcut\n ? renderShortcut(item.shortcut)\n : undefined,\n })}\n \n );\n }\n return (\n
\n {operation?.title} \n \n {done\n ? opFailed\n ? \"Operation failed. Please see steps for details.\"\n : \"Operation completed!\"\n : \"Please wait (this may take a while)...\"}\n \n
\n \n {operation.steps.map((step) => {\n let failed = operationState.failed.find((f) => f.stepId == step.id);\n let completed = operationState.completed.includes(step.id);\n let started = operationState.started.includes(step.id);\n let notStarted = !failed && !completed && !started;\n return (\n
\n \n
\n );\n })}\n \n {failed &&
\n\n \n \n {step.title}\n \n {failed && (\n \n \n Details \n \n \n \n \n )}\n
\n \n {failed.extraDetails}\n \n Checking for SDK...
;\n }\n\n return (\n \n \n {isWindowsReady ? (\n hasDarwinSDK ? (\n \"Darwin SDK is installed!\"\n ) : (\n <>\n {selectedToolchain ? \n {darwinSDKVersion === DARWIN_SDK_VERSION\n ? `Version: ${darwinSDKVersion}`\n : `Unsupported SDK version (${darwinSDKVersion}). Apps may compile, but you may not be able to use newer features (like liquid glass). Please re-install with Xcode 26.`}\n \n )}\n
\n \n Select a toolchain: \n \n {allToolchains.map((toolchain) => (\n \n setSelectedToolchain(toolchain)}\n />\n \n {toolchain.path} \n \n {toolchain.isSwiftly ? \"(Swiftly)\" : \"(Manually Installed)\"}\n \n
\n \n ))}\n \n \n )}\n \n {\n if (newValue === null) return;\n setFocused(newValue as number);\n }}\n >\n \n {staticTabs.map((tab, index) => (\n \n {tab.name}\n \n ))}\n \n Syslog\n \n \n App Console\n \n {focused === staticTabs.length && (\n {\n syslogRef.current?.clear();\n }}\n />\n )}\n {focused === staticTabs.length + 1 && (\n {\n stdoutRef.current?.clear();\n }}\n />\n )}\n \n {staticTabs.map((tab, index) => (\n \n {tab.component}\n \n ))}\n\n \n {\n setRefreshSyslog((prev) => prev + 1);\n }}\n />\n ,\n \n \n {\n setRefreshStdout((prev) => prev + 1);\n }}\n ref={stdoutRef}\n />\n ,\n \n \n
\n );\n}\n\nfunction BottomBarFilter({\n filter,\n setFilter,\n setRefresh,\n clear,\n displayName,\n errorMessage,\n startCommand,\n stopCommand,\n running,\n customTooltip,\n requiresDDI = false,\n}: {\n filter: string;\n setFilter: React.Dispatch\n (\n
\n );\n}\n"
},
{
"path": "src/components/Tiles/Console.css",
"content": ".console-tile {\n background-color: var(--joy-background-popup);\n font-size: smaller;\n height: 100%;\n min-width: 100%;\n}\n\n.console-container {\n height: 100%;\n padding: 0 var(--padding-md);\n background-color: var(--joy-background-popup);\n overflow: auto;\n scrollbar-width: thin;\n scrollbar-color: #888 #000;\n box-sizing: border-box;\n}\n"
},
{
"path": "src/components/Tiles/Console.tsx",
"content": "import { useEffect, useRef, useState } from \"react\";\nimport \"./Console.css\";\nimport { listen } from \"@tauri-apps/api/event\";\nimport Convert from \"ansi-to-html\";\nimport { Virtuoso } from \"react-virtuoso\";\nimport { useParams } from \"react-router\";\n\nconst convert = new Convert();\n\nexport function escapeHtml(unsafe: string) {\n return unsafe\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\nexport default function Console({\n channel,\n jsonPrettyPrint,\n}: {\n channel: string;\n jsonPrettyPrint?: boolean;\n}) {\n const [consoleLines, setConsoleLines] = useState\n (\n
\n );\n}\n"
},
{
"path": "src/components/Tiles/Editor.css",
"content": ".editor {\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n.code-editor {\n width: 100%;\n height: 100%;\n max-height: 100%;\n overflow: hidden;\n position: relative;\n /* transform: translate(0, -100%); */\n}\n\n.tabsContainer {\n display: flex;\n padding-bottom: 1px;\n position: relative;\n width: 100%;\n overflow-x: hidden;\n}\n\n.tab-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n flex-shrink: 0;\n}\n\n.tabsContainer .Mui-selected::after {\n content: \"\";\n display: block;\n height: 2px;\n background: currentColor;\n position: absolute;\n bottom: -1px;\n z-index: 999;\n left: 0;\n right: 0;\n}\n\n.drop-indicator {\n width: 2px;\n height: 100%;\n background: var(--joy-palette-neutral-300);\n position: absolute;\n z-index: 1000;\n left: 0;\n}\n\n.drop-indicator-end {\n position: relative;\n left: auto;\n margin-left: 0;\n height: 32px;\n align-self: stretch;\n}\n"
},
{
"path": "src/components/Tiles/Editor.tsx",
"content": "import { path } from \"@tauri-apps/api\";\nimport \"./Editor.css\";\nimport { IconButton, useColorScheme } from \"@mui/joy\";\nimport { Dispatch, SetStateAction, useEffect, useRef, useState } from \"react\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport CircleIcon from \"@mui/icons-material/Circle\";\nimport * as monaco from \"monaco-editor\";\nimport { initialize, ITextEditorOptions } from \"@codingame/monaco-vscode-api\";\nimport getLanguagesServiceOverride from \"@codingame/monaco-vscode-languages-service-override\";\nimport getThemeServiceOverride from \"@codingame/monaco-vscode-theme-service-override\";\nimport getTextMateServiceOverride from \"@codingame/monaco-vscode-textmate-service-override\";\nimport getEditorServiceOverride from \"@codingame/monaco-vscode-editor-service-override\";\nimport getModelServiceOverride from \"@codingame/monaco-vscode-model-service-override\";\nimport \"@codingame/monaco-vscode-swift-default-extension\";\nimport \"@codingame/monaco-vscode-theme-defaults-default-extension\";\nimport { platform } from \"@tauri-apps/plugin-os\";\nimport { TabLike } from \"../TabLike\";\nimport { useStore } from \"../../utilities/StoreContext\";\nimport { useParams } from \"react-router\";\nimport { readTextFile, writeTextFile } from \"@tauri-apps/plugin-fs\";\n\nexport type WorkerLoader = () => Worker;\nconst workerLoaders: Partial\n {\n if (e.deltaY !== 0) {\n e.currentTarget.scrollLeft += e.deltaY;\n e.preventDefault();\n }\n }}\n >\n {tabs.map((tab, index) => {\n let unsaved = unsavedFiles.includes(tab.file);\n return (\n
\n \n {dropIndicatorIndex === index && (\n \n )}\n {\n setFocused(index);\n }}\n onDragStart={(e) => handleDragStart(e, index)}\n onDragOver={(e) => handleDragOver(e, index)}\n onDragEnd={handleDragEnd}\n >\n {tab.name}\n setHoveredOnBtn(index)}\n onMouseLeave={() => setHoveredOnBtn(null)}\n size=\"xs\"\n sx={{ margin: \"0px\", marginLeft: \"2px\" }}\n onClick={(event) => {\n event.stopPropagation();\n setTabs((tabs) => tabs.filter((_, i) => i !== index));\n setFocused((focused) => {\n if (focused === index) return 0;\n return focused;\n });\n setOpenFiles((openFiles) =>\n openFiles.filter((file) => file !== tab.file)\n );\n }}\n >\n {!unsaved || hoveredOnBtn === index ? (\n
\n );\n })}\n {dropIndicatorIndex === tabs.length && (\n \n )}\n \n \n \n ({\n top: contextMenu.mouseY,\n left: contextMenu.mouseX,\n right: contextMenu.mouseX,\n bottom: contextMenu.mouseY,\n width: 0,\n height: 0,\n } as DOMRect),\n } as any)\n : undefined\n }\n placement=\"bottom-start\"\n sx={{\n pt: 0,\n pb: 0,\n }}\n >\n {contextMenu?.isFolder && (\n {\n handleClose();\n setNewTarget(contextMenu!.filePath);\n setNewValue(\"\");\n setNewOpen(true);\n }}\n >\n New File...\n \n )}\n {contextMenu?.isFolder && (\n {\n handleClose();\n setNewFolderTarget(contextMenu!.filePath);\n setNewFolderValue(\"\");\n setNewFolderOpen(true);\n }}\n >\n New Folder...\n \n )}\n {contextMenu?.isFolder && {\n handleClose();\n await revealItemInDir(contextMenu!.filePath);\n }}\n >\n Open Containing Folder\n \n {\n handleClose();\n setRenameTarget(contextMenu!.filePath);\n setRenameValue(await path.basename(contextMenu!.filePath));\n setRenameOpen(true);\n }}\n >\n Rename...\n \n {\n handleClose();\n setDeleteTarget(contextMenu!.filePath);\n setDeleteBasename(await path.basename(contextMenu!.filePath));\n setDeleteOpen(true);\n }}\n >\n Delete\n \n {\n handleClose();\n setRefresh((r) => r + 1);\n }}\n >\n Refresh\n \n \n \n\n {/* New File Modal */}\n setNewOpen(false)}>\n \n \n New File\n \n setNewValue(e.target.value)}\n onKeyDown={async (e) => {\n if (e.key === \"Enter\") {\n await handleNewFile();\n }\n }}\n />\n \n \n \n \n \n \n\n {/* New Folder Modal */}\n setNewFolderOpen(false)}>\n \n \n New Folder\n \n setNewFolderValue(e.target.value)}\n onKeyDown={async (e) => {\n if (e.key === \"Enter\") {\n await handleNewFolder();\n }\n }}\n />\n \n \n \n \n \n \n\n {/* Rename Modal */}\n setRenameOpen(false)}>\n \n \n Rename\n \n setRenameValue(e.target.value)}\n onKeyDown={async (e) => {\n if (e.key === \"Enter\") {\n await handleRename();\n }\n }}\n />\n \n \n \n \n \n \n\n {/* Rename Modal */}\n setRenameOpen(false)}>\n \n \n Rename\n \n setRenameValue(e.target.value)}\n onKeyDown={async (e) => {\n if (e.key === \"Enter\") {\n await handleRename();\n }\n }}\n />\n \n \n \n \n \n \n\n {/* Delete Confirmation Modal */}\n setDeleteOpen(false)}>\n \n \n Confirm Delete\n \n \n Are you sure you want to delete {deleteBasename}? This action\n cannot be undone.\n \n \n \n \n \n \n \n
\n );\n};\n"
},
{
"path": "src/components/Tiles/FilteredConsole.tsx",
"content": "import { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport \"./Console.css\";\nimport { listen } from \"@tauri-apps/api/event\";\nimport Convert from \"ansi-to-html\";\nimport { Virtuoso } from \"react-virtuoso\";\nimport { escapeHtml } from \"./Console\";\nimport React from \"react\";\nimport { useParams } from \"react-router\";\n\nconst convert = new Convert();\n\nexport type FilteredConsoleHandle = {\n clear: () => void;\n};\n\ntype FilteredConsoleProps = {\n filter: string;\n channel: string;\n doneSignal?: string;\n alertDone?: () => void;\n};\n\nexport default React.forwardRef\n {\n if (!filter || filter === \"\") return true;\n return line.toLowerCase().includes(filter.toLowerCase());\n })}\n itemContent={(_, line) => (\n
\n );\n }\n);\n"
},
{
"path": "src/components/Tiles/Tile.css",
"content": ".tile {\n width: 100%;\n height: 100%;\n padding: var(--padding-xs);\n}\n.tile-content {\n height: 100%;\n}\n.tile-title {\n color: gray;\n}\n"
},
{
"path": "src/components/Tiles/Tile.tsx",
"content": "import { Typography } from \"@mui/joy\";\nimport \"./Tile.css\";\n\nexport interface TileProps {\n title?: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport default ({ title, children, className }: TileProps) => {\n return (\n \n {title != null && (\n \n {title}\n \n )}\n
\n );\n};\n"
},
{
"path": "src/main.tsx",
"content": "import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App\";\nimport \"./styles.css\";\n\nReactDOM.createRoot(document.getElementById(\"root\") as HTMLElement).render(\n \n {children}\n
\n \n {version && (\n <>\n
\n );\n};\n"
},
{
"path": "src/pages/IDE.css",
"content": ".ide-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.file-explorer-tile {\n padding-right: 0.5rem;\n}\n\n.screenshot-tile {\n padding: 0;\n margin: var(--padding-md);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n align-items: center;\n box-sizing: border-box;\n width: calc(100% - var(--padding-md) * 2 - var(--padding-xs));\n}\n\n.screenshot-tile > div {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: var(--padding-lg);\n}\n\n.screenshot-img-container {\n flex: 1 1 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 0;\n min-width: 0;\n}\n\n.screenshot-img-container > img {\n transform: translateY(calc(-1 * var(--padding-xs)));\n max-width: 100%;\n max-height: calc(100% - var(--padding-md) * 4);\n object-fit: contain;\n display: block;\n}\n"
},
{
"path": "src/pages/IDE.tsx",
"content": "import Splitter, { GutterTheme, SplitDirection } from \"@devbookhq/splitter\";\nimport Tile from \"../components/Tiles/Tile\";\nimport FileExplorer from \"../components/Tiles/FileExplorer\";\nimport { useCallback, useContext, useEffect, useState } from \"react\";\nimport Editor from \"../components/Tiles/Editor\";\nimport MenuBar from \"../components/Menu/MenuBar\";\nimport \"./IDE.css\";\nimport { StoreContext, useStore } from \"../utilities/StoreContext\";\nimport { useNavigate, useParams } from \"react-router\";\nimport { useIDE } from \"../utilities/IDEContext\";\nimport { registerFileSystemOverlay } from \"@codingame/monaco-vscode-files-service-override\";\nimport TauriFileSystemProvider from \"../utilities/TauriFileSystemProvider\";\nimport { invoke } from \"@tauri-apps/api/core\";\nimport {\n Button,\n Divider,\n Modal,\n ModalClose,\n ModalDialog,\n Typography,\n} from \"@mui/joy\";\nimport { ErrorIcon, useToast, WarningIcon } from \"react-toast-plus\";\nimport SwiftMenu from \"../components/SwiftMenu\";\nimport { restartServer } from \"../utilities/lsp-client\";\nimport BottomBar from \"../components/Tiles/BottomBar\";\nimport { open as openFileDialog, save } from \"@tauri-apps/plugin-dialog\";\nimport { IStandaloneCodeEditor } from \"@codingame/monaco-vscode-api/vscode/vs/editor/standalone/browser/standaloneCodeEditor\";\nimport { DARWIN_SDK_VERSION } from \"../utilities/constants\";\nimport { writeFile } from \"@tauri-apps/plugin-fs\";\n\nexport interface IDEProps {}\n\ntype ProjectValidation =\n | \"Valid\"\n | \"Invalid\"\n | \"UnsupportedFormatVersion\"\n | \"InvalidPackage\"\n | \"InvalidToolchain\";\n\nlet autoStartedLsp = \"\";\n\nexport default () => {\n const { storeInitialized, store } = useContext(StoreContext);\n const [openFile, setOpenFile] = useState\n 
\n
\n \n CrossCode \n \n Version {version}{\" \"}\n (Early Access)\n \n
\n - \n
\n \n \n \n \n {\n setProjectValidation(null);\n }}\n >\n \n \n \n )}\n {initialized &&\n selectedToolchain !== null &&\n sourcekitStartup === null &&\n hasIgnoredRam === false &&\n hasLimitedRam && (\n {\n setHasIgnoredRam(true);\n }}\n >\n \n \n \n )}\n {initialized &&\n selectedToolchain !== null &&\n hasIgnoredDarwinSDK === false &&\n darwinSDKVersion !== DARWIN_SDK_VERSION && (\n {\n setHasIgnoredDarwinSDK(true);\n }}\n >\n \n \n \n )}\n
\n );\n};\n\nfunction getValidationMsg(validation: ProjectValidation): string {\n switch (validation) {\n case \"Invalid\":\n return \"This does not appear to be a valid CrossCode project.\";\n case \"InvalidPackage\":\n return \"SwiftPM was unable to parse your package. Please check your Package.swift file.\";\n case \"UnsupportedFormatVersion\":\n return \"This project uses an unsupported config format version. You may need to update CrossCode.\";\n case \"InvalidToolchain\":\n return \"Your Swift toolchain appears to be invalid.\";\n default:\n return \"\";\n }\n}\n"
},
{
"path": "src/pages/New.css",
"content": ".new-templates-container {\n display: flex;\n gap: var(--padding-lg);\n flex-wrap: wrap;\n}\n\n.new-template-card {\n max-width: 500px;\n flex-grow: 1;\n flex-basis: 400px;\n cursor: pointer;\n}\n\n.new-template-card:hover {\n filter: brightness(0.8);\n}\n\n.new-template-form {\n display: flex;\n flex-direction: column;\n gap: var(--padding-sm);\n width: 100%;\n}\n.new-template-field {\n display: flex;\n align-items: center;\n gap: var(--padding-lg);\n width: 100%;\n}\n\n.new-template-field-input {\n flex-grow: 1;\n}\n"
},
{
"path": "src/pages/New.tsx",
"content": "import logo from \"../assets/logo.png\";\nimport {\n AspectRatio,\n Button,\n Card,\n CardContent,\n CardOverflow,\n Link,\n Typography,\n} from \"@mui/joy\";\nimport \"./Onboarding.css\";\nimport \"./New.css\";\nimport { templates } from \"../utilities/templates\";\nimport { useNavigate } from \"react-router-dom\";\n\nexport default () => {\n const navigate = useNavigate();\n return (\n \n
\n )}\n \n {initialized &&\n selectedToolchain !== null &&\n projectValidation !== null &&\n projectValidation !== \"Valid\" && (\n \n Screenshot \n {\n const blob = await (await fetch(screenshot)).blob();\n const arrayBuffer = await blob.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n const savePath = await save({\n title: \"Save Screenshot\",\n defaultPath: \"screenshot.png\",\n filters: [\n { name: \"PNG Image\", extensions: [\"png\"] },\n { name: \"All Files\", extensions: [\"*\"] },\n ],\n });\n if (!savePath) return;\n await writeFile(savePath, uint8Array);\n addToast.success(\"Saved screenshot to \" + savePath);\n }}\n >\n Save\n \n \n
\n \n 
\n
\n \n \n {getValidationMsg(projectValidation)} Some features may not\n work as expected.\n \n
\n\n \n Failed to load project \n
\n \n
\n \n {projectValidation === \"InvalidToolchain\" && {\n navigate(\"/new\");\n }}\n >\n Create New\n \n \n {\n setProjectValidation(null);\n }}\n variant=\"outlined\"\n >\n Ignore\n \n \n )}\n
\n \n \n SourceKit-LSP is used to provide autocomplete, error\n reporting, and other language features. However, it uses a\n large amount of memory. Your device does not meet our\n recommended memory requirements. You can choose to enable it\n anyways, but it may cause crashes or instability.\n \n \n You can change this at any time in Edit {\">\"} Preferences{\" \"}\n {\">\"} SourceKit LSP {\">\"} Auto-Launch SourceKit.\n \n \n You can also enable SourceKit temporarily with Build {\">\"}{\" \"}\n Restart LSP.\n \n
\n\n \n Limited Memory \n
\n \n
\n \n {\n setSourcekitStartup(false);\n setHasIgnoredRam(true);\n }}\n >\n Keep disabled\n \n {\n setSourcekitStartup(true);\n setHasIgnoredRam(true);\n }}\n color=\"danger\"\n variant=\"outlined\"\n >\n Enable Anyway\n \n
\n \n \n This version of CrossCode is designed to work with Darwin SDK{\" \"}\n {DARWIN_SDK_VERSION}, but you have version {darwinSDKVersion}{\" \"}\n installed. Things may still work, but you will miss out on\n newer features (like liquid glass) and may run into issues.\n \n
\n\n \n Incompatible SDK Version \n
\n \n
\n \n {\n navigate(\"/#install-sdk\");\n }}\n >\n Install Correct SDK\n \n {\n setHasIgnoredDarwinSDK(true);\n }}\n variant=\"outlined\"\n >\n Ignore\n \n
\n \n navigate(\"/\")}\n variant=\"outlined\"\n >\n Back to Home\n \n
\n );\n};\n"
},
{
"path": "src/pages/NewTemplate.tsx",
"content": "import logo from \"../assets/logo.png\";\nimport { Input, Typography } from \"@mui/joy\";\nimport \"./Onboarding.css\";\nimport \"./New.css\";\nimport { templates } from \"../utilities/templates\";\nimport { Navigate, useNavigate, useParams } from \"react-router-dom\";\nimport { useState } from \"react\";\nimport { Button } from \"@mui/joy\";\nimport { invoke } from \"@tauri-apps/api/core\";\nimport { useToast } from \"react-toast-plus\";\n\nexport default () => {\n const navigate = useNavigate();\n const params = useParams<\"template\">();\n const templateId = params.template;\n if (!templateId) {\n return \n \n
\n \n Create New Project \n \n Select a template to get started\n \n
\n \n {templates.map((template) => (\n \n {template.image && (\n \n \n 
\n \n \n )}\n \n \n {\n e.preventDefault();\n navigate(`/new/${template.id}`);\n }}\n >\n {template.name}\n \n \n \n {template.description}\n \n \n \n ))}\n
\n\n \n
\n );\n};\n"
},
{
"path": "src/pages/Onboarding.css",
"content": ".onboarding {\n padding: var(--padding-lg);\n display: flex;\n flex-direction: column;\n gap: var(--padding-lg);\n}\n\n.onboarding h1,\n.onboarding p {\n margin: 0;\n}\n\n.onboarding-header {\n display: flex;\n align-items: center;\n gap: var(--padding-lg);\n}\n\n.onboarding-buttons {\n display: flex;\n gap: var(--padding-lg);\n}\n\n.onboarding-logo {\n width: 6rem;\n height: 6rem;\n}\n\n.onboarding-cards {\n display: flex;\n flex-direction: column;\n gap: var(--padding-lg);\n}\n\n.disabled-button {\n cursor: not-allowed;\n}\n\n.onboarding-version {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n"
},
{
"path": "src/pages/Onboarding.tsx",
"content": "import { useEffect, useRef, useState } from \"react\";\nimport { open } from \"@tauri-apps/plugin-shell\";\nimport \"./Onboarding.css\";\nimport { Button, Card, CardContent, Divider, Link, Typography } from \"@mui/joy\";\nimport { useIDE } from \"../utilities/IDEContext\";\nimport logo from \"../assets/logo.png\";\nimport { useLocation, useNavigate } from \"react-router\";\nimport { openUrl } from \"@tauri-apps/plugin-opener\";\nimport SwiftMenu from \"../components/SwiftMenu\";\nimport SDKMenu from \"../components/SDKMenu\";\nimport ErrorIcon from \"@mui/icons-material/Error\";\nimport WarningIcon from \"@mui/icons-material/Warning\";\nimport { getVersion } from \"@tauri-apps/api/app\";\nimport { invoke } from \"@tauri-apps/api/core\";\nimport { useToast } from \"react-toast-plus\";\nimport { relaunch } from \"@tauri-apps/plugin-process\";\nimport { SWIFT_VERSION_PREFIX } from \"../utilities/constants\";\n\nexport interface OnboardingProps {}\n\nexport default ({}: OnboardingProps) => {\n const { ready, hasWSL, isWindows, openFolderDialog } = useIDE();\n const [version, setVersion] = useState\n \n
\n \n \n {template.name} \n {template.description} \n
\n \n
\n \n \n \n IDE for iOS Development on Windows and Linux\n \n
\n \n \n Welcome to CrossCode! \n {version && v{version} }\n
\n \n \n \n This is an early access version of CrossCode. Expect bugs. Please\n report any issues you find on{\" \"}\n {\n e.preventDefault();\n open(\"https://github.com/nab138/CrossCode/issues\");\n }}\n >\n github\n \n . Check the{\" \"}\n {\n e.preventDefault();\n open(\"https://github.com/nab138/CrossCode/wiki/Troubleshooting\");\n }}\n >\n troubleshooting guide\n {\" \"}\n for known issues and workarounds.\n \n
\n \n {\n if (ready) {\n navigate(\"/new\");\n }\n }}\n >\n Create New\n \n \n
\n\n \n {isWindows && (\n \n Windows Subsystem for Linux \n \n Windows Subsystem for Linux (WSL) is required to use CrossCode on\n Windows. Learn more about WSL on{\" \"}\n {\n e.preventDefault();\n open(\"https://learn.microsoft.com/en-us/windows/wsl/\");\n }}\n >\n microsoft.com\n \n . We recommended WSL 2 and Ubuntu 24.04. Other distributions may\n work, but are not officially supported. CrossCode will use your\n default WSL distribution.\n \n \n \n {hasWSL === null ? (\n \"Checking for wsl...\"\n ) : hasWSL ? (\n \"WSL is already installed on your system!\"\n ) : (\n <>\n \n {\n try {\n await invoke(\"install_wsl\");\n addToast.success(\n \"Started WSL installation. It may take a while, and may ask you to restart your PC. If you are prompted to enter a username or password, choose whatever you like.\"\n );\n } catch (error) {\n addToast.error(\n \"Failed to launch WSL installation. Please try installing it manually.\"\n );\n }\n }}\n >\n Install WSL\n \n {\n try {\n await relaunch();\n } catch (error) {\n addToast.error(\n \"Failed to relaunch CrossCode. Please try manually.\"\n );\n }\n }}\n >\n Relaunch CrossCode (post-installation)\n \n
\n )}\n \n \n )}\n \n WSL is not installed on your system. CrossCode can attempt\n to automatically install WSL. If it fails, follow the\n guide on{\" \"}\n {\n e.preventDefault();\n openUrl(\n \"https://learn.microsoft.com/en-us/windows/wsl/install\"\n );\n }}\n >\n microsoft.com\n \n .\n
\n \n )}\n \n {!hasWSL && (\n \n \n {item.name}:\n \n {info} \n
\n {item.description && (\n \n {item.type !== \"button\" && (\n \n {item.name}:\n \n )}\n\n
\n\n {item.type === \"select\" && showOtherTextField && (\n <>\n \n {item.type === \"text\" && (\n handleChange(e.target.value)}\n />\n )}\n\n {item.type === \"number\" && (\n handleChange(Number(e.target.value))}\n />\n )}\n\n {item.type === \"select\" && (\n handleChange(newValue)}\n >\n {item.options?.map((option) => (\n \n ))}\n \n )}\n\n {item.type === \"checkbox\" && (\n handleChange(e.target.checked)}\n />\n )}\n\n {item.type === \"button\" && (\n handleChange(\"\")}\n >\n {item.name}\n \n )}\n\n {item.type === \"info\" && (\n \n {value}\n \n )}\n
\n \n
\n );\n}\n"
},
{
"path": "src/preferences/Prefs.css",
"content": ".prefs-container {\n padding: var(--padding-xs);\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.prefs-sidebar-container {\n width: 150px;\n float: left;\n height: 100%;\n box-sizing: border-box;\n display: flex;\n}\n\n.prefs-sidebar {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n}\n\n.prefs-sidebar-item:hover {\n background-color: #00000030;\n cursor: pointer;\n}\n\n.prefs-setting {\n display: flex;\n flex-direction: column;\n gap: var(--padding-xs);\n margin-bottom: var(--padding-md);\n align-items: flex-start;\n}\n\n.prefs-setting-row {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n gap: var(--padding-md);\n width: 100%;\n}\n\n.prefs-setting-row .prefs-label {\n flex-shrink: 0;\n margin: 0;\n}\n\n.prefs-setting-row .prefs-input {\n flex: 1;\n max-width: 300px;\n}\n\n.prefs-page-header {\n margin-bottom: var(--padding-md);\n margin-top: var(--padding-md);\n padding-bottom: var(--padding-md);\n border-bottom: 1px solid var(--joy-palette-divider);\n padding-left: var(--padding-md);\n}\n\n.prefs-content {\n max-height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.prefs-page-content {\n display: flex;\n flex-direction: column;\n gap: var(--padding-sm);\n padding-left: var(--padding-md);\n overflow: auto;\n\n flex-grow: 1;\n}\n\n.prefs-welcome {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 50%;\n text-align: center;\n}\n\n.prefs-input {\n display: flex;\n align-items: center;\n}\n"
},
{
"path": "src/preferences/helpers.ts",
"content": "import { PreferencePage, PreferenceItem } from \"./types\";\nimport { preferenceRegistry } from \"./registry\";\n\nexport function createPreferencePage(\n id: string,\n name: string,\n items: PreferenceItem[],\n options?: {\n description?: string;\n category?: string;\n onLoad?: () => void | Promise\n
\n\n \n {categories.map((category, categoryIndex) => (\n \n \n {category.name}\n \n {category.pages.map((p) => (\n \n {p.name}\n \n ))}\n {categoryIndex !== categories.length - 1 && (\n \n ))}\n
\n \n {currentPage ? (\n <>\n Page Not Found \n ) : (\n
\n \n {currentPage.name} \n {currentPage.description && (\n \n {currentPage.description}\n \n )}\n
\n\n \n {currentPage.customComponent ? (\n
\n \n ) : page ? (\n \n Preferences \n \n Select a category from the sidebar to configure your preferences.\n \n
\n )}\n Loading App IDs...
;\n }\n if (error) {\n return {error}
;\n }\n\n return (\n \n {availableQuantity != null && maxQuantity != null && (\n \n {ids.map((id) => (\n \n \n {canDelete && (\n {\n try {\n await invoke(\"delete_app_id\", {\n anisetteServer,\n appIdId: id.app_id_id,\n });\n setIds((prev) =>\n prev.filter((c) => c.app_id_id !== id.app_id_id)\n );\n } catch (e) {\n console.error(\"Failed to delete app ID:\", e);\n alert(\n \"Failed to revoke app ID: \" +\n e +\n \"\\nPlease try again later.\"\n );\n }\n }}\n >\n Delete\n \n )}\n \n Features: \n \n \n ))}\n {ids.length === 0 && No App IDs found. }\n \n
\n );\n};\n\nexport const appIdsPage = createCustomPreferencePage(\n \"appids\",\n \"App IDs\",\n AppIdsComponent,\n {\n description:\n \"Free developer accounts have a limit of 10 App IDs. You cannot delete App IDs, but they will expire after a week.\",\n category: \"apple\",\n }\n);\n"
},
{
"path": "src/preferences/pages/appearance.tsx",
"content": "import { useContext, useState } from \"react\";\nimport { createPreferencePage, createItems } from \"../helpers\";\nimport { setTheme } from \"@tauri-apps/api/app\";\nimport { StoreContext, useStore } from \"../../utilities/StoreContext\";\nimport {\n FormControl,\n Select,\n useColorScheme,\n Option,\n Typography,\n} from \"@mui/joy\";\n\nconst ThemeSelector = () => {\n const { store } = useContext(StoreContext);\n const storeExists = store !== null && store !== undefined;\n const storeKey = `appearance/theme`.toLowerCase();\n const [value, setValue] = useStore(storeKey, \"dark\");\n const [error, setError] = useState\n You have {availableQuantity}/{maxQuantity} App IDs available.\n
\n )}\n \n \n {id.identifier}\n \n
\n {id.expiration_date && (\n \n {id.name}: {id.app_id_id}\n
\n \n \n Expires {new Date(id.expiration_date).toLocaleDateString()}\n \n
\n )}\n \n - \n {Object.entries(id.features).map(([feature, value]) => (\n
- \n {feature}: {JSON.stringify(value)}\n \n ))}\n
\n
\n\n {error && (\n Theme:
\n \n handleChange(newValue)}\n >\n \n \n \n
\n Loading certificates...
;\n }\n if (error) {\n return {error}
;\n }\n\n return (\n - \n {certificates.map((cert) => (\n
- No certificates found. }\n
\n \n {cert.serial_number} ({cert.certificate_id})\n \n
\n \n ))}\n {certificates.length === 0 && \n {cert.name}: {cert.machine_name}\n
\n