iNdra Posts - Answer Overflow

iNdra

•Created by iNdra on 11/19/2024 in #support

Solid devtools with Astro

I try to use solid devtools extension with Astro but is shows Solid Not Detected. Webpage work fine with solidjs. I edit astro.config.mjs file in Astro

JavaScript
/* eslint-disable import/no-unresolved */
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import partytown from "@astrojs/partytown";
import solidJs from "@astrojs/solid-js";
import sitemap from "@astrojs/sitemap";
import robotsTxt from "astro-robots-txt";
import devtools from "solid-devtools/vite";
// import node from "@astrojs/node";

// import tunnel from "astro-tunnel";

// https://astro.build/config
export default defineConfig({
  // output: 'server',
  // adapter: node({
  //   mode: "standalone"
  // }),
  site: "https://www.kada.lk",
  integrations: [
    tailwind(),
    partytown(),
    solidJs(),
    robotsTxt({
      userAgent: "*",
      allow: "/",
      disallow: "",
      crawlDelay: 10,
    }),
    devtools({
      autoname: true,
      locator: {
        targetIDE: "vscode",
        key: "Ctrl",
        jsxLocation: true,
        componentLocation: true,
      },
    }),
  ], //, tunnel()
});

I add Solid JSX file import 'solid-devtools' this line. But not show any details. "solid-devtools": "^0.30.1" "astro": "^4.16.9" "solid-js": "^1.9.3" IDE: VSCODE

2 replies

SSolidJS

•Created by iNdra on 5/26/2024 in #support

Solidstart with CSR, SSR and SSG?

How to separately implement below methods in SolidStart project? I mean, I wonder how code is different below methods. Example: I saw "use server"; add to run SSR. Client-side rendering (CSR) Server-side rendering (SSR) Static site generation (SSG)

9 replies

SSolidJS

•Created by iNdra on 4/22/2024 in #support

TypeError: useContext is not a function or its return value is not iterable

I create a model component for reuse. I got "TypeError: useContext is not a function or its return value is not iterable" error. How to solve this error. This code is in single file. Error happening in const [{ show, hide }] = useContext(ModelPUp); line

5 replies

SSolidJS

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

How to deploy SolidStart project to Cloud (AWS/GCP etc.)

4 replies

SSolidJS

•Created by iNdra on 4/6/2024 in #support

How SolidStart SSR (& hydration) work?

I would like to know how SSR work in SolidStart. When HTML DOM add to web page and render in server, it sends to client side (browser). Then client side handle events, states etc. (Dynamic parts). is this correct, how Solid knows Components or DOM to handle events (referencing) ? It has pre rendered content before JS load in client side (browser). When use SolidJS, JS return DOM and reference to the code within the JS code like button click event. How solidstart reference it when DOM in page not in JS file? If SSR use following method, it can handle dynamic parts like solidjs. Sever Side DOM ---> Client Side Solid Code ---> Render. (This method need to run JS after page full load so SSR may not be this method) If you can explain it with code, it will be better. Old days PHP use for SSR and JS or JQuary use to handle event by referencing ID value or Class values.

27 replies

SSolidJS

•Created by iNdra on 4/4/2024 in #support

How to work with SSR pages?

Normally, react JS frameworks render all DOM in page by using JS file. When do SSR, some HTML DOM already available in page. Then how to handle these DOM in client side with react JS frameworks like SolidJS? Consider SSR not doing by JS. If it is use JS, can use SolidStart. Example: Product page render in server side. It has many cards for products. Also, I would like to know how to pass data from server to client? Example: I do SSR for user page, and it has user data like ID, and other details. Not DOM. How to pass these details to client side to use in solidJS?

20 replies

SSolidJS

•Created by iNdra on 3/24/2024 in #support

JS Full stack framework designed web vs API fetch use web

I would like to know what are new features available in JS Full stack web DreamWorks than API data fetching system. API fetch use web means frontend use solidjs and backend use other languages like PHP, rust etc. Use API endpoint to get data. API endpoint or web socket. JS Full stack framework designed web means website design with solidstart, remix or react + nextjs. JS full stack frameworks have any new features?

