DEV Community: negue

Senstate - Updates, C#-Client and a future look

negue — Thu, 11 Jun 2020 21:25:06 +0000

Finally after some months I worked a bit on Senstate again. I had some features already "done", but only some days ago I merged the PR. 😄

🎊 Senstate v0.3 🎉

New features:

Group Watchers

List Watchers (instead of a masonry-grid, still need some more stying, ideas? thoughts?)
You can add "difference"-View to see the change of the previous value

Errors can be searched on multiple sites, opens a new tab:
- DuckDuckGo
- Github
- Google
- StackOverflow

Also see CHANGELOG.md

🚧 Whats next?

In-Web-App-Overlay

Began working on an overlay to use inside your Web-App.

This will be done with Angular Elements (which can be used even without Angular).

Only the "target" connection will be changed (instead of the Hub-Connection), everything else will stay the same.

Repo / wip-changes will be pushed soon

Now finally working on the C# client:

My goal is to create a library that could be used with, initial tests worked with:

.Net Standard (I hope this would be all possible targets?)
Unity
Blazor Server / WebAssembly

The Library(ies) will be splitted into:

The main logic, watchers/logger
separated WebSockets implementation
separated Json implementation

So that way every possible Target / Platform can have their own Json/WebSocket implementation.

Repo

I'll post an article on how to use it, once the first version is published

Misc

Try if react-native "just" works ?
Save Dashboard settings to localStorage
Extend the Dashboard (all the time, suggestions welcomed)
Add instructions to the Dashboard itself (if no app is connected) - maybe just show the markdown-file of the client-library? - ideas?
Creating an example repo for all possible libraries / targets
Bug fixes

Feedback

If there are any ideas / feature requests / issues / use-cases, please tell me :)

Working with graph structures

negue — Mon, 18 May 2020 20:21:24 +0000

Preamble: I'm not that experienced in graph-theory or like getting the shortest path to a node. :) This article is rather a short introduction into "How to re-create your usual list-states into a graph/object structure - in addition: with some examples using GunDB/GunJS"

What is GunDB/GunJS ?

Its an offline-first, distributed, p2p synced graph-database created by Mark Nadal. You can also create accounts (offline) and encrypt data nodes. Enough buzzwords but also true. More info's at the repo.

Example of working with the API and simple data

const gun = Gun();

gun.get('node').put({
  someString: "Mark",
  someNumber: 42,
});

gun.get('othernode').get('sub').put({
  // ...some other props
});
// sets the data in put, to the node "othernode.sub"

You have the following api's:

.get('YOUR_NODE') - just says "go to the node of YOUR_NODE" , and all other operations will be done from this one > note: this does not get the actual value
.put() - sets the data in the current node-context
.once(callback) - gets the data once
there are also other callback types which get the updates all the time - or like normal promises using .then > see Docs

Working with lists in a object/graph-world

Gun can't really work with lists, due to the syncing between peers is based on properties.

This part can be theoretically also used with any redux-like state outside of gun.

Your usual lists look (probably) this:

const myList = [ 
  {
    id: 'someId',
    data: 'string'
  },
  {
    id: 'otherId',
    data: 'other string' // or object
  },
]

If you want to move an item in your list or edit this item, you'd either:

create a new array, which has the items order / new value
or move item A to new pos X, and the re-set all other affected items to their new pos
maybe some other way I forgot

A better graph-way would be something like this:

const state = { 
  "yourlist": {
    "nodes": {
      "someId": {
                    id: 'someId',
                    data: 'string'
                },  // or just use the data, if you want to optimize
      "otherId": {
                     id: 'otherId',
                     data: 'other string'
                   },
    },
    "order": {
      "someId": 1,
      "otherId": 2,
    }
  }
}

At first glance it looks like a lot of unneeded / redundant stuff right?

With this type of state:

you only have 2 operations when switching a position of two items
you only have 1 operation when changing the data of a node

Note: Less operations, means less data to sync => faster

But you probably ask yourself, "what If I just set the whole yourlist-node, wouldn't that just work?" - Yes, if you just subscribe only to this one node, you don't need any optimization. Then you could just add the order property to node.

