@powerhousedao/academy 3.2.0-dev.2 → 3.2.0-dev.3
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/CHANGELOG.md +10 -0
- package/docs/academy/01-GetStarted/00-ExploreDemoPackage.mdx +188 -0
- package/docs/academy/01-GetStarted/01-CreateNewPowerhouseProject.md +10 -12
- package/docs/academy/01-GetStarted/02-DefineToDoListDocumentModel.md +8 -8
- package/docs/academy/01-GetStarted/03-ImplementOperationReducers.md +11 -11
- package/docs/academy/01-GetStarted/04-BuildToDoListEditor.md +13 -13
- package/docs/academy/01-GetStarted/_04-BuildToDoListEditor +12 -12
- package/docs/academy/01-GetStarted/home.mdx +50 -51
- package/docs/academy/01-GetStarted/images/Connect.png +0 -0
- package/docs/academy/01-GetStarted/images/Packagemanager.png +0 -0
- package/docs/academy/01-GetStarted/images/TodoDriveApp.png +0 -0
- package/docs/academy/01-GetStarted/styles.module.css +7 -14
- package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/02-StandardDocumentModelWorkflow.md +22 -22
- package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/03-BuilderTools.md +17 -17
- package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/_category_.json +1 -1
- package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/01-WhatIsADocumentModel.md +15 -15
- package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/02-SpecifyTheStateSchema.md +11 -9
- package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/03-SpecifyDocumentOperations.md +15 -15
- package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/04-UseTheDocumentModelGenerator.md +9 -9
- package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/05-ImplementDocumentReducers.md +15 -15
- package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/06-ImplementDocumentModelTests.md +14 -14
- package/docs/academy/02-MasteryTrack/02-DocumentModelCreation/07-ExampleToDoListRepository.md +4 -4
- package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/01-BuildingDocumentEditors.md +28 -30
- package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/02-ConfiguringDrives.md +7 -7
- package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/03-BuildingADriveExplorer.md +9 -10
- package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/07-DocumentTools/01-OperationHistory.md +11 -11
- package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/07-DocumentTools/02-RevisionHistoryTimeline.md +6 -6
- package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/08-Authorization/01-RenownAuthenticationFlow.md +8 -8
- package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/08-Authorization/02-Authorization.md +8 -8
- package/docs/academy/02-MasteryTrack/04-WorkWithData/01-ReadingAndWritingThroughTheAPI.mdx +5 -5
- package/docs/academy/02-MasteryTrack/04-WorkWithData/02-GraphQLAtPowerhouse.md +3 -3
- package/docs/academy/02-MasteryTrack/04-WorkWithData/03-WorkingWithSubgraphs/02-GraphQLAndSubgraphs.mdx +8 -8
- package/docs/academy/02-MasteryTrack/04-WorkWithData/03-WorkingWithSubgraphs/03-WorkingWithSubgraphs.md +28 -28
- package/docs/academy/02-MasteryTrack/04-WorkWithData/04-analytics-processor.md +4 -4
- package/docs/academy/02-MasteryTrack/04-WorkWithData/05-AnalyticsProcessorTutorial/01-SetupBuilderEnvironment.md +14 -14
- package/docs/academy/02-MasteryTrack/04-WorkWithData/05-AnalyticsProcessorTutorial/02-CreateNewPowerhouseProject.md +2 -2
- package/docs/academy/02-MasteryTrack/04-WorkWithData/05-AnalyticsProcessorTutorial/03-GenerateAnAnalyticsProcessor.md +6 -6
- package/docs/academy/02-MasteryTrack/04-WorkWithData/05-AnalyticsProcessorTutorial/04-UpdateAnalyticsProcessor.md +1 -1
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/GraphQL References/QueryingADocumentWithGraphQL.md +2 -2
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/best-practices.md +4 -4
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/graphql/index.md +7 -7
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/graphql/integration.md +1 -1
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/intro.md +6 -6
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/typescript/browser.md +1 -1
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/typescript/index.md +5 -5
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/typescript/memory.md +1 -1
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/typescript/pg.md +2 -2
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/typescript/schema.md +1 -1
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/typescript/utilities.md +1 -1
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/use-cases/index.md +1 -1
- package/docs/academy/02-MasteryTrack/04-WorkWithData/06-Analytics Engine/use-cases/maker.md +12 -12
- package/docs/academy/02-MasteryTrack/05-Launch/01-IntroductionToPackages.md +9 -9
- package/docs/academy/02-MasteryTrack/05-Launch/02-PublishYourProject.md +8 -8
- package/docs/academy/02-MasteryTrack/05-Launch/03-SetupEnvironment.md +35 -35
- package/docs/academy/02-MasteryTrack/05-Launch/04-ConfigureEnvironment.md +8 -8
- package/docs/academy/02-MasteryTrack/_category_.json +1 -1
- package/docs/academy/03-ExampleUsecases/Chatroom/03-DefineChatroomDocumentModel.md +5 -5
- package/docs/academy/07-Cookbook.md +105 -105
- package/package.json +1 -1
- package/sidebars.ts +9 -10
- package/src/css/custom.css +18 -0
- package/docs/academy/01-GetStarted/00-ExploreDemoPackage.md +0 -88
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Get
|
|
2
|
+
title: Get started
|
|
3
3
|
slug: /
|
|
4
4
|
sidebar_class_name: category-index-page
|
|
5
5
|
---
|
|
@@ -11,11 +11,11 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
|
|
|
11
11
|
<div className={styles.learningPath}>
|
|
12
12
|
{/* Get Started Card - Full Width */}
|
|
13
13
|
<div className={`${styles.pathCard} ${styles.fullWidth}`}>
|
|
14
|
-
<div className={styles.cardHeader}
|
|
15
|
-
<
|
|
16
|
-
<img src="/img/academy/icons/Flash.svg" alt="" />
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
<div className={styles.cardHeader}>
|
|
15
|
+
<h3 className="card-title">
|
|
16
|
+
<img src="/img/academy/icons/Flash.svg" alt="" className={styles.titleIcon} />
|
|
17
|
+
Get started
|
|
18
|
+
</h3>
|
|
19
19
|
</div>
|
|
20
20
|
<div className={styles.cardContent}>
|
|
21
21
|
<div style={{ maxWidth: '960px', margin: '0 auto', textAlign: 'center' }}>
|
|
@@ -49,13 +49,13 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
|
|
|
49
49
|
|
|
50
50
|
<div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
|
|
51
51
|
<div className={styles.cardHeader}>
|
|
52
|
-
<
|
|
53
|
-
<img src="/img/academy/icons/
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
<h3 className="card-title">
|
|
53
|
+
<img src="/img/academy/icons/Flash.svg" alt="" className={styles.titleIcon} />
|
|
54
|
+
Get started
|
|
55
|
+
</h3>
|
|
56
56
|
</div>
|
|
57
57
|
<div className={styles.cardContent}>
|
|
58
|
-
<a href="/academy/GetStarted/CreateNewPowerhouseProject" className="path-button">Build a
|
|
58
|
+
<a href="/academy/GetStarted/CreateNewPowerhouseProject" className="path-button">Build a todo-list document model</a>
|
|
59
59
|
</div>
|
|
60
60
|
</div>
|
|
61
61
|
|
|
@@ -64,16 +64,16 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
|
|
|
64
64
|
{/* Row 2: Build User Experiences, Builder Track Image, Work with Data */}
|
|
65
65
|
<div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
|
|
66
66
|
<div className={styles.cardHeader}>
|
|
67
|
-
<
|
|
68
|
-
<img src="/img/academy/icons/Editor.svg" alt="" />
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
<h3 className="card-title">
|
|
68
|
+
<img src="/img/academy/icons/Editor.svg" alt="" className={styles.titleIcon} />
|
|
69
|
+
Build user experiences
|
|
70
|
+
</h3>
|
|
71
71
|
</div>
|
|
72
72
|
<div className={styles.cardContent}>
|
|
73
|
-
<a href="/academy/GetStarted/BuildToDoListEditor" className="path-button">Building a
|
|
74
|
-
<a href="/academy/MasteryTrack/BuildingUserExperiences/BuildingDocumentEditors" className="path-button">Building
|
|
75
|
-
<a href="/academy/MasteryTrack/BuildingUserExperiences/BuildingADriveExplorer" className="path-button">Building
|
|
76
|
-
<a href="/academy/ComponentLibrary/DocumentEngineering" className="path-button">Component
|
|
73
|
+
<a href="/academy/GetStarted/BuildToDoListEditor" className="path-button">Building a todo-list editor</a>
|
|
74
|
+
<a href="/academy/MasteryTrack/BuildingUserExperiences/BuildingDocumentEditors" className="path-button">Building document editors</a>
|
|
75
|
+
<a href="/academy/MasteryTrack/BuildingUserExperiences/BuildingADriveExplorer" className="path-button">Building custom drive explorers</a>
|
|
76
|
+
<a href="/academy/ComponentLibrary/DocumentEngineering" className="path-button">Component library</a>
|
|
77
77
|
</div>
|
|
78
78
|
</div>
|
|
79
79
|
|
|
@@ -86,38 +86,37 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
|
|
|
86
86
|
}}>
|
|
87
87
|
<img src="/img/Union.svg" alt="Powerhouse Union" width="250" />
|
|
88
88
|
<div className={styles.masteryTrackTitle}>
|
|
89
|
-
<h3 className="card-title" style={{ margin: 0 }}>Mastery
|
|
89
|
+
<h3 className="card-title" style={{ margin: 0 }}>Mastery track</h3>
|
|
90
90
|
</div>
|
|
91
91
|
</div>
|
|
92
92
|
|
|
93
93
|
<div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
|
|
94
94
|
<div className={styles.cardHeader}>
|
|
95
|
-
<
|
|
96
|
-
<img src="/img/academy/icons/Data.svg" alt="" />
|
|
97
|
-
|
|
98
|
-
|
|
95
|
+
<h3 className="card-title">
|
|
96
|
+
<img src="/img/academy/icons/Data.svg" alt="" className={styles.titleIcon} />
|
|
97
|
+
Work with data
|
|
98
|
+
</h3>
|
|
99
99
|
</div>
|
|
100
100
|
<div className={styles.cardContent}>
|
|
101
|
-
<a href="/academy/MasteryTrack/WorkWithData/ReadingAndWritingThroughTheAPI" className="path-button">Reading &
|
|
102
|
-
<a href="/academy/MasteryTrack/WorkWithData/WorkingWithSubgraphs" className="path-button">Create your own
|
|
103
|
-
<a href="/academy/MasteryTrack/WorkWithData/Analytics-Engine/intro" className="path-button">Using the
|
|
104
|
-
<a href="/academy/MasteryTrack/WorkWithData/Analytics-Engine/intro" className="path-button">Using the Analytics Engine</a>
|
|
101
|
+
<a href="/academy/MasteryTrack/WorkWithData/ReadingAndWritingThroughTheAPI" className="path-button">Reading & writing through the API</a>
|
|
102
|
+
<a href="/academy/MasteryTrack/WorkWithData/WorkingWithSubgraphs" className="path-button">Create your own subgraph</a>
|
|
103
|
+
<a href="/academy/MasteryTrack/WorkWithData/Analytics-Engine/intro" className="path-button">Using the analytics engine</a>
|
|
105
104
|
</div>
|
|
106
105
|
</div>
|
|
107
106
|
|
|
108
107
|
{/* Launch Card - Full Width with 3 column buttons - RE-INSERTED */}
|
|
109
108
|
<div className={`${styles.pathCard} ${styles.fullWidth}`}>
|
|
110
|
-
<div className={styles.cardHeader}
|
|
111
|
-
<
|
|
112
|
-
<img src="/img/academy/icons/Launch.svg" alt="" />
|
|
113
|
-
|
|
114
|
-
|
|
109
|
+
<div className={styles.cardHeader}>
|
|
110
|
+
<h3 className="card-title">
|
|
111
|
+
<img src="/img/academy/icons/Launch.svg" alt="" className={styles.titleIcon} />
|
|
112
|
+
Launch
|
|
113
|
+
</h3>
|
|
115
114
|
</div>
|
|
116
115
|
<div className={styles.cardContent}>
|
|
117
116
|
<div className={styles.buttonContainer}>
|
|
118
|
-
<a href="/academy/MasteryTrack/Launch/IntroductionToPackages" className="path-button">Intro
|
|
119
|
-
<a href="/academy/MasteryTrack/Launch/PublishYourProject" className="path-button">Publish
|
|
120
|
-
<a href="/academy/MasteryTrack/Launch/SetupEnvironment" className="path-button">Setup a
|
|
117
|
+
<a href="/academy/MasteryTrack/Launch/IntroductionToPackages" className="path-button">Intro to packages</a>
|
|
118
|
+
<a href="/academy/MasteryTrack/Launch/PublishYourProject" className="path-button">Publish your project</a>
|
|
119
|
+
<a href="/academy/MasteryTrack/Launch/SetupEnvironment" className="path-button">Setup a cloud environment</a>
|
|
121
120
|
</div>
|
|
122
121
|
</div>
|
|
123
122
|
</div>
|
|
@@ -125,38 +124,38 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
|
|
|
125
124
|
{/* Row 3: Cookbook, Use-cases, Advanced Topics */}
|
|
126
125
|
<div className={styles.pathCard}>
|
|
127
126
|
<div className={styles.cardHeader}>
|
|
128
|
-
<
|
|
129
|
-
<img src="/img/academy/icons/Cookbook.svg" alt="" />
|
|
130
|
-
|
|
131
|
-
|
|
127
|
+
<h3 className="card-title">
|
|
128
|
+
<img src="/img/academy/icons/Cookbook.svg" alt="" className={styles.titleIcon} />
|
|
129
|
+
Cookbook
|
|
130
|
+
</h3>
|
|
132
131
|
</div>
|
|
133
132
|
<div className={styles.cardContent}>
|
|
134
|
-
<a href="/academy/Cookbook" className="path-button">Powerhouse
|
|
133
|
+
<a href="/academy/Cookbook" className="path-button">Powerhouse recipes</a>
|
|
135
134
|
</div>
|
|
136
135
|
</div>
|
|
137
136
|
|
|
138
137
|
{/* Ensure this Use-cases Card block is clean */}
|
|
139
138
|
<div className={styles.pathCard}> {/* New Use-cases Card */}
|
|
140
139
|
<div className={styles.cardHeader}>
|
|
141
|
-
<
|
|
142
|
-
<img src="/img/academy/icons/Cookbook.svg" alt="Use-cases Icon" />
|
|
143
|
-
|
|
144
|
-
|
|
140
|
+
<h3 className="card-title">
|
|
141
|
+
<img src="/img/academy/icons/Cookbook.svg" alt="Use-cases Icon" className={styles.titleIcon} />
|
|
142
|
+
Use-cases
|
|
143
|
+
</h3>
|
|
145
144
|
</div>
|
|
146
145
|
<div className={styles.cardContent}>
|
|
147
|
-
<a href="/academy/ExampleUsecases/Chatroom/SetupBuilderEnvironment" className="path-button">Explore
|
|
146
|
+
<a href="/academy/ExampleUsecases/Chatroom/SetupBuilderEnvironment" className="path-button">Explore use-cases</a>
|
|
148
147
|
</div>
|
|
149
148
|
</div>
|
|
150
149
|
|
|
151
150
|
<div className={styles.pathCard}>
|
|
152
151
|
<div className={styles.cardHeader}>
|
|
153
|
-
<
|
|
154
|
-
<img src="/img/academy/icons/Advanced.svg" alt="" />
|
|
155
|
-
|
|
156
|
-
|
|
152
|
+
<h3 className="card-title">
|
|
153
|
+
<img src="/img/academy/icons/Advanced.svg" alt="" className={styles.titleIcon} />
|
|
154
|
+
Architecture
|
|
155
|
+
</h3>
|
|
157
156
|
</div>
|
|
158
157
|
<div className={styles.cardContent}>
|
|
159
|
-
<a href="/academy/Architecture/PowerhouseArchitecture" className="path-button">Learn
|
|
158
|
+
<a href="/academy/Architecture/PowerhouseArchitecture" className="path-button">Learn more</a>
|
|
160
159
|
</div>
|
|
161
160
|
</div>
|
|
162
161
|
</div>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
display: grid;
|
|
13
13
|
grid-template-columns: repeat(3, 1fr);
|
|
14
14
|
gap: 2rem;
|
|
15
|
-
max-width: 1200px;
|
|
16
|
-
margin: 0 auto;
|
|
17
|
-
padding: 2rem;
|
|
15
|
+
/* max-width: 1200px; */
|
|
16
|
+
/* margin: 0 auto; */
|
|
17
|
+
/* padding: 2rem; */
|
|
18
18
|
width: 100%;
|
|
19
19
|
box-sizing: border-box;
|
|
20
20
|
}
|
|
@@ -53,30 +53,23 @@
|
|
|
53
53
|
display: flex;
|
|
54
54
|
align-items: center;
|
|
55
55
|
margin-bottom: 1rem;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.cardIconWrapper {
|
|
59
|
-
display: flex;
|
|
60
|
-
align-items: center;
|
|
61
56
|
justify-content: center;
|
|
62
|
-
width: 20px;
|
|
63
|
-
height: 20px;
|
|
64
|
-
margin-right: 0.75rem;
|
|
65
57
|
}
|
|
66
58
|
|
|
67
59
|
:global(.card-title) {
|
|
68
60
|
display: flex;
|
|
69
|
-
align-items:
|
|
61
|
+
align-items: flex-start;
|
|
70
62
|
justify-content: flex-start;
|
|
71
63
|
margin: 0;
|
|
72
64
|
padding: 0;
|
|
73
65
|
font-size: 1.25rem;
|
|
74
66
|
font-weight: 600;
|
|
75
67
|
line-height: 1.2;
|
|
68
|
+
gap: 0rem;
|
|
76
69
|
}
|
|
77
70
|
|
|
78
71
|
:global(.card-title img) {
|
|
79
|
-
|
|
72
|
+
margin-top: 2px;
|
|
80
73
|
}
|
|
81
74
|
|
|
82
75
|
:global(.path-button) {
|
|
@@ -127,4 +120,4 @@
|
|
|
127
120
|
:global([data-theme='dark']) :global(.path-button:hover) {
|
|
128
121
|
background: var(--ifm-color-emphasis-200);
|
|
129
122
|
border-color: var(--ifm-color-emphasis-300);
|
|
130
|
-
}
|
|
123
|
+
}
|
package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/02-StandardDocumentModelWorkflow.md
CHANGED
|
@@ -7,7 +7,7 @@ Please start with the '**Get Started**' Chapter or '**Document Model Creation**'
|
|
|
7
7
|
:::
|
|
8
8
|
|
|
9
9
|
<details>
|
|
10
|
-
<summary>Key
|
|
10
|
+
<summary>Key commands that you'll use in this flow</summary>
|
|
11
11
|
|
|
12
12
|
- `pnpm install -g ph-cmd`: Installs the Powerhouse CLI globally.
|
|
13
13
|
- `ph init`: Initializes a new Powerhouse project or sets up the local environment.
|
|
@@ -22,7 +22,7 @@ Please start with the '**Get Started**' Chapter or '**Document Model Creation**'
|
|
|
22
22
|
|
|
23
23
|
</details>
|
|
24
24
|
|
|
25
|
-
## Phase 1: Setup and
|
|
25
|
+
## Phase 1: Setup and initialization
|
|
26
26
|
|
|
27
27
|
### 1.1. Install Powerhouse CLI
|
|
28
28
|
Ensure you have the Powerhouse Command Line Interface (`ph-cmd`) installed. This tool is crucial for managing your Powerhouse projects.
|
|
@@ -33,7 +33,7 @@ pnpm install -g ph-cmd
|
|
|
33
33
|
The [Prerequisites](/academy/MasteryTrack/BuilderEnvironment/Prerequisites) guide for detailed installation instructions for Node.js, pnpm, and Git if you haven't set them up yet.
|
|
34
34
|
:::
|
|
35
35
|
|
|
36
|
-
### 1.2. Initialize
|
|
36
|
+
### 1.2. Initialize your project environment
|
|
37
37
|
Before creating a specific project, or if you're setting up your environment for the first time to use Connect Studio Mode, initialize the Powerhouse environment. This command prepares your local setup, including a local Reactor configuration.
|
|
38
38
|
```bash
|
|
39
39
|
ph init
|
|
@@ -60,7 +60,7 @@ When installing or using the Powerhouse CLI commands you are able to make use of
|
|
|
60
60
|
Please be aware that these versions can contain bugs and experimental features that aren't fully tested.
|
|
61
61
|
</details>
|
|
62
62
|
|
|
63
|
-
### 1.3. Launch Connect in
|
|
63
|
+
### 1.3. Launch Connect in studio mode
|
|
64
64
|
Connect is your local development hub. Running it in Studio Mode spins up a local instance with a local Reactor, allowing you to define, build, and test document models.
|
|
65
65
|
```bash
|
|
66
66
|
ph connect
|
|
@@ -71,14 +71,14 @@ This command typically opens Connect in your browser at `http://localhost:3000/`
|
|
|
71
71
|
**Powerhouse Reactors** are essential nodes in the Powerhouse network. They store documents, manage versions, resolve conflicts, and verify document operation histories by rerunning them. Reactors can be configured for local storage (as in Studio Mode), centralized cloud storage, or decentralized storage networks.
|
|
72
72
|
:::
|
|
73
73
|
|
|
74
|
-
## Phase 2: Document
|
|
74
|
+
## Phase 2: Document model specification
|
|
75
75
|
|
|
76
|
-
### 2.1. Define the
|
|
76
|
+
### 2.1. Define the document model schema
|
|
77
77
|
Within Connect Studio Mode, navigate to the Document Model Editor. Here, you'll specify the structure of your document model using GraphQL Schema Definition Language (SDL).
|
|
78
78
|
- **State Schema:** Describes the data fields and types within your document (e.g., `ToDoItem` with `id`, `text`, `checked` fields).
|
|
79
79
|
- This schema is the blueprint for your document model's data.
|
|
80
80
|
|
|
81
|
-
### 2.2. Define
|
|
81
|
+
### 2.2. Define document model operations
|
|
82
82
|
In the same editor, specify the operations (state transitions) for your document model. These are also defined using GraphQL, specifically input types.
|
|
83
83
|
- **Operations Schema:** Specifies the actions that can be performed on the document (e.g., `AddTodoItemInput`, `UpdateTodoItemInput`, `DeleteTodoItemInput`).
|
|
84
84
|
- Each input type details the parameters required for an operation.
|
|
@@ -87,12 +87,12 @@ In the same editor, specify the operations (state transitions) for your document
|
|
|
87
87
|
* Use GraphQL input types for operation parameters.
|
|
88
88
|
* Ensure operations reflect user intent for a clean API.
|
|
89
89
|
|
|
90
|
-
### 2.3. Export
|
|
90
|
+
### 2.3. Export document model specification
|
|
91
91
|
Once your schema and operations are defined in Connect, export the specification. This will download a `.phdm.zip` file (e.g., `YourModelName.phdm.zip`). Save this file in the root of your Powerhouse project directory.
|
|
92
92
|
|
|
93
|
-
## Phase 3: Implementation and
|
|
93
|
+
## Phase 3: Implementation and testing
|
|
94
94
|
|
|
95
|
-
### 3.1. Generate
|
|
95
|
+
### 3.1. Generate scaffolding code
|
|
96
96
|
Use the Powerhouse CLI to process the exported `.phdm.zip` file and generate the necessary boilerplate code for your document model.
|
|
97
97
|
```bash
|
|
98
98
|
ph generate YourModelName.phdm.zip
|
|
@@ -103,13 +103,13 @@ This command creates a new directory under `document-models/YourModelName/` cont
|
|
|
103
103
|
- A `gen/` folder with autogenerated TypeScript types, action creators, and utility functions based on your schema.
|
|
104
104
|
- A `src/` folder where you'll implement your custom logic (reducers, utils).
|
|
105
105
|
|
|
106
|
-
### 3.2. Implement
|
|
106
|
+
### 3.2. Implement reducer logic
|
|
107
107
|
Reducers are pure functions that implement the state transition logic for each operation defined in your schema. Navigate to `document-models/YourModelName/src/reducers/to-do-list.ts` (or similar, based on your model name).
|
|
108
108
|
- Implement the functions for each operation (e.g., `addTodoItemOperation`, `updateTodoItemOperation`).
|
|
109
109
|
- These functions take the current state and an action (containing input data) and return the new state.
|
|
110
110
|
- Powerhouse handles immutability behind the scenes.
|
|
111
111
|
|
|
112
|
-
### 3.3. Write
|
|
112
|
+
### 3.3. Write unit tests for reducers
|
|
113
113
|
It's crucial to test your reducer logic. Write unit tests in the `document-models/YourModelName/src/reducers/tests/` directory.
|
|
114
114
|
- Verify that each operation correctly transforms the document state.
|
|
115
115
|
- Use the auto-generated action creators from the `gen/` folder to create operation actions for your tests.
|
|
@@ -118,7 +118,7 @@ Run tests using:
|
|
|
118
118
|
pnpm run test
|
|
119
119
|
```
|
|
120
120
|
|
|
121
|
-
### 3.4. Implement the
|
|
121
|
+
### 3.4. Implement the document editor
|
|
122
122
|
A document editor provides the user interface for interacting with your document model in Connect. Generate an editor template:
|
|
123
123
|
```bash
|
|
124
124
|
ph generate --editor YourModelName --document-types powerhouse/YourModelName
|
|
@@ -132,25 +132,25 @@ This creates a template file, typically at `editors/your-model-name/editor.tsx`.
|
|
|
132
132
|
- Utilize components from `@powerhousedao/document-engineering` for consistency and rapid development. Learn more at [Document-Engineering](/academy/ComponentLibrary/DocumentEngineering)
|
|
133
133
|
|
|
134
134
|
|
|
135
|
-
### 3.5. Test the
|
|
135
|
+
### 3.5. Test the editor
|
|
136
136
|
Run Connect locally to see your editor in action:
|
|
137
137
|
```bash
|
|
138
138
|
ph connect
|
|
139
139
|
```
|
|
140
140
|
Create a new document of your defined type. Interact with your editor, test all functionalities, and ensure it correctly dispatches actions to the reducers and reflects state changes.
|
|
141
141
|
|
|
142
|
-
## Phase 4: Packaging and
|
|
142
|
+
## Phase 4: Packaging and publishing
|
|
143
143
|
|
|
144
144
|
Once your document model and editor are implemented and tested, you can package them for distribution. A Powerhouse Package is a modular unit that can group document models, editors, scripts, and processors.
|
|
145
145
|
|
|
146
|
-
### 4.1. Prepare
|
|
146
|
+
### 4.1. Prepare project for packaging
|
|
147
147
|
If you didn't initialize your project with `ph init` intending it as a package, ensure your project structure is set up correctly. The `ph init` command is designed to create this structure.
|
|
148
148
|
- `document-models/`: Contains your document models.
|
|
149
149
|
- `editors/`: Contains your editor components.
|
|
150
150
|
- `src/`: Often used for shared utilities or can be part of the model/editor structure.
|
|
151
151
|
- (Optional) `processors/`, `scripts/` for advanced functionalities.
|
|
152
152
|
|
|
153
|
-
### 4.2. Specify
|
|
153
|
+
### 4.2. Specify package details in `package.json`
|
|
154
154
|
Navigate to the `package.json` file in your project root. This file is crucial for NPM publishing.
|
|
155
155
|
- **`name`**: Follow a scoped naming convention, e.g., `@your-org-ph/your-package-name`. The `-ph` suffix helps identify Powerhouse ecosystem packages.
|
|
156
156
|
- **`version`**: Use semantic versioning (e.g., `1.0.0`).
|
|
@@ -184,7 +184,7 @@ Example `package.json` snippet:
|
|
|
184
184
|
}
|
|
185
185
|
```
|
|
186
186
|
|
|
187
|
-
### 4.3. Add a
|
|
187
|
+
### 4.3. Add a manifest file (`manifest.json`)
|
|
188
188
|
Create a `manifest.json` file in your project root. This file describes your package's contents (document models, editors) and helps host applications like Connect understand and integrate your package.
|
|
189
189
|
|
|
190
190
|
Example `manifest.json`:
|
|
@@ -214,14 +214,14 @@ Example `manifest.json`:
|
|
|
214
214
|
```
|
|
215
215
|
Update your project's main `index.js` or entry point to export your document models and editors so they can be discovered by Powerhouse applications.
|
|
216
216
|
|
|
217
|
-
### 4.4. Build
|
|
217
|
+
### 4.4. Build your project
|
|
218
218
|
Compile and optimize your project for production:
|
|
219
219
|
```bash
|
|
220
220
|
pnpm build
|
|
221
221
|
```
|
|
222
222
|
This command typically creates a `dist/` or `build/` directory with the compiled assets. Ensure your `package.json`'s `files` array includes this directory and other necessary assets like `manifest.json`, `document-models`, and `editors` if they are not part of the build output but need to be in the package.
|
|
223
223
|
|
|
224
|
-
### 4.5. Version
|
|
224
|
+
### 4.5. Version control
|
|
225
225
|
Store your project in a Git repository for versioning and collaboration.
|
|
226
226
|
```bash
|
|
227
227
|
git init
|
|
@@ -241,13 +241,13 @@ To share your package with others or deploy it to different environments, publis
|
|
|
241
241
|
```
|
|
242
242
|
Follow the prompts in your terminal or browser.
|
|
243
243
|
|
|
244
|
-
2. **Publish the
|
|
244
|
+
2. **Publish the package:**
|
|
245
245
|
```bash
|
|
246
246
|
npm publish
|
|
247
247
|
```
|
|
248
248
|
If your package is scoped and public, NPM will use the `publishConfig` from your `package.json`. If not set there, you might need `npm publish --access public`.
|
|
249
249
|
|
|
250
|
-
### 4.7. Using
|
|
250
|
+
### 4.7. Using your published package
|
|
251
251
|
Once published, your package can be installed and used in any Powerhouse environment (like another local Connect instance or a deployed Reactor setup).
|
|
252
252
|
```bash
|
|
253
253
|
ph install @your-org-ph/your-package-name
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
# Powerhouse
|
|
1
|
+
# Powerhouse builder tooling
|
|
2
2
|
|
|
3
3
|
This page provides an overview of all the builder tooling offered by the Powerhouse ecosystem.
|
|
4
4
|
This list will be maintained and updated as our toolkit grows.
|
|
5
5
|
|
|
6
|
-
## Powerhouse
|
|
6
|
+
## Powerhouse command line interface
|
|
7
7
|
___
|
|
8
8
|
|
|
9
9
|
### Installing the Powerhouse CLI
|
|
@@ -49,7 +49,7 @@ Please be aware that these versions can contain bugs and experimental features t
|
|
|
49
49
|
|
|
50
50
|
<summary> How to clean your system of the Powerhouse CLI?</summary>
|
|
51
51
|
|
|
52
|
-
### Cleaning and
|
|
52
|
+
### Cleaning and updating ph-cmd
|
|
53
53
|
|
|
54
54
|
If you need to perform a clean reinstallation of the Powerhouse CLI (`ph-cmd`), follow these steps:
|
|
55
55
|
|
|
@@ -83,7 +83,7 @@ This process ensures a clean slate by removing both the CLI tool and its configu
|
|
|
83
83
|
|
|
84
84
|
</details>
|
|
85
85
|
|
|
86
|
-
### The
|
|
86
|
+
### The use command
|
|
87
87
|
The use command allows you to switch between different environments for your Powerhouse project dependencies.
|
|
88
88
|
|
|
89
89
|
```bash
|
|
@@ -117,7 +117,7 @@ ph use local /path/to/local/packages
|
|
|
117
117
|
ph use latest --package-manager pnpm
|
|
118
118
|
```
|
|
119
119
|
|
|
120
|
-
### The
|
|
120
|
+
### The update command
|
|
121
121
|
The update command allows you to update your Powerhouse dependencies to their latest versions based on the version ranges specified in your package.json.
|
|
122
122
|
|
|
123
123
|
```bash
|
|
@@ -145,7 +145,7 @@ ph update --force prod
|
|
|
145
145
|
ph update --package-manager pnpm
|
|
146
146
|
```
|
|
147
147
|
|
|
148
|
-
## **Key
|
|
148
|
+
## **Key differences**
|
|
149
149
|
|
|
150
150
|
### **Use command**
|
|
151
151
|
- For switching between different **environments**.
|
|
@@ -172,7 +172,7 @@ The boilerplate includes essential commands with NPM/PNPM scripts for:
|
|
|
172
172
|
- Building
|
|
173
173
|
- Testing
|
|
174
174
|
|
|
175
|
-
## Design
|
|
175
|
+
## Design system
|
|
176
176
|
___
|
|
177
177
|
The Powerhouse Design System is a collection of reusable front-end components based on GraphQL scalars, including custom scalars specific to the web3 ecosystem. It provides:
|
|
178
178
|
- Consistent UI components across Powerhouse applications
|
|
@@ -181,7 +181,7 @@ The Powerhouse Design System is a collection of reusable front-end components ba
|
|
|
181
181
|
|
|
182
182
|
We cover some of these topics in our design system documentation. Read more about the [design system here](/academy/ComponentLibrary/DocumentEngineering)
|
|
183
183
|
|
|
184
|
-
## Reactor
|
|
184
|
+
## Reactor libraries
|
|
185
185
|
___
|
|
186
186
|
Reactors are the nodes in the Powerhouse network that handle document storage, conflict resolution, and operation verification.
|
|
187
187
|
The Reactor Libraries include:
|
|
@@ -196,32 +196,32 @@ Handles client-side interactions
|
|
|
196
196
|
### Local
|
|
197
197
|
Manages local storage and offline functionality
|
|
198
198
|
|
|
199
|
-
### Drive
|
|
199
|
+
### Drive app
|
|
200
200
|
Handles document organization and storage management, but can also be customized to offer specific functionality, categorization, or tailored interfaces for your documents.
|
|
201
201
|
|
|
202
|
-
## Code
|
|
202
|
+
## Code generators
|
|
203
203
|
___
|
|
204
204
|
Powerhouse provides several code generation tools to streamline development:
|
|
205
205
|
|
|
206
|
-
### Document
|
|
206
|
+
### Document model scaffolding
|
|
207
207
|
Generates the basic structure for new Document Models with the command `ph init` based on the boilerplate.
|
|
208
208
|
|
|
209
|
-
### Editor
|
|
209
|
+
### Editor generator
|
|
210
210
|
Creates template code for Document Model editors with the command `ph generate --editor <name> --document-types <documenttype>`
|
|
211
211
|
|
|
212
|
-
### Drive
|
|
212
|
+
### Drive editor generator
|
|
213
213
|
Builds scaffolding for custom Drive interfaces with the command `ph generate --drive-editor <name>`
|
|
214
214
|
|
|
215
|
-
### Subgraph
|
|
215
|
+
### Subgraph generator
|
|
216
216
|
Creates GraphQL subgraph templates for data access automatically upon `ph reactor`
|
|
217
217
|
|
|
218
|
-
### Processor
|
|
218
|
+
### Processor generator
|
|
219
219
|
Generates processor templates for event handling automatically upon `ph reactor`
|
|
220
220
|
|
|
221
|
-
### Analytics
|
|
221
|
+
### Analytics processor generator
|
|
222
222
|
Creates specialized processors for analytics tracking
|
|
223
223
|
|
|
224
|
-
## Analytics
|
|
224
|
+
## Analytics engine
|
|
225
225
|
___
|
|
226
226
|
The Analytics Engine is a system that allows tracking and analyzing operations and state changes on Document Models. Features include:
|
|
227
227
|
- Custom dashboard and report generation
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
# What is a
|
|
1
|
+
# What is a document model?
|
|
2
2
|
|
|
3
3
|
:::tip
|
|
4
|
-
This chapter on **Document Model Creation** will help you with an in depth practicial understanding while building an **advanced
|
|
4
|
+
This chapter on **Document Model Creation** will help you with an in depth practicial understanding while building an **advanced to-do list** document model.
|
|
5
5
|
Although not required, if you have completed the 'Get Started' tutorial you will revisit familiar topics and can update your existing document model.
|
|
6
6
|
:::
|
|
7
7
|
|
|
@@ -19,7 +19,7 @@ A Document Model can be understood as:
|
|
|
19
19
|
|
|
20
20
|
### **How does a document model function?**
|
|
21
21
|
|
|
22
|
-
#### **Structure and
|
|
22
|
+
#### **Structure and composition**
|
|
23
23
|
|
|
24
24
|
Each document model consists of three key components:
|
|
25
25
|
|
|
@@ -31,11 +31,11 @@ Document models leverage **event sourcing, CQRS (Command Query Responsibility Se
|
|
|
31
31
|
|
|
32
32
|
---
|
|
33
33
|
|
|
34
|
-
## **1. Structure of a
|
|
34
|
+
## **1. Structure of a document model**
|
|
35
35
|
|
|
36
36
|
A document model consists of the following key components:
|
|
37
37
|
|
|
38
|
-
### **1.1 State
|
|
38
|
+
### **1.1 State schema**
|
|
39
39
|
|
|
40
40
|
The **state schema** defines the structure of the document, including its fields and data types. It serves as a blueprint for how data is stored and validated.
|
|
41
41
|
|
|
@@ -60,7 +60,7 @@ type LineItem {
|
|
|
60
60
|
}
|
|
61
61
|
```
|
|
62
62
|
|
|
63
|
-
### **State
|
|
63
|
+
### **State schema features:**
|
|
64
64
|
|
|
65
65
|
- Uses **GraphQL-like definitions** for a **clear, structured schema**.
|
|
66
66
|
- Supports **custom scalar types** like `OID`, `Currency`, and `DateTime`. Or other Web3 specific scalars
|
|
@@ -70,7 +70,7 @@ The state schema acts as a **template** for document instances. Every new invoic
|
|
|
70
70
|
|
|
71
71
|
---
|
|
72
72
|
|
|
73
|
-
### **1.2 Document
|
|
73
|
+
### **1.2 Document operations**
|
|
74
74
|
|
|
75
75
|
Document models are **append-only**, meaning changes are not made directly to the document state. Instead, **document operations** define valid state transitions.
|
|
76
76
|
|
|
@@ -99,7 +99,7 @@ Instead, a new event is appended to the document history.
|
|
|
99
99
|
|
|
100
100
|
---
|
|
101
101
|
|
|
102
|
-
### **1.3 Event
|
|
102
|
+
### **1.3 Event history (append-only log)**
|
|
103
103
|
|
|
104
104
|
Every operation applied to a document is **stored as an event** in an append-only log.
|
|
105
105
|
|
|
@@ -112,7 +112,7 @@ Every operation applied to a document is **stored as an event** in an append-onl
|
|
|
112
112
|
{ "timestamp": 1700000200, "operation": "MARK_AS_PAID", "data": {}
|
|
113
113
|
```
|
|
114
114
|
|
|
115
|
-
### **Event
|
|
115
|
+
### **Event history benefits:**
|
|
116
116
|
|
|
117
117
|
- Provides a **transparent audit trail** of changes.
|
|
118
118
|
- Enables **time travel debugging** by reconstructing past states.
|
|
@@ -120,11 +120,11 @@ Every operation applied to a document is **stored as an event** in an append-onl
|
|
|
120
120
|
|
|
121
121
|
---
|
|
122
122
|
|
|
123
|
-
## **2. How
|
|
123
|
+
## **2. How document models work technically**
|
|
124
124
|
|
|
125
125
|
Document models in Powerhouse rely on **event-driven architecture, event sourcing, and CQRS principles**. Here's a step-by-step breakdown:
|
|
126
126
|
|
|
127
|
-
### **2.1 Document
|
|
127
|
+
### **2.1 Document creation**
|
|
128
128
|
|
|
129
129
|
1. A user (or system) **submits an operation** to create a new document.
|
|
130
130
|
2. The document model **validates** the input data against the state schema.
|
|
@@ -142,7 +142,7 @@ Document models in Powerhouse rely on **event-driven architecture, event sourcin
|
|
|
142
142
|
|
|
143
143
|
---
|
|
144
144
|
|
|
145
|
-
### **2.2 Document
|
|
145
|
+
### **2.2 Document modification**
|
|
146
146
|
|
|
147
147
|
1. A user submits an **operation** (e.g., `ADD_LINE_ITEM`).
|
|
148
148
|
2. The **event is appended** to the document history.
|
|
@@ -163,7 +163,7 @@ Since changes are **not applied directly**, this model is **highly scalable and
|
|
|
163
163
|
|
|
164
164
|
---
|
|
165
165
|
|
|
166
|
-
### **2.3 Querying
|
|
166
|
+
### **2.3 Querying document models**
|
|
167
167
|
|
|
168
168
|
Powerhouse uses **GraphQL queries** to fetch document states efficiently. Because documents store structured data, developers can instantly query:
|
|
169
169
|
|
|
@@ -200,6 +200,6 @@ Document Models offer a range of features that can be leveraged to create sophis
|
|
|
200
200
|
|
|
201
201
|
Document Models are a powerful primitive within the Powerhouse vision, offering a flexible, structured, and efficient way to manage business logic and data.
|
|
202
202
|
|
|
203
|
-
### Up
|
|
203
|
+
### Up next: How to build a document model
|
|
204
204
|
|
|
205
|
-
In the next chapters, we'll teach you how to build a
|
|
205
|
+
In the next chapters, we'll teach you how to build a To-do List document model while explaining all of the theory that is involved.
|