signal for production

[Miri121]

I use react and vite after I build I run the code as vite preview (production environment) I created export const isOpen = signal(false); When I click the button isOpen.value = !isOpen.value I have a problem that the signal does not change its value in a production environment why this ?

[XantreDev]

Do you use it in react? Can you provide more information? Which framework do you use?

[Miri121]

Yes I use with react local its good work but in production no work

[rschristian]

We need a reproduction, this is not enough to go on.

[Miri121]

I didn't understand what you need? Shall I send you a code? Because at the height of the problem I said... I have a button that changes from true to false when I press a button in a dev environment it works but in a production system the signal does not work

[rschristian]

We need a Stackblitz demo or repo to clone to reproduce this, yes.

Because at the height of the problem I said... I have a button that changes from true to false when I press a button in a dev environment it works but in a production system the signal does not work

This is simply not enough for us to go on.

[Miri121]

import { useEffect } from 'react'; import { NavLink } from 'react-router-dom'; import { AnimatePresence, motion } from 'framer-motion'; import SidebarMenu from '@Components/Sidebar/SidebarMenu'; import { useUser } from '@ApiService/Requests/useUser'; import { IRoutesArray } from '@CommonInterfaces'; import { useSetRecoilState } from 'recoil'; import { IsDarkAgGridAtom } from '@Atoms/Atoms'; import { EMPTY_STRING, LAZY_LOADING, PAGE_HOME, PERSONAL_AREA, TYPE_SPRING, USER, } from '@CommonConstants'; import { useGetAllSubCategory } from '@ApiService/Requests/useSubCategory'; import { IconButton } from '@mui/material'; import useWindowSize from '@Hooks/useWindowSize'; import { isOpen } from '@CommonSignals'; import menuIcon from '@Assets/Images/menuIcon.svg'; import { useSignal, useComputed } from '@preact/signals-react'; import TooltipGlobal from '@CommonComponents/TooltipGlobal/TooltipGlobal'; import useAuth from '@ApiService/Requests/useAuth'; import routesSideBar from './RoutesSideBar'; import './Sidebar.scss';

const Sidebar = () => { const { subCategories } = useGetAllSubCategory(); const { logout } = useAuth();

const toggle = () => { isOpen.value = !isOpen.value; }; const { user } = useUser(); const routes = useSignal<IRoutesArray[]>([]); const setIsDarkAgGridAtom = useSetRecoilState(IsDarkAgGridAtom); const { width } = useWindowSize(); const currentWidth = width || window.innerWidth;

const showAnimation = { hidden: { width: 0, opacity: 0, transition: { duration: 0.5, }, }, show: { opacity: 1, width: 'auto', transition: { duration: 0.5, }, }, };

const widthSideBar = useComputed(() => isOpen.value ? (currentWidth <= 660 ? '100%' : '200px') : '45px' );

useEffect(() => { routes.value = routesSideBar(user, subCategories, logout); // eslint-disable-next-line react-hooks/exhaustive-deps }, [routes, subCategories, user]);

return ( <> <motion.div animate={{ minWidth: widthSideBar.value, transition: { duration: 0.5, type: TYPE_SPRING, damping: 30, }, }} className='Sidebar ' style={{ width: widthSideBar.value, }}

{isOpen.value && ( )}

{routes.value.map((route, i) => { if (route.subRoutes) { return ( ); }

        return (
          <TooltipGlobal
            key={i}
            title={isOpen.value ? EMPTY_STRING : route.name}
          >
            <div>
              <NavLink
                end
                to={`${route.path || PAGE_HOME}`}
                onClick={() => {
                  isOpen.value = false;
                  if (route.onClick) route.onClick();
                }}
                className={({ isActive }) =>
                  `link${isActive ? ' active' : EMPTY_STRING}`
                }
              >
                <img
                  draggable={false}
                  loading={LAZY_LOADING}
                  className='icon'
                  src={route.icon}
                />

                <AnimatePresence>
                  {isOpen.value && (
                    <motion.div
                      variants={showAnimation}
                      initial='hidden'
                      animate='show'
                      exit='hidden'
                      className='link_text'
                    >
                      {route.name}
                    </motion.div>
                  )}
                </AnimatePresence>
              </NavLink>
            </div>
          </TooltipGlobal>
        );
      })}
    </section>
    <AnimatePresence>
      {isOpen.value && user && user.role !== USER && (
        <motion.div
          variants={showAnimation}
          initial='hidden'
          animate='show'
          exit='hidden'
          className='bottom'
        >
          <div
            className='colorOption'
            onClick={() => setIsDarkAgGridAtom(false)}
          />
          <div
            className='colorOption'
            onClick={() => setIsDarkAgGridAtom(true)}
          />
        </motion.div>
      )}
    </AnimatePresence>
  </motion.div>
</>

); };

export default Sidebar;

THIS FUNC TO CHANGE SIGNAL STATE toggle ()

[rschristian]

We need a minimal reproduction, via Stackblitz or a repo we can clone. There's absolutely nothing we can do to help you if all you provide is a single file filled with all sorts of unrelated code.

Provide that, and we can re-open and take a look.

[Miri121]

I don't have anything but?

[rschristian]

Then you'll need to put a bit of work in to cut down your problem to a minimal reproduction.

This is the expectation of open source. Maintainers would love to help you, but you can't expect us to dig through hundreds of lines of your code (and what looks to be dozens of files) for you for free.

Edit: If this is your first foray into open source, there's many great articles out there on etiquette and how to create minimal reproductions as we've asked for here.

However, the basic idea is to start from a completely empty repository and only add what you need in order to reproduce the issue. This a) helps us track it down and b) might show you that you have a mistake in your code.

[Miri121]

https://github.com/Miri121/client.git

[rschristian]

Perfect, thank you.

It seems you haven't followed the React Integration Instructions; as of @preact/signals-react v2, you must either use the Babel plugin or use the useSignals() hook.

import { useSignal } from '@preact/signals-react';
+import { useSignals } from "@preact/signals-react/runtime";
import './App.css'

function App() {
+ useSignals();
  const isOpen = useSignal(true);
  const toggle = () => {
    // no changes
    isOpen.value = !isOpen.value;
  };

  //not printing
  console.log(isOpen.value)

  return (
    <>
       <div style={{ color: 'red', width: '100%', height: '100%',border:"1px solid red" }} onClick={toggle} >
          {isOpen.value ? 'signal true' : 'signal false'}
        </div>
    </>
  )
}

export default App

[Miri121]

great it works well now thank you very much!!