@harperfast/template-vanilla-ts-studio 0.7.0

package/.aiignore

@@ -0,0 +1 @@
+.env

package/.gitignore

@@ -0,0 +1,147 @@
+.DS_Store
+
+#
+# https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore
+#
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+.output
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vite/

package/README.md

@@ -0,0 +1,50 @@
+# your-project-name-here
+
+Your new app is now deployed and running on Harper Fabric!
+
+Here's what you should do next:
+
+### Define Your Schema
+
+Tap [+ New Table](./schemas/examplePeople.graphql?ShowNewTableModal=true) when viewing a schema file, and you'll be guided through the available options.
+
+The [schemas/examplePeople.graphql](./schemas/examplePeople.graphql) is an example table schema definition. This is the main starting point for defining your [database schema](./databases), specifying which tables you want and what attributes/fields they should have.
+
+Open your [schemas/examplePeople.graphql](./schemas/examplePeople.graphql) to take a look at an example schema. You can add as many table definitions to a single schema file as you want. You can also create one file per schema.
+
+These schemas are the heart of a great Harper app. This is the main starting point for defining your [database schema](./databases), specifying which tables you want and what attributes/fields they should have. REST endpoints will get stood up for any table that you `@export`.
+
+### Add Custom Endpoints
+
+The [resources/greeting.ts](./resources/greeting.ts) provides a template for defining TypeScript resource classes, for customized application logic in your endpoints.
+
+### View Your Website
+
+Pop open [http://localhost:9926](http://localhost:9926) to view [web/index.html](./web/index.html) in your browser.
+
+### Use Your API
+
+Head to the [APIs](./apis) tab to explore your endpoints and exercise them. You can click the "Authenticate" button to
+see what different users will be able to access through your API.
+
+Test your application works by querying the `/Greeting` endpoint:
+
+```sh
+curl http://localhost:9926/Greeting
+```
+
+You should see the following:
+
+```json
+{ "greeting": "Hello, world!" }
+```
+
+### Configure Your App
+
+Take a look at the [default configuration](./config.yaml), which specifies how files are handled in your application.
+
+## Keep Going!
+
+For more information about getting started with Harper 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).

package/config.yaml

@@ -0,0 +1,24 @@
+# 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: 'schemas/*.graphql'
+
+# Loads JavaScript modules such that their exports are exported as resources
+jsResource:
+  files: 'resources/*.ts'
+
+# Serve the static files from the web directory as a web application
+static:
+  files: 'web/*'

package/graphql.config.yml

@@ -0,0 +1,3 @@
+schema: schema.graphql
+include: node_modules/harperdb/schema.graphql
+documents: '**/*.graphql'

package/package.json

@@ -0,0 +1,9 @@
+{
+	"name": "@harperfast/template-vanilla-ts-studio",
+	"version": "0.7.0",
+	"type": "module",
+	"scripts": {},
+	"devDependencies": {
+		"harperdb": "^4.7.15"
+	}
+}

package/resources/examplePeople.ts

@@ -0,0 +1,20 @@
+import { type RequestTargetOrId, tables } from 'harperdb';
+
+export interface ExamplePerson {
+	id: string;
+	name: string;
+	tag: string;
+}
+
+export class ExamplePeople extends tables.ExamplePeople<ExamplePerson> {
+	// we can define our own custom POST handler
+	async post(target: RequestTargetOrId, newRecord: Omit<ExamplePerson, 'id'>) {
+		// do something with the incoming content;
+		return super.post(target, newRecord);
+	}
+	// or custom GET handler
+	async get(target: RequestTargetOrId): Promise<ExamplePerson> {
+		// we can modify this resource before returning
+		return super.get(target);
+	}
+}

package/resources/exampleSocket.ts

@@ -0,0 +1,41 @@
+import { type IterableEventQueue, RequestTarget, Resource, tables } from 'harperdb';
+
+interface ExampleSocketRecord {
+	id: string;
+	type?: 'get' | 'put';
+	name: string;
+	tag: string;
+}
+
+export class ExampleSocket extends Resource<ExampleSocketRecord> {
+	static loadAsInstance = false;
+
+	// This customizes handling the socket connections; tables can have this method too!
+	async *connect(
+		target: RequestTarget,
+		incomingMessages: IterableEventQueue<ExampleSocketRecord>,
+	): AsyncIterable<ExampleSocketRecord> {
+		const subscription = await tables.ExamplePeople.subscribe(target);
+		if (!incomingMessages) {
+			// Server sent events, no incoming messages!
+			// Subscribe to changes to the table.
+			return subscription;
+		}
+		for await (let message of incomingMessages) {
+			const { type, id, name, tag } = message;
+			switch (type) {
+				case 'get':
+					const loaded = await tables.ExamplePeople.get(id);
+					yield {
+						type: 'get',
+						id,
+						...(loaded ? loaded : {}),
+					};
+					break;
+				case 'put':
+					await tables.ExamplePeople.put(id, { name, tag });
+					break;
+			}
+		}
+	}
+}

package/resources/greeting.ts

@@ -0,0 +1,29 @@
+import { type RecordObject, type RequestTargetOrId, Resource } from 'harperdb';
+
+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/schemas/examplePeople.graphql

@@ -0,0 +1,7 @@
+## Here we can define any tables in our database. This example shows how we define a type as a table using
+## the type name as the table name and specifying it is an "export" available in the REST and other external protocols.
+type ExamplePeople @table @export {
+	id: ID @primaryKey # Here we define primary key (must be one)
+	name: String # we can define any other attributes here
+	tag: String @indexed # we can specify any attributes that should be indexed
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"allowImportingTsExtensions": true,
+		"lib": [
+			"es2015",
+			"dom",
+			"es2018.asynciterable"
+		]
+	}
+}

package/web/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>your-project-name-here</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <h1>your-project-name-here</h1>
+      <p>
+        This is an example of serving static assets using the built-in
+        <a
+          href="https://docs.harperdb.io/docs/reference/components/built-in-extensions#static"
+        >static component</a>. <br />
+        You can use this component to serve web applications!
+      </p>
+      <div>
+        <p class="count" id="count">0</p>
+        <button class="decrement" id="decrement">-</button>
+        <button class="increment" id="increment">+</button>
+      </div>
+    </main>
+
+    <script src="index.js"></script>
+  </body>
+</html>

package/web/index.js

@@ -0,0 +1,18 @@
+let count = 0;
+const counterDisplay = document.getElementById('count');
+const decrementButton = document.getElementById('decrement');
+const incrementButton = document.getElementById('increment');
+
+function updateDisplay() {
+	counterDisplay.textContent = count;
+}
+
+decrementButton.addEventListener('click', () => {
+	count--;
+	updateDisplay();
+});
+
+incrementButton.addEventListener('click', () => {
+	count++;
+	updateDisplay();
+});

package/web/styles.css

@@ -0,0 +1,57 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #f5f5f5;
+}
+
+main {
+  text-align: center;
+  background-color: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.count {
+  font-size: 4rem;
+  margin: 1rem 0;
+  color: #333;
+}
+
+.counter-controls {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+button {
+  font-size: 1.5rem;
+  width: 3rem;
+  height: 3rem;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.decrement {
+  background-color: #ff6b6b;
+  color: white;
+}
+
+.decrement:hover {
+  background-color: #ff5252;
+}
+
+.increment {
+  background-color: #4ecdc4;
+  color: white;
+}
+
+.increment:hover {
+  background-color: #39b2a9;
+}