Bugfix/enable built in element extension #642

AndyOGo · 2018-10-25T11:23:14Z

Fixes #607 .
Blocked by #649 #639 choojs/nanohtml#136

Changes proposed in this pull request:

replaced the existing polyfill with a much better, battle tested and feature complete polyfill (including built-ins support) from WebReflection
all kudos go to Andrea Giammarchi
upgrade create amo script
upgrades withReact to support extended builtin elements

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
Any dependent changes have been merged and published in downstream modules

AndyOGo · 2018-10-25T19:41:07Z

.babelrc

@@ -28,6 +27,88 @@
      "include": [
        "NODE_ENV"
      ]
+    }],
+    ["babel-plugin-transform-builtin-classes", {


This awesome plugin is key to make it work
https://github.com/WebReflection/babel-plugin-transform-builtin-classes

LucaMele · 2018-10-26T07:32:06Z

Please Lets make a concrete test in this PR:

Lets create a extension like <table is="axa-table"></table>
Lets also create a patterns-library-example using that table in react.

I would merge it in this PR and when approved, make a update date and communicate it on slack. For example: "Please note, we are closing our first stable release. We realised that we cannot live anymore without supporting Custom Element Builtins. Therefore we will do Breaking change merge friday the XX.YY.KKKK".

LucaMele

for me ready to merge when a release plan is created, one component already done in the example and that component used in pattern-library-examples. We also have to communicate to all other developers to swap their polyfill

AndyOGo · 2018-11-05T07:23:10Z

@LucaMele
I just realized that we need to upgrade the create-amo script to support built-ins, because the syntax is very different:

<axa-foo></axa-foo> for custom element

class AXAFoo extends HTMLElement {}
customElements.define('axa-foo', AXAFoo)

<div is="axa-foo"></div> for extended build-in element

class AXAFoo extends HTMLDivElement {}
customElements.define('axa-foo', AXAFoo, { extends: 'div' })

PS:
And now we are really lucky that we abtracted our utitlities in higher order classes 🎉

LucaMele · 2018-11-05T08:36:38Z

let me know when everything is done and i will review :) also dont forget the table implementation

LucaMele · 2018-11-05T08:37:16Z

I will pay you a hot chocolate or capuccino with lots of milk for this one! Thank u man!

AndyOGo · 2018-11-05T10:52:32Z

.eslintrc

@@ -25,11 +25,87 @@
    }]
  },
  "globals": {
+    "HTMLAllCollection": true,


@LucaMele
We should double check which native constructors we really need.
I would argue that all HTML*Element constructors are sufficient.

AndyOGo · 2018-11-05T10:53:52Z

src/js/with-react.js

@@ -52,8 +52,8 @@ const withReact = (WebComponent, { pure = true, passive = false } = {}) => {
  // hence it's tagName could only be resolved lazily
  // ref: https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
  // therefor we don't instantiate it, but rather use a statically defined tagName property
-  const { tagName } = WebComponent;
-  const displayName = `${camelize(tagName)}React`;
+  const { tagName, buildinTagName } = WebComponent;


Needed to support custom builtin elements with react

AndyOGo · 2018-11-05T10:54:22Z

stack/tasks/create-a-m-o.js


 const mapElement = {
  a: 'ATOM📗',
  m: 'MOLECULE📘',
  o: 'ORGANISM📙',
 };

+const getNativeElementConstructor = (tag) => {


This is a huge list, maybe we put it into a separate file 💣

AndyOGo · 2018-11-05T10:55:22Z

stack/tasks/create-a-m-o.js

@@ -268,29 +467,76 @@ const createBoilerplate = (_name) => {
  }
 };

+// @todo: this should be a clean state machine


This is really key, may it could be made cleaner

AndyOGo

@LucaMele
I added upgrades for create AMO script and withReact

LucaMele

go for it man!

LucaMele · 2018-11-20T11:46:07Z

Please communicate the breaking changes and the new API (constructor vs init)

approved

AndyOGo added Bug High-prio labels Oct 25, 2018

AndyOGo self-assigned this Oct 25, 2018

AndyOGo requested a review from LucaMele October 25, 2018 11:23

AndyOGo mentioned this pull request Oct 25, 2018

connectedCallback runs before init directly after calling HTMLElement's constructor by super WebReflection/document-register-element#154

Closed

AndyOGo commented Oct 25, 2018

View reviewed changes

AndyOGo changed the title ~~WIP Bugfix/enable built in element extension~~ Bugfix/enable built in element extension Oct 26, 2018

LucaMele suggested changes Oct 26, 2018

View reviewed changes

AndyOGo force-pushed the bugfix/enable-built-in-element-extension branch from 4187d62 to 3d99a5d Compare November 5, 2018 07:04

AndyOGo force-pushed the bugfix/enable-built-in-element-extension branch from d349969 to b6a4649 Compare November 5, 2018 10:42

AndyOGo commented Nov 5, 2018

View reviewed changes

AndyOGo added this to the Application Suitability milestone Nov 5, 2018

AndyOGo force-pushed the bugfix/enable-built-in-element-extension branch from 43457ec to 3e7015e Compare November 6, 2018 08:40

AndyOGo requested review from davidknezic, jan-capiak, jojackpot, kenaxa, MarekLacoAXA, 01231, sventschui and TheDadi November 8, 2018 10:56

AndyOGo force-pushed the bugfix/enable-built-in-element-extension branch from d29e1d2 to d5589b7 Compare November 12, 2018 09:49

AndyOGo added 24 commits November 20, 2018 09:50

refactored how hocs are being consumned

0ed55f9

added all HTML builtin constructors as globals to eslint

a9898da

added missing options param

f7baa0d

added with-base HOC

9ceab21

added customElements to gloabls

ac2c9b8

refactored create amo script

d433a22

added support for build in elements and react

33b5575

fixed most eslint indent errors

2e35735

fixed eslint

f762943

fixed missing init of super call

e03eacc

removed backslash

687a91f

abtracted base global into HOC

fbdf8b2

refactored base component global

a12e003

fixed withBase doclet

ee964db

improved with base global doclet

b3514dc

updated nanohtml to 1.3.0

e21a583

fixed all typos

66638ca

we only need HTML*Element constructors

fd6dac0

fixed white space

ff1aebb

only use article for non builtin organisms

a7fc312

use base global as default

b0354f4

improved composed hocs

79bef9b

only set is props if its available

7842c11

added caveat note

a6c9515

LucaMele approved these changes Nov 20, 2018

View reviewed changes

added misisng newline to create amo script

5f8f542

AndyOGo merged commit a1c42c2 into develop Nov 20, 2018

AndyOGo deleted the bugfix/enable-built-in-element-extension branch November 20, 2018 12:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bugfix/enable built in element extension #642

Bugfix/enable built in element extension #642

AndyOGo commented Oct 25, 2018 •

edited

Loading

AndyOGo Oct 25, 2018

LucaMele commented Oct 26, 2018

LucaMele left a comment

AndyOGo commented Nov 5, 2018 •

edited

Loading

LucaMele commented Nov 5, 2018

LucaMele commented Nov 5, 2018

AndyOGo Nov 5, 2018

AndyOGo Nov 5, 2018

AndyOGo Nov 5, 2018

AndyOGo Nov 5, 2018 •

edited

Loading

AndyOGo left a comment

LucaMele left a comment

LucaMele commented Nov 20, 2018

Bugfix/enable built in element extension #642

Bugfix/enable built in element extension #642

Conversation

AndyOGo commented Oct 25, 2018 • edited Loading

Type of change

How Has This Been Tested?

Checklist:

AndyOGo Oct 25, 2018

Choose a reason for hiding this comment

LucaMele commented Oct 26, 2018

LucaMele left a comment

Choose a reason for hiding this comment

AndyOGo commented Nov 5, 2018 • edited Loading

LucaMele commented Nov 5, 2018

LucaMele commented Nov 5, 2018

AndyOGo Nov 5, 2018

Choose a reason for hiding this comment

AndyOGo Nov 5, 2018

Choose a reason for hiding this comment

AndyOGo Nov 5, 2018

Choose a reason for hiding this comment

AndyOGo Nov 5, 2018 • edited Loading

Choose a reason for hiding this comment

AndyOGo left a comment

Choose a reason for hiding this comment

LucaMele left a comment

Choose a reason for hiding this comment

LucaMele commented Nov 20, 2018

AndyOGo commented Oct 25, 2018 •

edited

Loading

AndyOGo commented Nov 5, 2018 •

edited

Loading

AndyOGo Nov 5, 2018 •

edited

Loading