Installations

npm install @reatom/npm-solid-js

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

20.15.0

NPM Version

10.7.0 Score

64

Supply Chain

93.2

Quality

77.1

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

24

Total

628

Closed

139

Merged

465

Issues

Open

40

Total

334

Closed

294

Releases

335

devtools: v0.8.0

devtools-v0.8.0

Published on 17 Dec 2024

jsx: v3.16.0

jsx-v3.16.0

Published on 17 Dec 2024

npm-react: v3.10.3

npm-react-v3.10.3

Published on 11 Dec 2024

lens: v3.11.6

lens-v3.11.6

Published on 11 Dec 2024

effects: v3.10.2

effects-v3.10.2

Published on 11 Dec 2024

core: v3.9.1

core-v3.9.1

Published on 11 Dec 2024

View all 335 releases

Contributors

75

View all 75 contributors

Languages

5

TypeScript

HTML

JavaScript

Shell

EJS

TypeScript (99.43%)

HTML (0.43%)

JavaScript (0.09%)

Shell (0.04%)

Developer

artalar

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

1,108 Stars

2,356 Commits

113 Forks

21 Watching

37 Branches

75 Contributors

Bundle Size

16.20 kB

Minified

6.12 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

Package Meta Information

Latest Version

3.6.2

Package Id

@reatom/npm-solid-js@3.6.2

Unpacked Size

29.87 kB

Size

5.18 kB

File Count

11

NPM Version

10.7.0

Node Version

20.15.0

Publised On

22 Jun 2024

Total Downloads

Cumulative downloads

Total Downloads

0

Last day

0%

0

Compared to previous day

Last week

0%

0

Compared to previous week

Last month

0%

0

Compared to previous month

Last year

0%

0

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

2

@reatom/core solid-js

Versions

This is the binding for the Solid view framework. The reason to use these bindings is the Reatom ecosystem. We have a lot of packages and helpers to handle basic UI logic, including network caching, data persistence, and complex flow description.

Installation

1npm i @reatom/npm-solid-js

Also, you need to be installed @reatom/core or @reatom/framework and solid-js.

Read the core docs first for production usage.

Usage

Try it now: https://stackblitz.com/edit/reatomnpm-solid-js?file=src%2FApp.tsx

Setup reatomContext

The first time, you need to add the Reatom provider to the root of your application.

1import { createCtx, connectLogger } from '@reatom/framework'
2import { reatomContext } from '@reatom/npm-solid-js'
3
4const ctx = createCtx()
5connectLogger(ctx)
6
7render(
8  () => (
9    <reatomContext.Provider value={ctx}>
10      <App />
11    </reatomContext.Provider>
12  ),
13  document.getElementById('root')!,
14)

useAtom hook

Now you will be able to use Reatom hooks.

1import { atom } from '@reatom/framework'
2import { useAtom } from '@reatom/npm-solid-js'
3
4const countAtom = atom(0, 'countAtom')
5
6const App: Component = () => {
7  const [count, setCount] = useAtom(countAtom)
8
9  return (
10    <div>
11      Count value is
12      <button onClick={() => setCount((c) => c + 1)}>{count()}</button>
13    </div>
14  )
15}

useCtx hook

If you need to get the ctx from the context, you could use the shortcut hook useCtx. With ctx in the component body, you can manipulate subscriptions more flexibly with Solid's onMount, onCleanup, and so on.

Examples

Dynamic atom creation

This example shoes how to use atomization to improve editable fields performance, persists it to localStorage.

https://stackblitz.com/edit/reatomnpm-solid-js-mssqxj?file=src/model.ts,src/App.tsx

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.9

/10

Last Scanned on 2024-12-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More