Skip to content

Commit

Permalink
ESBuild and improvements
Browse files Browse the repository at this point in the history
- Removed TS and JS tasks from gulpfile
- Instead, esbuild.mjs is used to compile almost all JS and TS code, performance improved from > 10s to < 300ms
- Moved webcomponent code out of the src directory so that Gulp can still handle that
- Removed Flurl dependency from user profile page
- Added null-safety instead
  • Loading branch information
Atulin committed Nov 13, 2023
1 parent 5e560d8 commit 353560b
Show file tree
Hide file tree
Showing 60 changed files with 1,775 additions and 1,526 deletions.
31 changes: 17 additions & 14 deletions Ogma3/Areas/Identity/Pages/Account/Manage/Index.cshtml.cs
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
using System;
#nullable enable

using System;
using System.ComponentModel.DataAnnotations;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using FluentValidation;
using Flurl;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
Expand All @@ -16,6 +17,7 @@
using Ogma3.Infrastructure.CustomValidators.FileSizeValidator;
using Ogma3.Infrastructure.Extensions;
using Ogma3.Services.FileUploader;
using Utils.Extensions;

namespace Ogma3.Areas.Identity.Pages.Account.Manage;

Expand All @@ -39,19 +41,20 @@ OgmaConfig config
_context = context;
}

[TempData] public string StatusMessage { get; set; }
[TempData] public string StatusMessage { get; set; } = "";

[BindProperty] public InputModel Input { get; set; }
[BindProperty] public required InputModel Input { get; set; }

public class InputModel
{
public string Username { get; init; }
[DataType(DataType.Upload)] public IFormFile Avatar { get; init; }
public string Username { get; init; } = "";
[DataType(DataType.Upload)]
public IFormFile? Avatar { get; init; }

public bool DeleteAvatar { get; set; }
public string Title { get; init; }
public string Bio { get; init; }
public string Links { get; set; }
public string Title { get; init; } = "";
public string Bio { get; init; } = "";
public string Links { get; set; } = "";
}

public class InputModelValidation : AbstractValidator<InputModel>
Expand All @@ -76,12 +79,12 @@ private async Task LoadAsync(long? uid)
.Where(u => u.Id == uid)
.Select(u => new InputModel
{
Username = u.UserName,
Title = u.Title,
Bio = u.Bio,
Username = u.UserName ?? "",
Title = u.Title ?? "",
Bio = u.Bio ?? "",
Links = string.Join('\n', u.Links)
})
.FirstOrDefaultAsync();
.FirstOrDefaultAsync() ?? new InputModel();
}

public async Task<IActionResult> OnGetAsync()
Expand Down Expand Up @@ -138,7 +141,7 @@ public async Task<IActionResult> OnPostAsync()
}

user.AvatarId = null;
user.Avatar = new Url(_config.AvatarServiceUrl).AppendPathSegment($"{user.UserName}.png").ToString();
user.Avatar = new Uri(_config.AvatarServiceUrl).AppendSegments($"{user.UserName}.png").ToString();
// user.Avatar = Gravatar.Generate(user.Email, new Gravatar.Options
// {
// Default = new Url(_config.AvatarServiceUrl).AppendPathSegment($"{user.UserName}.png").ToString(),
Expand Down
2 changes: 2 additions & 0 deletions Ogma3/Infrastructure/PostgresEnumHelper/PostgresEnumHelper.cs
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ public static class PostgresEnumHelper

