profile
viewpoint
Tim Branyen tbranyen Netflix San Francisco, CA http://tbranyen.com/ Browser Playback @Netflix

jashkenas/backbone 27650

Give your JS App some Backbone with Models, Views, Collections, and Events

jeresig/jquery.hotkeys 2570

jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination.

eligrey/classList.js 1088

Cross-browser element.classList

backstopmedia/bleeding-edge-sample-app 673

A sample app for a Bleeding Edge Press book.

jaredhanson/deamdify 201

Browserify transform that converts AMD to CommonJS.

A/superagent-mocker 128

Pretty simple in-browser mocks for CRUD and REST API

gf3/WAT 103

LOLWAT?

bevacqua/diferente 94

User-friendly virtual DOM diffing

backstopmedia/D3Edge 80

Repository for example code for Developing a D3 Edge EBook

startedmunrocket/parallax-effect

started time in a day

issue closedtbranyen/hyperlist

How the set a specific height for the list?

Dear @tbranyen Tim,

I am struggling in setting the height of the list with a specific value.

To be more precise this is my divs configuration

<div id="listContainer" style="height: 300;"><div id="list" ></div></div>

and I would like to set the height of the div with id="list" to the height of the div with id="listContainer".

This is my script tag: how do have i to customize it? I ma trying to pass the height value as document.getElementById('listContainer').style.height what is wrong in that? Thanks in advance for your time.

<script>
  var container = document.getElementById('list');

  var config = {
    height:  document.getElementById('listContainer').style.height,
    itemHeight: 50,
    total: 100000,
    // Set to true to put into 'chat mode'.
    reverse: false,
    scrollerTagName: 'div',
    scrollContainer: document.getElementById('listContainer').style.height,
    overrideScrollPosition() {
      return (window.pageYOffset - (container.offsetTop - document.body.offsetTop)) || 0
    },
    generate(row) {
	  var contact = '' +
		  '<div id="contentToDisplay' + row +'"  onclick="javascript:changecolor(\'contentToDisplay' + row + '\')">' + content[row] + '</div>';
		var el = document.createElement("div");
      //el.innerHTML = "<p>ITEM " + content[row] + "</p>";
      el.innerHTML = contact;
      return el;
    }
  };

 var list = HyperList.create(container, config);

 container.classList.add("container");
</script>

closed time in 3 days

Raffaele3D

issue commenttbranyen/hyperlist

How the set a specific height for the list?

Awesome! Glad that fixed it 👍

Raffaele3D

comment created time in 3 days

startedvasturiano/sunburst-chart

started time in 3 days

issue commenttbranyen/hyperlist

Out Of Memory

@tdhung80 there are some problems with the logic that does the rendering. this projects doesn't get much work as you can imagine. Feel free to poke around in the code and see if you can find a way to improve it. I can help review any changes. My guess is something in the _renderChunk method.

tdhung80

comment created time in 3 days

push eventtbranyen/hyperlist

Tim Branyen

commit sha dbda9ac7f40d2389f5a205e38c958e4cda50e667

Adds in missing commit This change was made a long time ago, but was never pushed. This reflects the 1.0.0 package on npm.

view details

push time in 3 days

issue commenttbranyen/hyperlist

How the set a specific height for the list?

Have you verified this:

height:  document.getElementById('listContainer').style.height,

In your devtools is setting a correct value? I believe the height property is the right thing to set here.

Raffaele3D

comment created time in 3 days

startedOutwalkStudios/jolt

started time in 5 days

startedneomjs/neo

started time in 11 days

startedzserge/tray

started time in 20 days

startedjuharris/switch-remoteplay

started time in 22 days

startedKuroLabs/stegcloak

started time in 23 days

issue commenttbranyen/hyperlist

position: 'relative' on element

Hi @krunal-sheth how would you propose this tool would work without using position: relative? The children are positioned absolutely to make it virtual.

krunal-sheth

