This plugin is not working with latest version of framework7. Neither in core nor in react.

[valnub]

This plugin is not working with latest version of framework7. Neither in core nor in react.

[valnub]

Thanks for reporting! I've added support for latest Framework7 version in the latest release of 3.0.9. Can you check if this fixes the problem for you? https://www.npmjs.com/package/f7-welcomescreen

[amankch]

Sure, Let me check.

[amankch]

Thanks for reporting! I've added support for latest Framework7 version in the latest release of 3.0.9. Can you check if this fixes the problem for you? https://www.npmjs.com/package/f7-welcomescreen

No, it's not working. In both Framework7 core and react versions. I tried as you describe here:- https://www.npmjs.com/package/f7-welcomescreen

[valnub]

Thanks, can you provide some sample code (or your project code) so I can reproduce the problem?

[amankch]

Thanks, can you provide some sample code (or your project code) so I can reproduce the problem?

sure

[amankch]

Thanks, can you provide some sample code (or your project code) so I can reproduce the problem?

Framework7 Core version:- Main file: app.js

import $ from 'dom7';
import Framework7 from './framework7-custom.js';

// Import F7 Styles
import '../css/framework7-custom.less';

// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.less';

// import Template7 from 'template7';
import F7WelcomescreenPlugin from 'f7-welcomescreen';

// Import Routes
import routes from './routes.js';
// Import Store
import store from './store.js';

// Import main app component
import App from '../app.f7';

// Framework7.use(Template7);

var welcomescreen_slides = [
{
id: 'slide0',
title: 'Slide 0', // optional
picture: '

♥

',
text: 'Welcome to this tutorial. In the next steps we will guide you through a manual that will teach you how to use this app.'
},
{
id: 'slide1',
title: 'Slide 1', // optional
picture: '

✲

',
text: 'This is slide 2'
},
{
id: 'slide2',
title: 'Slide 2', // optional
picture: '

♫

',
text: 'This is slide 3'
},
{
id: 'slide3',
//title: 'NO TITLE',
picture: '

☆

',
text: 'Thanks for reading! Enjoy this app.

End Tutorial'
}
];

Framework7.use(F7WelcomescreenPlugin);

var options = {
'bgcolor': '#0da6ec',
'fontcolor': '#fff'
}

var app = new Framework7({
name: 'f7corecli', // App name
theme: 'auto', // Automatic theme detection
el: '#app', // App root element
component: App, // App main component

// App store
store: store,
// App routes
routes: routes,
welcomescreen: { // Setup welcomescreen plugin
slides: welcomescreen_slides,
options: options,
},
});

//FOR Testing Purpose, but F7-welcomescreen is not working here also.
setTimeout(() => {
console.log(Fired after 2.5 Seconds.);
app.dialog.alert(Test, F7CLI, () => {
console.log(Callback fired.);
});
app.welcomescreen.open();
}, 2500);

[amankch]

package.json file for Framework7 Core version:-

{
"name": "f7corecli",
"private": true,
"version": "1.0.0",
"description": "f7corecli",
"repository": "",
"license": "UNLICENSED",
"scripts": {
"start": "npm run dev",
"dev": "cross-env NODE_ENV=development vite",
"build": "cross-env NODE_ENV=production vite build",
"postinstall": "cpy ./node_modules/framework7-icons/fonts/. ./src/fonts/ && cpy ./node_modules/material-icons/iconfont/. ./src/fonts/"
},
"browserslist": [
"Android >= 7",
"IOS >= 11",
"Safari >= 11",
"Chrome >= 49",
"Firefox >= 31",
"Samsung >= 5"
],
"dependencies": {
"dom7": "^3.0.0",
"f7-welcomescreen": "^3.0.9",
"framework7": "^6.2.0",
"framework7-icons": "^5.0.3",
"material-icons": "^1.1.1",
"skeleton-elements": "^3.4.0",
"swiper": "^6.8.1",
"template7": "^1.4.2"
},
"devDependencies": {
"cpy-cli": "^3.1.1",
"cross-env": "^7.0.3",
"less": "^4.1.1",
"postcss-preset-env": "^6.7.0",
"rollup-plugin-framework7": "^1.1.0",
"vite": "^2.4.4"
}
}

[amankch]

Bundler is vite

[amankch]

Both projects, the core version and react version, are created with the help of framework7-cli. It has nothing special except f7-welcomescreen. Not a single outside package.

[valnub]

Hm, did you add this to your css?

Vite

@import 'f7-welcomescreen/styles.css';

Webpack

@import '~f7-welcomescreen/styles.css';

I have also attached a minimal example project using F7 Core version. It's based on plain css and Vite: Download example project

To use it just:

• Download
• Unzip
• $ cd wtest
• $ yarn
• $ yarn start

I only changed file src/css/app.css and src/js/app.js. Hope this helps 🙂

[amankch]

Sure. Sorry for the delayed response. Let me check.

[amankch]

It's working fine now.

[amankch]

Hm, did you add this to your css?

Vite

@import 'f7-welcomescreen/styles.css';

Webpack

@import '~f7-welcomescreen/styles.css';

I have also attached a minimal example project using F7 Core version. It's based on plain css and Vite: Download example project

To use it just:

• Download
• Unzip
• $ cd wtest
• $ yarn
• $ yarn start

I only changed file src/css/app.css and src/js/app.js. Hope this helps 🙂

Thank you