[RFC]: How should we emulate methods?

Look at this code example from Solid.js

import { For } from "solid-js";
import { createMutable } from "solid-js/store";
import { css } from "solid-styled-components";
import RenderBlocks from "../../components/render-blocks.jsx";

function Columns(props) {
  const state = createMutable({
    getGutterSize() {
      return typeof props.space === "number" ? props.space || 0 : 20;
    },

    getColumns() {
      return props.columns || [];
    },

    getWidth(index) {
      const columns = this.getColumns();
      return columns[index]?.width || 100 / columns.length;
    },

    getColumnCssWidth(index) {
      const columns = this.getColumns();
      const gutterSize = this.getGutterSize();
      const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
    },

    maybeApplyForTablet(prop) {
      const _stackColumnsAt = props.stackColumnsAt || "tablet";

      return _stackColumnsAt === "tablet" ? prop : "inherit";
    },

    get columnsCssVars() {
      const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
      return {
        "--flex-dir": flexDir,
        "--flex-dir-tablet": this.maybeApplyForTablet(flexDir)
      };
    },

    get columnCssVars() {
      const width = "100%";
      const marginLeft = "0";
      return {
        "--column-width": width,
        "--column-margin-left": marginLeft,
        "--column-width-tablet": this.maybeApplyForTablet(width),
        "--column-margin-left-tablet": this.maybeApplyForTablet(marginLeft)
      };
    }

  });
  return <div class={"builder-columns " + css({
    display: "flex",
    alignItems: "stretch",
    lineHeight: "normal",
    "@media (max-width: 999px)": {
      flexDirection: "var(--flex-dir-tablet)"
    },
    "@media (max-width: 639px)": {
      flexDirection: "var(--flex-dir)"
    }
  })} style={state.columnsCssVars}>
      <For each={props.columns}>
        {(column, _index) => {
        const index = _index();

        return <div class={"builder-column " + css({
          flexGrow: "1",
          "@media (max-width: 999px)": {
            width: "var(--column-width-tablet) !important",
            marginLeft: "var(--column-margin-left-tablet) !important"
          },
          "@media (max-width: 639px)": {
            width: "var(--column-width) !important",
            marginLeft: "var(--column-margin-left) !important"
          }
        })} style={{
          width: state.getColumnCssWidth(index),
          "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
          ...state.columnCssVars
        }} key={index}>
              <RenderBlocks blocks={column.blocks}></RenderBlocks>
            </div>;
      }}
      </For>
    </div>;
}

export default Columns;

Notice that the author is choosing to store the business logic as methods on state object. How could we do something similar in Qwik?

[akaufmann]

First of all, a great job on this innovative framework to solve one of “the” problems of current websites.

+1 to make this in smart way possible:

export const MyComponent = component$(() => {
  const store = useStore({count:0});

  function increment() {
    store.count++;
  }

  return <button onClick$={() => increment()}>{store.count}</button>
});

This is a disadvantage of the very innovative Qwik, that you can’t use (normal) functions inside event callbacks, especially if you have to provide parameters. Either you have to put every logic in the cb function, which gets messy very fast with JSX if you have complex logic or you have to use QRLs that you have to invoke. I know why this is, but I’m looking forward to a smarter way to handle these scenarios w/o seeing -> Code(3): Only primitive and object literals can be serialized (foo: Foo)=>{\n ...\n }.

[mhevery]

Well no. Problem is that the callers would have to be translated form sync to async and that is no trivial. For example foo.id would now return a promise instead of value.

For now we are not blocked on this but it is something to think about.