("");
+
+ return (
+ <>
+
+ {`Caldera | Todo (${items.length} ${items.length === 1 ? "Item" : "Items"
+ })`}
+
+
+
+
+ {items.map(item => (
+ setItems(items.filter(i => i.key !== item.key))}
+ />
+ ))}
+
+
+
+
+ );
+};
+
+
+
+async function createWindow() {
+ // Create the browser window.
+ const mainWindow = new BrowserWindow({
+ width: 800,
+ height: 600,
+ webPreferences: {
+ preload: path.join(__dirname, 'preload.js')
+ }
+ })
+
+
+ await renderCalderaApp();
+ mainWindow.loadURL('http://127.0.0.1:8080')
+ // and load the index.html of the app.
+ // mainWindow.loadFile('index.html')
+
+
+ // Open the DevTools.
+ // mainWindow.webContents.openDevTools()
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(() => {
+ createWindow()
+
+ app.on('activate', function () {
+ // On macOS it's common to re-create a window in the app when the
+ // dock icon is clicked and there are no other windows open.
+ if (BrowserWindow.getAllWindows().length === 0) createWindow()
+ })
+})
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', function () {
+ if (process.platform !== 'darwin') app.quit()
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.
+
+
+
diff --git a/examples/electron-example/src/style.tsx b/examples/electron-example/src/style.tsx
new file mode 100644
index 0000000..d0e1b98
--- /dev/null
+++ b/examples/electron-example/src/style.tsx
@@ -0,0 +1,74 @@
+// Hack to get highlighting
+const css = (input: TemplateStringsArray) => {
+ if (input.length !== 1) {
+ throw new Error("This is not a real CSS tag");
+ }
+ return input[0];
+};
+
+const style = css`
+ html,
+ body {
+ height: 100%;
+ margin: 0;
+ font-family: "Work Sans", sans-serif !important;
+ font-size: 18px;
+ }
+
+ input,
+ button {
+ font-family: "Work Sans", sans-serif;
+ font-size: 18px;
+ }
+
+ body {
+ display: flex;
+ background: rgb(54, 55, 56);
+ justify-content: center;
+ color: white;
+ }
+
+ .main {
+ margin-top: 100px;
+ width: fit-content;
+ background: rgb(64, 65, 66);
+ padding: 10px;
+ box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.7);
+ }
+
+ .TodoListValue {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .TodoListItem {
+ justify-content: space-between;
+ display: flex;
+ padding: 5px 0px 5px 5px;
+ }
+
+ .newItemInput {
+ border: none;
+ border-bottom: 2px solid black;
+ background: transparent;
+ color: white;
+ width: 350px;
+ outline: 0;
+ }
+
+ .newItemButton,
+ .onDoneButton {
+ background-color: transparent;
+ background-repeat: no-repeat;
+ border: none;
+ cursor: pointer;
+ overflow: hidden;
+ outline: none;
+ filter: contrast(0);
+ padding: 5px 10px;
+ }
+`;
+
+export default style;
diff --git a/examples/electron-example/tsconfig.json b/examples/electron-example/tsconfig.json
new file mode 100644
index 0000000..c18637e
--- /dev/null
+++ b/examples/electron-example/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "importHelpers": true,
+ "target": "es2021",
+ "module": "commonjs",
+ "lib": [
+ "es2021",
+ "DOM"
+ ],
+ "strict": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "jsx": "react",
+ "allowJs": true,
+ "outDir": "build",
+ "plugins": [
+ ]
+ },
+ "include": [
+ "src"
+ ]
+}
\ No newline at end of file
From 69abf1e4530a65d09ade061db70a070ce85b9d5b Mon Sep 17 00:00:00 2001
From: Cong Zhang <13283869+congzhangzh@users.noreply.github.com>
Date: Tue, 15 Feb 2022 00:41:38 +0800
Subject: [PATCH 30/32] [samples] add todo
---
README.md | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/README.md b/README.md
index 892385c..81d1ba9 100644
--- a/README.md
+++ b/README.md
@@ -127,3 +127,10 @@ npm publish
git push
git push --tags
```
+
+# Sample apps
+
+1. [basic-example](./basic-example)
+2. [electron-example](./electron-example)
+3. [zx-example](./zx-example)(wip)
+4. [puppeteer-example](./puppeteer-example)(wip)
From 89aff90ceaff31495d0601233fa603529b4ae752 Mon Sep 17 00:00:00 2001
From: Cong Zhang <13283869+congzhangzh@users.noreply.github.com>
Date: Tue, 15 Feb 2022 00:42:36 +0800
Subject: [PATCH 31/32] minor fix
---
README.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/README.md b/README.md
index 81d1ba9..426ec64 100644
--- a/README.md
+++ b/README.md
@@ -130,7 +130,7 @@ git push --tags
# Sample apps
-1. [basic-example](./basic-example)
-2. [electron-example](./electron-example)
-3. [zx-example](./zx-example)(wip)
-4. [puppeteer-example](./puppeteer-example)(wip)
+1. [basic-example](./examples/basic-example)
+2. [electron-example](./examples/electron-example)
+3. [zx-example](./examples/zx-example)(wip)
+4. [puppeteer-example](./examples/puppeteer-example)(wip)
From deab9b438d3c6f33d7b13f2a80e62b07fa13e3ab Mon Sep 17 00:00:00 2001
From: Cong Zhang <13283869+congzhangzh@users.noreply.github.com>
Date: Tue, 15 Feb 2022 01:46:44 +0800
Subject: [PATCH 32/32] Update README.md
---
README.md | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/README.md b/README.md
index 426ec64..a7ea1d1 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,11 @@ This allows developers to rapidly build interactive and multiplayer applications
Because it's built on top of the React reconciler, it's compatible with (currently, a reasonably useful subset of) the existing React API. See [what's currently included](#what-works) and [what's to come](#whats-being-worked-on) for updates.
+
+## Screenshot
+
+https://user-images.githubusercontent.com/13283869/153917842-a286add1-a141-4f39-81c3-76aa22ba4d34.mp4
+
## Installation
Run `npm install caldera` to install Caldera.