Dakotys Comments - Answer Overflow

Dakotys

•Created by absent on 10/25/2024 in #support

Restricting children to specific component types

Afaik TypeScript defaults to JSX.Element for components wrapped in < />. Unfortunately, this is an inherent limitation in how TypeScript handles JSX. https://www.typescriptlang.org/docs/handbook/jsx.html#the-jsx-result-type. So it is not possible to differentiate between <SpecialRow/> and other components like <Some/> or <div>. The best, you could do is enforce

    <SpecialTable>
      {SpecialRow()}
    </SpecialTable>

    <SpecialTable>
      {SpecialRow()}
    </SpecialTable>

but that wouldnt look great.

3 replies

SSolidJS

•Created by karolisk on 10/17/2024 in #support

Issues when using SolidJS with child web components

And then you will be forced to use attr:height and so on everywhere, you also have intellisense so you get suggestions for attr:position like 'right' and so, and you dont have to worry about static and dyn

7 replies

SSolidJS

•Created by karolisk on 10/17/2024 in #support

Issues when using SolidJS with child web components

The best solution is to force everything to be attr so we don't have to distinguish between dyn and static values. Change intristic.d.ts to

import { JSX as ModusJSX } from '@trimble-oss/modus-web-components';
import { JSX } from 'solid-js';

type ToKebabCase<S extends string> = S extends `${infer T}${infer U}`
  ? `${T extends Lowercase<T> ? '' : '-'}${Lowercase<T>}${ToKebabCase<U>}`
  : S;

// Utility to convert element attributes to "attr:kebab-case" format
type ConvertAttributes<T> = {
  [Key in keyof T as `attr:${ToKebabCase<string & Key>}`]: T[Key];
};

// Main type for ModusCustomElements
declare type ModusCustomElements = {
  [Element in keyof ModusJSX.IntrinsicElements]: ConvertAttributes<
    ModusJSX.IntrinsicElements[Element]
  > & {
    children?: JSX.Element;
  };
};

declare module 'solid-js' {
  namespace JSX {
    interface IntrinsicElements extends ModusCustomElements {}
  }
}

import { JSX as ModusJSX } from '@trimble-oss/modus-web-components';
import { JSX } from 'solid-js';

type ToKebabCase<S extends string> = S extends `${infer T}${infer U}`
  ? `${T extends Lowercase<T> ? '' : '-'}${Lowercase<T>}${ToKebabCase<U>}`
  : S;

// Utility to convert element attributes to "attr:kebab-case" format
type ConvertAttributes<T> = {
  [Key in keyof T as `attr:${ToKebabCase<string & Key>}`]: T[Key];
};

// Main type for ModusCustomElements
declare type ModusCustomElements = {
  [Element in keyof ModusJSX.IntrinsicElements]: ConvertAttributes<
    ModusJSX.IntrinsicElements[Element]
  > & {
    children?: JSX.Element;
  };
};

declare module 'solid-js' {
  namespace JSX {
    interface IntrinsicElements extends ModusCustomElements {}
  }
}

7 replies

SSolidJS

•Created by karolisk on 10/17/2024 in #support

Issues when using SolidJS with child web components

@karolisk Things that are happening: modus-card has static values so they are treated as attributes, In the first tooltip text is dynamic so he is treated as a prop, position is static - attr; no errors because they are defined in ts, icon-only is not defined in ts only iconOnly but solid allows hyphenated values like data-icon without ts errors but doesnt check if they are defined as types and also is dynamic - prop so it ends up back in kebabCase as el.iconOnly = value , In second there is ts error because attr:value is not defined, but it works because dynamic values are forced to being attr and position is coincidentally static. In third icon-only is hyphenated value can be only attr because if it is a prop it becomes el.some-value = value that throws js error. In forth its all static - attr - works, intelisens autocomplete works except icon-only because in ModusJSX its defined as iconOnly. in fifth text- dyn-prop, position-static-attr, icon-only - dynamic - prop- el.iconOnly = value - doesnt work. Why modus-alert works with prop:message and just message, both get converted into el.message = value and attr:message el.setAttribute("mesage", value), probably for some reason dev extracts attribute and then for better handling it sets directly as a prop so in both cases it ends up as a prop so it works either way, just a guess.

7 replies

SSolidJS

•Created by jrainearwills on 10/13/2024 in #support

`createContext`, What's the point?

Context is for when you need to separate state into subtrees instead of having one global store:

const MyContext = createContext();
const Provider = (props: { color: string; children: any }) => (
  <MyContext.Provider value={props.color}>{props.children}</MyContext.Provider>
);

const Child = () => {
  const value = useContext(MyContext) as string;
  return <p>{value}</p>;
};
export const App = () => (
  <>
    <Provider color="red">
      <Child />
      <Child />
    </Provider>
    <Provider color="blue">
      <Child />
      <Child />
      <Child />
    </Provider>
  </>
);

const MyContext = createContext();
const Provider = (props: { color: string; children: any }) => (
  <MyContext.Provider value={props.color}>{props.children}</MyContext.Provider>
);

const Child = () => {
  const value = useContext(MyContext) as string;
  return <p>{value}</p>;
};
export const App = () => (
  <>
    <Provider color="red">
      <Child />
      <Child />
    </Provider>
    <Provider color="blue">
      <Child />
      <Child />
      <Child />
    </Provider>
  </>
);

https://docs.solidjs.com/concepts/context#when-to-use-context

5 replies

SSolidJS

•Created by Max on 9/19/2024 in #support

Force rerender of entire component on prop change

@Max <Show> supports keyed prop that might help