comment created time in 23 days

PR opened tbranyen/diffhtml

Improve garbage collection and devtools

Closes GH-187 and GH-188

+1217 -1067

0 comment

41 changed files

pr created time in a month

create barnchtbranyen/diffhtml

branch : improve-garbage-collection-and-devtools

created branch time in a month

startedrxi/lite

started time in a month

issue openedtbranyen/diffhtml

Rename runtime to lite

I never liked the import path diffhtml/runtime and before shipping a stable major version, this should be renamed. By renaming it to diffhtml/lite it emphasizes that it is a slimmer API surface and smaller filesize. The term runtime to someone not familiar with diffHTML is confusing and hard to explain.

created time in a month

startedpikapkg/esm-hmr

started time in a month

startedpikapkg/snowpack

started time in a month

push eventtbranyen/diffhtml-snowpack

Tim Branyen

commit sha e7f076e2924d48deb79ad42566f94a18beeb39e0

Simplify import

view details

push time in a month

create barnchtbranyen/diffhtml-snowpack

branch : master

created branch time in a month

created repositorytbranyen/diffhtml-snowpack

Extremely simple demo using diffHTML and Snowpack

created time in a month

starteddisnet/scrap-js

started time in a month

issue openedtbranyen/diffhtml

Possible to unify React-like and Web Components

The logic is already mostly shared between the two implementations. This would allow importing React components and using them as Web Components. The major difference would be defining if the Shadow DOM should be used or not. This would effectively make it so you would only ever need to import Component, and then use the result immediately in a Custom Element definition.

import { Component } from '//diffhtml.org/components';

class MyComponent extends Component {
  render() {
    return 'hello world';
  }
}

customElements.define('my-component', MyComponent);

created time in a month

startedNectarJS/nectarjs

started time in a month

startedxz/new.css

started time in a month

startedjmas/htmldiff-todo

started time in a month

issue commenttbranyen/diffhtml

html.trim

One question would be using this with isStrict. I suppose options could be passed, but perhaps a chaining mechanism would make sense so you could do something like:

html.isStrict.trim`
  <div></div>
`

or

html.trim.isStrict`
  <div></div>
`
tbranyen

comment created time in a month

issue openedtbranyen/diffhtml

html.trim

This feature would allow someone to write:

import { html } from 'diffhtml';

export default () => html.trim`
  <div></div>
`;

When invoked this function would return only a div VTree.

Currently,

import { html } from 'diffhtml';

export default () => html`
  <div></div>
`;

Returns a #document-fragment with child nodes #text, div, #text. This can have weird consequences when using outerHTML.

created time in a month

issue openedtbranyen/diffhtml

Fix missing attributes in devtools

image

created time in a month

push eventtbranyen/diffhtml

Tim Branyen

commit sha d9beaeb46ad77531ae0ccf8e9ca9d9d6a7a244f5

Remove the min version from scripts

view details

push time in a month

push eventtbranyen/diffhtml

Tim Branyen

commit sha 898e3c6ef83ed501a5f58ae02a6ff7a6fb28b372

Update website, docs, and highlight. js

view details

push time in a month

push eventtbranyen/diffhtml

Tim Branyen

commit sha 8eddb6052273f186817c11dada401b52f0db3a48

Ensure versions are consistent across packages

view details

push time in a month

push eventtbranyen/diffhtml

Tim Branyen

commit sha d093f1f2ada95bb7e902bbe2f535bad39239cbeb

Bump dev dependencies

view details

Tim Branyen

commit sha ef172ff844e4df891dcc76b025e0662005d4c39d

Update README

view details

push time in a month

issue openedtbranyen/diffhtml

More efficient garbage collection

diffHTML uses a large memory pool for VTrees to ensure efficient diffing. One thing that could be optimized is when and how gc() is called. Currently this method is triggered whenever a transaction completes (rendering finished). For small interactive applications that are re-rendered frequently, it may be smarter to defer and use more of the pool. When dealing with large applications that cannot exceed a certain memory threshold, and may have even reduced the size of the pool, it would be better to sacrifice performance for stability.

