search

preactjs / signals

Manage state with style in every framework
https://preactjs.com/blog/introducing-signals/
MIT License
3.81k stars 95 forks source link

Signal Value updates but does not re-render using the most basic example #509

Closed evanwellens closed 9 months ago

evanwellens commented 9 months ago

Click the button , logs new value , doesn't render new value.

`import { signal } from "@preact/signals";

export function TestComp(props) { const count = signal(0); const value = count.value;

const increment = () => { // A signal is updated by assigning to the .value property: console.log(count.value); /// logs the new value, never renders below count.value++; }

return (

Count: {value}

); }`

package.json

{ "name": "avf-react", "private": true, "version": "0.0.0", "type": "module", "scripts": { "start": "vite", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@preact/signals": "^1.2.2", "@react-rxjs/core": "^0.10.7", "@react-rxjs/utils": "^0.9.7", "primereact": "^10.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "rxjs": "^7.8.1" }, "devDependencies": { "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "font-awesome": "^4.7.0", "font-awesome-animation": "^0.2.1", "sass": "^1.70.0", "typescript": "^5.2.2", "vite": "^5.1.0" } }

XantreDev commented 9 months ago

Here is formatted package.json

{
  "name": "avf-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@preact/signals": "^1.2.2",
    "@react-rxjs/core": "^0.10.7",
    "@react-rxjs/utils": "^0.9.7",
    "primereact": "^10.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rxjs": "^7.8.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "font-awesome": "^4.7.0",
    "font-awesome-animation": "^0.2.1",
    "sass": "^1.70.0",
    "typescript": "^5.2.2",
    "vite": "^5.1.0"
  }
}

But your code seems to be valid not valid

evanwellens commented 9 months ago

Thanks ... Code comes from the website ,just not the name of the component. I'll attach the file if that helps, i renamed to txt to upload.

TestComp.txt `

import { signal } from "@preact/signals";

export function TestComp(props) { const count = signal(0); const value = count.value;

const increment = () => { // A signal is updated by assigning to the .value property: console.log(count.value); /// logs the new value, never renders below count.value++; }

return (

Count: {value}

); }

rschristian commented 9 months ago

If you're using React, use @preact/signals-react. @preact/signals is for usage in Preact.

Please give the docs a skim. They cover installation steps and much more.

evanwellens commented 9 months ago

If you're using React, use @preact/signals-react. @preact/signals is for usage in Preact.

Please give the docs a skim. They cover installation steps and much more. Thanks , I've been randomly trying various installs , including the aformentiond.

my updated package entries

"@preact/signals-core": "^1.5.1",
"@preact/signals-react": "^2.0.0",

Same behavior , no rendered binding

evanwellens commented 9 months ago

Also I have cleared node-modules , forced cache clear etc... Really want to start using this , but not sure why it's not working.

On Thu, Feb 15, 2024 at 4:33 PM Ryan Christian @.***> wrote:

If you're using React, use @preact/signals-react. @preact/signals is for usage in Preact usage.

Please give the docs https://github.com/preactjs/signals?tab=readme-ov-file#installation a skim.

— Reply to this email directly, view it on GitHub https://github.com/preactjs/signals/issues/509#issuecomment-1947374594, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADIMBW2Q2Q2UIFAGPMXHQ6TYTZ5JVAVCNFSM6AAAAABDKX3AA6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBXGM3TINJZGQ . You are receiving this because you authored the thread.Message ID: @.***>

-- 


Evan Wellens
evanwellens commented 9 months ago

If you're using React, use @preact/signals-react. @preact/signals is for usage in Preact.

Please give the docs a skim. They cover installation steps and much more.

Lastly created blank vite react typescript project.

import { signal } from '@preact/signals-react';
import './App.css'

function App() {
  const count = signal(0); 
  const value = count.value;

const increment = () => {
  // A signal is updated by assigning to the `.value` property:
  console.log(count.value); /// logs the new value, never renders below
  count.value++;
}
  return (
    <div>
      <p>Count: {value}</p>
      <button onClick={increment}>click me</button>
    </div>
  );
}

export default App

package.json

{
  "name": "signaltest",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "start": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@preact/signals-react": "^2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.1.0"
  }
}

Any thoughts or suggestions would be appreciated.

evanwellens commented 9 months ago

Just an FYi , found a git demo project that worked.

Different was @./signals-react": "^2.0.0", vs @./signals-react": "1.3.8",

The first being generated by the documented commands and the later me manually installing

Not sure why but ^2.0.0 didn't work and the 1.3.8. did

On Tue, Feb 20, 2024 at 3:48 PM Evan Wellens @.***> wrote:

Also I have cleared node-modules , forced cache clear etc... Really want to start using this , but not sure why it's not working.

On Thu, Feb 15, 2024 at 4:33 PM Ryan Christian @.***> wrote:

If you're using React, use @preact/signals-react. @preact/signals is for usage in Preact usage.

Please give the docs https://github.com/preactjs/signals?tab=readme-ov-file#installation a skim.

— Reply to this email directly, view it on GitHub https://github.com/preactjs/signals/issues/509#issuecomment-1947374594, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADIMBW2Q2Q2UIFAGPMXHQ6TYTZ5JVAVCNFSM6AAAAABDKX3AA6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBXGM3TINJZGQ . You are receiving this because you authored the thread.Message ID: @.***>

--


Evan Wellens

-- 


Evan Wellens
rschristian commented 9 months ago

It's not working as you'll need to follow these instructions too.

You need to use the Babel plugin or useSignals.