Add installation instructions to the README #1088

nilslindemann · 2023-11-30T19:57:50Z

Feel free to modify as you desire, @paldepind

Explain how to install this thing, especially the examples.

nilslindemann · 2023-11-30T20:02:26Z

I do not understand the failing test. This is just an edit in the README.

iambumblehead · 2023-11-30T20:16:25Z

the browser test pipeline fails intermittently and frequently on first-push

❌ The browser was unable to create and start a test page after 30000ms. You can increase this timeout with the browserStartTimeout option. (failed on firefox)

if you push up any sort of small change to trigger the pipeline it usually passes on the second try

paldepind · 2023-11-30T20:53:08Z

I think these instructions are great. But I'm not sure about how best to include them in the readme. To me at least, an "installation" section means what users have to do to install a library in their own project.

Perhaps this section could be included in the CONTRIBUTING.md? That would make sense if we think the instructions are for people who want to contribute. But, these instructions are also useful for people who just want to play around with the example. So we could also include the instructions as a "How to run the examples" section. What do you think @nilslindemann?

nilslindemann · 2023-11-30T20:53:41Z

Thanks, @iambumblehead, that's an unusual pipeline. But it was a good fail, because I found a few other things to fix.

nilslindemann · 2023-11-30T21:07:35Z

@paldepind

rename section to "How to run the examples"

That is a good point. See my commit "Rename and move installing instructions". In that new context, I also moved the instructions below the section "More examples". Let me know if there are issues.

Add "installation" section to CONTRIBUTING.md which also explains what users have to do to install a library in their own project, and for people who want to contribute.

That is also an excellent idea. I do not know how to install snabbdom as a library, so I would like to ask someone more experienced than me to do that :-)

nilslindemann · 2023-11-30T21:17:15Z

Sorry, I saw too late that you use a specific commit format.

README.md

According to kuraga's suggestions

nilslindemann · 2023-12-01T20:07:25Z

I would be very interested, as paldepind already mentioned, to also add a paragraph, how to add snabbdom as a project dependency. I just tried to do that by adding it to the dev dependencies in package.json but failed. Could someone help out here?

Also, I think we could then move that section as simply "Installation" below the TOC (or into CONTRIBUTING.md and point to it, I do not mind where it is, as long as it is somewhere)

kuraga · 2023-12-01T20:13:35Z

@nilslindemann , npm install snabbdom inside the project's root. Or, add snabbdom in package.json, then npm install.

kuraga · 2023-12-01T20:15:08Z

README.md

+
+```bash
+npm test
+````


There is one redundant tilde.

kuraga · 2023-12-01T20:16:11Z

README.md

+```bash
+git clone https://github.com/snabbdom/snabbdom  # clone the snabbdom repository
+cd snabbdom
+npm install  # install the requirements


Suggested change

npm install # install the requirements

npm install # install the dependencies

kuraga · 2023-12-01T20:18:33Z

README.md

