Did anyone get Storybook to work with Svelte and Framewok7?
Been trying for a couple of days and still lost
The other threads on similar topics seem outdated for Storybook version and possibly f7, and are for other JS flavors, and maybe cause it’s all still kinda new to me I couldn’t figure it out (linked in the end)
My status is rendering something basic on 2nd render only (which is still totally broken once adding the styles, it has display:none
)
1st run error
TypeError: Cannot read property 'create' of undefined
at EventsClass.<anonymous> (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:101644:66)
at EventsClass.onceHandler (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:125513:15)
at http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:125575:24
at Array.forEach (<anonymous>)
at http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:125574:18
at Array.forEach (<anonymous>)
at EventsClass.emit (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:125568:17)
at Framework7.<anonymous> (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:112593:16)
at http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:125575:24
at Array.forEach (<anonymous>)
3rd and further runs
TypeError: Cannot read property 'removeChild' of null
at detach (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:208477:21)
at Object.d (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:63516:81)
at destroy_component (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:209712:36)
at Object.d (http://localhost:6006/main.fb780c0aa7bef50dedef.bundle.js:3322:77)
at destroy_component (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:209712:36)
at F7wrapper.$destroy (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:209836:9)
at cleanUpPreviousStory (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:34827:21)
at StoryRenderer.render (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:34918:3)
at StoryRenderer._callee3$ (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:30191:29)
at tryCatch (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:200502:40)
styles are broken, if I add them it has display:none
I’ve made my wrapper f7wrapper.svelte
<App { ...f7params } >
<View>
<svelte:component this={child} {...props}/>
</View>
</App>
<script lang="ts">
export let child, props
// Framework7 Parameters
let f7params = {
id: 'io.framework7.something', // App bundle ID
name: 'something', // App name
theme: 'auto', // Automatic theme detection
// App routes
routes: {},
// Register service worker
serviceWorker: {
path: '/service-worker.js',
},
}
import App from './f7app'
import { View, Panel, Navbar, Block } from 'framework7-svelte'
</script>
and f7app.ts
let app = App
export default app
Framework7.use(Framework7Svelte)
import Framework7 from 'framework7';
import Framework7Svelte, { App } from 'framework7-svelte'
import f7 from 'framework7-svelte/cjs/shared/utils'
// Import Framework7 Styles
//import 'framework7/framework7-bundle.css'
// Import Icons and App Custom Styles
import '../../css/icons.css'
import '../../css/app.css'
p.s. my .storybook/webpack.config.js
const autoPreprocess = require('svelte-preprocess');
module.exports = ({ config, mode }) => {
const svelteLoader = config.module.rules.find(
r => r.loader && r.loader.includes('svelte-loader'),
);
svelteLoader.options.preprocess = autoPreprocess({
less: { includePaths: ['src', 'node_modules'] },
css: { includePaths: ['src', 'node_modules'] },
typescript: {
tsconfigFile: './tsconfig.json',
transpileOnly: true,
},
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
Related posts I mentioned
TIA for any help/direction