Skip to content

Thane updated to first major beta version - v0.1.1 #1981

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

Open
timlouw wants to merge 1 commit into
base: master
Choose a base branch
from
+101 −51
Open

Thane updated to first major beta version - v0.1.1 #1981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions frameworks/keyed/thane/.thane/types/client.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
declare module '*.css' {
/** CSS content as a string (inlined at compile time by thane) */
const css: string;
export default css;
}
88 changes: 68 additions & 20 deletions frameworks/keyed/thane/benchmark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,48 @@
import { defineComponent, signal } from "thane";
import { defineComponent, signal } from 'thane';

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 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 colours = ['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 nouns = [
'table',
'chair',
'house',
'bbq',
'desk',
'car',
'pony',
'cookie',
'sandwich',
'burger',
'pizza',
'mouse',
'keyboard',
];

const pick = (arr: string[]) => arr[Math.round(Math.random() * 1000) % arr.length]!;
const buildLabel = () => `${pick(adjectives)} ${pick(colours)} ${pick(nouns)}`;
Expand All @@ -24,22 +64,20 @@ const buildData = (count: number): RowData[] => {

export const Benchmark = defineComponent('bench-mark', () => {
const rows = signal<RowData[]>([]);
let selectedEl: HTMLElement | null = null;
const selected = signal<number>(0);

const select = (row: RowData, e: Event) => {
if (selectedEl) selectedEl.className = '';
selectedEl = (e.target as HTMLElement).closest('tr') as HTMLElement;
selectedEl.className = 'danger';
const select = (id: number) => {
selected(id);
};

const run = () => {
rows(buildData(1000));
selectedEl = null;
selected(0);
};

const runLots = () => {
rows(buildData(10000));
selectedEl = null;
selected(0);
};

const add = () => {
Expand All @@ -58,7 +96,7 @@ export const Benchmark = defineComponent('bench-mark', () => {

const clear = () => {
rows([]);
selectedEl = null;
selected(0);
};

const swapRows = () => {
Expand All @@ -74,7 +112,7 @@ export const Benchmark = defineComponent('bench-mark', () => {

const remove = (id: number) => {
const data = rows();
const idx = data.findIndex(d => d.id === id);
const idx = data.findIndex((d) => d.id === id);
if (idx !== -1) {
rows(data.slice(0, idx).concat(data.slice(idx + 1)));
}
Expand All @@ -91,22 +129,32 @@ export const Benchmark = defineComponent('bench-mark', () => {
<div class="col-md-6">
<div class="row">
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="run" @click=${run}>Create 1,000 rows</button>
<button type="button" class="btn btn-primary btn-block" id="run" @click=${run}
>Create 1,000 rows</button
>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="runlots" @click=${runLots}>Create 10,000 rows</button>
<button type="button" class="btn btn-primary btn-block" id="runlots" @click=${runLots}
>Create 10,000 rows</button
>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="add" @click=${add}>Append 1,000 rows</button>
<button type="button" class="btn btn-primary btn-block" id="add" @click=${add}
>Append 1,000 rows</button
>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="update" @click=${update}>Update every 10th row</button>
<button type="button" class="btn btn-primary btn-block" id="update" @click=${update}
>Update every 10th row</button
>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="clear" @click=${clear}>Clear</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="swaprows" @click=${swapRows}>Swap Rows</button>
<button type="button" class="btn btn-primary btn-block" id="swaprows" @click=${swapRows}
>Swap Rows</button
>
</div>
</div>
</div>
Expand All @@ -117,10 +165,10 @@ export const Benchmark = defineComponent('bench-mark', () => {
${repeat(
rows(),
(row) => html`
<tr>
<tr class=${selected() === row.id ? 'danger' : ''}>
<td class="col-md-1">${row.id}</td>
<td class="col-md-4">
<a @click=${(e: Event) => select(row, e)}>${row.label}</a>
<a @click=${() => select(row.id)}>${row.label}</a>
</td>
<td class="col-md-1">
<a @click=${() => remove(row.id)}>
Expand All @@ -137,6 +185,6 @@ export const Benchmark = defineComponent('bench-mark', () => {
</table>
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>
`
`,
};
});
34 changes: 16 additions & 18 deletions frameworks/keyed/thane/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>Thane Benchmark - keyed</title>

<!-- js-framework-benchmark standard CSS -->
<link href="/css/currentStyle.css" rel="stylesheet"/>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<!-- No caching for benchmark accuracy -->
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<head>
<title>Thane Benchmark - keyed</title>

<script type="module" src="MAIN_JS_FILE_PLACEHOLDER"></script>
</head>
<body>
<!-- Component will be injected here by Thane compiler -->
</body>
<!-- js-framework-benchmark standard CSS -->
<link href="/css/currentStyle.css" rel="stylesheet" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<!-- No caching for benchmark accuracy -->
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<!-- Component will be injected here by Thane compiler -->
</body>
</html>
3 changes: 1 addition & 2 deletions frameworks/keyed/thane/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { mount } from 'thane';
import { Benchmark } from './benchmark.js';

mount(Benchmark);
mount({ component: Benchmark });
10 changes: 5 additions & 5 deletions frameworks/keyed/thane/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.

12 changes: 6 additions & 6 deletions frameworks/keyed/thane/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@
"type": "module",
"js-framework-benchmark": {
"customURL": "/dist/",
"frameworkVersion": "0.0.48",
"frameworkVersion": "0.1.1",
"frameworkHomeURL": "https://github.com/timlouw/thane"
},
"scripts": {
"build": "thane build --entry ./main.ts --out ./dist --assets ./assets --html ./index.html",
"build-prod": "thane build --prod --entry ./main.ts --out ./dist --assets ./assets --html ./index.html",
"start": "thane dev --entry ./main.ts --out ./dist --assets ./assets --html ./index.html",
"start-prod": "thane serve --prod --entry ./main.ts --out ./dist --assets ./assets --html ./index.html"
"build": "thane build --entry ./main.ts --out ./dist --assets ./assets --html ./index.html --base /frameworks/keyed/thane/dist/",
"build-prod": "thane build --prod --entry ./main.ts --out ./dist --assets ./assets --html ./index.html --base /frameworks/keyed/thane/dist/",
"start": "thane dev --entry ./main.ts --out ./dist --assets ./assets --html ./index.html --base /frameworks/keyed/thane/dist/",
"start-prod": "thane serve --prod --entry ./main.ts --out ./dist --assets ./assets --html ./index.html --base /frameworks/keyed/thane/dist/"
},
"dependencies": {
"thane": "0.0.48"
"thane": "^0.1.1"
}
}