/// <summary>
/// Maps found enums marked with <see cref="PostgresEnumAttribute"/> enum and maps database enum types to them.
/// This is done only once, on startup.
/// See https://www.npgsql.org/efcore/mapping/enum.html#mapping-your-enum
/// </summary>
/// <param name="builder">Data source builder.</param>
Expand Down Expand Up @@ -58,6 +59,7 @@ public static NpgsqlDataSourceBuilder MapPostgresEnums(

/// <summary>
/// Registers enums marked with <see cref="PostgresEnumAttribute"/> enum with EF Core.
/// This is done multiple times during runtime, every time a new context gets instantiated.
/// See https://www.npgsql.org/efcore/mapping/enum.html#creating-your-database-enum
/// </summary>
/// <param name="builder">Data source builder.</param>
Expand Down
136 changes: 131 additions & 5 deletions Ogma3/Ogma3.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,137 @@
<_ContentIncludedByDefault Remove="wwwroot\js\src\club\add-story.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\src\generated\paths-internal.ts" />
<_ContentIncludedByDefault Remove="wwwroot\js\src\generated\paths-public.ts" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\account\blacklists.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\account\blacklists.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\account\invite-codes.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\account\invite-codes.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\account\register.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\account\register.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\categories.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\categories.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\components\manage-infraction-component.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\components\manage-infraction-component.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\faqs.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\faqs.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\invite-codes.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\invite-codes.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\lib\client.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\lit-components\cache-info.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\lit-components\cache-info.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\lit-components\table-info.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\lit-components\table-info.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\namespaces.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\namespaces.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\quotes.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\quotes.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\ratings.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\ratings.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\roles.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\roles.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\settings.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\settings.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\tags.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\tags.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\users.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\admin\users.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\alerts.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\chapter-reads.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\comments.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\comments.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\comment-component.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\comment-component.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\input-blog-tags-component.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\input-blog-tags-component.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\input-counter-component.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\input-counter-component.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\input-file-component.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\input-file-component.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\rating-component.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\rating-component.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\report-modal.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\report-modal.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\status-select-component.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\status-select-component.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\tag-search-select-component.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\tag-search-select-component.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\textarea-counter-component.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\textarea-counter-component.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\toggle-component.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\components\toggle-component.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\cookie-consent.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\cookie-consent.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\editors\markdown-toolbar.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\global.d.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\global.d.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\click-outside.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\click-outside.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\cookies.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\cookies.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\extensions\Number.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\extensions\Number.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\http.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\http.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\logger.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\logger.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\result.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\helpers\result.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\input-progressbars.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\local-settings.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\local-settings.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\login.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\login.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\navbar.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\notifications.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\notifications.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\passwords.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\search\blog.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\search\blog.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\search\story.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\search\story.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\shelves.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\shelves.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\site.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\themeswap.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\tts.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\tts.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\vue-directives\closeable.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\vue-directives\closeable.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\block-user.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\block-user.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\chapter-read.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\chapter-read.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\clock.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\clock.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\club-ban-button.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\club-ban-button.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\club-folder-selector.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\club-folder-selector.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\featured-in-clubs.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\featured-in-clubs.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\folder-tree.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\folder-tree.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\follow-button.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\follow-button.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\join-club-button.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\join-club-button.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\modal.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\modal.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\notifications-button.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\notifications-button.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\quote-box.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\quote-box.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\read-progress.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\read-progress.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\report-modal.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\report-modal.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\shelves-button.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\shelves-button.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\subscribe-thread-button.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\subscribe-thread-button.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\vote-button.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\dist\wcomps\vote-button.js.map" />
<_ContentIncludedByDefault Remove="wwwroot\js\bundle\components.js" />
<_ContentIncludedByDefault Remove="wwwroot\js\bundle\components.js.map" />
</ItemGroup>


Expand Down Expand Up @@ -4125,11 +4256,6 @@
</Compile>
</ItemGroup>


<ItemGroup>
<Folder Include="wwwroot\js\src-common\" />
</ItemGroup>

<!-- Automatic migrations on production -->
<!-- <Target Name="PrePublishTarget" AfterTargets="Publish">-->
<!-- <Exec Command="dotnet-ef database update" />-->
Expand Down
22 changes: 22 additions & 0 deletions Ogma3/esbuild.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as esbuild from "esbuild";

const start = process.hrtime.bigint();

const ctx = await esbuild.context({
entryPoints: ['./wwwroot/js/src/**/*.ts', './wwwroot/js/src/**/*.js'],
minify: true,
bundle: true,
sourcemap: true,
outdir: './wwwroot/js/dist',
color: true,
logLevel: "info"
});

if (process.argv.includes('--watch')) {
await ctx.watch();
console.log('Watching files...');
} else {
await ctx.rebuild();
await ctx.dispose();
console.log(`Build completed in ${(process.hrtime.bigint() - start) / BigInt(1_000_000)}ms`)
}
35 changes: 4 additions & 31 deletions Ogma3/gulpfile.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ import autoprefixer from "autoprefixer";
import mqpacker from "@hail2u/css-mqpacker";
import csso from "postcss-csso";

// JS processors
import terser from "gulp-terser";
import gulpEsbuild from "gulp-esbuild";

// Rollup
import * as rollup from "rollup";
import resolve from "@rollup/plugin-node-resolve";
Expand Down Expand Up @@ -67,36 +63,13 @@ export const css = () => pipeline(gulp.src(`${roots.css}/*.sass`),

export const watchCss = () => gulp.watch(watchGlobs.sass, css);

// JS tasks
export const js = () => pipeline(gulp.src([`${roots.js}/src/**/*.js`]),
sourcemaps.init({}),
terser(),
sourcemaps.write("./", {}),
gulp.dest(`${roots.js}/dist`),
errorHandler);

export const watchJs = () => gulp.watch(watchGlobs.js, js);

// TS tasks
export const ts = () => pipeline(gulp.src([`${roots.js}/src/**/*.ts`]),
gulpEsbuild({
outdir: ".",
minify: true,
sourcemap: true,
tsconfig: `${roots.js}/tsconfig.json`
}),
gulp.dest(`${roots.js}/dist`),
errorHandler
);

export const watchTs = () => gulp.watch(watchGlobs.ts, ts);

// Component bundle
export const components = async () => pipeline(gulp.src(`${roots.js}/src/wcomps/**/*.ts`),
export const components = async () => pipeline(gulp.src(`${roots.js}/src-webcomponents/**/*.ts`),
async () => {
const out = `${roots.js}/bundle/components.js`;
const bundle = await rollup.rollup({
input: `${roots.js}/src/wcomps/**/*.ts`,
input: `${roots.js}/src-webcomponents/**/*.ts`,
output: {
file: out,
format: "es",
Expand Down Expand Up @@ -126,8 +99,8 @@ export const watchComponents = () => gulp.watch(`${roots.js}/src/wcomps/**/*.ts`


// All tasks
export const all = gulp.parallel(css, js, ts, components);
export const watchAll = gulp.parallel(watchCss, watchJs, watchTs, watchComponents, all);
export const all = gulp.parallel(css, components);
export const watchAll = gulp.parallel(watchCss, watchComponents, all);


// Error handler
Expand Down
Loading

0 comments on commit 353560b

Please sign in to comment.