Support for the Svelte 5 env (main codebase).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkapp-cli",
-  "version": "0.21.7",
+  "version": "0.21.8",
   "description": "CLI to create zkApps (zero-knowledge apps) for Mina Protocol",
   "homepage": "https://github.com/o1-labs/zkapp-cli/",
   "repository": {

src/lib/project.js

@@ -7,8 +7,8 @@ import url from 'node:url';
 import util from 'node:util';
 import ora from 'ora';
 import shell from 'shelljs';
-import customNextPage from '../lib/ui/next/customNextPage.js';
 import customNextLayout from '../lib/ui/next/customNextLayout.js';
+import customNextPage from '../lib/ui/next/customNextPage.js';
 import customNuxtIndex from '../lib/ui/nuxt/customNuxtIndex.js';
 import nuxtGradientBackground from '../lib/ui/nuxt/nuxtGradientBackground.js';
 import customLayoutSvelte from '../lib/ui/svelte/customLayoutSvelte.js';
@@ -175,8 +175,7 @@ async function project({ name, ui }) {
 }
 
 function scaffoldSvelte() {
-  // `-y` installs the latest version of create-svelte without prompting.
-  spawnSync('npm', ['create', 'svelte@latest', '-y', 'ui'], {
+  spawnSync('npx', ['sv', 'create', 'ui'], {
     stdio: 'inherit',
     shell: true,
   });

src/lib/ui/svelte/customLayoutSvelte.js

@@ -1,6 +1,13 @@
 export default `
 <script>
   import '../styles/globals.css'
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
 </script>
-<slot/>
+{@render children?.()}
 `;

src/lib/ui/svelte/gradientBackground.js

@@ -1,6 +1,13 @@
 export default `
 <script>
   import { onMount } from 'svelte'
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
   let ctx
   let pixels = []
   let canvas
@@ -131,9 +138,9 @@ export default `
 </style>
 
 <div class="background">
-  <canvas class="background-gradients" width="6" height="6" />
+  <canvas class="background-gradients" width="6" height="6"></canvas>
 </div>
 <div class="container">
-  <slot />
+  {@render children?.()}
 </div>
 `;