Framework7 Integration about solid

[ryansolid]

Thanks for bringing my attention to this library. While I've looked into Native Script (on the native side) and spent a lot of time on PWA (on the browser API side), I haven't really looked at Cordova frameworks recently. On the surface, I don't see any issues here. From what I can tell Framework 7 is built on top of CSS classes, structured HTML, and jQuery-esque JS "components" which are driven off selectors and maybe direct refs (the latter probably being preferable in our case).

That in itself makes it compatible as all one would need to do is get a ref to the html element and then pass it into the "component" create method. Using one of their Calendar "component" examples, something like:

function CalenderExample() {
  var inputRef, calendarWidget;

  // it's possible this needs to be setTimeout depending on how the library works
  afterEffects(() => {
    calendarWidget = app.calendar.create({
      inputEl: inputRef,
      openIn: 'customModal',
      header: true,
      footer: true,
      dateFormat: 'MM dd yyyy',
    });
  });

  onCleanup(() => calendarWidget && app.calendar.destroy(calendarWidget));

  return (
    <div class="item-content item-input">
      <div class="item-inner">
        <div class="item-input-wrap">
          <input type="text" placeholder="Select date" readonly="readonly" ref={inputRef} />
        </div>
      </div>
    </div>
  );
}

Of course, to get the sophistication of their Vue or React libraries would require a lot of wrapping of components. A lot of mapping props to inner "component" updates. Writing a lot of effects that update on prop changes etc. My only recommendation there since effects will run immediately (before the children are created) is to reference the dependency (ie the prop that is being accessed) at the top of the effect, and then leave early if the widget isn't defined. As long as you initialize with the current props the update cycle should work seamlessly. It definitely takes some doing to wrap a Component library but in itself, it should be fairly straightforward.

I'm unclear if there is some sort of build step at the end and how it plays into it. But assuming you can find a place to run Babel in the middle somewhere to use either the Babel Solid preset or Babel JSX plugin this should produce compatible JavaScript.

Hopefully this answers your question.

[quitoman]

Thank you Ryan for your prompt and carefully documented answer. I will enjoy bridging Solid with F7, using your approach.

Regards,

Quito

[ryansolid]

No problem. If you hit any issues let me know. There are always some low level details in these sort of things so if I can help out. And hey if you do ever get around to wrapping some of those components, and have the interest of open sourcing what you do, I imagine other people would be interested.

[trusktr]

ref={inputRef}

That's interesting. So that special case compiles to something like inputRef = theELement. It's nice! Just gotta throw aside the fact that it looks like passing a reference (in which case passing undefined wouldn't make sense).

[ryansolid]

Yeah, incidentally forwardRef I developed for Components to forward out their refs actually works like function refs on HTML Elements (it's only ref that has special behaviour that differs between intrinsic and Component elements). So you have both mechanisms at your disposal if so desired.
forwardRef={ ref => inputRef = ref }

This is the more helpful form for packaging up directive like behaviour.

[trusktr]

A bit late, but instead the above example, wouldn't this be better?

function CalenderExample() {
  var inputRef, calendarWidget;

  const div = (
    <div class="item-content item-input">
      <div class="item-inner">
        <div class="item-input-wrap">
          <input type="text" placeholder="Select date" readonly="readonly" ref={inputRef} />
        </div>
      </div>
    </div>
  )

  // Don't need afterEffects here, just put this logic after creating the elements.
  calendarWidget = app.calendar.create({
    inputEl: inputRef,
    openIn: 'customModal',
    header: true,
    footer: true,
    dateFormat: 'MM dd yyyy',
  });

  onCleanup(() => calendarWidget && app.calendar.destroy(calendarWidget));

  return div;
}

[subhasishdas159]

Hello I'm new to both F7 and solid js. I am looking for a straight forward way/template with work with it. I can't find any. I think it'd be really amazing to work with F7 with solid js.