Skip to content

Commit ddf212f

Browse files
allainallain
committed
adding non-keyed imba
1 parent 0643bc0 commit ddf212f

File tree

4 files changed

+234
-0
lines changed

4 files changed

+234
-0
lines changed

‎frameworks/non-keyed/imba/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Imba</title>
7+
<link href="/css/currentStyle.css" rel="stylesheet" />
8+
</head>
9+
10+
<body>
11+
<div id='main'></div>
12+
<script src='dist/main.js'></script>
13+
</body>
14+
15+
</html>

‎frameworks/non-keyed/imba/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "js-framework-benchmark-imba",
3+
"version": "1.0.0",
4+
"description": "Imba demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "imba"
8+
},
9+
"scripts": {
10+
"build-dev": "webpack --watch",
11+
"build-prod": "webpack"
12+
},
13+
"keywords": [
14+
"imba",
15+
"webpack"
16+
],
17+
"author": "Allain Lalonde",
18+
"license": "Apache-2.0",
19+
"homepage": "https://github.com/allain/js-framework-benchmark",
20+
"repository": {
21+
"type": "git",
22+
"url": "https://github.com/allain/js-framework-benchmark.git"
23+
},
24+
"devDependencies": {
25+
"terser-webpack-plugin": "1.1.0",
26+
"webpack": "4.22.0",
27+
"webpack-cli": "3.1.2"
28+
},
29+
"dependencies": {
30+
"imba": "^1.4.1"
31+
}
32+
}

‎frameworks/non-keyed/imba/src/main.imba‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
var A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"]
2+
var C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"]
3+
var N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]
4+
5+
tag Row < tr
6+
prop select
7+
prop remove
8+
prop item
9+
prop selected
10+
11+
def onSelect
12+
@select(@item)
13+
14+
def onRemove
15+
@remove(@item)
16+
17+
def render
18+
<self .selected=@selected>
19+
<td.col-md-1> @item:id
20+
<td.col-md-4><a :tap.onSelect> @item:label
21+
<td.col-md-1><a :tap.onRemove> <span.glyphicon.glyphicon-remove :aria-hidden=true>
22+
<td.col-md-6>
23+
24+
tag Button
25+
prop id
26+
prop cb
27+
prop title
28+
29+
def render
30+
<self>
31+
<div.col-sm-6.smallpad>
32+
<button.btn.btn-primary.btn-block :type='button' id=@id :tap=@cb> @title
33+
34+
var items = []
35+
var selected = 0
36+
var nextId = 1
37+
38+
tag Main
39+
def run
40+
items = buildData(1000)
41+
selected = 0
42+
Imba.commit
43+
44+
def runLots
45+
items = buildData(10000)
46+
selected = 0
47+
48+
def add
49+
items = items.concat(buildData(1000))
50+
51+
def update
52+
var i = 0
53+
while i < items:length
54+
var item = items[i]
55+
items[i] = { id: item:id, label: item:label + ' !!!' }
56+
i = i + 10
57+
Imba.commit()
58+
59+
def select item
60+
selected = item:id
61+
62+
def remove item
63+
items.splice(items.indexOf(item), 1)
64+
Imba.commit()
65+
66+
def clear
67+
items = []
68+
selected = 0
69+
70+
def swapRows
71+
if (items:length > 998)
72+
var temp = items[1]
73+
items[1] = items[998]
74+
items[998] = temp
75+
76+
Imba.commit
77+
78+
79+
def buildData(count)
80+
var newItems = Array.new(count)
81+
var i = 0
82+
while i < count
83+
newItems[i] = {
84+
id: nextId ,
85+
label: "{A[random(A:length)]} {C[random(C:length)]} {N[random(N:length)]}"
86+
}
87+
i = i + 1
88+
nextId = nextId + 1
89+
90+
newItems
91+
92+
def random max
93+
Math.round(Math.random() * 1000) % max
94+
95+
def render
96+
<self>
97+
<div.container>
98+
<div.jumbotron>
99+
<div.row>
100+
<div.col-md-6>
101+
<h1> 'Imba keyed'
102+
<div.col-md-6>
103+
<div.row>
104+
<Button id='run' title='Create 1,000 rows' cb=(do run)>
105+
<Button id="runlots" title="Create 10,000 rows" cb=(do runLots)>
106+
<Button id="add" title="Append 1,000 rows" cb=(do add)>
107+
<Button id="update" title="Update every 10th row" cb=(do update)>
108+
<Button id="clear" title="Clear" cb=(do clear)>
109+
<Button id="swaprows" title="Swap Rows" cb=(do swapRows)>
110+
111+
<table.table.table-hover.table-striped.test-data>
112+
<tbody> for item in items
113+
<Row :key=item:id item=item selected=(selected === item:id) select=(do select(item)) remove=(do remove(item))>
114+
<span.preloadicon.glyphicon.glyphicon-remove :aria-hidden=true>
115+
116+
Imba.mount <Main[{selected: 0, nextId: 0}]>

‎frameworks/non-keyed/imba/webpack.config.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
const path = require('path')
2+
const webpack = require('webpack')
3+
const TerserPlugin = require('terser-webpack-plugin')
4+
5+
module.exports = {
6+
// mode: 'production',
7+
mode: 'development',
8+
entry: {
9+
main: path.join(__dirname, 'src', 'main.imba')
10+
},
11+
output: {
12+
path: path.join(__dirname, 'dist'),
13+
filename: '[name].js'
14+
},
15+
resolve: {
16+
extensions: ['.imba']
17+
},
18+
module: {
19+
rules: [
20+
{
21+
test: /\.imba$/,
22+
loader: 'imba/loader'
23+
}
24+
]
25+
},
26+
optimization: {
27+
minimizer: [
28+
new TerserPlugin({
29+
terserOptions: {
30+
parse: {
31+
// we want terser to parse ecma 8 code. However, we don't want it
32+
// to apply any minfication steps that turns valid ecma 5 code
33+
// into invalid ecma 5 code. This is why the 'compress' and 'output'
34+
// sections only apply transformations that are ecma 5 safe
35+
// https://github.com/facebook/create-react-app/pull/4234
36+
ecma: 8
37+
},
38+
compress: {
39+
ecma: 5,
40+
warnings: false,
41+
// Disabled because of an issue with Uglify breaking seemingly valid code:
42+
// https://github.com/facebook/create-react-app/issues/2376
43+
// Pending further investigation:
44+
// https://github.com/mishoo/UglifyJS2/issues/2011
45+
comparisons: false
46+
},
47+
mangle: {
48+
safari10: true
49+
},
50+
output: {
51+
ecma: 5,
52+
comments: false,
53+
// Turned on because emoji and regex is not minified properly using default
54+
// https://github.com/facebook/create-react-app/issues/2488
55+
ascii_only: true
56+
}
57+
},
58+
// Use multi-process parallel running to improve the build speed
59+
// Default number of concurrent runs: os.cpus().length - 1
60+
parallel: true,
61+
// Enable file caching
62+
cache: true
63+
})
64+
]
65+
},
66+
plugins: [
67+
new webpack.DefinePlugin({
68+
'process.env': { NODE_ENV: JSON.stringify('production') }
69+
})
70+
]
71+
}

0 commit comments

Comments
 (0)