Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jul 09 14:26

    papandreou on master

    Fix CHANGELOG generation in pre… (compare)

  • Jun 05 12:09

    papandreou on master

    Unskip test that succeeds now w… (compare)

  • May 31 05:48
    papandreou synchronize #784
  • May 31 05:47

    papandreou on camelCase

    Sketch out some basic tests Slow, naive implementation of t… Support camel case syntax withi… and 16 more (compare)

  • May 31 05:41

    papandreou on master

    Fix typos in test descriptions (compare)

  • May 31 05:28
    papandreou synchronize #784
  • May 31 05:28

    papandreou on camelCase

    Clean (compare)

  • May 30 22:10
    papandreou synchronize #784
  • May 30 22:10

    papandreou on camelCase

    simplify (compare)

  • May 30 21:42
    papandreou synchronize #784
  • May 30 21:42

    papandreou on camelCase

    fix Unhack (compare)

  • May 30 21:11
    papandreou synchronize #784
  • May 30 21:11

    papandreou on camelCase

    Hacketyfix (compare)

  • May 29 20:56
    papandreou synchronize #784
  • May 29 20:56

    papandreou on camelCase

    fix (compare)

  • May 29 20:48
    papandreou synchronize #784
  • May 29 20:48

    papandreou on camelCase

    Fix shifty legacy mode (compare)

  • May 29 20:38
    papandreou synchronize #784
  • May 29 20:38

    papandreou on camelCase

    Fiddle (compare)

  • May 28 22:20
    papandreou synchronize #784
Gustav Nikolaj
@gustavnikolaj
  1. Why is the api functions wrapped in an observable? https://github.com/sunesimonsen/dependable-example-todomvc/blob/main/public/model.js#L4
  2. You use the module system to access a singleton state object. Would this also be your preferred solution in a real app? https://github.com/sunesimonsen/dependable-example-todomvc/blob/main/public/components/TodoList.js
Sune Simonsen
@sunesimonsen
I'm trying to figure that out, but this gives me a very easy way of mocking the api, I just replace it.

You use the module system to access a singleton state object. Would this also be your preferred solution in a real app?

Yes - I think most application state is global and can be modelled as a global state in a declarative way.

Gustav Nikolaj
@gustavnikolaj
I try to avoid having the state in a global singleton as I find it makes it pretty hard to mock in tests
3 . Is babel required for this to work?
Sune Simonsen
@sunesimonsen

3 . Is babel required for this to work?

No, I just use it to transpile htm out of the picture.

Gustav Nikolaj
@gustavnikolaj
So it could be a production only step
Looking good :)
I think I might opt to pass more things around as props, but there's nothing preventing me from doing that.
Sune Simonsen
@sunesimonsen

I try to avoid having the state in a global singleton as I find it makes it pretty hard to mock in tests

You would think so, but I'm using https://www.apollographql.com/docs/react/local-state/reactive-variables/ at work and we just set the state before the test and it works really well :-)

I think I might opt to pass more things around as props, but there's nothing preventing me from doing that.

That is really no reason and it makes for more re-rendering. Using the observables and computeds directly only re-renders components that is actually affected.

I'm adding tests to the example now, so you can see how that looks afterwards
Gustav Nikolaj
@gustavnikolaj
I might have to give it a shot. My gut-feeling is very much opposed to it, but I cannot find any reasonable arguments for why it shouldn't be all right. It's not like we're ever going to have more than one UI rendering at the same time from the same browser :)
Looking forward to the test examples <3
Sune Simonsen
@sunesimonsen

going to have more than one UI rendering at the same time from the same browser

what you might run into is that you need more instances of something, but they you will just have global state holding models for those. Similar to how I have a lists of todo classes in an observable. .

Gustav Nikolaj
@gustavnikolaj
It means that the components are very closely tied to that global state model, rather than having props as interface. But yeah, I get your point. Realistically, most things aren't really ever going to be used outside that initial place.
Just noticed something weird.
  1. Add a todo item "foo"
  2. Add a todo item "bar"
  3. With the cursor in the todo input field, press TAB then SPACE

Expected: I can see a focus indicator, and the first item would be selected, and completed when space is selected|

Actual: No focus indicator, both items are completed

