theneuronproject/ef.js

The timeless, future facing front-end framework

ef.js's Issues

Support multiple arguments on event handlers

onNextRender query may be triggered twice

Add ability to distinguish `keyEvent.code`

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
https://en.wikipedia.org/wiki/Scancode

Though we cannot get the scancode directly from browser, we can still access the similar information at keyEvent.code. For example, Enter and NumpadEnter both give out a key code of 13, but the keyEvent.code gives out differently with Enter and NumpadEnter. While Chrome and Firefox act differently on some keys according to MDN, supporting this feature still needs a well discussion or design.

Add JSX support

Jsx is now widely used in multiple frontend frameworks like React and Vue.js. After a while of thinking I found that having jsx in ef.js projects is pretty possible. Here is an example:

const {t} = ef

const MyDiv = t`
>div.{{className}}
  #my-component
  #style = {{style}}
  +children
`

const Hello = t`
>h1.{{className}}
  #my-component
  #style = {{style}}
  .Hello, {{name}}!
`

const MyTextInput = t`
>input.{{className}}
  #my-component
  #type = text
  #style = {{style}}
  @input = input:{{value}}
  %value = {{value}}
`

const myHelloInstance = new Hello()

const myComponent = <MyDiv
  $data={{
    className: 'some class names',
    style: 'background-color: #CCC;'
  }}
>
  {myHelloInstance},
  <MyTextInput
    $methods={{
      input({value}) {
        myHelloInstance.$data.name = value
      }
    }}
  />
</MyDiv>

myComponent.$mount({target: document.body})

the jsx part will be transpiled into:

const myComponent = new MyDiv({
  $data: {
    className: 'some class names',
    style: 'background-color: #CCC;'
  },
  children: [
    myHelloInstance,
    new MyTextInput({
      $methods: {
        input({value}) {
          myHelloInstance.$data.name = value
        }
    })
  ]
)

or with ef.createElement:

const myComponent = ef.createElement(MyDiv, {...propsForMyDiv}, myHelloInstance, ef.createElement(MyTextInput, {...propsForMyTextInput}))

If we map needed props to the component class it self, things could be more easy like:

const myComponent = <MyDiv className='some class names' style='background-color: #CCC;'>
  {myHelloInstance}
  <MyInput input={({value}) => {
    myHelloInstance.name = value
  }/>
</MyDiv>

Using the first implementation we should write our own transpilers, while with the second implementation, we could just use the existing jsx transpilers to have the transpiling done like babel and buble. Using the second approach could be more convenient when project bootstraps.

Multiline text support with EFML

Add a symbol | to support multiline with automatically new line support, no need to add a &n at each line like using . strings.

Example:

>pre
  .This is a single line content.
  . This line of text is following the first line.
  |This starts a new line by automatically adding an `&n` to the beginning of the line.
  |A new line is started.
  |Another new line is started.
  . This follows the previous line. 

Implement fragment

For now a component can only be created within a tag, thus is not really convenient for some complicated circumstances. For example, a template like:

>h1
  .Hello, World!
>h2
  .Hello, ef.js

could be rendered as:

<h1>Hello, World!</h1>
<h2>Hello, ef.js</h2>

This can also be helpful when using jsx implementation(#3), while React provides React.fragment which does exactly the same thing.

Custom two-way binding support

Such as

>input
  #type = date
  %valueAsDate@change = {{date}}

When change event triggers, date will automatically update to the latest inputElement.valueAsDate.

Mount option modification

before and after is sort of ambiguous, consider change to append and prepend while before and after could do other things.

Add XML flavor templates support

Typo in readme

SublimeEFMLHightlighter should be SublimeEFMLHighlighter

Add eft-compiler

Add a relay-compiler like compiler for ef templates to support strong typing.

Text fragment support

Now we have mounting points and list mounting points, which can handle all ef-components at ease. But times when people want only to put a line of text into the mounting points, things gets really hard. Maybe we can have text fragments supported, which can also be helpful when jsx(#3) gets supported.

For Example:

const {t} = ef

const component = new (t`
>div
  -nodeMountingPoint
  +listMountingPoint
`)()

component.nodeMountingPoint = 'Hello World!'
component.listMountingPoint.push('Hello ef.js!')
component.listMountingPoint.push('Hello text fragments!')

component.$mount({target: document.body})

could be rendered as:

<div>Hello World!Hello ef.js!Hello text fragments!</div>

while with jsx support, we can have:

const {t} = ef

const Div = t`
>div
  +children
`

const H1 = t`
>H1
  +children
`

const component = <Div>
  First line text
  <H1>Title text here</H1>
  Third line text
</Div>

component.$mount({target: document.body})

Missing `toEFComponent` on ef.js

toEFComponent exists on ef-core but not on ef.js.