Please add a Non-Bundler code example (simple browser js) example to the Zustand repo's demo section

[pmeaney]

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:

• Just pure ye olde Browser Javascript (non-bundled, purely native browser code) No babel. No polyfills. No ES6. No CommonJS.
• 1 file: index.html
• The html file contains a Zustand CDN request for Zustand code. (Or, failing that, it could even be a separate .js file.)
• The html file contains 1 script tag, demonstrating the use case of a simple Zustand state machine, such as a button-click counter, as an introduction to some core Zustand state machine features.

One file-- it'll be so much easier to share and demo that way.
And it brings the project down to its ultimate simplicity.

[dbritto-dev]

@pmeaney here you go https://docs.pmnd.rs/zustand/recipes/recipes#using-zustand-without-react

[pmeaney]

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.

[dai-shi]

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.

[pmeaney]

@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)

[dai-shi]

Here, VanillaJS means it's not React specific. What you are asking is non-bundler usage in our (?) terminology.

[dbritto-dev]

@dai-shi I got it, he want to use a standalone version of zustand vanilla (no react code). For instance on redux you have two packages: redux (standalone) and react-redux (peer dep: standalone and react)

[pmeaney]

Thanks! I really appreciate you helping me understand that difference in terminology.

Yep @dbritto-dev that's indeed what I am seeking.

I propose a non-bundler demo example. Preferably consisting of 1 html file, 1 CDN script tag to import Zustand (i.e. Zustand Vanilla) functionalities, and 1 script tag featuring the fsm demo.

(The reason I had VanillaJS in my mind as being non-bundled, purely native browser code is based on this: http://vanilla-js.com/. For example, in its definition of VanillaJS, XMLHttpRequest() is the only VanillaJS way to do an http request-- because it is provided by the browser natively (without any tooling or libraries). So, for example, ajax would be using jquery: a library-- i.e. not pure VanillaJS, in the mind of that author.)

I see this article about "Redux Without React" from 2016 mentions VanillaJS along the same lines as you mentioned: Non-reactJS, but with a bundler. So, that is my mis-understanding. I appreciate you bearing with me.

Versus, this example, "Redux Without React" from 2022 shows a demo of non-bundler code. It's essentially just a simulated usage of redux, without actually using redux itself. This example along the lines of what I am seeking though-- an example without a bundler. Where this example fails to meet the criteria I'd like to see is that it doesn't actually use the redux library itself-- it just shows you how to recreate it, as a sort of simulated mini-redux library in order to learn the main redux concepts.

In that 2nd link-- again, it does not use redux itself but basically shows how its 5 main functionalities work. Though I appreciate its non-bundler JS code (for the sake of simplicity), I would however prefer to actually have a demo example of a state management tool using the state management tool itself (rather than a pseudo-recreation of it for demonstration & learning purposes, which is what the article provides).

That is to say, I would really like a demo example of non-bundler code, using Zustand itself, rather than simulate its usage in non-bundler JS code (as shown in the 2nd link).

That said, not having such a demo is not the end of the world. I can still use Zustand on a relatively-static, low-weight site simply by using a bundler.

My hope though was that creating a non-bundler demo would at least be possible, via a CDN + a script tag (the tag would contain a non-bundler example fsm using the Zustand library supplied by the CDN), within an html file. After a bit of online research, I was not able to find one.
So I figured I would ask here to see if one exists, or if it would be resource-inefficient (in terms of the Zustand team's priorities) to create one. If it's not resource-efficient, I would completely understand.

If it's easy to throw together though, it would be awesome to see.

Edit I updated the language in the title of this thread from "VanillaJS" to "Non-Bundler code example (simple browser js)"

[pmeaney]

Feel free to close / backlog this proposal.

I am going to go with:

• ViteJS's vanilla template, and use Zustand/Vanilla with that as my VanillaJS site.
• Later, I'll go with ViteJS's reactjs + swc template, and use Zustand with that as the ReactJS app.

[pmeaney]

Huge thanks @dai-shi & @dbritto-dev & other maintainers & contributors.

Got a vanilla example going:
https://codesandbox.io/p/sandbox/compassionate-bas-m8wqm6?file=%2Fmain.js%3A35%2C51

• vite -> vanillaJS
• install zustand
• make some changes to the example provided
• test it out... figure it out... and it works. (example of getting & setting state is shown in console)

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:

1. make a public repo.
2. open it as githubbox.com/repoName instead of github.com/repoName
3. it auto-opens in codeSandbox.
4. Super easy way to setup an easily accessible, public, working example of Zustand Vanilla, etc.
5. If I advised a project on how to document examples of its usage, I'd have all examples on CodeSandbox.io following steps 1-3 above. And I'd make sure there were links to the examples on the main project's github readme page.
6. Great example of this sort of "documentation featuring codesandbox examples" on a github page: https://github.com/brucou/kingly#trivial-counter-application

[dai-shi]

I was trying to create a demo with UMD builds. However, while React and Zustand provide UMD, use-sync-external-store doesn't. So, it's technically hard to use 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))

[pmeaney]

Thanks a ton!! I figure I'll end up just going with NextJS SSR for the simplest version of the prototype I am working on.

Looking forward to using Zustand! Thanks so much for Jotai & Zustand!

If I may recommend one thing, it's replicating this KinglyJS documentation layout on the Zustand github page for Zustand code examples:
https://github.com/brucou/kingly#trivial-counter-application

I really like their layout of the data table for showing examples:
A. Diagram
B. UI Result as a .gif video
C. Code Example. In KinglyJS's case, they show a repo. But I would much rather see a Live CodeSandbox Example (And so, perhaps Column C contains two things: 1. CodeSandbox Example 2. Repo-base code example

I think that sort of documentation convention (or layout) brings clarity to the documentation.

[pmeaney]

The reason I like that section of KinglyJS's docs is that it's like CliffNotes -- it's a good summary that jumps me right into the heart of an simple yet solid example.