Sune Simonsen
@sunesimonsen
Yes I expect the example to be a bit bugging - slammed it together really quickly - I'll come back and brush of things.
Example of a simple state test, if you are curious:
import {
  allTodos,
  createTodo,
  visibilityFilter,
  visibleTodos,
  Todo,
} from "../public/model.js";

import unexpected from "unexpected";
import unexpectedDependable from "unexpected-dependable";

const expect = unexpected.clone().use(unexpectedDependable);

describe("visibleTodos", () => {
  describe("with an empty list of todos", () => {
    beforeEach(() => {
      allTodos([]);
    });

    it("returns an empty array", () => {
      expect(visibleTodos(), "to equal", []);
    });
  });

  describe("with list of todos that is all completed", () => {
    beforeEach(() => {
      allTodos([
        new Todo({ id: 0, text: "By milk", completed: true }),
        new Todo({ id: 1, text: "Paint the fence", completed: true }),
        new Todo({ id: 2, text: "Mow the lawn", completed: true }),
      ]);
    });

    describe("and the visibility filter is active", () => {
      beforeEach(() => {
        visibilityFilter("active");
      });

      it("returns an empty array", () => {
        expect(visibleTodos(), "to equal", []);
      });
    });
  });
});
Sune Simonsen
@sunesimonsen

Just noticed something weird.

  1. Add a todo item "foo"
  2. Add a todo item "bar"
  3. With the cursor in the todo input field, press TAB then SPACE

This is because you hit the toggle all first then the checkboxes - I'll fix up focus when I have a bit of time.

Haha okay the official ones also does that :wat:
Gustav Nikolaj
@gustavnikolaj
At least it's consistent :D
That's not how I would expect it to work, but I must be mistaken :D
Sune Simonsen
@sunesimonsen
Haha no - that seems pretty broken
Also no focus styling :sweat_smile:
Sune Simonsen
@sunesimonsen

@gustavnikolaj haha I guess somebody fix the focus styling in the latest version of the TodoMVC styles https://dependable-example-todomvc.surge.sh/

Maybe they went a bit over the top :sweat_smile:

Gustav Nikolaj
@gustavnikolaj
That "v" / downwards caret button is very surprising to me
Sune Simonsen
@sunesimonsen
Yes that has been there all along
Gustav Nikolaj
@gustavnikolaj
I didn't notice it at all before, and I don't know why you would ever want it
:D
Sune Simonsen
@sunesimonsen
Mhh I think they broke backward compatibility a bit :-)
Nahh that was just me breaking things.
Peter Müller
@Munter
Are any of you planning on seeing some of the tour in the city tomorrow? I was thinking of finding some place near the city center and bring a camera, possibly have a beer
Peter Müller
@Munter
Looks like i won't be able to be in the city after all. I'll have to watch on TV like everyone else :)
Gustav Nikolaj
@gustavnikolaj
Hehe... I don't think you go to the city today. Either you are there already, or you'll not be able to get there :D
Peter Müller
@Munter
What's a good library to use to get stable cache keys from json objects?
Andreas Lind
@papandreou
You mean sort of like crc16(JSON.stringify(obj))?
But probably shouldn't care about the key definition order?
Peter Müller
@Munter
We might have keys in different order, and those should hash to the same if the values don't change
Andreas Lind
@papandreou
Yeah, was just making sure that I understood what the ask was :)
Andreas Lind
@papandreou
I took a quick stab at it, but it looks like it's hard to beat the naive approach of:
const crypto = require('crypto');
const canonicalJson = require('canonical-json');

function hashCanonicalJson(value) {
  return crypto.createHash('sha1').update(canonicalJson(value)).digest('hex');
}
Peter Müller
@Munter
I was thinking the same, but was a bit discouraged at the download numbers of the canonical-json package. Couldn't find a different one that seemed more agreed upon though
Andreas Lind
@papandreou
It has 38K weekly downloads? Doesn't seem insanely risky?
Peter Müller
@Munter
I just expected more people to use canonical json object :)
Andreas Lind
@papandreou
It's one of those problems that are fairly easy to solve, so there are probably 50 libraries in npm that do the same :)
I'd just pick one and move on. Doesn't seem like something worth overengineering, unless we're talking about very big objects.
Peter Müller
@Munter
Not really :)
Sune Simonsen
@sunesimonsen
10K Hackernews demo with @dependable https://github.com/sunesimonsen/dependable-example-hackernews
(Not completely done yet)