I choose this structure, because I had encrypted data nodes and when the whole list changed, I had to de-crypt all nodes on each new callback - which is wasted CPU / Page performance. But with that optimized structure, I could handle this much easier, without having to use something like an "object-differ":

Subscription: "the order changed" => just move item to different place
Subscription: "the data changed" => load the newest update -> decrypt -> show it

Sure, this still is not the "perfect" solution, for example: When you have 100 items, and you want to move Item 44 to 55, you'd have to do 12 operations.

If you want to optimize this even further, you could implement a linked list, with this you could even decrease the number operations, to about 3.

Note: It all depends on the amount of your data.

But how to get the correct order again?

const {nodes, order} = state.yourlist;

const orderedList = Object.values(nodes)
      .sort((a, b) => order[a.id] - order[b.id]);

Working with lists in a GunDB-World

const gun = Gun();

// Saving data
const graphNode = gun.get('your_list');
const nodes = graphNode.get('nodes');
const order = graphNode.get('order');

nodes.get('someId')
      .put({
        id: 'someId',
        data: 'string'
      });

nodes.get('otherId')
      .put({
        id: 'otherId',
        data: 'other string'
      });

order.get('someId')
     .put(1);

order.get('otherId')
     .put(2);

// react on changed data (or reading from gun) 
graphNode.on((listData) => {
  const {nodes, order} = listData;

  const orderedList = Object.values(nodes)
        .sort((a, b) => order[a.id] - order[b.id]);

  // work with the list, send it to your views etc
});

I hope this was an "easy"-ish intro to list-handling with GunDB and or object-only states, if not please write me on how it could be made better?

Dynamic Layout parts in Angular

negue — Fri, 27 Dec 2019 20:37:23 +0000

The "Problem"

While working on a simple application I wanted to show some content in the title / header bar, but this should be only visible on a specific route.

header.component.html:

<div class="header">
  <ng-container *ngIf="!showSuperSelection">{{ title }}</ng-container>
  <!-- this component is only needed in an "/selected-page" - route -->
  <app-your-big-component *ngIf="showSuperSelection">
  </app-your-big-component>
</div>

1st solution: `*ngIf`

"just" hide (*ngIf="showSuperSelection", exampled in the problem) the content in the header-bar until the specific route was opened

Pro's	Con's
easy to use, just an `*ngIf`	its "bad" if this content is a bigger component (byte size), which adds a lot of to the first loading time (every byte counts), which is only "ok" if you are building an intranet-application

2nd solution: Service - ng-template - template outlet

You could create a directive to get TemplateRef
then using a service to save that reference
then in your target view, get this reference and use it like

  <ng-container *ngIf="templateToShow$ | async as templateRef"
                [ngTemplateOutlet]="templateRef">
  </ng-container>

There you have your dynamic templates / layout parts in your app.

Pro's	Con's
now this template would be only visible when you need it, and also not adding additional bytes to load	you would've to do it for every part you need

My solution: 🚀
`npm install @gewd/ng-utils -S`

Building up on the 2nd's solution, I kinda wanted to have it a bit more dynamic, so I refacted it to be used on a ID per portal/source.

import { DynamicPortalModule } from '@gewd/ng-utils/dynamic-portal';

@NgModule({
  imports: [
    // ...
    DynamicPortalModule
  ]
})

header.component.html:

<div class="header">
  <dynamic-portal key="headerSelection" class="your-style">
    {{ title }}
  </dynamic-portal>
</div>

selected-page.component.html: which is a lazy-loaded route

<div class="stuff">
  Much stuff, details, you name it :-)
</div>

<ng-template dynamicPortalSource="headerSelection">
   <app-your-big-component></app-your-big-component>
</ng-template>

> Demo < -> Open the Dynamic Portal Component Part

Pro's	Con's
portal's / portal-sources can be placed anywhere	you'd need to use this package or copy it 😁

negue / gewd

List of utilities / components around Angular

Any ideas / issues / suggestions, write here or open an issue :)

Lazy Loaded Components - #4 NPM-Package

negue — Wed, 25 Dec 2019 22:14:47 +0000

Proudly presenting `npm install @gewd/lazy -S` 😉

Finally, the demo-repository and loader package is done. Here are some of the changes:

`Lazy`-Helper

