Replies: 7 comments 5 replies
-
@pmeaney here you go https://docs.pmnd.rs/zustand/recipes/recipes#using-zustand-without-react |
Beta Was this translation helpful? Give feedback.
-
Thanks @dbritto-dev I saw that and it's useful if I am using Polyfills, for example to use ES6 style import statements and converting via babel transpilation into browser readable code. What I am seeking through, is to write plain browser code. 1 html file, 1 Zustand CDN script tag, 1 <script> tag for my vanillaJS code... is the criteria for what I consider a vanillaJS [minimalist] project. Worst come to worst-- Ok I may have to go with ES6 -> Transpiling -> Browser code. But in my book, this doesn't count as "vanillaJS" when you have to transpile code for consumption by a browser. In my book VanillaJS means plain browser javascript. |
Beta Was this translation helpful? Give feedback.
-
UMD bundles are provided, but no docs. I wonder if we should drop it (like Redux does) and let people use third party tool like esm.sh. |
Beta Was this translation helpful? Give feedback.
-
@dai-shi thanks for introducing me to UMB bundles & esm.sh! Those look interesting! (Note: I just now updated my initial ask with the Project Criteria I request at the bottom.) In terms of my use case: I want to build a simple html/css/vanilla-browser-javascript site/app based on a state machine, such that I can then copy the state machine to a reactJS application (as a starting point). But the prototype will still (once it evolves) be the public, SEO static (yet semi-dynamic) website. The ReactJS app will simply expand upon the simple site/app with additional features (& additional state machine logic) while presenting the same overall UX layout. And when I see "This works with VanillaJS"... I expect to not have to use non-vanillaJS tools such as babel to work with it. (Rhetorical Question To clarify-- if transpiling & using polyfills is VanillaJS... then what isn't VanillaJS? ...again, in my book, such things are not VanillaJS. Plain browser JS without needing transpilation is VanillaJS) |
Beta Was this translation helpful? Give feedback.
-
Feel free to close / backlog this proposal. I am going to go with:
|
Beta Was this translation helpful? Give feedback.
-
Huge thanks @dai-shi & @dbritto-dev & other maintainers & contributors. Got a vanilla example going:
I wish the Zustand Vanilla example was a live CodeSandbox example, similar to my link above. This example is super janky & basic currently, but the code works (whereas the vanillaJS example on the github page needed a little fixing up. e.g. setState instead of set, within the store) Super cool thing I learned today:
|
Beta Was this translation helpful? Give feedback.
-
I was trying to create a demo with UMD builds. However, while React and Zustand provide UMD, Here's a demo with esm.sh: https://jsfiddle.net/uo7ac4ys/ import {
createElement
} from "https://esm.sh/react@18.2.0";
import {
createRoot
} from "https://esm.sh/react-dom@18.2.0/client";
import {
create
} from "https://esm.sh/zustand@4.4.1";
const useCountStore = create((set) => ({
count: 0,
inc: () => set((state) => ({
count: state.count + 1
})),
}));
const App = () => {
const {
count,
inc
} = useCountStore();
return createElement('div', null,
count,
createElement('button',{onClick:inc}, 'Click Me'));
};
createRoot(document.getElementById('root')).render(createElement(App)) |
Beta Was this translation helpful? Give feedback.
-
I've read Zustand can work with VanillaJS. Yet I have yet to find such an example. Everything I see is with ReactJS + Zustand. I am interested in VanillaJS + Zustand.
So, if the Zustand team claims Zustand works with VanillaJS-- I don't doubt it-- but I would greatly appreciate some examples. Thanks!
Oh, and when I say "VanillaJS" I mean: VanillaJS. No Babel compiling.
Just pure old school Browser JS: An example of one index.html file, with one script tag. <-- One file total. Nothing fancy. A CDN of Zustand preceding that <script> tag is fine. But no Parcel/Babel/Webpack/Polyfill, etc.
edit
Criteria:
One file-- it'll be so much easier to share and demo that way.
And it brings the project down to its ultimate simplicity.
Beta Was this translation helpful? Give feedback.
All reactions