Skip to content

chore: bump version to 6.1.0 #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cheefbird merged 3 commits into from
Mar 23, 2026
Merged

chore: bump version to 6.1.0 #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4a5d372
chore: bump version to 6.1.0
cheefbird Mar 23, 2026
79dfc06
chore: review and cleanup the pkg readme
cheefbird Mar 23, 2026
3570334
fix: format
cheefbird Mar 23, 2026
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
51 changes: 25 additions & 26 deletions projects/limble-tree/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,30 +34,29 @@ A basic tree is very easy to set up.

### Step 1

Import the limble-tree module into your own Angular module or standalone component.
Import the limble-tree module into your standalone component or Angular module.

```typescript
import { NgModule } from "@angular/core";
import { Component } from "@angular/core";
import { LimbleTreeModule } from "@limble/limble-tree";

@NgModule({
imports: [LimbleTreeModule]
@Component({
imports: [LimbleTreeModule],
template: `<div></div>`
})
export class AppModule {}
export class MyComponent {}
```

or
or, if using NgModules:

```typescript
import { Component } from "@angular/core";
import { NgModule } from "@angular/core";
import { LimbleTreeModule } from "@limble/limble-tree";

@Component({
standalone: true,
imports: [LimbleTreeModule],
template: `<div></div>`
@NgModule({
imports: [LimbleTreeModule]
})
export class MyComponent {}
export class AppModule {}
```

### Step 2
Expand All @@ -81,7 +80,7 @@ Use `@ViewChild` to get the `ViewContainerRef` of that element.
Inject TreeService into your component.

```typescript
constructor(private readonly treeService: TreeService) {}
private readonly treeService = inject(TreeService);
```

### Step 5
Expand All @@ -105,7 +104,7 @@ Render components in the tree by calling `grow()`.
const branch1 = this.tree.grow(MyTreeContentComponent);
const branch2 = this.tree.grow(MyTreeContentComponent);
const branch3 = this.tree.grow(MyTreeContentComponent);
const branch3a = branch3.grow(MyTreContentComponent);
const branch3a = branch3.grow(MyTreeContentComponent);
Comment thread
cheefbird marked this conversation as resolved.
```

### Step 7
Expand All @@ -117,13 +116,13 @@ import {
Component,
AfterViewInit,
ViewChild,
ViewContainerRef
ViewContainerRef,
inject
} from "@angular/core";
import { LimbleTreeModule, TreeRoot } from "@limble/limble-tree";
import { LimbleTreeModule, TreeRoot, TreeService } from "@limble/limble-tree";
import { MyTreeContentComponent } from "somewhere in your filesystem";

@Component({
standalone: true,
imports: [LimbleTreeModule],
template: `<div #treeContainer></div>`
})
Expand All @@ -133,7 +132,7 @@ export class MyComponent implements AfterViewInit {

protected tree?: TreeRoot<MyTreeContentComponent>;

public constructor(private readonly treeService: TreeService) {}
private readonly treeService = inject(TreeService);

public ngAfterViewInit(): void {
this.tree = this.treeService.createEmptyTree<MyTreeContentComponent>(
Expand All @@ -144,7 +143,7 @@ export class MyComponent implements AfterViewInit {
const branch1 = this.tree.grow(MyTreeContentComponent);
const branch2 = this.tree.grow(MyTreeContentComponent);
const branch3 = this.tree.grow(MyTreeContentComponent);
const branch3a = branch3.grow(MyTreContentComponent);
const branch3a = branch3.grow(MyTreeContentComponent);
}
}
```
Expand Down Expand Up @@ -215,7 +214,7 @@ Tree branches which have descendant branches can be collapsed, temporarily remov
To collapse a branch, simply inject the TreeCollapseService into your component and call `collapse()`, passing in the branch to be collapsed. To restore the hidden branches, call `expand()`, passing in the same branch that was passed to `collapse()`

```typescript
constructor(private readonly collapseService: TreeCollapseService) {}
private readonly collapseService = inject(TreeCollapseService);

public ngAfterViewInit(): void {
this.tree = this.treeService.createEmptyTree<MyTreeContentComponent>(
Expand All @@ -226,7 +225,7 @@ public ngAfterViewInit(): void {
const branch1 = this.tree.grow(MyTreeContentComponent);
const branch2 = this.tree.grow(MyTreeContentComponent);
const branch3 = this.tree.grow(MyTreeContentComponent);
const branch3a = branch3.grow(MyTreContentComponent);
const branch3a = branch3.grow(MyTreeContentComponent);

//Hides the fourth branch
this.collapseService.collapse(branch3);
Expand All @@ -241,7 +240,7 @@ public ngAfterViewInit(): void {
A branch can be configured to be collapsed by default, which means that any children grown onto it will not be visible until `expand()` is called.

```typescript
constructor(private readonly collapseService: TreeCollapseService) {}
private readonly collapseService = inject(TreeCollapseService);

public ngAfterViewInit(): void {
this.tree = this.treeService.createEmptyTree<MyTreeContentComponent>(
Expand All @@ -252,7 +251,7 @@ public ngAfterViewInit(): void {
const branch1 = this.tree.grow(MyTreeContentComponent);
const branch2 = this.tree.grow(MyTreeContentComponent);
const branch3 = this.tree.grow(MyTreeContentComponent, {defaultCollapsed: true});
const branch3a = branch3.grow(MyTreContentComponent); // this branch will be created but not rendered
const branch3a = branch3.grow(MyTreeContentComponent); // this branch will be created but not rendered

//renders the fourth branch after 2 seconds have passed.
setTimeout(() => {
Expand All @@ -277,7 +276,7 @@ public ngAfterViewInit(): void {
const branch1 = this.tree1.grow(MyTreeContentComponent);
const branch2 = this.tree1.grow(MyTreeContentComponent);
const branch3 = this.tree1.grow(MyTreeContentComponent);
const branch3a = branch3.grow(MyTreContentComponent);
const branch3a = branch3.grow(MyTreeContentComponent);

setTimeout(() => {
//moves branch1 so it is now the second child of branch3
Expand Down Expand Up @@ -311,7 +310,7 @@ public ngAfterViewInit(): void {
const branch1 = this.tree.grow(MyTreeContentComponent);
const branch2 = this.tree.grow(MyTreeContentComponent);
const branch3 = this.tree.grow(MyTreeContentComponent);
const branch3a = branch3.grow(MyTreContentComponent);
const branch3a = branch3.grow(MyTreeContentComponent);

//removes branch1 from the tree after 2 seconds
setTimeout(() => {
Expand Down Expand Up @@ -425,7 +424,7 @@ public ngAfterViewInit(): void {
const branch2a = branch2.grow(MyTreeContentComponent);
const branch2b = branch2.grow(MyTreeContentComponent);
const branch2a1 = branch2a.grow(MyTreeContentComponent);
const branch2a1 = branch2a.grow(MyTreeContentComponent);
const branch2a2 = branch2a.grow(MyTreeContentComponent);
Comment thread
cheefbird marked this conversation as resolved.

//All of these expressions are true
assert(branch2b.parent() === branch2);
Expand Down
2 changes: 1 addition & 1 deletion projects/limble-tree/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@limble/limble-tree",
"version": "6.0.0",
"version": "6.1.0",
"peerDependencies": {
"@angular/common": "^19.0.0",
"@angular/core": "^19.0.0",
Expand Down
Loading