Like the C# Lazy-Class, I created a simple helper, which holds the lazy-Value once its already have been requested.

import { Lazy } from '@gewd/lazy/utils';

// create
var myLazy = Lazy.create(() => import(/*...*/))

// callback/promise will be only executed once `.getValue()` is called
const result = await myLazy.getValue();

// once the value was loaded, it'll just use this cached promise

In the previously articles you saw that I cached the requests, in a separate dictionary, with this I don't need to handle that.

Lazy Components

As you can see the registration of LazyComponents changed a bit, now using the Lazy-Helper.

// Register the lazy component, without a module
DynamicLoaderRegistry.LazyComponents = {
  'test-comp': new Lazy<any>(() => import('./lazy-wrapper/test-comp'))
};

Use it inside your app with:

<gewd-lazy-component 
   [componentInputs]="{ testProp: 'Component Binding from outside' }"
   component="test-comp"
>
   Normal content that is visible the content isn't loaded.

   <div isLoading>
      This content will be visible while the component is loading / being created.
   </div>                  
</gewd-lazy-component>

This is useful for components that don't need any other module's or using 3rd party web-components.

Note, using components of the host-module not working yet.

But for this issue I created the lazy-components (using modules), this type of lazy-loading has been around for quite a while, there are existing libraries for this, but here is my approach :)

Lazy Module Components

DynamicLoaderRegistry.LazyModuleComponents = {
  'test-module': {
    load: new Lazy<any>(
      () => import('./lazy-wrapper/test-module-comp')
      .then(({TestModule}) => TestModule)
    )
  },
};

Your lazy module need to implement LazyModule

@NgModule({
  declarations: [
    MyModuleComp // Your Component
  ],
  imports: [
    CommonModule,
    MatButtonModule // any dependent module
  ]
})
export class TestModule implements LazyModule {
  getComponents (): LazyModuleComponentInfo[] {
    return [
      {
        name: 'MyModuleComp',  // key to access it
        componentType: MyModuleComp  // your component
      }
    ];
  }
}

Use it inside your app with:

<gewd-lazy-module-component
    [componentInputs]="{ testProp: 'Module Component Example' }"
    [componentOutputs]="outputBinding"
    moduleAlias="test-module"
    component="MyModuleComp"
    >
   Normal content that is visible the content isn't loaded.

   <div isLoading>
      This content will be visible while the component is loading / being created.
   </div>  
</gewd-lazy-module-component>

negue / gewd

List of utilities / components around Angular

Any ideas / issues / suggestions, write here or open an issue :)

ERROR in Maximum call stack size exceeded - the unsual kind

negue — Mon, 16 Dec 2019 23:41:21 +0000

Wow.... who would've known that the next issue would be right at the corner so soon. 😁

I'm working on a markdown component, and I needed a list of colon emoji keys's (:smile:) to have simple overview for them 😄

While angular was running, I created this > file < nothing happened.

When I imported it...

`ERROR in RangeError: Maximum call stack size exceeded` happened

.... ok what ... why?!

Usually this error means, some module imported a different one which imported the previous one, which imported "the different"-one ... and so on.

Or it means just any methods called itself until the stack exceeded, but it wasn't a runtime error, it was a compiler error.

Ok. Weird.

What did I do before it... "just added a file"... right?

To make sure it is not a hiccup again, I restarted angular/typescript.

The error still happens.

Removed the file and its working again?!

Lets try to debug it again.

Added the file back and started angular in verbose mode.

