SolidJS•14mo ago

Any help for using Framework7 with SolidJS?

Hey! I'm trying to make a Capacitor app using SolidJS and want to use Framework7 (https://framework7.io/docs) with it. I want to be able to use Solid components, routes, ... inside Framework7. I'm currently stuck with their router. I was able to render a Solid component using

/* @refresh reload */
import "framework7/css/bundle"
import { SplashScreen } from '@capacitor/splash-screen';
import { render } from 'solid-js/web';

import Framework7 from "framework7";
import { createSignal } from "solid-js";

const root = document.getElementById('root') as HTMLDivElement;
const MyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>Value is {a()}</p>
      <a class="link" href="/about">ABOUT</a>
    </div>
  )
}
const AboutMyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>ABOUT PAGE {a()}</p>
    </div>
  )
}

render(() => {
  SplashScreen.hide();

  const app = new Framework7({
    el: "#root",
    name: "Pawnote",
    
    panel: { swipe: true },
    
    routes: [
      { path: "/about/", content: AboutMyComponent() },
      {
        path: '(.*)',
        content: MyComponent(),
      }
    ]
  });

  app.views.create(root);
  
  return (
    <></>
  )
}, root);

/* @refresh reload */
import "framework7/css/bundle"
import { SplashScreen } from '@capacitor/splash-screen';
import { render } from 'solid-js/web';

import Framework7 from "framework7";
import { createSignal } from "solid-js";

const root = document.getElementById('root') as HTMLDivElement;
const MyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>Value is {a()}</p>
      <a class="link" href="/about">ABOUT</a>
    </div>
  )
}
const AboutMyComponent = () => {
  const [a, setA] = createSignal(1);

  setInterval(() => setA(prev => ++prev), 500);

  return (
    <div class="page">
      <p>ABOUT PAGE {a()}</p>
    </div>
  )
}

render(() => {
  SplashScreen.hide();

  const app = new Framework7({
    el: "#root",
    name: "Pawnote",
    
    panel: { swipe: true },
    
    routes: [
      { path: "/about/", content: AboutMyComponent() },
      {
        path: '(.*)',
        content: MyComponent(),
      }
    ]
  });

  app.views.create(root);
  
  return (
    <></>
  )
}, root);

But I don't really know how I can switch routes or even make them work 😂 I use the core library directly and there's not a lot of documentation when you're not using their components/routing solutions so I wonder if someone here could help me :p Thanks!

Framework7 Documentation

2 Replies

Vexcited•14mo ago

guess ill just rewrite their react implementation with solidjs 😂

Vexcited•14mo ago

lots of typing issues but hey it works

Gaming

Programming

Any help for using Framework7 with SolidJS?