Merged
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds first-class Svelte/SvelteKit support: a new Changes
Sequence Diagram(s)sequenceDiagram
participant App as Svelte App
participant SDK as InstantSvelteDatabase
participant Reactor as Core Reactor
participant Cache as Subscription Cache
App->>SDK: call useQuery(query)
activate SDK
SDK->>Reactor: subscribeQuery(query)
activate Reactor
Reactor->>Cache: getPreviousResult(query)
Cache-->>Reactor: cached result?
Reactor-->>SDK: initial result (loading/data/cached)
SDK-->>App: return reactive state
deactivate Reactor
deactivate SDK
Note over Reactor,SDK: Later -> server pushes update
Reactor->>SDK: emit new query result
activate SDK
SDK->>SDK: update Svelte $state
SDK-->>App: reactive update
deactivate SDK
App->>SDK: component unmounts
SDK->>Reactor: unsubscribeQuery
Reactor->>Reactor: cleanup
sequenceDiagram
participant User1 as User 1 (Browser)
participant Cursors as Cursors Component
participant Room as InstantSvelteRoom
participant Reactor as Core Reactor
participant User2 as User 2 (Browser)
User1->>Cursors: onMouseMove(x,y)
activate Cursors
Cursors->>Room: publishPresence({x,y,xPercent,yPercent})
activate Room
Room->>Reactor: publishPresence to room/space
Reactor->>User2: broadcast presence update
deactivate Room
deactivate Cursors
User2->>Reactor: subscribe presence for room/space
Reactor->>Room: deliver presence list
Room->>Cursors: peers update
Cursors->>Cursors: re-render remote cursors
Cursors-->>User2: display cursors
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip You can disable the changed files summary in the walkthrough.Disable the |
Without this entry the svelte package version doesn't get set before publish, causing CI to fail on first publish. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
nezaj
force-pushed
the
svelte-sdk-example-app
branch
from
346fbb6 to
c68e886
Compare
Contributor
|
View Vercel preview at instant-www-js-svelte-sdk-docs-jsv.vercel.app. |
nezaj
force-pushed
the
svelte-sdk-example-app
branch
from
c68e886 to
45d44a3
Compare
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Map svelte to html in Fence component for syntax highlighting. This prevents Prettier from mangling Svelte template syntax in code blocks while keeping the same highlighting. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
examples/sveltekit/src/instant.schema.ts (1)
16-20: Consider indexingcreatedAtif you plan to order todos by creation time.The
createdAtfield is defined but not indexed. Per InstantDB guidelines, fields used for filtering or ordering should be indexed. If the todo list should display in chronological order, add.indexed():♻️ Suggested change
todos: i.entity({ - createdAt: i.number(), + createdAt: i.number().indexed(), done: i.boolean(), text: i.string(), }),Based on learnings: "CRITICAL: You MUST index any field you want to filter or order by in the schema".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/sveltekit/src/instant.schema.ts` around lines 16 - 20, The todos entity defines createdAt via i.number() but doesn't mark it indexed; update the schema for the todos entity (the i.entity with createdAt/done/text) to call .indexed() on the createdAt field (i.number().indexed()) so InstantDB can filter/order by creation time; ensure you modify the createdAt declaration inside the todos i.entity block accordingly.client/sandbox/sveltekit/src/routes/+page.svelte (2)
14-21: Consider movinguseQueryoutside the conditional block.Calling
db.useQuery()inside an{:else}block (via{@const}) means the reactive query is created and destroyed each timedbStatechanges. While this works for the sandbox demo, it differs from the pattern inexamples/sveltekit/src/routes/+page.sveltewhereuseQueryis called at the component's top level.For consistency and to avoid potential subscription churn, consider restructuring to call
useQueryunconditionally whendbis available:♻️ Suggested restructure
<script lang="ts"> import { id, type InstaQLEntity } from '@instantdb/svelte'; import { dbState, type AppSchema } from '$lib/db.svelte'; type Todo = InstaQLEntity<AppSchema, 'todos'>; let text = $state(''); + + // Derive query reactively when db is available + const query = $derived(dbState.db?.useQuery({ todos: {} })); </script> {`#if` dbState.isLoading} <div class="p-8 flex justify-center">Creating ephemeral app...</div> {:else if dbState.error} <div class="p-8 text-red-500">Error: {dbState.error}</div> -{:else} - {`@const` db = dbState.db!} - {`@const` query = db.useQuery({ todos: {} })} +{:else if query} + {`@const` db = dbState.db!} <div class="p-8 grid grid-cols-2 items-start gap-2">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@client/sandbox/sveltekit/src/routes/`+page.svelte around lines 14 - 21, The reactive query is being created inside the {:else} block via {`@const` query = db.useQuery(...)} which causes the subscription to be torn down and recreated whenever dbState changes; move the db.useQuery call out of the conditional so the query is created at the component scope whenever db is present (e.g., derive a top-level {`@const` db = dbState.db} and then create {`@const` query = db && db.useQuery({ todos: {} })} or equivalent), keeping the conditional only for rendering {`@render` welcome()} and {`@render` todoApp(db, query)}; update references to query and db in todoApp() to use the top-level symbols so subscriptions remain stable.
51-70: Consider adding type annotations to snippet parameters.The snippets use
db: anyandquery: anywhich loses type safety. Using proper types would improve developer experience:♻️ Suggested improvement
-{`#snippet` todoApp(db: any, query: any)} +{`#snippet` todoApp(db: typeof dbState.db, query: ReturnType<NonNullable<typeof dbState.db>['useQuery']>)}However, this is acceptable for sandbox/example code where brevity is preferred.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@client/sandbox/sveltekit/src/routes/`+page.svelte around lines 51 - 70, The snippet parameters in todoApp(db: any, query: any) should be annotated with actual types instead of any: replace the any on db with your DB client/interface type (e.g., DatabaseClient or whatever type represents the sandbox DB) and replace query:any with a typed query/result shape (e.g., QueryResult<{ todos: Todo[] }> or similar), add/import a Todo interface and the query result type, and update any usages in todoForm, todoList, and actionBar if needed to match those types so the snippet signature and its referenced helpers are type-safe.client/packages/svelte/src/lib/InstantSvelteDatabase.svelte.ts (1)
43-51: Minor: Simplify boolean coercion.
!Boolean(result)can be simplified to!resultsince the truthiness check is equivalent.♻️ Suggested simplification
function stateForResult(result: any) { return { - isLoading: !Boolean(result), + isLoading: !result, data: undefined, pageInfo: undefined, error: undefined, ...(result ? result : {}), }; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@client/packages/svelte/src/lib/InstantSvelteDatabase.svelte.ts` around lines 43 - 51, In stateForResult, simplify the truthiness check by replacing the explicit Boolean coercion; change the isLoading assignment from using !Boolean(result) to using !result so the function reads isLoading: !result while leaving the rest of stateForResult (data, pageInfo, error, and spread of result) unchanged.client/packages/svelte/src/lib/InstantSvelteRoom.svelte.ts (1)
185-196: Unconventional dependency tracking pattern.The
depsparameter and its handling (lines 186-193) is unusual. Ifdepscontains functions, they're called for side effects; otherwiseJSON.stringify(data)is used to track changes. This differs from React's dependency array pattern and may confuse users.Consider documenting this behavior more explicitly, or using a more conventional reactive pattern where the caller passes reactive getters.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@client/packages/svelte/src/lib/InstantSvelteRoom.svelte.ts` around lines 185 - 196, The current $effect dependency tracking in InstantSvelteRoom.svelte.ts uses an unconventional pattern: calling functions in deps or falling back to JSON.stringify(data) before publishing via room.core._reactor.publishPresence; update this to a clearer reactive-getter contract: require callers to pass deps as an array of zero-arg getter functions (e.g., DepGetter[]) and inside $effect iterate deps calling each getter to read reactive values (no silent JSON.stringify fallback), and if the caller intends simple value tracking allow an explicit helper like createValueGetter(data) or a documented whenEmpty option; update the InstantSvelteRoom API docs and the $effect block to reference deps, data, and room.core._reactor.publishPresence so callers know to pass getters rather than raw values or rely on JSON.stringify.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@client/packages/svelte/src/lib/Cursors.svelte`:
- Around line 84-86: The fullPresence derivation uses
room.core._reactor.getPresence(...) which returns a synchronous snapshot and can
become stale; update the $derived for fullPresence to depend on the reactive
cursorsPresence.peers (or the existing peers derivation) so it recomputes when
presence changes. Concretely, change the derived call that creates fullPresence
(referencing fullPresence and room.core._reactor.getPresence) to use
cursorsPresence.peers (or peers) as an input dependency and call getPresence
inside the derived callback so fullPresence updates whenever
cursorsPresence.peers changes.
In `@client/www/pages/docs/start-svelte.md`:
- Around line 40-43: The import for the schema is using the wrong relative path;
update the import that assigns to the symbol "schema" (and the same import line
that brings in "init") so it points to the project-root schema by changing the
path from "../instant.schema" to "../../instant.schema" (this fixes resolution
from src/lib/db.ts to the root instant.schema).
In `@examples/sveltekit/src/app.css`:
- Around line 3-6: The Biome CSS parser needs tailwind directive parsing enabled
for the `@apply` usage in app.css; update the Biome config by adding
"tailwindDirectives": true under the css.parser section (so the parser will
accept `@apply` in :root/@layer base) or alternatively remove the `@apply` in the
:root block in app.css and replace it with an equivalent CSS
custom-property/fallback to avoid requiring the Biome change.
---
Nitpick comments:
In `@client/packages/svelte/src/lib/InstantSvelteDatabase.svelte.ts`:
- Around line 43-51: In stateForResult, simplify the truthiness check by
replacing the explicit Boolean coercion; change the isLoading assignment from
using !Boolean(result) to using !result so the function reads isLoading: !result
while leaving the rest of stateForResult (data, pageInfo, error, and spread of
result) unchanged.
In `@client/packages/svelte/src/lib/InstantSvelteRoom.svelte.ts`:
- Around line 185-196: The current $effect dependency tracking in
InstantSvelteRoom.svelte.ts uses an unconventional pattern: calling functions in
deps or falling back to JSON.stringify(data) before publishing via
room.core._reactor.publishPresence; update this to a clearer reactive-getter
contract: require callers to pass deps as an array of zero-arg getter functions
(e.g., DepGetter[]) and inside $effect iterate deps calling each getter to read
reactive values (no silent JSON.stringify fallback), and if the caller intends
simple value tracking allow an explicit helper like createValueGetter(data) or a
documented whenEmpty option; update the InstantSvelteRoom API docs and the
$effect block to reference deps, data, and room.core._reactor.publishPresence so
callers know to pass getters rather than raw values or rely on JSON.stringify.
In `@client/sandbox/sveltekit/src/routes/`+page.svelte:
- Around line 14-21: The reactive query is being created inside the {:else}
block via {`@const` query = db.useQuery(...)} which causes the subscription to be
torn down and recreated whenever dbState changes; move the db.useQuery call out
of the conditional so the query is created at the component scope whenever db is
present (e.g., derive a top-level {`@const` db = dbState.db} and then create
{`@const` query = db && db.useQuery({ todos: {} })} or equivalent), keeping the
conditional only for rendering {`@render` welcome()} and {`@render` todoApp(db,
query)}; update references to query and db in todoApp() to use the top-level
symbols so subscriptions remain stable.
- Around line 51-70: The snippet parameters in todoApp(db: any, query: any)
should be annotated with actual types instead of any: replace the any on db with
your DB client/interface type (e.g., DatabaseClient or whatever type represents
the sandbox DB) and replace query:any with a typed query/result shape (e.g.,
QueryResult<{ todos: Todo[] }> or similar), add/import a Todo interface and the
query result type, and update any usages in todoForm, todoList, and actionBar if
needed to match those types so the snippet signature and its referenced helpers
are type-safe.
In `@examples/sveltekit/src/instant.schema.ts`:
- Around line 16-20: The todos entity defines createdAt via i.number() but
doesn't mark it indexed; update the schema for the todos entity (the i.entity
with createdAt/done/text) to call .indexed() on the createdAt field
(i.number().indexed()) so InstantDB can filter/order by creation time; ensure
you modify the createdAt declaration inside the todos i.entity block
accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 8c850e7e-9eae-4c9b-9d0b-33105fc8f43e
⛔ Files ignored due to path filters (1)
client/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (49)
client/.prettierignoreclient/packages/cli/src/index.jsclient/packages/create-instant-app/scripts/copyExamples.tsclient/packages/create-instant-app/src/cli.tsclient/packages/create-instant-app/src/env.tsclient/packages/platform/__tests__/src/migrations.test.tsclient/packages/platform/src/migrations.tsclient/packages/svelte/src/lib/Cursors.svelteclient/packages/svelte/src/lib/InstantSvelteDatabase.svelte.tsclient/packages/svelte/src/lib/InstantSvelteRoom.svelte.tsclient/packages/svelte/src/lib/SignedIn.svelteclient/packages/svelte/src/lib/SignedOut.svelteclient/packages/svelte/src/lib/index.tsclient/packages/svelte/src/tests/InstantSvelteDatabase.svelte.test.tsclient/packages/version/src/version.tsclient/sandbox/sveltekit/.gitignoreclient/sandbox/sveltekit/README.mdclient/sandbox/sveltekit/package.jsonclient/sandbox/sveltekit/src/app.cssclient/sandbox/sveltekit/src/app.htmlclient/sandbox/sveltekit/src/lib/config.tsclient/sandbox/sveltekit/src/lib/db.svelte.tsclient/sandbox/sveltekit/src/routes/+layout.svelteclient/sandbox/sveltekit/src/routes/+page.svelteclient/sandbox/sveltekit/src/routes/+page.tsclient/sandbox/sveltekit/src/routes/auth/+page.svelteclient/sandbox/sveltekit/src/routes/auth/+page.tsclient/sandbox/sveltekit/src/routes/cursors/+page.svelteclient/sandbox/sveltekit/src/routes/cursors/+page.tsclient/sandbox/sveltekit/svelte.config.jsclient/sandbox/sveltekit/tsconfig.jsonclient/sandbox/sveltekit/vite.config.tsclient/www/components/docs/Fence.jsxclient/www/data/docsNavigation.jsclient/www/pages/docs/start-svelte.mdexamples/sveltekit/.gitignoreexamples/sveltekit/README.mdexamples/sveltekit/package.jsonexamples/sveltekit/src/app.cssexamples/sveltekit/src/app.htmlexamples/sveltekit/src/instant.perms.tsexamples/sveltekit/src/instant.schema.tsexamples/sveltekit/src/lib/db.tsexamples/sveltekit/src/routes/+layout.svelteexamples/sveltekit/src/routes/+page.svelteexamples/sveltekit/src/routes/+page.tsexamples/sveltekit/svelte.config.jsexamples/sveltekit/tsconfig.jsonexamples/sveltekit/vite.config.ts
✅ Files skipped from review due to trivial changes (4)
- examples/sveltekit/tsconfig.json
- examples/sveltekit/.gitignore
- client/sandbox/sveltekit/README.md
- examples/sveltekit/src/app.html
🚧 Files skipped from review as they are similar to previous changes (1)
- client/www/data/docsNavigation.js
Comment on lines
+84
to
+86
| const fullPresence = $derived( | ||
| room.core._reactor.getPresence(room.type, room.id), | ||
| ); |
Contributor
There was a problem hiding this comment.
fullPresence may contain stale data.
The $derived block calls room.core._reactor.getPresence() which is a synchronous snapshot, not a reactive subscription. This value won't update automatically when presence changes, potentially causing renderCursor to receive stale peer data. The peers derivation on line 83 works because cursorsPresence.peers is already reactive from the usePresence subscription.
Consider triggering the derivation when cursorsPresence.peers changes:
🔧 Proposed fix
const peers = $derived(Object.entries(cursorsPresence.peers));
const fullPresence = $derived(
+ // Re-derive when peers change
+ (cursorsPresence.peers,
room.core._reactor.getPresence(room.type, room.id),
+ )
);Or more explicitly:
const peers = $derived(Object.entries(cursorsPresence.peers));
- const fullPresence = $derived(
- room.core._reactor.getPresence(room.type, room.id),
- );
+ const fullPresence = $derived.by(() => {
+ // Track peers to re-derive when presence updates
+ void cursorsPresence.peers;
+ return room.core._reactor.getPresence(room.type, room.id);
+ });📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const fullPresence = $derived( | |
| room.core._reactor.getPresence(room.type, room.id), | |
| ); | |
| const peers = $derived(Object.entries(cursorsPresence.peers)); | |
| const fullPresence = $derived.by(() => { | |
| // Track peers to re-derive when presence updates | |
| void cursorsPresence.peers; | |
| return room.core._reactor.getPresence(room.type, room.id); | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@client/packages/svelte/src/lib/Cursors.svelte` around lines 84 - 86, The
fullPresence derivation uses room.core._reactor.getPresence(...) which returns a
synchronous snapshot and can become stale; update the $derived for fullPresence
to depend on the reactive cursorsPresence.peers (or the existing peers
derivation) so it recomputes when presence changes. Concretely, change the
derived call that creates fullPresence (referencing fullPresence and
room.core._reactor.getPresence) to use cursorsPresence.peers (or peers) as an
input dependency and call getPresence inside the derived callback so
fullPresence updates whenever cursorsPresence.peers changes.
Comment on lines
+40
to
+43
| ```ts | ||
| import { init } from '@instantdb/svelte'; | ||
| import schema from '../instant.schema'; | ||
|
|
Contributor
There was a problem hiding this comment.
Incorrect schema import path.
The file is at src/lib/db.ts, but the import path ../instant.schema would resolve to src/instant.schema. The schema file is typically at the project root, so the path should be ../../instant.schema.
🔧 Proposed fix
import { init } from '@instantdb/svelte';
-import schema from '../instant.schema';
+import schema from '../../instant.schema';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@client/www/pages/docs/start-svelte.md` around lines 40 - 43, The import for
the schema is using the wrong relative path; update the import that assigns to
the symbol "schema" (and the same import line that brings in "init") so it
points to the project-root schema by changing the path from "../instant.schema"
to "../../instant.schema" (this fixes resolution from src/lib/db.ts to the root
instant.schema).
Comment on lines
+3
to
+6
| @layer base { | ||
| :root { | ||
| @apply font-sans; | ||
| } |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Locate Biome config files
fd --hidden --glob 'biome*.json*' -t f
# 2) Inspect CSS/Tailwind parsing and include/exclude rules
fd --hidden --glob 'biome*.json*' -t f | xargs -I{} rg -n -C3 'tailwind|css|overrides|files|include|exclude|ignore' {}
# 3) Check existing repo convention for Tailwind directives in CSS
rg -n -C2 '@import "tailwindcss"|@layer|@apply' --type=cssRepository: instantdb/instant
Length of output: 5233
🏁 Script executed:
# Get complete biome.json file
cat -n biome.json | head -100Repository: instantdb/instant
Length of output: 2346
🏁 Script executed:
# Check if there are any CSS-specific overrides or ignore patterns for examples/sveltekit
rg -n 'sveltekit|examples' biome.json -A2 -B2Repository: instantdb/instant
Length of output: 43
🏁 Script executed:
# Check for biomeignore files
find . -name '.biomeignore' -o -name 'biomeignore*'
# Check biome.json for files/ignore patterns
rg -n 'files|ignore|exclude' biome.json
# Check if there's any VSCode settings or other config that might disable Tailwind
find . -name '.vscode' -type d -o -name 'tailwind.config.*' -type f | head -20Repository: instantdb/instant
Length of output: 279
🏁 Script executed:
# Look for any CSS-related linting overrides in the examples/sveltekit directory
cat examples/sveltekit/biome.json 2>/dev/null || echo "No local biome.json in examples/sveltekit"
# Check if there's a package.json with Biome config override
grep -A5 -B5 'biome' examples/sveltekit/package.json 2>/dev/null || echo "No biome config in package.json"Repository: instantdb/instant
Length of output: 134
🏁 Script executed:
# Check for biome-ignore comments in CSS files that use `@apply`
rg -n 'biome-ignore|@apply' --type=css -B1 -A1 | head -50
# Check if there are any known issues or comments about `@apply` in the sveltekit example
cat examples/sveltekit/src/app.cssRepository: instantdb/instant
Length of output: 1815
🌐 Web query:
Biome CSS Tailwind @apply support version 2.4.6
💡 Result:
Biome v2.4.6 supports parsing Tailwind CSS directives including @apply, but it’s opt-in.
Enable it either via config:
{
"css": {
"parser": {
"tailwindDirectives": true
}
}
}This option explicitly “enables parsing of Tailwind specific syntax, like @theme, @utility and @apply” and defaults to false. [1]
Or via CLI (available since Biome 2.3.x, and works in 2.4.6):
biome check --css-parse-tailwind-directives=true file.css
biome format --css-parse-tailwind-directives=true file.css
biome lint --css-parse-tailwind-directives=true file.css
biome ci --css-parse-tailwind-directives=true file.css
``` [2]
**Sources:** [1] Biome configuration reference, [2] Biome 2.3.0 changelog (CLI flag).
---
</details>
**Enable Tailwind directive parsing in Biome configuration.**
The `@apply` directive at line 5 requires explicit opt-in in Biome 2.4.6. Add `"tailwindDirectives": true` to the CSS parser configuration in `biome.json`:
```json
{
"css": {
"parser": {
"tailwindDirectives": true
}
}
}Alternatively, use the CSS custom property fallback to avoid the dependency on Biome configuration:
Optional code-side fallback (avoid @apply)
`@layer` base {
:root {
- `@apply` font-sans;
+ font-family: var(--font-sans);
}🧰 Tools
🪛 Biome (2.4.6)
[error] 5-5: Tailwind-specific syntax is disabled.
(parse)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/sveltekit/src/app.css` around lines 3 - 6, The Biome CSS parser
needs tailwind directive parsing enabled for the `@apply` usage in app.css; update
the Biome config by adding "tailwindDirectives": true under the css.parser
section (so the parser will accept `@apply` in :root/@layer base) or alternatively
remove the `@apply` in the :root block in app.css and replace it with an
equivalent CSS custom-property/fallback to avoid requiring the Biome change.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@client/www/pages/docs/start-svelte.md`:
- Around line 18-33: The docs omit changing into the newly created app and
starting the dev server: after the `npx sv create my-app` step add an
instruction to run `cd my-app` so subsequent `npm i `@instantdb/svelte`` and `npx
instant-cli init` run in the app folder, then add a step to start SvelteKit
(e.g., `npm run dev`) before directing users to the app; also update the URL to
include the scheme (`http://localhost:5173`). Reference the existing command
strings (`npx sv create my-app`, `npm i `@instantdb/svelte``, `npx instant-cli
init`, `npm run dev`) when making the edits.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 95712e1a-ee0d-4846-80ae-9eb33e58943c
📒 Files selected for processing (4)
client/packages/version/src/version.tsclient/www/components/docs/Fence.jsxclient/www/data/docsNavigation.jsclient/www/pages/docs/start-svelte.md
Comment on lines
+18
to
+33
| Create a blank SvelteKit app: | ||
|
|
||
| ```shell | ||
| npx sv create my-app | ||
| ``` | ||
|
|
||
| Add the InstantDB Svelte Library: | ||
|
|
||
| ```shell | ||
| npm i @instantdb/svelte | ||
| ``` | ||
|
|
||
| Use `instant-cli` to set up a new Instant project. This will prompt you to log in if you haven't already. It will then create a schema file, permissions file, and update your `.env` file. | ||
|
|
||
| ```shell | ||
| npx instant-cli init |
Contributor
There was a problem hiding this comment.
Manual setup flow is missing two required steps.
After npx sv create my-app, the next commands still run in the caller's current directory, and the guide later sends readers to localhost:5173 without ever starting SvelteKit. Following the steps as written can install/init Instant in the wrong folder or leave no app listening on that port.
💡 Suggested doc patch
```shell
npx sv create my-app
+cd my-app
```
@@
+Start the dev server:
+
+```shell
+npm run dev
+```
+
-Go to `localhost:5173`, and huzzah 🎉 You've got a fully functional todo list running!
+Go to `http://localhost:5173`, and huzzah 🎉 You've got a fully functional todo list running!Also applies to: 194-194
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@client/www/pages/docs/start-svelte.md` around lines 18 - 33, The docs omit
changing into the newly created app and starting the dev server: after the `npx
sv create my-app` step add an instruction to run `cd my-app` so subsequent `npm
i `@instantdb/svelte`` and `npx instant-cli init` run in the app folder, then add
a step to start SvelteKit (e.g., `npm run dev`) before directing users to the
app; also update the URL to include the scheme (`http://localhost:5173`).
Reference the existing command strings (`npx sv create my-app`, `npm i
`@instantdb/svelte``, `npx instant-cli init`, `npm run dev`) when making the
edits.
This was referenced Mar 16, 2026
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
2 participants
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.
What it says on the tin! Specifically
/docs/start-svelte