Workflow AngularTemplate

Workflow: Building a Template from angularTemp

Step-by-step guide to create a production-ready template by importing and customizing the angularTemp grammar.

---

Overview

This workflow teaches you how to:

1. Access the Crodox app
2. Import the pre-built template from angularTemp
3. Study the template structure and patterns
4. Customize the template for your needs
5. Build and test a workbench with real code

Start here: https://crodox-app.com/home

---

Prerequisites

• Access to Crodox app at https://crodox-app.com/home
• GitHub account (for authentication)
• Familiarity with Crodox basics (optionally, complete Workflow-SimpleDemo first)

---

Step 1 - Sign In to Crodox

1. Open https://crodox-app.com/home in your browser
2. Enter your email and request a verification code
3. Check your email and enter the code
4. Authorize the Crodox GitHub app
5. Complete your profile setup

You are now logged into Crodox.

---

Step 2 - Create an Empty Template

1. Click the Template Editor icon (<>) in the left sidebar
2. Click the Templates tab
3. Enter a name for your template (e.g., AngularExtractor_v1)
4. Click the + button to create it

The template editor opens with a blank grammar field.

---

Step 3 - Import the angularTemp Grammar

1. In the template editor, click the Template menu (top-left)
2. Select Import Template from Repository
3. A dropdown appears showing available repositories
4. Select angularTemp (github)
5. Click Import

The .crodox.json grammar from angularTemp is now loaded into your editor.

You now have:

• ✅ A working grammar for Angular component extraction
• ✅ A reference for TypeScript/HTML pattern matching
• ✅ Patch definitions configured for re-integration

---

Step 4 - Study the Imported Grammar

The grammar editor displays the complete angularTemp template structure:

Key sections to review:

1. File Type Patterns – <~ file.ts ~>, <~ file.html ~>, etc.

   • Shows which file types the grammar targets

2. Component Definitions – <: component :>, <: service :>, <: module :>

   • Describes what Angular artifacts are recognized

3. Hierarchy & Children – <- provider, directive ->

   • Shows how components relate to each other

4. Visible Objects – Named with <<name>> and <<selector>>

   • These become selectable in the workbench UI

For learning: Don't modify this grammar yet. Just read through and understand the patterns.

---

Step 5 - Save the Imported Template

1. Click Save to store your imported template
2. Crodox validates the grammar (should be ✅ valid)
3. Your template is now saved and ready to use

---

Step 6 - Link a Repository for Testing

1. In the Project Explorer (center-left), open the Repository dropdown
2. You should see angularTemp in the list
3. Select angularTemp (github)

The project explorer now shows the Angular source code from angularTemp.

---

Step 7 - Load a Source File

1. Expand the folder tree in the project explorer:
   • Click src to expand the source directory
   • Click app to expand the application folder
   • Navigate to a component file (e.g., dashboard folder)
   • Click on a .ts or .component.ts file

The file loads in the preview panel, and your grammar runs against it.

---

Step 8 - Review Extracted Components

In the Trial Extraction Field (center panel), review what the grammar extracted:

You should see:

• Component definitions with IDs
• Service providers
• Module registrations
• Function and variable declarations

Understanding the results:

• ✅ Many components extracted → Grammar successfully parses Angular patterns
• ✅ Hierarchy is correct → Parent/child relationships match your code structure
• ❌ Missing components → Grammar may need refinement

---

Step 9 - Explore the Patch Maker

1. In the Patch Maker (center-right panel), open the Template Repository dropdown
2. Select angularTemp (github)
3. Patch conditions load below, showing how modifications are applied

Key information:

• Conditions – Rules that trigger specific transformations
• Modifications – Code changes applied to matched components
• Preview – The right panel shows the exact diff that would be generated

This is how angularTemp re-integrates extracted components into a target project.

---

Step 10 - Customize for Your Project (Optional)

If you want to modify the template for your own Angular project:

1. Click the Grammar Editor
2. Identify the patterns you want to change
3. Update <: component :> or other definitions as needed
4. Click Save to validate
5. Select your own repository in the Project Explorer to test

Common customizations:

• Add support for new artifact types (e.g., <: interceptor :>)
• Change file patterns to match your naming convention
• Refine visibility rules to highlight critical components

---

Step 11 - Build a Workbench

Once your template is working:

1. Click the Workbench icon (circular arrow) in the left sidebar
2. Enter a workbench name (e.g., AngularTemp_Analysis_v1)
3. Select your template from the dropdown
4. Choose angularTemp as the source repository (or your own Angular project)
5. Select the files and components you want to analyze
6. Click Create Workbench

Crodox analyzes the selected code and generates patches for re-integration.

---

Step 12 - Review Results

In the workbench:

1. Extracted Components – Browse all identified components
2. Patch Preview – See what code changes would be generated
3. Create Pull Request – Generate a PR with the patches
4. Codespace – Edit the workbench in a browser-based VS Code environment

---

Next Steps

• Test on Your Project – Replace angularTemp with your own Angular repository
• Extend the Template – Add custom patterns and artifact types
• Workflow-End-to-End – See the full journey from template to PR
• Template-Editor – Full documentation on editor features

---

Tips & Best Practices

• Don't modify the original – Export the angularTemp template before major changes
• Test incrementally – After each change, reload a test file to see the impact
• Use the preview – The right panel shows exactly what Crodox sees in your code
• Document your changes – Add comments to your grammar explaining custom patterns

---

Troubleshooting

Issue	Solution
Import fails	Ensure GitHub access is authorized and angularTemp is visible
Grammar validation error	Check the error message; the imported grammar should always be valid
No components extracted	Select a TypeScript file (.ts) not a text file; angularTemp targets TypeScript
Workbench creation fails	Ensure you have at least one template and one repository selected

---

Start building: https://crodox-app.com/home

Template Repository: https://github.com/crodox-app/angularTemp