https://codepen.io/ahnafcodes/pen/PooyGdK

Steps:

1. please open the above codepen in Safari browser and in chrome. It works in chrome and fails to render in safari.
2. Please open debugger in chrome and safari
3. Reload each browser to see the difference.
   

Behavior:
I have set debugger in "constructor" and "render" as you can see in codepen, oddly in the safari browser the render() runs before constructor().

It might be a custom component api issue in Safari, Unfortunately Safari is the default browser for Ipad users.

Hi,
I am trying to re-render the component based on state change. But it fails render correctly.
Please see the example reproduction link below and click few times on the button for colors. its failing when it diffs and
https://codepen.io/ahnafcodes/pen/PooyGdK

Error in console:
TypeError: child.remove is not a function

let removeChild = (child, parentNode) => {
/* istanbul ignore if /
if ('remove' in child) {
removeChild = child => {
child.remove();
};
}
else {
removeChild = (child, parentNode) => {
/ istanbul ignore else */
if (child.parentNode === parentNode)
parentNode.removeChild(child);
};
}
removeChild(child, parentNode);
};

simpler version
let removeChild = (child, parentNode) => {
if (child.remove) {
child.remove()
} else if (child.parentNode === parentNode) {
parentNode.removeChild(child);
}
};

but i don't know if have specific reasons for using the existing function

Thank you

When I nest heresy components.
"render" of the child component is not called after setProps from parent. https://codepen.io/ahnafcodes/pen/QWWoMYE

i can work around this by calling render explicitly in child which is leads to unnecessary re-render the first time around.
https://codepen.io/ahnafcodes/pen/gOOExEY
Also at times i am running into a weird render issues when calling render for nested component inside setState, "Type Error: item is undefined". I need to isolate its recreation for that one. call stack for that :

Hi,
I need to render Test where attributes are used for calculation before rendering.
Since, both attributes a and b are needed to calculate a render, I thought I could catch any changes with handleEvent.

I have observed that ona and onb need to be present to trigger handleEvent.

const algorithm=(a,b)=>[a*1.5,b];
export const Test = {
    extends: 'div',
    mappedAttributes:['a','b'],
    // if absent handleEvent will not be called
         ona() {},
         onb() {},
    //
    handleEvent(e) {
        this.render();
    },
    render(){
        const r= algorithm(this.a,this.b);
        this.html `Test : ${r[0]}   -   ${r[1]}`
    }
};

More a question than a bug.

if I have

class MyComponent extends HTMLElement{
  static get name(){ return "MyComponent"; }
  static get tagName(){ return "my-component";}
  onclick(){ alert("I've been clicked!"); }
}
define(MyComponent);

What is the recommended way to subscribe the component to its events? I see the eventListener part of your article on the event pattern, but not the part that detects the onXXX methods and autosubscribes them. Is adding listeners in init() the recommended way, or is it just to each their own way? Or have I missed some opt-in feature like returning a static list of events I'm interested in?

Thanks!

Found interesting to share a heresy-todo project diagram (diagram coming from IntelliJ IDE 2019.2.3) and see at one glance the "widget" architecture

Hi I'm having a problem when trying to define some abstract behavior and using it in the component definition.

In the following example there are two different component definitions, the first one with the Class works ok, on the second one with the Object is failing, because the component doesn't have a what method defined.

I can achieve the desired behavior using the Class definitions, but i can't find a way using the object notation.
How can achieve the same behavior using the object notation?

Thanks

The example shows that the 2 first Test2 are displaying something, the third cant, everything ok

However I would like that the third behaves the same (easier to write...) displaying 100
How can I catch "a" in the thrid Test2 ?

export const Test2 = {
    extends: 'div',
    mappedAttributes:['a'],
    ona() {this.render()},
    render(){
        this.html `Test2 : ${this.a}`
    }
};
heresy.define("Test2",Test2);
let a=1;
setInterval(()=> {
    a++;
    render (document.body,html`
        <Test2 .a=${a}/>
        <Test2 .a=${"10"}/>
        <Test2  a="100"/>
    `);
},1000);

I know you've been talking about how you can use Custom Elements without the Shadow DOM and refer to it about styling, but I think I'm still missing something. The very first sort of example, I think of when I think of custom elements is container elements. Especially with composition so that I can build components in the style of my project and not have to worry about DOM layouts over and over again. Custom list boxes, tooltips, modals, sticky headers, nav bars etc... How does that work with heresy? Like:

html`<MyModal title="My Header" confirmButton="Continue">
  <p>My first paragraph</p>
  <p>My second paragraph</p>
</MyModal>`

Where Modal also has a render function that draws the header with the title, and the button with the supplied text and inserts the body as it sees fit.

How does this work? Is the answer to just use my own prop like children?

html`<MyModal
  title="My Header"
  confirmButton="Continue"
  children=${html`
    <p>My first paragraph</p>
    <p>My second paragraph</p>
  `}
/>`

