create-harper 0.0.1 → 0.0.2

package/template-react/public/vite.svg

@@ -0,0 +1,42 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+  role="img"
+  class="iconify iconify--logos"
+  width="31.88"
+  height="32"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 256 257"
+>
+  <defs>
+    <linearGradient
+      id="IconifyId1813088fe1fbc01fb466"
+      x1="-.828%"
+      x2="57.636%"
+      y1="7.652%"
+      y2="78.411%"
+    >
+      <stop offset="0%" stop-color="#41D1FF"></stop>
+      <stop offset="100%" stop-color="#BD34FE"></stop>
+    </linearGradient>
+    <linearGradient
+      id="IconifyId1813088fe1fbc01fb467"
+      x1="43.376%"
+      x2="50.316%"
+      y1="2.242%"
+      y2="89.03%"
+    >
+      <stop offset="0%" stop-color="#FFEA83"></stop>
+      <stop offset="8.333%" stop-color="#FFDD35"></stop>
+      <stop offset="100%" stop-color="#FFA800"></stop>
+    </linearGradient>
+  </defs>
+  <path
+    fill="url(#IconifyId1813088fe1fbc01fb466)"
+    d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"
+  ></path>
+  <path
+    fill="url(#IconifyId1813088fe1fbc01fb467)"
+    d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"
+  ></path>
+</svg>

package/template-react/resources.js

@@ -0,0 +1,27 @@
+import { Resource } from 'harperdb';
+
+/** Here we can define any JavaScript-based resources and extensions to tables
+import {tables} from 'harperdb';
+
+export class MyCustomResource extends tables.TableName {
+	// we can define our own custom POST handler
+	post(content) {
+		// do something with the incoming content;
+		return super.post(content);
+	}
+	// or custom GET handler
+	get() {
+		// we can modify this resource before returning
+		return super.get();
+	}
+}
+ */
+// we can also define a custom resource without a specific table
+export class Greeting extends Resource {
+	// a "Hello, world!" handler
+	static loadAsInstance = false; // use the updated/newer Resource API
+
+	get() {
+		return { greeting: 'Hello, world!' };
+	}
+}

package/template-react/schema.graphql

@@ -0,0 +1,5 @@
+type ToDoList @table @export {
+	id: ID @primaryKey
+	status: String @index
+	description: String
+}

package/template-react/src/App.jsx

@@ -0,0 +1,34 @@
+import reactLogo from '/react.svg';
+import typescriptLogo from '/typescript.svg';
+import viteLogo from '/vite.svg';
+import { useCallback, useState } from 'react';
+
+export function App() {
+	const [counter, setCounter] = useState(0);
+	const countUp = useCallback(() => {
+		setCounter(counter => counter + 1);
+	}, []);
+
+	return (
+		<>
+			<div>
+				<a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
+					<img src={viteLogo} className="logo" alt="Vite logo" />
+				</a>
+				<a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">
+					<img src={typescriptLogo} className="logo vanilla" alt="TypeScript logo" />
+				</a>
+				<a href="https://react.dev/" target="_blank" rel="noopener noreferrer">
+					<img src={reactLogo} className="logo react" alt="React logo" />
+				</a>
+				<h1>Vite + TypeScript + React</h1>
+				<p>Wow, look at this!</p>
+				<div className="card">
+					<button id="counter" type="button" onClick={countUp}>
+						count is {counter}
+					</button>
+				</div>
+			</div>
+		</>
+	);
+}

package/template-react/src/main.jsx

@@ -0,0 +1,13 @@
+import { App } from '@/App.jsx';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import './style.css';
+
+createRoot(
+	document.getElementById('app'),
+).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);

package/template-react/src/style.css

@@ -0,0 +1,96 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/template-react/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+	readonly VITE_EXAMPLE_ENV_VAR: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

package/template-react/vite.config.js

@@ -0,0 +1,22 @@
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [
+		react(),
+	],
+	resolve: {
+		alias: {
+			'@': path.resolve(__dirname, './src'),
+		},
+	},
+	build: {
+		outDir: 'web',
+		emptyOutDir: true,
+		rolldownOptions: {
+			external: ['**/*.test.*', '**/*.spec.*'],
+		},
+	},
+});

package/template-react-ts/README.md