created time in 2 months

issue closedtbranyen/diffhtml

innerHTML causes SVG rendering glitch when inserting nodes

Description

When diffHTML's innerHTML() function is used to modify an <svg> element in the page, diffs which require a new node to be inserted to the SVG's DOM (such as changing an element's tag) will fail to properly re-render the SVG in the browser's view, resulting in a blank image being displayed instead.

I've put together an interactive example demonstrating this behavior on Glitch: https://diffhtml-innerhtml-svg-bug-demo-1.glitch.me. There is a bit of UI and additional explanation there to demonstrate when the bug does and does not occur. In particular, as shown there, updates which only cause an attribute to be altered (such as changing an element's color) will render just fine.

I am very happy to continue to help debug this issue, as we are using diffHTML for a project at my workplace, and our current application runs afoul of this bug. If you have pointers in the right direction to solve this issue, I would be happy to put together a PR if I can get to the root of it.

Platforms

This issue has been replicated in Firefox and Chrome on macOS, and Firefox on Linux. I have not yet had a chance to test it on Windows.

Minimal Demonstrating Example

A minimal example showing only the bug is the following complete webpage (also live at https://diffhtml-innerhtml-svg-bug-demo-1-minimal.glitch.me):

<!DOCTYPE html>
<html>
  <head>
    <style>
      .picture {
        border: 1px solid black;
        width: 100px;
        height: 100px;
      }
    </style>
    <script type="module">
      import { innerHTML } from "https://diffhtml.org/es";

      // A picture of a blue circle, as an SVG
      const circle = `
        <svg height="100px"
             width="100px">
            <circle cx="50" cy="50" r="50" stroke="none" fill="blue" />
        </svg>
      `;

      // A picture of a blue square, as an SVG
      const square = `
        <svg height="100px"
             width="100px">
            <rect width="100" height="100" stroke="none" fill="blue" />
        </svg>
      `;

      // Use diffHTML to set the picture to a square, then a circle
      const pictureUsingDiff = document.getElementById("diff-picture");
      innerHTML(pictureUsingDiff, square);
      innerHTML(pictureUsingDiff, circle);
      
      // Use .innerHTML = ... to set the picture to a square, then a circle
      const pictureUsingSet = document.getElementById("set-picture");
      pictureUsingSet.innerHTML = square;
      pictureUsingSet.innerHTML = circle;
    </script>
  </head>
  <body>
    <div id="diff-picture" class="picture"></div>
    <div id="set-picture" class="picture"></div>
  </body>
</html>

Observed Behavior

At present, this page looks like this:

Screen Shot 2020-05-13 at 4 26 59 PM

Expected Behavior

However, I expect the behavior of diffHTML's innerHTML to match that of manually setting the .innerHTML. If the bug is corrected, the page should look like this:

Screen Shot 2020-05-13 at 4 28 13 PM

Further Notes

This bug may be tricky to detect using automated testing, because even though the SVG does not correctly display after the alteration of the DOM via innerHTML, the DOM does in fact change, as you can observe in the interactive demonstrator.

Likewise, using "Inspect Element" on the minimal page above, we see that the DOM fragment corresponding to the page's body has been altered by diffHTML to be precisely what we would expect: two identical SVGs, which if rendered normally (without diffHTML) would appear as the latter image above:

<body style="">
    <div id="diff-picture" class="picture">
        <svg height="100px" width="100px">
            <circle cx="50" cy="50" r="50" stroke="none" fill="blue"></circle>
        </svg>
      </div>
    <div id="set-picture" class="picture">
        <svg height="100px" width="100px">
            <circle cx="50" cy="50" r="50" stroke="none" fill="blue"></circle>
        </svg>
    </div>
</body>

An Attempt at Locating Possible Causes

I am not an expert JavaScript programmer, and I am not deeply familiar with the inner architecture of diffHTML, although I've done my best to understand it in the course of minimizing and reporting this bug. That being said, I'll offer my best guess as to the root cause, by explaining my reasoning as I walk through the codebase. Perhaps much of what I write below will be self-evident, or equally likely, wrong, to a seasoned contributor to this project—but hopefully some of it will save someone time!

My broad hypothesis: Could it be that under some circumstances, createElement is being mistakenly called inside an SVG, instead of createElementNS? According to this StackOverflow answer, the correct method of creating nodes within embedded SVGs is to use createElementNS with the appropriate namespace. The only occurrence of createElementNS in this repository is in the createNode function in packages/diffhtml/lib/node/create.js. This leads me to think that if we can locate a situation that causes isSVG to be erroneously false, we might solve the bug by ensuring the correct branch in the below snippet of createNode is always taken:

// ...
  // If no DOM Node was provided by CreateNode hooks, we must create it
  // ourselves.
  if (domNode === null) {
    // Create empty text elements. They will get filled in during the patch
    // process.
    if (nodeName === '#text') {
      domNode = ownerDocument.createTextNode(vTree.nodeValue || '');
    }
    // Support dynamically creating document fragments.
    else if (nodeName === '#document-fragment') {
      domNode = ownerDocument.createDocumentFragment();
    }
    // Support SVG.
    else if (isSVG) {
      domNode = ownerDocument.createElementNS(namespace, rawNodeName);
    }
    // If not a Text or SVG Node, then create with the standard method.
    else {
      domNode = ownerDocument.createElement(rawNodeName);
    }
  }
// ...

The value of isSVG in that function is determined by the logical-or of the input isSVG parameter and whether the node name is the literal string 'svg' (line 43):

isSVG = isSVG || nodeName === 'svg';

First thought at possible cause: could it be that nodeName is not always normalized to lowercase? On further investigation, it looks like it is normalized at the creation time of a VTree via createTree:

entry.nodeName = typeof input === 'string' ? input.toLowerCase() : fragmentName

Note that this line does not end with a semi-colon. I don't know enough about JavaScript semantics to know whether this could cause unintended behavior here.

My guess is that the call to createNode we care about comes in the patchNode function:

export default function patchNode(patches, state = {}) {
  const promises = [];
  const { isSVG, ownerDocument } = state;

The only call to patchNode that explicitly initializes its state comes in packages/diffhtml/lib/tasks/patch-node.js in the patch function:

export default function patch(transaction) {
  const { domNode, state, state: { measure }, patches } = transaction;
  /** @type {HTMLElement | DocumentFragment} */
  const { nodeName, namespaceURI, ownerDocument } = (domNode);
  const promises = transaction.promises || [];
  const namespaceURIString = namespaceURI || '';

  state.isSVG = nodeName.toLowerCase() === 'svg' || namespaceURIString.includes('svg');
  state.ownerDocument = ownerDocument || document;

  measure('patch node');
  promises.push(...patchNode(patches, state));
  measure('patch node');

  transaction.promises = promises;
}

Here is where the originating isSVG value is generated: by examining the input domNode in the given transaction, and determining if its toLowerCase()-normalized nodeName is 'svg'. We can then see in packages/diffhtml/lib/node/patch.js how createNode is called with this propagating isSVG value throughout the patchNode function... except in the PATCH_TYPE.NODE_VALUE case, where it is called with only one argument:

// ...
      case PATCH_TYPE.NODE_VALUE: {
        const vTree = patches[i + 1];
        const nodeValue = patches[i + 2];
        const oldValue = patches[i + 3];

        i += 4;

        const domNode = /** @type {HTMLElement} */ (
          createNode(vTree)
        );
// ...

I'm not sure whether this patch type applies in the situation leading to this bug, but if so, could this be related to the issue?

That's about as far as I could get in one reading session before running out of mind-space. Thank you for your help, and for such a great library!

closed time in 2 months

kwf

issue commenttbranyen/diffhtml

innerHTML causes SVG rendering glitch when inserting nodes

Sweet if you force refresh your example in Glitch you will see it works fine now. Please keep filing issues. The more usage and coverage, the better.

The problem with deferring Node creation is that for transitions (such as attached, detached, replaced), we want to have all attributes and text already set so that you can do a seamless fade in or fade out without having the elements be in a weird state.

kwf

comment created time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 2318f944d29d0451a49ab32a87697c70540ce2a0

Update website to 1.0.0-beta.17

view details

push time in 2 months

created tagtbranyen/diffhtml

tagv1.0.0-beta.17

diffHTML is a web framework that helps you build applications and other interactive content

created time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha db37a2f2931c1c3b8353e7931bcff3953afa2f1c

Update JavaScript and REAMDE files to 1.0.0-beta.17

view details

Tim Branyen

commit sha 9c1817cb3a1a4484bd3c88cd4ca3da94a8108606

v1.0.0-beta.17

view details

push time in 2 months

delete branch tbranyen/diffhtml

delete branch : fix-svg-rendering

delete time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 7ee3454ce6b3c77463211adc045eab253ca92d54

Resolve namespace issues when creating SVG element Prior to this commit, SVG would only work if rendered directly from the top, like: `diff.innerHTML(document.body, '<svg></svg>');` and not when diffing or creating within an existing document. This corrects the behavior by determining the correct type during synchronization, applying this VTree reference to an `svgElements` set, and then referencing this when creating elements in the patch phase. This should not incur any memory overhead or significant processing and keeps our VTree shape lean, and filesize low by not including a list of all SVG elements.

view details

Tim Branyen

commit sha 1ee45d69b55473a9d776a5fa48172333b875f7ac

Merge pull request #186 from tbranyen/fix-svg-rendering Resolve namespace issues when creating SVG element

view details

push time in 2 months

PR merged tbranyen/diffhtml

Resolve namespace issues when creating SVG element

Prior to this commit, SVG would only work if rendered directly from the top, like: diff.innerHTML(document.body, '<svg></svg>'); and not when diffing or creating within an existing document.

This corrects the behavior by determining the correct type during synchronization, applying this VTree reference to an svgElements set, and then referencing this when creating elements in the patch phase.

This should not incur any memory overhead or significant processing and keeps our VTree shape lean, and filesize low by not including a list of all SVG elements.

Fixes GH #185

+78 -17

0 comment

6 changed files

tbranyen

pr closed time in 2 months

issue commenttbranyen/diffhtml

innerHTML causes SVG rendering glitch when inserting nodes

I came up with a fairly elegant solution that involves using a Set and tracking the VTree references there. Once it passes, I'll cut a new release as this does not change the public-facing API.

kwf

comment created time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 7ee3454ce6b3c77463211adc045eab253ca92d54

Resolve namespace issues when creating SVG element Prior to this commit, SVG would only work if rendered directly from the top, like: `diff.innerHTML(document.body, '<svg></svg>');` and not when diffing or creating within an existing document. This corrects the behavior by determining the correct type during synchronization, applying this VTree reference to an `svgElements` set, and then referencing this when creating elements in the patch phase. This should not incur any memory overhead or significant processing and keeps our VTree shape lean, and filesize low by not including a list of all SVG elements.

view details

push time in 2 months

PR opened tbranyen/diffhtml

Resolve namespace issues when creating SVG element

Prior to this commit, SVG would only work if rendered directly from the top, like: diff.innerHTML(document.body, '<svg></svg>'); and not when diffing or creating within an existing document.

This corrects the behavior by determining the correct type during synchronization, applying this VTree reference to an svgElements set, and then referencing this when creating elements in the patch phase.

This should not incur any memory overhead or significant processing and keeps our VTree shape lean, and filesize low by not including a list of all SVG elements.

Fixes GH #185

+77 -17

0 comment

6 changed files

pr created time in 2 months

create barnchtbranyen/diffhtml

branch : fix-svg-rendering

created branch time in 2 months

issue commenttbranyen/diffhtml

innerHTML causes SVG rendering glitch when inserting nodes

Hi @kwf, thanks for the fantastic issue reporting. This does indeed look like a bug with the isSVG check. When I ran the logger middleware, all the mutations appear correct, but when inspecting the namespaceURI property of both elements, I get different values.

// diff circle
$0.namespaceURI
"http://www.w3.org/1999/xhtml"

// innerHTML circle
$0.namespaceURI
"http://www.w3.org/2000/svg"

This is sort of tricky to solve:

  1. We do not want to maintain a hardcoded list of SVG elements
  2. We will eagerly create elements when there are attribute / text changes, and may not know where the Node is intended (SVG or HTML element)

I think ultimately it may require a change to the VTree object structure in order to solve this, but I will experiment and get back to you once I find something satisfactory.

kwf

comment created time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha cff1488d8f8465a68f786740a825a0050e24e550

Further back out erroneously commited test code

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 7ee950abe50ab9a7af907ab61e4ee7461693601f

Fix broken unit tests due to new Symbol

view details

push time in 2 months

startedthedaviddias/Front-End-Checklist

started time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 199413b39d23b1970a01ea16a3a1d2fa8ec789bc

Fix global binding When the HoC issue (183) was filed, I realized afterwards it was due to two diffHTML versions loaded. This called into the devtools a second time. Now the binding gets made once, and if already exists, is merged into subsequent builds loading. - Closes GH-183 - Closes GH-180

view details

Tim Branyen

commit sha a912bb718e69041c488a81473428e58f9ab229bb

Fix missing state in logger

view details

push time in 2 months

issue closedtbranyen/diffhtml

Fix running diffhtml on the website with the static-sync tool

For some reason this is causing a problem having two versions of diffHTML on the same page with the static-sync server.

closed time in 2 months

tbranyen

issue closedtbranyen/diffhtml

HoC first child does not hold DOM reference

While HoC fully render, they are not binding correctly to NodeCache and possibly aren't protecting children as devtools shows them as allocated, but not protected.

closed time in 2 months

tbranyen

startedyemount/pose-animator

started time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 758fda33fc4e5afd77126f8f91690c97270e77b7

Fix more entry points and update docs

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha f701b962a87ed472e779d2171555a5a7462fa5cd

Fix ESM entry points

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 5b05b4cda2ab1d3869d34223cbda082a8bc04876

Update website to 1.0.0-beta.16

view details

push time in 2 months

created tagtbranyen/diffhtml

tagv1.0.0-beta.16

diffHTML is a web framework that helps you build applications and other interactive content

created time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha ff118feced1504e1695043118f6aa0e537911474

v1.0.0-beta.16

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 7dc6653bda95d5403d3de2a318b07c85634bbe23

Update JavaScript and REAMDE files to 1.0.0-beta.16

view details

Tim Branyen

commit sha 231d6f552e20b57ba29be244358c6574b1700e3f

Update build script and CONTRIBUTING doc

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha c8b10cd7b215ee4f0093cdfcb3e30b56357395d6

Fix more regressions - Add back in process, some modules depend on this being in the global scope - Fixes GH-184

view details

push time in 2 months

issue closedtbranyen/diffhtml

Inline transitions does not rebind properly after unsubscribed and subscribed again

We should store the last known good state and restore this instead of keeping everything purged.

closed time in 2 months

tbranyen

push eventtbranyen/diffhtml

Tim Branyen

commit sha 35a8d92566a4477166d80f06a5fc18dd0bb04be2

Fix regression with web component releasing

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 8b072e29e632e9a711929622de13946df4992895

Fix globalThis error

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha b67bff52f5e9bee53bfcf9bdb8955bcb0030fd97

Remove import dep on diffHTML from Components Instead they now use a Symbol to bind the core API into the global scope. This means diffHTML will need to be loaded before Components. We can reverse this change once import maps land and we can guarentee an end user will always be able to have a dependency loaded correctly. - Closes GH-182 - Closes GH-179

view details

push time in 2 months

issue closedtbranyen/diffhtml

Remove prop-types requirement / fake-prop-types warning

prop-types package should be optional, and allow for typeof checks using strings, or instanceof checks, using functions/constructors. If real prop-types are used, checkPropTypes can be called.

closed time in 2 months

tbranyen

issue closedtbranyen/diffhtml

Removing attributes like checked do not unset the property

Which means the checked remains checked even after removing the attribute.

closed time in 2 months

tbranyen

issue closedtbranyen/diffhtml

When passing a single attribute default to boolean for components

function render() {
  return html`<${SomeComponent} checked />`;
}

This should be checked=true for property and checked=checked for the attribute.

closed time in 2 months

tbranyen

issue commenttbranyen/diffhtml

When passing a single attribute default to boolean for components

Closed this in c46c6ab if you're interested in checking it out.

tbranyen

comment created time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha c46c6ab9bc91da2dc2a5bf000c6f7a7c64c9c1e8

Support boolean attributes on components

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha b34d5c90c03a6198acd3e6d862a20bb065adf517

Revert dependency upgrades

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 7dae1350d109da6a7ae8b56fbadc454d72d730ad

Lots of random changes... - Many improvements to devtools, including dark-mode logo, tabs, and embedded gitter chat - Added componentWillMount callback - Make createTree([]) be treated as fragment with children

view details

push time in 2 months

issue commenttbranyen/diffhtml

When passing a single attribute default to boolean for components

In this case it's more about aligning closer to how React works rather than XML/HTML semantics. As component code I'd expect this to produce checked=checked as an attribute and checked=true as a property. checked: 'checked' is a less useful prop value for a Component is why I'd prefer a boolean there.

tbranyen

comment created time in 2 months

startedjamesplease/fi-calc

started time in 2 months

issue openedtbranyen/diffhtml

Inline transitions does not rebind properly after unsubscribed and subscribed again

We should store the last known good state and restore this instead of keeping everything purged.

created time in 2 months

issue openedtbranyen/diffhtml

HoC first child does not hold DOM reference

While HoC fully render, they are not binding correctly to NodeCache and possibly aren't protecting children as devtools shows them as allocated, but not protected.

created time in 2 months

issue openedtbranyen/diffhtml

Removing attributes like checked do not unset the property

Which means the checked remains checked even after removing the attribute.

created time in 2 months

issue openedtbranyen/diffhtml

When passing a single attribute default to boolean for components

function render() {
  return html`<${SomeComponent} checked />`;
}

This should be `checked=true` for property and `checked=checked` for the attribute.

created time in 2 months

issue openedtbranyen/diffhtml

Fix running diffhtml on the website with the static-sync tool

For some reason this is causing a problem having two versions of diffHTML on the same page with the static-sync server.

created time in 2 months

issue openedtbranyen/diffhtml

Remove prop-types requirement / fake-prop-types warning

prop-types package should be optional, and allow for typeof checks using strings, or instanceof checks, using functions/constructors. If real prop-types are used, checkPropTypes can be called.

created time in 2 months

starteddanro/easing-js

started time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 2b9c8ea27e81e758e61c99b3e3c2e9b4de51a3da

Some minor refactoring

view details

push time in 2 months

pull request commentFredrikNoren/ungit

Use nodegit

@wmertens https://libgit2.org/libgit2/#HEAD/type/git_stash_apply_options has a checkout_options option you can set to force: https://libgit2.org/libgit2/#HEAD/type/git_checkout_strategy_t

There are quite a few options in:

require('nodegit').Checkout.STRATEGY

  STRATEGY: {
    NONE: 0,
    SAFE: 1,
    FORCE: 2,
    RECREATE_MISSING: 4,
    ALLOW_CONFLICTS: 16,
    REMOVE_UNTRACKED: 32,
    REMOVE_IGNORED: 64,
    UPDATE_ONLY: 128,
    DONT_UPDATE_INDEX: 256,
    NO_REFRESH: 512,
    SKIP_UNMERGED: 1024,
    USE_OURS: 2048,
    USE_THEIRS: 4096,
    DISABLE_PATHSPEC_MATCH: 8192,
    SKIP_LOCKED_DIRECTORIES: 262144,
    DONT_OVERWRITE_IGNORED: 524288,
    CONFLICT_STYLE_MERGE: 1048576,
    CONFLICT_STYLE_DIFF3: 2097152,
    DONT_REMOVE_EXISTING: 4194304,
    DONT_WRITE_INDEX: 8388608,
    UPDATE_SUBMODULES: 65536,
    UPDATE_SUBMODULES_IF_CHANGED: 131072
  }

You may have seen this already, but if not, something to try

wmertens

comment created time in 2 months

startedpeter-murray/node-hue-api

started time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha f8f75cd67fd7996f09e386815a24d4e1bace1d16

More updates to devtools and docs

view details

push time in 2 months

startedjamesplease/query-history

started time in 2 months

pull request commentFredrikNoren/ungit

Use nodegit

Seems like the test failures are around missing support in some of the APIs like /commit? Not sure why the Linux tests failed, maybe apt-get needs a retry mechanism.

Pretty cool to see this!

wmertens

comment created time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha caf8814499057487220f25b9e393e9d74e5e26a4

Add devtools icons, change website code bg

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 2237169490c389079ee5df3c5bed1f09a6727cbf

Bump website

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 3769a6802348392328969450dfa56ddccfc31d88

Change version to stay in sync

view details

Tim Branyen

commit sha 590e42acecf52bd43eda6135af0a5c6677361483

Update JavaScript and REAMDE files to 1.0.0-beta.15

view details

Tim Branyen

commit sha 135c9b17cda8f10482219f8c11d59825b3273ac5

Update contributing, make preview default

view details

Tim Branyen

commit sha a7f1411282b610fe1fd5798a36a2ad7100d6e194

v1.0.0-beta.15

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha de41f85accab5c83c3a50e1826dc619c34916a98

Revert incorrect assertion

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 6103ed03883411d8e6d2538fc62270b0e181d363

Fix build

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha 0a1111264b309d1f7d9d588bdb59ff6196127f6a

More improvements - Fixes babel transform to handle whitespace and interpolated attributes - Make middleware use dependency injection instead of directly importing - Validates memory is always returned to the correct pool size

view details

push time in 2 months

startedwoltapp/blurhash

started time in 2 months

issue closedtbranyen/diffhtml

diffhtml-components outside api

when someone from the outside wants to update a prop on the WebComponent instance, should they set the property or set the property on the prop object? does such property being updated cause a rerender or is that just with changed attributes?

closed time in 2 months

obedm503

issue commenttbranyen/diffhtml

diffhtml-components outside api

This has been done for a while and I just forgot to close this out.

obedm503

comment created time in 2 months

startedtastejs/hacker-news-pwas

started time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha c190ae4c4e61f5c8345fe0b138d1e832f2722f8a

DevTools and Components are less experimental now

view details

push time in 2 months

push eventtbranyen/diffhtml

Tim Branyen

commit sha a27844b816ed08681bfa516200c1277a763f1f96

Lots of updates for DevTools Still shaping up how devtools will look. Interesting with transitions. Sampling isn't really that ideal. No reason why we can't store the results in a persistent cache like indexeddb or cache api. Pull them on demand and only summarize the changes for lightning fast render views.

view details

push time in 2 months

more