ERROR in RangeError: Maximum call stack size exceeded
    at needsIndentation

        function needsIndentation(parent, node1, node2) {
            parent = skipSynthesizedParentheses(parent);
            node1 = skipSynthesizedParentheses(node1);
            node2 = skipSynthesizedParentheses(node2);

Sadly I haven't took a deep-dive into typescript (yet), but today wouldn't be the day either 😁, but maybe there was already anything anywhere => searched for the first 2 lines, but I couldn't find anything useful.

Solution. 🎉

Use an array of strings and then just .join() them together. > Gist <

No template for dependency: "ConstDependency"

negue — Sat, 14 Dec 2019 00:43:59 +0000

Over the past years, I came across so many weird issues while developing and most of them I couldn't find any mentions or articles or even any stackoverflow posts.

Yesterday I had another one of these and since I want to write more articles why not create weird issues series? Welcome to the first part of this series 😁

`No template for dependency: "ConstDependency"`

While trying to add a simple worker in angular, like:

const markdownWorker = () => new Worker('./markdown.worker.ts', {
  name: 'markdown',
  type: "module"
});

I got this error message.

Like I already wrote "no real results about it", just some for No template for dependency:.

I tried multiple times switching the angular version (9 rc5 / 6), which also meant deleting and reinstalling all packages.

-- still not working

I created a new project (different folder) it just works out of box.

Compared the angular.json / tsconfig / packages - copied even the app to the other folder , in that other folder everything is working fine.

Tracked down where message issue was written:
/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/ => https://github.com/webpack/webpack/blob/v4.41.2/lib/JavascriptGenerator.js#L144-L152

Added a bit more outputs to that, and the issue was that the ConstDependency-constructor couldn't be found in the dependencyTemplates-Map. But my additional logs show that dependencyTemplates did actually had a ConstDependency key.

I rewrote the const template = dependencyTemplates.get(dependency.constructor); part to check for the constructor-names instead, and look it works. 🎉

I still don't understand why the contructor of dependency wasn't the same as in the map.

Checked my node version, maybe just an older version issue, updated to 12.13.1.

I ran npm prune, and this folder /node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/ was gone!, after the many.. removal and npm installs that folder was always there (throwing this issue)

Again started ng serve .... aaaand its gone!

😁

Did you had any of those weird issues lately? Would like to read about those, and also like to know if you could fix it anyway. :)

Senstate - Make sense of your state while debugging

negue — Tue, 29 Oct 2019 17:02:38 +0000

Having sometimes multiple console.logs while trying to find a bug that only happens with a weird state, you kinda get lost scrolling the log up and down. Or adding a bunch of break-points and then stepping into multiple ones. In the past years this happened quite often to me, and last month I thought it needs be easier to debug / see important variables while working on your project.

Fast forward until today.

Senstate "Debug" Dashboard

🎊 Introducing `@senstate/cli` 🎉

The cli acts as an hub to accept client-events (via WebSockets) and send them to the dashboard.

Current features:

watch variables / state of your application
send logs
send errors
open dashboard via qr-code on a phone / tablet (to free up a monitor/space)

Current available client libraries:

🔗 JS/TS (exampled in this article)
🔗 Rust (by 🔗 dnaka91)
🔗 Go (by 🔗 dnaka91)

more libraries in progress:

C#
Kotlin (by 🔗 dnaka91)

Add it to your project

1. Install the client

npm install @senstate/client contains the utils / methods, not actually sending anything to the hub

npm install @senstate/client-connection is used to send the data to the hub. I wanted to have it separately if for example it would send to other hubs / or different protocols.

2. Register your app:

import {setSenstateConnection} from "@senstate/client-connection";

setSenstateConnection({
  name: 'My Example App',
  // appId: 'customShortId' optional
}  /* , ws://localhost:3333 */); // custom hub-address, working locally you won't need to change the target address

Without calling setStenstateConnection all watchers/senders won't send anything to the Dashboard.

3. Low-Level Watcher / Senders

You can create a sender and call it how often you like to push the values to the Dashboard:

Watch (for variables): Sends a value of a tag:

const watcher = createWatchSender("myTag");

watcher(yourVariableOrValueToSend) // where you need it

Log

const logger = createLogSender(LogLevel.Info, "optional log name")


logger("message to send", {optionalObject: 'can be empty :)'})

Errors

Un-caught window errors will be send to the hub with:
registerWindowErrorHandler() (call once)

You can use the senders above, but there is also some code-candy 🍭

4. Field decorators

Automatically sends the value on a change to the hub 🎉

class YourClass {
  @PropertyWatcher()
  public watchProperty = 0;

  @PropertyWatcher('otherKey')
  public watchOtherProperty = 0;
}

5. RXJS pipes

import { SenstateOperators } from '@senstate/client';

myObservable$.pipe(
   SenstateOperators.watch('Watcher Tag'), // Watcher
)

other$.pipe(
   SenstateOperators.log('Log Name')
)

// Measure time between pipe-operators
const time = new TimeMeasurer(tag);

