v1
- by story_arc 4/28/202300
disable setup HTML
Setup HTML
<div id="jotai-root"></div>
<div id="recoil-root"></div>
<div id="zedux-root"></div>
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/recoil@0.7.7/umd/index.js"></script>
<script src="https://unpkg.com/jotai@2.0.4/umd/vanilla.development.js"></script>
<script src="https://unpkg.com/jotai@2.0.4/umd/react.development.js"></script>
<script src="https://unpkg.com/@zedux/react@1.0.0/dist/zedux-react.umd.min.js"></script>
disable setup JavaScript
Setup JavaScript
var Jotai = { ...jotaiReact, ...jotaiVanilla }

var i = 0;
const nextId = () => `${++i}`

const jotaiStore = Jotai.createStore()

const jotaiAtom1 = Jotai.atom(0)
const jotaiAtom2 = Jotai.atom((get) => get(jotaiAtom1) + 1)
jotaiAtom1.debugLabel = nextId()
jotaiAtom2.debugLabel = nextId()

jotaiStore.sub(jotaiAtom2, () => {})

const updateJotai = () => jotaiStore.set(jotaiAtom1, jotaiStore.get(jotaiAtom1) + 1)

const recoilAtom1 = Recoil.atom({
  key: nextId(),
  default: 0,
});

const recoilSelector = Recoil.selector({
  key: nextId(),
  get: ({get}) => get(recoilAtom1) + 1
})

function Test() {
  const setVal = Recoil.useSetRecoilState(recoilAtom1);
  return React.createElement('button', { id: "recoil-updater", onClick: () => setVal(val => val + 1) })
}

var updateRecoil

ReactDOM.render(React.createElement(Recoil.RecoilRoot, {}, React.createElement(Test)), document.getElementById('recoil-root'), () => {
  const el = document.getElementById('recoil-updater')
  updateRecoil = () => el.click()
})

const zeduxAtom1 = ZeduxReact.atom('1', 0)
const zeduxAtom2 = ZeduxReact.ion('2', ({ get }) => get(zeduxAtom1) + 1)

const ecosystem = ZeduxReact.createEcosystem()
const instance1 = ecosystem.getInstance(zeduxAtom1)
const instance2 = ecosystem.getInstance(zeduxAtom2)
instance2.store.subscribe(() => {})

const updateZedux = () => instance1.setState(state => state + 1)
delete caserun single casemove downdrag and drop case


ready



const atom = ZeduxReact.atom(nextId(), 0)
delete caserun single casemove upmove downdrag and drop case


ready



const atom = Jotai.atom(0)
atom.debugLabel = nextId()
delete caserun single casemove updrag and drop case


ready



const atom = Recoil.atom({ key: nextId(), default: 0 })
Test Case - click to add another test case
Teardown JS - click to add teardown JavaScript
Output (DOM) - click to monitor output (DOM) while test is running
RUN