Add Example App (#12)

* Add build step

* update README

* Use rsbuild for example app

* Export types

* Add basic element

* Add todo app

* Update CSS

* Clear out text

* Update styling

* remove unused build file

* Remove README stub

.gitignore

@@ -1,3 +1,4 @@
 node_modules/*
 build/*
-coverage/*
+coverage/*
+packages/pipe/dist/*

README.md

@@ -1,3 +1,3 @@
 # pipe
 
-Another JavaScript UI Library
+A Reactive DOM UI Library built on RxJS and TypeScript.

apps/todo-app/.gitignore

@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

apps/todo-app/.prettierignore

@@ -0,0 +1,4 @@
+# Lock files
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

apps/todo-app/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

apps/todo-app/README.md

@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```

apps/todo-app/eslint.config.mjs

@@ -0,0 +1,10 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default [
+  { languageOptions: { globals: globals.browser } },
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  { ignores: ['dist/'] },
+];

apps/todo-app/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "todo-app",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild dev --open",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "preview": "rsbuild preview"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.10.0",
+    "@rsbuild/core": "^1.0.1",
+    "eslint": "^9.10.0",
+    "globals": "^15.9.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.2",
+    "typescript-eslint": "^8.5.0"
+  },
+  "dependencies": {
+    "@pipe/pipe": "^0.0.1"
+  }
+}

apps/todo-app/rsbuild.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({});

apps/todo-app/src/TodoApp.ts

@@ -0,0 +1,96 @@
+import {
+  BehaviorSubject,
+  Component,
+  createElement,
+  map,
+  merge,
+  Observable,
+  of,
+  PipeNode,
+  scan,
+  Subject,
+} from '@pipe/pipe';
+
+export const TodoApp: Component<Record<string, Observable<void>>> = () => {
+  const clickAdd$ = new Subject<string>();
+  const clickRemove$ = new Subject<string>();
+
+  const addChild$: Observable<[string, PipeNode]> = clickAdd$.pipe(
+    scan(({ count }, todoText) => ({ count: count + 1, todoText }), {
+      count: 0,
+      todoText: '' as string,
+    }),
+    map(({ count, todoText }) => {
+      const key = String(count);
+      return [
+        key,
+        createElement(TodoItem, {
+          onRemove: of(() => {
+            clickRemove$.next(key);
+          }),
+          text: of(todoText),
+        }),
+      ];
+    }),
+  );
+
+  const removeChild$: Observable<[string, null]> = clickRemove$.pipe(
+    map((key) => [key, null]),
+  );
+
+  return createElement(
+    'div',
+    {
+      id: of('content'),
+    },
+    [
+      createElement('h2', { textContent: of('Todo List') }),
+      createElement('div', {}, merge(addChild$, removeChild$)),
+      createElement(
+        'form',
+        {
+          id: of('add-todo-form'),
+          onsubmit: of((e: Event) => {
+            e.preventDefault();
+            const formElement = e.target as HTMLFormElement;
+            const formData = new FormData(formElement);
+            const todoText = formData.get('todo');
+            clickAdd$.next(todoText as string);
+            const inputElement =
+              formElement.firstElementChild as HTMLInputElement;
+            inputElement.value = '';
+          }),
+        },
+        [
+          createElement('input', {
+            type: of('text'),
+            name: of('todo'),
+            placeholder: of('Add Todo'),
+          }),
+        ],
+      ),
+    ],
+  );
+};
+
+export const TodoItem: Component<{
+  onRemove: Observable<() => void>;
+  text: Observable<string>;
+}> = ({ onRemove, text }) => {
+  return createElement(
+    'div',
+    {
+      id: of('todo-item'),
+    },
+    [
+      createElement('div', { id: of('button-container') }, [
+        createElement('button', {
+          id: of('todo-button'),
+          textContent: of(''),
+          onclick: onRemove,
+        }),
+      ]),
+      createElement('p', { textContent: text }),
+    ],
+  );
+};

apps/todo-app/src/index.css

@@ -0,0 +1,44 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-color: rgb(64, 137, 226);
+}
+
+#content {
+  padding: 2em;
+}
+
+#todo-item {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+}
+
+#button-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#todo-button {
+  border: 2px solid white;
+  border-radius: 50%;
+  width: 2em;
+  height: 2em
+}
+
+#todo-button:hover {
+  background-color: rgb(64, 137, 226);
+}
+
+#add-todo-form {
+  padding-top: 1em;
+}
+
+input[type=text] {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  box-sizing: border-box;
+}

apps/todo-app/src/index.ts

@@ -0,0 +1,10 @@
+import { createElement, createRoot } from '@pipe/pipe';
+
+import './index.css';
+import { TodoApp } from './TodoApp';
+
+const rootElement = document.querySelector<HTMLDivElement>('#root')!;
+
+const root = createRoot(rootElement);
+
+root.render(createElement(TodoApp, {}));

apps/todo-app/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src"]
+}