create-harper 1.4.1 → 1.4.3

package/lib/install.js

@@ -21,7 +21,7 @@ export function install(root, agent) {
 		cwd: root,
 	});
 	prompts.log.step('Installing Harper skills...');
-	run('npx -y skills add harperfast/skills --all --yes', {
+	run(['npx', '-y', 'skills', 'add', 'harperfast/skills', '--all', '--yes'], {
 		stdio: 'inherit',
 		cwd: root,
 	});

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "create-harper",
 	"description": "Scaffold a new Harper project in JavaScript or TypeScript.",
-	"version": "1.4.1",
+	"version": "1.4.3",
 	"type": "module",
 	"author": {
 		"name": "HarperDB",
@@ -18,7 +18,9 @@
 		"template-react/",
 		"template-react-ts/",
 		"template-vanilla/",
-		"template-vanilla-ts/"
+		"template-vanilla-ts/",
+		"template-vue/",
+		"template-vue-ts/"
 	],
 	"scripts": {
 		"commitlint": "commitlint --edit",

package/template-vue/README.md

@@ -0,0 +1,120 @@
+# 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 harperdb
+```
+
+## Development
+
+Then you can start your app:
+
+```sh
+npm run dev
+```
+
+### 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.js file in the [resources](./resources) directory.
+
+2. Customize your resource:
+
+   ```javascript
+   export class Greeting extends Resource {
+   	static loadAsInstance = false;
+
+   	async post(
+   		target,
+   		newRecord,
+   	) {
+   		// By default, only super users can access these endpoints.
+   		return { greeting: 'Greetings, post!' };
+   	}
+
+   	async get(target) {
+   		// 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,
+   		record,
+   	) {
+   		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,
+   		record,
+   	) {
+   		return { greeting: 'We can make this work!' };
+   	}
+
+   	async delete(target) {
+   		return true;
+   	}
+   }
+   ```
+
+3. Save your changes.
+
+### 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
+
+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 here and configure your [.env](./.env) file with your secure cluster credentials. Don't commit this file to source control!
+
+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-vue/_aiignore

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

package/template-vue/_env

@@ -0,0 +1,3 @@
+CLI_TARGET_USERNAME='your-cluster-username-here'
+CLI_TARGET_PASSWORD='your-cluster-password-here'
+CLI_TARGET='your-fabric.harper.fast-cluster-url-here'

package/template-vue/_env.example

@@ -0,0 +1,3 @@
+CLI_TARGET_USERNAME='YOUR_CLUSTER_USERNAME'
+CLI_TARGET_PASSWORD='YOUR_CLUSTER_PASSWORD'
+CLI_TARGET='YOUR_FABRIC.HARPER.FAST_CLUSTER_URL_HERE'

package/template-vue/_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

package/template-vue/_gitignore

@@ -0,0 +1,149 @@
+.DS_Store
+web
+deploy
+
+#
+# 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/template-vue/_nvmrc

@@ -0,0 +1 @@
+24.13.1

package/template-vue/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: 'schemas/*.graphql'
+
+# Loads JavaScript modules such that their exports are exported as resources
+jsResource:
+  files: 'resources/*.js'
+
+'@harperfast/vite-plugin':
+  package: '@harperfast/vite-plugin'

package/template-vue/deploy-template/config.yaml

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

package/template-vue/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-vue/deploy-template/package.json

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

package/template-vue/graphql.config.yml

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

package/template-vue/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>your-project-name-here</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/template-vue/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "your-package-name-here",
+	"version": "0.0.0",
+	"type": "module",
+	"repository": "github:HarperFast/create-harper",
+	"scripts": {
+		"agent:run": "npx -y @harperfast/agent@latest",
+		"agent:skills:update": "npx -y skills@latest add harperfast/skills --all --yes",
+		"dev": "harper run .",
+		"test": "echo 'No tests implemented yet'",
+		"lint": "echo 'No lint implemented yet'",
+		"build": "vite build",
+		"preview": "vite preview",
+		"deploy": "rm -Rf deploy && npm run build && mkdir deploy && mv web deploy/ && cp -R deploy-template/* deploy/ && dotenv -- npm run deploy:component && rm -Rf deploy",
+		"deploy:component": "(cd deploy && harperdb deploy_component . project=web restart=rolling replicated=true)"
+	},
+	"devDependencies": {
+		"@harperfast/vite-plugin": "^0.0.1",
+		"@vitejs/plugin-vue": "^6.0.0",
+		"dotenv-cli": "^11.0.0",
+		"harperdb": "^4.7.17",
+		"vite": "npm:rolldown-vite@7.3.1",
+		"vue": "^3.5.13"
+	},
+	"overrides": {
+		"vite": "npm:rolldown-vite@7.3.1"
+	}
+}

package/template-vue/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-vue/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-vue/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-vue/public/vue.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196.3 170">
+  <path
+    fill="#41B883"
+    d="m120.8 0-22.6 39.2L75.6 0H0l98.2 170L196.3 0h-75.5z"
+  /><path
+    fill="#34495E"
+    d="m120.8 0-22.6 39.2L75.6 0h-31l53.6 92.8L151.8 0h-31z"
+  />
+</svg>

package/template-vue/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-vue/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-vue/src/App.vue

@@ -0,0 +1,42 @@
+<script setup>
+import typescriptLogo from '/typescript.svg';
+import viteLogo from '/vite.svg';
+import vueLogo from '/vue.svg';
+import { ref } from 'vue';
+
+const counter = ref(0);
+const countUp = () => {
+	counter.value++;
+};
+</script>
+
+<template>
+  <div>
+    <a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
+      <img :src="viteLogo" class="logo" alt="Vite logo" />
+    </a>
+    <a
+      href="https://www.typescriptlang.org/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img :src="typescriptLogo" class="logo vanilla" alt="TypeScript logo" />
+    </a>
+    <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">
+      <img :src="vueLogo" class="logo vue" alt="Vue logo" />
+    </a>
+    <h1>Vite + TypeScript + Vue</h1>
+    <p>Wow, look at this!</p>
+    <div class="card">
+      <button id="counter" type="button" @click="countUp">
+        count is {{ counter }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.logo.vue:hover {
+	filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

package/template-vue/src/main.js

@@ -0,0 +1,6 @@
+import App from '@/App.vue';
+import { createApp } from 'vue';
+
+import './style.css';
+
+createApp(App).mount('#app');