create-harper 1.7.4 → 1.8.0

package/template-react-ssr/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-ssr/resources/README.md

@@ -0,0 +1,11 @@
+# Resources
+
+The [schemas you define in .GraphQL files](../.agents/skills/harper-best-practices/rules/adding-tables-with-schemas.md) will [automatically stand-up REST APIs](../.agents/skills/harper-best-practices/rules/automatic-apis.md).
+
+But you can [extend your tables with custom logic](../.agents/skills/harper-best-practices/rules/extending-tables.md) and [create your own resources](../.agents/skills/harper-best-practices/rules/custom-resources.md) in this directory.
+
+## Want to read more?
+
+Check out the rest of the "skills" documentation!
+
+[Harper Best Practices Skill](../.agents/skills/harper-best-practices/SKILL.md)

package/template-react-ssr/schemas/README.md

@@ -0,0 +1,11 @@
+# Schemas
+
+Your schemas are defined in `.graphql` files within this `schemas` directory. These files contain the structure and types for your database tables, allowing Harper to automatically generate REST APIs for CRUD operations.
+
+Take a look at the [Adding Tables with Schemas](../.agents/skills/harper-best-practices/rules/adding-tables-with-schemas.md) to learn more!
+
+## Want to read more?
+
+Check out the rest of the "skills" documentation!
+
+[Harper Best Practices Skill](../.agents/skills/harper-best-practices/SKILL.md)

package/template-react-ssr/schemas/jsdocTypes.js

@@ -0,0 +1,5 @@
+/**
+ Generated from your schema files
+ Manual changes will be lost!
+ > harper dev .
+ */

package/template-react-ssr/src/App.jsx

@@ -0,0 +1,31 @@
+import reactLogo from '/react.svg';
+import viteLogo from '/vite.svg';
+import { useCallback, useState } from 'react';
+import { increment } from './counter.js';
+
+export function App() {
+	const [counter, setCounter] = useState(0);
+	const countUp = useCallback(() => {
+		setCounter(counter => increment(counter));
+	}, []);
+
+	return (
+		<>
+			<div>
+				<a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
+					<img src={viteLogo} className="logo" alt="Vite logo" />
+				</a>
+				<a href="https://react.dev/" target="_blank" rel="noopener noreferrer">
+					<img src={reactLogo} className="logo react" alt="React logo" />
+				</a>
+				<h1>Vite + 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-ssr/src/counter.js

@@ -0,0 +1,7 @@
+export function increment(value) {
+	return value + 1;
+}
+
+export function decrement(value) {
+	return value - 1;
+}

package/template-react-ssr/src/entry-client.jsx

@@ -0,0 +1,13 @@
+import { App } from '@/App.jsx';
+import { StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+import './style.css';
+
+// Hydrate the server-rendered markup. (A client-only app would use `createRoot(...).render(...)`.)
+hydrateRoot(
+	document.getElementById('app'),
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);

package/template-react-ssr/src/entry-server.jsx

@@ -0,0 +1,18 @@
+import { App } from '@/App.jsx';
+import { StrictMode } from 'react';
+import { renderToString } from 'react-dom/server';
+
+/**
+ * Server render entry. The Vite Harper plugin calls this for HTML navigations and injects the
+ * returned markup into the `<!--ssr-outlet-->` placeholder in index.html.
+ *
+ * @param {string} _url The request URL — use it to drive routing/data loading per request.
+ * @returns {string}
+ */
+export function render(_url) {
+	return renderToString(
+		<StrictMode>
+			<App />
+		</StrictMode>,
+	);
+}

package/template-react-ssr/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-ssr/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-ssr/test/counter.test.js

@@ -0,0 +1,15 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { decrement, increment } from '../src/counter.js';
+
+test('increment function', () => {
+	assert.strictEqual(increment(0), 1);
+	assert.strictEqual(increment(1), 2);
+	assert.strictEqual(increment(-1), 0);
+});
+
+test('decrement function', () => {
+	assert.strictEqual(decrement(0), -1);
+	assert.strictEqual(decrement(1), 0);
+	assert.strictEqual(decrement(-1), -2);
+});

package/template-react-ssr/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(import.meta.dirname, './src'),
+		},
+	},
+	build: {
+		outDir: 'dist',
+		emptyOutDir: true,
+		rolldownOptions: {
+			external: ['**/*.test.*', '**/*.spec.*'],
+		},
+	},
+});