4 replies

SSolidJS

•Created by iNdra on 3/4/2024 in #support

Handle user interactions to send backend

I would like to know what are methods that can handle identification of user interaction points like post by post id, comment by comment id etc. HTML ID attribute can be use for add specific id to identify but I think some developers use different methods. Therefore I would like to what are methods do you use for that, what are best practices and security methods.

18 replies

SSolidJS

•Created by iNdra on 2/28/2024 in #support

How to make optimistic update using solidjs?

Currently I do not have any code for optimistic update. I need simple example for this considering below code.

import { createSignal } from "solid-js";

// Simulated asynchronous function to update data on the server
function updateDataOnServer(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      // Simulating server response
      resolve(newData);
    }, 1000); // Simulating network delay
  });
}

function App() {

  const [data, setData] = createSignal("");

  const handleUpdate = async () => {

  };

  return (
    <div>
      <input
        type="text"
      />
      <button onClick={handleUpdate}>Update Data</button>
      <div>
        <h1>{data() || "No Data"}</h1>
      </div>
    </div>
  );
}

export default App;

import { createSignal } from "solid-js";

// Simulated asynchronous function to update data on the server
function updateDataOnServer(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      // Simulating server response
      resolve(newData);
    }, 1000); // Simulating network delay
  });
}

function App() {

  const [data, setData] = createSignal("");

  const handleUpdate = async () => {

  };

  return (
    <div>
      <input
        type="text"
      />
      <button onClick={handleUpdate}>Update Data</button>
      <div>
        <h1>{data() || "No Data"}</h1>
      </div>
    </div>
  );
}

export default App;

I found this article but can not find document for createMutation - https://github.com/solidjs/solid/discussions/770

4 replies

SSolidJS

•Created by iNdra on 10/27/2023 in #support

What are these solid-js/html, solid-js/h and solid-js/universal?

I found these solid-js/html, solid-js/h and solid-js/universal in SolidJS package. I would like to know what are these, and can I use these for production? Are there have any documentation to learn these?

7 replies

SSolidJS

•Created by iNdra on 10/22/2023 in #support

What are your favorite libraries or packages for web development?

I would like to know what are your favorite libraries or packages for web development? These are a lot of SolidJS support libraries or packages out there. I know I can find packages in SolidJS Ecosystem website, but I would like to know what are favorites of you. This will help to familiar with it when have package support related projects. Example: TanStack Solid Query

4 replies

SSolidJS

•Created by iNdra on 10/19/2023 in #support

Any advantages by tanstack libraries for solidjs users?

I found that tanstack have some libraries support for solidjs. tanstack query, tanstack table, tanstack virtual. Any benefits of use of tanstack libraries?

10 replies

SSolidJS

•Created by iNdra on 6/7/2023 in #support

Which methods do you use for check user login or not?

May I know which methods do you use for check user login or not? Method 1 - Create server session and check database according session details. Method 2 - Use JWT to store in cookies and use that to check in database What else? Anybody know a method to reduce database call for check user details?

3 replies

SSolidJS

•Created by iNdra on 6/5/2023 in #support

Use Common Store in js file and edit it using file 1 then use it in file 2.

I have context.js file and it have following code.

export function createI18n(i18n) {
  const [store, setStore] = createStore({
    ...i18n,
    t: i18n.t.bind({}),
  });
  const updateStore = (i18n) => {
    setStore({
      ...i18n,
      t: i18n.t.bind({}),
    });
  };

  return [store, updateStore];
}

I have file1.jsx file and it use to edit it.

const [i18nStore, updateStore] = createI18n(i18next);

const handleOnChange = (lang) => {
    i18next.changeLanguage(lang).then(() => {
      updateStore(i18next);
      setTimeout(null, 10);
    });
  };

How can I access store in context.js file from file 2.jsx? I need useeffect to run function when change store in context.jsx.

createEffect(() => {
    console.log("Changed:", i18nStore.language);
  });

25 replies

SSolidJS

•Created by iNdra on 5/27/2023 in #support

How to use SolidJS Routes in Astro?

22 replies

Gaming

Programming