Mant Posts - Answer Overflow

Mant

•Created by Mant on 3/16/2024 in #support

Async Primitive

Hi I'm a bit stuck, you know that primitive is asynchronous and can be used in a following case. there's the createResource primitive, but I can't see how to use it properly, especially as I'd like to be able to put the files in indexedDB.

let images: Promise<{ items: ImageType[]; }> | undefined;
async function fetchImages(forceRefresh: boolean = false) {
  if (!images || forceRefresh) {
    images = fetch("/images");
  }
  return images;
}
function DisplayImage() {
  async function getImage() {
    let files = await fetchImages();
    let file = files.items.find(file => file.key === key);
    if (!file) {
      let files = await fetchFiles(true);
      let file = files.items.find(file => file.key === key);
      return file
    }
    return file;
  }
  let key = "key_image";
  return <>
    <img src={getImage(key)} /> // <- error is async
  </>;
}

let images: Promise<{ items: ImageType[]; }> | undefined;
async function fetchImages(forceRefresh: boolean = false) {
  if (!images || forceRefresh) {
    images = fetch("/images");
  }
  return images;
}
function DisplayImage() {
  async function getImage() {
    let files = await fetchImages();
    let file = files.items.find(file => file.key === key);
    if (!file) {
      let files = await fetchFiles(true);
      let file = files.items.find(file => file.key === key);
      return file
    }
    return file;
  }
  let key = "key_image";
  return <>
    <img src={getImage(key)} /> // <- error is async
  </>;
}

6 replies

SSolidJS

•Created by Mant on 7/26/2023 in #support

Scroll & Drag Solid DND

Hi, do you know the best way to manage scroll (auto) when using solid dnd? Especially as I have the impression that solid DND doesn't seem to work, when you scroll manually.

2 replies

SSolidJS

•Created by Mant on 6/22/2023 in #support

vitest error 'registerGraph'

Hello, have you encountered the following error?

TypeError: Cannot read properties of undefined (reading 'registerGraph')
 - /node_modules/solid-js/store/dist/dev.js:213:9

TypeError: Cannot read properties of undefined (reading 'registerGraph')
 - /node_modules/solid-js/store/dist/dev.js:213:9

vitest.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vitest/config'
import solidPlugin from 'vite-plugin-solid';
export default defineConfig({
    plugins: [
        solidPlugin(),
    ],    
    build: {
        target: 'esnext',
    },
    test: {
        environment: 'jsdom',
        globals: true,
        transformMode: { web: [/\.[jt]sx?$/] },
    },
    resolve: {
        conditions: ['development', 'browser'],
        alias: {
            '@': __dirname + '/src',
            "@lib": __dirname + '/../backend/src/lib',
        },
    }
})

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vitest/config'
import solidPlugin from 'vite-plugin-solid';
export default defineConfig({
    plugins: [
        solidPlugin(),
    ],    
    build: {
        target: 'esnext',
    },
    test: {
        environment: 'jsdom',
        globals: true,
        transformMode: { web: [/\.[jt]sx?$/] },
    },
    resolve: {
        conditions: ['development', 'browser'],
        alias: {
            '@': __dirname + '/src',
            "@lib": __dirname + '/../backend/src/lib',
        },
    }
})

5 replies

SSolidJS

•Created by Mant on 4/18/2023 in #support

IntersectionObserver

Hi, do you have any idea how to do this better? solidjs doesn't seem to like me coding like this.