Good day Andrea!
Its working but is it valid for object litterals patten?

const Child = {
	extend: 'div',
	render() {
		this.html`
		<div>Child</div>`
	}
}

function HighOrderComponent(Component) {
	return {
		extend: 'div',
		includes: {Component},
		render() {
			this.html`
			<div>
				Parent
				<Component />
			</div>`
		}
	}
}

function home() {
	const Component = Object.assign({}, Child);
	const Page = HighOrderComponent(Component)
	define('Page', Page);
	render(document.body, html`<Page />`)
}

home()

Hi,
in order to have homogeneous attributes naming (without dots), is it possible to add a rule saying that mappedAttributes behave as former dotted attributes, others as DOM attributes?

Hi,
I would like to implement a GridLayout widget.
Is it a right way to access and set the children styles like this?
Thank you

export const Grid = {
    extends: 'div',
    style: (s)=>`${s} {
                display: grid;
                height:100vh; /* for tests */
            }`,
    render() {
        let count=1;
        for (let child of this.children) {
            child.style['border']="1px solid blue"; // for tests
            child.style['grid-area']="Z"+count;
            count++;
        }
    }
};
define ("Grid",Grid);
render(document.body, html`
    <Grid style="grid-template-areas:'Z1' 'Z2'">
        <div>Z1</div>
        <div>Z2</div>
    </Grid>`);

Documentation of components, defined using ES6 classes, is missing the keyword static before attribute observation getters.

I've noticed that when you have a list of components extending fragment, if you remove items from the list and re-render it, the list won't get updated.

I've made a reproduction in this codesandbox

import { define, ref, html } from "heresy";

const Item = {
  name: "Item",
  extends: "fragment",

  onclick() {
    this.dispatchEvent(new CustomEvent("remove", { detail: this.item }));
  },

  render() {
    this.html`
    <p>
      This is item <strong>${this.item.id}</strong>
      <button onclick=${this}>Remove me!</button>
    </p>
    `;
  }
};

const ItemList = {
  name: "ItemList",
  extends: "fragment",

  includes: { Item },

  mappedAttributes: ["items"],

  oninit() {
    this.items = [];
  },

  add_item() {
    this.items.push({ id: Math.random() });
    this.items = this.items;
  },

  onitems() {
    this.render();
  },

  onremove({ detail: item }) {
    this.items = this.items.filter(x => x != item);
  },

  render() {
    this.html`
    <div class="number-list">
      ${this.items.map(
        item => html.for(this, item.id)`
          <Item .item=${item} onremove=${this} />
        `
      )}
    </div>
    `;
  }
};

const MainComponent = {
  name: "MainComponent",
  extends: "element",

  includes: { ItemList },

  oninit() {
    this.item_list = ref();
  },

  onclick() {
    this.item_list.current.add_item();
  },

  render() {
    this.html`
      <ItemList ref=${this.item_list}/>
      <button onclick=${this}>Add item!</button>
    `;
  }
};

define(MainComponent);

Adding Items works fine, but they don't get removed from the dom. This doesn't happen if the component extends some element, like div.

Maybe it has to do with the fact that fragments are not dom nodes, and the dom diffing breaks?

Hello,

To support built-in custom elements in Safari the @ungap/custom-elements-builtin needs to be included. But in it's repo it's stated that the package is deprecated in favor of @ungap/custom-elements.

I'm testing on MacOS 10.15.3, Safari 13.0.5. and only the deprecated package is working properly.
The onprops listener is not firing.
Chrome, Firefox working as intended. Don't know about newer versions of Safari.

Codepen sample

Is there any chance to support it? Thank you.

Hi, I'm trying to render a list of files previews, but when I delete an item, only the last item in the list gets removed from the rendered result, in a way that the rendered list does not represent the actual list. It seems heresy is rendering a list with the new length but the old data.

The codesandbox I'm experimenting with is here: https://codesandbox.io/s/recursing-river-pur4i

Steps to reproduce:

• Add some files with the file input
• Click on the X button to remove the first item(or anyone that's not the last item in the list)

Relevant snippets:

// src/editor/index.js

remove_file(file) {
  this.files = this.files.filter(x => x.id !== file.id);
}

// on render()
const remove_file = e => {
  this.remove_file(e.target.file);
};
// ...
this.html`
<!-- ... -->
<div class="media-list">
   ${this.files.map(
     file => html`
      <MediaItem .file=${file} onremove=${remove_file} />
     `
  )}
</div>
<!-- ... -->
`

Is this a bug, or is there something I'm missing?
The linked codesandbox is pretty much barebones repro as I'm just trying out heresy, but please do let me know if you need an even simpler one.

I'm using Array.filter and Array.map, I've also tried with Object.keys like in heresy-todo, but it yields the same result.

The devDependency rollup was updated from 1.18.0 to 1.19.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.