snabbdom/snabbdom

A virtual DOM library with focus on simplicity, modularity, powerful features and performance.

Sebastian Boutin Blomfield

@sebovzeoueb

Hey, I was using the older version of snabbdom with require before, and now I've started up a new project and I see that now it uses ES6 modules with import instead

I'm using webpack, and I can't for the life of me get it to work at all

if I follow the example from the github page I just get

ERROR in ./main.js
Module not found: Error: Can't resolve 'snabbdom/init' in 'F:\test'

is there something special I need to do in webpack to make it work?

I feel like I must just be doing something stupid here, but I can't figure out what

I did npm i webpack webpack-cli snabbdom in my test project

and then I have a script in the package that does webpack -w

all this was working just fine with the CommonJS snabbdom

Sebastian Boutin Blomfield

@sebovzeoueb

and so far my main.js just has import {init} from 'snabbdom/init'

like the top line of the example

and webpack just seems unable to find the whole snabbdom module

Sebastian Boutin Blomfield

@sebovzeoueb

and it's not just webpack, vscode isn't generating any suggestions either

it's like it just didn't install at all

Sebastian Boutin Blomfield

@sebovzeoueb

well, it suggests snabbdom, but then only the build and src directories

I don't see any of the exports

Sebastian Boutin Blomfield

@sebovzeoueb

huh, if I'm understanding the issue correctly, stable version webpack doesn't support the package.json exports yet

Sebastian Boutin Blomfield

@sebovzeoueb

OK, I can confirm that it's the problem

you have to use webpack@next otherwise snabbdom's exports don't work

Géraud Henrion

@fuunnx

I can confirm I also have to import under the snabbdom/build folder :

import { eventListenersModule } from "snabbdom/build/package/modules/eventlisteners";

Sebastian Boutin Blomfield

@sebovzeoueb

yeah, I guess that's the other way to do it

Bruce Stockwell

@stockwellb

how do I get to things like :focus for css instead of using events?

h("input", { style: { ...baseStyle, ...style }, props: { ...rest }, on: { focus: (e) => (e.target.style.border = "1px solid black") }, },[children] )

Patrick Kelly

@patomation

good question @stockwellb, I'm going to try this out and get back to you.

Patrick Kelly

@patomation

Hmm, maybe someone else can chime in that has more experience, but you may have to use a library like styled-jss or radium to handle pseudo selectors

Patrick Kelly

@patomation

@fuunnx @sebovzeoueb another solution besides using webpack@next is to use an alias in webpack.config

module.exports = {
  ...
  resolve: {
    alias: {
      snabbdom: path.resolve(__dirname, 'node_modules', 'snabbdom', 'build', 'package')
    }
  }
}

Then for TypeScript in the tsconfig

{
    ...
    "paths": {
      "snabbdom/*": ["node_modules/snabbdom/build/package/*"]
    }
  }
}

Géraud Henrion

@fuunnx

thanks 👍

Bruce Stockwell

@stockwellb

@patomation thanks for looking into that for me.

Patrick Kelly

@patomation

Has anyone been able to get testing working with their apps? I'm having a hell of a time. I would use mocha, jest or ava which ever one works.

Patrick Kelly

@patomation

Is Snabbdom not participating in Hacktoberfest?

Sebastian Boutin Blomfield

@sebovzeoueb

did 2.0 break event handler arrays?

I'm making a simple test project to show off snabbdom and stuff that I used to do doesn't work anymore :D

  h('div.button', {on: {click: e => send({type: 'increment'})}}, 'Increment'),
  h('div.button', {on: {click: [send, {type: 'increment'}]}}, 'Increment'),

top one works as intended, bottom one the mouse event is being sent to the send function instead of that object

the documentation suggests that the bottom one should still work

is this a bug or has 2.0 changed the way this feature works?

Sebastian Boutin Blomfield

@sebovzeoueb

also is there anywhere that the changelogs are published between versions?

would be nice to know if there's a good reason to upgrade

I'm currently on 1 with current projects

Mike Reinstein

@mreinstein

https://github.com/snabbdom/snabbdom/blob/master/CHANGELOG.md

Mike Reinstein

@mreinstein

@patomation have you tried browser-env ? it's a pretty reasonable shim for getting some window-like globals into node processes. I've used it for testing other dom related stuff: https://www.npmjs.com/package/browser-env

Sebastian Boutin Blomfield

@sebovzeoueb

of course it's in CHANGELOG.md, silly me :D

@mreinstein is my issue above what's referred to as loaded/carrying eventlisteners?

or did I find a bug?

Mike Reinstein

@mreinstein

@sebovzeoueb 2.0 removed support for the feature you're referring to. see snabbdom/snabbdom#802

Sebastian Boutin Blomfield

@sebovzeoueb

oh cool, the readme should be updated to reflect this

Mike Reinstein

@mreinstein

it's in the changelog, that is the appropriate place for documenting changes

Sebastian Boutin Blomfield

@sebovzeoueb

Yes, but the Readme has a whole section explaining this feature that is no longer a feature

a bit confusing to have it on the project's landing page if it's no longer supported

Mike Reinstein

@mreinstein

if it's on the landing page, my guess would be that it's gotten enough questions around it that someone thought it wise to put it directly on the readme in an effort to reduce the github issue noise. An exceptional situation. ;) I think probably it could be removed from the readme at some point, as 2.0 release date slides further into history

Sebastian Boutin Blomfield

@sebovzeoueb

No, I mean the opposite of that, the readme talks about this feature including a code example, leading you to believe that you can use the old array handler, when in fact you can't do that anymore.

Had that section been deleted I would have noticed that it was no longer listed as a feature, which it currently is quite prominently

Where communities thrive

People

Repo info

Activity