+- [Example](#example)
+- [More examples](#more-examples)
+  - [How to run the examples and tests locally](#how-to-run-the-examples-and-tests-locally)
+- [Table of contents](#table-of-contents)


Suggested change

- [Table of contents](#table-of-contents)

kuraga · 2023-12-01T20:19:20Z

README.md

@@ -118,16 +118,48 @@ patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new
 - [Hero transitions](http://snabbdom.github.io/snabbdom/examples/hero/)
 - [SVG Carousel](http://snabbdom.github.io/snabbdom/examples/carousel-svg/)

+### How to run the examples and tests locally


Suggested change

### How to run the examples and tests locally

## How to run the examples and the tests

kuraga · 2023-12-01T20:19:37Z

README.md

+- [Features](#features)
+- [Example](#example)
+- [More examples](#more-examples)
+  - [How to run the examples and tests locally](#how-to-run-the-examples-and-tests-locally)


kuraga · 2023-12-01T20:21:29Z

Also, I think we could then move that section as simply "Installation" below the TOC (or into CONTRIBUTING.md and point to it, I do not mind where it is, as long as it is somewhere)

Add the ## Installation section (one of the first ones).

nilslindemann · 2023-12-01T20:50:22Z

@kuraga

npm install snabbdom inside the project's root. Or, add snabbdom in package.json, then npm install.

Ok, it is a few months since I did this last and I forgot a few things, it seems.

This is what I did:

Create a folder snabbdom-test

cd snabbdom-test
npm init
npm install snabbdom

Create a file examples/index.html¹ with the contents:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>snabbdom Test</title>
</head>

<body>
    <div id="container"></div>
    <script src="examples/logic.js"></script>
</body>

</html>

Create a file examples/logic.js [1] having the example given in the README as content.

Run npx serve. Go on http://localhost:3000/examples.

Now the browser console gives Uncaught SyntaxError: Cannot use import statement outside a module (at logic.js:1:1) This is the point where I forgot what I need to do. Can you give me a hint, @kuraga ?

¹ in a folder examples, because npx serve redirects to this folder. Dunno why it does that.

kuraga · 2023-12-01T20:57:14Z

@nilslindemann , well. "install to get the snabbdom module importable" (in the server script) and "install to get the Snabbdom working in the browser" are different intentions :)

Now, you're able to run something like the Example in nodejs REPL.

But yeah, a good point to mention.

To others: Rollup, Webpack?

nilslindemann · 2023-12-01T21:01:42Z

So, @kuraga, I would love to have this documented. We should do that.

What could be a minimal node.js helloworld repl example which does something useful, but does it with snabbdom technology?
Minimal browser example with webpack/Rollup?

I will for the moment just commit your above fixes but leave the chapter where it currently is.

@kuraga

Suggested by @kuraga

kuraga · 2023-12-01T21:09:27Z

@nilslindemann , formally,

What could be a minimal node.js helloworld repl example which does something useful, but does it with snabbdom technology?

The Example's code.

Minimal browser example

Like in the examples/* directories with some commands from npm run build.

As for

Minimal browser example with webpack/Rollup?

So, I would love to have this documented. We should do that.

Yes. Later.

And maybe it's out of scope.

nilslindemann · 2023-12-01T21:38:11Z

No. Not later. Now or never. So never.

Add installation instructions

1d39958

Explain how to install this thing, especially the examples.

nilslindemann mentioned this pull request Nov 30, 2023

How to build? #960

Closed

iambumblehead mentioned this pull request Nov 30, 2023

chore(test): increase browserStartTimeout, reduce frequent pipeline timeout failure #1089

Merged

nilslindemann added 3 commits November 30, 2023 21:50

repo -> repository

fed3c5e

Fix "Array<vnode>"

58ce4ad

Update TOC

03af0d8

Rename and move installing instructions

7214e09

kuraga reviewed Dec 1, 2023

View reviewed changes

README.md Outdated Show resolved Hide resolved

docs: reformat installing instructions

b5045e4

According to kuraga's suggestions

kuraga reviewed Dec 1, 2023

View reviewed changes

README.md Outdated

```bash

npm test

````

Copy link

kuraga Dec 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is one redundant tilde.

kuraga reviewed Dec 1, 2023

View reviewed changes

docs: fixes in installing instructions

f92df6c

Suggested by @kuraga

nilslindemann closed this Dec 1, 2023

This was referenced Dec 2, 2023

Some thoughts (low priority) #1091

Open

List of unfairly closed issues and pull requests (important things are there!) #1017

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add installation instructions to the README #1088

Add installation instructions to the README #1088

nilslindemann commented Nov 30, 2023 •

edited

Loading

nilslindemann commented Nov 30, 2023

iambumblehead commented Nov 30, 2023

paldepind commented Nov 30, 2023

nilslindemann commented Nov 30, 2023

nilslindemann commented Nov 30, 2023

nilslindemann commented Nov 30, 2023

nilslindemann commented Dec 1, 2023 •

edited

Loading

kuraga commented Dec 1, 2023

kuraga Dec 1, 2023

kuraga Dec 1, 2023

kuraga Dec 1, 2023

kuraga Dec 1, 2023

kuraga Dec 1, 2023

kuraga commented Dec 1, 2023

nilslindemann commented Dec 1, 2023 •

edited

Loading

kuraga commented Dec 1, 2023

nilslindemann commented Dec 1, 2023

kuraga commented Dec 1, 2023

nilslindemann commented Dec 1, 2023

	npm install # install the requirements
	npm install # install the dependencies

	### How to run the examples and tests locally
	## How to run the examples and the tests

Add installation instructions to the README #1088

Add installation instructions to the README #1088

Conversation

nilslindemann commented Nov 30, 2023 • edited Loading

nilslindemann commented Nov 30, 2023

iambumblehead commented Nov 30, 2023

paldepind commented Nov 30, 2023

nilslindemann commented Nov 30, 2023

nilslindemann commented Nov 30, 2023

nilslindemann commented Nov 30, 2023

nilslindemann commented Dec 1, 2023 • edited Loading

kuraga commented Dec 1, 2023

kuraga Dec 1, 2023

Choose a reason for hiding this comment

kuraga Dec 1, 2023

Choose a reason for hiding this comment

kuraga Dec 1, 2023

Choose a reason for hiding this comment

kuraga Dec 1, 2023

Choose a reason for hiding this comment

kuraga Dec 1, 2023

Choose a reason for hiding this comment

kuraga commented Dec 1, 2023

nilslindemann commented Dec 1, 2023 • edited Loading

kuraga commented Dec 1, 2023

nilslindemann commented Dec 1, 2023

kuraga commented Dec 1, 2023

nilslindemann commented Dec 1, 2023

nilslindemann commented Nov 30, 2023 •

edited

Loading

nilslindemann commented Dec 1, 2023 •

edited

Loading

nilslindemann commented Dec 1, 2023 •

edited

Loading