Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 19 04:03
    jon49 commented #257
  • Aug 11 19:02
    dependabot[bot] labeled #434
  • Aug 11 19:02
    dependabot[bot] opened #434
  • Aug 11 19:02

    dependabot[bot] on npm_and_yarn

    Bump path-parse from 1.0.6 to 1… (compare)

  • Aug 11 19:02
    dependabot[bot] review_requested #434
  • Jul 30 13:22

    dependabot-preview[bot] on npm_and_yarn

    (compare)

  • Jul 30 13:22
    dependabot-preview[bot] closed #432
  • Jul 30 13:22
    dependabot-preview[bot] commented #432
  • Jul 30 13:22
    dependabot-preview[bot] labeled #433
  • Jul 30 13:22
    dependabot-preview[bot] review_requested #433
  • Jul 30 13:22
    dependabot-preview[bot] opened #433
  • Jul 30 13:22

    dependabot-preview[bot] on npm_and_yarn

    Bump rollup from 2.44.0 to 2.55… (compare)

  • Jul 28 13:35

    dependabot-preview[bot] on npm_and_yarn

    (compare)

  • Jul 28 13:35
    dependabot-preview[bot] closed #430
  • Jul 28 13:35
    dependabot-preview[bot] commented #430
  • Jul 28 13:35
    dependabot-preview[bot] labeled #432
  • Jul 28 13:35
    dependabot-preview[bot] review_requested #432
  • Jul 28 13:35
    dependabot-preview[bot] opened #432
  • Jul 28 13:35

    dependabot-preview[bot] on npm_and_yarn

    Bump rollup from 2.44.0 to 2.55… (compare)

  • Jul 27 13:23
    dependabot-preview[bot] labeled #431
Mikko Ahlroth
@Nicd
Just don't look at the code 😅
Juha Lindstedt
@pakastin
Haha 😄
Jonas Hungershausen
@jonas-jonas
Hi there! I was wondering, what the best way is to load existing elements (including children) into the redom cache (?). I tried using el with a reference to the actual dom node. That works in part because it doesn't load children of the node.
I'm asking because we render our lists using thymeleaf (java html templating) on the server side but then I'd like to do some operations on the list using redom (after fetching data from the server using fetch). I'd rather not supply the list's content with some kind of rendered json and then render the actual html lists on the client side.
Joona Kulmala
@joona
@jonashungershausen best way I've found is just to initialize those references from DOM. if you are prerendering a list, in most cases you can probably recreate the whole list from the API response. in this case you only need to initialize references to it's ancestors
you can do this.el = document.querySelector('.your-prerendered-component') in the constructor of the component, and it should just work
Will Hoskings
@def14nt
Damn, I'm also making a dom library. In my opinion, the size of the bundled code doesn't matter, because it's designed to be tree shaken if it's written in es6 modules. Nice to be writing a library without coming into contact with a class, lol.
Also, I can't believe people prefer jQuery to this marvellous library. I really don't get it, this is better in every way. es6 modules, tree-skaing, minimal, clean code. Guess old habits really do die hard.
Juha Lindstedt
@pakastin
👍
Will Hoskings
@def14nt
Think you should do some sort of "What sites are using redom" to show redom off a bit tbch
I watched that presentation video thingy, very simple and basic
Juha Lindstedt
@pakastin
That’s a good idea! 👍
NilsonBF
@NilsonBF
Just started playing with redom... im trying to use codemirror plugin but im facing some issues, anyone more?
Juha Lindstedt
@pakastin
Hi @NilsonBF! What kind of issue do you have?
MrSorcus
@MrSorcus
https://medium.com/re-dom/components-with-static-and-dynamic-content-eb953d56e913
Broken link here Memory usage is also very low, thanks to the class support and the way RE:DOM uses the DOM.
https://github.com/redom/redom/blob/master/src/setchildren.js - 404.
Juha Lindstedt
@pakastin
Thanks for letting know, I’ll fix that! 👍
Happy new year too! 🎉
MrSorcus
@MrSorcus
:HAPPY:
MrSorcus
@MrSorcus
Hi there.
MrSorcus
@MrSorcus

redom/redom#121
Here @vp2177 said about fragments.
From MDN - The DocumentFragment interface represents a minimal document object that has no parent.
And that can be useful for codes without wrappers.
https://gist.github.com/MrSorcus/3531cb2f1132caca130ab177df79070c
That code from this issue redom/redom#93
After all code must looks as