trigger$.pipe(
   SenstateOperators.measureStart(time),
   mergeMap(() => longerObservableExecution$),
   SenstateOperators.measureStep(time)
)

🚧 Whats next?

The project is still WIP, but I hope it'll help you.

The Dashboard isn't that polished yet, but I'm sure it'll be better after a few iterations.

If there are any ideas / feature requests / issues, please tell me :)

Lazy Loaded Components - #3 Extending the Loader

negue — Tue, 01 Oct 2019 17:57:36 +0000

Adding a loading Placeholder

With the current Loader, you can set a placeholder (e.g. a button to trigger the loading) and once it's loaded + created the content of the loader will be switched to the loaded component.

But what if the connection is slow? (Well .. thats the main goal of this Series 😄, to improve the initial load performance of an angular app 😅) What if the Device is slow?

You could switch the placeholder content in your host-component (The component that uses the loader and sets the placeholder). But I kinda want to have a simpler way (less duplicate code for all of your host-components.)

So let's extend the loader with another <ng-content> which only is visible during the load.

      <ng-content *ngIf="componentLoading | async"
                  select="[isLoading]"></ng-content>

The select here uses an element attribute (isLoading) to select what has to be projected there.

  @Output()
  public componentLoading = new EventEmitter();

componentLoading just emits true/false before and after the component is loading. Sadly I needed to add

  private cd: ChangeDetectorRef

  // and

  this.cd.detectChanges();

otherwise the EventEmitter / or rather the template, didn't do anything.

Example how to use it in your hosting-component:

<helpers-dynamic-loader component="my-own">
  This is a placeholder, while nothing is loading, could also have a button to trigger the load :)

  <div isLoading>
    <mat-progress-spinner mode="indeterminate" [diameter]="24"></mat-progress-spinner>
    Component loading...
  </div>
</helpers-dynamic-loader>

Click here for the latest version 🎉

Current limitations:

The component-loader works fine for custom components, but the lazy-loaded-components can't use any other components. (This weirdly happens without an error).

to be (also) done...

an example repo (started 🎉)
maybe export the loader as a bit component?

Lazy Loaded Components - #2

negue — Sun, 15 Sep 2019 21:16:16 +0000

Extending the features of the component-level lazy loader thanks to 🎉 Ivy 🎉

Continue from Part 1:

1. Inject services into lazy-loaded components:

Since the loader uses the same injector-Instance we can inject the same services as the parent Component.

Side-note: The usual lifecycle callbacks are still working on lazy-loaded components.

2. `@Input()`

To set the inputs on the loaded component, the loader uses componentInputs: any as @Input()

  private setInputs() {
    if (this.componentInstance && this.componentInputs) {
      const inputs = Object.keys(this.componentInputs);

      for (const inputKey of inputs) {
        this.componentInstance[inputKey] = this.componentInputs[inputKey];
      }
    }
  }

setInputs will be called once after the component is created and on each ngOnChanges that is called for componentInputs.

Now you can also set inputs to the loaded component 🎉

3. `@Output()`

In order to use the outputs of your loaded component, you can just set your callbacks with:

[componentOutputs]="{
 outputName: onYourCallbackMethod
}"

Since this object is just a dictionary of key: Function, its rather "easy" to subscribe to the loaded component outputs. 🎉

  private unsubForOutputs$ = new Subject();
  private setOutputs () {
    this.unsubOutputs();

    if (this.componentInstance && this.componentOutputs) {
      const outputs = Object.keys(this.componentOutputs);

      for (const outputKey of outputs) {
        if (this.componentInstance[outputKey]) {
          const emitter = this.componentInstance[outputKey] as EventEmitter<any>;
            emitter.pipe(
              takeUntil(this.unsubForOutputs$),
            ).subscribe(this.componentOutputs[outputKey]);
        }
      }
    }
  }

  private unsubOutputs () {
    this.unsubForOutputs$.next();
  }

4. Prevent loading the same components multiple times

The prior example had this:

const imported = await DynamicLoaderComponent.LazyComponents[this.component]();

That way the requested component would be loaded (HTTP-call) every time.

To prevent this we can just add a simple cache - object which holds the resolved-promises (in the same way I refactored the registration (again 😅)):

