@harperfast/template-react-studio 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.aiignore +1 -0
- package/.github/workflow/deploy.yaml +33 -0
- package/.gitignore +149 -0
- package/README.md +50 -0
- package/config.yaml +23 -0
- package/deploy-template/config.yaml +2 -0
- package/deploy-template/fastify/static.js +14 -0
- package/deploy-template/package.json +5 -0
- package/graphql.config.yml +3 -0
- package/index.html +13 -0
- package/package.json +17 -0
- package/public/react.svg +14 -0
- package/public/typescript.svg +16 -0
- package/public/vite.svg +42 -0
- package/resources/examplePeople.js +14 -0
- package/resources/exampleSocket.js +34 -0
- package/resources/greeting.js +10 -0
- package/schemas/examplePeople.graphql +7 -0
- package/src/App.jsx +34 -0
- package/src/main.jsx +13 -0
- package/src/style.css +96 -0
- package/src/vite-env.d.ts +9 -0
- package/vite.config.js +22 -0
package/.aiignore
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.env
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
name: Deploy to Harper Fabric
|
|
2
|
+
on:
|
|
3
|
+
workflow_dispatch:
|
|
4
|
+
# push:
|
|
5
|
+
# branches:
|
|
6
|
+
# - main
|
|
7
|
+
|
|
8
|
+
concurrency:
|
|
9
|
+
group: main
|
|
10
|
+
cancel-in-progress: false
|
|
11
|
+
|
|
12
|
+
jobs:
|
|
13
|
+
deploy:
|
|
14
|
+
runs-on: ubuntu-latest
|
|
15
|
+
steps:
|
|
16
|
+
- name: Checkout code
|
|
17
|
+
uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
|
18
|
+
with:
|
|
19
|
+
fetch-depth: 0
|
|
20
|
+
fetch-tags: true
|
|
21
|
+
- name: Set up Node.js
|
|
22
|
+
uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
|
|
23
|
+
with:
|
|
24
|
+
cache: 'npm'
|
|
25
|
+
node-version-file: '.nvmrc'
|
|
26
|
+
- name: Install dependencies
|
|
27
|
+
run: npm ci
|
|
28
|
+
- name: Run unit tests
|
|
29
|
+
run: npm test
|
|
30
|
+
- name: Run lint
|
|
31
|
+
run: npm run lint
|
|
32
|
+
- name: Build & deploy
|
|
33
|
+
run: npm run build-and-deploy
|
package/.gitignore
ADDED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
.DS_Store
|
|
2
|
+
web
|
|
3
|
+
deploy
|
|
4
|
+
|
|
5
|
+
#
|
|
6
|
+
# https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore
|
|
7
|
+
#
|
|
8
|
+
|
|
9
|
+
# Logs
|
|
10
|
+
logs
|
|
11
|
+
*.log
|
|
12
|
+
npm-debug.log*
|
|
13
|
+
yarn-debug.log*
|
|
14
|
+
yarn-error.log*
|
|
15
|
+
lerna-debug.log*
|
|
16
|
+
|
|
17
|
+
# Diagnostic reports (https://nodejs.org/api/report.html)
|
|
18
|
+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
|
19
|
+
|
|
20
|
+
# Runtime data
|
|
21
|
+
pids
|
|
22
|
+
*.pid
|
|
23
|
+
*.seed
|
|
24
|
+
*.pid.lock
|
|
25
|
+
|
|
26
|
+
# Directory for instrumented libs generated by jscoverage/JSCover
|
|
27
|
+
lib-cov
|
|
28
|
+
|
|
29
|
+
# Coverage directory used by tools like istanbul
|
|
30
|
+
coverage
|
|
31
|
+
*.lcov
|
|
32
|
+
|
|
33
|
+
# nyc test coverage
|
|
34
|
+
.nyc_output
|
|
35
|
+
|
|
36
|
+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
|
37
|
+
.grunt
|
|
38
|
+
|
|
39
|
+
# Bower dependency directory (https://bower.io/)
|
|
40
|
+
bower_components
|
|
41
|
+
|
|
42
|
+
# node-waf configuration
|
|
43
|
+
.lock-wscript
|
|
44
|
+
|
|
45
|
+
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
|
46
|
+
build/Release
|
|
47
|
+
|
|
48
|
+
# Dependency directories
|
|
49
|
+
node_modules/
|
|
50
|
+
jspm_packages/
|
|
51
|
+
|
|
52
|
+
# Snowpack dependency directory (https://snowpack.dev/)
|
|
53
|
+
web_modules/
|
|
54
|
+
|
|
55
|
+
# TypeScript cache
|
|
56
|
+
*.tsbuildinfo
|
|
57
|
+
|
|
58
|
+
# Optional npm cache directory
|
|
59
|
+
.npm
|
|
60
|
+
|
|
61
|
+
# Optional eslint cache
|
|
62
|
+
.eslintcache
|
|
63
|
+
|
|
64
|
+
# Optional stylelint cache
|
|
65
|
+
.stylelintcache
|
|
66
|
+
|
|
67
|
+
# Optional REPL history
|
|
68
|
+
.node_repl_history
|
|
69
|
+
|
|
70
|
+
# Output of 'npm pack'
|
|
71
|
+
*.tgz
|
|
72
|
+
|
|
73
|
+
# Yarn Integrity file
|
|
74
|
+
.yarn-integrity
|
|
75
|
+
|
|
76
|
+
# dotenv environment variable files
|
|
77
|
+
.env
|
|
78
|
+
.env.*
|
|
79
|
+
!.env.example
|
|
80
|
+
|
|
81
|
+
# parcel-bundler cache (https://parceljs.org/)
|
|
82
|
+
.cache
|
|
83
|
+
.parcel-cache
|
|
84
|
+
|
|
85
|
+
# Next.js build output
|
|
86
|
+
.next
|
|
87
|
+
out
|
|
88
|
+
|
|
89
|
+
# Nuxt.js build / generate output
|
|
90
|
+
.nuxt
|
|
91
|
+
dist
|
|
92
|
+
.output
|
|
93
|
+
|
|
94
|
+
# Gatsby files
|
|
95
|
+
.cache/
|
|
96
|
+
# Comment in the public line in if your project uses Gatsby and not Next.js
|
|
97
|
+
# https://nextjs.org/blog/next-9-1#public-directory-support
|
|
98
|
+
# public
|
|
99
|
+
|
|
100
|
+
# vuepress build output
|
|
101
|
+
.vuepress/dist
|
|
102
|
+
|
|
103
|
+
# vuepress v2.x temp and cache directory
|
|
104
|
+
.temp
|
|
105
|
+
.cache
|
|
106
|
+
|
|
107
|
+
# Sveltekit cache directory
|
|
108
|
+
.svelte-kit/
|
|
109
|
+
|
|
110
|
+
# vitepress build output
|
|
111
|
+
**/.vitepress/dist
|
|
112
|
+
|
|
113
|
+
# vitepress cache directory
|
|
114
|
+
**/.vitepress/cache
|
|
115
|
+
|
|
116
|
+
# Docusaurus cache and generated files
|
|
117
|
+
.docusaurus
|
|
118
|
+
|
|
119
|
+
# Serverless directories
|
|
120
|
+
.serverless/
|
|
121
|
+
|
|
122
|
+
# FuseBox cache
|
|
123
|
+
.fusebox/
|
|
124
|
+
|
|
125
|
+
# DynamoDB Local files
|
|
126
|
+
.dynamodb/
|
|
127
|
+
|
|
128
|
+
# Firebase cache directory
|
|
129
|
+
.firebase/
|
|
130
|
+
|
|
131
|
+
# TernJS port file
|
|
132
|
+
.tern-port
|
|
133
|
+
|
|
134
|
+
# Stores VSCode versions used for testing VSCode extensions
|
|
135
|
+
.vscode-test
|
|
136
|
+
|
|
137
|
+
# yarn v3
|
|
138
|
+
.pnp.*
|
|
139
|
+
.yarn/*
|
|
140
|
+
!.yarn/patches
|
|
141
|
+
!.yarn/plugins
|
|
142
|
+
!.yarn/releases
|
|
143
|
+
!.yarn/sdks
|
|
144
|
+
!.yarn/versions
|
|
145
|
+
|
|
146
|
+
# Vite files
|
|
147
|
+
vite.config.js.timestamp-*
|
|
148
|
+
vite.config.ts.timestamp-*
|
|
149
|
+
.vite/
|
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# your-project-name-here
|
|
2
|
+
|
|
3
|
+
Your new app is now deployed and running on Harper Fabric!
|
|
4
|
+
|
|
5
|
+
Here's what you should do next:
|
|
6
|
+
|
|
7
|
+
### Define Your Schema
|
|
8
|
+
|
|
9
|
+
Tap [+ New Table](./schemas/examplePeople.graphql?ShowNewTableModal=true) when viewing a schema file, and you'll be guided through the available options.
|
|
10
|
+
|
|
11
|
+
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.
|
|
12
|
+
|
|
13
|
+
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.
|
|
14
|
+
|
|
15
|
+
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`.
|
|
16
|
+
|
|
17
|
+
### Add Custom Endpoints
|
|
18
|
+
|
|
19
|
+
The [resources/greeting.js](./resources/greeting.js) provides a template for defining JavaScript resource classes, for customized application logic in your endpoints.
|
|
20
|
+
|
|
21
|
+
### View Your Website
|
|
22
|
+
|
|
23
|
+
Pop open [http://localhost:9926](http://localhost:9926) to view [web/index.html](./web/index.html) in your browser.
|
|
24
|
+
|
|
25
|
+
### Use Your API
|
|
26
|
+
|
|
27
|
+
Head to the [APIs](./apis) tab to explore your endpoints and exercise them. You can click the "Authenticate" button to
|
|
28
|
+
see what different users will be able to access through your API.
|
|
29
|
+
|
|
30
|
+
Test your application works by querying the `/Greeting` endpoint:
|
|
31
|
+
|
|
32
|
+
```sh
|
|
33
|
+
curl http://localhost:9926/Greeting
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
You should see the following:
|
|
37
|
+
|
|
38
|
+
```json
|
|
39
|
+
{ "greeting": "Hello, world!" }
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Configure Your App
|
|
43
|
+
|
|
44
|
+
Take a look at the [default configuration](./config.yaml), which specifies how files are handled in your application.
|
|
45
|
+
|
|
46
|
+
## Keep Going!
|
|
47
|
+
|
|
48
|
+
For more information about getting started with Harper and building applications, see our [getting started guide](https://docs.harperdb.io/docs).
|
|
49
|
+
|
|
50
|
+
For more information on Harper Components, see the [Components documentation](https://docs.harperdb.io/docs/reference/components).
|
package/config.yaml
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./node_modules/harperdb/config-app.schema.json
|
|
2
|
+
|
|
3
|
+
# This is the configuration file for the application.
|
|
4
|
+
# It specifies built-in Harper components that will load the specified feature and files.
|
|
5
|
+
# For more information, see https://docs.harperdb.io/docs/reference/components/built-in-extensions
|
|
6
|
+
|
|
7
|
+
# Load Environment Variables from the specified file
|
|
8
|
+
# loadEnv:
|
|
9
|
+
# files: '.env'
|
|
10
|
+
|
|
11
|
+
# This provides the HTTP REST interface for all exported resources
|
|
12
|
+
rest: true
|
|
13
|
+
|
|
14
|
+
# These reads GraphQL schemas to define the schema of database/tables/attributes.
|
|
15
|
+
graphqlSchema:
|
|
16
|
+
files: 'schemas/*.graphql'
|
|
17
|
+
|
|
18
|
+
# Loads JavaScript modules such that their exports are exported as resources
|
|
19
|
+
jsResource:
|
|
20
|
+
files: 'resources/*.js'
|
|
21
|
+
|
|
22
|
+
'@harperfast/vite-plugin':
|
|
23
|
+
package: '@harperfast/vite-plugin'
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import fastifyStatic from '@fastify/static';
|
|
2
|
+
import { join } from 'path';
|
|
3
|
+
|
|
4
|
+
export default async (fastify) => {
|
|
5
|
+
fastify.register(fastifyStatic, {
|
|
6
|
+
root: join(import.meta.dirname, '../web'),
|
|
7
|
+
maxAge: '30d',
|
|
8
|
+
immutable: true,
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
fastify.get('/', function(req, reply) {
|
|
12
|
+
reply.sendFile('index.html', { maxAge: '1m', immutable: false });
|
|
13
|
+
});
|
|
14
|
+
};
|
package/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>your-project-name-here</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="app"></div>
|
|
11
|
+
<script type="module" src="/src/main.jsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@harperfast/template-react-studio",
|
|
3
|
+
"version": "0.7.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"scripts": {},
|
|
6
|
+
"devDependencies": {
|
|
7
|
+
"@harperfast/vite-plugin": "^0.0.1",
|
|
8
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
9
|
+
"harperdb": "^4.7.15",
|
|
10
|
+
"react": "^19.2.3",
|
|
11
|
+
"react-dom": "^19.2.3",
|
|
12
|
+
"vite": "npm:rolldown-vite@7.3.1"
|
|
13
|
+
},
|
|
14
|
+
"overrides": {
|
|
15
|
+
"vite": "npm:rolldown-vite@7.3.1"
|
|
16
|
+
}
|
|
17
|
+
}
|
package/public/react.svg
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="100%"
|
|
3
|
+
height="100%"
|
|
4
|
+
viewBox="-10.5 -9.45 21 18.9"
|
|
5
|
+
fill="none"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<circle cx="0" cy="0" r="2" fill="#58c4dc"></circle>
|
|
9
|
+
<g stroke="#58c4dc" stroke-width="1" fill="none">
|
|
10
|
+
<ellipse rx="10" ry="4.5"></ellipse>
|
|
11
|
+
<ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse>
|
|
12
|
+
<ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse>
|
|
13
|
+
</g>
|
|
14
|
+
</svg>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
role="img"
|
|
5
|
+
class="iconify iconify--logos"
|
|
6
|
+
width="32"
|
|
7
|
+
height="32"
|
|
8
|
+
preserveAspectRatio="xMidYMid meet"
|
|
9
|
+
viewBox="0 0 256 256"
|
|
10
|
+
>
|
|
11
|
+
<path fill="#007ACC" d="M0 128v128h256V0H0z"></path>
|
|
12
|
+
<path
|
|
13
|
+
fill="#FFF"
|
|
14
|
+
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"
|
|
15
|
+
></path>
|
|
16
|
+
</svg>
|
package/public/vite.svg
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
role="img"
|
|
5
|
+
class="iconify iconify--logos"
|
|
6
|
+
width="31.88"
|
|
7
|
+
height="32"
|
|
8
|
+
preserveAspectRatio="xMidYMid meet"
|
|
9
|
+
viewBox="0 0 256 257"
|
|
10
|
+
>
|
|
11
|
+
<defs>
|
|
12
|
+
<linearGradient
|
|
13
|
+
id="IconifyId1813088fe1fbc01fb466"
|
|
14
|
+
x1="-.828%"
|
|
15
|
+
x2="57.636%"
|
|
16
|
+
y1="7.652%"
|
|
17
|
+
y2="78.411%"
|
|
18
|
+
>
|
|
19
|
+
<stop offset="0%" stop-color="#41D1FF"></stop>
|
|
20
|
+
<stop offset="100%" stop-color="#BD34FE"></stop>
|
|
21
|
+
</linearGradient>
|
|
22
|
+
<linearGradient
|
|
23
|
+
id="IconifyId1813088fe1fbc01fb467"
|
|
24
|
+
x1="43.376%"
|
|
25
|
+
x2="50.316%"
|
|
26
|
+
y1="2.242%"
|
|
27
|
+
y2="89.03%"
|
|
28
|
+
>
|
|
29
|
+
<stop offset="0%" stop-color="#FFEA83"></stop>
|
|
30
|
+
<stop offset="8.333%" stop-color="#FFDD35"></stop>
|
|
31
|
+
<stop offset="100%" stop-color="#FFA800"></stop>
|
|
32
|
+
</linearGradient>
|
|
33
|
+
</defs>
|
|
34
|
+
<path
|
|
35
|
+
fill="url(#IconifyId1813088fe1fbc01fb466)"
|
|
36
|
+
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"
|
|
37
|
+
></path>
|
|
38
|
+
<path
|
|
39
|
+
fill="url(#IconifyId1813088fe1fbc01fb467)"
|
|
40
|
+
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"
|
|
41
|
+
></path>
|
|
42
|
+
</svg>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { tables } from 'harperdb';
|
|
2
|
+
|
|
3
|
+
export class ExamplePeople extends tables.ExamplePeople {
|
|
4
|
+
// we can define our own custom POST handler
|
|
5
|
+
post(content) {
|
|
6
|
+
// do something with the incoming content;
|
|
7
|
+
return super.post(content);
|
|
8
|
+
}
|
|
9
|
+
// or custom GET handler
|
|
10
|
+
get() {
|
|
11
|
+
// we can modify this resource before returning
|
|
12
|
+
return super.get();
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Resource, tables } from 'harperdb';
|
|
2
|
+
|
|
3
|
+
export class ExampleSocket extends Resource {
|
|
4
|
+
static loadAsInstance = false;
|
|
5
|
+
|
|
6
|
+
// This customizes handling the socket connections; tables can have this method too!
|
|
7
|
+
async *connect(
|
|
8
|
+
target,
|
|
9
|
+
incomingMessages,
|
|
10
|
+
) {
|
|
11
|
+
const subscription = await tables.ExamplePeople.subscribe(target);
|
|
12
|
+
if (!incomingMessages) {
|
|
13
|
+
// Server sent events, no incoming messages!
|
|
14
|
+
// Subscribe to changes to the table.
|
|
15
|
+
return subscription;
|
|
16
|
+
}
|
|
17
|
+
for await (let message of incomingMessages) {
|
|
18
|
+
const { type, id, name, tag } = message;
|
|
19
|
+
switch (type) {
|
|
20
|
+
case 'get':
|
|
21
|
+
const loaded = await tables.ExamplePeople.get(id);
|
|
22
|
+
yield {
|
|
23
|
+
type: 'get',
|
|
24
|
+
id,
|
|
25
|
+
...(loaded ? loaded : {}),
|
|
26
|
+
};
|
|
27
|
+
break;
|
|
28
|
+
case 'put':
|
|
29
|
+
await tables.ExamplePeople.put(id, { name, tag });
|
|
30
|
+
break;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
## Here we can define any tables in our database. This example shows how we define a type as a table using
|
|
2
|
+
## the type name as the table name and specifying it is an "export" available in the REST and other external protocols.
|
|
3
|
+
type ExamplePeople @table @export {
|
|
4
|
+
id: ID @primaryKey # Here we define primary key (must be one)
|
|
5
|
+
name: String # we can define any other attributes here
|
|
6
|
+
tag: String @indexed # we can specify any attributes that should be indexed
|
|
7
|
+
}
|
package/src/App.jsx
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import reactLogo from '/react.svg';
|
|
2
|
+
import typescriptLogo from '/typescript.svg';
|
|
3
|
+
import viteLogo from '/vite.svg';
|
|
4
|
+
import { useCallback, useState } from 'react';
|
|
5
|
+
|
|
6
|
+
export function App() {
|
|
7
|
+
const [counter, setCounter] = useState(0);
|
|
8
|
+
const countUp = useCallback(() => {
|
|
9
|
+
setCounter(counter => counter + 1);
|
|
10
|
+
}, []);
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<>
|
|
14
|
+
<div>
|
|
15
|
+
<a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
|
|
16
|
+
<img src={viteLogo} className="logo" alt="Vite logo" />
|
|
17
|
+
</a>
|
|
18
|
+
<a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">
|
|
19
|
+
<img src={typescriptLogo} className="logo vanilla" alt="TypeScript logo" />
|
|
20
|
+
</a>
|
|
21
|
+
<a href="https://react.dev/" target="_blank" rel="noopener noreferrer">
|
|
22
|
+
<img src={reactLogo} className="logo react" alt="React logo" />
|
|
23
|
+
</a>
|
|
24
|
+
<h1>Vite + TypeScript + React</h1>
|
|
25
|
+
<p>Wow, look at this!</p>
|
|
26
|
+
<div className="card">
|
|
27
|
+
<button id="counter" type="button" onClick={countUp}>
|
|
28
|
+
count is {counter}
|
|
29
|
+
</button>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</>
|
|
33
|
+
);
|
|
34
|
+
}
|
package/src/main.jsx
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { App } from '@/App.jsx';
|
|
2
|
+
import { StrictMode } from 'react';
|
|
3
|
+
import { createRoot } from 'react-dom/client';
|
|
4
|
+
|
|
5
|
+
import './style.css';
|
|
6
|
+
|
|
7
|
+
createRoot(
|
|
8
|
+
document.getElementById('app'),
|
|
9
|
+
).render(
|
|
10
|
+
<StrictMode>
|
|
11
|
+
<App />
|
|
12
|
+
</StrictMode>,
|
|
13
|
+
);
|
package/src/style.css
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
+
line-height: 1.5;
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
|
|
6
|
+
color-scheme: light dark;
|
|
7
|
+
color: rgba(255, 255, 255, 0.87);
|
|
8
|
+
background-color: #242424;
|
|
9
|
+
|
|
10
|
+
font-synthesis: none;
|
|
11
|
+
text-rendering: optimizeLegibility;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a {
|
|
17
|
+
font-weight: 500;
|
|
18
|
+
color: #646cff;
|
|
19
|
+
text-decoration: inherit;
|
|
20
|
+
}
|
|
21
|
+
a:hover {
|
|
22
|
+
color: #535bf2;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
body {
|
|
26
|
+
margin: 0;
|
|
27
|
+
display: flex;
|
|
28
|
+
place-items: center;
|
|
29
|
+
min-width: 320px;
|
|
30
|
+
min-height: 100vh;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h1 {
|
|
34
|
+
font-size: 3.2em;
|
|
35
|
+
line-height: 1.1;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
#app {
|
|
39
|
+
max-width: 1280px;
|
|
40
|
+
margin: 0 auto;
|
|
41
|
+
padding: 2rem;
|
|
42
|
+
text-align: center;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.logo {
|
|
46
|
+
height: 6em;
|
|
47
|
+
padding: 1.5em;
|
|
48
|
+
will-change: filter;
|
|
49
|
+
transition: filter 300ms;
|
|
50
|
+
}
|
|
51
|
+
.logo:hover {
|
|
52
|
+
filter: drop-shadow(0 0 2em #646cffaa);
|
|
53
|
+
}
|
|
54
|
+
.logo.vanilla:hover {
|
|
55
|
+
filter: drop-shadow(0 0 2em #3178c6aa);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.card {
|
|
59
|
+
padding: 2em;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.read-the-docs {
|
|
63
|
+
color: #888;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
button {
|
|
67
|
+
border-radius: 8px;
|
|
68
|
+
border: 1px solid transparent;
|
|
69
|
+
padding: 0.6em 1.2em;
|
|
70
|
+
font-size: 1em;
|
|
71
|
+
font-weight: 500;
|
|
72
|
+
font-family: inherit;
|
|
73
|
+
background-color: #1a1a1a;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
transition: border-color 0.25s;
|
|
76
|
+
}
|
|
77
|
+
button:hover {
|
|
78
|
+
border-color: #646cff;
|
|
79
|
+
}
|
|
80
|
+
button:focus,
|
|
81
|
+
button:focus-visible {
|
|
82
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@media (prefers-color-scheme: light) {
|
|
86
|
+
:root {
|
|
87
|
+
color: #213547;
|
|
88
|
+
background-color: #ffffff;
|
|
89
|
+
}
|
|
90
|
+
a:hover {
|
|
91
|
+
color: #747bff;
|
|
92
|
+
}
|
|
93
|
+
button {
|
|
94
|
+
background-color: #f9f9f9;
|
|
95
|
+
}
|
|
96
|
+
}
|
package/vite.config.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import react from '@vitejs/plugin-react';
|
|
2
|
+
import path from 'node:path';
|
|
3
|
+
import { defineConfig } from 'vite';
|
|
4
|
+
|
|
5
|
+
// https://vite.dev/config/
|
|
6
|
+
export default defineConfig({
|
|
7
|
+
plugins: [
|
|
8
|
+
react(),
|
|
9
|
+
],
|
|
10
|
+
resolve: {
|
|
11
|
+
alias: {
|
|
12
|
+
'@': path.resolve(__dirname, './src'),
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
build: {
|
|
16
|
+
outDir: 'web',
|
|
17
|
+
emptyOutDir: true,
|
|
18
|
+
rolldownOptions: {
|
|
19
|
+
external: ['**/*.test.*', '**/*.spec.*'],
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
});
|