feat: initialize Electron + Vite + React + TypeScript project scaffold#37
Open
ashi2004 wants to merge 1 commit intoAOSSIE-Org:mainfrom
Open
feat: initialize Electron + Vite + React + TypeScript project scaffold#37ashi2004 wants to merge 1 commit intoAOSSIE-Org:mainfrom
ashi2004 wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
github-actions
bot
added
enhancement
WalkthroughAdds initial Electron + Vite + React + TypeScript project scaffold including configuration files for linting, formatting, and build tools, Electron main process with window management and IPC, preload scripts for API exposure, React renderer application with components and styling, and TypeScript project configurations. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 15
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.gitignore:
- Around line 10-13: The .gitignore contains a malformed entry
"yarn.locknode_modules" that accidentally merged two entries; split this into
two separate lines by replacing "yarn.locknode_modules" with "yarn.lock" and
"node_modules" so both lockfile and node modules are ignored correctly.
In `@electron-builder.yml`:
- Around line 23-27: The mac.extendInfo block is currently a YAML sequence
instead of the required mapping, so Info.plist entries (e.g.,
NSCameraUsageDescription, NSMicrophoneUsageDescription,
NSDocumentsFolderUsageDescription, NSDownloadsFolderUsageDescription) will be
wrong; change the extendInfo value to a YAML object (key: value pairs) under the
mac configuration used by electron-builder so each NS* key maps to its string
description (preserve the same keys and messages), ensuring extendInfo is a
mapping rather than a list.
In `@package.json`:
- Around line 17-22: The macOS and Linux packaging scripts ("build:mac" and
"build:linux") bypass the shared "build" pipeline (which runs typecheck) and
thus skip typechecking; update those scripts so they run the existing "build"
script first (e.g., change "build:mac" and "build:linux" to run "npm run build
&& ..." similar to "build:win" and "build:unpack") to ensure typechecking and
the common build steps run for all platforms.
In `@src/main/index.ts`:
- Around line 14-16: The webPreferences currently sets sandbox: false which
disables Electron's renderer sandbox; remove the sandbox: false entry (or set
sandbox: true) in the webPreferences object where preload is set (see
webPreferences and preload join(__dirname, '../preload/index.js')) so the
renderer runs with Electron's default sandbox/context isolation enabled and
relies on the preload's contextBridge usage.
- Around line 24-26: The handler passed to
mainWindow.webContents.setWindowOpenHandler currently calls
shell.openExternal(details.url) with unvalidated input and ignores the returned
Promise; change it to parse and validate details.url using a URL parser and only
allow http: and https: protocols (reject file:, smb:, custom protocols), and
then call shell.openExternal(validatedUrl).await the Promise or attach .catch to
handle failures and log errors; ensure the handler still returns { action:
'deny' } to prevent Electron from opening the URL itself when the URL is invalid
or disallowed.
In `@src/preload/index.d.ts`:
- Line 1: The import for ElectronAPI is a type-only import; change the statement
importing ElectronAPI to a type-only import using "import type" so the emitted
JS remains clean and follows TS best practices—update the import that currently
references ElectronAPI to use import type ElectronAPI from
'@electron-toolkit/preload' (i.e., make ElectronAPI a type-only import).
In `@src/preload/index.ts`:
- Around line 12-13: Replace broad exposure of the entire electronAPI via
contextBridge.exposeInMainWorld with a minimal, explicit API object: keep only
the properties used by the renderer (e.g., window.electron.process.versions and
a ping function that calls ipcRenderer.send('ping')). Update the
exposeInMainWorld calls (currently exposing electronAPI and api) to expose a
small object (e.g., { process: { versions: ... }, ping: () => ... }) and apply
the same reduction in the fallback branch where you currently fall back to the
full electronAPI; ensure the exposed names remain electron and api (or the same
identifiers used by the renderer) and that ipcRenderer usage is wrapped in safe
functions rather than exposing the raw ipcRenderer object.
In `@src/renderer/index.html`:
- Line 2: The root html element is missing a lang attribute; update the root
<html> tag to include an appropriate language code (e.g., lang="en") so the
<html> element declares the document language for accessibility and standards
compliance.
- Around line 7-10: The CSP meta tag in the renderer is missing object-src and
base-uri directives; update the Content-Security-Policy value used in the <meta
http-equiv="Content-Security-Policy"> tag to include object-src 'none' and
base-uri 'self' (e.g., append "object-src 'none'; base-uri 'self';") so the
renderer prevents plugin/object injection and restricts base URL navigation.
In `@src/renderer/src/App.tsx`:
- Around line 10-17: The hardcoded UI strings in the App component (the elements
with className "creator", "text" and nested spans "react" and "ts", plus the
paragraph with className "tip" that contains the "F12" devTool hint) must be
moved to i18n resource files and replaced with lookups; add appropriate keys
(e.g., app.poweredBy, app.buildWith, app.framework.React,
app.language.TypeScript, app.devtoolHint) in your locale JSON, then import and
use your translation helper (e.g., t('...') or <Trans> from your i18n setup)
inside App.tsx to render those strings instead of the hardcoded text so the UI
is localizable.
- Around line 25-27: Replace the anchor element used for triggering IPC with a
proper interactive control: change the <a> without href to a <button
type="button"> and attach the existing onClick handler (ipcHandle) to it,
preserving any classes/styles so visual appearance stays the same; ensure you
remove any meaningless href/onClick patterns and, if necessary, add an
accessible label (aria-label or visible text) so keyboard and assistive
technologies can activate the IPC action correctly while keeping the ipcHandle
function name as the event target.
- Line 5: The renderer currently calls window.electron.ipcRenderer directly in
ipcHandle; replace that call with a typed wrapper (e.g., call
window.api.sendPing()) and remove any direct use of window.electron.ipcRenderer
from App.tsx; then implement sendPing in the preload's api object so it
internally calls ipcRenderer.send('ping') (keep the channel string inside
preload), ensuring the renderer only uses the new sendPing wrapper and ipcHandle
is updated to call it.
In `@src/renderer/src/assets/base.css`:
- Around line 34-44: The global resets currently set font-weight: normal on the
universal selector (*) and remove list bullets via ul { list-style: none; }
which strips emphasis and bullets across the renderer; remove those two rules
from the app-wide base.css (keep box-sizing and margin resets on *, ::before,
::after) and move the font-weight and list-style changes into a landing-page
scoped stylesheet or component CSS (e.g., .landing-page * { font-weight: normal;
} and .landing-page ul { list-style: none; }) so only landing page components
are affected; update or add the landing component CSS (references: the universal
selector "*", the pseudo-elements "::before/::after", and the "ul" selector)
accordingly.
In `@src/renderer/src/assets/main.css`:
- Around line 8-11: Remove global scrolling and selection restrictions from the
body rule: do not keep "overflow: hidden" and "user-select: none" on the body
selector; instead apply those properties only to the splash screen container
(e.g., the ".splash" or "#splash" element used for the app splash). Keep the
background-image and background-size on body if intended, but move overflow and
user-select into the splash container's CSS rule (create one if missing) so
normal renderer pages retain default scrolling and text-selection behavior.
In `@src/renderer/src/components/Versions.tsx`:
- Line 4: The component uses useState for static data: replace the line that
declares versions via useState in Versions.tsx with a plain constant (assign
window.electron.process.versions to versions) and remove the now-unused useState
import; update any references to the versions variable unchanged so the
component reads the static version info without React state overhead.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 93c6f370-0009-4e71-9d53-a8069b5c5faf
⛔ Files ignored due to path filters (4)
public/stability.svgis excluded by!**/*.svgresources/icon.pngis excluded by!**/*.pngsrc/renderer/src/assets/electron.svgis excluded by!**/*.svgsrc/renderer/src/assets/wavy-lines.svgis excluded by!**/*.svg
📒 Files selected for processing (22)
.editorconfig.gitignore.prettierignore.prettierrc.yamlREADME.mdelectron-builder.ymlelectron.vite.config.tseslint.config.mjspackage.jsonsrc/main/index.tssrc/preload/index.d.tssrc/preload/index.tssrc/renderer/index.htmlsrc/renderer/src/App.tsxsrc/renderer/src/assets/base.csssrc/renderer/src/assets/main.csssrc/renderer/src/components/Versions.tsxsrc/renderer/src/env.d.tssrc/renderer/src/main.tsxtsconfig.jsontsconfig.node.jsontsconfig.web.json
Contributor
Author
|
I’ve addressed all the automated review comments |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #36
📝 Description
This PR introduces the initial project scaffold, setting up an Electron-based desktop app with a React + TypeScript renderer and Vite-powered development environment.
Key Changes
src/main)src/preload)src/renderer)electron-viteelectron-builderHow to Test
Additional Checks
Notes
📷 Screenshots or Visual Changes (if applicable)
✅ Checklist
Summary by CodeRabbit
New Features
Documentation
Configuration