<form>
  <input>
  <input>
  <input>
  <button>Submit</button>
</form>

Without any div wrappers. Because it can break visual part (CSS).
Must it be a part of RE:DOM or not?

Juha Lindstedt
@pakastin
It’d be nice, but hard to execute..
camillo777
@camillo777
Hi, how can I add an onclick event to a redom component? Like a button. I tried putting them
constructor () {
this.el = el('button', {value: 'play', type:'button', name: 'play', onclick:'play(midi)'});
}
But it doesn't work
Crazy_Phage
@lostpupil
@camillo777
this.clear.onclick = evt => {
    this.update(this.data.filter(item => !item.done));
};
https://redom.js.org/#todomvc See the docs here
flery
@flery
Hi, I created an issue (#173) some time ago regarding list constructor function, which was solved by an existing feature. Thing is I am using typescript and I think the type def is not up to date for that feature. Should the list creation type def not use 'RedomComponentCreator' instead of 'RedomComponentConstructor'?
Juha Lindstedt
@pakastin
I've never used TypeScript, hope someone using it could answer..
Types are here if you want to make a pull request: https://github.com/redom/redom/blob/master/index.d.ts
flery
@flery
Yes that's how I came to the conclusion by reading the index.d.ts, but I am just not too familiar with it either. Would make a pull request if I was sure. Maybe I should create an issue to get someone more knowledgeable on it to provide input?
Karthik Ganeshram
@karthik2804
HI, I am relatively new to redom. Is there anyway to use animation on the onunmount function of a component?
Juha Lindstedt
@pakastin
Hi! That’s a bit too late because unmount means it’s getting deleted immediately after
Karthik Ganeshram
@karthik2804
so is there anyway to do it? One possible solution I see for my use case is that when want to change route on click an element is maybe add class first and use async await to call change route after a specified duration. Or is ther any better solution to it? Thanks
Juha Lindstedt
@pakastin
I’ve just created custom
components for that
Router for example is really simple: https://github.com/redom/redom/blob/master/esm/router.js
Karthik Ganeshram
@karthik2804
I am not sure I understand what you mean by custom components but ive manged to get the animation working by making the router update a sync function and using await for a sleep function after calling onebeforeunmount() on the component being unmounted. I am sure this isnt the ideal solution but it works for my current use case. Thanks for your help
Juha Lindstedt
@pakastin
Glad you got it working! 👌
Karthik Ganeshram
@karthik2804
Router.prototype.update = async function update (route, data,  delay = 0) {
    if (route !== this.route) {
      if (this.route && delay != 0) {
        this.Views[this.route].onbeforeunmount()
        await sleep(delay)
      }
// rest unchanged

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}
this is what I came up with.
Juha Lindstedt
@pakastin
Nice! That's the benefit of using RE:DOM – there's no black magic, just simple JS. 👌
flery
@flery
good day, another typescript thing I noticed. Redom Place only supports the constructor type, but maybe should be RedomElQuery. The documentation does not state anywhere which components actually support a factory function, a component constructor, direct string representation or a return value of el/svg or the like (ignoring any typescript related stuff). If the documentation would be more comprehensive I would love to investigate the actual shortcomings of the type definitions. I can try to guess/read the code for what is actually supported and provide/suggest doc improvements as well if desired? Would such an effort be welcome?
RhaldKhein
@rhaldkhein
Hi, any place to showcase apps built with redom?
Juha Lindstedt
@pakastin
Hi! I’d love to mention in either github repo and/or website. Please add an issue or PR to redom repo or redom docs repo, thanks!
What comes to Typescript, please add issue or PR for that, thanks! 👍
RhaldKhein
@rhaldkhein
@pakastin , PR sent on docs repo. 🙂 thanks
Joe Carpenter
@explodec14_twitter
Hello Everyone - i am new here. I need your kind help! I need to know if there is some kind of an event in RE:DOM which tells me that element is already mounted. if not, how can i know this?
Juha Lindstedt
@pakastin
remount
Juha Lindstedt
@pakastin

Hi all! Just to let you know, I just activated Discussions on Github: https://github.com/redom/redom/discussions

Have fun!