package/template-react-ts/README.md

@@ -89,7 +89,7 @@ These schemas are the heart of a great Harper app, specifying which tables you w
 
 ### View Your Website
 
-Pop open [http://localhost:9926](http://localhost:9926) to view [web/index.html](./web/index.html) in your browser.
+Pop open [http://localhost:9926](http://localhost:9926) to view [index.html](./index.html) in your browser.
 
 ### Use Your API
 
@@ -113,7 +113,11 @@ Take a look at the [default configuration](./config.yaml), which specifies how f
 
 When you are ready, head to [https://fabric.harper.fast/](https://fabric.harper.fast/), log in to your account, and create a cluster.
 
-Come back here and configure your [.env](./.env) file with your secure cluster credentials. Don't commit this file to source control!
+Come back and log in your local CLI to your cluster:
+
+```sh
+harper login
+```
 
 Then you can deploy your app to your cluster:
 

package/template-react-ts/_gitignore

@@ -1,6 +1,5 @@
 .DS_Store
-web
-deploy
+dist
 
 #
 # https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore

package/template-react-ts/config.yaml

@@ -25,6 +25,19 @@ jsResource:
   globalTypes: 'schemas/globalTypes.d.ts'
   schemaTypes: 'schemas/types.ts'
 
-# Bootstraps Vite to build your frontend to HTML/JS/CSS
-'@harperfast/vite-plugin':
-  package: '@harperfast/vite-plugin'
+# Bootstraps Vite to build your frontend to HTML/JS/CSS.
+# In production it builds your app (and recompiles when files in `files` change); the `static`
+# component below serves the built output. Listed before `static` so its dev server wins in `harper dev`.
+'@harperfast/vite':
+  package: '@harperfast/vite'
+  files: 'src/**/*'
+  output: 'dist'
+
+# Serves the built frontend from Vite's output directory. `notFound` + `fallthrough: false` makes
+# client-side routing work (unmatched routes return index.html); the REST routes above take precedence.
+static:
+  files: 'dist/**'
+  notFound:
+    file: 'index.html'
+    statusCode: 200
+  fallthrough: false

package/template-react-ts/package.json

@@ -13,22 +13,24 @@
 		"test": "node --test test/*.test.ts",
 		"test:watch": "node --watch --test test/*.test.ts",
 		"build": "vite build",
-		"deploy": "rm -Rf deploy && npm run build && mkdir deploy && mv web deploy/ && cp -R deploy-template/* deploy/ && cp -R schemas resources deploy/ && (cd deploy && harper deploy_component . project=web restart=true replicated=true) && rm -Rf deploy"
+		"deploy": "harper deploy_component . restart=true replicated=true"
+	},
+	"dependencies": {
+		"@harperfast/schema-codegen": "^1.0.10",
+		"@harperfast/vite": "^1.1.0",
+		"@vitejs/plugin-react": "^6.0.1",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
+		"vite": "^8.0.0"
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
-		"@harperfast/schema-codegen": "^1.0.10",
-		"@harperfast/vite-plugin": "^0.2.1",
 		"@types/node": "^24.10.1",
 		"@types/react": "^19.2.10",
 		"@types/react-dom": "^19.2.3",
-		"@vitejs/plugin-react": "^6.0.1",
 		"eslint": "^10.0.2",
 		"globals": "^17.4.0",
 		"prettier": "^3.8.1",
-		"react": "^19.2.4",
-		"react-dom": "^19.2.4",
-		"typescript": "~6.0.0",
-		"vite": "^8.0.0"
+		"typescript": "~6.0.0"
 	}
 }

package/template-react-ts/vite.config.ts

@@ -9,11 +9,11 @@ export default defineConfig({
 	],
 	resolve: {
 		alias: {
-			'@': path.resolve(__dirname, './src'),
+			'@': path.resolve(import.meta.dirname, './src'),
 		},
 	},
 	build: {
-		outDir: 'web',
+		outDir: 'dist',
 		emptyOutDir: true,
 		rolldownOptions: {
 			external: ['**/*.test.*', '**/*.spec.*'],

package/template-react-ts-ssr/README.md

@@ -0,0 +1,132 @@
+# your-project-name-here
+
+Your new app is now ready for development!
+
+Here's what you should do next:
+
+## Installation
+
+To get started, make sure you have [installed Harper](https://docs.harperdb.io/docs/deployments/install-harper):
+
+```sh
+npm install -g harper
+```
+
+## Development
+
+Then you can start your app:
+
+```sh
+npm run dev
+```
+
+TypeScript is supported at runtime in Node.js through [type stripping](https://nodejs.org/api/typescript.html#type-stripping). Full TypeScript language support can be enabled through integrating third party build steps to transpile your TypeScript into JavaScript.
+
+### Define Your Schema
+
+1. Create a new yourTableName.graphql file in the [schemas](./schemas) directory.
+2. Craft your schema by hand.
+3. Save your changes.
+
+These schemas are the heart of a great Harper app, specifying which tables you want and what attributes/fields they should have. Any table you `@export` stands up [endpoints automatically](./.agents/skills/harper-best-practices/rules/automatic-apis.md).
+
+### Add Custom Endpoints
+
+1. Create a new greeting.ts file in the [resources](./resources) directory.
+
+2. Customize your resource:
+
+   ```typescript
+   import { type RecordObject, type RequestTargetOrId, Resource } from 'harper';
+
+   interface GreetingRecord {
+   	greeting: string;
+   }
+
+   export class Greeting extends Resource<GreetingRecord> {
+   	static loadAsInstance = false;
+
+   	async post(
+   		target: RequestTargetOrId,
+   		newRecord: Partial<GreetingRecord & RecordObject>,
+   	): Promise<GreetingRecord> {
+   		// By default, only super users can access these endpoints.
+   		return { greeting: 'Greetings, post!' };
+   	}
+
+   	async get(target?: RequestTargetOrId): Promise<GreetingRecord> {
+   		// But if we want anyone to be able to access it, we can turn off the permission checks!
+   		target.checkPermission = false;
+   		return { greeting: 'Greetings, get! ' + process.version };
+   	}
+
+   	async put(
+   		target: RequestTargetOrId,
+   		record: GreetingRecord & RecordObject,
+   	): Promise<GreetingRecord> {
+   		target.checkPermission = false;
+   		if (this.getCurrentUser()?.name?.includes('Coffee')) {
+   			// You can add your own authorization guards, of course.
+   			return new Response('Coffee? COFFEE?!', { status: 418 });
+   		}
+   		return { greeting: 'Sssssssssssssss!' };
+   	}
+
+   	async patch(
+   		target: RequestTargetOrId,
+   		record: Partial<GreetingRecord & RecordObject>,
+   	): Promise<GreetingRecord> {
+   		return { greeting: 'We can make this work!' };
+   	}
+
+   	async delete(target: RequestTargetOrId): Promise<boolean> {
+   		return true;
+   	}
+   }
+   ```
+
+3. Save your changes.
+
+### View Your Website
+
+Pop open [http://localhost:9926](http://localhost:9926) to view [index.html](./index.html) in your browser.
+
+### Use 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.
+
+## Deployment
+
+When you are ready, head to [https://fabric.harper.fast/](https://fabric.harper.fast/), log in to your account, and create a cluster.
+
+Come back and log in your local CLI to your cluster:
+
+```sh
+harper login
+```
+
+Then you can deploy your app to your cluster:
+
+```sh
+npm run deploy
+```
+
+## 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/template-react-ts-ssr/_aiignore

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

package/template-react-ts-ssr/_env

@@ -0,0 +1 @@
+CLI_TARGET='your-fabric.harper.fast-cluster-url-here'

package/template-react-ts-ssr/_env.example

@@ -0,0 +1 @@
+CLI_TARGET='YOUR_FABRIC.HARPER.FAST_CLUSTER_URL_HERE'

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

@@ -0,0 +1,33 @@
+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 test
+      - name: Run lint
+        run: npm run lint
+      - name: Build & deploy
+        run: npm run deploy