@@ -0,0 +1,45 @@
+# <<projectName>>
+
+## Installation
+
+To get started, make sure you have [installed Harper](https://docs.harperdb.io/docs/deployments/install-harper), which can be done quickly:
+
+```sh
+npm install -g harperdb
+```
+
+## Development
+
+Then you can start your app:
+
+```sh
+npm run dev
+```
+
+Navigate to [http://localhost:9926](http://localhost:9926) in a browser and view the functional web application.
+
+For more information about getting started with HarperDB and building applications, see our [getting started guide](https://docs.harperdb.io/docs).
+
+For more information on Harper Components, see the [Components documentation](https://docs.harperdb.io/docs/reference/components).
+
+Take a look at the [default configuration](./config.yaml), which specifies how files are handled in your application.
+
+The [schema.graphql](./schema.graphql) is the table schema definition. This is the main starting point for defining your database schema, specifying which tables you want and what attributes/fields they should have.
+
+The [resources.js](resources.ts) provides a template for defining JavaScript resource classes, for customized application logic in your endpoints.
+
+## Deployment
+
+When you are ready, head to [https://fabric.harper.fast/](https://fabric.harper.fast/), log in to your account, and create a cluster.
+
+Set up your .env file with your secure cluster credentials. Don't commit this file to source control!
+
+```sh
+npm run login
+```
+
+Then you can deploy your app to your cluster:
+
+```sh
+npm run deploy
+```

package/template-react-ts/_github/workflow/deploy.yaml

@@ -0,0 +1,40 @@
+name: Deploy to Harper Fabric
+on:
+  workflow_dispatch:
+#  push:
+#    branches:
+#      - main
+
+concurrency:
+  group: main
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        with:
+          fetch-depth: 0
+          fetch-tags: true
+      - name: Set up Node.js
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        with:
+          cache: 'npm'
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run unit tests
+        run: npm run test
+      - name: Run lint
+        run: npm run lint
+      - name: Build
+        run: npm run build
+      - name: Deploy
+        run: |
+          mkdir deploy
+          mv web deploy/
+          cp -R deploy-template/* deploy/
+          cd deploy
+          CLI_TARGET_USERNAME=${{ secrets.CLI_TARGET_USERNAME }} CLI_TARGET_PASSWORD='${{ secrets.CLI_TARGET_PASSWORD }}' harperdb deploy_component project='${{ secrets.CLI_DEPLOY_TARGET_NAME }}' target='${{ secrets.CLI_DEPLOY_TARGET_URL }}' restart=false replicated=true

package/template-react-ts/config.yaml

@@ -0,0 +1,23 @@
+# yaml-language-server: $schema=./node_modules/harperdb/config-app.schema.json
+
+# This is the configuration file for the application.
+# It specifies built-in Harper components that will load the specified feature and files.
+# For more information, see https://docs.harperdb.io/docs/reference/components/built-in-extensions
+
+# Load Environment Variables from the specified file
+# loadEnv:
+#   files: '.env'
+
+# This provides the HTTP REST interface for all exported resources
+rest: true
+
+# These reads GraphQL schemas to define the schema of database/tables/attributes.
+graphqlSchema:
+  files: 'schema.graphql'
+
+# Loads JavaScript modules such that their exports are exported as resources
+jsResource:
+  files: 'resources.ts'
+
+'@harperfast/vite-plugin':
+  package: '@harperfast/vite-plugin'

package/template-react-ts/deploy-template/config.yaml

@@ -0,0 +1,2 @@
+fastifyRoutes:
+  files: fastify/*.js

package/template-react-ts/deploy-template/fastify/static.js

@@ -0,0 +1,14 @@
+import fastifyStatic from '@fastify/static';
+import { join } from 'path';
+
+export default async (fastify) => {
+	fastify.register(fastifyStatic, {
+		root: join(import.meta.dirname, '../web'),
+		maxAge: '30d',
+		immutable: true,
+	});
+
+	fastify.get('/', function(req, reply) {
+		reply.sendFile('index.html', { maxAge: '1m', immutable: false });
+	});
+};

package/template-react-ts/deploy-template/package.json

@@ -0,0 +1,5 @@
+{
+	"dependencies": {
+		"@fastify/static": "^7.0.4"
+	}
+}

package/template-react-ts/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><<projectName>></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template-react-ts/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "<<packageName>>",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "harper run .",
+		"test": "echo 'No tests implemented yet'",
+		"lint": "echo 'No lint implemented yet'",
+		"build": "tsc -b && vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@harperfast/vite-plugin": "^0.0.1",
+		"@types/node": "^24.10.1",
+		"@types/react": "^19.2.3",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^5.1.2",
+		"harperdb": "^4.7.15",
+		"react": "^19.2.3",
+		"react-dom": "^19.2.3",
+		"typescript": "~5.9.3",
+		"vite": "npm:rolldown-vite@7.2.5"
+	},
+	"overrides": {
+		"vite": "npm:rolldown-vite@7.2.5"
+	}
+}

package/template-react-ts/public/react.svg

@@ -0,0 +1,14 @@
+<svg
+  width="100%"
+  height="100%"
+  viewBox="-10.5 -9.45 21 18.9"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle cx="0" cy="0" r="2" fill="#58c4dc"></circle>
+  <g stroke="#58c4dc" stroke-width="1" fill="none">
+    <ellipse rx="10" ry="4.5"></ellipse>
+    <ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse>
+    <ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse>
+  </g>
+</svg>

package/template-react-ts/public/typescript.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+  role="img"
+  class="iconify iconify--logos"
+  width="32"
+  height="32"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 256 256"
+>
+  <path fill="#007ACC" d="M0 128v128h256V0H0z"></path>
+  <path
+    fill="#FFF"
+    d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"
+  ></path>
+</svg>

package/template-react-ts/public/vite.svg

@@ -0,0 +1,42 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+  role="img"
+  class="iconify iconify--logos"
+  width="31.88"
+  height="32"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 256 257"
+>
+  <defs>
+    <linearGradient
+      id="IconifyId1813088fe1fbc01fb466"
+      x1="-.828%"
+      x2="57.636%"
+      y1="7.652%"
+      y2="78.411%"
+    >
+      <stop offset="0%" stop-color="#41D1FF"></stop>
+      <stop offset="100%" stop-color="#BD34FE"></stop>
+    </linearGradient>
+    <linearGradient
+      id="IconifyId1813088fe1fbc01fb467"
+      x1="43.376%"
+      x2="50.316%"
+      y1="2.242%"
+      y2="89.03%"
+    >
+      <stop offset="0%" stop-color="#FFEA83"></stop>
+      <stop offset="8.333%" stop-color="#FFDD35"></stop>
+      <stop offset="100%" stop-color="#FFA800"></stop>
+    </linearGradient>
+  </defs>
+  <path
+    fill="url(#IconifyId1813088fe1fbc01fb466)"
+    d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"
+  ></path>
+  <path
+    fill="url(#IconifyId1813088fe1fbc01fb467)"
+    d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"
+  ></path>
+</svg>

package/template-react-ts/resources.ts

@@ -0,0 +1,52 @@
+import { type RecordObject, type RequestTargetOrId, Resource } from 'harperdb';
+
+/** Here we can define any JavaScript-based resources and extensions to tables
+import { tables, type RequestTarget } from 'harperdb';
+
+interface TableNameRecord {
+	id: string;
+	name: string;
+	tag: string;
+}
+
+export class TableName extends tables.TableName<TableNameRecord> {
+	// we can define our own custom POST handler
+	async post(target: RequestTargetOrId, newRecord: Omit<TableNameRecord, 'id'>) {
+		// do something with the incoming content;
+		return super.post(target, newRecord);
+	}
+	// or custom GET handler
+	async get(target: RequestTarget): Promise<TableNameRecord> {
+		// we can modify this resource before returning
+		return super.get(target);
+	}
+}
+*/
+
+interface GreetingRecord {
+	greeting: string;
+}
+
+export class Greeting extends Resource<GreetingRecord> {
+	static loadAsInstance = false;
+
+	async post(target: RequestTargetOrId, newRecord: Partial<GreetingRecord & RecordObject>): Promise<GreetingRecord> {
+		return { greeting: 'Greetings, post!' };
+	}
+
+	async get(target?: RequestTargetOrId): Promise<GreetingRecord> {
+		return { greeting: 'Greetings, get!' };
+	}
+
+	async put(target: RequestTargetOrId, record: GreetingRecord & RecordObject): Promise<GreetingRecord> {
+		return { greeting: 'Greetings, put!' };
+	}
+
+	async patch(target: RequestTargetOrId, record: Partial<GreetingRecord & RecordObject>): Promise<GreetingRecord> {
+		return { greeting: 'Greetings, patch!' };
+	}
+
+	async delete(target: RequestTargetOrId): Promise<boolean> {
+		return true;
+	}
+}

package/template-react-ts/schema.graphql

@@ -0,0 +1,5 @@
+type ToDoList @table @export {
+	id: ID @primaryKey
+	status: String @index
+	description: String
+}

package/template-react-ts/src/App.tsx

@@ -0,0 +1,34 @@
+import reactLogo from '/react.svg';
+import typescriptLogo from '/typescript.svg';
+import viteLogo from '/vite.svg';
+import { useCallback, useState } from 'react';
+
+export function App() {
+	const [counter, setCounter] = useState(0);
+	const countUp = useCallback(() => {
+		setCounter(counter => counter + 1);
+	}, []);
+
+	return (
+		<>
+			<div>
+				<a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
+					<img src={viteLogo} className="logo" alt="Vite logo" />
+				</a>
+				<a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">
+					<img src={typescriptLogo} className="logo vanilla" alt="TypeScript logo" />
+				</a>
+				<a href="https://react.dev/" target="_blank" rel="noopener noreferrer">
+					<img src={reactLogo} className="logo react" alt="React logo" />
+				</a>
+				<h1>Vite + TypeScript + React</h1>
+				<p>Wow, look at this!</p>
+				<div className="card">
+					<button id="counter" type="button" onClick={countUp}>
+						count is {counter}
+					</button>
+				</div>
+			</div>
+		</>
+	);
+}

package/template-react-ts/src/main.tsx

@@ -0,0 +1,13 @@
+import { App } from '@/App.tsx';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import './style.css';
+
+createRoot(
+	document.getElementById('app')!,
+).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);