export class DynamicLoaderRegistry {
  // Registry
  public static LazyComponents: { [key: string]: () => Promise<any> } = {};
  // Loaded-Cache
  public static AlreadyLoaded: { [key: string]: Promise<any> } = {};
}


// cache the promises
    const importComponent = DynamicLoaderRegistry.AlreadyLoaded[this.component]
      || (DynamicLoaderRegistry.AlreadyLoaded[this.component] = DynamicLoaderRegistry.LazyComponents[this.component]());

    const imported = await importComponent;

Now if the same component is requested, its only loaded once 🎉

Finalizing the component-loader 🎉 (.. for now 😅)

See: Current Version

to be continued / tried / tested:

example repo / project
show that the component is loading
lazy-loaded module (and one of its components)

Any thoughts / suggestions / ideas ?

Looking for an in-place markdown editor with highlight

negue — Thu, 12 Sep 2019 18:09:36 +0000

I've probably wasted many months searching and still haven't found any working (on mobile) markdown editor / web-component.

I tried:

codemirror 5 (space-bar somehow closes keyboard on android?!)
codeflask (weird spacing between normal and highlighted text)
monaco (sadly doesn't work on mobile)
probably some more but mostly trying to fix those 3

What I'm looking for is simple inline input / web-component, which can highlight markdown-syntax that works on mobile.

So **bold** would be highlighted (and maybe also bolded, but still have the asterisks visible).

I hope somebody here has found / is using some component like this

envsure : {dev} en(v)sure packages are installed

negue — Tue, 10 Sep 2019 18:54:49 +0000

Lets begin at the why

While using storybook in a some projects, I saw the huge amount of packages that needed to be installed by this (dependencies/addons). Sure on a local repo, installing it once this can be ignored.

But when you push it to your CI and have for example different CI-runners for different kind of tests, you probably don't need to install storybook (and addons) every time for each CI. Well .. maybe one if you want to test your components? But even then only this particular CI-job would need to install the packages.

Workaround 1: `package.json` (one I used)

You could just create package.json-script-task, like:
"install-stuff": "npm install myPackage@1 otherPackage@2 andSo@0n"

This is probably ok for 3-4 packages, but not when having to add like 8+ and having to handle the versions all into one line in your package.json? I for one don't want to do that (again)

Workaround 2: `install-other-packages.sh`

Use the same npm install in a shell-script, sure you can use multiple lines to ease the overview.

This would be ok if you have one group of packages you need once but what about different groups ?

Workaround 3:

Use a different folder in your repo (which has its own package.json with these needed packages)

None of these workarounds were good enough for me. So I just made my own.

Introducing `envsure` - the unusual (node) package installer addon

You can use envsure by either having it installed globally npm install -g envsure or by using npx

Example:
envsure groupName or npx envsure groupName

It will use the envsure.json in your current directory to install all needed packages for groupName without added them to package.json.

{
  "version": 1,
  "groupName": {
    "packageA": "1.2.3",
    "packageB": "2.3",
    "and-so-on": "1"
  }
}

version: (optional) property is used to determine the json schema, in case of future updates.

Also you could just use it with your usual npm-script

...
   "premy-routine": "npx envsure groupName",
   "my-routine": "..."
...

Links: repo | npm

This is the first cli I've ever made. So I probably don't have any best-practices on what to use for node-based cli's. Sorry about that!

Also this is probably just a niche use-case, but maybe it'll help somebody.

Performance: Tree-Shake with environment.ts

negue — Thu, 05 Sep 2019 18:47:31 +0000

You probably get to the point where you only need modules that has to be there during development but not in the production build.

For example:

I use @ngrx/store-devtools nearly all the time while developing.

In order to not have this module on my production build, I thought, the solution was easy-ish, just use the environment-condition to exclude it from the build.

import {environment} from '../environments/environment';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';

const additionalImports = [];

if (!environment.production) {
  additionalImports.push(StoreDevtoolsModule.instrument({
    maxAge: 25
  }));
}


@NgModule({
  import: [
    ...additionalImports
  ]
})

app.module.ts

But the compiler still adds the module to production build: about 18 kb added for this module, sure its not "that" much but this adds up to the loading+parsing/eval-time, which you probably don't need.

Using `environment.ts` the better way :)

