Some thoughts (low priority)

Question

Some thoughts (low priority)

kuraga opened this issue 7 months ago · comments

Alexander Kurakin commented 7 months ago

Good day!

I have some thoughts not discovered in the issues/PRs. Nobody needs to react, just thoughts.

Snabbdom is written in TypeScript. So, we should describe / put an example in TypeScript. BTW, I don't know the standard way? Maybe move one of our examples to it.
As @nilslindemann noticed in #1088 , we could describe / put an example of a totally cooked project. Bundled with Rollup, Webpack? Maybe move one of our examples to it.
As I noticed in #1088 , we don't have the ## Installation section in README.md. (A simple one.)
Did we consider which files we store in the NPM package? To store/not to store the source, the tests, etc.
According the changelog is automatically contented de-facto, we should think more about commit messages and PR titles.
CONTRIBUTING.md looks not full.
README-in_HN.md and README-zh_CN.md will be outdated soon.
Are all devDependencies needed? And: some of them is strictly fixed (without neither ^ nor ~), why?
We have npm run build which builds everything. But maybe we would extract npm run build-examples, etc.
Finish to label issues/PRs :).
#1017.
Add Snabbdom to https://github.com/krausest/js-framework-benchmark/.
There are many of any type usages.

Thanks!

Nils Lindemann · Answer 1 · Sun Dec 03 2023 08:53:01 GMT+0800 (China Standard Time)

I would like to repeat/extend/add to these points by @kuraga, what especially interests me to be added to the snabbdom docs:

How to get the examples locally running (see my linked PR).
What may some error messages mean, when running the tests (E.g. the missing CHROME_VERSION env var error).
A simple workflow how to make a website, using snabbdom as a dependency (e.g. using Parcel¹/webpack/rollup).
Maybe a Deno workflow.

I promise a German translation of the final docs.

¹ Here a working example for Parcel. Feel free to use it in the docs:

npm init -y
npm install --save-dev parcel
npm install snabbdom

Create a src/index.html:

<!doctype html>
<html>
    <head>
        <title>Snabbdom + Parcel Example</title>
        <script type="module" src="logic.ts"></script>
    </head>
    <body>
        <h1 id="heading">Unpatched</h1>
    </body>
</html>

Create a src/logic.ts (inspired by the example in the README):

import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
} from "snabbdom";

const patch = init([
    // Init patch function with chosen modules
    classModule, // makes it easy to toggle classes
    propsModule, // for setting properties on DOM elements
    styleModule, // handles styling on elements with support for animations
    eventListenersModule, // attaches event listeners
]);

const replaceWithLinks = () => {
    console.log("Becoming links");
    patch(greeting, link);
};

const replaceWithGreeting = () => {
    console.log("Becoming a greeting");
    patch(link, greeting);
};

const greeting = h("h1#heading.greeting", { on: { click: replaceWithLinks } }, [
    h("span", { style: { color: "blue" } }, "Hello World!"),
    " (click me)",
]);

const link = h("h1#heading.link", { on: { click: replaceWithGreeting } }, [
    "Brought to you by ",
    h("a", { props: { href: "https://github.com/snabbdom" } }, "snabbdom"),
    " and ",
    h("a", { props: { href: "https://parceljs.org/" } }, "Parcel"),
    " (click me again)",
]);

const heading = document.getElementById("heading"); if (!heading) {throw "I need a h1#heading"};

patch(heading, greeting);

Start the parcel dev server:

npx parcel src/index.html

iambumblehead · Answer 2 · Mon Dec 04 2023 02:44:48 GMT+0800 (China Standard Time)

@kuraga should submit a PR adding Snabbdom to the test suite at https://github.com/krausest/js-framework-benchmark/ :D