Right now using an object to hash method thats super slow, babel could help us, or profile the runtime version and see if theres better.

$button {
  color: 'blue'
}

should bring up 'did you mean $button = {?' or something similar. This would likely require regex in the compiler, but that is fine because its a syntax err

$button {
  font-size: 16
}

should bring up `flint styles are camelCase. Did you mean fontSize?

I've seen users make both mistakes many times and it's a good opportunity for some really nice errors

This actually probably easier than it sounds:

• Gulp pipeline for static assets
• Gulp sends bridge message to reload on asset change
• Can we just trigger a "reload" in the page somehow? If not, some simple way to force the browser to check for new assets

Keep in mind: assets could be used in all sorts of ways. , , etc. So should stay really generic and simple if possible.

I'm using YQL which requires 'fs'. We should throw an error saying "YQL is trying to access FS" or something similar.

Right now we throw this and it's not super helpful.

If we're gonna have CSS, we may as well make it easy.

<tag {...{ className: 'some' }} />

null.repeat, etc

This is more exploratory, given Flint is trying to ease a lot of stuff, but without losing full control, this is questionable because it could perhaps cause edge cases. But generally this would be a big win, it's a total pain having to remember to do this.

To preview the production app instantly

view Main {
  let exists = true
  <h1>Hello world!</h1>
  <Header if={exists} />
  <button onClick={() => exists = !exists}>toggle</button>
}

view Header {
  let n;
  on('update', () => {
    console.log('in update')
    n = Math.random()
  })

  <header-h2>hi {n}</header-h2>
}

'in update' logs twice when it should log once

Would be a 1-hour hack: read your scripts from package.json, display them below the default CLI helper commands, give them maybe a two letter command for more safety.

This specifically will break it:

http://d.pr/i/1kFpT

view Main {
  let what = 'welcome'
  let where = 'flint'

  <thing>{what} to {where}!</thing>

  $ = {
    alignItems: 'center',
    justifyContent: 'center'
  }
}

renders

with html

Flint.view("Main", "-2012392818", ... 

->

Flint.view("Main", ...)

Was really confusing with this:

view Nav {
  $ = {
    margin: [0, 'auto'],
    flexFlow: 
}

view Main {
  $h1 = { color: 'red' }
  $h1 = { color: 'red' }
}

Should throw a compile-time error saying "you've defined $h1 twice". We've both run into this many times and it would be a huge usability win

Add support syntax when there are no children.

Show in favicon as a green/yellow/red for success/saving/error. To give users confidence their save actually propogated.

<div repeat={things}>{thing => <span />}</div>

I had a piece of code

<State if={['/','state'].indexOf(Flint.router.location) > -1} />

and wanted to change it to

<State /> // if={['/','state'].indexOf(Flint.router.location) > -1} />

or something similar, and there were no good ways of doing that. There should be

The dom is currently the hardest part about developing with Flint on a real application

I've added to flint-transform so that it now extracts styles into static and non-static on compile:

Before:

view Main {
  $one = { static: 'style', color: red }
}

After:

view Main {
  view.styles._static.$one = { static: 'style' }
  view.styles.$one = { color: red }
}

But they are all still placed inline on the tag. Now we need to do a second step on mount that:

• Moves static styles into header CSS
• Generates className for unique style object
• Places className on relevant tags in createElement.js
• Build-time generates .css file and puts it into header

view.update(view._render = function () {...

should be

view._render = function ()

This should be a quick fix.

We'd need to hook into babel and:

• Use babel to do all view transformation
• Alternatively, we could hack around this by just having babel read something to detect views
• Once inside views, wrap all getters that are one level inside view:

// before
view Main { let name = 'one' }
// after
view Main { let name = view.get('name', 'one') }

Why? This would enable super smart hot updating, which gives us:

• Components keep their state on save even when other parts of them change
• Components update only the state that is changed (keep state of non-changed variables)
• If you change a variable inside the file, views can keep state
• Sub-views keep state even when parent changes (just check if props change)

/flint.prod.js?123 etc

Should have a little X

For some reason gulp runs the deleted file through the pipeline still even after delete, which causes the browser to try and load a script that doesn't exist!

I'm structuring my app like

/pages/page1/main.js
/pages/page2/main.js

and when I have an error I don't know which folder it's in

It would be more helpful to see page1/main.js as a label

Just need to store errors per-file.

... but only ones that were previously installed through checking source.

Given we don't have that many events, we could make on better looking:

https://developer.mozilla.org/en-US/docs/Web/Events

And do:

view Main {
  on.mount(() => {})
  on.scroll(() => {})
}

Let's start with Atom and move to Sublime quickly, then vim. It should do at base:

• Drag numbers
• Live Color Picker
• Custom syntax highlight (detect views/styles better)
• Save as you type option
• Suggestions for CSS attributes (autocomplete eventually)
• Tag create syntax (type word and hit key to complete tag either self-closing or regular)
• Collapse/expand all styles
• Collapse/expand all views
• Go to view in project

• Flexbox grid (Row/Col)
• Functional
• Firebase
• ...

They are starting to have some real overlap. Upsides:

• Share modules (spinner, promise helpers, bluebird)
• Can generate and write configs better

Until we get this in babylon, lets do:

1. pre: ^ => view.__props__
2. babel: check view scope, change to view.props
3. post: undo __props__

Not even sure if this makes sense, but I need it for an app and there wasn't an obvious way to do it. Would be a use of compile-time routing

I've been building out a bunch of small tests for various things (not actual tests, just things to run). We should definitely flesh this out and automate it.

view Main {
  let stuff = ['one']

  setTimeout(() => stuff.push('two'), 1000)

  <h1>{stuff.join()}</h1>
}

Should work

update is where we put logic that should be run before render happens

view Main {
  let exists = true
  <h1>Hello world!</h1>
  <Header if={exists} />
  <button onClick={() => exists = !exists}>toggle</button>
}

view Header {
  let n;
  on('update', () => {
    n = Math.random()
  })

  <header-h2>hi {n}</header-h2>
}

Should show a number different number every time I click toggle. Instead it never sets n

Trying out flint on node 4.1.2 with npm 3.3.5 the installer hangs when I run flint new appname3. I tried -ddd and the only output I got was

Looking for updated scaffold in https://github.com/flint-lang/scaffold
Creating app...

Is this a known issue?

Starting this because this will require us getting a few things working

• Working with peerDependencies
• Install peerDependencies (but not React)
• Fix fbjs bug wherever that is happenening