A simple CLI for running Javascript projects.
Motion can now be found at steelbrain/pundle/motion
๐ Thank you everyone who used Motion in their projects. Motion will continue development in it's new home.
javascript cli: fast, configurable, easy, with hmr
A simple CLI for running Javascript projects.
Motion can now be found at steelbrain/pundle/motion
๐ Thank you everyone who used Motion in their projects. Motion will continue development in it's new home.
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?
view.update(view._render = function () {...
should be
view._render = function ()
<div repeat={things}>{thing => <span />}</div>
view Main {
let stuff = ['one']
setTimeout(() => stuff.push('two'), 1000)
<h1>{stuff.join()}</h1>
}
Should work
We'd need to hook into babel and:
// 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:
Starting this because this will require us getting a few things working
To preview the production app instantly
This specifically will break it:
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.
$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
view Docs.Name {
}
view Docs.Name {
}
Add support syntax when there are no children.
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.
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(() => {})
}
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
Let's start with Atom and move to Sublime quickly, then vim. It should do at base:
... but only ones that were previously installed through checking source.
<tag {...{ className: 'some' }} />
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
/flint.prod.js?123
etc
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!
null.repeat, etc
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:
Should have a little X
Until we get this in babylon, lets do:
^
=> view.__props__
view.props
__props__
This should be a quick fix.
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.
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.
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
This actually probably easier than it sounds:
Keep in mind: assets could be used in all sorts of ways. , , etc. So should stay really generic and simple if possible.
They are starting to have some real overlap. Upsides:
Was really confusing with this:
view Nav {
$ = {
margin: [0, 'auto'],
flexFlow:
}
Just need to store errors per-file.
Show in favicon as a green/yellow/red for success/saving/error. To give users confidence their save actually propogated.
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
Flint.view("Main", "-2012392818", ...
->
Flint.view("Main", ...)
If we're gonna have CSS, we may as well make it easy.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.