Skip to content

changed hellajs to keyed, upgrade to 0.6 #1879

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 25, 2025
Merged

changed hellajs to keyed, upgrade to 0.6 #1879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
18e871a
changed hella to keyed, upgrade to 0.6
omilli May 12, 2025
4ec846a
bump keyed/hellajs to 0.6.2
omilli May 15, 2025
a196448
bump keyed/hellajs to 0.6.3
omilli May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frameworks/non-keyed/hellajs/index.html → frameworks/keyed/hellajs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</head>

<body>
<div id="root"></div>
<div id="app"></div>
<script src="dist/main.js"></script>
</body>

Expand Down
104 changes: 104 additions & 0 deletions frameworks/keyed/hellajs/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 1 addition & 4 deletions frameworks/non-keyed/hellajs/package.json → frameworks/keyed/hellajs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,12 @@
"frameworkHomeURL": "https://hellajs.com"
},
"scripts": {
"dev:server": "bun ./index.html",
"dev:build": "bun build ./src/main.js --outdir ./dist --minify --watch",
"dev": "bun run dev:server & bun run dev:build",
"build-prod": "bun build ./src/main.js --outdir ./dist --minify"
},
"devDependencies": {
"bun": "^1.2.9"
},
"dependencies": {
"@hellajs/core": "^0.3.0"
"@hellajs/core": "^0.6.3"
}
}
115 changes: 115 additions & 0 deletions frameworks/keyed/hellajs/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import { html, signal, batch, forEach, mount } from "@hellajs/core";

const { div, table, tbody, tr, td, button, span, a, h1 } = html;

const adjectives = ["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"];
const colors = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];

const random = (max) => Math.round(Math.random() * 1000) % max;

let nextId = 1;

const buildData = (count) => {
let d = new Array(count);
for (let i = 0; i < count; i++) {
const label = signal(
`${adjectives[random(adjectives.length)]} ${colors[random(colors.length)]} ${nouns[random(nouns.length)]}`
);
d[i] = { id: nextId++, label };
}
return d;
};

const ActionButton = (
id,
label,
onclick
) =>
div({ class: "col-sm-6" },
button({ id, onclick, class: 'btn btn-primary btn-block col-md-6', type: "button" },
label
)
)

function Bench() {
const rows = signal([]);
const selected = signal(undefined);

const create = (count) => {
rows.set(buildData(count));
}

const append = (count) => {
rows.set([...rows(), ...buildData(count)]);
}

const update = () => {
batch(() => {
for (let i = 0, d = rows(), len = d.length; i < len; i += 10) {
const label = d[i].label;
label.set(`${label()} !!!`);
}
})
};

const swapRows = () => {
const list = rows().slice();
if (list.length > 998) {
let item = list[1];
list[1] = list[998];
list[998] = item;
rows.set(list);
}
};

const remove = (id) => {
rows.set(rows().filter(row => row.id !== id));
}

const clear = () => {
rows.set([]);
}

return div({ id: 'main' },
div({ class: 'container' },
div({ class: 'jumbotron' },
div({ class: 'row' },
div({ class: 'col-md-6' }, h1('HellaJS Keyed')),
div({ class: 'col-md-6' },
div({ class: 'row' },
ActionButton('run', 'Create 1,000 rows', () => create(1000)),
ActionButton('runlots', 'Create 10,000 rows', () => create(10000)),
ActionButton('add', 'Append 1,000 rows', () => append(1000)),
ActionButton('update', 'Update every 10th row', () => update()),
ActionButton('clear', 'Clear', () => clear()),
ActionButton('swaprows', 'Swap Rows', () => swapRows()),
)
),
),
),
table({ class: 'table table-hover table-striped test-rows' },
tbody(
forEach(rows, (row) =>
tr({ class: () => (selected() === row.id ? 'danger' : '') },
td({ class: 'col-md-1' }, row.id),
td({ class: 'col-md-4' },
a({ class: 'lbl', onclick: () => selected.set(row.id) },
row.label
),
),
td({ class: 'col-md-1' },
a({ class: 'remove', onclick: () => remove(row.id) },
span({ class: 'glyphicon glyphicon-remove', ariaHidden: 'true' })
),
),
)
)
),
),
span({ class: 'preloadicon glyphicon glyphicon-remove' }, ''),
),
)
}

mount(Bench, "#app");
Loading