chore: new svelte

Author: nolimits4web

kitchen-sink/svelte/src/app.js

@@ -1,3 +1,4 @@
+import { mount } from 'svelte';
 import Framework7 from 'framework7/lite/bundle';
 import Framework7Svelte from 'framework7-svelte';
 import App from './app.svelte';
@@ -24,8 +25,8 @@ if (document.location.href.includes('example-preview')) {
 Framework7.use(Framework7Svelte);
 
 // Init Svelte App
-const app = new App({
-  target: document.getElementById('app'),
+const app = mount(App, {
+  target: document.querySelector('#app'),
 });
 
 export default app;

kitchen-sink/svelte/vite.config.js

@@ -5,7 +5,7 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 const buildFolder = process.env.NODE_ENV === 'production' ? 'packages' : 'build';
 
 export default {
-  plugins: [svelte({ onwarn() {} })],
+  plugins: [svelte({ extensions: ['.svelte'], onwarn() {} })],
   root: './',
   base: '',
   publicDir: path.resolve(__dirname, 'public'),
@@ -28,7 +28,10 @@ export default {
         __dirname,
         `../../${buildFolder}/core/framework7-lite.esm.js`,
       ),
-      'framework7-svelte': path.resolve(__dirname, `../../${buildFolder}/svelte`),
+      'framework7-svelte': path.resolve(
+        __dirname,
+        `../../${buildFolder}/svelte/framework7-svelte.js`,
+      ),
     },
   },
 };

src/svelte/shared/mixins.js

@@ -1,6 +1,6 @@
 import { isStringProp } from './utils.js';
 
-export function colorClasses(props) {
+export function colorClasses(props = {}) {
   const { color, textColor, bgColor, borderColor, rippleColor, dark } = props;
 
   return {
@@ -13,7 +13,7 @@ export function colorClasses(props) {
   };
 }
 
-export function routerAttrs(props) {
+export function routerAttrs(props = {}) {
   const {
     force,
     reloadCurrent,
@@ -52,7 +52,7 @@ export function routerAttrs(props) {
     'data-open-in': isStringProp(openIn) ? openIn : undefined,
   };
 }
-export function routerClasses(props) {
+export function routerClasses(props = {}) {
   const { back, linkBack, external, preventRouter } = props;
 
   return {
@@ -62,7 +62,7 @@ export function routerClasses(props) {
   };
 }
 
-export function actionsAttrs(props) {
+export function actionsAttrs(props = {}) {
   const {
     searchbarEnable,
     searchbarDisable,
@@ -129,7 +129,7 @@ export function actionsAttrs(props) {
       (isStringProp(cardOpen) && cardOpen) || (isStringProp(cardClose) && cardClose) || undefined,
   };
 }
-export function actionsClasses(props) {
+export function actionsClasses(props = {}) {
   const {
     searchbarEnable,
     searchbarDisable,

src/svelte/shared/use-icon.js

@@ -1,4 +1,4 @@
-export const useIcon = (props = {}) => {
+export const useIcon = (restProps = {}) => {
   const {
     icon,
     iconMaterial,
@@ -10,7 +10,7 @@ export const useIcon = (props = {}) => {
     iconBadge,
     badgeColor,
     iconBadgeColor,
-  } = props;
+  } = restProps;
   if (icon || iconMaterial || iconF7 || iconMd || iconIos) {
     return {
       props: {

src/svelte/shared/use-tab.js

@@ -2,14 +2,14 @@
 import { onMount, onDestroy } from 'svelte';
 import { f7, f7ready } from './f7.js';
 
-export const useTab = (getEl, emit) => {
+export const useTab = (getEl, restProps = {}) => {
   const onTabShow = (el) => {
     if (getEl() !== el) return;
-    emit('tabShow', [el]);
+    restProps.tabShow?.(el);
   };
   const onTabHide = (el) => {
     if (getEl() !== el) return;
-    emit('tabHide', [el]);
+    restProps.tabHide?.(el);
   };
   const attachEvents = () => {
     if (!getEl()) return;