Support for the Svelte 5 env. (#701)

Author: shimkiv

CHANGELOG.md

@@ -17,6 +17,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## Unreleased
 
+## [0.21.8](https://github.com/o1-labs/zkapp-cli/compare/0.21.7...0.21.8) - 2024-10-23
+
+### Changed
+
+- Svelte project scaffold now uses latest `sv create` and sources migrated to `Svelte 5`. [#701](https://github.com/o1-labs/zkapp-cli/pull/701)
+
 ## [0.21.7](https://github.com/o1-labs/zkapp-cli/compare/0.21.6...0.21.7) - 2024-10-01
 
 ### Changed

package-lock.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": {

package.json

@@ -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/project.js

@@ -381,11 +381,10 @@ describe('project.js', () => {
 
       expect(shell.mkdir).toHaveBeenCalledWith('-p', 'test-project');
       expect(shell.cd).toHaveBeenCalledWith('test-project');
-      expect(spawnSync).toHaveBeenCalledWith(
-        'npm',
-        ['create', 'svelte@latest', '-y', 'ui'],
-        { stdio: 'inherit', shell: true }
-      );
+      expect(spawnSync).toHaveBeenCalledWith('npx', ['sv', 'create', 'ui'], {
+        stdio: 'inherit',
+        shell: true,
+      });
       expect(shell.cd).toHaveBeenCalledWith('contracts');
       checkUiProjectSetup(shell.exec.mock.calls);
       checkIfProjectSetupSuccessful();
@@ -678,11 +677,10 @@ describe('project.js', () => {
 
       scaffoldSvelte();
 
-      expect(spawnSync).toHaveBeenCalledWith(
-        'npm',
-        ['create', 'svelte@latest', '-y', 'ui'],
-        { stdio: 'inherit', shell: true }
-      );
+      expect(spawnSync).toHaveBeenCalledWith('npx', ['sv', 'create', 'ui'], {
+        stdio: 'inherit',
+        shell: true,
+      });
       expect(fs.writeFileSync).toHaveBeenCalled();
     });
   });

src/lib/project.test.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/customLayoutSvelte.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>
 `;

src/lib/ui/svelte/gradientBackground.js

@@ -47,9 +47,9 @@ export async function zkProject(
     case 'svelte': {
       interactiveDialog = {
         ...interactiveDialog,
-        'Which Svelte app template?': ['arrowDown', 'enter'],
-        'Add type checking with TypeScript?': ['arrowDown', 'enter'],
-        'Select additional options (use arrow keys/space bar)': [
+        'Which template would you like?': ['enter'],
+        'Add type checking with Typescript?': ['enter'],
+        'What would you like to add to your project?': [
           'space',
           'arrowDown',
           'space',
@@ -59,6 +59,9 @@ export async function zkProject(
           'space',
           'enter',
         ],
+        'Which package manager do you want to install dependencies with?': [
+          'enter',
+        ],
       };
       break;
     }