Fix Svelte V5 new app fails to run and componentization of homeview when using Core without Vite

create/templates/core/copy-assets.js

@@ -10,6 +10,7 @@ module.exports = (options) => {
   const { template, bundler, type } = options;
   const toCopy = [];
   const srcFolder = bundler ? 'src' : 'www';
+  const fileExtension = bundler ? 'f7' : 'html';
 
   // Copy Pages
   const pages = [
@@ -21,35 +22,30 @@ module.exports = (options) => {
   pages.forEach((p) => {
     const src = path.resolve(__dirname, 'pages', `${p}.html`);
     const dest = path.resolve(cwd, srcFolder, 'pages');
-    if (bundler !== 'vite') {
-      toCopy.push({
-        from: src,
-        to: path.resolve(dest, `${p}.html`),
-      });
-    } else {
-      let content = fse.readFileSync(src);
-      if (content.trim().indexOf('<template') !== 0) {
-        content = `<template>\n${content.trim()}\n</template>\n<script>\nexport default () => {\n  return $render;\n};\n</script>`;
-      }
-      toCopy.push({
-        content,
-        to: path.resolve(dest, `${p}.f7`),
-      });
+
+    let content = fse.readFileSync(src);
+    if (content.trim().indexOf('<template') !== 0) {
+      content = `<template>\n${content.trim()}\n</template>\n<script>\nexport default function (props, ctx) {\n  return $render;\n};\n</script>`;
     }
+    toCopy.push({
+      content,
+      to: path.resolve(dest, `${p}.${fileExtension}`),
+    });
   });
   toCopy.push({
     content: generateStore(options),
     to: path.resolve(cwd, srcFolder, 'js', 'store.js'),
   });
 
+  toCopy.push({
+    content: `<template>\n${indent(
+      2,
+      generateHomePage(options).trim(),
+    )}\n</template>\n<script>\nexport default function (props, ctx) {\n  return $render;\n}\n</script>`,
+    to: path.resolve(cwd, srcFolder, 'pages', `home.${fileExtension}`),
+  });
+
   if (bundler) {
-    toCopy.push({
-      content: `<template>\n${indent(
-        2,
-        generateHomePage(options).trim(),
-      )}\n</template>\n<script>\nexport default () => {\n  return $render;\n}\n</script>`,
-      to: path.resolve(cwd, srcFolder, 'pages', 'home.f7'),
-    });
     toCopy.push({
       content: generateRoot(options),
       to: path.resolve(cwd, srcFolder, 'app.f7'),

create/templates/core/generate-root.js

@@ -92,13 +92,7 @@ module.exports = (options) => {
   if (template === 'single-view' || template === 'split-view' || template === 'blank') {
     views = indent(4, `
       <!-- Your main view, should have "view-main" class -->
-      ${templateIf(bundler === 'vite', () => `
       <div class="view view-main view-init safe-areas" data-url="/"></div>
-      `, () => `
-      <div class="view view-main view-init safe-areas">
-        ${indent(8, generateHomePage(options)).trim()}
-      </div>
-      `)}
     `);
   }
   // prettier-ignore
@@ -130,15 +124,9 @@ module.exports = (options) => {
       </div>
 
       <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
-      ${templateIf(bundler === 'vite', () => `
       <div id="view-home" class="view view-main view-init tab tab-active" data-url="/">
         <!-- Home page will be loaded here dynamically from / route -->
       </div>
-      `, () => `
-      <div id="view-home" class="view view-main view-init tab tab-active">
-        ${indent(8, generateHomePage(options)).trim()}
-      </div>
-      `)}
 
       <!-- Catalog View -->
       <div id="view-catalog" class="view view-init tab" data-name="catalog" data-url="/catalog/">

create/templates/core/generate-routes.js

@@ -23,7 +23,7 @@ module.exports = (options) => {
         var routes = [
           {
             path: '/',
-            url: './index.html',
+            componentUrl: './pages/home.html',
           },
         ];
       `);
@@ -147,7 +147,7 @@ module.exports = (options) => {
       var routes = [
         {
           path: '/',
-          url: './index.html',
+          componentUrl: './pages/home.html',
         },
         {
           path: '/about/',

create/templates/svelte/generate-scripts.js

@@ -12,6 +12,7 @@ module.exports = (options) => {
   let scripts = '';
 
   scripts += indent(0, `
+    import { mount } from 'svelte';
     // Import Framework7
     import Framework7 from '${customBuild ? './framework7-custom.js' : 'framework7/lite-bundle'}';
 
@@ -38,9 +39,11 @@ module.exports = (options) => {
     Framework7.use(Framework7Svelte)
 
     // Mount Svelte App
-    const app = new App({
+    const app = mount(App, {
       target: document.getElementById('app'),
     });
+
+    export default app;
   `);
 
   return scripts.trim();