use external dep for elem2react (#258)

package.json

@@ -20,14 +20,12 @@
     "test:watch": "ava -w"
   },
   "devDependencies": {
+    "@nrk/custom-element-to-react": "1.0.4",
     "@babel/preset-env": "7.4.5",
-    "@babel/preset-react": "7.0.0",
     "ava": "1.4.1",
     "esm": "3.2.25",
     "fast-glob": "2.2.7",
     "puppeteer": "1.17.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
     "rollup": "1.12.3",
     "rollup-plugin-babel": "4.3.2",
     "rollup-plugin-commonjs": "10.0.0",
@@ -40,14 +38,7 @@
   "ava": {
     "require": [
       "esm"
-    ],
-    "babel": {
-      "testOptions": {
-        "presets": [
-          "@babel/preset-react"
-        ]
-      }
-    }
+    ]
   },
   "standard": {
     "globals": [

packages/core-datepicker/core-datepicker.jsx

@@ -1,4 +1,7 @@
 import CoreDatepicker from './core-datepicker.js'
-import { elementToReact } from '../utils.js'
+import customElementToReact from '@nrk/custom-element-to-react'
 
-export default elementToReact(CoreDatepicker, 'datepicker.change', 'datepicker.click.day', 'disabled', 'months', 'days')
+export default customElementToReact(CoreDatepicker, {
+  props: ['disabled', 'months', 'days'],
+  customEvents: ['datepicker.change', 'datepicker.click.day']
+})

packages/core-dialog/core-dialog.jsx

@@ -1,4 +1,6 @@
 import CoreDialog from './core-dialog.js'
-import { elementToReact } from '../utils.js'
+import customElementToReact from '@nrk/custom-element-to-react'
 
-export default elementToReact(CoreDialog, 'dialog.toggle')
+export default customElementToReact(CoreDialog, {
+  customEvents: ['dialog.toggle']
+})

packages/core-progress/core-progress.jsx

@@ -1,4 +1,6 @@
 import CoreProgress from './core-progress.js'
-import { elementToReact } from '../utils.js'
+import customElementToReact from '@nrk/custom-element-to-react'
 
-export default elementToReact(CoreProgress, 'change')
+export default customElementToReact(CoreProgress, {
+  customEvents: ['change']
+})

packages/core-scroll/core-scroll.jsx

@@ -1,4 +1,6 @@
 import CoreScroll from './core-scroll.js'
-import { elementToReact } from '../utils.js'
+import customElementToReact from '@nrk/custom-element-to-react'
 
-export default elementToReact(CoreScroll, 'scroll.change')
+export default customElementToReact(CoreScroll, {
+  customEvents: ['scroll.change']
+})

packages/core-suggest/core-suggest.jsx

@@ -1,4 +1,6 @@
 import CoreSuggest from './core-suggest.js'
-import { elementToReact } from '../utils.js'
+import customElementToReact from '@nrk/custom-element-to-react'
 
-export default elementToReact(CoreSuggest, 'suggest.filter', 'suggest.select', 'suggest.ajax', 'suggest.ajax.beforeSend')
+export default customElementToReact(CoreSuggest, {
+  customEvents: ['suggest.filter', 'suggest.select', 'suggest.ajax', 'suggest.ajax.beforeSend']
+})

packages/core-tabs/core-tabs.jsx

@@ -1,4 +1,7 @@
 import CoreTabs from './core-tabs.js'
-import { elementToReact } from '../utils.js'
+import customElementToReact from '@nrk/custom-element-to-react'
 
-export default elementToReact(CoreTabs, 'tab', 'tabs.toggle')
+export default customElementToReact(CoreTabs, {
+  props: ['tab'],
+  customEvents: ['tabs.toggle']
+})

packages/core-toggle/core-toggle.jsx

@@ -1,4 +1,6 @@
 import CoreToggle from './core-toggle.js'
-import { elementToReact } from '../utils.js'
+import customElementToReact from '@nrk/custom-element-to-react'
 
-export default elementToReact(CoreToggle, 'toggle', 'toggle.select')
+export default customElementToReact(CoreToggle, {
+  customEvents: ['toggle', 'toggle.select']
+})

packages/index.html

@@ -17,4 +17,4 @@
   <li><a href="https://github.com/nrkno/core-components/issues/new">Report issue</a></li>
   <li><a href="https://nrk.slack.com/messages/C49CY4VTP/">Get help (NRK only)</a></li>
 </ul>
-<script src="https://static.nrk.no/core-docs/major/1/core-docs.min.js" charset="utf-8" defer></script>
+<script src="https://static.nrk.no/core-docs/major/1/core-docs.min.js" charset="utf-8"></script>

packages/utils.js

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export const IS_BROWSER = typeof window !== 'undefined'
 export const IS_ANDROID = IS_BROWSER && /(android)/i.test(navigator.userAgent) // Bad, but needed
 export const IS_IOS = IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform))
@@ -94,35 +92,6 @@ export function dispatchEvent (element, name, detail = {}) {
   return result // Follow W3C standard for return value
 }
 
-export function elementToReact (elementClass, ...attr) {
-  const name = elementClass.name || String(elementClass).match(/function ([^(]+)/)[1] // String match for IE11
-  const tag = `${name.replace(/\W+/, '-')}-${getUUID()}`.toLowerCase()
-  if (IS_BROWSER && !window.customElements.get(tag)) window.customElements.define(tag, elementClass)
-
-  return class extends React.Component {
-    constructor (props) {
-      super(props)
-      this.ref = (el) => (this.el = el)
-      attr.forEach((k) => {
-        const on = `on${k.replace(/(^|\.)./g, (m) => m.slice(-1).toUpperCase())}` // input.filter => onInputFilter
-        this[k] = (event) => this.props[on] && closest(event.target, this.el.nodeName) === this.el && this.props[on](event)
-      })
-    }
-    componentDidMount () { attr.forEach((k) => this.props[k] ? (this.el[k] = this.props[k]) : this.el.addEventListener(k, this[k])) }
-    componentDidUpdate (prev) { attr.forEach((k) => prev[k] !== this.props[k] && (this.el[k] = this.props[k])) }
-    componentWillUnmount () { attr.forEach((k) => this.el.removeEventListener(k, this[k])) }
-    render () {
-      // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
-      return React.createElement(tag, Object.keys(this.props).reduce((props, k) => {
-        if (k === 'className') props.class = this.props[k] // Fixes className for custom elements
-        else if (this.props[k] === true) props[k] = '' // Fixes boolean attributes
-        else if (this.props[k] !== false) props[k] = this.props[k]
-        return props
-      }, { ref: this.ref }))
-    }
-  }
-}
-
 /**
 * getUUID
 * @return {String} A generated unique ID

rollup.config.js

@@ -74,17 +74,4 @@ export default utils.pkgs.reduce((all, path) => {
     external,
     plugins
   })
-}, [
-  {
-    input: 'packages/utils.js', // JS UMD for tests
-    output: {
-      format: 'umd',
-      file: 'packages/utils.min.js',
-      sourcemap: false,
-      name: 'utils',
-      globals
-    },
-    plugins,
-    external
-  }
-])
+}, [])