3 replies

SSolidJS

•Created by CatNoir on 8/11/2024 in #support

Override component events

@CatNoir Solid just delegates events and doesn't have a way of intercepting them. The best you can do is add onTouchStart listener that can dispatch your onContextMenu event. https://playground.solidjs.com/anonymous/cb3e33f6-58aa-4280-9905-0b47246897a9

3 replies

SSolidJS

•Created by Dakotys on 8/10/2024 in #support

JSX onWheel not being called.

Using any browser with chromium version at lest 127.0.6533.100 solves it

5 replies

SSolidJS

•Created by Dakotys on 8/10/2024 in #support

JSX onWheel not being called.

It seems its some chromium versions in general

5 replies

SSolidJS

•Created by CatNoir on 7/31/2024 in #support

How can I use a custom hook with createMemo in many places?

@Sakana I also prefer cleaner code and state management separated from the rendering logic. So alternative answer to your original question could be solved also like here: https://playground.solidjs.com/anonymous/079d3ecb-2185-4094-b0c4-83de48498075 And also why did you originally wanted to use createMemo hook. Did you originally have state in separate file? Or how did you incorporate signals/stores in your createMemo.

26 replies

SSolidJS

•Created by zimo on 7/31/2024 in #support

Component with only <For /> in it removes all HTML children

Just wrap the For loop in <Portal>

5 replies

SSolidJS

•Created by deluksic on 7/5/2024 in #support

Is there a way to prevent `lowercaseevent` names?

If you are using eslint-plugin-solid then: https://github.com/solidjs-community/eslint-plugin-solid/blob/main/docs/event-handlers.md

5 replies

SSolidJS

•Created by Liquido on 7/4/2024 in #support

How to pass props to context reactively?

https://playground.solidjs.com/anonymous/2ff5868b-da24-4429-bd6a-97da982f2e45

10 replies

SSolidJS

•Created by binajmen on 7/4/2024 in #support

Is there a way to access children props?

Or forward everything to Editor and let him do the heavy lifting: https://playground.solidjs.com/anonymous/c4d4a3e4-48ec-46a1-ad5f-18d9b415f707

45 replies

SSolidJS

•Created by binajmen on 7/4/2024 in #support

Is there a way to access children props?

Or you can omit Dynamic component altogether and make Line return accessor instead ( we are not unnecessarily recreating Lines html node and then ignoring it and sneaking original props around but directly passing new constructor): https://playground.solidjs.com/anonymous/40015254-f106-4a3f-ab38-e62cd7018fa9

45 replies

SSolidJS

•Created by obesecoder on 6/18/2024 in #support

DOMException *sometimes* after changing element order

The reason why you were getting DOMException was because For firstly generates items, then when signal changes it just adjusts their order (very fast and optimized approach compared to mapping that has to expensively recreate whole table repetitively) but you are manually changing nodes in sortData() ( which is terrible idea in any reactive framework like solid or react, those things should be handled easier and more safely using framework's handlers) and that confuses Fors built in indexing and throws an error. So instead just update the signal returned from createResource (use mutate) : https://playground.solidjs.com/anonymous/303c972d-5c4c-43d8-b2d2-f5399b9c7025

4 replies

SSolidJS

•Created by QWu4xYV on 5/17/2024 in #support

Reactivity in single cell in nested For tags

If you tried to reuse your aggregate function in another table or effect, accessor and its memo would be still recalculated per aggregate use, since it is a function returning new array with own memos, that is why I think it is better to generate array of accessors once, or if we expect the store to expand by new keys wrap it in another memo. https://playground.solidjs.com/anonymous/aa8eb329-2865-4007-9073-05f058e6016a

27 replies

SSolidJS

•Created by QWu4xYV on 5/17/2024 in #support

Reactivity in single cell in nested For tags

If i change it to

  const calculateRow = (key: Key) => (
    console.log('row', key), storeData.reduce((acc, row) => acc + row[key], 0)
  );

  const calculateRow = (key: Key) => (
    console.log('row', key), storeData.reduce((acc, row) => acc + row[key], 0)
  );

I see only one console.log per update, am I missing something?

27 replies

SSolidJS

•Created by QWu4xYV on 5/17/2024 in #support

Reactivity in single cell in nested For tags

Since total: () => calculateRow(key), is accessor it is not calculating anything, essentially my aggregate is just returning list of objects with accessors, that made me realize it could have been rewritten into just :

type Key = keyof (typeof storeData)[number];
type AggregatedType = Array<{ label: string; total: any }>;

const calculateRow = (key: Key) =>
  storeData.reduce((acc, row) => acc + row[key], 0);

// just array, not function
const aggregate = (Object.keys(storeData[0]) as Array<Key>).reduce(
      (acc, key) => (
        acc.push({
          label: key.toUpperCase(),
          total: () => calculateRow(key),
        }),
        acc
      ),
      [] as AggregatedType
    )

type Key = keyof (typeof storeData)[number];
type AggregatedType = Array<{ label: string; total: any }>;

const calculateRow = (key: Key) =>
  storeData.reduce((acc, row) => acc + row[key], 0);

// just array, not function
const aggregate = (Object.keys(storeData[0]) as Array<Key>).reduce(
      (acc, key) => (
        acc.push({
          label: key.toUpperCase(),
          total: () => calculateRow(key),
        }),
        acc
      ),
      [] as AggregatedType
    )

and since you have also rewritten your toTotalMemo to return accessor instead of memo, when you drop the createMemo our code is basically the same. XD. You are just using normal loops and I am using reduce.

Gaming

Programming