Skip to content

Commit

Permalink
Merge pull request #1 from webxdc/adb/add-vitest-and-prettier
Browse files Browse the repository at this point in the history
add vitest and prettier
  • Loading branch information
adbenitez committed Jun 24, 2023
2 parents 57f3bc7 + 010188a commit a84e80b
Show file tree
Hide file tree
Showing 13 changed files with 1,228 additions and 90 deletions.
20 changes: 20 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
name: CI

on:
pull_request:
push:
branches:
- master

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
- uses: actions/setup-node@v3
with:
node-version: 16.x
cache: pnpm
- run: pnpm i
- run: pnpm test
16 changes: 7 additions & 9 deletions .github/workflows/release-webxdc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,26 @@ name: Release Webxdc
on:
push:
tags:
- 'v*.*.*'
- "v*.*.*"

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3

- name: Install pnpm
uses: pnpm/action-setup@v2

- name: Setup node
uses: actions/setup-node@v2
uses: actions/setup-node@v3
with:
node-version: 16.x
cache: pnpm

- name: Install
run: pnpm i

- name: Build
run: pnpm run build
- run: pnpm i
- run: pnpm test
- run: pnpm build

- name: Release
uses: softprops/action-gh-release@v1
Expand All @@ -34,4 +32,4 @@ jobs:
Auto-generated release
prerelease: ${{ contains(github.event.ref, '-beta') }}
fail_on_unmatched_files: true
files: dist-xdc/*.xdc
files: ./dist-xdc/*.xdc
5 changes: 5 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
dist
dist-xdc
webxdc.js
webxdc.d.ts
pnpm-lock.yaml
20 changes: 16 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# WebXDC Vite Template
# WebXDC Vite Template [![CI](https://github.com/webxdc/webxdc-vite/actions/workflows/ci.yml/badge.svg)](https://github.com/webxdc/webxdc-vite/actions/workflows/ci.yml) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

A minimalist Vite project template for WebXDC development.

Expand All @@ -9,6 +9,10 @@ A minimalist Vite project template for WebXDC development.
- 📱 Integrated [WebXDC emulator](https://github.com/webxdc/webxdc-dev) to test your WebXDC right on the browser while developing,
and [Eruda](https://github.com/liriliri/eruda) to debug inside Delta Chat.

- ✅ Use [Vitest](http://vitest.dev/) for unit testing

- 📝 Code formatting with [Prettier](https://github.com/prettier/prettier)

- 📦 Automatically minify, build and release your `.xdc` file

## Usage
Expand All @@ -21,12 +25,20 @@ After cloning this repo for the first time, install dependecies:
pnpm i
```

### Testing
### Running tests

```
pnpm test
```

### Testing the app in the browser

To test your work while developing:
To test your work in your browser (with hot reloading!) while developing:

```
pnpm dev
pnpm dev-mini
# Alternatively to test in a more advanced WebXDC emulator:
npm run dev
```

**💡 TIP:** To debug inside Delta Chat, uncomment the `script` tag at the end of
Expand Down
30 changes: 15 additions & 15 deletions css/main.css
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
.btn {
background-color: #248bf5;
color: white;
padding: 0.4em;
border: none;
border-radius: 0.2rem;
background-color: #248bf5;
color: white;
padding: 0.4em;
border: none;
border-radius: 0.2rem;
}

input[type="text" i] {
padding: 0.3em;
padding: 0.3em;
}

.nick {
font-weight: bold;
font-weight: bold;
}

#chat-area {
background-color: #fff;
border: 1px solid #e5e5ea;
border-radius: 0.25rem;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.5rem;
background-color: #fff;
border: 1px solid #e5e5ea;
border-radius: 0.25rem;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.5rem;
}

.msg {
border-radius: 1.15rem;
line-height: 1.25;
padding: 0.5rem .875rem;
padding: 0.5rem 0.875rem;
margin: 0.1rem;
position: relative;
word-wrap: break-word;
Expand Down
49 changes: 31 additions & 18 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,28 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<script src="webxdc.js"></script>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<h1>Chat</h1>
<form>
<input id="input" type="text" autocomplete="off" placeholder="Message" autofocus />
<input class="btn" type="submit" onclick="sendMsg(); return false;" value="Send" />
</form>
<p id="chat-area"></p>
<p><em><small id="deviceName"></small></em></p>
<script src="./js/main.js" type="module"></script>
<script src="webxdc.js"></script>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<h1>Chat</h1>
<form>
<input
id="input"
type="text"
autocomplete="off"
placeholder="Message"
autofocus
/>
<input
class="btn"
type="submit"
onclick="sendMsg(); return false;"
value="Send"
/>
</form>
<p id="chat-area"></p>
<p>
<em><small id="deviceName"></small></em>
</p>
<script src="./js/main.js" type="module"></script>

<!-- Uncomment to include developer tools in your webxdc to debug it inside Delta Chat -->
<!--
<!-- Uncomment to include developer tools in your webxdc to debug it inside Delta Chat -->
<!--
<script type="module">
import init from 'eruda'
init.init();
</script>
-->
</body>
</body>
</html>
67 changes: 36 additions & 31 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -1,40 +1,45 @@
function h(tag, attributes, ...children) {
const element = document.createElement(tag);
if (attributes) {
Object.entries(attributes).forEach(entry => {
element.setAttribute(entry[0], entry[1]);
});
}
element.append(...children);
return element;
const element = document.createElement(tag);
if (attributes) {
Object.entries(attributes).forEach((entry) => {
element.setAttribute(entry[0], entry[1]);
});
}
element.append(...children);
return element;
}

window.sendMsg = () => {
let msg = document.getElementById("input").value;
let info = window.webxdc.selfName + ': ' + msg;
document.getElementById("input").value = '';
let msg = document.getElementById("input").value;
let info = window.webxdc.selfName + ": " + msg;
document.getElementById("input").value = "";

// send new updates
window.webxdc.sendUpdate({
payload: {
name: window.webxdc.selfName,
msg,
},
info,
}, info);
}
// send new updates
window.webxdc.sendUpdate(
{
payload: {
name: window.webxdc.selfName,
msg,
},
info,
},
info
);
};

window.onload = () => {
// handle past and future state updates
window.webxdc.setUpdateListener(function (update) {
const chat = document.getElementById('chat-area');
chat.append(
h("p", {class: "msg"},
h("span", {class: "nick"}, update.payload.name, ": "),
update.payload.msg,
)
);
});
// handle past and future state updates
window.webxdc.setUpdateListener(function (update) {
const chat = document.getElementById("chat-area");
chat.append(
h(
"p",
{ class: "msg" },
h("span", { class: "nick" }, update.payload.name, ": "),
update.payload.msg
)
);
});

window.deviceName.innerHTML = 'You are: ' + window.webxdc.selfName;
window.deviceName.innerHTML = "You are: " + window.webxdc.selfName;
};
9 changes: 7 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,19 @@
"packageManager": "pnpm@8.6.1",
"scripts": {
"build": "vite build",
"dev-vite": "vite --port 3000",
"dev": "concurrently \"pnpm dev-vite\" \"webxdc-dev run http://localhost:3000\""
"dev-mini": "vite --port 3000",
"dev": "concurrently \"pnpm dev-mini\" \"webxdc-dev run http://localhost:3000\"",
"format": "prettier --write .",
"test": "prettier --check . && vitest"
},
"devDependencies": {
"concurrently": "^8.1.0",
"eruda": "^3.0.0",
"jsdom": "^22.1.0",
"prettier": "2.8.8",
"vite": "^4.3.2",
"vite-plugin-zip-pack": "^1.0.5",
"vitest": "^0.32.2",
"webxdc-dev": "^0.17.0"
}
}
Loading

0 comments on commit a84e80b

Please sign in to comment.