<div class={styles.App2}
    ref={$scroll_container}
    >
        {() => {
        const { add: intersectionObserver, remove } = makeIntersectionObserver([], entries => {
            entries.forEach(e => {
                if (e.isIntersecting) {
                    let img = e.target.querySelector('img');
                    if (img) {
                        img.src = img.dataset.src ?? "";
                    }
                    remove(e.target);
                }
            });
        }, {
            rootMargin: '1000px 0px 1000px 0px',
            root: $scroll_container,
        });
    return <>
      <div use:intersectionObserver></div>
      <div use:intersectionObserver></div>
      <div use:intersectionObserver></div>
      <div use:intersectionObserver></div>
    </>;    
    }
</div>

<div class={styles.App2}
    ref={$scroll_container}
    >
        {() => {
        const { add: intersectionObserver, remove } = makeIntersectionObserver([], entries => {
            entries.forEach(e => {
                if (e.isIntersecting) {
                    let img = e.target.querySelector('img');
                    if (img) {
                        img.src = img.dataset.src ?? "";
                    }
                    remove(e.target);
                }
            });
        }, {
            rootMargin: '1000px 0px 1000px 0px',
            root: $scroll_container,
        });
    return <>
      <div use:intersectionObserver></div>
      <div use:intersectionObserver></div>
      <div use:intersectionObserver></div>
      <div use:intersectionObserver></div>
    </>;    
    }
</div>

27 replies

SSolidJS

•Created by Mant on 1/19/2023 in #support

Lexical (or another)

Hi, I tried to make a poc with Lexical again. Did you also have a bug that blocks the delete? Or did I do something wrong? (my goal is to do like discord, everything is displayed with only a visual improvement) @foolswisdom

const ExampleTheme: EditorThemeClasses = {
    ltr: "ltr",
    rtl: "rtl",
    placeholder: "editor-placeholder",
    paragraph: "editor-paragraph",
    text: {
        bold: "editor-text-bold",
        italic: "editor-text-italic",
    },
};

function Placeholder() {
    return <div class="editor-placeholder">Enter some plain text...</div>;
}

function onChange(editorState: EditorState, editor: LexicalEditor) {
    editorState.read(() => {
        // Read the contents of the EditorState here.
        const root = $getRoot();
        const selection = $getSelection();

        console.log(root, selection);
    });
}

export default function TextareaAuto(props: {
    ref_scroll: HTMLElement | undefined,
    value: string,
    placeholder: string,
    class: string,
    onChange: (e: any) => void,
    onInput: (e: string) => void,
    onFocus: () => void,
    onClick?: () => void,
}) {
    const editorConfig = {
        theme: ExampleTheme,
        namespace: "",
        onError(error: any) {
            throw error;
        },
        // editorState: () => $convertFromMarkdownString(props.value, TRANSFORMERS),
    };

    return (
        <LexicalComposer initialConfig={editorConfig}>
          <div class="editor-container">
            <div class="editor-inner">
                <RichTextPlugin
                    contentEditable={<ContentEditable class="editor-input" />}
                    placeholder={<Placeholder />}
                    errorBoundary={LexicalErrorBoundary}
                />
                <TreeViewPlugin />
                <OnChangePlugin onChange={onChange} />
            </div>
          </div>
        </LexicalComposer>
      );
}

const ExampleTheme: EditorThemeClasses = {
    ltr: "ltr",
    rtl: "rtl",
    placeholder: "editor-placeholder",
    paragraph: "editor-paragraph",
    text: {
        bold: "editor-text-bold",
        italic: "editor-text-italic",
    },
};

function Placeholder() {
    return <div class="editor-placeholder">Enter some plain text...</div>;
}

function onChange(editorState: EditorState, editor: LexicalEditor) {
    editorState.read(() => {
        // Read the contents of the EditorState here.
        const root = $getRoot();
        const selection = $getSelection();

        console.log(root, selection);
    });
}

export default function TextareaAuto(props: {
    ref_scroll: HTMLElement | undefined,
    value: string,
    placeholder: string,
    class: string,
    onChange: (e: any) => void,
    onInput: (e: string) => void,
    onFocus: () => void,
    onClick?: () => void,
}) {
    const editorConfig = {
        theme: ExampleTheme,
        namespace: "",
        onError(error: any) {
            throw error;
        },
        // editorState: () => $convertFromMarkdownString(props.value, TRANSFORMERS),
    };

    return (
        <LexicalComposer initialConfig={editorConfig}>
          <div class="editor-container">
            <div class="editor-inner">
                <RichTextPlugin
                    contentEditable={<ContentEditable class="editor-input" />}
                    placeholder={<Placeholder />}
                    errorBoundary={LexicalErrorBoundary}
                />
                <TreeViewPlugin />
                <OnChangePlugin onChange={onChange} />
            </div>
          </div>
        </LexicalComposer>
      );
}

44 replies

Gaming

Programming