flimflamjs / flimflam

Expressive UI components
16 stars 1 forks source link

Question: Why use require compare to import statement ? #6

Open MangelMaxime opened 7 years ago

MangelMaxime commented 7 years ago

Hello, I am starting to play with FlimFlam and I decided to go with Rollup (ES6) + Gulp for the build tasks.

I had some problem with those lines:

const patch = snabbdom.init([
  require('snabbdom/modules/class')
, require('snabbdom/modules/props')
, require('snabbdom/modules/style')
, require('snabbdom/modules/eventlisteners')
])

I was having an error: Uncaught ReferenceError: require is not defined

I tryed to use:

import sClass from 'snabbdom/modules/class'
import sProps from 'snabbdom/modules/props'
import sStyle from 'snabbdom/modules/style'
import sEventlisteners from 'snabbdom/modules/eventlisteners'

const patch = snabbdom.init([
    sClass, sProps, sStyle, sEventlisteners
])

And with now it's working. Is there any reason to prefer require compare to import ?

MangelMaxime commented 7 years ago

Just a quick update, I finally go with Webpack2 because I couldn't make the code splitting work with Rollup. I wanted to split the vendor from the app to get the app reload faster in dev mode.

So with Webpack2 I can use either import or require now. Still my question remain :)

jayrbolton commented 7 years ago

Try importing the newer metapackage called flimflam on npm, which comes with a newer version of the render function that has patch bundled inside it, already intialized:

import h from 'flimflam/h'
import render from 'flimflam/render'

function init() {  return {hi: 'hi'} }
function view(state) { return h('body', 'hi') }

// Newer render function has the signature: render(view, state, container)
const container = document.body
render(view, init(), container)