ion
Version:
ion language ========================
213 lines (208 loc) • 7.79 kB
HTML
<html>
<head>
<title>Code Samples</title>
<script src="/scripts.js"></script>
</head>
<body>
<script type='ion'>
const compiler = import 'ion/compiler'
const samples = []
{}
title: "Basic Operators"
description: "Same as coffeescript"
ion: ""
let logic = a is b or c isnt d or not (e is f)
let existential = d?
{}
title: "Inline Variable Declarations"
ion: ""
let x
let y = 10, z = 9
const one = 1
const two = 2
{}
title: "Multiline Variable Declarations"
ion: ""
let
x = 10
y = 10
const
pi = 3.14
{}
title: "Export Statements"
ion: ""
export { PI:3.14, E: 2.71 }
export const Foo = 1
export const Bar = 2
{}
title: "Import Expressions"
ion: ""
import 'bar'
const foo = import 'bar/foo'
const {PI,E} = import 'math/constants'
{}
title: "If Statements"
ion: ""
if one
return one
else
return two
{}
title: "For, While, Try Statements"
imperative: true
ion: ""
for let i = 0; i < 10; i++
console.log(i)
while true
doSomething()
try
doSomething
catch e
console.error(e)
finally
console.log('finished')
{}
title: "For In Statement"
description: 'Same semantics as coffeescript'
ion: ""
let array = [1,2,3,4]
for number in array
console.log(number)
for number, index in array
console.log(number, index)
{}
title: "For Of Statement"
description: 'Same semantics as coffeescript'
ion: ""
let object = {a:1,b:2,c:3}
for key of object
console.log(key)
for key, value of object
console.log(key, value)
{}
title: "Simple Object Declaration"
ion: ""
let json = {a:1,b:2,c:3}
let dynamic = {a:1,b:2,['c']:3}
let array = [1,2,3,4]
{}
title: "Function Declaration"
description: "Functions defined on a single line have an implicit return"
ion: ""
let double = (a) ->
return a * 2
let noImplicitReturn = (a) ->
console.log(a)
let lambda = (a) -> a * 2
{}
title: "Function Call Expression"
ion: ""
console.log(a, getValue(b))
let multilineFunctionCall = console.log(
a
getValue(b)
getValue(
c + d
)
)
{}
title: "Array Comprehensions"
ion: ""
let digits = [0,1,2,3,4,5,6,7,8,9]
let even = [i for i in digits if i % 2 is 0]
{}
title: "Multiline Object Declaration"
ion: ""
let objects =
alpha:
id: 1
name: 'alpha'
beta:
id: 2
name: 'beta'
{}
title: "Typed Multiline Object Declaration"
ion: ""
let objects =
alpha: new Person()
id: 1
name: 'alpha'
beta: new Person()
id: 2
name: 'beta'
{}
title: "Typed Multiline Object Declaration with Logic"
description: ''
Control flow and variable declarations are allowed in an object literal.
This makes the declaration of large nested structures easier.
ion: ""
let objects =
alpha: new Person()
id: 1
name: 'alpha'
let shouldWeShowBeta = false
if shouldWeShowBeta is true
beta: new Person()
id: 2
name: 'beta'
for person in loadOtherPersons()
[person.name]: person
const compile = (code) ->
try
return compiler.compile(code)
catch e
return e.toString()
const hasError = (code) ->
try
compiler.compile(code)
return false
catch e
return true
return template ->
return Div()
H2()
'Samples'
for sample in samples
Div()
style:
marginTop: '1em'
H4()
style:
marginLeft: '0.1em'
marginBottom: '0.2em'
sample.title
if sample.imperative
Span()
style:
marginLeft: '1em'
fontSize: 'smaller'
opacity: 0.5
"(imperative code only)"
if sample.description
Span()
sample.description
Textarea()
keyup(e) ->
sample.ion = @value
style:
display: 'inline-block'
verticalAlign: 'top'
width: '30em'
padding: '0.5em'
marginTop: '1em'
rows: sample.ion.split('\n').length
sample.ion
Div()
style:
display: 'inline-block'
border: 'solid gray 1px'
whiteSpace: 'pre'
marginLeft: '2em'
width: '30em'
background: '#eeeeee'
padding: '0.5em'
color: hasError(sample.ion) ? 'red' : 'initial'
compile(sample.ion)
</script>
</body>
</html>