Since angular adds a default fileReplacements config for environment.ts and environment.prod.ts those will be only compiled into during development/production build.

We can also use this to add different modules for our development phase / or to production vice versa.

import {StoreDevtoolsModule} from '@ngrx/store-devtools';

export const environment = {
  production: false,
  modules: [
    StoreDevtoolsModule.instrument({
      maxAge: 25
    }),
  ]
};

environment.ts

import {environment} from '../environments/environment';


@NgModule({
  import: [
    ...environment.modules
  ]
})

app.module.ts

🎉 Now that module is only added during development and not in your production build 🎉

Maybe in the future it will be possible to tree-shake these kinds just by using if (environment.production), but until then we have a nice workaround.

`Protip 1:` Use an interface for your environment files.

Have a environment.def.ts-File which is something like:

export interface Environment {
  production: boolean;
  modules: any[];
}

That way both (or more?) environments will be at least consistent on the properties.

`Protip 2:` Use a path-alias

  "compilerOptions": {
    "paths": {
      "@myApp/env": ["apps/myApp/src/environments/environment"]
    }
  }

tsconfig.json

Then you can import your environment in any file just by @myApp/env instead of ../../../..and/so/on../../environment

DEV Community: negue

Senstate - Updates, C#-Client and a future look

🎊 Senstate v0.3 🎉

🚧 Whats next?

In-Web-App-Overlay

Now finally working on the C# client:

Misc

Feedback

Working with graph structures

What is GunDB/GunJS ?

Example of working with the API and simple data

Working with lists in a object/graph-world

Working with lists in a GunDB-World

Dynamic Layout parts in Angular

The "Problem"

1st solution: *ngIf

2nd solution: Service - ng-template - template outlet

My solution: 🚀 npm install @gewd/ng-utils -S

negue / gewd

List of utilities / components around Angular

Lazy Loaded Components - #4 NPM-Package

Proudly presenting npm install @gewd/lazy -S 😉

Lazy-Helper

Lazy Components

Lazy Module Components

negue / gewd

List of utilities / components around Angular

ERROR in Maximum call stack size exceeded - the unsual kind

ERROR in RangeError: Maximum call stack size exceeded happened

Ok. Weird.

Lets try to debug it again.

Solution. 🎉

No template for dependency: "ConstDependency"

No template for dependency: "ConstDependency"

😁

Senstate - Make sense of your state while debugging

🎊 Introducing @senstate/cli 🎉

Add it to your project

1. Install the client

2. Register your app:

3. Low-Level Watcher / Senders

4. Field decorators

5. RXJS pipes

🚧 Whats next?

Lazy Loaded Components - #3 Extending the Loader

Adding a loading Placeholder

Current limitations:

to be (also) done...

Lazy Loaded Components - #2

1. Inject services into lazy-loaded components:

2. @Input()

3. @Output()

4. Prevent loading the same components multiple times

Finalizing the component-loader 🎉 (.. for now 😅)

Looking for an in-place markdown editor with highlight

envsure : {dev} en(v)sure packages are installed

Lets begin at the why

Workaround 1: package.json (one I used)

Workaround 2: install-other-packages.sh

Workaround 3:

Introducing envsure - the unusual (node) package installer addon

Performance: Tree-Shake with environment.ts

Using environment.ts the better way :)

🎉 Now that module is only added during development and not in your production build 🎉

Protip 1: Use an interface for your environment files.

Protip 2: Use a path-alias

I really would like to know, if you have/use modules only during dev/prod?

1st solution: `*ngIf`

My solution: 🚀
`npm install @gewd/ng-utils -S`

Proudly presenting `npm install @gewd/lazy -S` 😉

`Lazy`-Helper

`ERROR in RangeError: Maximum call stack size exceeded` happened

`No template for dependency: "ConstDependency"`

🎊 Introducing `@senstate/cli` 🎉

2. `@Input()`

3. `@Output()`

Workaround 1: `package.json` (one I used)

Workaround 2: `install-other-packages.sh`

Introducing `envsure` - the unusual (node) package installer addon

Using `environment.ts` the better way :)

`Protip 1:` Use an interface for your environment files.

`Protip 2:` Use a path-alias