Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jul 20 09:38
    tjenkinson synchronize #1028
  • Jul 20 08:45
    tjenkinson synchronize #1029
  • Jul 20 08:01
    tjenkinson synchronize #1030
  • Jul 19 14:41
    tjenkinson edited #1030
  • Jul 19 14:34
    tjenkinson opened #1030
  • Jul 19 13:48
    tjenkinson opened #1029
  • Jul 19 13:25
    tjenkinson synchronize #1028
  • Jul 19 13:10
    tjenkinson opened #1028
  • Jul 17 13:06
    ruojianll opened #1027
  • Jul 09 01:55
    iambumblehead edited #1026
  • Jul 09 01:53
    iambumblehead opened #1026
  • Jul 06 01:24

    dependabot[bot] on npm_and_yarn

    chore(deps): bump parse-url fro… (compare)

  • Jul 06 01:24
    dependabot[bot] labeled #1025
  • Jul 06 01:24
    dependabot[bot] opened #1025
  • Jun 23 06:49
    kuraga edited #1018
  • Jun 23 04:59
    FujiHai opened #1024
  • Jun 22 11:32
    TechQuery commented #1022
  • Jun 22 11:31
    TechQuery commented #1022
  • Jun 22 09:14

    jvanbruegge on master

    chore(release): v3.5.1 (compare)

  • Jun 22 09:14

    jvanbruegge on v3.5.1

    (compare)

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
@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
Isaac Shapira
@fresheyeball_gitlab
hey there
how the heck do I build this thing?
npm run compile results in javascript files that do not work in the browser as is
that the closetest I found!
Dave Smith
@davesmith00000
Hello, I'm using a framework that uses snabbdom under the hood and I'm having a problem where HTML entities like & and   are being renderer as text (i.e. you literally see the characters on the screen, not the symbol) - anyone know what might be going on there? (There's a good chance this isn't snabbdom related, I'm out of practice... :-) )
Didier Prophete
@dprophete
@davesmith00000 : here is an example: h("text", {}, "a & b, or a & b")
nothing gets escaped there so it will literally display a & b, or a & b
out of curiosity, has anybody managed to use <template> properly ?
I am trying to figure out what exactly I need to repro this html:
<div>
    <template>
    <style>h1 { color: red; }</style>
    </template>
</div>
I tried
h("div", {}, [
    h("template", {}, [h("style", {}, "h1 { color: red; }")]),
])
and it's almost there but the style is not quite inside the template as a proper document fragment (I also tried to use the new fragment function from snabbdom but I can't seem to get it to properly generate a fragment inside the template)
image.png
this is what I want to generate ^^
Didier Prophete
@dprophete
and this is what I always end up with:
image.png
(notice how in the snabbdom output the <style> is NOT inside the #document-fragment). This is driving me nuts :-)
Didier Prophete
@dprophete

ok, just found the answer. If anybody is interested, this is what worked for me:

h(
    "template",
    { props: { innerHTML: "<style>h1 { color: red; }" } },
    []
),

(yes, it feels a little bit like cheating, but it works :-)

pbal
@pbal_gitlab
Im trying to use styleModule props delayed and remove
although this works, typescript keeps erroring at compile
Property 'delayed' is incompatible with index signature. Type '{ opacity: string; }' is not assignable to type 'string'
 style: {
            opacity: '0',
            transition: 'opacity 1s',
            delayed: { opacity: '1' }
          }