-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Some thoughts (low priority) #1091
Comments
I would like to repeat/extend/add to these points by @kuraga, what especially interests me to be added to the snabbdom docs:
I promise a German translation of the final docs. 1 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 <!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 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 |
@kuraga should submit a PR adding Snabbdom to the test suite at https://github.com/krausest/js-framework-benchmark/ :D |
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 Add installation instructions to the README #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 Add installation instructions to the README #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
andREADME-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 extractnpm run build-examples
, etc.Finish to label issues/PRs :).
List of unfairly closed issues and pull requests (important things are there!) #1017.
Add Snabbdom to https://github.com/krausest/js-framework-benchmark/.
There are many of
any
type usages.Thanks!
The text was updated successfully, but these errors were encountered: