[V3] feat: Add @services alias to vite templates #4361
Conversation
dosubot
bot
added
the
size:L
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis change standardizes the import path for the Changes
Sequence Diagram(s)sequenceDiagram
participant AppFile as App / Component File
participant AliasConfig as Vite/TSConfig
participant GreetService as GreetService Module
AppFile->>AliasConfig: Import '@services'
AliasConfig-->>AppFile: Resolve '@services' to bindings/changeme/index
AppFile->>GreetService: Use GreetService
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
harrydehix
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
♻️ Duplicate comments (7)
v3/internal/templates/react-swc/frontend/vite.config.js (1)
7-11: Same absolute-path issue as in the Solid templateReplicate the
path.resolve(__dirname, …)fix here; otherwise React-SWC users will experience unresolved module errors.v3/internal/templates/vue-ts/frontend/vite.config.ts (1)
7-11: Same path-resolution concern as in Qwik templateRepeat of the earlier comment: use
fileURLToPath(new URL(...))orpath.resolveinstead of a hard-coded “/bindings/…”. This keeps the config portable across OSes and respects any customroot.v3/internal/templates/preact/frontend/vite.config.js (1)
7-11: Hard-coded absolute path is brittlePlease adopt the same
fileURLToPath / URL(orpath.resolve) pattern suggested for the other templates to ensure cross-platform correctness.v3/internal/templates/preact-ts/frontend/vite.config.ts (1)
7-11: Cross-platform path resolutionFor consistency and Windows support, resolve the alias path programmatically rather than relying on a “/”-prefixed string.
v3/internal/templates/react/frontend/vite.config.js (1)
7-11: Same cross-platform path issue as in the Qwik templateThe alias should be created with
path.resolve(__dirname, …)to avoid absolute-path breakage. See the detailed suggestion inv3/internal/templates/qwik/frontend/vite.config.js.v3/internal/templates/react-ts/frontend/vite.config.ts (1)
7-11: Duplicate portability concernReplace the hard-coded
"/bindings/…"withresolve(__dirname, './bindings/changeme/index.ts')as previously described.v3/internal/templates/react-swc-ts/frontend/vite.config.ts (1)
7-11: Replicate thepath.resolvefix here as wellUse
resolve(__dirname, './bindings/changeme/index.ts')(and optionally the wildcard) to stay consistent and platform-safe.
🧹 Nitpick comments (15)
v3/internal/templates/preact-ts/frontend/tsconfig.json (1)
10-12:pathsmay be ignored undermoduleResolution: "bundler"– verify IDE & tsc supportTypeScript’s new
bundlerresolver intentionally bypassespathsmappings. Your editor/tscmight still complain even though Vite resolves the alias. Either:
- switch to
node16/nodenext, or- add
vite-tsconfig-paths+ keepbundler, or- document that IntelliSense errors are expected.
Please confirm the desired developer-experience.
v3/internal/templates/sveltekit-ts/frontend/tsconfig.json (1)
14-18: Redundantpathscomment vs. implementationLines 20-22 state “Path aliases are handled by SvelteKit except $lib”, yet a
pathsmap is added above. That comment is now misleading; either delete the comment or drop thepathsentry and rely solely on Vite/SvelteKit aliasing.v3/internal/templates/svelte-ts/frontend/tsconfig.json (1)
16-20: Include file extension to avoid duplicate type packagesSome editors fail to resolve
"bindings/changeme/index"without.ts, producing false “cannot find module” errors. Appending the extension aligns with the Vite alias and avoids ambiguity:- "@services": ["bindings/changeme/index"] + "@services": ["bindings/changeme/index.ts"]v3/internal/templates/solid-ts/frontend/tsconfig.json (1)
25-29: Consider wildcard path mapping.
If you plan to import submodules underbindings/changeme, you can extend the alias to:"paths": { "@services": ["bindings/changeme/index"], "@services/*": ["bindings/changeme/*"] }This will allow statements like
import { Foo } from "@services/foo".v3/internal/templates/lit-ts/frontend/src/my-element.ts (1)
3-3: Inconsistent quotation style.
Use double quotes ("@services") instead of single quotes to match the surrounding imports (e.g.,import {Events} from "@wailsio/runtime";).v3/internal/templates/react-ts/frontend/src/App.tsx (1)
2-2: Verify alias configuration & align import formatting.Please confirm that the
@servicesalias is correctly defined in this template’svite.config.tsandtsconfig.json, and adjust the import to match the existing style:-import {GreetService} from "@services"; +import { GreetService } from "@services";v3/internal/templates/react-swc/frontend/src/App.jsx (1)
2-2: Verify alias configuration & align import formatting.Ensure the
@servicesalias is properly configured invite.config.jsand, if present, in anyjsconfig.json/tsconfig.jsonfor this template. Also update the import to match project conventions:-import {GreetService} from "@services"; +import { GreetService } from "@services";v3/internal/templates/svelte-ts/frontend/src/App.svelte (1)
2-2: Verify alias configuration & align import formatting.Please check that
@servicesis defined invite.config.tsandtsconfig.jsonfor this Svelte-TS template. Also update the import spacing:-import {GreetService} from "@services"; +import { GreetService } from "@services";v3/internal/templates/solid/frontend/src/App.jsx (1)
2-2: Verify alias configuration & align import formatting.Confirm that
@servicesis mapped invite.config.js(and anytsconfig.jsonif used) for this Solid template, and apply consistent spacing:-import {GreetService} from "@services"; +import { GreetService } from "@services";v3/internal/templates/svelte/frontend/src/App.svelte (1)
2-2: Verify alias configuration & align import formatting.Make sure the
@servicesalias is set invite.config.jsandjsconfig.json/tsconfig.jsonfor this Svelte template. Also adjust the import style:-import {GreetService} from "@services"; +import { GreetService } from "@services";v3/internal/templates/react-swc-ts/frontend/tsconfig.json (1)
24-28: Broaden the path mapping to allow sub-imports.If later code needs
import { Foo } from "@services/foo", TypeScript will not find it with the current mapping.
Add a wildcard variant alongside the root mapping:"baseUrl": ".", "paths": { - "@services": ["bindings/changeme/index"] + "@services": ["bindings/changeme/index"], + "@services/*": ["bindings/changeme/*"] }v3/internal/templates/svelte/frontend/jsconfig.json (1)
26-30: Mirror the wildcard mapping here for consistency.
jsconfig.jsonshould mirror the TypeScript setup so editors (VS Code, WebStorm, etc.) resolve deep paths:"checkJs": true, "baseUrl": ".", "paths": { - "@services": ["bindings/changeme/index"] + "@services": ["bindings/changeme/index"], + "@services/*": ["bindings/changeme/*"] }v3/internal/templates/vue-ts/frontend/tsconfig.json (1)
16-20: Add wildcard mapping to avoid future import pain
@servicescurrently resolves only the index file.
If a developer triesimport foo from "@services/utils", TypeScript will fail.
Add a second entry with a wildcard to keep the door open:- "@services": ["bindings/changeme/index"] + "@services": ["bindings/changeme/index"], + "@services/*": ["bindings/changeme/*"]v3/internal/templates/react-ts/frontend/tsconfig.json (1)
24-28: Expose wildcard path for future flexibilitySupport sub-module imports and keep TS/Vite configs aligned:
"paths": { - "@services": ["bindings/changeme/index"] + "@services": ["bindings/changeme/index"], + "@services/*": ["bindings/changeme/*"] }Verify the same improvement across all template
tsconfig/jsconfigfiles.v3/internal/templates/qwik-ts/frontend/tsconfig.json (1)
25-29: Consider using a wildcard mapping to keep the alias future-proofThe current mapping ties
@servicesto a single file.
If, later on, you want to import nested modules (e.g.@services/foo), TypeScript will not resolve them.- "paths": { - "@services": ["bindings/changeme/index"] - } + "paths": { + "@services": ["bindings/changeme/index"], + "@services/*": ["bindings/changeme/*"] + }Adding the wildcard costs nothing today and saves a breaking‐change tomorrow.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (44)
v3/internal/templates/lit-ts/frontend/src/my-element.ts(1 hunks)v3/internal/templates/lit/frontend/src/my-element.js(1 hunks)v3/internal/templates/preact-ts/frontend/src/app.tsx(1 hunks)v3/internal/templates/preact-ts/frontend/tsconfig.json(2 hunks)v3/internal/templates/preact-ts/frontend/vite.config.ts(1 hunks)v3/internal/templates/preact/frontend/src/app.jsx(1 hunks)v3/internal/templates/preact/frontend/vite.config.js(1 hunks)v3/internal/templates/qwik-ts/frontend/src/app.tsx(1 hunks)v3/internal/templates/qwik-ts/frontend/tsconfig.json(1 hunks)v3/internal/templates/qwik-ts/frontend/vite.config.js(1 hunks)v3/internal/templates/qwik/frontend/src/app.jsx(1 hunks)v3/internal/templates/qwik/frontend/vite.config.js(1 hunks)v3/internal/templates/react-swc-ts/frontend/src/App.tsx(1 hunks)v3/internal/templates/react-swc-ts/frontend/tsconfig.json(1 hunks)v3/internal/templates/react-swc-ts/frontend/vite.config.ts(1 hunks)v3/internal/templates/react-swc/frontend/src/App.jsx(1 hunks)v3/internal/templates/react-swc/frontend/vite.config.js(1 hunks)v3/internal/templates/react-ts/frontend/src/App.tsx(1 hunks)v3/internal/templates/react-ts/frontend/tsconfig.json(1 hunks)v3/internal/templates/react-ts/frontend/vite.config.ts(1 hunks)v3/internal/templates/react/frontend/src/App.jsx(1 hunks)v3/internal/templates/react/frontend/vite.config.js(1 hunks)v3/internal/templates/solid-ts/frontend/src/App.tsx(1 hunks)v3/internal/templates/solid-ts/frontend/tsconfig.json(1 hunks)v3/internal/templates/solid-ts/frontend/vite.config.ts(1 hunks)v3/internal/templates/solid/frontend/src/App.jsx(1 hunks)v3/internal/templates/solid/frontend/vite.config.js(1 hunks)v3/internal/templates/svelte-ts/frontend/src/App.svelte(1 hunks)v3/internal/templates/svelte-ts/frontend/tsconfig.json(1 hunks)v3/internal/templates/svelte-ts/frontend/vite.config.ts(1 hunks)v3/internal/templates/svelte/frontend/jsconfig.json(1 hunks)v3/internal/templates/svelte/frontend/src/App.svelte(1 hunks)v3/internal/templates/svelte/frontend/vite.config.js(1 hunks)v3/internal/templates/sveltekit-ts/frontend/src/routes/+page.svelte(1 hunks)v3/internal/templates/sveltekit-ts/frontend/tsconfig.json(1 hunks)v3/internal/templates/sveltekit-ts/frontend/vite.config.ts(1 hunks)v3/internal/templates/sveltekit/frontend/src/routes/+page.svelte(1 hunks)v3/internal/templates/sveltekit/frontend/vite.config.js(1 hunks)v3/internal/templates/vanilla-ts/frontend/src/main.ts(1 hunks)v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue(1 hunks)v3/internal/templates/vue-ts/frontend/tsconfig.json(1 hunks)v3/internal/templates/vue-ts/frontend/vite.config.ts(1 hunks)v3/internal/templates/vue/frontend/src/components/HelloWorld.vue(1 hunks)v3/internal/templates/vue/frontend/vite.config.js(1 hunks)
🔇 Additional comments (16)
v3/internal/templates/solid-ts/frontend/tsconfig.json (1)
23-29: Alias mapping for@servicesadded correctly.
ThebaseUrlandpathsentries are in the right place to enable the new import alias.v3/internal/templates/solid-ts/frontend/src/App.tsx (1)
2-2: Ensure Vite config updated.
This alias import requires a matchingresolve.aliasinvite.config.tsfor this template, for example:resolve: { alias: { "@services": "/bindings/changeme/index.ts", }, },Please verify that
v3/internal/templates/solid-ts/frontend/vite.config.tsincludes this mapping.v3/internal/templates/qwik-ts/frontend/src/app.tsx (1)
2-2: Ensure Vite config updated.
Confirm thatvite.config.jsin the Qwik template defines:resolve: { alias: { "@services": "/bindings/changeme/index.ts", }, },so the
@servicesimport resolves correctly.v3/internal/templates/preact/frontend/src/app.jsx (1)
2-2: Ensure Vite config updated.
Verify thatvite.config.jsfor the Preact template includes:resolve: { alias: { "@services": "/bindings/changeme/index.ts", }, },to support the new
@servicesimport.v3/internal/templates/lit-ts/frontend/src/my-element.ts (1)
3-3: Ensure Vite & TS config updated.
Make surevite.config.tsandtsconfig.jsonin the Lit template include corresponding mappings:
- Vite:
alias: { "@services": "/bindings/changeme/index.ts" }- TSConfig:
"paths": { "@services": ["bindings/changeme/index"] }so this import resolves correctly.
v3/internal/templates/lit/frontend/src/my-element.js (1)
2-2: Consistent alias usage: import updated to@services
TheGreetServiceimport now uses the new@servicesalias in place of a relative path, matching the updated Vite/TS config.v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue (1)
3-3: Consistent alias usage: import updated to@services
TheGreetServiceimport now leverages the@servicesalias, aligning with the updated Vite/TS configuration.v3/internal/templates/react/frontend/src/App.jsx (1)
2-2: Consistent alias usage: import updated to@services
TheGreetServiceimport has been switched to the@servicesalias, in line with the new template configuration.v3/internal/templates/react-swc-ts/frontend/src/App.tsx (1)
2-2: Consistent alias usage: import updated to@services
TheGreetServiceimport now references the@servicesalias instead of a relative path, matching the updated config.v3/internal/templates/qwik/frontend/src/app.jsx (1)
2-2: Consistent alias usage: import updated to@services
TheGreetServiceimport has been updated to use the@servicesalias, consistent with the new Vite/TS settings.v3/internal/templates/vanilla-ts/frontend/src/main.ts (1)
1-1: ```shell
#!/bin/bashLocate any Vite config files in the vanilla-ts template
echo "Finding vite.config files..."
find v3/internal/templates/vanilla-ts -type f -iname "vite.config.*"Search for alias entries in those config files
echo -e "\nSearching for 'alias' in the template directory..."
grep -R "alias" v3/internal/templates/vanilla-ts || echo "No alias entries found"Locate all tsconfig.json files under vanilla-ts
echo -e "\nFinding tsconfig.json files..."
find v3/internal/templates/vanilla-ts -type f -iname "tsconfig.json"Search for @services path mappings in those tsconfig.json files
echo -e "\nSearching for '@services' in tsconfig.json files..."
grep -R ""@services"" v3/internal/templates/vanilla-ts || echo "No @services mappings found"</details> <details> <summary>v3/internal/templates/sveltekit-ts/frontend/src/routes/+page.svelte (1)</summary> `2-2`: **Confirm @services alias support in configs** This SvelteKit-TS import assumes `@services` is defined in both `vite.config.ts` and `tsconfig.json`. Verify the alias entries point to the correct `bindings/changeme/index.ts`. Run: ```shell #!/bin/bash grep -R "alias.*@services" v3/internal/templates/sveltekit-ts/frontend/vite.config.ts grep -R "\"@services\"" v3/internal/templates/sveltekit-ts/frontend/tsconfig.jsonv3/internal/templates/vue/frontend/src/components/HelloWorld.vue (1)
3-3: ```shell
#!/bin/bashPrint alias block from vite.config.js
echo "Alias configuration in vite.config.js:"
sed -n '1,200p' v3/internal/templates/vue/frontend/vite.config.js | awk '/alias\s*:/,/^[[:space:]]*}/'Search for any tsconfig JSON in the repo and check for "@services" paths
echo -e "\nSearching for tsconfig*.json across the repo:"
fd tsconfig*.json .for file in $(fd tsconfig*.json .); do
echo "Checking $file for @services paths:"
grep -n '"@services"' "$file" || echo " (no @services mapping found)"
done</details> <details> <summary>v3/internal/templates/sveltekit/frontend/src/routes/+page.svelte (1)</summary> `2-2`: I’ll pull the full `alias` block to check if `@services` is defined: ```shell #!/bin/bash grep -R -n "alias:" v3/internal/templates/sveltekit/frontend/vite.config.js -A20v3/internal/templates/preact-ts/frontend/src/app.tsx (1)
2-2: Verify @services alias in Preact-TS setup
The Preact-TS project must have@servicesin both itsvite.config.tsandtsconfig.json. Check that both map to/bindings/changeme/index.ts/./bindings/changeme/index.Run:
#!/bin/bash grep -R "alias.*@services" v3/internal/templates/preact-ts/frontend/vite.config.ts grep -R "\"@services\"" v3/internal/templates/preact-ts/frontend/tsconfig.jsonv3/internal/templates/qwik-ts/frontend/vite.config.js (1)
11-15: ```shell
#!/bin/bashShow the beginning of vite.config.js to verify the alias configuration
sed -n '1,50p' v3/internal/templates/qwik-ts/frontend/vite.config.js
</details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
|
@harrydehix - Thanks for opening this. I'm thinking this is a good DX change, but I think we should call the alias "@bindings" as we have a different concept for "services". There are a few comments the rabbit has made that sound important 😄 |
leaanthony
added
the
awaiting feedback
github-actions
bot
added
the
Documentation
|
|
@leaanthony Okay, you decide! Should Difference in usage would be: import { Greet } from "@bindings/greetservice"
import { GreetService } from "@bindings/index"compared to import { Greet } from "@bindings/../greetservice"
import { GreetService } from "@bindings"We could also add a import { Greet } from "@bindings/greetservice"
import { GreetService } from "@services"Added to that I want to make sure, that every template is working fine. Do you have automated tests for this? I'm a bit overwhelmed by the scale of the project. |
Related to https://discord.com/channels/1042734330029547630/1383737833419837490
Description
Adds an
@servicesalias for bindings to make imports a bit easier. It's only a small change, but you don't have to deal with these ugly../..relative imports by default anymore. Would make it easier for beginners.In vite.config.ts:
In tsconfig.json:
Usage:
import { GreetService } from "@services";.Type of change
Please select the option that is relevant.
How Has This Been Tested?
I have not tested this feature with the provided templates. I will do as soon as I find enough time.
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration using
wails doctor.If you checked Linux, please specify the distro and version.
Test Configuration
Please paste the output of
wails doctor. If you are unable to run this command, please describe your environment in as much detail as possible.Checklist:
website/src/pages/changelog.mdxwith details of this PRSummary by CodeRabbit
Refactor
@servicesalias instead of relative paths for improved readability and consistency.Chores
@servicesin project settings to enable simplified import paths. This includes updates to project configuration files to support the new alias.