DEV Community: Piotr Sobuś

NGRX: Notify after action has been dispatched

Piotr Sobuś — Thu, 29 Dec 2022 10:43:42 +0000

While working with ngrx, sometimes we need to be notified after an action has been dispatched successfully in order to perform some kind of action (e.g: open or close a modal from a component).

One of the solution would be creating a Subject in the facade class and emit a value in the effect after the success action has been dispatched:

export class UserFacade {
  readonly userAdded$: Subject<boolean> = new Subject<boolean>();

  constructor(private readonly store: Store) {}

  addUser(user: UserPayload): void {
    this.store.dispatch(addUser({ user }));
  }
}

Our effect would look like this:

@Injectable()
export class UserEffects {
  addUser$ = createEffect(() =>
    this.actions$.pipe(
      ofType(addUser),
      switchMap(({ payload }) =>
        this.userDataService.addUser(payload).pipe(
          map(() => addUserSucceeded()),
          tap(() => this.userFacade.userAdded$.next(true)),
          catchError((error) => of(addUserFailed(error)))
        )
      )
    )
  );

  constructor(
    private readonly actions$: Actions,
    private readonly userFacade: UserFacade,
    private readonly userDataService: UserDataService
  ) {}
}

This solution is almost ideal. We don't need to directly subscribe to the effect and we can expose the information if action has been dispatched using facade pattern. On other hand, we have to create a Subject in the facade and control it in the effect. Instead, we can utilize an injectable service that provides an observable stream of all actions and listen on the success action:

export class UserFacade {
  readonly userAdded$: Observable<boolean> = this.actions$.pipe(
    ofType(addUserSucceeded),
    mapTo(true)
  );
}

With this solution, we don't have to create additional class member and emit anything in the effect. Now, we can use it in our component:

@UntilDestroy()
@Component({ ... })
export class UserComponent {
  constructor(
    private readonly userFacade: UserFacade,
    private readonly matDialogRef: MatDialogRef<UserComponent>
  ) {}

  confirmClicked(): void {
    this.userFacade.addUser({ ... })

    this.userFacade.userAdded$
      .pipe(
        filter((added) => added),
        take(1),
        untilDestroyed(this)
      )
      .subscribe(() => this.matDialogRef.close());
  }
}

If you have any questions, feel free to ask them in the comments!

Angular & Gulp: custom assets hashing mechanism

Piotr Sobuś — Mon, 21 Mar 2022 20:09:39 +0000

In this post you will learn how to create a flexible, fully customizable and easily maintainable cache busting mechanism using gulp.js for Angular applications. We'll compose a 2 step pipeline that hashes all files in the assets directory after application build is performed.

First, let's install all the required libraries.

npm install -D gulp gulp-rev gulp-rev-replace gulp-rev-delete-original

Alright, let's create our pipeline. Create a new file in the root directory and name it gulpfile.js. Good, now import all the dependencies inside the file.

const gulp = require("gulp");
const rev = require("gulp-rev");
const revreplace = require("gulp-rev-replace");
const revdel = require("gulp-rev-delete-original");

const { name } = require("./package.json");
const assets = `dist/${name}/assets`;

Let's create a first task that will traverse the assets folder and append unique hashes to the file names.

gulp.task("hash:revision-media", () =>
  gulp
    .src(`${assets}/**/*.*`)
    .pipe(rev())
    .pipe(revdel())
    .pipe(gulp.dest(assets))
    .pipe(rev.manifest())
    .pipe(gulp.dest(assets))
);

I will briefly describe each step:

(1) locates all matching files and reads them into memory to pass through the stream

Having inserted this pattern, gulp will match any file with any extension in any directory. If you want to target a concrete extension or multiple extensions, use a glob pattern syntax {x1,x2,..,xn}, e.g: *.{jpg,jpeg,png}

(2) hashes a file, e.g: mylovelydog.png -> mylovelydong-df1cr0g.png
(3) removes old, unused fingerprinted files
(4) writes hashed assets to build directory
(5) maps the original paths to the revisioned paths and places the directory in a manifest file
(6) writes the manifest to build directory

Now, we need to find all occurrences in our bundled output files and update them by replacing the original paths with the hashed ones using our manifest that holds all the mappings.

gulp.task("hash:replace-hashed-media-imports", () => {
  const manifest = gulp.src(`${assets}/rev-manifest.json`);

  return gulp
    .src(`dist/${name}/*.{html,css,js}`)
    .pipe(revreplace({ manifest }))
    .pipe(gulp.dest(`dist/${name}/`));
});

Almost there! Now, we will combine these two tasks into a single task.

gulp.task(
  "optimize",
  gulp.series("hash:revision-media", "hash:replace-hashed-media-imports")
);

Finally, let's set up our package.json in the way that our pipeline will run after build is complete.

"scripts": {
    ...
    "postbuild": "gulp optimize",
},

Done. I hope this post will help you building your own pipeline. If you have any questions, feel free to ask them in the comments!

Negative lookbehind alternative in JavaScript

Piotr Sobuś — Tue, 14 Dec 2021 19:28:36 +0000

Task description

One of my recent assignment was to create a function that traverses through a parsed HTML text, finds placeholders that meet a certain condition and wraps them with specific HTML tags. The condition was if a placeholder is wrapped around mark + span tag, ignore it, otherwise wrap it with those tags.

Example:

My name is {{ first_name }}. I am <b>{{ age }}</b> years old and I love <mark><span>{{ interest }}</span></mark>.

The function should find 2 occurrences and replace them. The last placeholder should be ignored.

My name is <mark><span>{{ first_name }}</span></mark>. I am <b><mark><span>{{ age }}</span></mark></b> years old and I love <mark><span>{{ interest }}</span></mark>.

First solution

In my first solution I used a negative lookbehind assertion (?<!) that basically tries to find expression A where expression B does not precede. In simpler words - match every placeholder that does not start with a span tag.

markPlaceholders(html: string): string {
  return html.replace(
    /w*(?<!<span>){{([a-z0-9_]*)}}/g,
    '<mark><span>{{$1}}</span></mark>'
  );
}

Easy.

The problem

Unfortunately, when I tried to open the application on Safari, it crashed with a following message:

SyntaxError: Invalid regular expression: invalid group specifier name

Turns out that Safari does not support negative lookbehind assertions. What a shame.

Final solution

The workaround for this problem was to pass a function as the second parameter in the replace method. This so called "replacer" will check if the placeholder starts with the mark and span tag. If it does not, we create a new element and replace it with the matched placeholder. Otherwise, we return what we have, because it already contains those tags. The function will be invoked after the match has been performed.

markPlaceholders(html: string): string {
  return html.replace(/{{[a-z0-9_]*}}/g, (match, _, idx) => {
    const hasTagsBefore =
      html.substring(idx - '<mark><span>'.length, idx) === '<mark><span>';

    if (!hasTagsBefore) {
      return `<mark><span>${match}</span></mark>`;
    }

    return match;
  });
}

I hope this example will help you if you are struggling with the same problem. Feel free to ask questions.