Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions .github/workflows/docs.workflow.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
name: Documentation

on:
# Trigger the workflow on push,
# but only for the main and develop branches
push:
branches:
- main
- develop

jobs:
build:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v1
- name: Upload Documentation to Wiki
uses: SwiftDocOrg/github-wiki-publish-action@rsync
with:
path: "doc/"
env:
GH_PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
36 changes: 36 additions & 0 deletions doc/Home.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# How the angular-component-extractor works

When the extension is triggered, then it first reads the currently selected content of the html file.
After ensuring that all requirements for a successful execution are met (see `Startup Requirements`), the following steps are processed:

1. Extract interpolation
2. Create one `update change` for each interpolation which adds a `@Input` to the new component ts
3. Create one `replace change` for the new component html, which inserts the selection
4. Provide the replacement for the selected html
5. Apply changes

![General workflow of the extension](./images/general-flow.png)

# Startup Requirements

- Angular Language Service is available
- The selected range has no errors (Diagnostic messages)

# Architecture goal

The goal of the application architecture is to be decoupled it from vscode whenever possible.
Hence, the `VSCodeAbstraction` namespace was created to decouple it via interfaces.
This approach allows us to test the code without actually starting vscode.
The actual logic is within the `src/angular` directory while the others contain either cross functional or vscode dependent code.

# Concept behind `Changes`

The idea behind `Changes` (`src/types/index.ts > Changes`) is to define what needs to be done in order to extract the component, but without actually doing it.
This enables us to test it freely without mocking anything, as we only need to provide the selection, directory and component name to get changes.

But there are changes which are dynamic. For example when extending the generated component ts with the `@Input` properties. Thats why there are two types of changes.

1. update file changes
2. replace file changes

As the names imply, one changes the content of a file, while the other replaces it.
Binary file added doc/images/general-flow.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.