Basil
Basil
PostsComments
SSolidJS
Created by Basil on 4/14/2024 in #support
`vite-plugin-solid` makes Vitest take over twice as long to run
I have over a hundred test files, and they take around 8 seconds to run. Adding the vite-plugin-solid Vite plugin to the Vitest config makes it take around 18 seconds to run, despite the majority of the tests being .test.ts files and having no components (there are only two very small .test.tsx files). It slows down the execution of all other tests, even though the only usage of Solid is a return createMutable(this) at the end of the constructor of every class. The exclude option does not seem to help. My Vitest config: 
import { defineConfig } from 'vitest/config';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    test: {
        server: {
            deps: {
                // This fixes tests with components for some reason
                inline: ['@basil/phosphor-solid'],
            },
        },
    },
    plugins: [tsconfigPaths()],
});
import { defineConfig } from 'vitest/config';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    test: {
        server: {
            deps: {
                // This fixes tests with components for some reason
                inline: ['@basil/phosphor-solid'],
            },
        },
    },
    plugins: [tsconfigPaths()],
});
2 replies
SSolidJS
Created by Basil on 3/15/2024 in #support
`createMutable` fails Vitest's `toStrictEqual` when `vite-plugin-solid` is active
When the vite-plugin-solid plugin is not enabled, the following test passes: 
expect(createMutable([1,2,3])).toStrictEqual([1,2,3]);
expect(createMutable([1,2,3])).toStrictEqual([1,2,3]);
However, when the plugin is enabled, the test fails. I have a bunch of tests that rely on toStrictEqual working with createMutable, and adding vite-plugin-solid has caused them to fail. Why? I can't seem to wrangle the include and exclude options in the plugin to fix this either. Is there a way to get around this other than using toEqual, or do I have to refactor a lot of my test suite for this?
1 replies
SSolidJS
Created by Basil on 3/14/2024 in #support
Using SolidJS's produce(), but with Immer-style patch generation?
Is it possible to use SolidJS's produce, but with patch generation akin to Immer's produceWithPatches? (being able to only store the delta (patches), as well as supporting things like classes) I'm currently using a combination of Immer's produceWithPatches and reconcile to work with a state that's made up of nested instances of various classes. The only reason I'm using Immer in the first place is to get the undo/redo functionality with little fuss, but it doesn't play well with SolidJS, and is slow and results in unnecessary re-renders.
12 replies
SSolidJS
Created by Basil on 1/23/2024 in #support
Nested Immer "produce" signals with components
I'm trying to implement something like this, which would allow me to create "nested" signals that update the upmost signal: 
function createImmerSignal<T>(value: T) {
  const [get, set] = createSignal(value);

  function newSet(callback: (draft: Draft<T>) => void) {
    const newVal = produce(get(), callback, (redo, undo) => {
      // Undo and redo logic
    });
    // eslint-disable-next-line @typescript-eslint/ban-types
    set(newVal as Exclude<T, Function>);
  }

  return [get, newSet];
}

type Company = {
  name: string;
  developers: {
    name: string;
    someOtherProp: string;
  }[];
};

function CompOne(prop: { origCompany: Company }) {
  const [company, setCompany, createNested] = createImmerSignal<Company>(origCompany);

  // I'm not sure what a good syntax for this would be, or how to even get this functional. This syntax is what I've come up with:
  const dev = createNested(company => company.developers[0]);

  return <>
    <CompTwo dev={dev} />
  </>
}

function CompTwo(props) {
  // createNested can be used indefinitely
  const [dev, setDev, createNested] = props.dev;

  setDev(draft => {
    // This would update company.developers[0].someProp
    draft.name = 'aaaa';
  });

  return <></>;
}
function createImmerSignal<T>(value: T) {
  const [get, set] = createSignal(value);

  function newSet(callback: (draft: Draft<T>) => void) {
    const newVal = produce(get(), callback, (redo, undo) => {
      // Undo and redo logic
    });
    // eslint-disable-next-line @typescript-eslint/ban-types
    set(newVal as Exclude<T, Function>);
  }

  return [get, newSet];
}

type Company = {
  name: string;
  developers: {
    name: string;
    someOtherProp: string;
  }[];
};

function CompOne(prop: { origCompany: Company }) {
  const [company, setCompany, createNested] = createImmerSignal<Company>(origCompany);

  // I'm not sure what a good syntax for this would be, or how to even get this functional. This syntax is what I've come up with:
  const dev = createNested(company => company.developers[0]);

  return <>
    <CompTwo dev={dev} />
  </>
}

function CompTwo(props) {
  // createNested can be used indefinitely
  const [dev, setDev, createNested] = props.dev;

  setDev(draft => {
    // This would update company.developers[0].someProp
    draft.name = 'aaaa';
  });

  return <></>;
}
I'm specifically trying to avoid having to use setCompany in a nested component, because that would become pretty unwieldy very quickly: 
setCompany(draft => {
  draft.developers[0].someProp.anotherProp[2].enabled = true;
});
setCompany(draft => {
  draft.developers[0].someProp.anotherProp[2].enabled = true;
});
However, I'm not sure how to do this.
7 replies
SSolidJS
Created by Basil on 1/7/2024 in #support
TypeScript type for classes that extend class
This Stack Overflow question is what I'm asking, but none of the answers provide intellisense for the function argument: https://stackoverflow.com/questions/76913841/generic-type-to-specify-a-class-which-extends-another I'd like to be able to do something like: 
// These class would be accepted:
class Base { /* Various properties, functions, etc. here */ }
class Something extends Base { /* New properties */ }
class SomethingTwo extends Base { /* New properties */ }
class Nested extends SomethingTwo { /* New properties */ }

// This class would not be accepted
class Other { /* New properties */ }

// This is the syntax that is wrong
//                   vvvvvvvvvvvv
function someFn(arg: extends Base) {
  // `arg` would function as if it was just `Base`
}

// Good
someFn(new Base());
someFn(new Something());
someFn(new SomethingTwo());
someFn(new Nested());

// Bad (would be flagged by TypeScript)
someFn(new Other());
// These class would be accepted:
class Base { /* Various properties, functions, etc. here */ }
class Something extends Base { /* New properties */ }
class SomethingTwo extends Base { /* New properties */ }
class Nested extends SomethingTwo { /* New properties */ }

// This class would not be accepted
class Other { /* New properties */ }

// This is the syntax that is wrong
//                   vvvvvvvvvvvv
function someFn(arg: extends Base) {
  // `arg` would function as if it was just `Base`
}

// Good
someFn(new Base());
someFn(new Something());
someFn(new SomethingTwo());
someFn(new Nested());

// Bad (would be flagged by TypeScript)
someFn(new Other());
2 replies
SSolidJS
Created by Basil on 1/4/2024 in #support
Good library for handling combobox-style search UI? (with Pagefind)
I'm trying to create an Algolia-style interface with Pagefind's search API, but I'm not sure how to handle the arrow navigation in an accessibility-friendly way. I was wondering what the best approach to this would be, and whether I should use an existing SolidJS component library (I don't know which one would work for this), write my own solution (not sure how to do that in an accessible way), or if this is possible with just HTML. I made a GitHub Discussion in the Kobalte repo about potentially using the their combobox component, but looking through their documentation, I don't think that would be supported behavior.
4 replies